J3 Limited
 
Google
WWW J3Ltd
 
Window Object

Contents

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Introduction

This object is pretty important (big understatement). Its hierarchy encapsulates 99% of the JavaScript objects, it's the top level object, the browser you see before you is, in a sense a window object, as demonstrated in the open() method example.

Note1: some buttons are used to demonstrate methods. The general way of coding these is as follows:

<FORM NAME="someform">

<INPUT TYPE="button" NAME="buttonName" Value="This is the button's label" onCLick="window.alert('Message box prompt')">

</FORM>

It is important to notice the use of single quotes within the onClick handler.

The window object contains properties, some are plain values, others are objects.

The window object has methods, so that they can be made to do things:

The window object has a few event handlers defined:

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


 Properties

    defaultStatus: it's the default message displayed in the window's status bar.

    frames: is an array which can be used to access all the frames in the window.

    length: gives the number of frames in the window. This window has as a length, surprised?

The code to print this is as follows:

<SCRIPT LANGUAGE="JavaScript">

document.write(self.length)

</SCRIPT>

    name: it's the name of the window when opened with the open method. This window does not have a name.

    parent: it's a synonym to the windowName argument, and refers to a window containing a frameset (is that an array?).

    self: when coding it's good to identify the object (as in document.write(...)). The self refers to itself (as in this window in which the HTML and JavaScript is). It's useful so as to avoid confusing errors:

for example the open() method exists for both document objects and window objects. Placing the self in front means the reference is to the window and not the document.

    status: sets a transient message in the status bar of the window.

    top: refers to the topmost navigator window.

    window: refers to the current window (same as the self property).

    document: this one's an object. It deals with the content of the window, such as the title, colours, and forms.

    frame : this one's also an object It's used to plaster more than one htm file into the same window, seperating them by dragable splitters.

    location: this object contains the properties of the current URL.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Methods

  • alert: displays an alert dialog box.

syntax: window.alert("message")

The code to display such a box is as follows:

<SCRIPT LANGUAGE="JavaScript">

window.alert("Alert message goes here!")

</SCRIPT>

  • close: in this way a window can be closed (see open example)

syntax: window.close()

It is important to put the window reference before the close command, otherwise the document is closed instead. This command can be used to close the current window or other windows, if the reference to it is known.

  • confirm: displays a dialog box with OK/CANCEL buttons. The method returns true if the user pressed OK, false if the user pressed CANCEL.

syntax: returnValue=confirm("Your message goes here")

  • open: opens a new window. The window can be in the form of another browser window, or just a plain window.

syntax: window.open("URL filename", "windowName" [ "optionalFeatures" ] )

The [ and ] do not appear in code, they just signify that the entries within are optional, a | means or..

optionalFeatures: must be enclosed within quotes, and no spaces may be used to seperate options, only a comma. These are the available options:

toolbar[=yes|no] | [=1|0]

create the navigator toolbar with the Back and Forward buttons?

location[=yes|no] | [=1|0]

create the location entry field?

directories[=yes|no] | [=1|0]

create the standard navigator buttons (What's new ...)?

status[=yes|no] | [=1|0]

create the status bar at the bottom of the window?

menubar[=yes|no] | [=1|0]

create a menubar at the top of the window?

scrollbars[=yes|no] | [=1|0]

create horizontal and vertical scrollbars if needed?

resizeable[=yes|no] | [=1|0]

allow window to be sized by the user?

width=pixels

window width

height=pixels

window height

example:

<SCRIPT LANGUAGE="JavaScript">

window.open("WINLET.HTM", "SomeName", "toolbar=1,location=1,directories=1,status=1,menubar=1")

</SCRIPT>

  • prompt: displays a dialog box prompting the user to enter something (number or text).

syntax: enteredText = window.prompt(message, [inputDefault])

example:

<SCRIPT LANGUAGE="JavaScript">

window.prompt("Enter something")

</SCRIPT>

  • setTimeout: evaluates an expression after a specified number of milliseconds have elapsed.

syntax: timeOutHandle=setTimeout(expression,milliseconds)

The expression can either be a string expression or an object's property. A string expression could be a call to a function.

The returned value is a "handle" to the timeout. This handle can be used to cancel the call (the expression will not be evaluated).

example:

<form name ="ll" >

<INPUT TYPE="button" VALUE="Click and wait 3 seconds" NAME="second_wait" onClick="ha=setTimeout(&quot;alert('Your time is up')&quot;, 3000)">

</form>

  • clearTimeout: cancels a timeout.

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]


Event Handlers

  • onLoad: this event occurs when a document is loaded, or all the frames within a <FRAMESET> are loaded.

Example:

<BODY onLoad="alert('this document is loaded')">

  • onUnload: this event occurs when a document is exited. Code can be attached to the <BODY> or <FRAMESET> tags.

Example:

<BODY onUnload="alert('Good bye')">

[Contents] [Tutorial] [Object Hierrachy] [Language] [Expressions] [Statements]

  Copyright 2000 J3 Ltd Permission is granted to reproduce material on this page, on the condition that a reference to "WWW.J3Ltd.com" is given as the source of the material.