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

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

Objectives (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 3

Objectives (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 4

The code for a web page Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 5

The DOM for the web page Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 6

The DOM nodes that you commonly use Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 7

Some of the properties of the Node interface Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 8

HTML that contains element and text nodes Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 9

How to set the text for the span tag to an empty string without using its id Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 10

Methods of the Document and Element interfaces Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 11

How to create arrays of elements Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 12

How to work with attributes Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 13

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

The FAQs application in a browser Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 15

The HTML for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 16

The HTML for the FAQs application (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 17

The CSS for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 18

The JavaScript for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 19

The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 20

The HTML for another version of the FAQs app Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 21

The CSS for another version of the FAQs app Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 22

The JavaScript for attaching the event handlers Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 23

Navigation guidelines for usability Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 24

Guidelines for accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 25

How the FAQs accessibility can be improved Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 26

The FAQs application with improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 27

The HTML for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 28

The CSS for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 29

The JavaScript for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 30

Common default actions for click events Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 31

JavaScript that cancels the default action\ Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 32

Browser-compatible code that cancels the default action Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 33

How to create and preload an Image object Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 34

The user interface for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 35

The HTML for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 36

The CSS for the li elements of the Image Swap Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 37

The JavaScript for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 38

The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 39

The FAQs application with a first heading that is hidden after 5 seconds Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 40

Two methods for working with a one-time timer Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 41

How to embed the timer function in the first parameter of the setTimeout method Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 42

The FAQs application with a counter at the bottom Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 43

Two methods for working with an interval timer Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 44

A Slide Show app with the third image displayed Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 45

The HTML for the Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 46

The CSS for the ul element of the Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 47

The JavaScript for the Slide Show application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 48

The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 49

Extra 6-1: Modify a Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 50

Extra 6-2: Develop an Image Rollover application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 51

Short 6-1: Modify the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 52