location and screen objects

In this lesson are presented other JavaScript level one browser objects: location and screen.

1. location object

The location object is a member of the window object, provides access to the current URL and its components. It is accessed through the window.location property.

location object properties


- The falowing example gets and writes in the page the parts of a given URL.
<script type="text/javascript"><!--
// considering the url of the page:
// - http://coursesweb.net:80/css/index.php?pg=tutorialsid=89#coms

// gets the parts
var protl = window.location.protocol;
var host_port = window.location.host;
var domain = window.location.hostname;
var port = window.location.port;
var dir_path = window.location.pathname;
var src = window.location.search;
var hsh = window.location.hash;

// writes the parts
document.write('protocol - '+ protl+ '<br />');
document.write('host - '+ host_port+ '<br />');
document.write('hostname - '+ domain+ '<br />');
document.write('port - '+ port+ '<br />');
document.write('pathname - '+ dir_path+ '<br />');
document.write('search - '+ src+ '<br />');
document.write('hash - '+ hsh+ '<br />');
--></script>
<button onclick="goBack()">Go Back 2</button>
- This script will display:
protocol - http:
host - coursesweb.net:80
hostname - coursesweb.net
port - 80
pathname - /css/index.php
search - ?pg=tutorialsid=89
hash - #coms

location object methods


2. screen objects

The screen object contains information about the visitor's screen, it's part of the window object.

screen objects properties


- Example with the value returned by some of these properties:
<script type="text/javascript"><!--
document.write('availHeight - '+ screen.availHeight+ '<br />');
document.write('availWidth - '+ screen.availWidth+ '<br />');
document.write('colorDepth - '+ screen.colorDepth+ '<br />');
document.write('pixelDepth - '+ screen.pixelDepth+ '<br />');
document.write('height - '+ screen.height+ '<br />');
document.write('width - '+ screen.width+ '<br />');
document.write('left - '+ screen.left+ '<br />');
document.write('top - '+ screen.top+ '<br />');
--></script>
- The output of the code above:
availHeight - 772
availWidth - 1280
colorDepth - 24
pixelDepth - 24
height - 800
width - 1280
left - 0
top - 0

• The screen object has no methods.