Add Interactivity with JavaScript

A normal web page—just regular HTML and CSS—isn’t very responsive. About the only interaction visitors 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 responsive to visitors by supplying immediate feedback. For example, a JavaScript-powered shopping cart can instantly display the total cost of your purchase, 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 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” interactive programming languages like PHP, which require that a web browser communicate with a remote 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 zoom in on a map 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 from the same web page. While there have been lots of map sites before Google, they always required loading a new web page every time you changed a view (a usually slow process).

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 edit documents, build spreadsheets, and create presentations using your web browser—all as though the program were running 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 CS6: 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.