Window Object
The window object is the top-level object in the browser’s JavaScript hierarchy. It represents the browser window or tab in which your webpage is displayed.
Every global variable, function, or object automatically becomes a property of the window object.
What is the Window Object?
The window object is part of the Browser Object Model (BOM) and acts as a global container for everything in a web page.
- When you open a web page, the browser creates a window object for that page.
- This object contains methods, properties, and other objects (like
document,location,navigator,history, andscreen).
Example:
console.log(window); // Displays all window properties and methods
Accessing the Window Object
You can access the window object in two ways:
window.alert("Hello!");
alert("Hello!"); // Both are the same
Key Properties of the Window Object
| Property | Description | Example |
|---|---|---|
window.innerWidth | Width of the content area | console.log(window.innerWidth) |
window.innerHeight | Height of the content area | console.log(window.innerHeight) |
window.outerWidth | Total browser window width | console.log(window.outerWidth) |
window.outerHeight | Total browser window height | console.log(window.outerHeight) |
window.screenX | X position of window on screen | console.log(window.screenX) |
window.screenY | Y position of window on screen | console.log(window.screenY) |
window.location | Current URL info | console.log(window.location.href) |
window.document | The DOM document inside window | console.log(window.document.title) |
window.navigator | Browser information | console.log(window.navigator.userAgent) |
window.history | Browser navigation history | console.log(window.history.length) |
Window Object Methods
| Method | Description | Example |
|---|---|---|
alert() | Displays a popup alert box | window.alert("Welcome!") |
confirm() | Shows OK/Cancel dialog | window.confirm("Are you sure?") |
prompt() | Gets user input through dialog | window.prompt("Enter your name:") |
open() | Opens a new browser window/tab | window.open("<https://example.com>") |
close() | Closes the current browser window | window.close() |
setTimeout() | Executes code after a delay | setTimeout(() => alert("Hi"), 2000) |
setInterval() | Executes repeatedly after interval | setInterval(() => console.log("Ping"), 1000) |
clearTimeout() | Cancels a timeout | clearTimeout(timer) |
clearInterval() | Cancels an interval | clearInterval(intervalId) |
scrollTo() | Scrolls to specific position | window.scrollTo(0, 100) |
focus() | Focuses on the current window | window.focus() |
blur() | Removes focus from the window | window.blur() |
Example – Using Common Window Methods
<!DOCTYPE html>
<html>
<body>
<h2>Window Object Example</h2>
<button onclick="showAlert()">Show Alert</button>
<button onclick="askUser()">Ask User</button>
<button onclick="openSite()">Open Site</button>
<script>
function showAlert() {
alert("Hello! This is an alert message!");
}
function askUser() {
const answer = confirm("Do you like JavaScript?");
alert(answer ? "Awesome!" : "Let’s learn more!");
}
function openSite() {
window.open("<https://www.google.com>", "_blank", "width=600,height=400");
}
</script>
</body>
</html>
Window Timers: setTimeout() & setInterval()
These methods let you execute code after a delay or repeatedly.
Example – setTimeout():
setTimeout(() => {
alert("This message appears after 3 seconds!");
}, 3000);
Example – setInterval():
let count = 0;
let timer = setInterval(() => {
console.log("Ping:", ++count);
if (count === 5) clearInterval(timer); // Stop after 5 times
}, 1000);
Opening and Closing Windows
You can open new browser windows or tabs using window.open().
Example:
let newWin = window.open("<https://example.com>", "_blank", "width=500,height=400");
Close a window:
newWin.close();