Web Programming Step by Step, 2nd Edition

Lecture TBD: DOM, jQuery

Reading: Chapter 9

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.

for each loop

var things = ['a', 'b', 'c', 'd', 'e'];

for (idx in things) {
	console.log(idx + ', ' + things[idx]);
}

0, a
1, b
2, c
3, d
4, e
		

functions as first-class citizens

• functions can be variables

  var myfunc = function(a, x) {
  	return a * b;
  };
  var x = myfunc(2, 3);					// 6
  

• functions can be parameters

  function apply(a, b, f) {
  	return f(a, b);
  }
  var x = apply(2, 3, myfunc);		// 6
  

• functions can be return values

  function getAlert(str) {
  	return function() {
  		alert(str);
  	}
  }
  var myAlertFunc = getAlert("What's up!");
  

javascript scope

• has the same 2 scopes as PHP, global scope and function scope
• but it gets interesting when functions are first class citizens

function getAlert(str) {
	var prefix = "Roy: ";
	return function() {
		alert(prefix + str);
	}
}
var myAlertFunc = getAlert("What's up!");
myAlertFunc();						// "Roy: What's up!"

objects literals

• objects in javascript are more like associative arrays
• the keys can be any string
• you do not need quotes if the key is a valid javascript identifier
• values can be anything, including functions
• you can add keys dynamically using associative array or the . syntax

var x = {
	'a': 97,
	'b': 98,
	'c': 99,
	'd': 199,
	'mult': function(a, b) {
		return a * b;
	}
};

for each over object literal

var things = {'a': 97, 'b': 98, 'c': 99 };
for (key in things) {
	console.log(key + ', ' + things[key]);
}

a, 97
b, 98
c, 99
		

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
• Use this image and link on your webster pages:
  

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 Chrome, Firefox, Safari, ... will fail in IE and vice versa
• many developers work around these problems with hacks (checking if browser is IE, etc.)

jQuery framework

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
 type="text/javascript"></script>

• the jQuery JavaScript library adds many useful features to JavaScript:
  • many useful extensions to the DOM
  • adds utility functions for built-in types String, Array, Object, Function
  • improves event-driven programming
  • many cross-browser compatibility fixes
  • makes Ajax programming easier (seen later)

jQuery Design Principles

jQuery is so powerful in part because of these design principles

• an expressive method for defining a set of elements, a superset of CSS selectors
• useful and commonly needed methods for navigating the DOM tree
• heavily overloaded APIs
• functional programmig techniques that apply operations to sets of elements at a time
• method chaining for succinct operations

window.onload

We cannot use the DOM before the page has been constructed. jQuery gives us a more compatibile way to do this.

• The DOM way

  window.onload = function() {
  	// do stuff with the DOM
  }
  

• The direct jQuery translation

  $(document).ready(function() {
  	// do stuff with the DOM
  });
  

• The jQuery way

  $(function() {
  	// do stuff with the DOM
  });
  

Aspects of the DOM and jQuery

• Identification: how do I obtain a reference to the node that I want.
• Traversal: how do I move around the DOM tree.
• Node Manipulation: how do I get or set aspects of a DOM node.
• Tree Manipulation: how do I change the structure of the page.

The DOM tree

• The elements of a page are nested into a tree-like structure of objects
  • half of the challenge is singling out elements that you want

Selecting groups of DOM objects

• methods in document and other DOM objects (* = HTML5):

Getting all elements of a certain type

highlight all paragraphs in the document:

var allParas = document.querySelectorAll("p");
for (var i = 0; i < allParas.length; i++) {
	allParas[i].style.backgroundColor = "yellow";
}

<body>
	<p>This is the first paragraph</p>
	<p>This is the second paragraph</p>
	<p>You get the idea...</p>
</body>

Complex selectors

highlight all paragraphs inside of the section with ID "address":

var addrParas = document.querySelectorAll("#address p");
for (var i = 0; i < addrParas.length; i++) {
	addrParas[i].style.backgroundColor = "yellow";
}

<p>This won't be returned!</p>
<div id="address">
	<p>1234 Street</p>
	<p>Atlanta, GA</p>
</div>

Ploblems with DOM API

// identifying a single elemnt
var list = document.getElementById("mylist");

// identifying a group of elements
var specials = document.querySelectorAll("li.special");

• Not always implemented the same way in all browsers.
• Way too verbose considering the DOM is the main thing we play with.
• Why are there 5+ methods to identify elements that all behave differently and take different kinds of parameters?

jQuery node identification

The $ aka jQuery function selects elements from the DOM using most any CSS selector.

• // id selector
  var elem = $("#myid");
  

• // group selector
  var elems = $("#myid, p");
  

• // context selector
  var elems = $("#myid < div p");
  

• // complex selector
  var elems = $("#myid < h1.special:not(.classy)");
  

jQuery Selectors

jQuery / DOM comparison

jQuery Terminology

the jQuery function

refers to the global jQuery object or the $ function depending on the context

a jQuery object

the object returned by the jQuery function that often represents a group of elements

selected elements

the DOM elements that you have selected for, most likely by some CSS selector passed to the jQuery function and possibly later filtered further

The jQuery object

• The $ function always (even for ID selectors) returns an array-like object called a jQuery object.
• The jQuery object wraps the originally selected DOM objects.
• You can access the actual DOM object by accessing the elements of the jQuery object.

// false
document.getElementById("id") == $("#myid");
document.querySelectorAll("p") == $("p");

// true
document.getElementById("id") == $("#myid")[0];
document.getElementById("id") == $("#myid").get(0);

document.querySelectorAll("p")[0] == $("p")[0];

Using $ as a wrapper

• $ adds extra functionality to DOM elements
• passing an existing DOM object to $ will give it the jQuery upgrade

// convert regular DOM objects to a jQuery object
var elem = document.getElementById("myelem");
elem = $(elem);

var elems = document.querySelectorAll(".special");
elems = $(elems);

DOM context identification

• You can use querySelectorAll() and querySelector() on any DOM object.
• When you do this, it simply searches from that part of the DOM tree downward.
• Programmatic equivalent of a CSS context selector

var list = document.getElementsByTagName("ul")[0];
var specials = list.querySelectorAll('li.special');

find / context parameter

jQuery gives two identical ways to do contextual element identification

var elem = $("#myid");

// These are identical
var specials = $("li.special", elem);
var specials = elem.find("li.special");

Types of DOM nodes

<p>
	This is a paragraph of text with a
	<a href="/path/page.html">link in it</a>.
</p>

• element nodes (HTML tag)
  • can have children and/or attributes
• text nodes (text in a block element)
• attribute nodes (attribute/value pair)
  • text/attributes are children in an element node
  • cannot have children or attributes
  • not usually shown when drawing the DOM tree

Traversing the DOM tree

every node's DOM object has the following properties:

• complete list of DOM node properties
• browser incompatiblity information (IE6 sucks)

DOM tree traversal example

<p id="foo">This is a paragraph of text with a
	<a href="/path/to/another/page.html">link</a>.</p>

Element vs. text nodes

<div>
	<p>
		This is a paragraph of text with a
		<a href="page.html">link</a>.
	</p>
</div>

• Q: How many children does the div above have?
• A: 3
  • an element node representing the <p>
  • two text nodes representing "\n\t" (before/after the paragraph)
• Q: How many children does the paragraph have? The a tag?
• The paragraph has 3. The anchor has 1.

jQuery traversal methods

Looping over the DOM

• Using the DOM

var elems = document.querySelectorAll("li");
for (var i = 0; i < elems.length; i++) {
	var e = elems[i];
	// do stuff with e
}

• Using jQuery

  $("li").each(function(idx, e) {
  	// do stuff with e
  });
  

• You cannot use a regular javascript for each loop on either because they are not technically arrays, just array-like objects.

Inside the jQuery each loop

$("li").each(function(idx, e) {
	// do stuff with e
});

• return false to exit the loop early
• e is a plain old DOM object
  • We can upgrade it again using $ if we want

$("li").each(function(idx, e) {
	e = $(e);
	// do stuff with e
});

• the this keyword refers to the same selected element as e, so this is better jQuery

$("li").each(function() {
	// do stuff with this
});

Modifying DOM nodes

DOM nodes have fields that correspond to the attributes in HTML tags. There are a few exceptions

Getting/setting CSS classes

function highlightField() {
	// turn text yellow and make it bigger
	var elem = document.getElementById("id");
	if (!elem.className) {
		elem.className = "highlight";
	} else if (elem.className.indexOf("invalid") < 0) {
		elem.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
• className is just a string, not an array like we would want

Getting/setting CSS classes in jQuery

function highlightField() {
	// turn text yellow and make it bigger
	if (!$("#myid").hasClass("invalid")) {
		$("#myid").addClass("highlight");
	}
}

• addClass, removeClass, hasClass, toggleClass manipulate CSS classes
• similar to existing className DOM property, but don't have to manually split by spaces

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

Problems with reading/changing styles

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

window.onload = function() {
	document.getElementById("#clickme").onclick = biggerFont;
};
function biggerFont() {
	var size = parseInt(document.getElementById("#clickme").style.fontSize);
	size += 4;
	document.getElementById("#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 jQuery

function biggerFont() {
	// turn text yellow and make it bigger
	var size = parseInt($("#clickme").css("font-size"));
	$("#clickme").css("font-size", size + 4 + "pt");
}

• css function of the jQuery object allows reading pre-existing styles
• gives us the familiar font-size syntax instead of fontSize
• css(property) gets the property value, css(property, value) sets the property value

Common bug: incorrect usage of existing styles

// bad!
$("#main").css("top", $("#main").css("top") + 100 + "px");

• the above example computes e.g. "200px" + 100 + "px" ,
  which would evaluate to "200px100px"
• a corrected version:

  // correct
  $("#main").css("top", parseInt($("#main").css("top"))  + 100 + "px");
  

Unobtrusive styling

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

jQuery method behavior

• Getters typically operate only on the first of the jQuery object's selected elements.

  <ul>
  	<li style="font-size: 10px">10px font size</li>
  	<li style="font-size: 20px">20px font size</li>
  	<li style="font-size: 30px">30px font size</li>
  </ul>
  

  $("li").css("font-size");							// returns '10px'
  

• Setters typically operate on all of the selected DOM elements.

  $("li").css("font-size", "15px");			// sets all selected elements to '8px'
  

  <ul>
  	<li style="font-size: 15px">10px font size</li>
  	<li style="font-size: 15px">20px font size</li>
  	<li style="font-size: 15px">30px font size</li>
  </ul>
  

jQuery method parameters

Many jQuery object methods are overloaded

getter syntax:

$("#myid").css(propertyName);

setter syntax:

$("#myid").css(propertyName, value);

multi-setter syntax:

$("#myid").css({
	'propertyName1': value1,
	'propertyName2': value2,
	...
	});

modifier syntax:

$("#myid").css(propertyName, function(idx, oldValue) {
	return newValue;
});

What do you think the multi-modifier syntax is?

common jQuery mistake

// bad jQuery
$("#main").css("top", parseInt($("#main").css("top")) + 100 + "px");

• The above example does not take full advantage of jQuery syntax.
• Does not work if there are multiple selected objects. Why is that?
• a corrected version:

  $("#main").css("top", function(idx, old) {
  	return parseInt(old) + 100 + "px";
  });  // good jQuery
  

jQuery method returns

When there is no other return to make, jQuery methods return the same jQuery object back to you

jQuery chaining

$("#main").css("color", "red");
$("#main").attr("id", "themainarea");
$("#main").addClass("special");

The implictly returned jQuery object allows for chaining of method calls.

$("img")
	.css("color", "red")
	.addClass("special")
	.src = "foo.png";

Expression return value at each line:

// [<img />, ...]
// [<img style="color: red" />, ...]
// [<img class="special" style="color: red" />, ...]
// cannot chain further because this is an assignment :(

jQuery attr() function

• jQuery has a wrapper function for getting/setting various attributes of selected elements.
• Allows us to chain our method calls.

$("img")				// poor jQuery style
	.css("color", "red")
	.addClass("special")
	.src = "foo.png";

$("img")				// good jQuery style
	.css("color", "red")
	.addClass("special")
	.attr("src", "foo.png");
	// we could chain further right here

More node manipulation with jQuery

Suppose you already have a jQuery object, e.g. $("#myid")

DOM innerHTML hacking

Why not just code the previous example this way?

document.getElementById("myid").innerHTML += "<p>A paragraph!</p>";

document.getElementById("myid").innerHTML += "<p style='color: red; " +
		"margin-left: 50px;' " +
		"onclick='myOnClick();'>" +
		"A paragraph!</p>";

Creating new nodes

// create a new <h2> node
var newHeading = document.createElement("h2");
newHeading.innerHTML = "This is a heading";
newHeading.style.color = "green";

• merely creating a element does not add it to the page
• you must add the new element as a child of an existing element on the page...

Modifying the DOM tree

Every DOM element object has these methods:

var p = document.createElement("p");
p.innerHTML = "A paragraph!";
document.getElementById("myid").appendChild(p);

Removing a node from the page

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

• each DOM object has a removeChild method to remove the given child from the page
• gross!!!

jQuery manipulation methods

Create nodes in jQuery

The $ function to the rescue again

var newElement = $("<div>");
$("#myid").append(newElement);

jQuery programmers typically 1 line it

$("#myid").append($("<div>"));

The previous example becomes this with jQuery

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

$("li:contains('child')").remove();

Creating complex nodes in jQuery

The terrible way, this is no better than innerHTML hacking

$("<p id='myid' class='special'>My paragraph is awesome!</p>")

The bad way, decent jQuery, but we can do better

$("<p>")
	.attr("id", "myid")
	.addClass("special")
	.text("My paragraph is awesome!");

The good way

$("<p>", {
	"id": "myid",
	"class": "special",
	"text": "My paragraph is awesome!"
});

jQuery $ function signatures

Responding to the page ready event

$(function);

Identifying elements

$("selector", [context]);

Upgrading DOM elements

$(elements);

Creating new elements

$("<html>", [properties]);

DOM example

Here is what it might look like if you tried to insert an image before each special span tag in a div using the DOM's API.

var spans = document.querySelectorAll("#ex1 span.special");
for (var i = 0; i < spans.length; i++) {
	var img = document.createElement("img");
	img.src = "images/laughing_man.jpg";
	img.alt = "laughing man";
	img.style.verticalAlign = "middle";
	img.style.border = "2px solid black";
	img.onclick = function() {
		alert("clicked");
	}
	spans[i].insertBefore(img, spans[i].firstChild);
}

Poor jQuery example

$("#ex2 span.special").each(function(i, elem) {
	var img = $("<img>")
		.attr("src", "images/laughing_man.jpg")
		.attr("alt", "laughing man")
		.css("vertical-align", "middle")
		.css("border", "2px solid black")
		.click(function() {
			alert("clicked");
		});
	$(elem).prepend(img);
});

Good jQuery example

$("#ex3 span.special").prepend($("<img>", {
	"src": "images/laughing_man.jpg",
	"alt": "laughing man",
	"css": {
		"vertical-align": "middle",
		"border": "2px solid black"
	},
	"click": function() {
		alert("clicked");
	}
}));