- Creating Our First Script
- Dissecting Our First Script
- Viewing Script Errors
- Browser Object Properties, Methods, and Events
- Handling Cross-Browser Programming Issues
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:
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.
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.
Figure 1.10 The common DOM model.