JavaScript Browser Objects Examples

JavaScript’s Browser Object Model (BOM) provides the ability to interact with the browser beyond the HTML document. Here’s a set of practical examples demonstrating the use of browser objects like window, navigator, location, history, and more.

1. Window Object

The window object represents the browser’s window.

Example: Display the window’s width and height

console.log(`Window width: ${window.innerWidth}`);
console.log(`Window height: ${window.innerHeight}`);

2. Navigator Object

The navigator object contains information about the browser and user agent.

Example: Check the user’s browser details

console.log(`Browser name: ${navigator.appName}`);
console.log(`Browser version: ${navigator.appVersion}`);
console.log(`Platform: ${navigator.platform}`);

3. Screen Object

The screen object provides information about the user’s screen.

Example: Display screen dimensions

console.log(`Screen width: ${screen.width}`);
console.log(`Screen height: ${screen.height}`);

4. Location Object

The location object provides information about the current URL.

Example: Redirect the user

function redirectToGoogle() {
    window.location.href = "https://www.google.com";
}

HTML:

<button onclick="redirectToGoogle()">Go to Google</button>

5. History Object

The history object allows navigation through the browser’s session history.

Example: Navigate through history

function goBack() {
    window.history.back();
}

function goForward() {
    window.history.forward();
}

HTML:

<button onclick="goBack()">Go Back</button>
<button onclick="goForward()">Go Forward</button>

6. Popup Boxes

JavaScript can create alert, confirm, and prompt boxes.

Example: Alert, Confirm, and Prompt

// Alert
alert("Hello! This is an alert box.");

// Confirm
if (confirm("Do you agree?")) {
    console.log("User agreed.");
} else {
    console.log("User canceled.");
}

// Prompt
let name = prompt("What is your name?");
if (name) {
    console.log(`Hello, ${name}!`);
}

7. Set Timers

Use setTimeout and setInterval to schedule actions.

Example: Delay an action

function showMessage() {
    alert("This message appears after 3 seconds.");
}
setTimeout(showMessage, 3000);

Example: Repeat an action

function logTime() {
    console.log(new Date().toLocaleTimeString());
}
setInterval(logTime, 1000);

8. Cookies

Manage browser cookies using JavaScript.

Example: Set and Get Cookies

// Set a cookie
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// Get cookies
console.log(`Cookies: ${document.cookie}`);

9. Geolocation

Access the user’s location with the navigator.geolocation API.

Example: Get user coordinates

navigator.geolocation.getCurrentPosition(
    function (position) {
        console.log(`Latitude: ${position.coords.latitude}`);
        console.log(`Longitude: ${position.coords.longitude}`);
    },
    function (error) {
        console.error("Error getting location:", error);
    }
);

10. Browser Detection

Use the navigator object to detect the user’s browser.

Example: Browser Check

if (navigator.userAgent.indexOf("Chrome") > -1) {
    console.log("User is using Chrome.");
} else if (navigator.userAgent.indexOf("Firefox") > -1) {
    console.log("User is using Firefox.");
} else {
    console.log("Browser not identified.");
}

For more hands-on JavaScript browser examples and tips, visit The Coding College. Explore tutorials, deep dives, and practical examples to master JavaScript!

Leave a Comment