Lecture 14: The Document Object Model (DOM); Timers
Reading: 8.2; 9.2; 11.1
Except where otherwise noted, the contents of this document are
Copyright 2012 Marty Stepp, Jessica Miller, Victoria Kirst and Roy McElmurry IV.
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.
8.2.6: Debugging Common Errors
8.1: Key JavaScript Concepts
8.2: JavaScript Syntax
8.3: Program Logic
8.4: Advanced JavaScript Syntax
Debugging JS code in Firebug
Chrome JS debugger can set breakpoints, step through code, examine values (Script tab)
interactive console for typing in arbitrary JS expressions (Console tab)
JSLint
JSLint: an analyzer that checks your JS code, much like a compiler, and points out common errors
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!";
}
Write javascript code to decrement the time until zero and then print an alert.
The clock should start when the button is clicked.
The clock should stop when the time reaches zero.
The button should not do anyithng if the alarm is already running.
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);
}
any parameters after the delay are eventually passed to the timer function
doesn't work in IE6; must create an intermediate function to pass the parameters
why not just write this?
setTimeout(multiply(6 * 7), 2000);
Common timer errors
many students mistakenly write () when passing the function
write exactly the value you would have written in the CSS, but in quotes
Unobtrusive styling
function okayClick() {
this.style.color = "red";
this.className = "highlighted";
}
.highlighted { color: red; }
well-written JavaScript code should contain as little CSS as possible
use JS to set CSS classes/IDs on elements
define the styles of those classes/IDs in your CSS file
Getting/setting CSS classes
function highlightField() {
// turn text yellow and make it bigger
if (!document.getElementById("text").className) {
document.getElementById("text").className = "highlight";
} else if (document.getElementById("text").className.indexOf("invalid") < 0) {
document.getElementById("text").className += " highlight";
}
}
JS DOM's className property corresponds to HTML class attribute
somewhat clunky when dealing with multiple space-separated classes as one big string
