LearnContact
Lesson 2365 min read

JavaScript Browser Object Model (BOM)

Learn how JavaScript interacts with the browser using the Browser Object Model. Master window, screen, location, history, navigator, dialogs, timers, scrolling, viewport information, online status, and browser-level functionality.

Introduction

In the previous lessons, you learned how JavaScript works with the Document Object Model and how events make web pages interactive. However, a web page exists inside a browser, and JavaScript often needs to interact with the browser itself.

JavaScript may need to read the current URL, navigate to another page, move backward or forward through browser history, detect the browser language, check whether the device is online, display dialogs, run delayed code, repeat tasks, read screen dimensions, control scrolling, request location information, or enter fullscreen mode.

These browser-level capabilities are commonly grouped under the Browser Object Model, usually called the BOM.

What You Will Learn
  • What the Browser Object Model is.
  • Why JavaScript needs browser-level objects.
  • The difference between the DOM and BOM.
  • How the window object works.
  • Why window is the browser global object.
  • How to read browser window dimensions.
  • The difference between inner and outer dimensions.
  • How to read window position.
  • How browser windows can be opened and closed.
  • How the screen object works.
  • How to read screen dimensions.
  • How to read available screen space.
  • How the location object works.
  • How to inspect every major part of a URL.
  • How to navigate to another page.
  • The difference between assign() and replace().
  • How to reload a page.
  • How URLSearchParams works.
  • How to read and modify query parameters.
  • How the history object works.
  • How to move backward and forward.
  • How the History API works.
  • How pushState() and replaceState() work.
  • How the popstate event works.
  • How the navigator object works.
  • How to read language and browser information.
  • How to detect online and offline state.
  • How online and offline events work.
  • How to inspect hardware-related information.
  • How the Clipboard API works.
  • How the Geolocation API works.
  • How to read the current location.
  • How to watch location changes.
  • How browser dialogs work.
  • How alert(), confirm(), and prompt() work.
  • How JavaScript timers work.
  • How setTimeout() works.
  • How setInterval() works.
  • How to cancel timers.
  • How recursive timeouts work.
  • How to create a countdown timer.
  • How browser scrolling works.
  • How to read the current scroll position.
  • How scrollTo() and scrollBy() work.
  • How smooth scrolling works.
  • How scrollIntoView() works.
  • How the Page Visibility API works.
  • How fullscreen mode works.
  • How to build a complete browser information dashboard.

What is the BOM?

The Browser Object Model is a collection of objects provided by the browser that allow JavaScript to interact with the browser environment outside the HTML document.

Unlike the DOM, which represents the HTML document, the BOM represents browser-level information and functionality.

Browser Environment
┌─────────────────────────────────────┐
│              BROWSER                │
│                                     │
│   ┌─────────────────────────────┐   │
│   │        Browser Window       │   │
│   │                             │   │
│   │   URL                       │   │
│   │   History                   │   │
│   │   Screen                    │   │
│   │   Navigator                 │   │
│   │   Timers                    │   │
│   │   Dialogs                   │   │
│   │   Scrolling                 │   │
│   │                             │   │
│   │   ┌─────────────────────┐   │   │
│   │   │    HTML DOCUMENT    │   │   │
│   │   │                     │   │   │
│   │   │        DOM          │   │   │
│   │   └─────────────────────┘   │   │
│   └─────────────────────────────┘   │
└─────────────────────────────────────┘

The BOM is not represented by one single object. It is a group of browser-provided objects, most of which are accessible through the window object.

Why Do We Need the BOM?

URL Management

Read the current URL and navigate to other pages.

Browser History

Move backward and forward through visited pages.

Screen Information

Read screen dimensions and available display space.

Browser Information

Read language, connection, and browser environment information.

Timers

Delay code execution or repeat tasks.

Dialogs

Display alerts, confirmations, and prompts.

Geolocation

Request the user device location with permission.

Clipboard

Read from and write to the clipboard when permitted.

Scrolling

Read and control page scroll position.

Connectivity

Detect online and offline state changes.

Page Visibility

Detect whether the page is currently visible.

⛶ Fullscreen

Display supported content in fullscreen mode.

Real-World Analogy

Think of a browser as a car. The DOM is like the content inside the car, such as the seats, dashboard controls, and passengers. The BOM is like the car system itself, including the windshield size, navigation system, travel history, current location, timers, and external environment information.

Browser Analogy
CAR

┌──────────────────────────────┐
│                              │
│  Navigation System           │
│  Travel History              │
│  Window Size                 │
│  Current Location            │
│  External Environment        │
│                              │
│     ┌──────────────────┐     │
│     │  CONTENT INSIDE  │     │
│     │                  │     │
│     │  Seats           │     │
│     │  Controls        │     │
│     │  Passengers      │     │
│     └──────────────────┘     │
└──────────────────────────────┘


BROWSER

┌──────────────────────────────┐
│             BOM              │
│                              │
│  location                    │
│  history                     │
│  screen                      │
│  navigator                   │
│  timers                      │
│                              │
│     ┌──────────────────┐     │
│     │       DOM        │     │
│     │                  │     │
│     │  HTML Elements   │     │
│     │  Text            │     │
│     │  Attributes      │     │
│     └──────────────────┘     │
└──────────────────────────────┘

DOM vs BOM

DOM and BOM Comparison
DOM

Full Name:
Document Object Model

Represents:
HTML Document

Main Object:
document

Used For:
Selecting elements
Changing content
Changing styles
Creating elements
Removing elements


BOM

Full Name:
Browser Object Model

Represents:
Browser Environment

Main Object:
window

Used For:
URL navigation
Browser history
Screen information
Browser information
Timers
Dialogs
Scrolling
Important Relationship
  • The DOM represents the document.
  • The BOM represents the browser environment.
  • The document object is available through window.
  • In browser JavaScript, window is the top-level global object.

BOM Structure

Browser Object Model Structure
window
  │
  ├── document
  │     │
  │     └── DOM
  │
  ├── location
  │     │
  │     ├── href
  │     ├── protocol
  │     ├── host
  │     ├── hostname
  │     ├── port
  │     ├── pathname
  │     ├── search
  │     └── hash
  │
  ├── history
  │     │
  │     ├── back()
  │     ├── forward()
  │     ├── go()
  │     ├── pushState()
  │     └── replaceState()
  │
  ├── navigator
  │     │
  │     ├── language
  │     ├── onLine
  │     ├── clipboard
  │     └── geolocation
  │
  ├── screen
  │     │
  │     ├── width
  │     ├── height
  │     ├── availWidth
  │     └── availHeight
  │
  ├── setTimeout()
  ├── setInterval()
  ├── alert()
  ├── confirm()
  ├── prompt()
  ├── scrollTo()
  └── scrollBy()

The window Object

The window object represents the browser window or tab containing the current document. It is the top-level object in browser JavaScript.

Access Window
console.log(window);

Many browser APIs are properties or methods of window.

Window Members
console.log(
    window.document
);

console.log(
    window.location
);

console.log(
    window.history
);

console.log(
    window.navigator
);

console.log(
    window.screen
);

Global Object in Browser

In traditional browser scripts, many global functions and properties are available through window. The window prefix is often optional.

With and Without window
window.alert(
    'Hello'
);

alert(
    'Hello'
);


window.setTimeout(
    function () {
        console.log(
            'Done'
        );
    },
    1000
);

setTimeout(
    function () {
        console.log(
            'Done'
        );
    },
    1000
);
window Prefix
  • The window prefix is often optional for global browser APIs.
  • Writing window.location can make browser-level code more explicit.
  • Writing location is shorter and also valid in browser code.
  • Not every JavaScript environment provides window.

window Properties

document

Represents the current HTML document.

location

Contains current URL information.

history

Provides browser session history controls.

navigator

Provides browser and device-related information.

screen

Provides display information.

innerWidth

Contains viewport width.

innerHeight

Contains viewport height.

scrollX

Contains horizontal scroll position.

scrollY

Contains vertical scroll position.

Window Dimensions

The window object provides properties for reading the dimensions of the viewport and the complete browser window.

innerWidth and innerHeight

The innerWidth and innerHeight properties return the dimensions of the browser viewport.

Viewport Dimensions
console.log(
    window.innerWidth
);

console.log(
    window.innerHeight
);
Responsive Check
if (
    window.innerWidth < 768
) {
    console.log(
        'Small viewport'
    );
} else {
    console.log(
        'Large viewport'
    );
}

outerWidth and outerHeight

The outerWidth and outerHeight properties represent the dimensions of the complete browser window.

Browser Window Dimensions
console.log(
    window.outerWidth
);

console.log(
    window.outerHeight
);

Viewport vs Browser Window

Dimension Comparison
┌────────────────────────────────────┐
│        COMPLETE BROWSER WINDOW     │
│                                    │
│  Tabs                              │
│  Address Bar                       │
│  Browser Controls                  │
│                                    │
│  ┌──────────────────────────────┐  │
│  │                              │  │
│  │          VIEWPORT            │  │
│  │                              │  │
│  │  innerWidth                  │  │
│  │  innerHeight                 │  │
│  │                              │  │
│  └──────────────────────────────┘  │
│                                    │
│  outerWidth                        │
│  outerHeight                       │
└────────────────────────────────────┘

Window Position

The screenX and screenY properties provide the browser window position relative to the screen.

Window Position
console.log(
    window.screenX
);

console.log(
    window.screenY
);

Opening Windows

The window.open() method can request that the browser open a new browsing context.

Open New Tab
const newWindow =
    window.open(
        'https://example.com',
        '_blank'
    );
Open Window with Features
const popup =
    window.open(
        'https://example.com',
        'exampleWindow',
        'width=600,height=400'
    );
Popup Blocking
  • Browsers may block windows opened without direct user interaction.
  • Opening a window from a button click is more likely to be allowed.
  • Do not use popups unnecessarily.
  • The returned value may be null if the browser blocks the window.

Closing Windows

Close Opened Window
const popup =
    window.open(
        'about:blank',
        '_blank'
    );


if (popup) {
    popup.close();
}

Browsers generally restrict scripts from closing windows or tabs that were not opened by script.

Moving Windows

Move Window
popup.moveTo(
    100,
    100
);


popup.moveBy(
    50,
    50
);

Modern browsers may restrict window movement, especially for normal tabs.

Resizing Windows

Resize Window
popup.resizeTo(
    800,
    600
);


popup.resizeBy(
    100,
    50
);

Browser security and user experience policies may restrict resizing behavior.

The screen Object

The screen object provides information about the user display.

Access Screen
console.log(
    window.screen
);


console.log(
    screen
);

Screen Dimensions

Screen Width and Height
console.log(
    screen.width
);

console.log(
    screen.height
);
Screen Dimensions
PHYSICAL / LOGICAL DISPLAY

┌────────────────────────────────┐
│                                │
│                                │
│         screen.width           │
│                                │
│                                │
│                                │
└────────────────────────────────┘

           screen.height

Available Screen Space

The availWidth and availHeight properties return the available screen space, excluding areas reserved by the operating system where applicable.

Available Screen Size
console.log(
    screen.availWidth
);

console.log(
    screen.availHeight
);

Color and Pixel Depth

Display Depth
console.log(
    screen.colorDepth
);

console.log(
    screen.pixelDepth
);

These properties provide information about display color and pixel depth. They are less commonly needed in ordinary web applications.

The location Object

The location object represents the current document URL and provides methods for browser navigation.

Access Location
console.log(
    window.location
);


console.log(
    location
);

Current URL Information

Location Properties
console.log(
    location.href
);

console.log(
    location.protocol
);

console.log(
    location.host
);

console.log(
    location.hostname
);

console.log(
    location.port
);

console.log(
    location.pathname
);

console.log(
    location.search
);

console.log(
    location.hash
);

location.href

The href property contains the complete current URL.

Current URL
console.log(
    location.href
);
Example Output

location.protocol

URL Protocol
console.log(
    location.protocol
);
Example Output

location.host

The host property contains the hostname and port when a port is present.

URL Host
console.log(
    location.host
);
Possible Output

location.hostname

URL Hostname
console.log(
    location.hostname
);
Possible Output

location.port

URL Port
console.log(
    location.port
);
Possible Output

location.pathname

URL Path
console.log(
    location.pathname
);
Example Output

The search property contains the query string, including the leading question mark.

Query String
console.log(
    location.search
);
Example Output

location.hash

The hash property contains the fragment identifier, including the leading hash symbol.

URL Hash
console.log(
    location.hash
);
Example Output

URL Structure

URL Anatomy
https://example.com:3000/courses/javascript?page=2&sort=asc#timers
└─┬─┘   └─────┬─────┘ └─┬┘ └────────┬────────┘ └─────────┬─────────┘ └──┬──┘
  │           │         │           │                    │              │
protocol   hostname    port      pathname              search          hash


host

example.com:3000


href

The complete URL

Navigating with location

The location object can navigate the browser to another URL.

Navigate with href
location.href =
    '/learn/javascript/json';

Assigning a new value to href navigates to the new location and normally creates a browser history entry.

location.assign()

Navigate with assign
location.assign(
    '/learn/javascript/json'
);

The assign() method loads the new URL and normally keeps the current page in browser history.

location.replace()

Navigate with replace
location.replace(
    '/login'
);

The replace() method loads another URL but replaces the current history entry. The user generally cannot return to the replaced page using the Back button.

location.reload()

Reload Current Page
location.reload();

The reload() method reloads the current document.

assign() vs replace()

Navigation Comparison
assign()

Current Page
     │
     ▼
New Page

History:

Page A
Page B
New Page

Back button can return.


replace()

Current Page
     │
     ▼
New Page

History:

Page A
New Page

Current entry is replaced.

Back button cannot return
to the replaced entry.

URLSearchParams

The URLSearchParams interface provides a convenient way to read and modify query string parameters.

Create URLSearchParams
const params =
    new URLSearchParams(
        location.search
    );

console.log(params);

Reading Query Parameters

Example URL
https://example.com/courses?category=javascript&page=2
Read Parameters
const params =
    new URLSearchParams(
        location.search
    );


console.log(
    params.get(
        'category'
    )
);


console.log(
    params.get(
        'page'
    )
);


console.log(
    params.has(
        'category'
    )
);
Output

Modifying Query Parameters

Modify Parameters
const params =
    new URLSearchParams(
        location.search
    );


params.set(
    'page',
    '3'
);


params.set(
    'sort',
    'newest'
);


params.delete(
    'category'
);


console.log(
    params.toString()
);
Possible Output

The history Object

The history object provides access to the browser session history for the current tab.

Access History
console.log(
    window.history
);

history.length

History Length
console.log(
    history.length
);

The length property returns the number of entries in the current session history. It does not expose the URLs of those entries.

history.back()

Go Back
history.back();

This behaves similarly to pressing the browser Back button.

history.forward()

Go Forward
history.forward();

history.go()

Navigate History
// One page backward
history.go(-1);


// Two pages backward
history.go(-2);


// One page forward
history.go(1);

History Navigation Flow

History Navigation
SESSION HISTORY

Page A
   │
   ▼
Page B
   │
   ▼
Page C
   │
   ▼
Page D
   ▲
   │
CURRENT PAGE


history.back()

Page D → Page C


history.forward()

Page C → Page D


history.go(-2)

Page D → Page B

History API

The History API allows applications to modify the current session history without performing a full page reload. This is especially useful in single-page applications.

pushState()

The pushState() method adds a new history entry without reloading the page.

Add History Entry
history.pushState(
    {
        page: 'courses'
    },
    '',
    '/courses'
);
pushState Arguments
history.pushState(
    state,
    unused,
    url
);


state

Data associated with entry.


unused

Traditionally an empty string.


url

New URL for the entry.

replaceState()

The replaceState() method updates the current history entry instead of adding a new one.

Replace History Entry
history.replaceState(
    {
        page: 'dashboard'
    },
    '',
    '/dashboard'
);

popstate Event

The popstate event occurs when the active history entry changes through history navigation, such as Back or Forward navigation.

Handle History Navigation
window.addEventListener(
    'popstate',
    function (event) {
        console.log(
            'History changed'
        );

        console.log(
            event.state
        );
    }
);

The navigator object provides information about the browser environment and access to several browser capabilities.

Access Navigator
console.log(
    navigator
);

Browser Information

Navigator Properties
console.log(
    navigator.userAgent
);

console.log(
    navigator.language
);

console.log(
    navigator.languages
);

console.log(
    navigator.platform
);

console.log(
    navigator.cookieEnabled
);

console.log(
    navigator.onLine
);

navigator.userAgent

The userAgent property contains a browser identification string.

Read User Agent
console.log(
    navigator.userAgent
);
Avoid Depending on User-Agent Detection
  • User-agent strings can be complex.
  • Browsers may reduce or modify exposed information.
  • Feature detection is usually more reliable.
  • Check whether the required API exists instead of guessing the browser.
Preferred Language
console.log(
    navigator.language
);
Possible Output
Preferred Languages
console.log(
    navigator.languages
);
Possible Output
Platform Information
console.log(
    navigator.platform
);

Platform information should not be treated as a guaranteed or complete description of the user device.

Check Cookie Support
if (
    navigator.cookieEnabled
) {
    console.log(
        'Cookies enabled'
    );
} else {
    console.log(
        'Cookies disabled'
    );
}
Check Connection State
if (
    navigator.onLine
) {
    console.log(
        'Browser is online'
    );
} else {
    console.log(
        'Browser is offline'
    );
}
Online Does Not Guarantee Internet Access
  • navigator.onLine indicates browser network connectivity state.
  • A network connection does not guarantee that a specific server is reachable.
  • Real applications should also handle failed network requests.

Online and Offline Events

Connection Events
window.addEventListener(
    'online',
    function () {
        console.log(
            'Connection restored'
        );
    }
);


window.addEventListener(
    'offline',
    function () {
        console.log(
            'Connection lost'
        );
    }
);

navigator.hardwareConcurrency

The hardwareConcurrency property provides the number of logical processor cores reported to the browser.

Logical Processor Count
console.log(
    navigator.hardwareConcurrency
);

navigator.deviceMemory

The deviceMemory property may provide an approximate amount of device memory in supported browsers.

Device Memory
console.log(
    navigator.deviceMemory
);
Browser Support
  • Some navigator properties are not supported in every browser.
  • A property may return undefined.
  • Always use feature detection for optional APIs.

The Clipboard API allows supported applications to read and write clipboard content, usually in secure contexts and with browser permission rules.

Copy Text
async function copyText() {
    await navigator.clipboard.writeText(
        'JavaScript BOM'
    );

    console.log(
        'Text copied'
    );
}
Read Clipboard Text
async function readText() {
    const text =
        await navigator.clipboard.readText();

    console.log(text);
}

Geolocation API

The Geolocation API allows a website to request the user device location. The browser requires user permission, and the feature generally requires a secure context.

Check Geolocation Support
if (
    'geolocation'
    in navigator
) {
    console.log(
        'Geolocation supported'
    );
} else {
    console.log(
        'Geolocation unavailable'
    );
}

getCurrentPosition()

Get Current Position
navigator.geolocation
    .getCurrentPosition(
        function (position) {
            console.log(
                position.coords.latitude
            );

            console.log(
                position.coords.longitude
            );
        }
    );
Geolocation Flow
JavaScript Requests Location

            │
            ▼

Browser Checks Permission

            │
      ┌─────┴─────┐
      ▼           ▼
   Allowed      Denied
      │           │
      ▼           ▼
Get Position   Error Handler
      │
      ▼
Latitude
Longitude
Accuracy

Geolocation Errors

Handle Geolocation Errors
navigator.geolocation
    .getCurrentPosition(
        function (position) {
            console.log(
                position.coords.latitude,
                position.coords.longitude
            );
        },

        function (error) {
            console.log(
                error.code
            );

            console.log(
                error.message
            );
        }
    );
Common Error Codes
1

Permission Denied


2

Position Unavailable


3

Request Timed Out

watchPosition()

The watchPosition() method requests updates when the device position changes.

Watch Position
const watchId =
    navigator.geolocation
        .watchPosition(
            function (position) {
                console.log(
                    position.coords.latitude,
                    position.coords.longitude
                );
            }
        );

clearWatch()

Stop Watching Position
navigator.geolocation
    .clearWatch(
        watchId
    );

Browser Dialogs

Browsers provide simple built-in dialogs through alert(), confirm(), and prompt(). These dialogs are easy to use but block normal interaction while open.

alert()

Alert Dialog
alert(
    'Welcome to PrograMinds!'
);

The alert dialog displays a message and waits until the user dismisses it.

confirm()

Confirmation Dialog
const result =
    confirm(
        'Delete this lesson?'
    );


if (result) {
    console.log(
        'User confirmed'
    );
} else {
    console.log(
        'User cancelled'
    );
}

confirm() returns true when the user confirms and false when the user cancels.

prompt()

Prompt Dialog
const name =
    prompt(
        'Enter your name:',
        'Student'
    );


console.log(name);

prompt() returns the entered string or null when the user cancels.

Dialog Comparison

Browser Dialogs
alert()

Purpose:
Show message

Returns:
undefined


confirm()

Purpose:
Ask yes/no question

Returns:
true or false


prompt()

Purpose:
Request text input

Returns:
string or null
Built-In Dialog Limitations
  • They block JavaScript interaction while open.
  • Their appearance is controlled by the browser.
  • They cannot be styled like normal HTML.
  • Modern applications often use custom DOM-based modals instead.

Timers

Browser timers allow JavaScript to schedule code for future execution.

Timer Types
setTimeout()

Run once after a delay.


setInterval()

Run repeatedly after intervals.


clearTimeout()

Cancel a timeout.


clearInterval()

Cancel an interval.

setTimeout()

The setTimeout() function schedules a function to run once after a minimum delay.

Basic Timeout
setTimeout(
    function () {
        console.log(
            'Runs after 2 seconds'
        );
    },
    2000
);
Named Timeout Function
function showMessage() {
    console.log(
        'Welcome!'
    );
}


setTimeout(
    showMessage,
    3000
);
Delay Uses Milliseconds
  • 1000 milliseconds = 1 second.
  • 2000 milliseconds = 2 seconds.
  • 5000 milliseconds = 5 seconds.
  • The delay is a minimum waiting time, not a guaranteed exact execution time.

clearTimeout()

Cancel Timeout
const timeoutId =
    setTimeout(
        function () {
            console.log(
                'This may not run'
            );
        },
        5000
    );


clearTimeout(
    timeoutId
);

setInterval()

The setInterval() function repeatedly schedules a function using the specified interval.

Basic Interval
setInterval(
    function () {
        console.log(
            'Runs every second'
        );
    },
    1000
);

clearInterval()

Stop Interval
const intervalId =
    setInterval(
        function () {
            console.log(
                'Running...'
            );
        },
        1000
    );


setTimeout(
    function () {
        clearInterval(
            intervalId
        );
    },
    5000
);

Timeout vs Interval

Timer Comparison
setTimeout()

Start
  │
  ▼
Wait
  │
  ▼
Run Once
  │
  ▼
End


setInterval()

Start
  │
  ▼
Wait
  │
  ▼
Run
  │
  ▼
Wait
  │
  ▼
Run
  │
  ▼
Repeat Until Cancelled

How Timers Work

A timer does not interrupt currently running JavaScript. After the delay has passed, the callback becomes eligible to run when JavaScript can process it.

Timer Execution Order
console.log(
    'Start'
);


setTimeout(
    function () {
        console.log(
            'Timeout'
        );
    },
    0
);


console.log(
    'End'
);
Output
Important Timer Rule
  • A delay of 0 does not mean immediate execution.
  • The current JavaScript work finishes first.
  • The callback runs later when it can be processed.
  • Timers provide minimum delays rather than exact execution guarantees.

Timer IDs

setTimeout() and setInterval() return identifiers that can be used to cancel scheduled work.

Store Timer IDs
const timeoutId =
    setTimeout(
        showMessage,
        2000
    );


const intervalId =
    setInterval(
        updateClock,
        1000
    );


clearTimeout(
    timeoutId
);


clearInterval(
    intervalId
);

Recursive setTimeout()

A function can schedule another timeout after its current work completes. This pattern provides more control than a fixed interval in some situations.

Recursive Timeout
function runTask() {
    console.log(
        'Task running'
    );


    setTimeout(
        runTask,
        2000
    );
}


runTask();
Recursive Timeout Flow
Run Task
   │
   ▼
Task Completes
   │
   ▼
Schedule Timeout
   │
   ▼
Wait
   │
   ▼
Run Task Again
   │
   ▼
Repeat

Countdown Timer

index.html
<h2 id="countdown">
    10
</h2>

<button id="startButton">
    Start
</button>

<button id="stopButton">
    Stop
</button>
script.js
const countdown =
    document.getElementById(
        'countdown'
    );

const startButton =
    document.getElementById(
        'startButton'
    );

const stopButton =
    document.getElementById(
        'stopButton'
    );


let seconds = 10;

let intervalId = null;


startButton.addEventListener(
    'click',
    function () {
        if (intervalId !== null) {
            return;
        }


        intervalId =
            setInterval(
                function () {
                    seconds--;

                    countdown.textContent =
                        seconds;


                    if (seconds <= 0) {
                        clearInterval(
                            intervalId
                        );

                        intervalId = null;

                        countdown.textContent =
                            'Finished!';
                    }
                },
                1000
            );
    }
);


stopButton.addEventListener(
    'click',
    function () {
        clearInterval(
            intervalId
        );

        intervalId = null;
    }
);

Scrolling

The browser provides properties and methods for reading and controlling page scrolling.

Scroll Position

Read Scroll Position
console.log(
    window.scrollX
);

console.log(
    window.scrollY
);
Track Scroll Position
window.addEventListener(
    'scroll',
    function () {
        console.log(
            window.scrollY
        );
    }
);

scrollTo()

The scrollTo() method moves the page to an absolute scroll position.

Scroll to Position
window.scrollTo(
    0,
    500
);

scrollBy()

The scrollBy() method scrolls relative to the current position.

Scroll Relative to Current Position
window.scrollBy(
    0,
    300
);

Smooth Scrolling

Smooth Scroll to Top
window.scrollTo(
    {
        top: 0,
        behavior: 'smooth'
    }
);
Smooth Relative Scroll
window.scrollBy(
    {
        top: 500,
        behavior: 'smooth'
    }
);

Element Scrolling

Scrollable elements also provide scroll properties and methods.

Scrollable Container
const container =
    document.querySelector(
        '.container'
    );


console.log(
    container.scrollTop
);


container.scrollTo(
    {
        top: 300,
        behavior: 'smooth'
    }
);

scrollIntoView()

The scrollIntoView() method scrolls the page or nearest scrollable ancestor so that an element becomes visible.

Scroll Element into View
const section =
    document.getElementById(
        'timers'
    );


section.scrollIntoView(
    {
        behavior: 'smooth',
        block: 'start'
    }
);

Page Visibility

The Page Visibility API allows JavaScript to detect whether the document is currently visible to the user.

document.hidden

Check Page Visibility
console.log(
    document.hidden
);

The value is true when the document is considered hidden and false when it is visible.

visibilitychange Event

Detect Visibility Changes
document.addEventListener(
    'visibilitychange',
    function () {
        if (document.hidden) {
            console.log(
                'Page hidden'
            );
        } else {
            console.log(
                'Page visible'
            );
        }
    }
);

Games

Pause activity when the page becomes hidden.

Media

Adjust playback behavior when visibility changes.

Analytics

Measure actual visible engagement more accurately.

Performance

Reduce unnecessary work while the page is hidden.

Fullscreen API

The Fullscreen API allows supported elements to request fullscreen display. Browsers generally require this action to begin from user interaction.

Entering Fullscreen

Request Fullscreen
const player =
    document.getElementById(
        'player'
    );


player.requestFullscreen();

Exiting Fullscreen

Exit Fullscreen
if (
    document.fullscreenElement
) {
    document.exitFullscreen();
}

Fullscreen Change Event

Detect Fullscreen Changes
document.addEventListener(
    'fullscreenchange',
    function () {
        if (
            document.fullscreenElement
        ) {
            console.log(
                'Entered fullscreen'
            );
        } else {
            console.log(
                'Exited fullscreen'
            );
        }
    }
);

Complete BOM Example

The following example creates a Browser Information Dashboard. It displays viewport, screen, URL, language, connection, history, and scroll information. It also responds to resize, scroll, online, offline, and visibility events, provides navigation controls, supports clipboard copying, includes a timer, and demonstrates several important BOM APIs working together.

index.html
<div class="browser-dashboard">
    <header class="dashboard-header">
        <p class="eyebrow">
            JavaScript BOM Project
        </p>

        <h2>
            Browser Information Dashboard
        </h2>

        <p>
            Explore information provided
            by the browser environment.
        </p>
    </header>

    <div
        id="connectionStatus"
        class="status-banner"
    >
        Checking connection...
    </div>

    <div class="info-grid">
        <article class="info-card">
            <span>
                Viewport
            </span>

            <strong id="viewportInfo">
                -
            </strong>
        </article>

        <article class="info-card">
            <span>
                Screen
            </span>

            <strong id="screenInfo">
                -
            </strong>
        </article>

        <article class="info-card">
            <span>
                Language
            </span>

            <strong id="languageInfo">
                -
            </strong>
        </article>

        <article class="info-card">
            <span>
                History Entries
            </span>

            <strong id="historyInfo">
                -
            </strong>
        </article>

        <article class="info-card">
            <span>
                Scroll Position
            </span>

            <strong id="scrollInfo">
                -
            </strong>
        </article>

        <article class="info-card">
            <span>
                Page Visibility
            </span>

            <strong id="visibilityInfo">
                -
            </strong>
        </article>
    </div>

    <section class="url-panel">
        <h3>
            Current URL
        </h3>

        <p id="urlInfo"></p>

        <button
            id="copyUrlButton"
            type="button"
        >
            Copy URL
        </button>
    </section>

    <section class="timer-panel">
        <h3>
            Session Timer
        </h3>

        <strong id="timerDisplay">
            0 seconds
        </strong>

        <div class="timer-actions">
            <button
                id="startTimerButton"
                type="button"
            >
                Start
            </button>

            <button
                id="stopTimerButton"
                type="button"
            >
                Stop
            </button>

            <button
                id="resetTimerButton"
                type="button"
            >
                Reset
            </button>
        </div>
    </section>

    <div class="browser-actions">
        <button
            id="backButton"
            type="button"
        >
            ← Back
        </button>

        <button
            id="forwardButton"
            type="button"
        >
            Forward →
        </button>

        <button
            id="topButton"
            type="button"
        >
            ↑ Scroll to Top
        </button>

        <button
            id="reloadButton"
            type="button"
        >
            Reload
        </button>
    </div>

    <div
        id="message"
        class="dashboard-message"
    >
        Dashboard ready.
    </div>
</div>
style.css
.browser-dashboard {
    max-width: 900px;
    margin: 40px auto;
    padding: 28px;
    border-radius: 18px;
    background: var(--bg-secondary);
}

.dashboard-header {
    margin-bottom: 24px;
}

.eyebrow {
    margin-bottom: 8px;
    color: var(--accent-light);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.status-banner {
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--bg-primary);
}

.info-grid {
    display: grid;
    grid-template-columns:
        repeat(3, 1fr);
    gap: 12px;
}

.info-card {
    padding: 18px;
    border: 1px solid
        var(--border-color);
    border-radius: 12px;
    background: var(--bg-primary);
}

.info-card span,
.info-card strong {
    display: block;
}

.info-card span {
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.url-panel,
.timer-panel {
    margin-top: 18px;
    padding: 18px;
    border-radius: 12px;
    background: var(--bg-primary);
}

.url-panel p {
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}

.timer-panel strong {
    display: block;
    margin: 14px 0;
    font-size: 1.5rem;
}

.timer-actions,
.browser-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.browser-actions {
    margin-top: 18px;
}

.timer-actions button,
.browser-actions button,
.url-panel button {
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.dashboard-message {
    margin-top: 18px;
    color: var(--text-secondary);
}

@media (
    max-width: 700px
) {
    .info-grid {
        grid-template-columns:
            1fr;
    }
}
script.js
const connectionStatus =
    document.getElementById(
        'connectionStatus'
    );

const viewportInfo =
    document.getElementById(
        'viewportInfo'
    );

const screenInfo =
    document.getElementById(
        'screenInfo'
    );

const languageInfo =
    document.getElementById(
        'languageInfo'
    );

const historyInfo =
    document.getElementById(
        'historyInfo'
    );

const scrollInfo =
    document.getElementById(
        'scrollInfo'
    );

const visibilityInfo =
    document.getElementById(
        'visibilityInfo'
    );

const urlInfo =
    document.getElementById(
        'urlInfo'
    );

const copyUrlButton =
    document.getElementById(
        'copyUrlButton'
    );

const timerDisplay =
    document.getElementById(
        'timerDisplay'
    );

const startTimerButton =
    document.getElementById(
        'startTimerButton'
    );

const stopTimerButton =
    document.getElementById(
        'stopTimerButton'
    );

const resetTimerButton =
    document.getElementById(
        'resetTimerButton'
    );

const backButton =
    document.getElementById(
        'backButton'
    );

const forwardButton =
    document.getElementById(
        'forwardButton'
    );

const topButton =
    document.getElementById(
        'topButton'
    );

const reloadButton =
    document.getElementById(
        'reloadButton'
    );

const message =
    document.getElementById(
        'message'
    );


let seconds = 0;

let timerId = null;


function updateBrowserInfo() {
    viewportInfo.textContent =
        `${window.innerWidth} × ${window.innerHeight}`;

    screenInfo.textContent =
        `${screen.width} × ${screen.height}`;

    languageInfo.textContent =
        navigator.language;

    historyInfo.textContent =
        history.length;

    scrollInfo.textContent =
        `X: ${Math.round(window.scrollX)}, Y: ${Math.round(window.scrollY)}`;

    visibilityInfo.textContent =
        document.hidden
            ? 'Hidden'
            : 'Visible';

    urlInfo.textContent =
        location.href;
}


function updateConnectionStatus() {
    if (navigator.onLine) {
        connectionStatus.textContent =
            '● Browser is online';
    } else {
        connectionStatus.textContent =
            '● Browser is offline';
    }
}


function showMessage(text) {
    message.textContent =
        text;
}


window.addEventListener(
    'resize',
    function () {
        updateBrowserInfo();

        showMessage(
            'Viewport dimensions updated.'
        );
    }
);


window.addEventListener(
    'scroll',
    function () {
        scrollInfo.textContent =
            `X: ${Math.round(window.scrollX)}, Y: ${Math.round(window.scrollY)}`;
    },
    {
        passive: true
    }
);


window.addEventListener(
    'online',
    function () {
        updateConnectionStatus();

        showMessage(
            'Connection restored.'
        );
    }
);


window.addEventListener(
    'offline',
    function () {
        updateConnectionStatus();

        showMessage(
            'Connection lost.'
        );
    }
);


document.addEventListener(
    'visibilitychange',
    function () {
        updateBrowserInfo();

        showMessage(
            document.hidden
                ? 'Page is now hidden.'
                : 'Page is now visible.'
        );
    }
);


copyUrlButton.addEventListener(
    'click',
    async function () {
        try {
            await navigator.clipboard
                .writeText(
                    location.href
                );

            showMessage(
                'Current URL copied.'
            );
        } catch (error) {
            showMessage(
                'Unable to copy URL.'
            );
        }
    }
);


startTimerButton.addEventListener(
    'click',
    function () {
        if (timerId !== null) {
            showMessage(
                'Timer is already running.'
            );

            return;
        }


        timerId =
            setInterval(
                function () {
                    seconds++;

                    timerDisplay.textContent =
                        `${seconds} seconds`;
                },
                1000
            );


        showMessage(
            'Timer started.'
        );
    }
);


stopTimerButton.addEventListener(
    'click',
    function () {
        clearInterval(
            timerId
        );

        timerId = null;


        showMessage(
            'Timer stopped.'
        );
    }
);


resetTimerButton.addEventListener(
    'click',
    function () {
        clearInterval(
            timerId
        );

        timerId = null;

        seconds = 0;

        timerDisplay.textContent =
            '0 seconds';


        showMessage(
            'Timer reset.'
        );
    }
);


backButton.addEventListener(
    'click',
    function () {
        history.back();
    }
);


forwardButton.addEventListener(
    'click',
    function () {
        history.forward();
    }
);


topButton.addEventListener(
    'click',
    function () {
        window.scrollTo(
            {
                top: 0,
                behavior: 'smooth'
            }
        );


        showMessage(
            'Scrolling to top.'
        );
    }
);


reloadButton.addEventListener(
    'click',
    function () {
        location.reload();
    }
);


updateBrowserInfo();

updateConnectionStatus();
Browser Output
What This Example Demonstrates
  • Reading viewport dimensions.
  • Reading screen dimensions.
  • Reading browser language.
  • Reading browser history length.
  • Reading scroll position.
  • Reading the current URL.
  • Checking online status.
  • Responding to online events.
  • Responding to offline events.
  • Responding to window resize.
  • Responding to page scrolling.
  • Using a passive scroll listener.
  • Detecting page visibility.
  • Responding to visibility changes.
  • Writing text to the clipboard.
  • Using async browser APIs.
  • Handling browser API errors.
  • Creating an interval timer.
  • Stopping an interval timer.
  • Resetting timer state.
  • Navigating backward.
  • Navigating forward.
  • Reloading the current page.
  • Scrolling smoothly to the top.
  • Combining DOM, events, and BOM APIs.

BOM Processing Flow

Browser Object Model Flow
JAVASCRIPT APPLICATION

          │
          ▼

┌──────────────────────────────┐
│          window              │
│                              │
│ Top-Level Browser Object     │
└──────────────┬───────────────┘
               │
      ┌────────┼────────┐
      │        │        │
      ▼        ▼        ▼
 location   history  navigator
      │        │        │
      ▼        ▼        ▼
   URL      Back /    Browser
Navigation  Forward   Information

      ┌────────┼────────┐
      │        │        │
      ▼        ▼        ▼
   screen    timers   dialogs
      │        │        │
      ▼        ▼        ▼
  Display   Delayed   User
   Info      Tasks   Interaction

               │
               ▼

┌──────────────────────────────┐
│      BROWSER RESPONDS        │
│                              │
│ Navigate                     │
│ Update URL                   │
│ Run Timer                    │
│ Scroll Page                  │
│ Report Status                │
│ Request Permission           │
└──────────────────────────────┘

Real-World Applications

Navigation Systems

Manage URLs, routes, query parameters, and browser history.

Responsive Interfaces

React to viewport size changes.

Offline Applications

Display connection state and respond to connectivity changes.

Location Services

Build maps, nearby searches, and location-aware applications.

Timers

Create countdowns, clocks, quizzes, and delayed actions.

Clipboard Tools

Create copy buttons for links, code, and text.

Scroll Navigation

Build back-to-top buttons and section navigation.

Visibility Management

Pause work when the page becomes hidden.

⛶ Media Players

Support fullscreen video and presentation interfaces.

Single-Page Applications

Update URLs and history without full page reloads.

Browser Dashboards

Display environment and device information.

Browser Games

Use timers, fullscreen, visibility, and viewport information.

Common Beginner Mistakes

Avoid These Mistakes
  • Confusing the DOM with the BOM.
  • Thinking document and window are the same object.
  • Assuming every JavaScript environment has a window object.
  • Using browser APIs in server-side JavaScript without checking the environment.
  • Confusing innerWidth with outerWidth.
  • Confusing innerHeight with outerHeight.
  • Assuming screen dimensions are the same as viewport dimensions.
  • Using screen.width for responsive page layout.
  • Ignoring the resize event when JavaScript behavior depends on viewport size.
  • Performing expensive work on every resize event.
  • Assuming window.open() always succeeds.
  • Ignoring popup blockers.
  • Opening popups without direct user interaction.
  • Assuming scripts can close every browser tab.
  • Assuming scripts can freely move or resize normal tabs.
  • Confusing location.host and location.hostname.
  • Forgetting that host may include a port.
  • Forgetting that search includes the question mark.
  • Forgetting that hash includes the hash symbol.
  • Manually parsing complex query strings when URLSearchParams is available.
  • Forgetting that URLSearchParams values are strings.
  • Using location.replace() when the user should be able to go back.
  • Using assign() when the current history entry should be replaced.
  • Reloading pages unnecessarily.
  • Assuming history.length reveals visited URLs.
  • Trying to read complete browser history for privacy reasons.
  • Using history.go() with the wrong positive or negative direction.
  • Using pushState() without handling navigation state.
  • Expecting pushState() to automatically render new page content.
  • Forgetting to handle popstate in custom routing.
  • Relying heavily on user-agent detection.
  • Assuming navigator.platform is always accurate or complete.
  • Assuming navigator.onLine guarantees that a server is reachable.
  • Failing to handle actual network request failures.
  • Assuming every navigator API exists in every browser.
  • Using optional APIs without feature detection.
  • Ignoring permission requirements.
  • Assuming clipboard access always succeeds.
  • Ignoring clipboard promise rejection.
  • Using geolocation without explaining why location is needed.
  • Ignoring geolocation permission denial.
  • Ignoring geolocation timeout and unavailable errors.
  • Forgetting to stop watchPosition() when it is no longer needed.
  • Using alert() for every message.
  • Using confirm() as a replacement for good interface design everywhere.
  • Forgetting that prompt() may return null.
  • Treating prompt() results as numbers without conversion.
  • Passing a function call to setTimeout() instead of a function reference.
  • Writing setTimeout(showMessage(), 1000).
  • Forgetting that timer delays use milliseconds.
  • Assuming setTimeout() runs at an exact time.
  • Assuming setTimeout(..., 0) runs immediately.
  • Creating intervals without storing their IDs.
  • Forgetting to clear intervals.
  • Starting duplicate intervals from repeated button clicks.
  • Using the wrong timer ID when cancelling.
  • Expecting clearTimeout() to undo a callback that already executed.
  • Creating recursive timeouts without a stopping condition when one is required.
  • Performing heavy work in very short intervals.
  • Confusing scrollTo() and scrollBy().
  • Assuming scrollTo() is relative.
  • Assuming scrollBy() uses an absolute position.
  • Using scroll events for expensive work without optimization.
  • Ignoring reduced-motion accessibility preferences in advanced animation-heavy scrolling.
  • Assuming document.hidden means the browser is closed.
  • Continuing expensive background work while a page is hidden.
  • Requesting fullscreen without user interaction.
  • Assuming fullscreen requests always succeed.
  • Forgetting to handle rejected browser API promises.
  • Using BOM APIs without checking browser support.
  • Ignoring security restrictions.
  • Ignoring secure-context requirements.
  • Trying to bypass browser permissions.
  • Assuming all browsers expose identical information.
  • Using browser information for fragile device detection.
  • Mixing too many unrelated browser operations into one function.
  • Failing to clean up event listeners and timers.
  • Testing only in one browser.
  • Not testing permission denial.
  • Not testing offline behavior.
  • Not testing blocked popups.
  • Not testing hidden-tab behavior.
  • Not testing browser Back and Forward navigation.
Common BOM Mistakes
// ❌ Wrong for responsive viewport
console.log(
    screen.width
);


// ✅ Browser viewport
console.log(
    window.innerWidth
);


// ❌ host and hostname are not always identical
console.log(
    location.host
);

console.log(
    location.hostname
);


// ❌ Manual query parsing
const query =
    location.search.split('=');


// ✅ Use URLSearchParams
const params =
    new URLSearchParams(
        location.search
    );


// ❌ Calls immediately
setTimeout(
    showMessage(),
    1000
);


// ✅ Pass function
setTimeout(
    showMessage,
    1000
);


// ❌ Duplicate intervals possible
button.addEventListener(
    'click',
    function () {
        setInterval(
            updateClock,
            1000
        );
    }
);


// ✅ Track interval state
let intervalId = null;

button.addEventListener(
    'click',
    function () {
        if (
            intervalId !== null
        ) {
            return;
        }

        intervalId =
            setInterval(
                updateClock,
                1000
            );
    }
);


// ❌ Online does not guarantee API access
if (navigator.onLine) {
    fetchData();
}


// ✅ Still handle request errors
try {
    await fetchData();
} catch (error) {
    console.log(
        'Request failed'
    );
}

Best Practices

  • Understand the BOM as browser-level functionality outside the document structure.
  • Understand that window is the top-level browser object.
  • Remember that document represents the DOM.
  • Remember that browser APIs may not exist in non-browser environments.
  • Use feature detection before using optional browser APIs.
  • Use innerWidth and innerHeight for viewport dimensions.
  • Do not use screen dimensions as a replacement for responsive CSS.
  • Prefer CSS media queries for visual responsive design.
  • Use JavaScript viewport checks only when application behavior requires them.
  • Avoid expensive work inside resize handlers.
  • Treat window.open() as potentially blocked.
  • Open new windows only when the user experience requires them.
  • Do not depend on unrestricted window movement or resizing.
  • Use location.href to read the complete current URL.
  • Understand each part of the location object.
  • Use URLSearchParams for query string handling.
  • Remember that query parameter values are strings.
  • Use assign() when normal history navigation is desired.
  • Use replace() when the current history entry should not remain.
  • Use reload() only when a full reload is genuinely required.
  • Use history.back() and forward() carefully.
  • Do not assume browser history entries are readable.
  • Use pushState() for adding client-side navigation history.
  • Use replaceState() for updating the current history entry.
  • Handle popstate when implementing custom client-side routing.
  • Prefer feature detection over user-agent detection.
  • Do not assume navigator information is complete or permanent.
  • Use navigator.language for language-aware experiences when appropriate.
  • Treat navigator.onLine as a connectivity hint.
  • Always handle real network failures separately.
  • Respond to online and offline events when useful.
  • Check Clipboard API availability.
  • Handle clipboard permission and security restrictions.
  • Use async and await with promise-based browser APIs.
  • Handle browser API errors with try and catch.
  • Request geolocation only when the application genuinely needs it.
  • Explain why location access is useful.
  • Handle geolocation permission denial.
  • Handle unavailable and timeout errors.
  • Stop watchPosition() when continuous tracking is no longer required.
  • Use custom DOM-based dialogs for important styled interfaces.
  • Use alert(), confirm(), and prompt() sparingly.
  • Remember that prompt() can return null.
  • Convert prompt values when numeric data is required.
  • Pass functions to timers instead of calling them immediately.
  • Store timeout IDs when cancellation may be needed.
  • Store interval IDs when cancellation is required.
  • Prevent duplicate intervals.
  • Clear intervals when components or features are no longer active.
  • Remember that timer delays are minimum delays.
  • Do not depend on timers for exact real-time precision.
  • Use recursive setTimeout() when task duration should affect scheduling.
  • Use scrollTo() for absolute scrolling.
  • Use scrollBy() for relative scrolling.
  • Use smooth scrolling when appropriate.
  • Use scrollIntoView() for section navigation.
  • Avoid heavy work inside scroll events.
  • Use passive listeners when appropriate.
  • Use the Page Visibility API to reduce unnecessary hidden-page work.
  • Pause games, timers, or expensive updates when appropriate.
  • Request fullscreen from direct user interaction.
  • Check fullscreen state through document.fullscreenElement.
  • Handle promise rejection for permission-sensitive APIs.
  • Respect browser security restrictions.
  • Respect user permissions.
  • Never attempt to bypass browser permission systems.
  • Test optional browser APIs across supported browsers.
  • Test online and offline behavior.
  • Test permission denial.
  • Test blocked popup behavior.
  • Test browser Back and Forward buttons.
  • Test hidden and visible page transitions.
  • Clean up timers and listeners when they are no longer required.

Frequently Asked Questions

What is the BOM?

The Browser Object Model is a collection of browser-provided objects that allow JavaScript to interact with the browser environment.

What is the main BOM object?

The window object is the top-level browser object.

What is the difference between DOM and BOM?

The DOM represents the HTML document, while the BOM represents browser-level functionality.

Is document part of window?

Yes. In browser JavaScript, document is available as window.document.

Is window available in every JavaScript environment?

No. It is a browser-specific global object and may not exist in server-side environments.

What is innerWidth?

It is the width of the browser viewport.

What is innerHeight?

It is the height of the browser viewport.

What is outerWidth?

It is the width of the complete browser window.

What is the difference between screen width and viewport width?

Screen width describes the display, while viewport width describes the page viewing area.

What does window.open() do?

It requests that the browser open a new browsing context.

Why can window.open() return null?

The browser may block the popup.

What is the location object?

It contains current URL information and navigation methods.

What is location.href?

It contains the complete current URL.

What is location.host?

It contains the hostname and port when a port is present.

What is location.hostname?

It contains the hostname without the port.

What is location.pathname?

It contains the path portion of the URL.

What is location.search?

It contains the query string including the leading question mark.

What is location.hash?

It contains the fragment identifier including the leading hash symbol.

What does location.assign() do?

It navigates to another URL and normally keeps the current history entry.

What does location.replace() do?

It navigates to another URL while replacing the current history entry.

What does location.reload() do?

It reloads the current document.

What is URLSearchParams?

It is an interface for reading and modifying URL query parameters.

How do I read a query parameter?

Create URLSearchParams from location.search and use get().

What is the history object?

It provides access to navigation controls for the current browser session history.

What does history.back() do?

It navigates to the previous history entry.

What does history.forward() do?

It navigates to the next history entry.

What does history.go(-1) do?

It moves one entry backward.

Can JavaScript read all visited URLs?

No. Browsers protect history information for privacy and security.

What does pushState() do?

It adds a new history entry without a full page reload.

What does replaceState() do?

It updates the current history entry.

What is the popstate event?

It occurs when the active history entry changes through history navigation.

What is the navigator object?

It provides browser environment information and access to several browser capabilities.

What is navigator.language?

It provides the preferred browser language.

What is navigator.onLine?

It provides a browser connectivity status hint.

Does navigator.onLine guarantee internet access?

No. A specific server or internet resource may still be unreachable.

How do I detect connection changes?

Listen for the online and offline events on window.

What is navigator.clipboard?

It provides access to supported clipboard operations.

Does clipboard access always work?

No. It depends on browser support, security context, permissions, and user interaction rules.

What is the Geolocation API?

It allows websites to request device location information with user permission.

Does geolocation require permission?

Yes.

What does getCurrentPosition() do?

It requests the current device position.

What does watchPosition() do?

It requests position updates as the device location changes.

How do I stop watching location?

Use clearWatch() with the watch identifier.

What does alert() return?

It returns undefined.

What does confirm() return?

It returns true or false.

What does prompt() return?

It returns the entered string or null if cancelled.

What does setTimeout() do?

It schedules a function to run once after a minimum delay.

What does setInterval() do?

It repeatedly schedules a function using the specified interval.

How do I cancel a timeout?

Use clearTimeout() with the timeout identifier.

How do I cancel an interval?

Use clearInterval() with the interval identifier.

Does setTimeout(..., 0) run immediately?

No. The callback runs later after current JavaScript work can complete.

Are timer delays exact?

No. They represent minimum delays.

What is recursive setTimeout()?

It is a pattern where a function schedules the next timeout after its current execution.

What is window.scrollY?

It contains the current vertical page scroll position.

What is the difference between scrollTo() and scrollBy()?

scrollTo() uses an absolute position, while scrollBy() moves relative to the current position.

What does scrollIntoView() do?

It scrolls so that a specific element becomes visible.

What is document.hidden?

It indicates whether the document is currently hidden.

What is the visibilitychange event?

It occurs when document visibility changes.

What is the Fullscreen API?

It allows supported content to request fullscreen display.

How do I enter fullscreen?

Call requestFullscreen() on a supported element, usually from user interaction.

How do I exit fullscreen?

Call document.exitFullscreen().

Key Takeaways

  • The BOM represents the browser environment.
  • The DOM represents the HTML document.
  • window is the top-level browser object.
  • document is available through window.
  • innerWidth and innerHeight describe the viewport.
  • outerWidth and outerHeight describe the browser window.
  • screen provides display information.
  • location provides current URL information.
  • location.href contains the complete URL.
  • location.search contains the query string.
  • location.hash contains the fragment identifier.
  • assign() navigates while keeping normal history behavior.
  • replace() replaces the current history entry.
  • reload() reloads the current document.
  • URLSearchParams simplifies query parameter handling.
  • history provides session navigation controls.
  • back() moves backward.
  • forward() moves forward.
  • go() moves by a relative history position.
  • pushState() adds a client-side history entry.
  • replaceState() updates the current entry.
  • popstate responds to history navigation.
  • navigator provides browser environment information.
  • navigator.language provides preferred language information.
  • navigator.onLine provides a connectivity hint.
  • online and offline events report connectivity state changes.
  • Clipboard API operations may require secure contexts and permissions.
  • Geolocation requires user permission.
  • getCurrentPosition() requests one location result.
  • watchPosition() requests continuing updates.
  • alert() displays a message.
  • confirm() returns true or false.
  • prompt() returns a string or null.
  • setTimeout() schedules one future callback.
  • setInterval() schedules repeated callbacks.
  • Timer IDs allow cancellation.
  • Timer delays are minimum delays.
  • A zero-millisecond timeout is not immediate.
  • scrollTo() performs absolute scrolling.
  • scrollBy() performs relative scrolling.
  • scrollIntoView() reveals an element.
  • The Page Visibility API detects hidden and visible states.
  • The Fullscreen API controls fullscreen presentation.
  • Browser APIs may have security restrictions.
  • Browser APIs may require permissions.
  • Optional APIs should be checked with feature detection.
  • The BOM is essential for browser-level web application behavior.

Summary

The Browser Object Model allows JavaScript to interact with the browser environment outside the HTML document. While the DOM represents page content, the BOM provides access to browser-level functionality.

The window object is the top-level browser object. It provides access to the document, location, history, navigator, screen, timers, dialogs, scrolling methods, and many other browser APIs.

Window dimension properties allow applications to inspect the viewport and browser window. The screen object provides information about the user display and available screen space.

The location object provides detailed URL information and navigation methods. URLSearchParams makes query string values easier to read and modify.

The history object allows backward and forward navigation, while the History API supports client-side URL and history management without full page reloads.

The navigator object provides browser environment information and access to capabilities such as online status, clipboard operations, and geolocation.

Browser dialogs provide simple user interaction, while timers allow delayed and repeated code execution. Timer callbacks do not interrupt current JavaScript execution, and timer delays should be understood as minimum delays.

Scrolling APIs allow JavaScript to read and control page position. The Page Visibility API helps applications respond when a page becomes hidden, and the Fullscreen API supports immersive browser experiences.

Mastering the BOM allows you to build browser-aware applications with navigation, routing, timers, connection indicators, clipboard tools, location services, scrolling controls, visibility management, and fullscreen experiences.

Lesson 23 Completed
  • You understand what the Browser Object Model is.
  • You understand the difference between the DOM and BOM.
  • You understand the role of the window object.
  • You understand browser global APIs.
  • You can read viewport dimensions.
  • You can read browser window dimensions.
  • You understand viewport and screen differences.
  • You can read browser window position.
  • You understand window opening and closing restrictions.
  • You can use the screen object.
  • You can read screen dimensions.
  • You can read available screen space.
  • You understand the location object.
  • You can read the complete current URL.
  • You can read URL protocol.
  • You can read host and hostname.
  • You can read the port.
  • You can read the pathname.
  • You can read the query string.
  • You can read the URL hash.
  • You understand URL structure.
  • You can navigate with location.
  • You can use assign().
  • You can use replace().
  • You can reload the current page.
  • You understand assign() and replace() differences.
  • You can use URLSearchParams.
  • You can read query parameters.
  • You can modify query parameters.
  • You understand the history object.
  • You can navigate backward.
  • You can navigate forward.
  • You can use history.go().
  • You understand the History API.
  • You can use pushState().
  • You can use replaceState().
  • You can handle popstate.
  • You understand the navigator object.
  • You can read browser language information.
  • You can check cookie support.
  • You can check online status.
  • You can respond to online and offline events.
  • You understand hardware-related navigator information.
  • You understand the Clipboard API.
  • You understand the Geolocation API.
  • You can request the current position.
  • You can handle geolocation errors.
  • You can watch position changes.
  • You can stop position watching.
  • You understand browser dialogs.
  • You can use alert().
  • You can use confirm().
  • You can use prompt().
  • You understand browser timers.
  • You can use setTimeout().
  • You can cancel timeouts.
  • You can use setInterval().
  • You can cancel intervals.
  • You understand timeout and interval differences.
  • You understand how timers are scheduled.
  • You can manage timer IDs.
  • You understand recursive timeouts.
  • You can build a countdown timer.
  • You can read scroll position.
  • You can use scrollTo().
  • You can use scrollBy().
  • You can create smooth scrolling.
  • You can scroll elements into view.
  • You understand page visibility.
  • You can detect visibility changes.
  • You understand the Fullscreen API.
  • You can enter fullscreen mode.
  • You can exit fullscreen mode.
  • You can detect fullscreen changes.
  • You can build a complete browser information dashboard.
  • You are ready to learn JSON.
Next Lesson →

JavaScript JSON