JavaScript BOM (Browser Object Model)
The Browser Object Model (BOM) is a powerful feature in JavaScript that allows web pages to interact with the browser. It’s like giving JavaScript the ability to control and work with the browser window, tabs, history, location, and much more. Imagine you’re using a web page, and you can make your browser window do things like resize, change its location, and even communicate with the user — thanks to BOM!
What is BOM?
BOM stands for Browser Object Model. It is a collection of objects that allow JavaScript to interact with the browser. The BOM provides a way for JavaScript to access and manipulate the browser’s window, and its components, and even control how the page behaves.
Let’s break it down further:
1. The Browser Window: It’s the screen or the window that shows the web page.
2. Objects in BOM: These are special tools JavaScript can use to do things like change the window’s size, check the user’s history, or get information about the URL.
How Does BOM Work?
Think of the BOM as a control panel for JavaScript. It lets JavaScript control parts of the browser’s environment, like:
• The window that contains the page.
• The document inside the window.
• The browser’s history, location, and much more.
Key Components of BOM
Here are some of the main components of BOM that JavaScript can use to interact with the browser:
1. window Object
The window object is the global object in the browser. It’s the most important part of the BOM. Every browser window or tab you open has a window object, and through it, JavaScript can access and control the browser window itself.
• Example: Changing the size of the browser window:
window.resizeTo(500, 400); // Resize the window to 500px by 400px
• Example: Displaying an alert box:
window.alert(“Hello, welcome to my website!”); // Shows a message in a pop-up
Output
2. document Object
The document object is part of the BOM, but it specifically refers to the HTML page inside the browser window. Through the document object, JavaScript can manipulate the content of the webpage, such as changing text, adding images, or responding to user actions.
Output
3. navigator Object
The navigator object provides information about the browser itself, such as the version, the operating system, and whether JavaScript is enabled.
• Example: Checking the browser’s language:
console.log(navigator.language); // Output: en-US
Output
4. location Object
The location object tells us about the URL of the page in the browser. You can also use it to change the page’s URL or reload the page.
• Example: Getting the current URL:
console.log(location.href); // Shows the current URL
Output
• Example: Redirecting the browser to a different page:
location.href = “https://www.example.com”; // Redirects to another website
Output
5. history Object
The history object allows JavaScript to control the browser’s history. This means JavaScript can make the browser go back, forward, or even manipulate the history stack in some cases.
• Example: Going back one page in the browser’s history:
history.back(); // Goes back to the previous page
• Example: Going forward one page:
history.forward(); // Goes forward to the next page
6. screen Object
The screen object provides information about the screen on which the browser is being displayed (such as the screen’s width and height).
• Example: Getting the screen’s width:
console.log(screen.width); // Shows the width of the screen in pixels
Output
Why is BOM Important?
BOM allows JavaScript to create interactive and dynamic websites that respond to the user’s actions in real time. It gives JavaScript access to manipulate the browser’s environment, making it possible to:
• Open and close new windows.
• Change the browser’s location (URLs).
• Control how the window behaves (resize, minimize).
• Access and update the browser’s history.
Without BOM, JavaScript would only be able to work with the content of the webpage and wouldn’t be able to interact with the browser’s window, the user’s location, or other browser-specific tasks.
Real-World Examples
Example 1: Changing the Window Size
Imagine you’re playing a game in a web browser, and the game asks you to resize your window. JavaScript can do this for you!
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Resize Window Example</title>
</head>
<body>
<h1>Window Resize Example</h1>
<p>Click the button below to resize the browser window to 800×600 pixels:</p>
<!– Button to trigger the window resize –>
<button onclick=”resizeWindow()”>Resize Window</button>
<script>
// Function to resize the window
function resizeWindow() {
// Resize the window to 800×600 pixels
window.resizeTo(800, 600);
alert(“The window has been resized to 800×600 pixels!”);
}
</script>
</body>
</html>
Code explanation:
function resizeWindow():
This defines a JavaScript function named resizeWindow. Functions are reusable blocks of code that perform a specific task when called.
window.resizeTo(800, 600);:
This line of code resizes the browser window.
window refers to the browser window object, which is the top-level object for interacting with the browser.
resizeTo(width, height) is a method of the window object that changes the dimensions of the browser window.
• The 800 is the width in pixels.
• The 600 is the height in pixels.
This command attempts to resize the current browser window to a size of 800 pixels by 600 pixels. However, it may not work in all browsers or may be blocked for the main browser window (due to modern browser security restrictions).
alert(“The window has been resized to 800×600 pixels!”);
This line displays an alert message after the window is resized.
alert() is a built-in JavaScript function that shows a dialog box with the message provided as a string.
The message “The window has been resized to 800×600 pixels!” informs the user that the window has been resized successfully.
The alert box will pause the execution of the code until the user clicks “OK”.
Output
Before Click:
After Click:
Example 2: Redirecting to Another Website
If you want to take the user to another website when they click a button, JavaScript can change the browser’s location.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Redirect to Another Website</title>
</head>
<body>
<h1>Redirect to Another Website Example</h1>
<p>Click the button below to go to another website:</p>
<!– Button to trigger the redirect –>
<button onclick=”redirectToWebsite()”>Go to Wikipedia</button>
<script>
// Function to redirect to another website
function redirectToWebsite() {
// Redirects the browser to Google
window.location.href = “https://www.wikipedia.org”;
}
</script>
</body>
</html>
Code explanation:
function redirectToWebsite()
This is a JavaScript function that will be executed when the button is clicked.
window.location.href = “https://www.wikipedia.org”;
This line of code redirects the browser to the URL specified.
window.location.href is a property of the window object in JavaScript. It refers to the current page’s URL and allows us to change the browser’s location to a different URL.
By setting window.location.href to “https://www.wikipedia.org”, the browser navigates to Wikipedia’s homepage.
Output
Before Click:
After Click:
Course Video
Practice Scenario
You have to solve all the questions given below in the editor without copy-pasting.
1. Write a function getCurrentURL that uses the BOM to retrieve and log the current URL of the browser.
The task is to create a JavaScript function called getCurrentURL that uses the Browser Object Model (BOM) to retrieve and log the current URL of the browser.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. One of the objects in the BOM is a window, which represents the browser window.
2. Current URL: The current URL of the browser can be accessed using the window.location object.
3. Log the URL: The function should log the current URL to the console.
Here's an example program:
function getCurrentURL() {
// Access the current URL using window.location.href
const currentURL = window.location.href;
// Log the current URL to the console
console.log(‘Current URL:’, currentURL);
}
// Call the function to get and log the current URL
getCurrentURL();
Output
2. Create a function openNewTab that uses the BOM to open a new tab with a specified URL.
The task is to create a JavaScript function called openNewTab that uses the Browser Object Model (BOM) to open a new tab with a specified URL.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. One of the functions available in the BOM is window.open(), which can be used to open a new browser window or tab.
2. Open a New Tab: The function should use window.open() to open a new tab with a specified URL.
Here's an example program:
Note : Please run this program in Your Browser Console
function openNewTab(url) {
// Use window.open() to open a new tab with the specified URL
window.open(url, ‘_blank’);
}
// Example usage: Open a new tab with the URL ‘https://www.example.com’
openNewTab(‘https://www.example.com’);
Output
3. Write a function getWindowSize that uses the BOM to retrieve and log the width and height of the current browser window.
The task is to create a JavaScript function called getWindowSize that uses the Browser Object Model (BOM) to retrieve and log the width and height of the current browser window.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. The window object in BOM provides information about the browser window.
2. Window Size: The width and height of the current browser window can be accessed using window.innerWidth for the width and window.innerHeight for the height.
3. Log the Size: The function should log the width and height of the window to the console.
Here's an example program:
function getWindowSize() {
// Access the width and height of the current window
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
// Log the window size to the console
console.log(‘Window Width:’, windowWidth);
console.log(‘Window Height:’, windowHeight);
}
// Call the function to get and log the window size
getWindowSize();
Output
4. Create a function redirectPage that uses the BOM to redirect the user to a specified URL after a delay of 3 seconds.
The task is to create a JavaScript function called redirectPage that uses the Browser Object Model (BOM) to redirect the user to a specified URL after a delay of 3 seconds.
1. BOM (Browser Object Model): The Browser Object Model (BOM) is a set of JavaScript objects provided by the browser to interact with the browser itself. The window object in BOM provides methods for navigation.
2. Redirecting after Delay: The function should use setTimeout to introduce a delay of 3 seconds and then use window.location.href to redirect the user to the specified URL.
Here's an example program:
Note : Please run this program in Your Browser Console
function redirectPage(targetURL) {
// Use setTimeout to introduce a delay of 3 seconds
setTimeout(function () {
// Redirect the user to the specified URL
window.location.href = targetURL;
}, 3000); // 3000 milliseconds (3 seconds)
}
// Example usage: Redirect to ‘https://www.example.com’ after a 3-second delay
redirectPage(‘https://www.example.com’);
Output
The Browser Object Model (BOM) allows JavaScript to interact with the browser, enabling operations like window management, navigation, and handling alerts. Learn more in our JavaScript BOM free course video.
The BOM deals with the browser window and its features, while the DOM manipulates the structure and content of web pages. Explore this distinction in the JS BOM with free video tutorial.
Common BOM objects include:
- window
- navigator
- screen
- location
- history
Discover their functionality in the Free JavaScript BOM tutorial for beginners.
The window object represents the browser window and is the global object in JavaScript. It provides access to methods like alert(), confirm(), and setTimeout(). Find out more in the JavaScript BOM with free tutorial.
Use the location object.
Example:
window.location.href = “https://example.com”;
Learn this in the JavaScript BOM free course video.
- The navigator object provides information about the browser, such as its name, version, and platform. Explore its use in the JS BOM with free video tutorial.
Use the history object:
- history.back() navigates to the previous page.
- history.forward() navigates to the next page.
- history.go(n) moves forward or backward by n steps.
Learn these methods in the Free JavaScript BOM tutorial for beginners.
Use the screen object.
Example:
console.log(`Width: ${screen.width}, Height: ${screen.height}`);
Watch practical examples in the JavaScript BOM with free tutorial.
Yes, use the window.open() method.
Example:
window.open(“https://example.com”, “NewWindow”, “width=600,height=400”);
Explore this in the JavaScript BOM free course video.
- alert(): Displays an alert box.
- confirm(): Displays a confirmation box.
- prompt(): Displays a prompt box to collect user input.
- setTimeout(): Executes code after a specified delay.
- setInterval(): Executes code at specified intervals.
Learn more about these methods in the JS BOM with free video tutorial.
