Previous Contents Next
9. Window Properties & Methods

Date, Math, and String objects are built into the JavaScript language. They are always there for your use in the format described. Other instances of objects arise in the course of building a web page-- most prominently, windows and documents. When you open a page, the browser creates a particular instance of a window from the window class; within the window it creates a document instance from the document class. The properties and methods associated with these objects then become available to you.

Window Properties

The window object contains properties and methods to provide information about the window and offer ways to manipulate the window and the document it contains. The following table describes some of the window object properties:

Properties of the window Object
Property Description
defaultStatus The default text in the window's status bar.
history The window's history list.
length The number of frames in the window.
name The window's name.
self A synonym for the current window.
status The text currently displayed in the window's status bar.
window The current window.
 
Properties That Are Objects Themselves
document The document displayed in the current window.

 

The most-often used properties are self and window. These are used to refer to the current window (the one containing the script reference to self or window). When referring to the current window, you do not always have to use the self.property or window.property format. If the property reference appears in a JavaScript function, self. and window. are assumed defaults; However, if the property reference appears in an event handler, self. and window. must prefix the property. Therefore, to be consistent and to make your scripts more readable, you should probably always use the full, dotted reference.

The document property is also a reference to an object containing its own properties, that object being the document appearing the the window. (We'll get to the properties and methods of the document object in a few moments.) To refer to a property of this document from the current window, the reference is to window.document.property or self.document.property.

When referring to the properties of a secondary window (one that is opened from the current window), you must prefix the property with the window's name. Thus, if you opened a secondary window called Win1 from the current window, a reference to, say, the status bar of that window would read: Win1.property.

The scripts and buttons below illustrate these references. In the first example a script in the onclick event handler of the button writes to the status bar of the current window:


<FORM>
<INPUT TYPE=BUTTON VALUE="Write to Status Bar"
onclick = "window.status = 'This is written to the status bar.' " >
</FORM>


In order to make the status message disappear, refresh the window. Some people don't like to be irritated by status messages that replace the default messages showing window activity. So use them judiciously, if at all.

In the second example, a similar script appearing in a function opens a secondary window and writes to its status bar (You'll need to move your cursor into the window to see it write.):


<SCRIPT>
function WinOpen ( )
{
    Win1 = open ("","","width=400,height=100,status")
    Win1.status = "This is written to the status bar."
}
</SCRIPT>

<FORM>
<INPUT TYPE=BUTTON VALUE="Write to Secondary Status Bar"
onclick = "WinOpen ( )" >
</FORM>


Window Methods

Windows also have methods associated with them. These methods become available to the instances of the window class created when you open a new window. The following table summarizes these methods:

Methods of the window Object
Method Description
alert ( ) Opens an Alert message box.
clearTimeout ( ) Stops the setTimeout ( ) method.
close ( ) Closes a window.
confirm ( ) Opens a Confirm message box. Returns true if the user clicks the "OK" button or false if the user clicks the "Cancel" button.
open ( ) Opens a new, secondary window.
prompt ( ) Opens a Prompt message box. Returns the typed text.
setTimeout ( ) Waits a specified number of milliseconds.

 

Here is where those Alert, Confirm, and Prompt message boxes come from! They are created with the alert ( ), confirm ( ), and prompt ( ) methods provided by the window object when you open or create a window. Thus, they are available for use in this current window:


<INPUT TYPE=BUTTON VALUE=" Alert Box "
onclick = "alert ('\nThis is an Alert box') " >

    

     <INPUT TYPE=BUTTON VALUE="Confirm Box"
onclick = "
    if (confirm ('This is a Confirm box') ) {
        alert ('\nYou clicked the OK button') }
    else {
        alert ('\nYou clicked the Cancel button') } "
>

     <INPUT TYPE=BUTTON VALUE=" Prompt Box"
onclick = "alert ('\nYou typed:\n\n' + prompt ('Type here:', '')) " >


More formally, the methods are called from the current window by window.alert ( ), window.confirm ( ), and window.prompt ( ) (or by using self. instead of window.). For the current window these prefixes are assumed.

The open and close methods are used when you create secondary windows. The general format is:

[WindowNameJ =] open ( "[URL]", "[WindowNameH]", ["window features"] )

A WindowNameJ is optional but must be provided if you plan to refer to this window from another JavaScript script. The assignment returns the window opened with the open ( ) method to this name.

The URL is the location of the document that will be placed in the window. It is optional if you don't intend to open an HTML document in the window--if you intend, instead, to leave it blank or write to a new document. In this case, you still must provide the quotes, back-to-back ("") to indicate a null name.

The WindowNameH is provided only if the name will be used in an HTML <A HREF=> or <FRAME> tag reference. It is the name used as a TARGET in these tags. Otherwise, you provide a null name ("").

The window features is a list of window characteristics. You can choose from:

toolbar - displays the browser's toolbar;

location - displays the browser's location, or URL, bar;

directories - displays the browser's Directory Buttons bar;

status - displays the browser's status bar;

menubar - displays the browser's menu bar;

scrollbars - displays the window's scroll bars (which will appear only if necessary);

resizable - permits the user to resize the window;

width= - sets the width of the window, in pixels;

height= - sets the height of the window, in pixels.

The set of parameters must be enclosed, as a group, in quotes and not contain any embedded spaces ("resizable,width=250,height=300"). You can choose a feature by specifying feature=yes, or feature=1, or by simply using its name; you eliminate a feature by specifying feature=no, or feature=0, or by omitting its name. If you do not include any features in the list, JavaScript assumes you want them all.

Here are some typical examples:

function WinOpen1 ( )
{
open ( "", "")
}

This script opens a secondary window with no document but with full features.

function WinOpen2 ( )
{
open ( "", "", "location,status,width=300,height=200")
}

This script opens a secondary window with no document but with only the URL bar and status bar showing.

<SCRIPT>
function WinOpen3 ( )
{
    open ( "reserved.html", "",
    "status,toolbar,scrollbars,width=200,height=250")
}
</SCRIPT>

This script opens a secondary window with a status bar, toolbars, and scrollbars, and automatically loads the JavaScript reserved words document.

<SCRIPT>
function WinOpen4 ( )
{
    open ( "", "Win4",
    "scrollbars,width=200,height=250")
}
</SCRIPT>

<A HREF="reserved.html" TARGET="Win4"
onclick = "
    if (navigator.appName = 'Netscape' )
        { Win4.focus ( ) } "
>
Load Reserved Words</A>

This script opens a secondary window and assigns the WindowNameH "Win4" since the window will be referenced by an HTML tag. The <A HREF=> tag targets the window for the JavaScript reserved words document. (Also, the onclick script in the tag uses the focus ( ) method to bring the secondary window to the front if the user's browser is a Netscape browser.)

Load Reserved Words
<SCRIPT>
function WinOpen5 ( )
{
    Win5 = open ( "reserved.html", "",
    "scrollbars,width=200,height=300")
}
function WinClose5 ( )
{
    Win5.close ( )
}
</SCRIPT>
The first function opens a secondary window and assigns the WindowNameJ "Win5" since the window will be referred to again within JavaScript. The second function closes the window "Win5."


Users can always close windows by clicking on the "X" in the upper-right corner of the window. Alternately, you can provide a close button in the secondary window with an onclick script that uses the self.close( ) or window.close( ) method:

<FORM>
<INPUT TYPE=BUTTON VALUE="Close"
onclick = "self.close ( )" >
</FORM>

Writing to Documents

Not only can you simply open documents in secondary windows, you can write to them. Plus, you can open and write to more than one window at a time. The following extended example shows how to open a secondary window containing the list of window features. The features are labels for a series of radio buttons which, when clicked, open another widow that displays the definition for the feature:

Let's step through this example. The above button and associated script open a secondary window in which is displayed the document "features.html."


<SCRIPT>
function OpenFeatures ( )
{
    open ("features.html", "", "width=150,height=275")
}
</SCRIPT>

<FORM>
<INPUT TYPE=BUTTON VALUE="Window Features"
onclick = "OpenFeatures ( )" >
</FORM>


The document "features.html" contains the code to define the radio buttons with their window-feature labels. An onclick event handler in each button definition calls a function named WriteDefinition ( ) to which is passed a numeric value (0 thru 8) representing the index number of the feature in the list.

<CENTER>
<H3><FONT COLOR=BLUE>Window Features</FONT></H3>
</CENTER>
<FORM><FONT COLOR=GREEN>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 0 )" >toolbar<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 1 )" >location<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 2 )" >directories<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 3 )" >status<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 4 )" >menubar<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 5 )" >scrollbars<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 6 )" >resizable<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 7 )" >width=<BR>
<INPUT TYPE=RADIO NAME="Definition"
onclick = "WriteDefinition ( 8 )" >height=<BR>
</FONT></FORM>


The function, in turn, opens a second window and writes the corresponding definition:

<SCRIPT>

var Definitions = new Array ( )

Definitions [0] = "Displays the browser's toolbar."
Definitions [1] = "Displays the browser's location, or URL, bar."
Definitions [2] = "Displays the browser's Directory Buttons bar."
Definitions [3] = "Displays the browser's status bar."
Definitions [4] = "Displays the browser's menu bar."
Definitions [5] = "Displays the window's scroll bars (which will appear only if necessary)."
Definitions [6] = "Permits the user to resize the window."
Definitions [7] = "Sets the width of the window, in pixels."
Definitions [8] = "Sets the height of the window, in pixels."

function WriteDefinition ( Which )
{
    DefWin = open ("","secondary", "width=300,height=75")
    DefWin.document.write ( "<FONT COLOR=BLUE><B>Definition: </B></FONT>" +
        Definitions [ Which ] + "<BR>")
    DefWin.document.close ( )
    if (navigator.appName=='Netscape') {
        DefWin.focus ( ) }
}
</SCRIPT>


First, an array named Definitions is created to hold the values that will be displayed as the definitions. The values in the nine elements of the array correspond to the nine terms in the radio buttons.

The function WriteDefinition ( Which ) receives as argument Which the numeric value (0 thru 8) passed from the radio button that was clicked . The 0-thru-8 value associated with the radio button term corresponds to the 0-thru-8 definition value in the array.

The function then displays the definition for the term. First, the function opens a secondary window and associates it with the name DefWin. Recall that a secondary window must be named if it will be referred to in a script. Second, it writes to the newly opened window. As part of the output, the function writes the appropriate array element as the definition of the term clicked. And it writes a line-break character (<BR>) to ensure that the definition is displayed. Next, the document is closed, meaning that this is the end of the document output stream. Finally, for Netscape browsers, the window is brought to focus so that it is the top window on the screen.

A better method of calling up the definitions probably would be to provide a list of linked terms. That is, the list would be defined something like:

<A HREF="" onclick = "WriteDefinition (Which)">toolbar</A>

However, under Navigator, the onclick event handler does not work correctly within an anchor tag. So, until that feature works, you are forced to use buttons for links.

Slide Shows

By using the setTimeout method you can create a slide-show effect. The general format is:

setTimeout ( "instruction", time-delay-in-milliseconds )

The "instruction" is the JavaScript statement to delay. In the following example, this method is used to display a series of documents with a 9-second delay between each. The reason for the extended delay is to allow time for graphic images to originally load over a modem. You can change to a shorter delay by typing a new value in the text box and clicking the button.


    Delay seconds

<SCRIPT>
function PigShow ( Delay )
{
    Seconds = eval (Delay) * 1000

    PigWin = open ("pig1.html", "", "width=300,height=175")

    setTimeout ( "PigWin.location = 'pig2.html' ", (Seconds * 1) )
    setTimeout ( "PigWin.location = 'pig3.html' ", (Seconds * 2) )
    setTimeout ( "PigWin.location = 'pig4.html' ", (Seconds * 3) )
    setTimeout ( "PigWin.location = 'pig5.html' ", (Seconds * 4) )

    setTimeout ( "PigWin.close ( )", (Seconds * 5) )
}
</SCRIPT>

<FORM>
<INPUT TYPE=BUTTON VALUE="Pig Show"
onclick = "PigShow ( form.Delay.value )" >
Delay <INPUT TYPE=TEXT VALUE="9" NAME="Delay" SIZE=3> seconds
</FORM>


Note that the time delay is increased for each window. If you don't do this, the script will attempt to display all windows at the same time delay.

The clearTimeout ( ) method is used to halt a timer. In order to use it you must name the timer in the setTimeout ( ) method:

TimerName = setTimeout ( "instruction", time-delay-in-milliseconds )

permitting you to stop the delay with clearTimeout ( TimerName ). This method would be used most often if you have defined more than one timer and wish to selectively halt their actions.

 
Windows, of course, are populated with documents. On the next page we look at the properties and methods associated with the document object for additional control over what happens in windows.


Previous Contents Next