? JavaScript Browser BOM

⚡ Quick Overview

The Browser Object Model (BOM) allows JavaScript to interact with the browser itself, not just the HTML page. It provides objects and methods to work with the browser window, URL, history, screen, and more.

While the DOM focuses on web page elements, the BOM focuses on the browser environment.

? BOM = Browser environment APIs

? Key Concepts

window – The global browser object; parent of all other BOM objects.
screen – Information about the user's screen (width, height, etc.).
location – Information about the current URL and navigation.
history – Browser session history (back, forward navigation).
navigator – Information about the browser/application (user agent, etc.).
Dialog methods – alert(), confirm(), prompt().
Timing methods – setTimeout(), setInterval().
Cookies – Managed via document.cookie.

? Syntax and Theory

In browsers, global variables and functions automatically become properties of the window object. The BOM is centered around this global window object.

? Window Object Basics

window.innerWidth – Width of the content area of the window.
window.innerHeight – Height of the content area.
window.alert() – Shows an alert dialog box.
window.location – Access/modify the current URL.

? DOM vs BOM

DOM → Works with document (HTML elements).
BOM → Works with window and browser environment.
window.document and document refer to the same DOM object.

? Code Examples

? Basic Window Object Usage

window.alert("Hello from BOM!");

console.log(window.innerWidth);  // Width of the browser window
console.log(window.document === document);  // true

?️ Dialog Methods (alert, confirm, prompt)

alert("Welcome to my page!");

const isSure = confirm("Are you sure you want to continue?");
console.log("User clicked:", isSure ? "OK" : "Cancel");

const name = prompt("What is your name?");
if (name !== null) {
  console.log("Hello, " + name + "!");
}

? Real-World Redirect Using location

if (confirm("Do you want to visit OpenAI?")) {
  location.href = "https://www.openai.com";
}

⏱️ Timing with setTimeout and setInterval

function showMessage() {
  console.log("This runs after 2 seconds");
}

setTimeout(showMessage, 2000);  // Run once after 2 seconds

let count = 0;
const intervalId = setInterval(() => {
  console.log("Tick:", ++count);
  if (count === 5) {
    clearInterval(intervalId);  // Stop after 5 ticks
  }
}, 1000);

? Live Output and Explanation

? What Happens When This Runs?

alert() opens a modal dialog with an OK button. The user must close it to continue.
confirm() returns true if the user clicks OK, or false if they click Cancel.
prompt() returns the typed string, or null if the user cancels.
location.href changes the current page URL, effectively redirecting the user.
setTimeout() schedules code to run once after a delay, without blocking the page.
setInterval() repeats code at a fixed time interval until clearInterval() is called.

Open your browser's Developer Tools → Console to see the log messages from these examples and better understand how BOM methods behave in real time.

? Use Cases and When to Use BOM

Displaying quick notifications or warnings using alert() or custom UIs.
Confirming critical actions (e.g., deleting data) using confirm().
Asking for simple user input with prompt() (for demos/tests).
Redirecting or reloading pages using location.href or location.reload().
Creating time-based effects (sliders, timers, counters) with setTimeout/setInterval.
Adapting layout or behavior based on screen size using screen.width.

? Tips and Best Practices

The BOM is not fully standardized, but modern browsers implement it in very similar ways.
Using window is optional in many cases: alert() is the same as window.alert().
Prefer console.log() over alert() for debugging, so you don't block the UI.
Always check for null when using prompt() to handle Cancel gracefully.
Avoid overusing blocking dialogs (alert, confirm, prompt) in production apps. Use custom modals instead.
Use setTimeout and setInterval carefully to avoid memory leaks; clear intervals when no longer needed.

? Try It Yourself

Create a script that shows an alert() welcoming users to your website.
Use location.href to redirect users to another page when they click “OK” in a confirm() dialog.
Log the screen width and height using screen.width and screen.height.
Ask the user's name with prompt() and then display a personalized greeting in the console.
Open the developer console and log navigator.userAgent to inspect browser information.
Build a simple counter that uses setInterval() to increase a number every second, and stop it after 10 seconds.