JavaScript Browser Objects
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:
Method | Description |
---|---|
back() | Go back one page |
forward() | Go forward one page |
go(n) | Move forward or backward by n steps |
length | Number 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:
Property | Description |
---|---|
appName | Name of the browser |
appVersion | Version info |
geolocation | Used for GPS/location-based apps |
cookieEnabled | Whether 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.