JavaScript 101 - Part 2

The Document Object Model

Before I can adequately explain what the Document Object Model is, you must first become familiar with a few basic concepts to do with objects.

You can think of an object as a variable that stores a state instead of a simple value. That state is reflected in the values of one or more properties. Take the arrays we just looked at, for example. An array is an example of an object. It stores a set of values, and maintains a property called length that reflects the state of the array (the number of values it contains). You access the value of the property by taking the name of the object and adding the name of the property to the end (separated by a period):

objectName.propertyName –> myArray.length

The Document Object Model (DOM for short) is a set of objects that the Web browser creates for you. Those objects and their properties reflect the browser, the currently-loaded document, and various other information. Using the DOM, it is possible for your script to access information about the Web browser it is running in and the document that is currently loaded, and even make changes to that information!

Consider the following JavaScript code:

<script language="JavaScript">  
<!--  
document.write("The browser you are running is " +  
navigator.appName + ".");  
//-->  
</script>

This shouldn't be too unfamiliar. It's just using document.write to print something into the current Web page. Look at the hilighted code, however. navigator.appName refers to the appName property of the navigator object, but nowhere in our code did we create such an object. Nevertheless, that object exists as part of the DOM, and represents the Web browser itself. The values of its properties are set automatically by the browser in which the script happens to be running at the time. For example, on your browser the above code produces the following output:

One example of using the DOM to actually alter the document that we've already seen is the so-called document.write built-in function that we just used. In addition to having values called properties, objects may have functions called methods. When invoked, those functions perform some operation related to the object. When you call document.write, you are actually invoking the write method of the document object, which exists as part of the DOM, and represents the current HTML document.

objectName.methodName(parameters) –> document.write("...")

The DOM is an extensive collection of objects, properties, and methods, and different Web browsers support slightly different DOM's (although most have basic things like document.write and navigator.appName). In his book, Dynamic HTML: The Definitive Reference, Danny Goodman presents a complete reference to the DOM's supported by Netscape Navigator and Internet Explorer browsers up to and including versions 4.0. That reference is nearly 400 pages long! As you can see, a complete presentation of the DOM and its capabilities is far beyond the scope of this tutorial, but knowing the concepts we have just presented will allow you to grasp how the examples in the rest of this article work.

A popular (if sometimes annoying) feature of the DOM is its support for creating pop-up windows. More sophisticated than adding target="_blank" to links, JavaScript pop-up windows allow you to specify the size and what features appear in the new browser window.

Creating a JavaScript pop-up window is as easy as invoking the open method of the DOM window object. The syntax of this method is as follows:

window.open(URL, windowName, windowFeatures)

URL is just a text string containing the address of the file to be loaded into the pop-up window. This works just like the href attribute of a standard link tag. windowName is also a text string, and is used to give a name to the pop-up window. This name is never actually displayed, but if you try to open another pop-up window with the same name, the browser will instead load the file into the existing pop-up window. You can also use the name of a window in the target attribute of normal a href tags to have those links load in the pop-up window once it has been created.

The windowFeatures parameter is also a string. It allows you to specify details about the window. In addition to setting the width and height of the window, you also need to list all features that you want the new window to contain. Here's a list of the features supported by both Microsoft Internet Explorer and Netscape Navigator:

• copyhistory The URL history of the current window (i.e. the set of pages accessible with the "back" and "forward" buttons) is copied to the new window.
• directories The "directory buttons" are available in the new window.
• location The URL field is displayed in the new window.
• menubar The menu bar is displayed in the new window.
• resizable The new window may be resized.
• scrollbars If the document is too large to fit in the window, scrollbars will be displayed.
• status The status bar is displayed at the bottom of the new window.
• toolbar The main button bar, with the "back" and "forward" buttons, is displayed in the new window.

The features you want the new window to posess should be listed, separated by commas (no spaces). Features not in the list will not appear in the pop-up window. If you list no features at all by only specifying the URL and window name, the window will be created with the standard elements, as configured in your browser. So, for example, to load popup.html into a resizable pop-up window 400 pixels wide and 300 pixels high with a status bar, a menu bar, and scrollbars as needed, you would use the following code:

window.open("popup.html", "popupwindow", "width=400,height=300,resizable,status,menubar,scrollbars");

Since most of the time you'll want to attach a popup window to a link, you'll need to know how to execute some JavaScript in response to a link being clicked. This sort of thing is best accomplished using event handlers, which we'll discuss next. But for the time being, here's a simple way to do it:

<script language="JavaScript">  
<!--  
function showpopup() {  
 var popwin = window.open("popup.html", "popupwindow",  
   "width=400,height=300,resizable,status,menubar,scrollbars");  
 popwin.focus();  
}  
//-->  
</script>  
 
<a href="javascript:showpopup()">Click for a pop-up window!</a>

The showpopup function we've defined here starts by calling window.open, and appears to assign this method as a value to a new variable called popupwin. In fact, the window.open method returns a reference to the window object for the newly-created window (as opposed to the window object for the current window). popupwin is therefore another window object. We use this on the next line by calling its focus method, which brings the new window to the foreground. This ensures that if a window named popupwindow existed prior to this link being clicked (for example, if the link were clicked twice in succession), the window in question would be made the active window after popup.html was loaded into it.

The following is a link created with the exact code given above: