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 attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
location and screen

Last accessed pages

  1. Add, Change, and Remove Attributes with jQuery (17719)
  2. Display data from PHP Array, or MySQL in HTML table (6883)
  3. ActionScript 3 - Change MovieClip Color (3906)
  4. JavaScript Syntax (1292)
  5. PHP MySQL - WHERE and LIKE (9646)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (31662)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (25849)
  3. Get Attribute (ID, Class, Name, Title, Src) with jQuery (24798)
  4. Read Excel file data in PHP - PhpExcelReader (23941)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (21604)