JavaScript: The Missing Manual

Chapter 5. Dynamically Modifying Web Pages

JavaScript gives you the power to change a Web page before your very eyes. Using JavaScript, you can add pictures and text, remove content, or change the appearance of an element on a page instantly. In fact, dynamically changing a Web page is the hallmark of the newest breed of JavaScript-powered Web sites. For example, Google Maps (http://maps.google.com/) provides access to a map of the world; when you zoom into the map or scroll across it, the page gets updated without the need to load a new Web page. Similarly, when you mouse over a movie title at Netflix (www.netflix.com) an information bubble appears on top of the page providing more detail about the movie (see Figure 5-1). In both of these examples, JavaScript is changing the HTML that the Web browser originally downloaded.

The first four chapters of this book covered many of the fundamentals of the JavaScript programming language—the keywords, concepts, and syntax of JavaScript. Now that you have a handle on how to write a basic JavaScript program and add it to a Web page, it’s time to see what JavaScript programming is all about. This chapter, and the next one on JavaScript events, together show you how to create the great interactive effects you see on the Web these days.

Modifying Web Pages: An Overview

In this chapter, you’ll learn how to alter a Web page using JavaScript. You’ll add new content, HTML tags and HTML attributes, and also alter content and tags that are already on ...