34,333
edits
Changes
no edit summary
<hr>
The JavaScript ''window object'' sits at the top of the JavaScript Object hierarchy and represents the browser window (or windows if you have more than one browser window open at any one time). Up until this chapter we have focused on the internals and syntax of JavaScript. In this chapter we will begin to make things happen on the screen (which, after all, is one of the main purposes of JavaScript). The window object allows developers to perform tasks such as opening and closing browser windows, displaying alert and prompt dialogs and set setting up timeouts (specifying an action to take place after a specified period of time). Although Timeouts are a feature of the window object we will cover them in the [[JavaScript Timeouts]] chapter, rather than in this chapter.
== Referencing the JavaScript window Object ==
* '''window.defaultstatus / window.status''' - ''defaultstatus'' specifies the default message displayed in the browser status bar. ''status'' specifies a temporary message to display in the browser status bar in place of the default. Disabled in many browsers.
* '''window.frames[]''' - If the window contains frames this array holds the arrary array of frame objects (see [[JavaScript Arrays]] details on accessing arrays).
* '''window.name''' - Windows opened by a script must be given a name. This property contains the name of the corresponding window object.
<th>Setting<th>Explanation</th>
<tr>
<td>width<td>Specifies the intial initial width of the browser client window (see innerWidth for size of content area)</td>
<tr>
<td>height<td>Specifies the intial initial height of the browser client window (see innerHeight for size of content area)</td>
<tr>
<td>innerWidth<td>Specifies the intial initial width of the window content area</td>
<tr>
<td>innerHeight<td>Specifies the intial initial height of the window content area</td>
<tr>
<td>outerWidth<td>Specifies the intial initial width of the navigator window</td>
<tr>
<td>outerHeight<td>Specifies the intial initial height of the navigator window</td>
<tr>
<td>toolbar<td>Specifies whether the window should contain the browser toolbar or not</td>
</table>
The height, width and postion feature position features are set using numbers. The remaining feature options can be set using ''true'' or ''false'' values (also ''yes'', ''no'' and ''1'' and ''0'' can be used in place of ''true'' and ''false''). An absent attribute is considered to be false. The following example creates a new window with a menubar, specific dimension and no toolbar:
<pre>
== Closing Browser Windows using JavaScript ==
A window can be closed using the window object's ''close()'' method. The name of the window (specified in the ''open()'' method ) should be referenced when performing a close so that you are certain to close the correct window. For example the following code creates a new window and creates a pushbutton which, when clicked, closes the new window:
<pre>
</pre>
This will close the window that opened the window in which the above script is run.
== Moving and Resizing Windows ==
A window can be moved to specific coordinates on the screen using the window object's ''moveTo()'' method which takes x and y coordinates as arguments. The following example move moves a new window to location 100, 200 on the screen when the "Move Window" button is pressed:
<pre>
</pre>
In addition to moving a window to a specific new location is is also possible to move a window relative to its current location on the screen using the ''moveBy()'' method of the JavaScript window object. Once again the method takes x and y values that are added to the current x and y coordinates of the specified window. Negative values can be used to change the direction of the movement:
<pre>
== Changing Window Focus ==
When a window is the currently selected window on the screen it is said to have ''focus''. Typically, clicking with the mouse pointer in a window gives that window focus. With JavaScript it is possible to programmitically programmatically change the focus of a window using the ''focus()'' and ''blur()'' methods. The following example displays a new window, blurs it so that the opening window still has focus and provides a button to switch focus to the new window:
<pre>
</pre>
* '''confirmation''' - used when a yes or no response needs to be obtained from the user. This dialog type displays with a message and "OK" and "Cancel" buttons. The ''confirm()'' method takes the message to be displayed to the user as an argument and retruns returns ''true '' or ''false '' depending on whether the user pressed "OK" or "Cancel":
<pre>
</pre>
* '''prompt''' - designed to enable information to be obtained from the user. The dialog conists consists of a message to the user, a text input field for the entry of data and OK and Cancel buttons. The ''prompt()'' method takes the message to be displayed as an argument and retruns returns the value entered by the user:
<pre>