Creating a Website: The Missing Manual, 3rd Edition

Dynamic HTML

JavaScript underwent a minor revolution in the late 1990s, adding support for a set of features called Dynamic HTML (also shortened to DHTML). Dynamic HTML isn’t a new technology—it’s a fusion of three distinct ingredients:

• Scripting languages like JavaScript, which let you write code

• The CSS (Cascading Style Sheet) standard, which lets you control the position and appearance of an HTML element

• The HTML document object model (or DOM), which lets you treat an HTML page as a collection of objects

The last point is the most important. Dynamic HTML exposes the page as a collection of objects. This is a radical shift in web programming. Dynamic HTML treats each HTML element, including images, links, and even the lowly paragraph, as a separate programming ingredient that your JavaScript code can play with. Using these objects, you can change what each element looks like or even where your browser places them on a page.

HTML Objects

Clearly, Dynamic HTML requires a whole new way of thinking about web page design. Your scripts no longer look at your web page as a static block of HTML. Instead, they see a combination of objects.

UP TO SPEED: Understanding Objects

In many programming languages, including JavaScript, everything revolves around objects. So what, exactly, is an object?

In the programming world, an object is nothing more than a convenient way to group some related features or information. For example, say you want to change the picture shown in an <img> element on a web page ...