? JavaScript Window Object

? Quick Overview

In a browser, the window object is the global object. It represents the browser window or tab and provides access to important browser features such as size, dialogs, timers, location, and the loaded document.

Any global variable, function, or object you create in a script becomes a property of window. Most of the time you can omit the explicit window. prefix because it is implied in the global scope.

? Key Concepts

? Global Window Object

window is the root object for client-side JavaScript in browsers.
Global variables and functions become properties of window.
In browser scripts, this in the global scope also refers to window.

? Important Properties

window.innerWidth – Width of the viewport (content area) in pixels.
window.innerHeight – Height of the viewport in pixels.
window.document – The DOM of the current page.
window.location – Information about (and control over) the current URL.
window.screen – Information about the user’s screen/device.
window.navigator – Information about the browser and operating system.

?️ Common Methods

alert(message) – Shows an alert dialog.
confirm(message) – OK/Cancel dialog; returns true or false.
prompt(message, default) – Dialog that lets the user type a value.
open(url, name, specs) – Opens a new window or tab.
close() – Closes the current window (if opened by script).
setTimeout() – Runs code once after a delay.
setInterval() – Runs code repeatedly at fixed intervals.

? Global Scope Link

In browser JavaScript, the global scope and window are effectively the same.
Declaring a function globally makes it available as window.yourFunction.
Node.js (server-side JS) does not have a window object.

? Syntax and Theory

You can access window members either implicitly (just by using their names) or explicitly with the window. prefix:

? Global variable as a window property

<script>
var x = 5;
// Implicit access
console.log(x);
// Explicit access through window
console.log(window.x); // Output: 5
</script>

The same applies to global functions – they are also stored as properties of window.

? Global function on the window object

<script>
function greet() {
  console.log("Hello");
}
greet();          // Direct call
window.greet();   // Equivalent call
console.log(window.greet); // Logs the function definition
</script>

? Code Examples

? Working with Window Properties

? Inspecting size, title, and URL

<script>
console.log(window.innerWidth);        // e.g., 1280
console.log(window.document.title);    // Page title
console.log(window.location.href);     // Current page URL
</script>

? Dialog Methods (alert, confirm, prompt)

? Asking for user input

<script>
let username = prompt("What is your name?");
if (confirm("Do you want to proceed?")) {
  alert("Welcome, " + username);
} else {
  alert("Action cancelled.");
}
</script>

? Opening and Closing Windows

? Using window.open and window.close

<script>
let newWin = window.open(
  "https://example.com",
  "_blank",
  "width=400,height=300"
);
newWin.focus();  // Bring new window to front
newWin.close();  // Close it (allowed only if opened by script)
</script>

? Viewport Dimensions

? Logging viewport width and height

<script>
console.log("Viewport width: " + window.innerWidth);
console.log("Viewport height: " + window.innerHeight);
</script>

? Live Output & Explanation

? Dialog example behaviour

In the dialog example:

prompt() shows a dialog asking for the user’s name and returns the typed value.
confirm() then asks whether to proceed. It returns true if the user clicks OK, or false if they click Cancel.
If confirm() returns true, alert() displays a welcome message using the entered name; otherwise it shows a cancellation message.

In the viewport example, the values printed in the console will change if you resize the browser window and run the code again (or listen to the resize event).

? Use Cases

Displaying simple notifications or confirmations using dialog boxes.
Reading or updating the current URL using window.location.
Working with timers using setTimeout / setInterval.
Detecting and reacting to viewport size changes for responsive behaviour.
Accessing and manipulating the DOM via window.document.

? Interactive Example

Click the button below to read the current viewport size using window.innerWidth and window.innerHeight.

? Current viewport

Click the button to see the current width and height of the window.

? Quick reference

Property / Method	Description
`window.innerWidth`	Width of the viewport (content area).
`window.innerHeight`	Height of the viewport.
`window.alert()`	Shows an alert dialog.
`window.open()`	Opens a new window or tab.
`setTimeout()`	Runs code once after a specified delay.
`setInterval()`	Runs code repeatedly at a fixed interval.
`window.location`	Provides URL information and navigation methods.
`window.document`	Gives access to the page DOM.

? Tips & Best Practices

You can omit window. when calling most global functions like alert() and setTimeout().
Remember that global variables are properties of window; avoid polluting the global scope.
Use window.open() sparingly – many browsers block unwanted pop-ups.
Use window.onresize or addEventListener("resize", ...) to react to window size changes.
Only call window.close() on windows/tabs that were opened by your script.
Always clear timers created with setInterval() or long-lived setTimeout() using clearInterval() / clearTimeout().
Do not rely on window in environments like Node.js where it does not exist.
Use innerWidth and innerHeight for viewport size instead of window.screen.

? Practice Tasks

Use prompt() to ask the user’s age and display it in an alert().
Create a countdown using setInterval() that starts from 10 and stops at 0 using clearInterval().
Open a new window with window.open() and automatically close it after 5 seconds using setTimeout().
Log all properties of the window object using console.log(window) and explore what you see.
Write code that displays the viewport width and height every time the user resizes the browser window.