JavaScript – Browser Object Model (BOM)
1. Introduction to BOM
The Browser Object Model (BOM) allows JavaScript to interact with the
browser itself, not just the HTML document.
It provides objects that represent:
o The browser window (window)
o The browser history (history)
o The URL (location)
o The navigator (browser details)
o The screen (monitor properties)
o Dialog boxes (alert, confirm, prompt)
BOM is browser-specific, unlike DOM which is about manipulating HTML.
2. The window Object
Represents the browser window/tab.
It’s the global object in client-side JavaScript.
Examples:
// Open alert box
[Link]("Hello from BOM!");
// Write directly to the document
[Link]("Welcome!");
// Get window size
[Link]([Link]); // width of viewport
[Link]([Link]); // height of viewport
Any variable/function created globally is part of the window object.
3. Dialog Boxes
1. alert()
Displays a simple popup with a message.
alert("Form submitted successfully!");
2. confirm()
Asks for confirmation (OK / Cancel).
if(confirm("Are you sure you want to delete?")){
[Link]("Deleted");
}else{
[Link]("Cancelled");
}
3. prompt()
Accepts user input.
let name = prompt("Enter your name:");
[Link]("Hello " + name);
4. The location Object
Gives information about the current page URL.
Can be used for navigation.
Properties:
[Link]([Link]); // full URL
[Link]([Link]); // domain
[Link]([Link]); // path
[Link]([Link]); // http / https
Methods:
[Link](); // reload page
[Link]("[Link] // redirect
5. The history Object
Represents the browser’s history.
Methods:
[Link](); // go to previous page
[Link](); // go to next page
[Link](-2); // go 2 pages back
⚠️For security reasons, you cannot see history details, only navigate.
6. The navigator Object
Provides information about the browser and system.
Examples:
[Link]([Link]); // Browser name
[Link]([Link]);// Browser version
[Link]([Link]); // User agent string
[Link]([Link]); // Language
[Link]([Link]); // Online status (true/false)
Useful for feature detection (instead of checking browser type).
7. The screen Object
Represents the user’s screen/monitor.
Examples:
[Link]([Link]); // screen width
[Link]([Link]); // screen height
[Link]([Link]); // available width
[Link]([Link]); // color depth
8. Window Manipulation Methods
open(), close(), moveTo(), resizeTo()
// Open new window
let newWin = [Link]("[Link] "Example",
"width=400,height=400");
// Resize window
[Link](600, 600);
// Close window
[Link]();
Modern browsers limit popups to avoid abuse.
9. Timers – setTimeout() & setInterval()
Part of the BOM (not JavaScript core).
setTimeout()
Executes a function after a delay (once).
setTimeout(function(){
alert("Hello after 3 seconds!");
}, 3000);
setInterval()
Executes a function repeatedly at given intervals.
setInterval(function(){
[Link]("Tick...");
}, 2000);
10. Putting It All Together
Example: Redirect with Countdown
<!DOCTYPE html>
<html>
<body>
<p id="msg"></p>
<script>
let count = 5;
let timer = setInterval(function(){
[Link]("msg").innerHTML =
"Redirecting in " + count + " seconds...";
count--;
if(count < 0){
clearInterval(timer);
[Link]("[Link]
}
}, 1000);
</script>
</body>
</html>
Summary
BOM = Browser Object Model
window → global object
alert, confirm, prompt → dialog boxes
location → URL & navigation
history → move back/forward in history
navigator → browser/system info
screen → screen size/color
open, close, resize → manage windows
setTimeout, setInterval → timing functions
