Go Back Course Outline

JavaScript Full Course

The Browser Object Model-(BOM) in Javascript

The Browser Object Model (BOM)

1. The Window Object

The window object is the global object in JavaScript when working with browsers. It represents the browser window and contains methods, properties, and objects to interact with the browser itself.

window.alert("Welcome to the BOM tutorial!");

Output: This will display an alert with the message "Welcome to the BOM tutorial!".

2. Browser History and Navigation

We can interact with the browser's history stack using the history object, which allows us to go forward and backward in history, and even manipulate the history.

history.back();  // Go back one page

Output: Navigates the browser back one page in history.

3. Timers: setTimeout() and setInterval()

Use setTimeout() to delay the execution of a function, and setInterval() to execute a function repeatedly at a set interval.

setTimeout(function() {
                          console.log("This message is displayed after 3 seconds.");
                        }, 3000);

Output: This will log the message after a 3-second delay in the browser console.

let intervalId = setInterval(function() {
                          console.log("This message appears every 2 seconds.");
                        }, 2000);
                        
                        // To stop the interval after 6 seconds
                        setTimeout(function() {
                          clearInterval(intervalId);
                        }, 6000);

Output: The message will appear in the console every 2 seconds. After 6 seconds, it will stop.

4. Location and Navigation

The location object allows us to retrieve and manipulate the current URL, and navigate to a new URL.

console.log(location.href);  // Get current URL

Output: This will log the current page URL to the console.

location.assign('https://www.example.com');  // Redirect to a new page

Output: This will navigate the browser to "https://www.example.com".

location.reload();  // Reload the current page

Output: This will reload the current page.

5. Screen and Viewport Information

The screen and window objects provide information about the user's screen size and viewport size, respectively.

console.log("Screen Width: " + screen.width);
                        console.log("Screen Height: " + screen.height);

Output: This will log the width and height of the user's screen to the console.

console.log("Viewport Width: " + window.innerWidth);
                        console.log("Viewport Height: " + window.innerHeight);

Output: This will log the width and height of the viewport (browser window) to the console.