JavaScript Window – The Browser Object Model (BOM)

The Browser Object Model (BOM) provides a way to interact with the browser itself using JavaScript. It includes objects that allow developers to manipulate the browser window, navigate to different web pages, and manage browser settings like cookies, history, and screen dimensions.

The window object is the global object in the BOM. Every browser has a window object that represents the browser’s open window or tab.

Features of the window Object

• Global Namespace:
  • All global variables and functions in JavaScript are properties and methods of the window object.
  • For example:

console.log(window.alert === alert); // true

• Access BOM Elements:
  • Properties like window.location, window.history, and window.screen allow access to browser-specific data.

Common Window Properties and Methods

• Dialog Methods:
  • alert(message): Displays an alert box.confirm(message): Displays a confirmation dialog and returns true or false based on user action.prompt(message, default): Prompts the user for input.
  Example:

window.alert("Hello, world!");
const userResponse = window.confirm("Do you agree?");
const userName = window.prompt("What's your name?", "Guest");

• Navigation (window.location):
  • Contains details about the current URL and allows redirection.
  • Key properties:
    • href: Full URL.
    • hostname: Domain name.
    • pathname: Path part of the URL.
  • Redirect or reload:

window.location.href = "https://www.example.com";
window.location.reload();

• History (window.history):
  • Navigate through the browser’s history.Methods:
    • back(): Go to the previous page.forward(): Go to the next page.go(n): Move n steps in history.
  Example:

window.history.back(); // Go back one page

• Screen Dimensions (window.screen):
  • Properties:
    • width and height: Total screen dimensions.availWidth and availHeight: Dimensions excluding UI like the taskbar.
  Example:

console.log(`Screen Width: ${window.screen.width}`);
console.log(`Available Width: ${window.screen.availWidth}`);

• Timers:
  • setTimeout(): Executes a function after a specified delay.setInterval(): Repeats execution at a set interval.Corresponding clear methods: clearTimeout() and clearInterval().
  Example:

const timeoutId = window.setTimeout(() => {
    console.log("Hello after 2 seconds");
}, 2000);

window.clearTimeout(timeoutId); // Cancel the timeout

The Window as a Global Object

The window object is automatically available in every browser environment, so you can omit the window. prefix:

alert("This is the same as window.alert()");

Practical Examples

• Open a New Tab or Window:

const newTab = window.open("https://www.example.com", "_blank");

• Check Browser Dimensions:

console.log(`Window Width: ${window.innerWidth}`);
console.log(`Window Height: ${window.innerHeight}`);

• Scroll to Top of Page:

window.scrollTo(0, 0);

Browser Object Model vs. Document Object Model (DOM)

Conclusion

The Browser Object Model provides JavaScript with the tools to interact with the browser itself, enabling features like redirection, screen dimension access, and navigation control. Understanding BOM is essential for creating web applications that take full advantage of browser capabilities.

For more coding tips and tutorials, visit The Coding College.