Working with Browser Objects in JavaScript

Many beginning JavaScript programmers have the idea that all they'll need is built in to the JavaScript language itself, but that's not so. The JavaScript language is actually very simple, and, more often than not, really serves just as a way to manipulate the objects already built in to a browser. In fact, the real richness is in those browser objects that JavaScript can work with, not so much in the language itself.

Through objects such as the document and window objects, you have access to the HTML in a web page, can open new browser windows , write to the web page, handle user events such as mouse clicks, make the browser navigate to a new location or to a page it's already been to, support drag and drop, and so on. For example, our first script used the document object's write method to write to a web page:

 <HTML>      <HEAD>          <TITLE>Our first script!</TITLE>      </HEAD>      <BODY>          <H1>Here we go!</H1>  <SCRIPT LANGUAGE="JavaScript">   <!--   document.write("Hello from JavaScript!")   // -->   </SCRIPT>  </BODY>  </HTML>

It's not just JavaScript that has access to these browser objectsany scripting language does. Programmers use JavaScript because they like the simplicity and power of the language itself, but a great deal of what people mean when they say "JavaScript programming" really is all about working with browser objects. We'll see that in this book, where there are whole chapters are devoted to the document , window , location , history , and other browser objects.

As you might gather from the name browser objects, however, there are going to be many compatibility issues here, because the Internet Explorer and the Netscape Navigator are different, and they've started off with very different sets of objects. The set of objects a browser uses is organized into an object model . An object model specifies the hierarchy of browser objects in a browserfor example, the document object (which corresponds to a web page's content) is contained inside the window object (which corresponds to the web browser window itself), and the browser's object model will show that.

Working with the different object models in the two browsers is the most difficult cross-browser issue we'll come up against. However, the story is no longer hopeless, as it once was, because of the W3C's work on the cross-browser DOM specification. Both Internet Explorer 6 and Netscape Navigator 6 do a good job of implementing the object model in the W3C DOM, as we'll see when we start discussing browser objects in depth in Chapter 4. (In fact, both browsers implement not only the W3C DOM, but also their own object models for backward compatibility.)

In this, our foundation chapter, it's essential to get an overview of the object model we'll be using in various browsers. To make things simpler and more coherent , in this chapter, I'm going to stick to the basic parts of the object models common to both browserswe'll have time enough for browser differences in Chapter 4 and later. Here, let's take a look at what will work in any scriptable browser.

In Figure 1.10, you can see a version of the object model common to both browsers. (I'll call this basic object set the common DOM model , and you can count on it being available in any browser that supports scripting.) The figure shows which objects contain which other ones. You can see in the figure, for example, how the window object contains the document object, how the document object contains form objects, and so on.

Figure 1.10. The common DOM model.

graphics/01fig10.gif

Here's a basic list of browser objects and what they are good for; familiarity with these objects is an important part of the JavaScript foundation we're building in this chapter:

document . Corresponds to the current web page's body and some parts of the head. Using this object, you have access to the HTML of the page itself, including all the links, images, and anchors in it.
form . Holds information about HTML forms in the current page; forms can contain buttons , text fields, check boxes, and all kinds of other HTML controls . An HTML control is one the user can interact with by clicking, entering text, and so on.
frame . Refers to a frame in the browser window.
history . Holds the record of the sites the web browser has visited before reaching the current page. Gives you access to methods that enable you to move back to previous pages.
location . Holds information about the location of the current web page, such as its URL, the domain name, path , server port, and more.
navigator . Refers to the browser itself, enabling you to determine what browser the user has.
window . Refers to the current browser window.

So how do you actually interact with these browser objects in JavaScript? You do that using three aspects of these objects, which we've already discussed: properties, methods, and events.