The window Object

The browser creates a window object to hold information about the browser and a window object for each tab of the browser.

Window Properties and Methods

There are many properties and methods available in the window object.   All properties and methods of the window object are global.  That is you don’t need to reference them using the window object.  For example the window object has a property named console.  We’ve already used the console object by accessing it directly when we’ve called its log() method.  Another property of the window object is named document and is the root node in the DOM.

console.log(document.nodeType);  // 9

Adding Window Properties

Earlier when talking about variables we said that a variable declaration that doesn’t include the var keyword is global.  In fact, a variable that doesn’t include the var keyword becomes a property of window.

Properties that are added to the window object via a local variable cannot be deleted, but objects explicitly defined as window properties can be.

var age = 29; 
delete window.age;         // returns false.
 
window.color = “red”; 
delete window.color;       // returns true

Dialog Methods

There are three dialog methods that are properties of the window object: alert(), confirm(), and prompt().  Dialogs are synchronous and modal, meaning that execution of the JavaScript stops until the dialog has been dismissed.

The alert(message) method takes a string as an argument.  When executed, the method displays the string in a dialog box with one button labeled “OK”.

alert("Out of power");

The confirm(message) takes a string as an argument and returns a boolean.  When executed, the method displays the string in a dialog box with two buttons labeled “Cancel” and “OK”.  If the user presses OK, the method returns true and returns false otherwise.

var result = confirm("Update record?");
if (result == true) {
    ...
}

The prompt(message, default) takes two strings as arguments.  When executed, the method displays the first string (message) above an editable text box in a dialog box with two buttons labeled “Cancel” and “OK”.  The string in the second argument is used to pre-populate the text box.  When the user presses OK, the method returns the string remaining in the text box.

var result = prompt("Enter age", "19");

Opening and Closing Windows

The window.open() method opens a new window and returns a reference to the new window.  The method accepts 3 arguments:

  • a URL to load (required)
  • a window name (required)
  • a string of features (optional)

The third argument is a comma separated list of features expressed as name=value. See the documentation for a list of features and browser support.

window.open("http://techcrunch.com", "_blank", "width=600,height=400,top=100,left=100");

The window.close() method closes the referenced window.

var win = window.open("http://techcrunch.com", "_blank");
alert("pause");
win.close();

Print

The print() method brings up the browser’s print dialog.

The Location Object

The location object provides information about the document that is currently loaded in the window and provides general navigation functionality.  Some of the properties available in the location object are given below.

  • location.href
  • location.protocol
  • location.host
  • location.pathname
  • location.search
  • location.port

Manipulating the Location

The location can be changed by modifying the location.href property as shown below.

location.href = “http://slashdot.org”;

You can also modify the page loaded by modifying the other location properties (e.g. pathname).

location.pathname = "/work/teaching";

The location.replace(URL) method changes the location but doesn’t put an entry in the history stack.

location.replace("http://slashdot.org");

The Navigator Object

All browsers support the navigator object but its properties differ between browsers.  The navigator object specifies information about the browser, the client, etc.

console.log(navigator.appName + "," + navigator.platform);

The Screen Object

The window.screen object holds information about the screen hardware of the client computer.

The History Object

The history object represents the user’s navigation history.

history.go(-3);                     //go back one page
history.go(“http://n0code.net”);    //go to nearest URL page in history
history.back();                     // go back