JavaScript BOM (Browser Object Model)

In this chapter, we will learn about the JavaScript BOM (Browser Object Model). The BOM provides interactions with the browser window, allowing you to control the browser and the web page. We will cover:

• What is the BOM?
• The window Object
• The document Object
• The location Object
• The history Object
• The navigator Object
• Timers: setTimeout() and setInterval()
• Simple Programs using BOM

What is the BOM?

The Browser Object Model (BOM) is a collection of objects that allow JavaScript to interact with the browser. It includes objects such as window, document, location, history, and navigator. These objects provide methods and properties to control the browser and the web page.

The window Object

The window object represents the browser window. It is the top-level object in the BOM hierarchy. All global JavaScript objects, functions, and variables automatically become members of the window object.

Example

console.log(window.innerWidth); // Width of the window's content area console.log(window.innerHeight); // Height of the window's content area 

Opening and Closing Windows

let newWindow = window.open("https://www.example.com", "_blank", "width=400,height=400"); newWindow.close(); // Close the new window 

The document Object

The document object represents the HTML document loaded in the browser window. It provides methods and properties to manipulate the content of the document.

Example

console.log(document.title); // Get the title of the document document.title = "New Title"; // Set a new title for the document 

Manipulating DOM Elements

let element = document.getElementById("myElement"); element.innerHTML = "Hello, World!"; 

The location Object

The location object contains information about the current URL. It provides methods to redirect the browser to a new URL.

Example

console.log(location.href); // Get the current URL location.href = "https://www.example.com"; // Redirect to a new URL 

Properties and Methods

console.log(location.protocol); // Get the protocol (e.g., http:) console.log(location.host); // Get the host (e.g., www.example.com) console.log(location.pathname); // Get the path (e.g., /path/to/page) location.reload(); // Reload the current page 

The history Object

The history object provides methods to navigate the browser’s history.

Example

history.back(); // Go back to the previous page history.forward(); // Go forward to the next page history.go(-2); // Go back two pages 

The navigator Object

The navigator object contains information about the browser and the operating system.

Example

console.log(navigator.userAgent); // Get the user agent string console.log(navigator.language); // Get the browser's language console.log(navigator.onLine); // Check if the browser is online 

Timers: setTimeout() and setInterval()

JavaScript provides two main methods for timing events: setTimeout() and setInterval().

setTimeout()

Executes a function after a specified delay.

setTimeout(() => { console.log("This message is displayed after 2 seconds"); }, 2000); 

setInterval()

Executes a function repeatedly with a specified interval between each execution.

let count = 0; let intervalId = setInterval(() => { console.log(`Interval count: ${count}`); count++; if (count === 5) { clearInterval(intervalId); // Stop the interval after 5 executions } }, 1000); 

Simple Programs using BOM

Program 1: Displaying Browser Information

function displayBrowserInfo() { let browserInfo = ` Browser Name: ${navigator.appName} Browser Version: ${navigator.appVersion} Platform: ${navigator.platform} Language: ${navigator.language} `; console.log(browserInfo); } displayBrowserInfo(); 

Output:

Browser Name: Netscape Browser Version: 5.0 (Windows) Platform: Win32 Language: en-US 

Program 2: Redirecting After a Delay

function redirectAfterDelay(url, delay) { setTimeout(() => { location.href = url; }, delay); } redirectAfterDelay("https://www.example.com", 5000); // Redirect to the URL after 5 seconds 

Conclusion

In this chapter, you learned about the JavaScript BOM, including the window, document, location, history, and navigator objects. You also learned about timers using setTimeout() and setInterval(). We provided various use cases with simple programs to demonstrate the usage of the BOM. Understanding how to effectively use the BOM is essential for controlling the browser and the web page in JavaScript.