PROWAREtech
JavaScript: Tutorial - A Guide to JavaScript - Page 14
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 displayed 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>
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(),
getElementsByClassName() 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()
getElementsByClassName() returns an array.
