Intro to DOM and Timers

CSE 190 M (Web Programming) Spring 2008

University of Washington

Reading: Chapter 3 sections 3.2 - 3.3

Except where otherwise noted, the contents of this presentation are © Copyright 2008 Marty Stepp and Jessica Miller and are licensed under the Creative Commons Attribution 2.5 License.

Basic idea

• most JS code manipulates elements on an XHTML page
  • example: clicking a button makes text bold
• in this section, we'll learn how to:
  • make our event handlers interact with elements on the page
  • examine the state of the elements, e.g. whether a checkbox is checked
  • change the state of elements, e.g. putting text into a text area
  • dynamically change the styles of those elements while the page is on screen

What is the DOM?

• Document Object Model (DOM): a representation of the current page as a set of JS objects
  • e.g. each tag is represented as an object
• we can access these objects in several ways:
  • asking for an element's DOM object by its id
  • by traversing the page as a tree-like structure (later)
• script code can view/modify these DOM objects, which causes changes to appear on the web page

Accessing elements: The $ function

<span id="sale">Blowout sale!</span>
<button onclick="makeRed();">Make Text Red</button>

function makeRed() {
	$("sale").style.color = "red";
}

• $ function returns the DOM object for an element with a given id
  • $ is actually short for the command document.getElementById

More about the $ function

function $(id) {
	return document.getElementById(id);
}

• the document.getElementById function returns the DOM object for an element with a given id
  • $("foo") === document.getElementById("foo")
  • document is one of several useful global JS objects we'll see later
• $ is not part of standard JavaScript, but we'll have it in our programs
  • it makes our DOM code much more readable and saves you typing
  • many JavaScript libraries define a $ function for convenience
    • later in this course, we'll use a library named Prototype

Manipulating DOM objects

<input id="username" type="text" size="12" />
<button onclick="capitalize();">Capitalize It!</button>

function capitalize() {
	$("username").value = $("username").value.toUpperCase();
}

• you can get/set most attributes from the XHTML via the DOM object
  • $("username").type is "text"
  • $("username").size is 12
  • $("username").value is whatever value the user has typed
    • value exists in most XHTML UI controls (textarea, select, ...)

More DOM object properties

<div id="main" class="foo bar">
	<p>Hello, <em>very</em> happy to see you!</p>
</div>

• tagName: the HTML tag of this element, capitalized
  • $("main").tagName is "DIV"
• className: the CSS class(es) of this element, if any
  • $("main").className is "foo bar"
• innerHTML: the HTML text content inside this element
  • $("main").innerHTML is
    "\n  <p>Hello, <em>very</em> happy to see you!</p>\n"

DOM style property

<button id="clickme" onclick="enlarge();">
Make me big!</button>

function enlarge() {
	$("clickme").style.fontSize = "42pt";
}

• style property represents the combined CSS styles on this element
• contains identical properties to those set in CSS, but with namesLikeThis instead of names-like-this
  • examples: backgroundColor, borderLeftWidth, fontFamily

Common DOM styling errors

• many students forget to write .style when setting styles

  $("somediv").color = "red";
  $("somediv").style.color = "red";
  

  • our JSLint checker will catch this mistake
• style properties are likeThis, not like-this

  $("somediv").style.font-size = "14pt";
  $("somediv").style.fontSize = "14pt";
  

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

  $("somediv").style.width = 200;
  $("somediv").style.width = "200px";
  $("somediv").style.padding = "0.5em";
  

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

Timer concepts

• timer: executes an action after a delay, or repeatedly at given intervals
• JavaScript's implementation of timers:
  • setTimeout, setInterval, clearTimeout, clearInterval functions
  • an event handler function and a delay (ms) are passed as parameters to the above functions
  • the function is called after the delay

Timer functions

• setTimeout(function, delay, [param1, param2, ...]);
  arranges to call the given function after the given delay in ms, optionally passing it the parameters provided
• setInterval(function, delay, [param1, param2, ...]);
  arranges to call the given function repeatedly, once every delay ms
  • both setTimeout and setInterval return an object representing the timer
• clearTimeout(timer);
clearInterval(timer);
  stops the given timer object so it will not call its function any more

setTimeout example

function delayMsg() {
	setTimeout(booyah, 5000);
}
function booyah() {   // called when the timer goes off
	alert("Booyah!");
}

<button onclick="delayMsg();">Click me!</button>

• setTimeout returns instantly; delayMsg does not wait for the 5 sec to elapse

setInterval example

function repeatedMessage() {
	setInterval(rudyRudy, 1000);
}
function rudyRudy() {
	alert("Rudy!");
}

<button onclick="repeatedMessage();">Click me!</button>

• you may not actually want to click the button ...

Clearing a timer

var timer;
function repeatedMessage() {
	timer = setInterval(rudyRudy, 1000);
}
function rudyRudy() {
	alert("Rudy!");
}
function cancel() {
	clearInterval(timer);
}

<button onclick="repeatedMessage();">Rudy chant</button>
<button onclick="cancel();">Make it stop!</button>

• setInterval returns an object representing the timer
  • can be stored in a global variable
• to cancel the timer, call clearInterval and pass the timer object

Passing parameters to timers

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

<button onclick="delayedMultiply();">Click me</button>

• any parameters after the delay are passed to the timer function
  • (doesn't work in IE6)

Common timer errors

• many students mistakenly write () when passing the function

  setTimeout(booyah(), 2000);
  setTimeout(booyah, 2000);
  

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

Alternate timer syntax, as a String

function delayedMultiply() {
	var myTimer = setTimeout("multiply(6 * 7);", 2000);
}
function multiply(a, b) {
	alert(a * b);
}

<button onclick="delayedMultiply();">Click me!</button>

• the function to call can also be enclosed in a String
• with that syntax, you do put the () and ; after the call
• this syntax is discouraged (bad style), but it's the only way to get a working timer in IE6