In the bustling city of Codeville, the Grand Council of Developers wanted to extend their control beyond the document content and delve into the web browser environment. To achieve this, they decided to explore the Browser Object Model (BOM) in JavaScript. The BOM allows interaction with the browser window, enabling tasks such as manipulating the browser history, detecting the user’s screen size, and controlling browser dialogs. Join us as we dive into the JavaScript BOM and its capabilities.
Mayor Binary began the lesson. “The Browser Object Model (BOM) is a collection of objects provided by the browser that allow interaction with the browser window. Unlike the Document Object Model (DOM), which focuses on the document content, the BOM provides objects and methods to interact with the browser environment.”
The BOM includes several objects, such as a window, navigator, screen, location, and history.
The window object is the global object in a browser environment, representing the browser window. All global JavaScript objects, functions, and variables automatically become members of the window object.
Window Properties and Methods
javascript
Copy code
// Display the inner width and height of the window
console.log(“Width: ” + window.innerWidth);
console.log(“Height: ” + window.innerHeight);
// Open a new window
let newWindow = window.open(“https://www.example.com”, “_blank”, “width=600,height=400”);
// Close the new window after 5 seconds
setTimeout(() => {
newWindow.close();
}, 5000);
// Display an alert
window.alert(“Hello, Codeville!”);
// Display a confirmation dialog
let userConfirmed = window.confirm(“Do you confirm this action?”);
console.log(“User confirmed:”, userConfirmed);
// Display a prompt dialog
let userInput = window.prompt(“Please enter your name:”, “Alice”);
console.log(“User input:”, userInput);
The navigator object contains information about the browser and the user’s environment.
Navigator Properties
javascript
Copy code
// Display browser information
console.log(“User Agent: ” + navigator.userAgent);
console.log(“Platform: ” + navigator.platform);
console.log(“Language: ” + navigator.language);
console.log(“Online: ” + navigator.onLine);
The screen object contains information about the user’s screen.
Screen Properties
javascript
Copy code
// Display screen information
console.log(“Screen Width: ” + screen.width);
console.log(“Screen Height: ” + screen.height);
console.log(“Available Width: ” + screen.availWidth);
console.log(“Available Height: ” + screen.availHeight);
console.log(“Color Depth: ” + screen.colorDepth);
The location object contains information about the current URL and allows navigation to different URLs.
Location Properties and Methods
javascript
Copy code
// Display location information
console.log(“Current URL: ” + location.href);
console.log(“Hostname: ” + location.hostname);
console.log(“Pathname: ” + location.pathname);
console.log(“Query String: ” + location.search);
console.log(“Hash: ” + location.hash);
// Navigate to a new URL
// location.assign(“https://www.example.com”);
// Reload the current document
// location.reload();
// Replace the current document
// location.replace(“https://www.example.com”);
The history object provides access to the browser’s history.
History Methods
javascript
Copy code
// Navigate through history
// history.back(); // Go back one page
// history.forward(); // Go forward one page
// history.go(-2); // Go back two pages
The council decided to create a practical example that displays user information and provides navigation controls.
HTML
html
Copy code
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>BOM Example</title>
</head>
<body>
<h1>Browser Object Model Example</h1>
<div id=”userInfo”></div>
<button id=”backButton”>Back</button>
<button id=”forwardButton”>Forward</button>
<script src=”bom.js”></script>
</body>
</html>
bom.js:
javascript
Copy code
// Display user information
let userInfoDiv = document.getElementById(“userInfo”);
userInfoDiv.innerHTML = `
<p>User Agent: ${navigator.userAgent}</p>
<p>Platform: ${navigator.platform}</p>
<p>Language: ${navigator.language}</p>
<p>Screen Width: ${screen.width}</p>
<p>Screen Height: ${screen.height}</p>
<p>Current URL: ${location.href}</p>
`;
// Add event listeners to navigation buttons
document.getElementById(“backButton”).addEventListener(“click”, function() {
history.back();
});
document.getElementById(“forwardButton”).addEventListener(“click”, function() {
history.forward();
});
By mastering the JavaScript BOM, the Grand Council of Developers in Codeville gained the ability to interact with the browser environment, enhancing their web applications’ functionality and user experience. The BOM provides powerful tools for manipulating the browser window, navigating history, and obtaining user information. Feel free to experiment with the provided examples and expand upon them to suit different scenarios. If you have any questions or need further assistance, I’m here to help. Happy coding!