• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Hour 18. JavaScript

Congratulations. As of the completion of Hour 17, you've covered the basics of coding SVG. The remainder of this book will deal with some more advanced topics as well as some tips on how to make your development process a bit easier.

Anyone who has done some serious code work on the Web has, at some point, run into JavaScript. Whether for image rollovers, animation, or interfacing with another technology, JavaScript has proven to be a relatively easy method to extend possibilities on the Web.

SVG also has the ability to work with JavaScript, or, more accurately, ECMAScript. ECMAScript is an open standard scripting language, whereas JavaScript is a scripting language created by Netscape that is based upon ECMAScript and that adds a few additional features. As JavaScript is the most commonly used scripting language amongst Web developers, this hour and the next will focus on it.

There are endless possibilities for using JavaScript to enhance SVG, which are limited really only by your imagination. JavaScript can pass values between documents, check user-inputted data for errors, initiate commands on an end-user's machine, and more. This hour will focus on using JavaScript to enhance usability and animation, while the next hour will use it to create a dynamic SVG graphic.

Neither of the hours in this part will go into exceptional detail on the workings of JavaScript. Rather, they will focus on setting up your SVG to work with the technology. Though all attempts will be made to explain the function and use of the scripts you will see, these two hours are dependent on some knowledge of JavaScript.

There are books devoted solely to teaching JavaScript, including Sams Teach Yourself JavaScript in 24 Hours and Sams Teach Yourself JavaScript in 21 Days.

All that said, it is still recommended that you read these hours, as they will provide you with ideas for other possibilities using SVG. At the very least, you will learn how to set up your SVG code for JavaScript interaction. Following are the main topics you will cover in this hour:

  • How to use JavaScript scripts in SVG

  • Detecting the presence of an SVG viewer

  • Creating JavaScript-powered SVG animations



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint