codeswithpankaj

Window Object

JavaScript BOM (Browser Object Model) - Window Object Tutorial

Table of Contents

  1. Introduction to JavaScript BOM

  2. What is the Window Object?

  3. Properties of the Window Object

    • window.innerWidth and window.innerHeight

    • window.outerWidth and window.outerHeight

    • window.location

    • window.history

    • window.navigator

    • window.screen

    • window.document

  4. Methods of the Window Object

    • window.alert()

    • window.confirm()

    • window.prompt()

    • window.open()

    • window.close()

    • window.setTimeout()

    • window.setInterval()

    • window.clearTimeout()

    • window.clearInterval()

  5. Working with the Window Location Object

    • window.location.href

    • window.location.reload()

    • window.location.assign()

    • window.location.replace()

  6. Working with the Window History Object

    • window.history.back()

    • window.history.forward()

    • window.history.go()

  7. Working with the Window Navigator Object

    • window.navigator.userAgent

    • window.navigator.platform

    • window.navigator.language

  8. Window Events

    • window.onload

    • window.onresize

    • window.onscroll

    • window.onbeforeunload

  9. Conclusion

1. Introduction to JavaScript BOM

Welcome to the Codes with Pankaj tutorial on JavaScript BOM (Browser Object Model)! In this tutorial, we'll explore the window object, which is a part of the BOM. The Browser Object Model allows JavaScript to interact with the browser and control aspects of the web page that are beyond the document itself. Let's dive in!

The BOM includes objects like window, location, history, navigator, and screen. In this tutorial, we'll focus on the window object and its properties and methods.

2. What is the Window Object?

The window object is the global object in the browser environment. It represents the browser window or tab and provides methods and properties to interact with the browser itself.

In JavaScript, all global variables and functions are automatically properties of the window object.

Example:

console.log(window);  // Outputs the global window object

3. Properties of the Window Object

window.innerWidth and window.innerHeight

These properties return the width and height of the content area of the browser window (excluding toolbars and scrollbars).

Example:

console.log(window.innerWidth);  // Output: Current width of the window's content area
console.log(window.innerHeight);  // Output: Current height of the window's content area

window.outerWidth and window.outerHeight

These properties return the width and height of the browser window, including toolbars, scrollbars, and borders.

Example:

console.log(window.outerWidth);  // Output: Current width of the entire browser window
console.log(window.outerHeight);  // Output: Current height of the entire browser window

window.location

The location property returns the Location object, which contains information about the current URL of the window.

Example:

console.log(window.location.href);  // Output: Current URL of the page

window.history

The history property returns the History object, which allows you to navigate back and forth through the browser's history.

Example:

window.history.back();  // Go back to the previous page

window.navigator

The navigator property returns the Navigator object, which provides information about the browser and operating system.

Example:

console.log(window.navigator.userAgent);  // Output: Information about the browser

window.screen

The screen property returns the Screen object, which contains information about the user's screen.

Example:

console.log(window.screen.width);  // Output: Width of the user's screen

window.document

The document property returns the Document object, which represents the content of the web page.

Example:

console.log(window.document.title);  // Output: Title of the current document

4. Methods of the Window Object

window.alert()

Displays an alert dialog with a specified message and an OK button.

Example:

window.alert("Welcome to Codes with Pankaj!");

window.confirm()

Displays a dialog with a specified message and OK and Cancel buttons. Returns true if OK is clicked, and false if Cancel is clicked.

Example:

let isConfirmed = window.confirm("Do you want to proceed?");
console.log(isConfirmed);  // Output: true or false

window.prompt()

Displays a dialog with a text input field, an OK button, and a Cancel button. Returns the text entered by the user or null if Cancel is clicked.

Example:

let userInput = window.prompt("Enter your name:");
console.log(userInput);  // Output: The text entered by the user or null

window.open()

Opens a new browser window or tab with a specified URL.

Example:

window.open("https://www.codeswithpankaj.com");

window.close()

Closes the current browser window. This method only works if the window was opened using window.open().

Example:

window.close();

window.setTimeout()

Executes a function after a specified delay (in milliseconds).

Example:

window.setTimeout(function() {
  console.log("This message is displayed after 2 seconds");
}, 2000);

window.setInterval()

Executes a function repeatedly at specified intervals (in milliseconds).

Example:

let intervalId = window.setInterval(function() {
  console.log("This message is displayed every 2 seconds");
}, 2000);

window.clearTimeout()

Cancels a timeout set with window.setTimeout().

Example:

let timeoutId = window.setTimeout(function() {
  console.log("This message will not be displayed");
}, 5000);

window.clearTimeout(timeoutId);

window.clearInterval()

Cancels an interval set with window.setInterval().

Example:

let intervalId = window.setInterval(function() {
  console.log("This message will stop displaying after 10 seconds");
}, 2000);

window.setTimeout(function() {
  window.clearInterval(intervalId);
}, 10000);

5. Working with the Window Location Object

The window.location object contains information about the current URL and provides methods to redirect the user or reload the page.

window.location.href

Returns the full URL of the current page.

Example:

console.log(window.location.href);  // Output: The current URL

window.location.reload()

Reloads the current page.

Example:

window.location.reload();

window.location.assign()

Loads a new document.

Example:

window.location.assign("https://www.codeswithpankaj.com");

window.location.replace()

Replaces the current document with a new one (no back navigation to the replaced document).

Example:

window.location.replace("https://www.codeswithpankaj.com");

6. Working with the Window History Object

The window.history object allows you to navigate through the browser's history.

window.history.back()

Navigates to the previous page.

Example:

window.history.back();

window.history.forward()

Navigates to the next page in the history.

Example:

window.history.forward();

window.history.go()

Navigates to a specific page in the history. Positive values move forward, and negative values move back.

Example:

window.history.go(-2);  // Go back two pages

7. Working with the Window Navigator Object

The window.navigator object provides information about the browser and the operating system.

window.navigator.userAgent

Returns the user agent string representing the browser.

Example:

console.log(window.navigator.userAgent);  // Output: Browser's user agent string

window.navigator.platform

Returns the platform on which the browser is running.

Example:

console.log(window.navigator.platform);  // Output: Information about the OS platform

window.navigator.language

Returns the language of the browser.

Example:

console.log(window.navigator.language);  // Output: The language code (e.g., "en-US")

8. Window Events

The window object can handle several events to perform actions when the browser window is resized, loaded, scrolled, or about to be closed.

window.onload

Executes a function when the window has finished loading.

Example:

window.onload = function() {
  console.log("The window has finished loading.");
};

window.onresize

Executes a function when the window is resized.

Example:

window.onresize = function() {
  console.log("The window was resized.");
};

window.onscroll

Executes a function when the user scrolls the window.

Example:

window.onscroll = function() {
  console.log("The window was scrolled.");


};

window.onbeforeunload

Displays a message when the user attempts to leave the page.

Example:

window.onbeforeunload = function() {
  return "Are you sure you want to leave?";
};

9. Conclusion

In this detailed tutorial, we explored the window object, a core component of the Browser Object Model (BOM) in JavaScript. We covered its properties, methods, and how to interact with other BOM objects like location, history, and navigator. The window object is essential for controlling the browser and handling user interactions in web applications.

For more tutorials and examples, visit www.codeswithpankaj.com! Happy coding!

PreviousAbstractionNextHistory Object

Last updated