JavaScript

In web development, JavaScript doesn’t just interact with HTML and CSS — it also communicates with the browser itself through something called the Browser Object Model (BOM).

At the core of BOM is the window object, which represents the browser window or tab that contains the webpage.

---

📌 What is the BOM?

The Browser Object Model (BOM) allows JavaScript to:

• Interact with the browser (not just the page)
• Manage the browser window/tab
• Control navigation, history, screen size, alerts, and more

---

🔸 The window Object

The window object is the global object in the browser. Every variable, function, or object declared globally becomes a property of window.

Example:

var a = 10;
console.log(window.a); // 10

You can use window to access a lot of BOM features.

---

🔹 Common window Methods

Method	Description
alert()	Displays an alert box
confirm()	Displays a confirmation dialog
prompt()	Displays a prompt dialog for input
open()	Opens a new browser window/tab
close()	Closes the current window
setTimeout()	Executes a function after a delay
setInterval()	Repeats a function at specified intervals
clearTimeout()	Cancels a timeout
clearInterval()	Cancels an interval

Example:

alert("Welcome to BOM!"); // Alert box

---

📍 Window Size & Screen Info

You can access screen and browser dimensions like this:

console.log(window.innerWidth);   // Viewport width
console.log(window.innerHeight);  // Viewport height

console.log(screen.width);        // Full screen width
console.log(screen.height);       // Full screen height

---

🌐 Window Location Object

window.location gives you access to the URL of the current page and lets you change it.

Common Uses:

console.log(location.href);   // Full URL
console.log(location.hostname); // Domain name
console.log(location.pathname); // Path (e.g. /about.html)

location.href = "https://google.com"; // Redirect

---

🔙 Window History

The history object lets you interact with the user’s browser history.

history.back();    // Go back one page
history.forward(); // Go forward one page
history.go(-2);    // Go back 2 pages

---

📶 Window Navigator

navigator provides information about the browser.

console.log(navigator.userAgent);   // Browser details
console.log(navigator.language);    // Browser language
console.log(navigator.onLine);      // Online status

---

⏱️ setTimeout and setInterval (BOM Timers)

setTimeout()

Runs a function once after a delay.

setTimeout(() => {
  alert("This appears after 2 seconds");
}, 2000);

setInterval()

Runs a function repeatedly at intervals.

let count = 0;
let timer = setInterval(() => {
  console.log("Interval count:", ++count);
  if (count === 5) clearInterval(timer); // Stop after 5 times
}, 1000);

---

✅ Summary

Feature	Accessed Through	Description
Alerts/Prompts	window.alert()	Show dialogs
URL control	window.location	Redirect, get info
Screen size	window.innerWidth etc.	Get viewport/screen dimensions
Navigation	window.history	Go back or forward
Browser info	window.navigator	Get device & browser information
Timers	setTimeout, setInterval	Run functions after delay or interval

---