Lesson Eight

Many of the topics about windows and frames that we are going to discuss are part of the JavaScript object model, which is a hierarchy of objects related to an HTML document. The top-most object of the model is the Window object which represents a window or a frame in a window. This is mostly used in referencing a secondary window that you are using to display something you want to draw attention to. This object branches out into five new objects: Document, Frame, Location, History, and Navigator.

In the Document object the two lines you are already familiar with, the write() and writeln() methods, refer to the Document object. Within the Document object are several objects that all create an HTML document. You might be familiar with the form object and the anchor object in HTML. If you do know some Java, then you are familiar with the applet object. Below is the document object model. There are more objects than are shown, but that would be too many to prove the point.

• window
  • location
  • frames
  • history
  • navigator
    • plug-ins
    • mime type
  • event
  • screen
  • document
    • links
    • anchors
    • images
    • filters
    • forms
      • textarea
      • text
      • file upload
      • password
      • hidden
      • submit
      • reset
      • radio
      • checkbox
      • button
      • select
        • options
    • applets
    • embeds
    • plug-ins
    • frames
    • scripts
    • all
    • selection
    • stylesheets
    • body

How does this work? If you had a form that had a drop-down box, the path would be window.document.forms.select.options. To refer to a JavaScript object, you must refer to all its ancestors. Consider you are using a form that needs to process data. In order to determine the index number of the currently selected option you are using, you would type something like this:

var ModelNumber = document.PRODUCT.MODEL.selectedIndex;

...where document refers to the document you created the form on, PRODUCT is the form you created in the document, and MODEL is the object you where the selectedIndex can be found. You can omit window because what you are viewing this tutorial in is the window() object. There will be times you need to use the window object like when you are handling events because the event-handlers automatically assume you are using the document.

The same holds true if you are using other JavaScript objects. Say you don't have the variable set and you want to display an alert box, you must use alert(document.PRODUCT.MODEL.selectedIndex);. For the <IMG> tag, the proper syntax would be document.myImage.src;.

Another way to refer to the window object is with the self object. self refers to the current active window. The two codes below can be considered to be identical:

window.alert("text string");
self.alert("text string");

Below are two tables that describe the properties and methods that are associated with the window object:

Property	Description
defaultStatus	Default text that is written to the status bar.
document	A reference to the Document object.
frames[]	An array listing the frame objects in a window.
history	A reference to the History object.
location	A reference to the Location object.
opener	The Window object that opens another window.
parent	The parent frame that contains the current frame.
self	A self-reference to the Window object - identical to the window property.
status	Temporary text that is written to the status bar.
top	The topmost Window object that contains the current frame.
window	A self-reference to the Window object - identical to the self property.
name	The name of a window.

Method	Description
alert()	Displays a simple message dialog box with an OK button.
blur()	Removes focus from a window.
clearTimeout()	Cancels a set timeout.
close()	Closes a window.
confirm()	Displays a confirmation dialog box with OK and Cancel buttons.
focus()	Makes a Window object the active window.
open()	Opens a new window.
prompt()	Displays a dialog box prompting a user to enter information.
setTimeout()	Executes a function after a specified number of milliseconds have elapsed.

As you saw in the second table, you are able to create pop-ups by opening a new window using the window.open("URL","name",options); method. You can include all or none of the arguments in the open() method, but the less you add, the less your users will be able to do with the new window. This is good if the pop-up is meant to be informational, however, if you want the user to go somewhere or do something after the window pops up, you'll want to add the appropriate options. To show how this is done, click here to open Google in a new window. The table below shows all of the options you can use with the open() method.

Name	Description	Setting
directories	Includes directory buttons.	yes/no
height	Sets the window's height.	# of pixels
location	Includes the URL Location box.	yes/no
menubar	Includes the menu bar.	yes/no
resizable	Determines if the new window can be resized.	yes/no
scrollbars	Includes scroll bars.	yes/no
status	Includes the status bar.	yes/no
toolbar	Includes the Standard toolbar.	yes/no
width	Sets the window's width.	# of pixels

One word of warning: you can only use a Window's object name to specify a target window. To control a new window, you need to assign the Window object with the open() method, such as var newWindow = open("http://www.newsite.com");. You can then set the focus or close a window by typing newWindow.focus(); or newWindow.close(); respectively.

Finally, there are four methods that are part of the Window object and are very useful in many applications. The first two are setTimeout() method and the clearTimeout() method are used to set and clear the amount of time required for a function to perform. This is how they should look:

var myTimer = setTimeout("myCodeThatExecutes", numberOfMilliseconds);
clearTimeout(myTimer);

The other two methods are setInterval() method and the clearInterval() method, which are similar to the first two except they repeatedly execute the same code. This is how they should look:

var myTimer = setInterval("myCodeThatExecutes", numberOfMilliseconds);
clearInterval(myTimer);