Window Object in JavaScript
The Browser Object Model (BOM) is a set of APIs that allow JavaScript to interact with the browser and its elements, such as the window, document, and location objects.
The BOM is not part of the JavaScript language itself but is implemented by the browser environment in which the JavaScript code is running.
The window object has many properties and methods that allow you to interact with the browser window and its contents
Such as:
The window.alert()
Displays a pop-up dialog box with a message and an OK button.
The syntax for using the window.alert()
method is as follows:
window.alert(message);
Here: message
is the string
to be displayed in the alert box.
The window.confirm()
Displays a pop-up dialog box with a message, OK, and Cancel buttons, and returns true or false depending on the user's choice.
The syntax for using the window.confirm()
method is as follows:
window.confirm(message);
Here: message
is the string
to be displayed in the dialog box.
The window.prompt()
Displays a pop-up dialog box with a message, an input field, OK, and Cancel buttons, and returns the value entered by the user or null if the user clicks Cancel.
The syntax for using the window.prompt()
method is as follows:
window.prompt(message, defaultResponse);
Here: message
is the string
to be displayed in the dialog box, and defaultResponse
is an optional parameter that specifies the default text to be displayed in the input field. If this parameter is omitted, the input field will be empty by default.
The window.location
Represents the URL of the current web page and provides methods to navigate to other URLs, such as window.location.href to set or get the current URL.
Some common properties of the window.location object are:
href
: The full URL of the current page.protocol
: The protocol (e.g., "http" or "https") of the current page.hostname
: The hostname (e.g., "www.example.com") of the current page.port
: The port number (e.g., 80 or 443) of the current page.pathname
: The path (e.g., "/blog/article.html") of the current page.search
: The query parameters (e.g., "?page=2&sort=asc") of the current page.
For example, the following code displays the current URL of the page in an alert box:
const currentUrl = window.location.href;
window.alert(`The current URL is: ${currentUrl}`);
When the above code is executed:
- it retrieves the current URL of the page using the
window.location.href
property, and then displays it in an alert box using thewindow.alert()
method.
The window.document
Represents the HTML document in the current web page and provides methods to manipulate its contents, such as window.document.getElementById()
to select an element by its ID.
Some of the common properties and methods of the Document object include:
document.title
: Gets or sets the title of the document.document.body
: Gets the reference to the body element of the document.document.getElementById(id)
: Returns the element with the specified ID.document.createElement(tagName)
: Creates a new HTML element with the specified tag name.
For example, to get the title of the current document, you could use the following syntax:
var title = window.document.title;
Or to get the reference to the body element:
var body = window.document.body;
Here's an example of how to use the window.alert()
method to display a message in a pop-up dialog box:
window.alert("Hello, world!");
In this example:
- The
alert()
method is called on the window object with the string'Hello, world!'
as its argument, causing a pop-up dialog box to appear with the message.
The Window Object
The Window object provides properties and methods to interact with the browser window and its contents.
The window.document
property refers to the global document
object in the browser, which represents the entire HTML document. The getElementById()
method is a property of the document
object and is used to obtain a reference to an element in the document with a specified id
attribute.
So
window.document.getElementById("header");
is the same as
document.getElementById("header");
because window.document
is the same as document
in the browser environment, and both methods are equivalent ways of obtaining a reference to an element with the id attribute "header"
.
The Window Size
You can get the size of the browser window using the window.innerWidth
and window.innerHeight
properties. These properties return the width and height of the viewport in pixels, excluding the size of the browser's toolbars and other UI elements.
Here's an example of how to use these properties to get the size of the browser window:
window.addEventListener('resize', () => {
const width = window.innerWidth;
const height = window.innerHeight;
console.log(`The browser window has been resized to ${width}px x ${height}px`);
});
In this example:
- An anonymous arrow function is passed as the second argument to the
addEventListener()
method - Which gets called every time the
resize
event is triggered on thewindow
object. - Inside the function, the
innerWidth
andinnerHeight
properties are used to get the new size of the browser window, and the result is logged to the browser console.