Web Programming Step by Step, 2nd Edition

Lecture 17: The Document Object Model (DOM); Events and Timers

Reading: 8.2; 9.2; 11.1

Except where otherwise noted, the contents of this document are Copyright 2012 Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

Valid HTML5 Valid CSS

8.2.6: Debugging Common Errors

Debugging JS code in Firebug

Firebug JS

JSLint

JSLint

JavaScript "strict" mode

screenshot
"use strict";

your code...

9.2: DOM Element Objects

DOM element objects

dom object

DOM object properties

<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>
var mainDiv = document.getElementById("main");
var icon    = document.getElementById("icon");
Property Description Example
tagName element's HTML tag mainDiv.tagName is "DIV"
className CSS classes of element mainDiv.className is "foo bar"
innerHTML content in element mainDiv.innerHTML is "\n <p>Hello, <em>ve...
src URL target of an image icon.src is "images/borat.jpg"

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

<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

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?
var sid   = document.getElementById("sid");
var frosh = document.getElementById("frosh");
Property Description Example
value the text/value chosen by the user 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

More about form controls

<select id="captain">
	<option value="kirk">James T. Kirk</option>
	<option value="picard">Jean-Luc Picard</option>
	<option value="cisco">Benjamin Cisco</option>
</select>
<label> <input id="trekkie" type="checkbox" /> I'm a Trekkie </label>

Events and Timers

JavaScript events

abort blur change click dblclick error focus
keydown keypress keyup load mousedown mousemove mouseout
mouseover mouseup reset resize select submit unload

Timer events

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);
	document.getElementById("output").innerHTML = "Wait for it...";
}

function booyah() {   // called when the timer goes off
	document.getElementById("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
	document.getElementById("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