Web Programming Step by Step

Lecture 14
Unobtrusive JavaScript and Timers

Reading: 7.2 - 7.3; 8.1 - 8.2; 9.2.6

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

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

Unobtrusive JavaScript (8.1.1)

JavaScript event code seen previously was obtrusive, in the HTML; this is bad style
now we'll see how to write unobtrusive JavaScript code
- HTML with minimal JavaScript inside
- uses the DOM to attach and execute all JavaScript functions
allows separation of web site into 3 major categories:
- content (HTML) - what is it?
- presentation (CSS) - how does it look?
- behavior (JavaScript) - how does it respond to user interaction?

Obtrusive event handlers (bad)

<button onclick="okayClick();">OK</button>

// called when OK button is clicked
function okayClick() {
	alert("booyah");
}

this is bad style (HTML is cluttered with JS code)
goal: remove all JavaScript code from the HTML body

Attaching an event handler in JavaScript code

// where element is a DOM element object
element.event = function;

<button id="ok">OK</button>

$("ok").onclick = okayClick;

it is legal to attach event handlers to elements' DOM objects in your JavaScript code
- notice that you do not put parentheses after the function's name
this is better style than attaching them in the HTML
Where should we put the above code?

When does my code run?

	<head>
		<script src="myfile.js" type="text/javascript"></script>
	</head>

	<body> ... </body>

// global code
var x = 3;
function f(n) { return n + 1; }
function g(n) { return n - 1; }
x = f(x);

your file's JS code runs the moment the browser loads the script tag
- any variables are declared immediately
- any functions are declared but not called, unless your global code explicitly calls them
at this point in time, the browser has not yet read your page's body
- none of the DOM objects for tags on the page have been created yet

A failed attempt at being unobtrusive

	<head>
		<script src="myfile.js" type="text/javascript"></script>
	</head>

	<body>
		<div><button id="ok">OK</button></div>

// global code
$("ok").onclick = okayClick;   // error: $("ok") is null

problem: global JS code runs the moment the script is loaded
script in head is processed before page's body has loaded
- no elements are available yet or can be accessed yet via the DOM
we need a way to attach the handler after the page has loaded...

The `window.onload` event (8.1.1)

// this will run once the page has finished loading
function functionName() {
	element.event = functionName;
	element.event = functionName;
	...
}

window.onload = functionName;   // global code

we want to attach our event handlers right after the page is done loading

there is a global event called window.onload event that occurs at that moment

in window.onload handler we attach all the other handlers to run when events occur

An unobtrusive event handler

<!-- look Ma, no JavaScript! -->
<button id="ok">OK</button>

// called when page loads; sets up event handlers
function pageLoad() {
	$("ok").onclick = okayClick;
}

function okayClick() {
	alert("booyah");
}

window.onload = pageLoad;  // global code

Common unobtrusive JS errors

many students mistakenly write () when attaching the handler

window.onload = pageLoad();
window.onload = pageLoad;

okButton.onclick = okayClick();
okButton.onclick = okayClick;

our JSLint checker will catch this mistake

event names are all lowercase, not capitalized like most variables
```
window.onLoad = pageLoad;
window.onload = pageLoad;
```

Anonymous functions (8.1.2)

function(parameters) {
	statements;
}

JavaScript allows you to declare anonymous functions
quickly creates a function without giving it a name
can be stored as a variable, attached as an event handler, etc.

Anonymous function example

window.onload = function() {
	var okButton = document.getElementById("ok");
	okButton.onclick = okayClick;
};

function okayClick() {
	alert("booyah");
}

or the following is also legal (though harder to read and bad style):

window.onload = function() {
	var okButton = document.getElementById("ok");
	okButton.onclick = function() {
		alert("booyah");
	};
};

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

Timer events (9.2.6)

method	description
`setTimeout(function, delayMS);`	arranges to call given function after given delay in ms
`setInterval(function, delayMS);`	arranges to call function repeatedly every `delayMS` ms
`clearTimeout(timerID);` `clearInterval(timerID);`	stops the given timer so it will not call its function

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

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

Web Programming Step by Step, Lecture 14

Unobtrusive JavaScript and Timers

Web Programming Step by Step

Lecture 14 Unobtrusive JavaScript and Timers

Reading: 7.2 - 7.3; 8.1 - 8.2; 9.2.6

Problems with JavaScript

Prototype framework

The $ function (9.1.3)

Unobtrusive JavaScript (8.1.1)

Obtrusive event handlers (bad)

Attaching an event handler in JavaScript code

When does my code run?

A failed attempt at being unobtrusive

The window.onload event (8.1.1)

An unobtrusive event handler

Common unobtrusive JS errors

Anonymous functions (8.1.2)

Anonymous function example

Unobtrusive styling (8.2.3)

Timer events (9.2.6)

setTimeout example

setInterval example

Passing parameters to timers

Common timer errors

Lecture 14
Unobtrusive JavaScript and Timers

The `$` function (9.1.3)

The `window.onload` event (8.1.1)

`setTimeout` example

`setInterval` example