Dreamweaver CS6: The Missing Manual

Chapter 13. Adding Interactivity with JavaScript

As a web designer, you can count on one thing: The Web will always be changing. Yesterday’s technology is yesterday’s news—remember Java applets, frames, and messages that scroll in your browser’s status bar? (If you don’t, you’re lucky!) You can see the most recent web design innovations on sites like Google Maps, Flickr, and Facebook, all of which offer a high degree of interactivity without resorting to multimedia plug-ins like Flash. Google Maps, for example, lets you zoom in, zoom out, and scroll across a map of the world without loading a new web page for each view. Many of the most cutting-edge websites look and act like the kinds of complex programs you use right on your desktop computer.

JavaScript has grown from the simple language behind pop-up windows and image rollovers to a full-blown programming tool that can change the content of a web page as you look at it. It’s the key to today’s website interactivity. It can even update a page with new data that it downloads behind the scenes (that’s why you can scroll to new sections of that Google map without loading new pages). Dreamweaver, which has always tried to provide tools to meet web designers’ current needs, includes a set of JavaScript tools that let you add interactive page elements like drop-down navigation menus, tabbed panels, pop-up tooltips, and data-driven, sortable tables. That’s what this chapter is all about.