Author
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.
The window object is part of the Browser Object Model (BOM) and acts as a global container for everything in a web page.
document, location, navigator, history, and screen).Example:
console.log(window); // Displays all window properties and methods
You can access the window object in two ways:
window.alert("Hello!");
alert("Hello!"); // Both are the same
| 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) |
| 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>
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);
You can open new browser windows or tabs using window.open().
Example:
let newWin = window.open("<https://example.com>", "_blank", "width=500,height=400");
newWin.close();