JavaScript Tutorial
Introduction to JavaScript BOM
JavaScript may communicate directly with the browser environment, not simply the content of web pages, thanks to the Browser Object Model (BOM). The BOM handles the browser window, URL, history, screen size, and more, whereas the DOM concentrates on HTML elements.
- DOM → controls the webpage
- BOM → controls the browser
Understanding the BOM helps you build smarter, more interactive web applications.
What Is JavaScript BOM?
The BOM (Browser Object Model) is a collection of objects provided by the browser that lets JavaScript communicate with the browser itself. The BOM is not standardized like the DOM, however the majority of contemporary browsers support the same essential items.
The main BOM object is:
- window
All BOM objects exist inside the window object.
The Window Object
The window object represents the browser window or tab.
Common Uses:
- Show alerts and popups
- Control browser size
- Set timers
- Access BOM and DOM objects
Example
alert("Welcome to Learn2Kode!");
console.log(window.innerWidth);
Location Object (URL Control)
The location object gives access to the current URL and allows redirection.
Common Uses:
- location.href – full URL
- location.hostname – domain name
- location.pathname – page path
Example
console.log(location.href);
Redirect Page
location.href = "https://learn2kode.in";
History Object (Browser Navigation)
The history object allows navigation through the browser’s session history.
Common Methods
- history.back() – go back
- history.forward() – go forward
- history.go(-1) – move steps in history
Example
history.back();Navigator Object (Browser Information)
The navigator object provides information about the user’s browser and device.
Common Properties
- navigator.userAgent
- navigator.language
- navigator.platform
- navigator.onLine
Example
console.log(navigator.userAgent);Often used for feature detection, not browser detection.
Screen Object (User Screen Details)
The screen object provides information about the user’s display.
Common Properties
- screen.width
- screen.height
- screen.availWidth
- screen.availHeight
Example
console.log(screen.width + "x" + screen.height);Often used for feature detection, not browser detection.
Timers in BOM (setTimeout & setInterval)
JavaScript BOM provides timing functions.
setTimeout
Executes code once after a delay.
setTimeout(() => {
alert("Hello after 3 seconds!");
}, 3000);
setInterval
Executes code repeatedly.
setInterval(() => {
console.log("Running...");
}, 1000);Common BOM Objects Comparison
| BOM Object | Purpose |
|---|---|
| window | Main browser window object |
| location | Get or change URL |
| history | Browser navigation |
| navigator | Browser and device info |
| screen | Screen size details |
BOM vs DOM
Real-World Use Cases of BOM
- Redirect users after login
- Detect screen size for responsive layouts
- Show alerts and confirmations
- Track browser language for localization
- Handle back/forward navigation
Best Practices
- Avoid overusing alerts (bad UX)
- Use feature detection instead of browser detection
- Handle redirects carefully
- Combine BOM with DOM for dynamic apps