JavaScript Browser Objects

ADVERTISEMENT

What Are Browser Objects?

In the browser environment, JavaScript has access to built-in objects that allow interaction with the browser itself—not just the webpage.

These are known as Browser Object Model (BOM) components. They help control browser windows, check user info, manipulate history, and more.

The Window Object

The window object is the global object in the browser. Every global variable or function you declare becomes a property of window.

You can use window to control things like:

  • Alerts
  • Timers
  • Window dimensions
  • Global variables
  • Accessing other browser objects

Examples:

window.alert("Hello!");        // Shows an alert box
console.log(window.innerWidth); // Viewport width in pixels

// Global variable demo
var user = "Alice";
console.log(window.user);      // "Alice"

Note: You can usually omit window. because it’s implied.

History Object

The history object allows you to access and manipulate the browser’s session history — the pages the user has visited in that tab.

Common Methods:

MethodDescription
back()Go back one page
forward()Go forward one page
go(n)Move forward or backward by n steps
lengthNumber of entries in history

Example:

history.back();       // Same as clicking the back button
history.forward();    // Goes to the next page
history.go(-2);       // Go back two pages
console.log(history.length); // Total pages visited in session

You can only access history within the same origin for security reasons.

Navigator Object

The navigator object contains information about the browser and device.

Example:

console.log(navigator.userAgent);     // Browser info
console.log(navigator.language);      // e.g., "en-US"
console.log(navigator.onLine);        // true or false
console.log(navigator.platform);      // e.g., "Win32"

Other useful properties:

PropertyDescription
appNameName of the browser
appVersionVersion info
geolocationUsed for GPS/location-based apps
cookieEnabledWhether cookies are allowed

navigator.geolocation allows access to user location (with permission), but it works only in secure contexts (https).

Screen Object

The screen object provides information about the user’s physical screen, such as resolution and available space.

Example:

console.log(screen.width);        // Full screen width
console.log(screen.height);       // Full screen height
console.log(screen.availWidth);   // Width available (excluding taskbars, etc.)
console.log(screen.colorDepth);   // Bits used for color (e.g., 24)

This is helpful when adjusting layouts or UI elements based on screen size.

Summary

  • The window object is the root of all browser-related JavaScript. It includes alerts, dimensions, and timers.
  • The history object lets you navigate the user’s browsing history.
  • The navigator object provides details about the user’s browser and device.
  • The screen object offers information about screen resolution and color depth.

These browser objects let you build responsive, interactive, and browser-aware experiences.

ADVERTISEMENT