Window object in JavaScript is the top of the BOM hierarchy. It is a parent of all objects that we create, both directly through JavaScript and indirectly via DOM.
A window object simply represents a web Browser window (or frame within a window) that displays the HTML document.
An HTML document may contain toolbar, menu, the page itself, and many other objects.
All major web browsers support the window object that contains global variables, functions, and JavaScript objects. These are automatically a member of window object.
Creating Window object in JavaScript
The web browser automatically creates an instance of window.
When a web browser loads a web page having JavaScript code, it automatically creates many JavaScript objects that provide access to the web pages and HTML elements that it contains. We use these objects to update and interact with loaded web page.
If the HTML document contains several frames or iframe, the browser creates additional window objects for each frame in a single HTML document.
Actually, frames divide the web page into “child” windows, so each frame contains its own browser object hierarchy.
Note that the window is the object of browser, not the object of JavaScript, like String, Array, Date, etc. They are JavaScript objects.
Browser Object Model (BOM) in JavaScript
The browser object model, or simply BOM, is a feature in the web browser that allows us to access the browser window. This access allows us to manipulate window itself, without the affecting the content of HTML document.
We can move the browser window, change the text or style of the status bar and several other functions by using BOM.
We can arrange the browser object model as hierarchy. The only object that has a top position in the BOM is the window object. Whereas all the other objects are contained within the window object.
They do not have any specific order in the hierarchy. Look at the hierarchy in the below figure.
Properties of Window object in JavaScript
Window object provides a collection of properties in JavaScript that we can apply to manipulate the web browser window. They are:
1. name: This property sets or returns the name of the window.
2. frames: This property represents an array that comprises all frame objects contained in a window object.
3. length: This property represents the number of frames contains in a window.
4. closed: This property represents whether the window is closed. It returns true if the browser window or tab closed.
5. document: This property represents an object that refers to the current document being shown in a window.
6. parent: This property represents a synonym that identifies the window containing a specific window.
7. self: This property represents a synonym that identifies the current window being referenced.
Accessing window properties and methods
The general syntax to access window properties and methods is as:
window.propertyName; window.methodName([parameters]); For example: window.name; // returns the name of window. window.close(); // closes the browser window or tab.
Methods of Window object
JavaScript window object provides several methods that we can apply to manipulate the web browser window.
1. alert(): This method displays an alert Dialog Box that contains a message and an OK button. A single OK button allows us to dismiss alert. The general syntax is:
alert(message);
In this syntax, message is a text we pass as a parameter and is displayed in a dialog box. Let’s take an example in which we will display an alert dialog box. It has a message and an OK button.
When you will run this script code, click button will appear on the browser screen. When you will click on the button, a dialog box containing a message and OK button will appear on the web browser.
2. confirm(): This method displays a confirm dialog box, which contains a message with two OK and Cancel buttons. The general syntax is as:
confirm(message);
Here, message is a text we pass as a parameter that will display in the dialog box. Moreover, it returns a true value if the user click on OK button. If the user clicks on the Cancel button, it returns false value.
The following example code shows the use of confirm() method.
In this example program, you will get two different alert boxes based on the user action on the confirm() dialog box. If you click on the OK button, a message will appear “You clicked on OK button“.
3. prompt(): This method displays a dialog box to the user and prompts the user to enter some input in a text field. Two buttons OK and Cancel allows the user to dismiss the dialog box with two opposite expectations:
- accepting the input typed in the dialog box
- canceling the entire operation
The general syntax for this method is as:
prompt(message, default_input);
This method contains two parameters, the first one is message to be displayed and the second one is the default input typed in the text field.
When the user clicks on the OK button, this method returns a string value of the typed entry. Otherwise, it returns null value if the user clicks on Cancel button.
Let’s take an example based on the prompt() method.
4. open(): This method opens the new window. Let’s create a JavaScript program in which we will display the content in a new window.
5. close(): This method closes the current window or tab.
Working with Timeouts in JavaScript
6. setTimeout(): This method provides an efficient way to execute a certain code after a specified amount of time. Here, Timeout tells the browser when a certain code should be executed.
The setTimeout() method executes a specified code after the specified number of milliseconds. The general syntax to define this method is:
setTimeout("JavaScript code or function", milliseconds);
This method takes two arguments: the code to execute and the number of milliseconds (1 sec = 1000 milliseconds) to wait before executing it.
The first argument can either be JavaScript code or a name of function. Consider the following lines of code that display an alert after 2 seconds.
setTimeout("alert('Happy birthday!')", 2000);
setTimeout(function() { alert('Happy birthday!'); }, 2000);
Let’s take an example program in which window.setTimeout() method will display an alert dialog box after 5 seconds.
In this example, we have called setTimeout() method to perform timeout processing specified by the “msg()” function after 5 seconds (5000 milliseconds).
The setTimeout() method creates a numeric timeout ID (i.e. ID of the timer), which is the same as a process ID in an operating system. This numeric ID identifies the msg() function.
We assign it usually in a variable, as shown in the following example.
var timer = setTimeout("msg()", 5000);
To cancel the remaining timeout, use clearTimeout(ID) and pass timeout ID to cancel the timer. Look at the code.
clearTimeout(timer);
This statement clears the timeout identified by “timer”. It prevents the msg() from being called after the timeout period has elapsed.
Look at the following example code as below.
Let’s take another example program based on the setTimeout() method.
In this tutorial, you learned window object in JavaScript and its useful methods with many example programs. Hope that you will have understood the basic concepts of all window object methods in JavaScript.
Thanks for reading!!!
The post Window Object in JavaScript with Example appeared first on Scientech Easy.
