Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
JavaScriptBasicsRunning a ScriptVariablesExpressions and OperatorsObjects.Properties.MethodsThe Date ObjectStringsRegular ExpressionsDefining RegExp PatternsBranches and ConditionsLoopsArraysArray MethodsSorting ArraysUser-Defined FunctionsCookiesJavaScript WindowsWindowsFrames

Home > JavaScript > Windowsprinter version

JavaScript Windows

The Window Object

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.

  1. The back() method does the same as the browser back button.
  2. The forward() method moves the browser to the next URL in the history array - assuming there's a URL to move forward to.


Examples of the back() and forward() Methods
<html>
<head>
</head>
<body>
<form>
<input type="button" value="Go Back" onclick="history.back()">
</form>
<form>
<input type="button" value="Go Forward" onclick="history.forward()">
</form>
</body>
</html>


The Screen Object

This has a number of properties that provide information about the user's display including the size and number of colours available.

  1. width - the screen width in pixels.
  2. height - the screen height in pixels.
  3. colorDepth - the bit depth of the colour palette.
  4. availHeight - the height of the window minus the user interface features such as the Taskbar.
  5. availWidth - the width of the window minus the user interface features such as the Taskbar.
  6. availTop - this specifies the y-coordinate of the first pixel not allocated to user interface features.
  7. 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.

  1. alert() displays a message to the user.
  2. confirm() asks the user to click an OK or Cancel button and returns true of false.
  3. 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.

Example of alert() with onload Event Handler
<html>
<head>
</head>
<body onload="alert('Welcome');">
</body>
</html>


Example of confirm() with onsubmit Event Handler
<html>
<head>
</head>
<body>
<form method="post" action="test.php" onsubmit="return confirm('Please Confirm Submission');">
<input type="text" size="40' name="username">
<input type="submit">
</form>
</body>
</html>


Example of prompt()
<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.


  1. The URL of the document to display in the window - if omitted the window will be empty.
  2. 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.
  3. A list of features specifying size etc. If omitted then the window has default size with all the standard features.
  4. A Boolean value that only has effect if a URL is specified and a window is named and that window already exists.
    1. True means replace the current entry in the window's browsing history with the URL.
    2. 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.

FeatureDescriptionValues
fullscreenWhether the window should be in full screen mode or not.0 or 1
widthThe width of the window.pixels
heightThe height of the window.pixels
topThe y-coordinate of the top left hand corner.pixels
leftThe x-coordinate of the top left hand corner.pixels
resizableWhether the window can be resized or not.0 or 1
scrollbarsWhether the window will have scroll bars or not.0 or 1
menubarWhether the window will have a menu bar or not.0 or 1
statusbarWhether the window will have status bar or not.0 or 1
locationWhether the window will display the address line or not.0 or 1
toolbarWhether 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>


Previous - JavaScript Cookies Previous - Cookies     Next - Frames Next - JavaScript Frames


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksImage ReplacementUsing IncludesForm ValidationDebugging
Got any JavaScript Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
Javascript the definitive guide

Javascript and DHTML cookbook

Pro javascript techniques

simply javascript