Chapter 6 Murach's JavaScript and jQuery, C6 2012, Mike Murach Associates, Inc.Slide 1.

Chapter 6

Murach's JavaScript and jQuery, C6 © 2012, Mike Murach & Associates, Inc. Slide 1

How to script the DOM with JavaScript

Objectives


Applied 1. Use the properties and methods of the Node, Document, and

Element interfaces in your JavaScript applications. 2. Cancel the default action of an event in a way that is cross-browser

compatible. 3. Preload the images for an application when the images aren’t

automatically loaded with the web page. 4. Use one-time and interval timers in your JavaScript applications. 5. Use JavaScript to develop common DOM scripting applications

like the FAQs, Image Swap, and Slide Show applications that are presented in this chapter.

Objectives (continued)


Knowledge 1. Describe the use of the Document Object Model in JavaScript

applications. 2. Describe these properties of the Node interface for the DOM:

nodeValue, parentNode, childNodes, firstChild, lastChild, and nextElementSibling.

3. Describe these methods of the Document and Element interfaces for the DOM: getElementsByTagName, getElementsByName, and getElementsByClassName.

4. Describe these methods of the Element interface for the DOM: hasAttribute, getAttribute, setAttribute, and removeAttribute.

5. Describe these critical issues for JavaScript applications: usability and accessibility.

Objectives (continued)


Knowledge 6. Describe the use of the event object that’s passed to an event

handler for cancelling the default action of the click event of an <a> element or button.

7. Describe what you have to do to preload an image in a JavaScript application.

8. Describe these timer methods: setTimeout, setInterval, clearTimeout, clearInterval.

The code for a web page


<!DOCTYPE html> <html> <head> <title>Join Email List</title> </head> <body> <h1>Please join our email list</h1> <form id="email_form" name="email_form" action="join.html" method="get"> <label for="email_address">Email Address:</label> <input type="text" id="email_address"> <span id="email_error">*</span><br> </form> </body> </html>

The DOM for the web page


html

bodyhead

title h1 form

text text

text text

label input span

The DOM nodes that you commonly use


Document Element Attr Text

Some of the properties of the Node interface


nodeValue parentNode childNodes firstChild lastChild nextElementSibling

HTML that contains element and text nodes


<body> <h1>Please join our email list</h1> <form id="email_form" name="email_form" action="join.html" method="get"> <label for="email_address">Email Address:</label> <input type="text" id="email_address"> <span id="email_error">*</span><br> <label> </label> <input type="button" id="join_list" value="Join our List"> </form> </body>

How to get the text of an HTML element var errorText = $("email_error").firstChild.nodeValue;

How to set the text of an HTML element $("email_error").firstChild.nodeValue = "Entry is invalid.";

How to set the text for the span tag to an empty string without using its id


$("email_address").nextElementSibling.firstChild.nodeValue = "";

Methods of the Document and Element interfaces


getElementsByTagName(tagName) getElementsByName(name) getElementsByClassName(classNames)

Methods of the Element interface hasAttribute(name) getAttribute(name) setAttribute(name, value) removeAttribute(name)

How to create arrays of elements


How to create an array of all <a> tags var links = document.getElementsByTagName("a");

How to create an array of all li tags within a ul element (image_list) var list = document.getElementById("image_list"); var items = list.getElementsByTagName("li");

How to work with attributes


How to test for and get an attribute var list = document.getElementById("image_list"); if ( list.hasAttribute("class") ) { var classAttribute = list.getAttribute("class")); }

How to set an attribute var image = document.getElementById("div"); image.setAttribute("class", "open");

How to remove an attribute var list = document.getElementById("image_list"); list.removeAttribute("class");

Terms


Document Object Module (DOM) DOM Core Specification interface

The FAQs application in a browser


The HTML for the FAQs application


<section id="faqs"> <h1>jQuery FAQs</h1> <h2 class="plus">What is jQuery?</h2> <div class="closed"> <p>jQuery is a library of the JavaScript functions that you're most likely to need as you develop web sites. </p> </div> <h2 class="plus"> Why is jQuery becoming so popular?</h2> <div class="closed"> <p>Three reasons:</p> <ul> <li>It's free.</li> <li>It lets you get more done in less time.</li> <li>All of its functions cross-browser compatible.</li> </ul> </div>

The HTML for the FAQs application (continued)


<h2 class="plus">Which is harder to learn: jQuery or JavaScript?</h2> <div class="closed"> <p>For most functions, jQuery is significantly easier to learn and use than JavaScript. But remember: jQuery is JavaScript. </p> </div> </section>

The CSS for the FAQs application


h2 { padding: .25em 0 .25em 25px; cursor: pointer; } h2.plus { background: url(images/plus.png) no-repeat left center; } h2.minus { background: url(images/minus.png) no-repeat left center; } div.closed { display: none; } div.open { display: block; }

The JavaScript for the FAQs application


var $ = function (id) { return document.getElementById(id); } window.onload = function () { var faqs = $("faqs"); var h2Elements = faqs.getElementsByTagName("h2"); var h2Node; for (var i = 0; i < h2Elements.length; i++ ) { h2Node = h2Elements[i]; // Attach event handler h2Node.onclick = function () { var h2 = this; // h2 = current h2Node object if (h2.getAttribute("class") == "plus") { h2.setAttribute("class", "minus"); } else { h2.setAttribute("class", "plus"); }

The JavaScript (continued)


if (h2.nextElementSibling.getAttribute( "class") == "closed") { h2.nextElementSibling.setAttribute("class", "open"); } else { h2.nextElementSibling.setAttribute("class", "closed"); } } } }

The HTML for another version of the FAQs app


<section id="faqs"> <h1>jQuery FAQs</h1> <h2>What is jQuery?</h2> <div> // contents </div> <h2>Why is jQuery becoming so popular?</h2> <div> // contents </div> <h2>Which is harder to learn: jQuery or JavaScript?</h2> <div> // contents </div> </section>

The CSS for another version of the FAQs app


h2 { padding: .25em 0 .25em 25px; cursor: pointer; background: url(images/plus.png) no-repeat left center; } h2.minus { background: url(images/minus.png) no-repeat left center; } div { display: none; } div.open { display: inline; }

The JavaScript for attaching the event handlers


// Attach event handler h2Node.onclick = function () { var h2 = this; // h2 is the current h2Node object if (h2.hasAttribute("class")) { h2.removeAttribute("class"); } else { h2.setAttribute("class", "minus"); } if (h2.nextElementSibling.hasAttribute("class")) { h2.nextElementSibling.removeAttribute("class"); } else { h2.nextElementSibling.setAttribute("class", "open"); } }

Navigation guidelines for usability


Underlined text is always a link. A small symbol in front of a text phrase is clickable. Images that are close to short text phrases are clickable. Buttons should look like buttons and should always be clickable.

How the FAQs usability can be improved Highlight the heading when it has the focus or when the mouse

hovers over it.

Guidelines for accessibility


For the visually-impaired All of the essential information should be presented in text that’s easy to read because some users may not be able to read the text that’s in images.

For the motor-impaired All of the essential content and features should be accessible with the keyboard because some users may not be able to use a mouse.

How the FAQs accessibility can be improved


Make the headings links so the user can use the Tab key to move from one to the next.

Move the cursor to the first heading when the page is loaded. Highlight the heading when it has the focus or the mouse is

hovered over it. Let the user activate the click event of a heading by pressing the

Enter key when the heading has the focus.

The FAQs application with improved accessibility


The HTML for improved accessibility


<section id="faqs"> <h1>jQuery FAQs</h1> <h2><a href="#" id="first_link">What is jQuery? </a></h2> <div> ... </div> <h2><a href="#">Why is jQuery becoming so popular? </a></h2> <div> ... </div> <h2><a href="#"> Which is harder to learn: jQuery or JavaScript? </a></h2> <div> ... </div> </section>

The CSS for improved accessibility


a { color: black; text-decoration: none; } a:focus, a:hover { color: blue; }

The JavaScript for improved accessibility


window.onload = function () { var faqs = $("faqs"); var h2Elements = faqs.getElementsByTagName("h2"); var h2Node; for (var i = 0; i < h2Elements.length; i++ ) { h2Node = h2Elements[i]; // Attach event handler h2Node.onclick = function () { var h2 = this; // same code as before } } // move the focus to the first link $("first_link").focus(); }

Common default actions for click events


Tag Default action a Load the page or go to the placeholder in the href attribute. input Submit the form if the type attribute is set to submit. input Reset the form if the type attribute is set to reset. button Submit the form if the type attribute is set to submit. button Reset the form if the type attribute is set to reset.

JavaScript that cancels the default action\


DOM-compliant code var eventHandler = function (evt) { evt.preventDefault(); }

IE code var eventHandler = function () { var evt = window.event; evt.returnValue = false; }

Browser-compatible code that cancels the default action


var eventHandler = function (evt) { // If the event object is not sent, get it if (!evt) { evt = window.event; ) // for IE // Cancel the default action if (evt.preventDefault) { evt.preventDefault(); // for most browsers } else { evt.returnValue = false; // for IE } }

How to create and preload an Image object


How to create an Image object var image = new Image();

How to preload an image in an Image object image.src = "image_name.jpg";

How to preload all images referred to by the href attributes of <a> tags

var links = document.getElementsByTagName("a"); var i, link, image; for ( i = 0; i < links.length; i++ ) { link = links[i]; image = new Image(); image.src = link.href; }

The user interface for the Image Swap application


The HTML for the Image Swap application


<section> <h1>Ram Tap Combined Test</h1> <ul id="image_list"> <li><a href="images/h1.jpg" title="James Allison: 1-1" id="first_link"> <img src="thumbnails/t1.jpg" alt=""></a></li> <li><a href="images/h2.jpg" title="James Allison: 1-2"> <img src="thumbnails/t2.jpg" alt=""></a></li> <li><a href="images/h3.jpg" title="James Allison: 1-3"> <img src="thumbnails/t3.jpg" alt=""></a></li> <li><a href="images/h4.jpg" title="James Allison: 1-4"> <img src="thumbnails/t4.jpg" alt=""></a></li> <li><a href="images/h5.jpg" title="James Allison: 1-5"> <img src="thumbnails/t5.jpg" alt=""></a></li> <li><a href="images/h6.jpg" title="James Allison: 1-6"> <img src="thumbnails/t6.jpg" alt=""></a></li> </ul> <h2 id="caption">James Allison 1-1</h2> <p><img src="images/h1.jpg" alt="" id="image"></p> </section>

The CSS for the li elements of the Image Swap


li { padding-right: 10px; display: inline; }

The JavaScript for the Image Swap application


$ = function (id) { return document.getElementById(id); } window.onload = function () { var listNode = $("image_list"); // the ul element var captionNode = $("caption"); // the h2 element var imageNode = $("image"); // the main img element var imageLinks = listNode.getElementsByTagName("a"); // Process image links var i, linkNode, image; for ( i = 0; i < imageLinks.length; i++ ) { linkNode = imageLinks[i]; // Attach event handler linkNode.onclick = function (evt) { var link = this; // link is the linkNode imageNode.src = link.getAttribute("href"); captionNode.firstChild.nodeValue = link.getAttribute("title");



// Cancel the default action of the event if (!evt) evt = window.event; if ( evt.preventDefault ) { evt.preventDefault(); } else { evt.returnValue = false; } } // Preload image image = new Image(); image.src = linkNode.getAttribute("href"); } $("first_link").focus(); }

The FAQs application with a first heading that is hidden after 5 seconds


The HTML for the heading <h1 id="startup_message">Still under construction!</h1>

The CSS when the class attribute is “closed” #startup_message.closed { display: none; }

Two methods for working with a one-time timer


setTimeout( function, delayTime ) // creates a timer clearTimeout ( timer ) // cancels a timer

The JavaScript that hides the heading // declare a global variable for the timer var timer; // create a timer that calls the hideMessage function window.onload = function () { timer = setTimeout(hideMessage, 5000); } // create the function that the timer calls var hideMessage = function () { $("startup_message").setAttribute("class", "closed"); clearTimeout(timer); }

How to embed the timer function in the first parameter of the setTimeout method


window.onload = function () { var timer = setTimeout( function () { // the start of the first parameter $("startup_message").setAttribute("class", "closed"); clearTimeout(timer); }, 5000); // the second parameter }

The FAQs application with a counter at the bottom


The HTML for the counter <h3>Number of seconds on page: <span> id="counter">0</span> </h3>

Two methods for working with an interval timer


setInterval( function, intervalTime ) clearInterval ( timer )

The JavaScript that updates the counter window.onload = function () { // create a timer that calls // the updateCounter function every second var counter = 0; var timer = setInterval( function () { // the start of the first parameter counter++; document.getElementById( "counter").firstChild.nodeValue = counter; }, 1000 ); // the second parameter }

A Slide Show app with the third image displayed


The HTML for the Slide Show


<section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"> </a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul> <h2 id="caption">Casting on the Upper Kings</h2> <p><img src="images/casting1.jpg" alt="Casting 1" id="image"></p> </section>

The CSS for the ul element of the Slide Show


ul { display: none; }

The JavaScript for the Slide Show application


var $ = function (id) { return document.getElementById(id); } window.onload = function () { var listNode = $("image_list"); // ul slides element var captionNode = $("caption"); // h2 caption element var imageNode = $("image"); // img slide element var links = listNode.getElementsByTagName("a"); // Process image links var i, linkNode, image; var imageCache = []; for ( i = 0; i < links.length; i++ ) { linkNode = links[i]; // Preload image and copy title properties image = new Image(); image.src = linkNode.getAttribute("href"); image.title = linkNode.getAttribute("title"); imageCache.push(image); }



// Start slide show var imageCounter = 0; var timer = setInterval( function () { imageCounter = (imageCounter + 1) % imageCache.length; image = imageCache[imageCounter]; imageNode.src = image.src; captionNode.firstChild.nodeValue = image.title; }, 2000); }

Extra 6-1: Modify a Slide Show


When you’re done, the slides should be controlled by the buttons, not an interval timer.

Extra 6-2: Develop an Image Rollover application


Short 6-1: Modify the FAQs application


Estimated time: 10-15 minutes.

When you’re done, only one answer should be displayed at a time.

Chapter 6 Murach's JavaScript and jQuery, C6 2012, Mike Murach Associates, Inc.Slide 1.

Documents

Transcript of Chapter 6 Murach's JavaScript and jQuery, C6 2012, Mike Murach Associates, Inc.Slide 1.