What is JavaScript Window, Screen, and Location Objects

#javascript

#window object

In JavaScript, the `window`, `screen`, and `location` objects provide information and control over the browser window, screen properties, and the URL of the document, respectively. Here's a brief overview of each:

1. Window Object

The `window` object represents the browser window in which the script is running. It is the global object in the browser environment, meaning all global JavaScript objects, functions, and variables automatically become members of the `window` object.

Key properties and methods:

  • `window.alert(message)`: Displays an alert box with a specified message.
  • `window.confirm(message)`: Displays a dialog box with a specified message, along with an OK and a Cancel button.
  • `window.open(url, name, specs, replace)`: Opens a new browser window or tab.
  • `window.close()`: Closes the current window.

Example:

window.alert("Hello, world!");

2. Screen Object

The `screen` object contains information about the user's screen. It is typically used to get information about the screen's dimensions and color depth.

Key properties:

  • `screen.width`: Returns the width of the screen.
  • `screen.height`: Returns the height of the screen.
  • `screen.availWidth`: Returns the width of the screen, excluding the OS taskbar.
  • `screen.availHeight`: Returns the height of the screen, excluding the OS taskbar.
  • `screen.colorDepth`: Returns the color depth of the screen.

Example:

console.log("Screen width: " + screen.width);
console.log("Screen height: " + screen.height);

3. Location Object

The `location` object contains information about the current URL of the document. It can be used to get the URL and redirect the browser to a new URL.

Key properties and methods:

  • `location.href`: Returns the entire URL of the current page.
  • `location.protocol`: Returns the protocol of the current URL (e.g., http: or https:).
  • `location.hostname`: Returns the domain name of the web host.
  • `location.pathname`: Returns the path and filename of the current page.
  • `location.search`: Returns the query string part of the URL.
  • `location.hash`: Returns the anchor part of the URL.
  • `location.assign(url)`: Loads a new document.
  • `location.reload()`: Reloads the current document.

Example:

console.log("Current URL: " + location.href);
location.assign("https://www.example.com");

Further Learning

For a deeper dive into these JavaScript objects and to explore more JavaScript tutorials, visit Guru Labs.

Feel free to ask if you have more questions about JavaScript or need further clarification!