Browser Object Model (BOM)
The Browser Object Model (BOM) in JavaScript refers to the objects
provided by the browser that allow interaction with the browser itself,
separate from the Document Object Model (DOM), which deals with
page content.
Key BOM Objects in
JavaScript
window,
navigator,
location,
history,
screen
window Object
The global object for everything in the browser.
All BOM (and even DOM) objects are accessed via window, although
it's often omitted.
Example:
console.log(window.innerWidth); // Width of the window
alert("Hello!"); // window.alert("Hello!");
navigator Object
Provides information about the browser.
Example:
console.log(navigator.userAgent); // Browser and OS info
screen Object
Provides information about the user's screen.
Example:
console.log(screen.width, screen.height); // Screen dimensions
location Object
Contains information about the current URL and allows you to redirect
or reload the page.
Example:
console.log(location.href); // Full URL
location.href = "https://www.google.com"; // Redirect
history Object
Provides access to the browser’s session history.
Example:
history.back(); // Go to the previous page
history.forward(); // Go to the next page
Window object
alert(), confirm(),
prompt()
Simple dialog boxes provided by the BOM via the window object.
Example:
alert("This is an alert!");
const confirmed = confirm("Are you sure?");
const name = prompt("What's your name?");
prompt
<script>
// Prompt the user for their name
let userName = window.prompt("What is your name?", "John Doe");
// Check if the user entered a name or pressed cancel
if (userName !== null && userName !== "") {
// Greet the user if a name was entered
alert("Hello, " + userName + "!");
} else if (userName === "") {
// Handle case where user entered an empty string
alert("You didn't enter a name.");
} else {
// Handle case where user pressed Cancel
alert("You didn't provide your name.");
</script>
<form>
<input type="button" id="Btn" value="Ask the Guru">
</form>
<script>
window.onload = function () {
document.getElementById("Btn").onclick = function () {
var question = prompt("What is your question o' seeker of JS knowledge?","");
if (question) {
alert("Good question. Who knows?");
}
else {
alert("At least you could ask a question.");
}
}
}
</script>
Window Properties
(partial list)
closed
document
frames[]
location (url)
name
navigator
parent
screen
Window Methods
(partial list)
Alert() – dialog box
Close() – close window
Confirm() – dialog box
Focus() – set focus
moveBy() – move relative to current position
moveTo() – move to new screen location
Open() – open new window
Prompt() – dialog box
setInterval() – execute code periodically
setTimeout() – execute code after a specified time
open
<button onclick="openNewWindow()">Open New Window</button>
<script>
// Function to open a new window
function openNewWindow() {
// window.open(URL, name, specs)
window.open(
"https://www.example.com", // URL to open
"_blank", // Open in a new tab/window
"width=800,height=600" // Window size (optional)
);
</script>
