Web Programming Step by Step

Lecture 13
DOM and Timers

Reading: 7.2 - 7.3; 8.2; 9.2.6

Except where otherwise noted, the contents of this presentation are Copyright 2010 Marty Stepp and Jessica Miller.

Valid XHTML 1.1 Valid CSS!

Problems with JavaScript

JavaScript is a powerful language, but it has many flaws:

Prototype framework

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" 
 type="text/javascript"></script>

The $ function (9.1.3)

$("id")

DOM element objects (7.2.5)

dom object

DOM object properties (7.2.5)

<div id="main" class="foo bar">
	<p>Hello, <em>very</em> happy to see you!</p>
	<img id="icon" src="images/borat.jpg" alt="Borat" />
</div>
Property Description Example
tagName element's HTML tag $("main").tagName is "DIV"
className CSS classes of element $("main").className is "foo bar"
innerHTML content inside element $("main").innerHTML is "\n <p>Hello, <em>ve...
src URL target of an image $("icon").src is "images/borat.jpg"

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?
Property Description Example
value the text in an input control $("sid").value could be "1234567"
checked whether a box is checked $("frosh").checked is true
disabled whether a control is disabled (boolean) $("frosh").disabled is false
readOnly whether a text box is read-only $("sid").readOnly is false

Abuse of innerHTML

// bad style!
var paragraph = document.getElementById("welcome");
paragraph.innerHTML = "<p>text and <a href="page.html">link</a>";

Adjusting styles with the DOM (8.2.2)

<button id="clickme">Color Me</button>
window.onload = function() {
	document.getElementById("clickme").onclick = changeColor;
};
function changeColor() {
	var clickMe = document.getElementById("clickme");
	clickMe.style.color = "red";
}
Property Description
style lets you set any CSS style property for an element

Common DOM styling errors

Unobtrusive styling (8.2.3)

function okayClick() {
	this.style.color = "red";
	this.className = "highlighted";
}
.highlighted { color: red; }

Timer events (9.2.6)

timer
method description
setTimeout(functiondelayMS); arranges to call given function after given delay in ms
setInterval(functiondelayMS); arranges to call function repeatedly every delayMS ms
clearTimeout(timerID);
clearInterval(timerID);
stops the given timer so it will not call its function

setTimeout example

<button onclick="delayMsg();">Click me!</button>
<span id="output"></span>
function delayMsg() {
	setTimeout(booyah, 5000);
	$("output").innerHTML = "Wait for it...";
}

function booyah() {   // called when the timer goes off
	$("output").innerHTML = "BOOYAH!";
}

setInterval example

var timer = null;  // stores ID of interval timer

function delayMsg2() {
	if (timer == null) {
		timer = setInterval(rudy, 1000);
	} else {
		clearInterval(timer);
		timer = null;
	}
}

function rudy() {   // called each time the timer goes off
	$("output").innerHTML += " Rudy!";
}

Passing parameters to timers

function delayedMultiply() {
	// 6 and 7 are passed to multiply when timer goes off
	setTimeout(multiply, 2000, 6, 7);
}
function multiply(a, b) {
	alert(a * b);
}

Common timer errors