Browser Object Model (BOM)

So far, we have worked with the DOM to control HTML elements. But JavaScript can do more than just interact with the page content.

The Browser Object Model (BOM) allows JavaScript to interact with the browser itself.

What Is the BOM?

The BOM represents browser-related features that are not part of the HTML document.

Through the BOM, JavaScript can control things like:

• Browser windows and tabs
• URLs and navigation
• Alerts and confirmations
• Screen information

The window Object

The main entry point to the BOM is the window object.

Every global JavaScript object, function, and variable is part of the window.

console.log(window);
  

You usually don’t need to write window explicitly, because the browser assumes it by default.

Using Alerts

One of the most common BOM features is the alert box.

alert("Welcome to Dataplexa!");
  

Alerts are useful for quick messages, but should not be overused.

Confirm and Prompt

The BOM also provides confirmation and input dialogs.

let result = confirm("Do you want to continue?");
let name = prompt("Enter your name:");
  

These dialogs block the page until the user responds.

Location Object

The location object gives information about the current URL.

console.log(window.location.href);
  

You can also redirect users using the location object.

Navigator Object

The navigator object provides information about the browser and device.

console.log(navigator.userAgent);
  

This is commonly used for feature detection.

Screen Object

The screen object provides details about the user's display.

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

Useful when building responsive layouts.

Real-World Example

Redirecting a user after an action:

window.location.href = "/dashboard";
  

This is common after login or form submission.

Common Beginner Mistakes

• Overusing alert dialogs
• Assuming browser behavior is identical everywhere
• Using BOM features without fallback checks

Always test BOM features across browsers.

Thumb Rules

• BOM controls browser-level behavior
• window is the global object
• Use alerts sparingly
• Prefer user-friendly UI over blocking dialogs

What Comes Next?

Now that you understand browser-level objects, the next step is working with time-based actions.

In the next lesson, we will learn about timers.