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 is a block element?
<div> <img> <span>
<div>Web Programming and Development</div>
Which CSS code displays the text underlined?
font-style: italic; text-decoration: underline; font-weight: 500;
h2 {
  text-decoration: underline;
}
Click on the JavaScript function that can access other function after a specified time.
insertBefore() setTimeout() querySelector()
function someFunction() { alert("CoursesWeb.net"); }
setTimeout("someFunction()", 2000);
Click on the instruction that returns the number of items of a multidimensional array in PHP.
count($array) count($array, 1) strlen()
$food = array("fruits" => array("banana", "apple"), "veggie" => array("collard", "pea"));
$nr_food = count($food, 1);
echo $nr_food;       // 6
location and screen

Last accessed pages

  1. PHP PDO - Select query, fetch (9316)
  2. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (29436)
  3. Buttons, Checkbox, Radio, Select, Option objects (1082)
  4. CSS Rhombus Shape (2119)
  5. Download PHP MySQL resources (4742)

Top accessed pages

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