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.

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
location and screen

Last accessed pages

  1. Zoo Amigos (6947)
  2. Area and Perimeter Calculator for 2D shapes (6260)
  3. Download PHP MySQL resources (937)
  4. Drag Racer V3 (24831)
  5. Zuma Deluxe (39626)

Popular pages this month

  1. Qwop (10555)
  2. Drag Racer V3 (6225)
  3. Flash Games - Free online Games (2162)
  4. List with All the Games (2073)
  5. Bubbles3 (1996)