Add Interactivity with JavaScript

A normal web page—just regular HTML and CSS—isn’t very responsive: about the only interaction visitor have with the page is clicking a link to load a new page. JavaScript is a programming language that lets you supercharge your HTML with animation, interactivity, and dynamic visual effects. It can also make a web page more useful, by supplying immediate feedback to visitors. For example, a JavaScript-powered shopping cart page can instantly display a total cost, with tax and shipping, the moment a visitor selects a product to buy; or JavaScript can produce an error message immediately after someone attempts to submit a web form that’s missing information.

JavaScript’s main selling point is its immediacy. It lets web pages respond instantly to your visitors’ actions: clicking a link, filling out a form, or merely moving the mouse around the screen. JavaScript doesn’t suffer from the frustrating delay associated with “server-side” programming languages like PHP, which rely on communication between a web browser and a web server—in other words, JavaScript doesn’t rely on constantly loading and reloading pages. It lets you create pages that look like and respond with the immediacy of a desktop program.

If you’ve visited Google Maps (http://maps.google.com), you’ve seen JavaScript in action. Google Maps lets you view a map, zoom in to get a detailed view of streets, and zoom out to get a birds-eye view of how to get across town, the state, or the nation, all the while working from the same page. While there have been lots of map sites before Google, they always required reloading multiple web pages (a usually slow process) to get to the information you wanted.

The JavaScript programs you create can range from the really simple (such as popping up a new browser window with a web page in it) to full-blown “web applications,” such as Google Docs (http://docs.google.com), which let you create presentations, edit documents, and build spreadsheets using your web browser—all as though the program were running directly on your computer.

JavaScript programming can be difficult, but Dreamweaver has plenty of tools that let you add sophisticated interactivity to your sites—from animations to drop-down navigation menus—with just a few clicks of your mouse.

Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.