JavaScript Window Object

In this chapter, we will learn about the JavaScript window object. The window object is the top-level object in the Browser Object Model (BOM) and represents the browser window. We will cover:

• What is the Window Object?
• Window Dimensions and Position
• Dialog Boxes: alert(), confirm(), prompt()
• Opening and Closing Windows
• Timing Events: setTimeout() and setInterval()
• Handling Events
• Simple Programs using the Window Object

What is the Window Object?

The window object is the global object in the browser environment. All global JavaScript objects, functions, and variables automatically become members of the window object. It provides methods and properties for interacting with the browser window and controlling the display of web content.

Window Dimensions and Position

You can get the dimensions and position of the browser window using various properties of the window object.

Example

console.log(window.innerWidth); // Width of the window's content area console.log(window.innerHeight); // Height of the window's content area console.log(window.outerWidth); // Outer width of the window console.log(window.outerHeight); // Outer height of the window console.log(window.screenX); // X coordinate of the window console.log(window.screenY); // Y coordinate of the window 

Output:

1024 768 1280 800 100 100 

Dialog Boxes: alert(), confirm(), prompt()

The window object provides methods to display dialog boxes for interacting with the user.

alert()

Displays an alert box with a message and an OK button.

window.alert("This is an alert box!"); 

confirm()

Displays a confirmation box with a message, an OK button, and a Cancel button.

let userConfirmed = window.confirm("Do you want to proceed?"); if (userConfirmed) { console.log("User chose OK"); } else { console.log("User chose Cancel"); } 

prompt()

Displays a prompt box that asks the user for input.

let userInput = window.prompt("Please enter your name:"); console.log("User input:", userInput); 

Opening and Closing Windows

You can open and close new browser windows or tabs using the window object.

Opening a New Window

let newWindow = window.open("https://www.example.com", "_blank", "width=400,height=400"); 

Closing a Window

newWindow.close(); 

Timing Events: setTimeout() and setInterval()

The window object provides methods for timing events: setTimeout() and setInterval().

setTimeout()

Executes a function after a specified delay.

setTimeout(() => { console.log("This message is displayed after 2 seconds"); }, 2000); 

setInterval()

Executes a function repeatedly with a specified interval between each execution.

let count = 0; let intervalId = setInterval(() => { console.log(`Interval count: ${count}`); count++; if (count === 5) { clearInterval(intervalId); // Stop the interval after 5 executions } }, 1000); 

Handling Events

You can handle various events on the window object, such as resizing and scrolling.

Example

window.addEventListener("resize", () => { console.log("Window resized to:", window.innerWidth, "x", window.innerHeight); }); window.addEventListener("scroll", () => { console.log("Window scrolled to:", window.scrollX, window.scrollY); }); 

Simple Programs using the Window Object

Program 1: Displaying Browser Dimensions

function displayDimensions() { let width = window.innerWidth; let height = window.innerHeight; console.log(`Window dimensions: ${width} x ${height}`); } displayDimensions(); window.addEventListener("resize", displayDimensions); 

Output:

Window dimensions: 1024 x 768 

Program 2: Redirecting After a Delay

function redirectAfterDelay(url, delay) { setTimeout(() => { window.location.href = url; }, delay); } redirectAfterDelay("https://www.example.com", 5000); // Redirect to the URL after 5 seconds 

Conclusion

In this chapter, you learned about the JavaScript window object, including its properties and methods for interacting with the browser window. You also learned about dialog boxes, opening and closing windows, timing events, and handling events. We provided various use cases with simple programs to demonstrate the usage of the window object. Understanding how to effectively use the window object is essential for controlling the browser and interacting with the user in JavaScript.