• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript Window Objects

← Previous Next →

The JavaScript Window Object represents the browser window or tab that contains a web page. It’s the top-level object in the Browser Object Model (BOM), meaning all other objects like document, history, location, and navigator are part of it.

In simple terms, everything that happens in your browser window — from opening new tabs to showing alerts — starts with the window object.

What is the JavaScript Window Object?

In JavaScript, the window object is automatically created when a web page loads. It acts as a global container that holds:

  • Browser-related information (like screen size, URL, etc.)

  • Methods (like alert(), setTimeout(), etc.)

  • Properties (like window.innerWidth, window.location, etc.)

You don’t have to explicitly write window. every time — it’s implied by default.

Example:

<script>
// Both lines do the same thing
window.alert("Welcome to JavaScript BOM!");
alert("Welcome to JavaScript BOM!"); // 'window' is optional
</script>

Why is the Window Object Important?

Because everything in a browser runs inside a “window,” JavaScript needs a way to:

  • Access and manipulate the web page (window.document)

  • Communicate with the browser (window.navigator, window.location)

  • Manage user interaction (window.alert, window.confirm)

  • Control timing (setTimeout, setInterval)

That’s why understanding the window object is essential for working with the Browser Object Model.

Common Window Properties

Here are some commonly used properties of the window object:

Property Description
window.innerWidth Returns the width of the window’s content area (in pixels).
window.innerHeight Returns the height of the window’s content area.
window.outerWidth Returns the full width of the browser window (including toolbars).
window.outerHeight Returns the full height of the browser window.
window.screenX Horizontal position of the window relative to the screen.
window.screenY Vertical position of the window relative to the screen.
window.location Returns the URL (Location object).
window.document Refers to the HTML document loaded in the window.

Example:

<script>
// Display window dimensions
document.write("Inner Width: " + window.innerWidth + "<br>");
document.write("Inner Height: " + window.innerHeight + "<br>");
</script>

Window Methods

The window object provides many useful methods to perform browser actions.

1. window.alert()

Displays a popup alert box.

<script>
window.alert("This is an alert message!");
</script>

2. window.confirm()

Shows a popup with OK and Cancel buttons.

<script>
let result = window.confirm("Do you want to continue?");
if(result){
  document.write("User clicked OK");
}else{
  document.write("User clicked Cancel");
}
</script>

3. window.prompt()

Takes input from the user through a popup dialog box.

<script>
let name = window.prompt("Enter your name:");
document.write("Hello, " + name);
</script>

4. window.open()

Opens a new browser window or tab.

<script>
// Opens Google in a new tab
window.open("https://www.google.com", "_blank");
</script>

5. window.close()

Closes the current browser window (if it was opened by window.open()).

<script>
// Close the window (only if opened via script)
window.close();
</script>

Window Size and Position

You can get or even move and resize the browser window using these methods (though many are restricted for security reasons).

Example:

<script>
// Get window size
console.log("Width: " + window.innerWidth);
console.log("Height: " + window.innerHeight);

// Move the window (only works for popups)
window.moveTo(100, 100);
window.resizeTo(800, 600);
</script>

Global Variables and the Window Object

Every global variable and function automatically becomes a property of the window object.

Example:

<script>
var site = "CodePractice.in";

function showSite(){
  console.log("Welcome to " + site);
}

// Access them as window properties
console.log(window.site);  // "CodePractice.in"
window.showSite();         // "Welcome to CodePractice.in"
</script>

This is why it’s important to avoid polluting the global scope — because all global variables are added to window.

Window Timing Methods

The window object also controls time-based actions using two key methods:

1. setTimeout()

Runs a function after a specific delay (in milliseconds).

<script>
// Show message after 3 seconds
setTimeout(() => {
  alert("This message appears after 3 seconds");
}, 3000);
</script>

2. setInterval()

Runs a function repeatedly at specified intervals.

<script>
// Display time every second
setInterval(() => {
  let time = new Date().toLocaleTimeString();
  document.getElementById("clock").innerHTML = time;
}, 1000);
</script>

<p id="clock"></p>

You can stop the interval using clearInterval().

Window and the Document Object

The document object is part of the window — it represents the web page content loaded inside the window.

Example:

<script>
console.log(window.document.title); // Prints page title
window.document.body.style.backgroundColor = "lightyellow"; // Change background color
</script>

So when you use document.getElementById(), you’re really using window.document.getElementById().

Window Navigation and Other Objects

The window object contains other sub-objects that let you interact with the browser:

  • window.location → Current page URL and navigation.

  • window.history → Access browser history (back/forward).

  • window.navigator → Information about the browser and device.

  • window.screen → Details about the user’s screen resolution.

Each of these will be explained in separate tutorials.

Best Practices When Using the Window Object

  1. Avoid using too many global variables — they all attach to window.

  2. Prefer const or let for declaring variables to prevent conflicts.

  3. Use modern event handling (addEventListener) instead of inline onclick.

  4. Always test window-related methods on different browsers — some may have restrictions.

  5. Avoid using window.open() for unnecessary popups (may be blocked).

Summary of the Tutorial

The JavaScript Window Object is the foundation of the Browser Object Model (BOM). It represents the browser tab or window and provides methods and properties to interact with it — from alerts and timing functions to screen size and location details.

Mastering window helps you control the browser environment effectively and gives you access to all other BOM features.

Practice Questions

  1. How can you display a popup message to the user when a webpage loads using the window.alert() method?

  2. Write a script that asks the user’s name using window.prompt() and then displays a greeting with their name.

  3. How can you use window.confirm() to ask a user if they want to leave a page, and display different messages based on their choice?

  4. Write code to open a new browser window that loads “https://www.google.com” using the window.open() method.

  5. How can you close a window that was opened using JavaScript? Demonstrate with window.close().

  6. Write a program to display the window’s inner width and height on the webpage using window.innerWidth and window.innerHeight.

  7. How can you move or resize a browser window using moveTo() and resizeTo() methods? (Test this in a popup window.)

  8. Write code to show a digital clock that updates every second using setInterval() and displays the time inside a <p> element.

  9. How can you execute a function after 5 seconds using setTimeout() and display a message when it runs?

  10. Create a global variable and function, then access both using the window object. Explain how JavaScript treats global variables in the browser.

← Previous Next →

JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

codepractice logo
Login
Go Back Top