JavaScript Tutorial

The Screen Object

The screen object has several properties but the most usable are screen.height and screen.width. One problem with these properties is that they may return the screen dimensions of the main monitor, not the monitor being disaplyed on.

The History Object

The history object relates to the back and forward history buttons of the browser.

//back one page
history.go(-1);
//forward one page
history.go(1);
//forward two pages
history.go(2);

The go method can use string inputs, too. The closest history entry that has the specified string is chosen.

//go to nearest prowaretech.com page
history.go("prowaretech.com");

The history object also has a length property that returns the number of items in the history stack.

System Dialogs

The alert(), prompt() and confirm() methods invoke system dialogs. These do not use HTML code.

<!DOCTYPE html>
<html>
<head>
<title>Dialog Example</title>
<script type="text/javascript">
	function alertDialog() {
		alert("Hello");
	}
	function confirmDialog() {
		var value = confirm("are you sure");
		if (value == false) {
			alert("You chose cancel");
		} else if (value == true) {
			alert("You chose OK");
		}
	}
	function promptDialog() {
		var value = prompt("enter your name", "your name here");
		if(value != null) {
			alert("You entered " + value);
		}
	}
</script>
</head>
<body>
	<p><a href="javascript:alertDialog();">Click here</a> to demonstrate the alert() dialog.</p>
	<p><a href="javascript:confirmDialog();">Click here</a> to demonstrate the confirm() dialog.</p>
	<p><a href="javascript:promptDialog();">Click here</a> to demonstrate the prompt() dialog.</p>
</body>
</html>

Click here to try the previous code section in a new browser window.

Timeouts and Intervals

The following timeout code will execute after 1000 milliseconds (one second).


setTimeout(function() {
	alert("prowaretech.com");
}, 1000);

setTimeout("alert('prowaretech.com');", 1000); //lower performance, less preferred way

var timerId = setTimeout(function() {
	alert("prowaretech.com");
}, 1000);
// cancel the timer
clearTimeout(timerId);

Intervals work very similarly except that they execute code repeatedly at the specified interval.


var currentNumber = 0;
var maximumNumber = 10;
var intervalId = null;
function someFunction() {
	currentNumber++;
	if (currentNumber == maximumNumber) {
		clearInterval(intervalId);
	}
}
intervalId = setInterval(someFunction, 1000);

The Document Object Model

The document object model (DOM) is an application programming interface (API) for HTML documents. The DOM is a document of hierarchical tree nodes that allow the adding, removing and modifying of individual page parts. DOM level 1 was introduced in 1998.

Locating DOM Elements

The abililty to retrieve references to a specific element or sets of elements is accomplished by getElementById() and getElementsByTagName(). Consider this code:

<div id="someDiv">Some text</div>

This HTML div element can be accessed using the JavaScript document.getElementById() method. Like this:

var div = document.getElementById("someDiv");

The ID is case sensitive. Every HTML element should have its own unique ID value but if there are duplicate ID values on the same document then document.getElementById() returns a reference to the first element with that ID.

document.getElementsByTagName() returns an array of elements with the tag name specified. Like this:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
	alert(divs[i].id);
}

There is a method used to find DOM elements by their name attribute, such as that which is used by form elements, document.getElementsByName(). Just like getElementsByTagName(), getElementsByName() returns an array.

<< < [Page 14 of 22] > >>