1.5 Module 1 · Operators, Methods & Keywords

Browser Object Model (BOM)

Learn how JavaScript talks directly to the browser — showing alerts, capturing user input, and controlling the window through the BOM.

Definition

The Browser Object Model (BOM) allows JavaScript to interact with the browser window and its components — such as tabs, alerts, navigation, and user dialogs — through objects like window.

Unlike the DOM (which deals with page content), the BOM deals with the browser itself: its size, its location bar, its popups, and the environment your script is running in.

Simple Way

BOM means: "JavaScript talking directly to the browser." It lets you:

alert() → Show a popup message to the user

confirm() → Ask the user a yes/no question

prompt() → Take text input directly from the user

Code Examples

Example 1 — The window Object

console.log(typeof window);
console.log(typeof window.alert);
console.log(typeof window.location);

Output

Click ▶ Run to execute

Explanation

window is the global object in every browser tab
All browser-related functions — alert, location, history — live on it

Example 2 — alert()

console.log("Before alert");
// alert("Welcome to JavaScript"); // shows popup — commented for runner
console.log("After alert");

Output

Click ▶ Run to execute

Explanation

alert() shows a popup message — it blocks all code until the user clicks OK
It has no return value; use it only to display information

Example 3 — confirm()

// Simulating confirm() — returns boolean
let result = true; // true = user clicked OK, false = Cancel
console.log(result);
console.log(typeof result);

Output

Click ▶ Run to execute

Explanation

confirm() returns true when the user clicks OK, false when they click Cancel
Always returns a boolean — perfect for conditional checks

Example 4 — prompt()

// Simulating prompt() — always returns a string
let name = "Arjun"; // what the user would type
console.log(name);
console.log(typeof name);

Output

Click ▶ Run to execute

Explanation

prompt() always returns a string — even if the user types a number
If the user clicks Cancel, it returns null

Example 5 — Debugging a BOM Type Issue

// Simulating prompt() input
let age = "15"; // prompt always returns a string

if (age < 18) {
  console.log("Underage");
} else {
  console.log("Allowed");
}

Output

Click ▶ Run — spot the bug!

Problem

prompt() returns a string, so age is "15" (string), not 15 (number). JavaScript coerces it here, but strict comparisons (===) or arithmetic will break.

Solution — convert with Number() first

let age = Number("15"); // convert before comparing
console.log(age);
console.log(typeof age);

if (age < 18) {
  console.log("Underage");
} else {
  console.log("Allowed");
}

Output

Click ▶ Run fix

Real-Life Example

Think of a website asking you questions or giving you information:

alert()

"Action successful!" — a notification you must dismiss

confirm()

"Are you sure you want to delete?" — a yes/no decision

prompt()

"Enter your name" — a quick text field in a popup

window

The entire browser tab — your script's home environment

HTML + JavaScript Example

BOM dialogs work inside real HTML pages. Click ▶ Preview to run this live — interact with the buttons to trigger each dialog type.

Live in Browser — BOM Demo

<!DOCTYPE html>
<html>
<head><title>BOM Demo</title></head>
<body style="font-family:sans-serif;padding:24px;background:#f8f9fa">

  <h2>BOM Dialog Demo</h2>
  <p id="output" style="margin:12px 0;color:#333;min-height:24px"></p>

  <button onclick="runAlert()"
    style="margin:6px;padding:8px 18px;background:#f7df1e;border:none;
           border-radius:6px;cursor:pointer;font-weight:700">
    alert()
  </button>

  <button onclick="runConfirm()"
    style="margin:6px;padding:8px 18px;background:#4ade80;border:none;
           border-radius:6px;cursor:pointer;font-weight:700">
    confirm()
  </button>

  <button onclick="runPrompt()"
    style="margin:6px;padding:8px 18px;background:#82aaff;border:none;
           border-radius:6px;cursor:pointer;font-weight:700">
    prompt()
  </button>

  <script>
    const out = document.getElementById("output");

    function runAlert() {
      alert("Hello from BOM!");
      out.textContent = "alert() fired — you clicked OK.";
    }

    function runConfirm() {
      let result = confirm("Do you want to continue?");
      out.textContent = "confirm() returned: " + result;
    }

    function runPrompt() {
      let name = prompt("Enter your name:");
      if (name) {
        out.textContent = "prompt() got: " + name;
      } else {
        out.textContent = "prompt() returned null (Cancel clicked).";
      }
    }
  </script>

</body>
</html>

Live Preview

Tasks (Practice)

Easy Task 1 — Greeting with prompt

Starter code

// Simulate prompt input
let userName = "Riya";

Use prompt() to ask the user for their name
Show a personalised greeting using alert() — e.g. "Hello, Riya!"

Medium Task 2 — Age gate with confirm

Starter code

// Simulate prompt + confirm
let age = Number("20");
let confirmed = true;

Use prompt() to ask the user's age — convert with Number()
Use confirm() to double-check before showing result
If age < 18 → show "Access Denied", else → show "Access Granted"

MCQs

What does confirm() return?

A String
B Number
C Boolean
D Object

💡 C is correct. confirm() returns true when the user clicks OK and false when they click Cancel — always a boolean.

Which function takes user input from a browser popup?

A alert()
B confirm()
C prompt()
D window()

💡 C is correct. prompt() opens an input field dialog — alert() shows a message and confirm() asks a yes/no question, but neither accepts typed input.

What is window in the browser?

console.log(typeof window);

Output

Run it to verify

A An HTML tag
B A CSS property
C The global browser object
D A built-in function

💡 C is correct. window is the top-level global object in the browser environment. Every variable you declare at the top level and every BOM function lives on it.

Pro Tips & Extra Knowledge

01
All BOM functions are properties of window — you can call them with or without the prefix:
Equivalent calls
```
alert("Hello");         // short form
window.alert("Hello");  // full form — identical result
console.log(typeof window.alert);
```
Output

Click ▶ Run to execute
02
Always convert prompt() output with Number() when you expect a numeric value:
Safe number conversion
```
let raw = "42";           // what prompt() would return
let value = Number(raw);
console.log(value);
console.log(typeof value);
```
Output

Click ▶ Run to execute
03

Avoid excessive alert() calls — they block the browser and frustrate users. Modern apps prefer HTML-based modals and toast notifications instead.
04

BOM dialogs are most useful for testing, small interactions, and debugging. For anything production-grade, build a proper UI component instead.

Mini Challenge

Read the code carefully — will "Equal" ever appear? Think before you run.

What does this print?

// Simulating prompt() input
let value = "10"; // prompt() always returns a string

if (value === 10) {
  console.log("Equal");
} else {
  console.log("Not Equal");
}

Output

Think first, then run!

Step-by-Step Explanation

// Step 1: prompt() always returns a STRING
//         value = "10"  (type: string)

// Step 2: === checks value AND type
//         "10" === 10   → false  (string !== number)

// Step 3: "Not Equal" is always printed

// Fix: convert the input before comparing
let value = Number("10"); // value = 10 (type: number)
if (value === 10) {
  console.log("Equal"); // ✓ now this works
}

1.4 Exception Handling Module 1 Complete