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.

Debugging JS code in Firebug

• 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
  • Web Step By Step version (recommended)
  • original version, by Douglas Crockford of Yahoo!
• when your JS code doesn't work, paste it into JSLint first to find many common problems

JavaScript "strict" mode

"use strict";

your code...

• writing "use strict"; at the very top of your JS file turns on strict syntax checking:
  • shows an error if you try to assign to an undeclared variable
  • stops you from overwriting key JS system libraries
  • forbids some unsafe or error-prone language features
• You should always turn on strict mode for your code in this class!

DOM element objects

• every element on the page has a corresponding DOM object
• access/modify the attributes of the DOM object with objectName.attributeName

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");

Abuse of innerHTML

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

• innerHTML can inject arbitrary HTML content into the page
• however, this is prone to bugs and errors and is considered poor style
• we forbid using innerHTML to inject HTML tags; inject plain text only
  • (later, we'll see a better way to inject content with HTML tags in it)

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";
}

• contains same properties as in CSS, but with camelCasedNames
  • examples: backgroundColor, borderLeftWidth, fontFamily

Common DOM styling errors

• many students forget to write .style when setting styles

  var clickMe = document.getElementById("clickme");
  clickMe.color = "red";
  clickMe.style.color = "red";
  

• style properties are capitalized likeThis, not like-this

  clickMe.style.font-size = "14pt";
  clickMe.style.fontSize = "14pt";
  

• style properties must be set as strings, often with units at the end

  clickMe.style.width = 200;
  clickMe.style.width = "200px";
  clickMe.style.padding = "0.5em";
  

  • write exactly the value you would have written in the CSS, but in quotes

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");

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>

• when talking to a text box or select, you usually want its value
• when talking to a checkbox or radio button, you probably want to know if it's checked (true/false)

JavaScript events

• the click event (onclick) is just one of many events that can be handled

Timer events

• both setTimeout and setInterval return an ID representing the timer
  • this ID can be passed to clearTimeout/Interval later to stop the timer

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);
}

• 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

  setTimeout(booyah(), 2000);
  setTimeout(booyah, 2000);
  
  setTimeout(multiply(num1 * num2), 2000);
  setTimeout(multiply, 2000, num1, num2);
  

  • what does it actually do if you have the () ?
  • it calls the function immediately, rather than waiting the 2000ms!