🌐 Understanding the Browser Object Model (BOM)

The Browser Object Model (BOM) provides interaction with the browser outside of the web page content. It allows JavaScript to communicate with the browser window and perform actions like opening new tabs, getting screen size, and navigating history.

🪟 The window Object

The global object in the browser is window. All BOM features are accessed through it.

console.log(window.innerWidth);  // Width of the viewport
alert("Hello!");                  // Same as window.alert()

🌍 The navigator Object

Provides information about the user's browser and device.

console.log(navigator.userAgent);   // Browser info
console.log(navigator.language);    // Language settings

📍 The location Object

Gives info about the current URL and allows redirection.

console.log(location.href);        // Full URL
location.href = "https://example.com";  // Redirect to another page

⏮️ The history Object

Enables navigation through the browser history.

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

🪟 Opening New Windows

You can open popups or new tabs using window.open().

window.open("https://google.com", "_blank");

📏 Screen Object

Access screen resolution and color depth.

console.log(screen.width, screen.height);
console.log(screen.colorDepth);

✅ Summary

• window: The root object of BOM
• navigator: Info about the browser and device
• location: URL info and redirection
• history: Navigate through history
• screen: Info about user's screen