CSSE 290 Web Programming

Lecture 16: Unobtrusive JavaScript, Timer Events, Prototype Brief Intro

Reading: 10.1

Attribution: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.

Otherwise noted: Claude Anderson was given permission to modify the slides for CSSE 290 at Rose-Hulman by author Jessica Miller. The authors' original slides, based on Web Programming Step by Step, can be seen at http://webstepbook.com.
Some of the examples in some days' slides are from David Fisher at Rose-Hulman, who was kind enough to allow me to use them. My intention is to mark these examples with [DSF].

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

Unobtrusive JavaScript

JavaScript event code we saw before we did 15-puzzle was obtrusive, event handlers were set in the HTML; this is bad style
In 15-puzzle, we saw an example of 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?
Most ideas from the next few slides came out during the 15-puzzle discussion.
The slides are here as a review, a written form of what we said and did.
We will not discuss them in class, except to answer your questions.

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 Event Handler in JavaScript

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

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

var okButton = document.getElementById("ok");
okButton.onclick = okayClick;

It is legal to attach event handlers to DOM objects in 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?

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

// 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
- Variables are initialized immediately
- 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

<html>
	<head>
		<script src="myfile.js" type="text/javascript"></script>
	</head>
	<body>
		<div><button id="ok">OK</button></div>

// global code
document.getElementById("ok").onclick = okayClick;   // error: 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

// 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

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

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

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

window.onload = pageLoad;  // global code

Common unobtrusive JS errors

We could mistakenly write () when attaching the handler

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

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

UWJSLint checker will catch this mistake

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

Popup boxes

alert("message");     // message
confirm("message");   // returns true or false
prompt("message");    // returns user input string

Events and Timers

11.1: Event-Handling
- 11.1.1 The Event Object
- 11.1.2 Mouse Events
- 11.1.3 Keyboard and Text Events
- 11.1.4 Form Events
- 11.1.5 Page Events
- 11.1.6 Timer Events
11.2: Case Study: Multiplication Quiz

JavaScript events

`abort`	`blur`	`change`	`click`	`dblclick`	`error`	`focus`
`keydown`	`keypress`	`keyup`	`load`	`mousedown`	`mousemove`	`mouseout`
`mouseover`	`mouseup`	`reset`	`resize`	`select`	`submit`	`unload`

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

Timer events

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

10.1: The Prototype Library

10.1: Prototype
10.2: Scriptaculous

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.)
Many JavaScript libraries have been developed to ameliorate this problem.
We briefly examine three libraries: Prototype, Sctiptaculous, jQuery
Today: A little Prototype, then an in-class exercise.

Prototype framework

<script src="../scripts/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 built-in types String, Array, Date, Number, Object
- improves event-driven programming
- many cross-browser compatibility fixes
- makes Ajax programming easier (we'll briefly look at this later)
- main Prototype documentation page.
Put the above script element before the one that links to your own JavaScript code.

The `$` function

$("id")

Returns the DOM object representing the element with the given id
Short for document.getElementById("id")
The DOM element it returns is extended to include additional properties and methods not in the object returned by getElementByID

Often used to write more concise DOM code:

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

Recap: The DOM Tree

The elements of a page are nested into a tree-like structure of objects
- The DOM has properties and methods for traversing this tree

Prototype's DOM Element Methods

Categories: CSS classes, DOM tree traversal/manipulation, events, styles

Prototype's DOM tree traversal methods

method(s)	description
`ancestors`, `up`	elements above this one
`childElements`, `descendants`, `down`	elements below this one (not text nodes)
`siblings`, `next`, `nextSiblings`, `previous`, `previousSiblings`, `adjacent`	elements with same parent as this one (not text nodes)

// alter siblings of "main" that do not contain "Sun"
var sibs = $("main").siblings();
for (var i = 0; i < sibs.length; i++) {
	if (sibs[i].innerHTML.indexOf("Sun") < 0) {
		sibs[i].innerHTML += " Sunshine";
	}
}

Prototype's Methods for Selecting Elements

Prototype adds methods to document (and all DOM elements) for selecting groups of elements:

`getElementsByClassName`	array of elements that use given `class` attribute
`select`	array of descendants that match given CSS selector, such as `"div#sidebar ul.news > li"` (identical to `querySelectorAll` on the element)
`$$`	Equivalent to `document.querySelectorAll`

var gameButtons = $("game").select("button.control");
for (var i = 0; i < gameButtons.length; i++) {
	gameButtons[i].style.color = "yellow";
}

The `$$` function

var arrayName = $$("CSS selector");

// hide all "announcement" paragraphs in the "news" section
var paragraphs = $$("div#news p.announcement");
for (var i = 0; i < paragraphs.length; i++) {
	paragraphs[i].hide();
}

$$ Returns an array of DOM elements that match the given CSS selector
- Lke $ but returns an array instead of a single DOM object
- A shorthand for document.select
Useful for applying an operation each one of a set of elements

Common `$$` Issues

Many students forget to write . or # in front of a class or id

// get all buttons with a class of "control"
var gameButtons = $$("control");
var gameButtons = $$(".control");

$$ returns an array, not a single element; must loop over the results

// set all buttons with a class of "control" to have red text
$$(".control").style.color = "red";
var gameButtons = $$(".control");
for (var i = 0; i < gameButtons.length; i++) {
	gameButtons[i].style.color = "red";
}

Q: Can I still select a group of elements using $$ even if my CSS file doesn't have any style rule for that same group? (A: Yes!)

Recap: JavaScript - Remove a Node from the Page

function slideClick() {
	var bullets = document.getElementsByTagName("li");
	for (var i = 0; i < bullets.length; i++) {
		if (bullets[i].innerHTML.indexOf("children") >= 0) {
			bullets[i].parentNode.removeChild(bullets[i]);
		}
	}
}

Each DOM object has a removeChild method to remove any of its children from the page
Cannot remove a node directly (but you can in Prototype ...)

Prototype: Remove a Node from the Page

function slideClick() {
	var bullets = $$("li");
	for (var i = 0; i < bullets.length; i++) {
		if (bullets[i].innerHTML.indexOf("children") >= 0) {
			bullets[i].remove();
		}
	}
}

Each DOM object has a removeChild method to remove its children from the page
Prototype's $$ adds the remove method to elements it returns
More on Protpotype next time (some of it is in later slides here). Today I want to make sure that you have a lot of time for the SearchHighlighter exercise.

in-class exercise (today and next week)

Pair-program this with your partner (do it on one computer)

Click a word, and all occurrences of that word get highlighted

I have provided a PHP file that delives the text. Read and discuss it together, but you should not have to change it.

DOM versus `innerHTML` hacking

Why not just code the previous example this way?

function slideClick() {
	$("thisslide").innerHTML += "<p>A paragraph!</p>";
}

Imagine that the new node is more complex:
- ugly: bad style on many levels (e.g. JS code embedded within HTML)
- error-prone: must carefully distinguish " and '
- can only add at beginning or end, not in middle of child list

function slideClick() {
	$("main").innerHTML += "<p style='color: red; " +
			"margin-left: 50px;' " +
			"onclick='myOnClick();'>" +
			"A paragraph!</p>";
}

Benefits of DOM over `innerHTML`

function slideClick() {
	var p = document.createElement("p");
	p.className = "special";
	p.onclick = myOnClick;
	p.innerHTML = "A paragraph!";
	$("thisslide").appendChild(p);
}

.special {
	color: red;
	margin-left: 50px;
}

cleaner to attach event handlers to DOM object
cleaner to set styles by attaching classes to DOM objects

Problems with reading/changing styles

<button id="clickme">Click Me</button>

window.onload = function() {
	$("clickme").onclick = biggerFont;
};
function biggerFont() {
	var size = parseInt($("clickme").style.fontSize);
	size += 4;
	$("clickMe").style.fontSize = size + "pt";
}

style property lets you set any CSS style for an element
problem: you cannot (usually) read existing styles with it

Accessing styles in Prototype

function biggerFont() {
	// make the text bigger
	var size = parseInt($("clickme").getStyle("font-size"));
	$("clickme").style.fontSize = (size + 4) + "pt";
}

getStyle method (added to each DOM object by Prototype) allows accessing existing styles

Common bug: incorrect usage of existing styles

$("main").style.top = $("main").getStyle("top") + 100 + "px";            // bad!

the above example computes e.g. "200px" + 100 + "px" ,
which would evaluate to "200px100px"

a corrected version:

$("main").style.top = parseInt($("main").getStyle("top")) + 100 + "px";  // correct

JavaScript: Getting/setting CSS classes

function highlightField() {
	// turn text yellow and make it bigger
	if (!$("text").className) {
		$("text").className = "highlight";
	} else if ($("text").className.indexOf("invalid") < 0) {
		$("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

Getting/setting CSS classes in Prototype

function highlightField() {
	// turn text yellow and make it bigger
	if (!$("text").hasClassName("invalid")) {
		$("text").addClassName("highlight");
	}
}

addClassName, removeClassName, toggleClassName, hasClassName manipulate CSS classes
similar to existing className DOM property, but don't have to manually split by spaces
JavaScript's classList property, allows similar manipulations, but is clunkier.

`absolutize`	`addClassName`	`classNames`	`cleanWhitespace`	`clonePosition`
`cumulativeOffset`	`cumulativeScrollOffset`	`empty`	`extend`	`firstDescendant`
`getDimensions`	`getHeight`	`getOffsetParent`	`getStyle`	`getWidth`
`hasClassName`	`hide`	`identify`	`insert`	`inspect`
`makeClipping`	`makePositioned`	`match`	`positionedOffset`	`readAttribute`
`recursivelyCollect`	`relativize`	`remove`	`removeClassName`	`replace`
`scrollTo`	`select`	`setOpacity`	`setStyle`	`show`
`toggle`	`toggleClassName`	`undoClipping`	`undoPositioned`	`update`
`viewportOffset`	`visible`	`wrap`	`writeAttribute`

CSSE 290 Web Programming

Session 16: Unobtrusive JavaScript, Timer Events, Prototype Brief Intro

CSSE 290 Web Programming

Lecture 16: Unobtrusive JavaScript, Timer Events, Prototype Brief Intro

Reading: 10.1

JSLint

Unobtrusive JavaScript

Obtrusive Event Handlers (bad)

Attaching Event Handler in JavaScript

When does my code run?

A Failed Attempt at Being Unobtrusive

The window.onload event

An unobtrusive event handler

Common unobtrusive JS errors

Popup boxes

Events and Timers

JavaScript events

Timer events

setTimeout example

setInterval example

Passing parameters to timers

Common timer errors

10.1: The Prototype Library

Problems with JavaScript

Prototype framework

The $ function

Recap: The DOM Tree

Prototype's DOM Element Methods

Prototype's DOM tree traversal methods

Prototype's Methods for Selecting Elements

The $$ function

Common $$ Issues

Recap: JavaScript - Remove a Node from the Page

Prototype: Remove a Node from the Page

in-class exercise (today and next week)

DOM versus innerHTML hacking

Benefits of DOM over innerHTML

Problems with reading/changing styles

Accessing styles in Prototype

Common bug: incorrect usage of existing styles

JavaScript: Getting/setting CSS classes

Getting/setting CSS classes in Prototype

The `window.onload` event

`setTimeout` example

`setInterval` example

The `$` function

The `$$` function

Common `$$` Issues

DOM versus `innerHTML` hacking

Benefits of DOM over `innerHTML`