JavaScript Object Model

CIW Website Design Manager Course Section 2, Part A1, Chapter 5

Object Hierarchy Model

A good understanding of this hierarchy and the concept of containership will be of great benefit as we continue with this section. Containership means that one object is contained in, or belongs to, another higher object.

Window Object

The window object is, perhaps, the object you will use the most. It is also the default object, which means that when referencing it's contained objects and methods, you do not need to specify the window object itself. For example: alert() is a window method, if window was not the default object you would need to type window.alert().

The window object has a number of properties, methods and event handlers. Some of these properties are detailed below:

The Window Object
Property	Description
frames	An Array object that holds information on the frames in the window
parent	A string value containing the name of the parent window
name	A string value containing the name of this window
length	An integer value containing the number, or count, of the frames referenced in the frames Array
status	The status bar text
defaultStatus	Default status bar text
self	A string value containing the name of the current window
window	An alternative name for self or name
top	A string value containing the name of the topmost window

Window Open() Method

The window open method has three parameters, URL, name and Feature List. For example you may have a line like: newWindow = open("test.html", "myWindow", "width=250, height=250, toolbar=no").

newWindow is a variable that holds a pointer to the new window object.

test.html is the page to be opened in the new window. An empty string for this parameter will open a blank window, which may be populated with the document.write() method.

myWindow is the name of the new window. This is not the name used for scripting, but can be used as the target attribute for hyperlinks and forms.

The third parameter is the feature list which can be any of the values shown below:

open() Feature List Values
Attribute	Description
toolbar	Creates the standard toolbar
location	Creates the location entry field
status	Creates the status bar
menubar	Creates the menu at the top of the window
scrollbars	Creates scroll bars, when required should the document be larger than the window
resizable	Enables window resizing by the user
width	Specifies the window width in pixels
height	Specifies the window height in pixels
top	Specifies the top Y coordinate where the window will be opened. (Not supported in all browser versions)
left	Specifies the left X coordinate where the window will be opened. (Not supported in all browser versions)

The value of these attributes is 0/1 or yes/no except the width and height attributes where you specify the number of pixels.

Dot Notation

In the JavaScript Object Hierarchy Model, objects are divided into three groups: browser objects, language objects and form field objects. These objects exist at different levels in the hierarchy and the objects will form a Parent.Child relationship. This dot notation is used to reference any specific object within the hierarchy.

An example using the dot notation would be a line: myWindow.document.bgcolor="lightgrey";

With Statement

This is a very useful feature to minimise the amount of code produced, and improve the readability of the code:

For example the following code:

myWindow.document.open();
myWindow.document.bgcolor = "lightblue";
myWindow.document.fgcolor = "white";
myWindow.document.write("<H2>Hello World!</H2>");
myWindow.document.close();

can be rewritten as

with (myWindow.document)
{
   open();
   bgcolor = "lightblue";
   fgcolor = "white";
   write("<H2>Hello World!</H2>");
   close();
}

Much simpler and much cleaner, I'm sure you will agree. Any object can be treated in this way.