User:Mmmasale/sandbox

The Browser Object Model creates a tree-like hierarchy of objects, many of which provide properties and methods for the JavaScript programmer. The browser itself is represented by one object, called the window object. A window object is a global object that represents the currently open tab in the browser and is the first thing that gets loaded into the browser. All global JavaScript objects, functions, and variables automatically become members of the window object. Global variables are the properties and global functions are the methods of the window object. The properties and methods of the window object can be called directly and do not require the window prefix but objects beyond the window object’s direct descendants, need to be preceded by its parent object name. For example, it is allowed to access document object directly but children of the document object, like DOCUMENT_TYPE_NODE, URL, childNodes etc.; cannot be accessed directly.

The window object implements the Window interface, which in turn inherits from the AbstractView interface. AbstractView is a base interface from which all views derive. The DOM views are represented by window object through its document property. In turn, the document object can be used to access its window object using document.defaultView property.

The browser has its own window object but browser implements different window objects for each tab. That is, the window object is not shared between tabs in the same window. If an HTML document contains frames, the browser creates one window object for the HTML document and one additional window object for each frame. Also, window objects do not have access to another tab’s window object. Window object method's access is limited to tab specific methods only except for few things that can't reasonably pertain to a tab. The methods that pertain to the window are allowed to have access to the whole window and not just specific tabs like window.resizeTo and window.resizeBy.

Standard

There is no standard for window objects. Every browser implements it as per their requirements but the core remains the same across all the browsers.

Use Cases

Following are a few use cases for the window object:

1. Accessing existing global variables.
2. Protecting global variable from being shadowed by an inner scope variable.
3. Built-in global variables – The built-in global variables are referred via window to denote that they are global.
4. Window enables to check whether a variable is global or not.
5. Creating things in global scope.

Features

Window object has properties, methods, events, and constructors. Different browsers implement window object differently, the methods and events provided by window object may differ in different browsers.

Properties

The window object has following properties.

Property	Description
closed	Its value is set to true when the window is closed
defaultStatus	This property stores the text that appears by default in the status bar of a browser
name	This property stores the name of the window at the time when the window is first opened
opener	This property stores reference to the window that created the current window
parent	Frequently used with frames to refer to the window that created a particular window or is one level up from the frame
status	Frequently used to set the text in the status bar when a visitor hovers over an element such as a link
top	Refers to the highest or topmost parent window

A complete list of properties can be found here.

Methods

Following is a list of few window object methods.

Method	Description
addEventListener()	This method adds event handlers.
alert()	This method displays an alert dialog with the optionally specified content and an OK button.
blur()	This method changes the focus of keyboard input away from the browser window.
focus()	This method changes the focus of keyboard input to the browser window.
close()	This method closes the browser window.
removeEventListener()	This method removes event handlers.
open()	This method opens a window.
print()	This method Invokes print function of the browser.

Some methods of the window object deal with moving and resizing the window.

Method	Description
moveBy()	This method moves the window to a relative location
moveTo()	This method moves the window to a specific location
resizeBy()	This method changes the size of the window by a relative amount
resizeTo()	This method changes the size of the window to a certain size

A complete list of methods can be found here.

Events

Window object supports following events.

Event	Description
onblur	Fires when the window loses focus.
onerror	Fires when a JavaScript error occurs.
onfocus	Fires when the focus is set on the current window.
onload	Fires when the page has finished loading, including images.
onresize	Fires when the window is resized.
onscroll	Fires when the window is scrolled.
onbeforeunload	Fires when the page is about to be unloaded, prior to ‘onunload’ event firing.
onunload	Fires when the page is unloaded- the process cannot be overruled at this point. Used to run code cleanup routines.

A complete list of events can be found here.

Constructors

Window object provides access to few constructors of objects.

Constructors	Description
Window.DOMParser	DOMParser can parse XML or HTML source stored in a string into a DOM Document. DOMParser is specified in DOM Parsing and Serialization.
Window.GeckoActiveXObject	The GeckoActiveXObject object is similar to the Internet Explorer specific ActiveXObject object.
Image	Used for creating an HTMLImageElement.
Option	Used for creating an HTMLOptionElement.
Worker	Used for creating a Web worker

Window child objects

Window object stores few objects in its properties like document, history, navigator etc.

Document

It represents the HTML document that’s been loaded into a web browser. The document object provides properties and methods to access all node objects, from within JavaScript. It can be accessed through the window.document property.

History

History object stores list of URLs visited by user in current window. The history object is part of the window object and is accessed through the window.history property.

Screen

Screen object stores details of user’s screen. This object can be referenced through window.screen property.

Location

Location object stores details about the current URL. This object can be referenced through window.location property. 

Navigator

The navigator object stores the details of browser. This object can be referenced through window.navigator property. 

Books

1. JavaScript Bible
2. JavaScript : The definitive guide
3. The book of JavaScript a practical guide to interactive Web pages
4. JavaScript Step by step