Table of contents
1.
Introduction
2.
JavaScript Window Screen
3.
JavaScript Window Location
4.
JavaScript Window History
5.
Frequently Asked Question
6.
Key Takeaways
Last Updated: Mar 27, 2024

JavaScript Screen, Location, and History

Author Juhi Sinha
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

In this article, we will learn in detail about Javascript screen, location, and history. We will also deal with the syntax of the properties and methods of the screen, location, and history of JavaScript window. So, without any further ado, let's get started!

Also Read, Javascript hasOwnProperty

JavaScript Window Screen

The window.screen object holds data about the screen of the user as the window object is at the top of the scope chain, the window.screen object's properties can be accessed without specifying the window(prefix). 

Different properties of window screen are:

  • screen.width: The screen.width property is used to get the width of the user's screen in pixels. 

Syntax:

var screenWidth = window.screen.width;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The Screen width is " + screen.width;
</script>

 

  • screen.height: The screen.height property is used to get the height of the user's screen in pixels.

Syntax:

var screenHeight = window.screen.height;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The Screen height is " + screen.height;
</script>

 

  • screen.availWidth: The screen.availWidth property is used to get the available width of the user's screen in pixels (width of the screen of user - interface elements such as the Windows Taskbar). 

Syntax:

var availableWidth = window.screen.availWidth;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The available width of screen is " + screen.availWidth;
</script>

 

  • screen.availHeight: The screen.availHeight property is used to get the available height of the user's screen in pixels (height of the screen of user - interface elements such as the Windows Taskbar). 

Syntax:

var availableHeight = window.screen.availHeight;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The available width of screen is "+ screen.availHeight;
</script>

 

  • screen.colorDepth: The screen.colorDepth property is used to get the number of bits used to display one color. The color depth of a device's screen indicates how many colors it can display.

Syntax:

var bitColorDepth = window.screen.colorDepth;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The color depth of screen is " + screen.colorDepth;
</script>

 

  • screen.pixelDepth: Using the screen.pixelDepth, we can determine the pixel depth of the screen. Pixel depth refers to the count of bits per pixel used by the hardware of the system display. Color depth and pixel depth are equal on modern devices.

Syntax:

var pixelDepth = window.screen.pixelDepth;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The pixel depth of the screen is " + screen.pixelDepth;
</script>

 

JavaScript Window Location

We use the window to get the current page address (URL) and redirect the browser to a new page location object. We use the location object to get the current page URL, reload the current page, navigate to a new page, get different parts of the URL, etc. We can write window.location object without the window prefix.

Different properties of window location are:

 

  • window.location.href: To get the entire URL of the current web page, we can use the window.location.href property.

Syntax:

const urlLocation = window.location.href;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The URL is: "window.location.href;
</script>

 

  • window.location.hostname: The window.location.hostname property is used to get the name of the internet host of the current page. The domain name or IP address is returned as a string.

Syntax:

var hostName = window.location.hostname;

Example:

<script>
document.getElementById("demo").innerHTML = 
"The hostname of the page is: "window.location.hostname;
</script>

 

  • window.location.pathname: The window.location.pathname property is used to get the pathname of the present page. If there is no path, it will return an empty string.

Syntax:

var pagePath = window.location.pathname;

Example:

<script>
document.getElementById("demo").innerHTML =
"Present page path is: "window.location.pathname;
</script>

 

  • window.location.protocol: The window.location.protocol property is used to get the web protocol of the page.

Syntax:

var protocalPage = location.protocol;

Example:

<script>
document.getElementById("demo").innerHTML =
"The protocol of the page is: "window.location.protocol;
</script>

 

  • window.location.port: The window.location.port property is used to get the number of the current page's internet host port. If there is no explicit port number in the URL, it will be set to ‘ ‘.

Syntax:

var portLocation = window.location.port;

 

Example:

<script>
document.getElementById("demo").innerHTML = 
"The port URL of the page is: "window.location.port;
</script>

 

JavaScript Window History

There are restrictions on how JavaScript can access objects to protect users' privacy. As there is no method to determine the position of the current URL in the history object, the history object's properties and methods are limited. We can write window.history object without the window prefix.

 

Different methods of window history are:

  • history.forward(): The history.forward() method is used to load the next URL of the history list. It's the same as pressing the browser's forward button. 

Example:

<html>
<head>
<script>
function moveForward() {
  window.history.forward()
}
</script>
</head>
<body>

<input type="button" value="Forward" onclick="moveForward()">

</body>
</html>

 

  • history.back(): The history.back() method loads the previous URL in the history list. It's the same as clicking the browser's Back button.

 

Example:

<html>
<head>
<script>
function moveBack() {
  window.history.back()
}
</script>
</head>
<body>

<input type="button" value="Back" onclick="goBack()">

</body>
</html>

 

The above example is of history.back() method and try it on an online javascript compiler.

Frequently Asked Question

 

Q1) What is a screen in JavaScript?

Answer: The JavaScript screen object keeps track of the contents of the browser's screen. It can be used to show screen dimensions such as width, height, colorDepth, and pixelDepth. 

 

Q2) What is the use of the window location in Javascript?

Answer: The window location object is used to get the address of the current page and redirect the browser to a different page.

 

Q3) What is the window history in javascript?

Answer: The window history in javascript has a list of all the pages visited in the current window, as well as the browser session history. Because a window is a global object at the top of the scope chain, its properties, such as history, can be accessed without using the window.

 

Key Takeaways

In this article, we've learned JavaScript screen, location, and history in detail.

If you want to learn advanced front-end web development, Coding Ninjas has one of the best courses available, which you can find here

 

Thank you for reading!

 

Live masterclass