Web Programming Step by Step

Lecture 12
DOM and Timers

Reading: 7.2 - 7.3; 8.2; 9.1; 9.2.6

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

Document Object Model (DOM) (7.1.4)

a set of JavaScript objects that represent each element on the page

• most JS code manipulates elements on an HTML page
• we can examine elements' state
  • e.g. see whether a box is checked
• we can change state
  • e.g. insert some new text into a div
• we can change styles
  • e.g. make a paragraph red

DOM element objects (7.2.5)

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

Accessing elements: document.getElementById

var name = document.getElementById("id");

<img id="doctor" src="tenth_doctor.jpg"
  alt="The Doctor" /> <br/>
<button onclick="regenerate();">
  Regenerate!
</button>

function regenerate() {
	var img = document.getElementById("doctor");
	img.src = "eleventh_doctor.jpg";
}

Regenerate!

• document.getElementById returns the DOM object for an element with a given id
• can modify properties of the element to change content on screen

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>

DOM properties for form controls

<input id="sid" type="text" size="7" maxlength="7" />
<input id="frosh" type="checkbox" checked="checked" /> Freshman?

Modifying text content: value vs. innerHTML (8.2.1)

<p id="welcome">Go away, you're not welcome here.</p>

var paragraph = document.getElementById("welcome");
// change text inside an opening and closing tag
paragraph.innerHTML = "Welcome to our site!";

<input type="text" id="username" value="stepp" />

var textbox = document.getElementById("username");
// change text inside text box
textbox.value = "mdoocy";

Two ways to set the text of an element, depending on its type:

• innerHTML : set text between opening and closing tags (most regular elements)
• value : set text inside a text box (form control)
  • for form elements in general, sets the value that will be submitted for that element
  • on textareas (which have opening and closing tags), only value works as expected in all browsers

More advanced example

<button onclick="swapText();">Click me!</button>
<span id="output2">Hello</span>
<input id="textbox2" type="text" value="Goodbye" />

function swapText() {
	var span = document.getElementById("output2");
	var textBox = document.getElementById("textbox2");
	var temp = span.innerHTML;
	span.innerHTML = textBox.value;
	textBox.value = temp;
}

• can change the text inside most elements by setting the innerHTML property
• for form controls, value must be used instead

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

• 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

Unobtrusive styling (8.2.3)

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

Problems with JavaScript

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

• the DOM can be clunky to use
• the same code doesn't always work the same way in every browser
  • code that works great in Firefox, Safari, ... will fail in IE and vice versa
• many developers work around these problems with hacks (checking if browser is IE, etc.)

Prototype framework (9.1.1)

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

• the Prototype JavaScript library adds many useful features to JavaScript:
  • many useful extensions to the DOM
  • added methods to String, Array, Date, Number, Object
  • improves event-driven programming
  • many cross-browser compatibility fixes
  • makes Ajax programming easier (seen later)

The $ function (9.1.3)

$("id")

• returns the DOM object representing the element with the given id
• short for document.getElementById("id")
• often used to write more concise DOM code:

  $("footer").innerHTML = $("username").value.toUpperCase();
  

Timer functions (9.2.6)

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

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

setInterval example

<button onclick="delayMsg2();">Click me!</button>
<span id="output2"></span>

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
	$("output2").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!