[JavaScript] window Object

There is a global object in every JavaScript host environment. In web browsers, the “window” object is a global object and you can access it anywhere in the script.

 

1. window Object

The window object represents a browser window. You can access it without referring anything. You can call “alert()” without an object reference as it is a global function. But in fact, it is the method of the “window” object.

The “window” object has the property “window” to refer to itself.

alert("Hello");
window.alert("World");

 

2. Properties

The “window” object is a starting point when you work with the web pages.

  • document : the web page
  • history : the URLs that have been visited before and after the current page
  • location : the current URL of the browser window. (used to navigate to another page)
  • navigator : the object  about the browser information
  • screen : the screen object

Also, you can get the information about the window.

  • frames[] : an array of the frames
  • name : the name of a window
  • innerHeight, innerWidth : the size of a windows’ content area
  • outerHeight, outerWidth : the size of a windows
  • screenLeft, screenX : x position of the window relative to the screen
  • screenTop, screenY : y position of the window relative to the screen
  • status : the text in the status bar

Note that IE does not support “screenX” and “screenY“.

 

3. Methods – Dialog Boxes

The “window” object provides the global level methods. The first group of methods display different types of dialog boxes.

  • alert(msg) : a message with an OK button
  • prompt(msg, defaultText) : for user input
  • confirm(msg)  : a message with an OK and a Cancel button, returns true when the OK button is clicked.
var filename = prompt("Please enter the file name to delete?", "abc.jpg");
if (filename != null) {
  if (window.confirm("Do you want to delete " + filename + "?")) {
    alert(filename + " is deleted.");
  } else {
    alert("Delete action is cancelled.");
  }
}

 

4. Methods – Handling Browser Window

The second group of the methods are related with the browser window.

  • close() : close the current window
  • open(URL, name, specs, replace) : open a new window
  • moveBy(x, y) : moves a window relative to its current position
  • moveTo(x, y) : moves a window to the specified position
  • resizeBy(width, height) : resizes the window by the specified pixels
  • resizeTo(width, height) : resizes the window to the specified size
  • scrollBy(x, y) : scrolls the content by the specified pixels
  • scrollTo(x, y) : scrolls the content to the specified position
alert(window.screenLeft + ", " + screenTop);

window.resizeTo(400, 300);
alert("Inner Size = " + window.innerWidth + ", " + innerHeight);
alert("Outer Size = " + window.outerWidth + ", " + outerHeight);

window.moveTo(100, 100);
alert(window.screenLeft + ", " + screenTop);

Note that the resizeTo() method sets the outerWidth and outerHeight of the window, not the content area.

 

5. Methods – Timers

The third group is for timers.

  • setInterval(func, millisec, lang)
  • setTimeout(func,millisec,lang)
  • clearInterval(id)
  • clearTimeout(id)

The “setInterval()” method is used for periodic timers such as refreshing the page. The “setTimeout()” method is for the one-time timer.

function refreshDate() {
  $("#currentTime").text((new Date()).toTimeString());
}
function greet() {
  alert("Hello, World");
}

$(document).ready(function () {
  setInterval(refreshDate, 2000);
  setTimeout(greet, 5000);
});

 

6. Methods – Printing

  • print()

The “print()” method is used to print the contents of the current window

<input id="printBtn" type="button" value="Print"
  onclick="window.print();" />

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s