Chapter 17
Browser Objects

Browser objects are special objects that correspond to elements of a page. These objects exist on all pages, even if the page is “empty.” Each browser object corresponds to one element of the page. For example, the location object consists of all the properties related to the current URL of the document. Browser objects are also known as Navigator objects, but that term is specific to Netscape’s browser. Some even refer to them as built-in objects, but this term is completely mistaken, because built-in objects are another explicit type of objects (Date, Array, Math, String).

Although browser objects exist on all pages, they consist of nested objects that are largely content-dependent. Browser objects are the only type of objects in JavaScript that feature event handlers as a part of their structure. Although these objects are only referred to using JavaScript, they are not created via JavaScript but by HTML.

The Object Hierarchy

You may recall that objects often consist of properties that are also objects. The term nested objects is usually used to characterize such child objects. The nested structure of an object is also known as its hierarchy. The highest-level object is the one that does not have any parent object. Browser objects are classic examples for hierarchy usage, because they are deeply nested. The browser object structure is fairly complex, so it is difficult to remember each and every property at the bottom of the tree. Nonetheless, it is important to study the upper section of the hierarchy. Figure 17-1 shows the upper part of the browser object hierarchy. The window object is the topmost object in the entire structure. Everything you script in JavaScript refers to elements of the browser’s window, whether or not it appears in the page itself. Normally, it is not necessary to specify the window object when you refer to its properties. For example, the document object is a property of window, but you say document.write rather than window.document.write. The implementation of the window object as the default object throughout the script is influenced by the fact that it is solely the topmost level of the hierarchy. Once you establish a mental model of the browser hierarchy and script these objects a few times, the structure will become second nature to you.

Figure 17-1.  The browser object hierarchy.

Creating Browser Objects

As you know, you do not create browser objects via JavaScript. JavaScript is only the high-level scripting language used to refer to these objects. Browser objects existed even when the most popular browser was Mosaic or Navigator 1.0, but they were not originally implemented to facilitate interaction with the user. Since there was no way to refer to these objects, they were not stored in memory in these earlier versions.

The topmost browser objects are established when the HTML document loads in the Java- or JavaScript-enhanced browser. JavaScript lets us handle browser objects via their properties, methods, and event handlers.

Bear in mind that browser objects exist in memory as they are created by the browser. You can refer to a browser object via JavaScript only if the specified object has been laid out already. Otherwise, JavaScript will generate an error reporting that the object does not have any properties. At that moment, it is true that the object does not have properties, because the elements of the object haven’t been laid out yet.

Keep in mind that browser objects are visible objects. For example, a form’s field is a browser object, and it is visible. Because browser objects are actually made of HTML, they include event handlers that enable a response to actions by the user, who is interacting with those elements of the page.

The Topmost Objects

The window object is standing alone at the top of the browser hierarchy. The properties of this object are, therefore, very rudimentary. In this section we shall outline the most important properties of the window object.

window

This object is the top-level object of the hierarchy. It contains properties that apply to the entire window. For example, the status bar of the browser is a property of this object. It also includes a property which is actually the object itself. Sounds strange? Not really. You will find out more about this reference when we discuss windows and frames. When the document features frames, there can be several window objects in a single HTML document. Frames actually divide the page into “child” windows, so each frame has its own browser object hierarchy. You must be careful with such child windows because they can cause a collision due to the fact that several window objects have a shared property. For example, there is only one status bar in the browser, no matter which page you load (unless you open a window without a status bar). However, there can be many window objects in action on that page, each one of them optionally referring to the same status bar. You will learn more about the window object later in the book.

document

By far the most useful property of the window object is the document object. It contains properties for the current page loaded in the window. The properties of this object are content-dependent because each and every page has its own outline and elements. Almost everything in the page is a property of the document object, including links, images, forms and their elements, anchors, and more. Because each frame is a window (window object), it contains a document object as well. Even the background and the title are properties of this object. As a matter of fact, the document object is so complex that it is divided into several chapters in this book, each dealing with different properties of this object.

history

The history object is also a property of the window object. It contains properties of the URLs the user has previously visited. This information is stored in a history list, and is accessible through the browser’s menu. If the document consists of child documents in frames, each frame has its own history list, or history object. This object also contains methods enabling you to send the user’s browser to a URL found in the history list.

location

The location object contains properties of the current URL. Although you may think of URLs as simple standard structures, they are far from being that. There are many types of protocols, and various sections in every URL. There are also optional sections in the URL such as anchor names and queries.

Figure 17-2.  A standard Web page.

The following image summarizes all the browser objects:

In Figure 17-2 you can see the various top-level browser objects, except for those that deal with frames. Study the image carefully so you know the role of every object.

Summary

In this short chapter we have introduced browser object as a very important model. Mastering browser objects is the key to success in JavaScript, because JavaScript is primarily designed to enable interaction with the user via these objects. Although we did not discuss any specific browser object, you should have a clear picture of the hierarchical structure. In the following chapters we discuss various concepts related to browser objects, including their methods, properties, and event handlers. Browser objects are not dealt with specifically in these chapters, but rather they are presented as the key to many JavaScript topics.