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.