Lesson 1, Topic 1

In Progress

Lesson 3.9: JavaScript and the BOM

Lesson 3.9 – JavaScript & the BOM | Knowledge Pillars HCCS

Lesson Objectives

Explain what the BOM (Browser Object Model) is and how it differs from the DOM
Use alert(), confirm(), and prompt() to communicate with users via browser dialogs
Read browser dimensions using window.innerWidth and window.innerHeight
Open new tabs and pages using window.open()
Understand the navigator and location objects and what information they provide
Combine BOM and DOM — write browser data into page elements

Part 1: What Is the BOM?

In Lesson 3.8 you learned about the DOM — JavaScript's way of reading and changing the HTML content of your page. The BOM (Browser Object Model) is different: it gives JavaScript access to the browser itself — the window, the address bar, the screen size, and more.

🌐 window — The Global Object

Everything in JavaScript lives inside window. It is the top-level object representing the browser tab. The DOM and BOM are both properties of it.

That's why alert() and window.alert() both work — window. is implied by default.

📄 DOM vs BOM at a Glance

DOM — your page's HTML content tree (document)
BOM — browser tools outside the page
alert(), innerWidth, location, navigator, window.open()

Think of the DOM as the actors on stage — and the BOM as the stage, lighting, curtains, and everything supporting the show.

💡 They Work Together: BOM and DOM are often used in combination. For example: use window.innerWidth (BOM) to detect screen size, then use document.getElementById() (DOM) to display that information in a paragraph on the page. One reads the browser; the other changes the content.

Part 2: Key BOM Features

💬 alert()

Shows a modal popup with a message and an OK button. Execution pauses until the user clicks OK.

alert('Thanks for visiting!');

✏️ prompt()

Shows a dialog with an input field. Returns what the user typed as a string, or null if they cancel.

let name = prompt('What is your name?');

✅ confirm()

Shows an OK / Cancel dialog. Returns true if OK is clicked, false if Cancel.

let ok = confirm('Are you sure?');

📐 window.innerWidth / innerHeight

Returns the current width and height of the browser viewport (the visible area) in pixels.

console.log(window.innerWidth);

🔗 window.open()

Opens a URL in a new browser tab or window. Pass the URL as the first argument.

window.open('https://example.com');

🧭 navigator

Contains information about the user's browser and device, including online status.

navigator.onLine → true/false

📍 location

Contains the current page URL. You can also redirect to a new page by setting location.href.

location.href = 'about.html';

⏱️ setTimeout()

Runs a function after a delay (in milliseconds). A BOM timer — great for delayed effects.

setTimeout(fn, 2000); // runs after 2s

Full BOM Reference Table

BOM Features Reference
Feature	What It Does	Example
`alert(msg)`	Displays a modal message box — pauses until user clicks OK	`alert('Hello!');`
`prompt(msg)`	Shows an input dialog — returns the user's text or `null`	`let n = prompt('Name?');`
`confirm(msg)`	Shows OK/Cancel dialog — returns `true` or `false`	`if (confirm('Sure?')) { ... }`
`window.innerWidth`	Current viewport width in pixels	`window.innerWidth`
`window.innerHeight`	Current viewport height in pixels	`window.innerHeight`
`window.open(url)`	Opens a URL in a new tab	`window.open('https://...');`
`location.href`	Gets or sets the current page URL — setting it redirects	`location.href = 'page.html';`
`navigator.onLine`	Returns `true` if the browser has an internet connection	`navigator.onLine`
`setTimeout(fn, ms)`	Runs a function once after a specified delay in milliseconds	`setTimeout(fn, 3000);`
`console.log(val)`	Prints a value to the browser's developer console — for debugging	`console.log('Loaded!');`

Part 3: BOM in Code

alert(), confirm(), and prompt() in Practice

// alert — simple notification, no return value
alert('Thanks for visiting my site!');

// confirm — returns true (OK) or false (Cancel)
let answer = confirm('Would you like to see my projects?');
if (answer) {
  window.open('projects.html');
}

// prompt — returns typed text or null if cancelled
let name = prompt('What is your name?');
if (name) {
  document.getElementById('greeting').innerHTML =
    'Hello, ' + name + '! Welcome to my site.';
}
      

Combining BOM + DOM — Display Screen Width

This is the key pattern for this lesson: read a BOM property (window.innerWidth) and write it into a DOM element (innerHTML):

<!-- In index.html -->
<p id="width-info"></p>

// In <script> at bottom of body
document.getElementById('width-info').innerHTML =
  'Your browser width is ' + window.innerWidth + ' pixels.';
      

Using setTimeout() for a Delayed Effect

// Show a welcome message 2 seconds after the page loads
setTimeout(function() {
  document.getElementById('banner').innerHTML =
    '👋 Welcome! Thanks for stopping by.';
}, 2000); // 2000 milliseconds = 2 seconds
      

Showing Content Only on Small Screens

// Only show a message if the user is on a narrow (mobile) screen
if (window.innerWidth < 500) {
  alert('You\'re on a small screen — try our mobile layout!');
}
      

⚠️ Use dialogs sparingly: alert(), confirm(), and prompt() are blocking — the entire page freezes until the user responds. On mobile, they can look dated or be blocked altogether. Use them for learning and simple interactions, but professional sites typically use custom HTML/CSS modals for important dialogs.

Part 4: See It in Action

The demo below runs BOM methods safely inside the lesson — the dialogs that would normally pop up as browser alerts are simulated in the output area so you can see the results without interrupting the page. The window.innerWidth, window.open(), and setTimeout() demos are fully real.

🔍 Live BOM Demo — Click Each Button

← Click a button above to see its output here.

Note: alert(), prompt(), and confirm() are simulated in the output above. window.open() and setTimeout() are the real BOM methods.

Student Activity

🛠️ Code It

Interact with the Browser Using JavaScript

Title: Interact with the Browser Using JavaScript | Platform: Knowledge Pillars Coding Lab

You've given your page a brain (DOM, Lesson 3.8). Now give it browser awareness — add BOM features that detect screen size, greet users, and open new tabs. All JavaScript goes just before </body> in index.html.

Add a browser interaction section to index.html. Place this inside your <main> element:
<section id="browser-interaction"> <h2>Browser Interaction</h2> <button id="alertBtn" type="button">Say Hello</button> <p id="width-info"></p> </section>

💾 Save index.html.
Add an alert on button click. Just before </body>, add your <script> block with this code:
<script> // Step 2: Alert button document.getElementById('alertBtn') .addEventListener('click', function() { alert('Thanks for visiting my site!'); }); </script>

💾 Save and click the button — an alert box should appear!
Display the browser width on page load. Add this inside your existing <script> block, below the event listener:
// Step 3: Display window width using BOM + DOM together document.getElementById('width-info').innerHTML = 'Your browser width is ' + window.innerWidth + ' pixels.';

💾 Save and refresh — you should see your screen width on the page!
Add a "Open Wikipedia" button using window.open(). Add the HTML button and its JavaScript handler:
 <button id="openBtn" type="button">Open Wikipedia</button> // In your <script> block document.getElementById('openBtn') .addEventListener('click', function() { window.open('https://www.wikipedia.org'); });

💾 Save and test — clicking the button should open Wikipedia in a new tab.
Use prompt() to greet the user by name. Add this HTML element and JavaScript to personalize the greeting on page load:
 <p id="user-greeting"></p> // In your <script> block let userName = prompt('What is your name?'); if (userName) { document.getElementById('user-greeting').innerHTML = 'Hello, ' + userName + '! Welcome to my site. 👋'; }

💾 Save both files and commit your changes in the Knowledge Pillars Coding Lab.

🌟 Bonus Challenges

Only show an alert on small screens using an if statement:

if (window.innerWidth < 500) {
  alert('You\'re on a small screen — try our mobile layout!');
}
          

Show a delayed welcome banner using setTimeout():

setTimeout(function() {
  document.getElementById('banner').innerHTML =
    '👋 Welcome! Glad you\'re here.';
}, 2000);
          

Use confirm() before opening an external link:

let go = confirm('You are leaving this site. Continue?');
if (go) {
  window.open('https://www.wikipedia.org');
}
          

Vocabulary

BOM

Browser Object Model — the JavaScript tools for interacting with the browser window, not just the page content

window

The global JavaScript object representing the browser tab — both the DOM and BOM are properties of window

alert()

Displays a modal message box — pauses execution until the user clicks OK

prompt()

Shows an input dialog — returns what the user typed as a string, or null if cancelled

confirm()

Shows an OK/Cancel dialog — returns true for OK, false for Cancel

window.innerWidth

A BOM property that returns the current width of the browser viewport in pixels

window.open()

Opens a URL in a new browser tab or window

setTimeout()

Runs a function once after a specified delay in milliseconds — a BOM timer method

Lesson Summary

Lesson 3.9 — Key Concepts
Feature / Method	What It Does
BOM vs DOM	DOM = page content (HTML tree via `document`). BOM = browser tools (window, screen, location, navigator)
`window`	The global object — both DOM and BOM live inside it. `alert()` = `window.alert()`
`alert('msg')`	Shows a popup — pauses execution until OK is clicked
`prompt('msg')`	Shows an input dialog — returns typed text or `null`
`confirm('msg')`	Shows OK/Cancel — returns `true` or `false`
`window.innerWidth`	Current viewport width in pixels — use with `if` for responsive JS
`window.open(url)`	Opens a URL in a new tab
`location.href`	Current URL — set it to redirect the user to another page
`setTimeout(fn, ms)`	Runs a function after a delay — e.g., show a welcome message 2 seconds after load
BOM + DOM combined	Read browser data with BOM → write it to the page with DOM: `element.innerHTML = window.innerWidth + 'px'`

Knowledge Check

Read each question carefully and select the best answer. Each question has one correct response.

1. What is the key difference between the DOM and the BOM?

2. What does prompt('What is your name?') return?

3. What does window.innerWidth return?

4. Which of the following correctly opens a URL in a new browser tab?

5. What does setTimeout(function() { alert('Hi!'); }, 3000) do?

Activity Checklist

I added a <section id="browser-interaction"> with a button and a paragraph to index.html
I used addEventListener to trigger alert() when the button is clicked
I used window.innerWidth and innerHTML together to display the browser width on the page
I added a window.open() button that opens a URL in a new tab
I used prompt() to ask for the user's name and displayed it in a DOM element
My <script> is placed just before </body>
I tested all interactions in the browser — alerts fire, width displays, new tab opens
I saved both files and committed my changes in the Knowledge Pillars Coding Lab
(Optional) I used confirm() before opening an external link
(Optional) I added a setTimeout() welcome banner