The window object is the highest level JavaScript object and corresponds to the browser window.
All objects, including the document object, are contained within a window object although normally you don't need to explicitly state it.
For example, when you use the write method of the document object you could precede it with window and it would function in the same way.
Examples of the Document Object
<script language="javascript" type="text/javascript">
// Both of these do the same thing
document.write("Hello World");
window.document.write("Hello World");
</script>
Window Properties
The window object has a number of properties that allow you to read information about the window.
The History Object
This is an array that holds the URLs of the browsing history of the window but since it's considered private information, it's not readable.
However the history method does support several methods that may be set up to be triggered by events.
The back() method does the same as the browser back button.
The forward() method moves the browser to the next URL in the history array - assuming there's a URL to move forward to.
This has a number of properties that provide information about the user's display including the size and number of colours available.
width - the screen width in pixels.
height - the screen height in pixels.
colorDepth - the bit depth of the colour palette.
availHeight - the height of the window minus the user interface features such as the Taskbar.
availWidth - the width of the window minus the user interface features such as the Taskbar.
availTop - this specifies the y-coordinate of the first pixel not allocated to user interface features.
availLeft - this specifies the x-coordinate of the first pixel not allocated to user interface features.
Examples of Reading the Screen Object
<script language="javascript" type="text/javascript">
// Print out the width, height and colour depth
document.write("Resolution = " + screen.width + "x" + screen.height + " and " + screen.colorDepth + " bit colour");
</script>
The Navigator Object
This object has a number of properties that contain information about the user's web browser.
The two most used are appName and appVersion that return the name and version of the browser respectively.
The values returned aren't straightforward so usually require JavaScript string methods to extract the information that you require.
Examples of Reading the Navigator Object
<script language="javascript" type="text/javascript">
// Print out the name and version of the browser
document.write(navigator.appName + " " + navigator.appVersion);
</script>
Window Methods
The window object has a number of methods that allow you to manipulate the window.
Dialogue Boxes
JavaScript provides simple dialogues as methods of the window object that are often triggered by an event.
alert() displays a message to the user.
confirm() asks the user to click an OK or Cancel button and returns true of false.
prompt() asks the user to enter a string and returns that string.
Since both confirm() and prompt() require user input, processing of the code following them stops until they return a value.
<script language="javascript" type="text/javascript">
var name = prompt("Please enter your name");
document.write("Welcome " + name);
</script>
Opening Windows
The open() method opens a web browser window, has four optional arguments and returns a reference to the window object.
Note: Normally there's no need to precede objects, properties and methods with window but the document object also has an open() method so in some cases it's required.
The URL of the document to display in the window - if omitted the window will be empty.
The name of the window, which can be used as the target of forms etc. If a window already exists with that name then this is used instead of opening a new one.
A list of features specifying size etc. If omitted then the window has default size with all the standard features.
A Boolean value that only has effect if a URL is specified and a window is named and that window already exists.
True means replace the current entry in the window's browsing history with the URL.
False means create a new entry in the window's browsing history - which is the default.
A List of Window Features
Below is a list of the most common features used when opening a window.
Features are supplied as a list of name/value pairs separated by commas without whitespace.
Feature
Description
Values
fullscreen
Whether the window should be in full screen mode or not.
0 or 1
width
The width of the window.
pixels
height
The height of the window.
pixels
top
The y-coordinate of the top left hand corner.
pixels
left
The x-coordinate of the top left hand corner.
pixels
resizable
Whether the window can be resized or not.
0 or 1
scrollbars
Whether the window will have scroll bars or not.
0 or 1
menubar
Whether the window will have a menu bar or not.
0 or 1
statusbar
Whether the window will have status bar or not.
0 or 1
location
Whether the window will display the address line or not.
0 or 1
toolbar
Whether the window will have a tool bar or not.
0 or 1
Note: If no features are supplied then the window will have all the default features but if only some features are supplied then those not supplied will be missing from the window.
Example of window.open()
<script language="javascript" type="text/javascript">
var x = window.open("http://www.yourdomain.com","mywindow","width=400,height=400");
</script>
Closing a Window
The close() method closes a web browser window.
If the statement window.close() is used within a window then it will close that window.
If you've opened a new window from within another window then you can close the new window from within the original window by using the reference that was returned when the open() method was used.
Examples of Closing Windows
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
/* This script opens a window and returns
a reference to the window in the variable x */
var x = window.open("http://www.yourdomain.com","mywindow","width=400,height=400");
</script>
<!-- This will close the window that was opened by the script -->
<form onsubmit="x.close();">
<input type="submit" value="Close Window x">
</form>
<!-- This will close this window -->
<form onsubmit="window.close();">
<input type="submit" value="Close This Window">
</form>
</body>
</html>
The Location Object
This is a property of the window object and holds a string containing the URL of the current document displayed in the window.
If you replace this string with a new URL string it will cause the window to load that URL.
It can be used within a window to forward to a new URL, or used with a window that has been opened from within another window, by using the reference that was returned when the open() method was used.
Examples of Changing URLs within Windows
<html>
<head>
</head>
<body>
<script language="javascript" type="text/javascript">
/* This script opens a window and returns
a reference to the window in the variable x */
var x = window.open("http://www.yourdomain.com","mywindow","width=400,height=400");
</script>
<!-- This will redirect the window that was opened by the script -->
<form>
<input type="button" value="Change URL in Window x" onclick="x.location='http://www.anotherdomain.com';">
</form>
<!-- This will redirect this window -->
<form>
<input type="button" value="Change URL in This Window" onclick="window.location='http://www.anotherdomain.com';">
</form>
</body>
</html>
Free Web Design Tutorials
WindowsFrames
Previous - Cookies
Next - Frames 
