Download presentation
Presentation is loading. Please wait.
Published byDulcie Knight Modified over 8 years ago
1
Chapter 6 Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc.Slide 1
2
Objectives Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 2
3
Objectives (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 3
4
Objectives (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 4
5
The code for a web page Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 5
6
The DOM for the web page Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 6
7
The DOM nodes that you commonly use Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 7
8
Some of the properties of the Node interface Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 8
9
HTML that contains element and text nodes Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 9
10
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
11
Methods of the Document and Element interfaces Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 11
12
How to create arrays of elements Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 12
13
How to work with attributes Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 13
14
Terms Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 14
15
The FAQs application in a browser Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 15
16
The HTML for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 16
17
The HTML for the FAQs application (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 17
18
The CSS for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 18
19
The JavaScript for the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 19
20
The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 20
21
The HTML for another version of the FAQs app Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 21
22
The CSS for another version of the FAQs app Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 22
23
The JavaScript for attaching the event handlers Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 23
24
Navigation guidelines for usability Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 24
25
Guidelines for accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 25
26
How the FAQs accessibility can be improved Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 26
27
The FAQs application with improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 27
28
The HTML for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 28
29
The CSS for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 29
30
The JavaScript for improved accessibility Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 30
31
Common default actions for click events Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 31
32
JavaScript that cancels the default action\ Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 32
33
Browser-compatible code that cancels the default action Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 33
34
How to create and preload an Image object Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 34
35
The user interface for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 35
36
The HTML for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 36
37
The CSS for the li elements of the Image Swap Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 37
38
The JavaScript for the Image Swap application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 38
39
The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 39
40
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
41
Two methods for working with a one-time timer Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 41
42
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
43
The FAQs application with a counter at the bottom Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 43
44
Two methods for working with an interval timer Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 44
45
A Slide Show app with the third image displayed Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 45
46
The HTML for the Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 46
47
The CSS for the ul element of the Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 47
48
The JavaScript for the Slide Show application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 48
49
The JavaScript (continued) Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 49
50
Extra 6-1: Modify a Slide Show Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 50
51
Extra 6-2: Develop an Image Rollover application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 51
52
Short 6-1: Modify the FAQs application Murach's JavaScript and jQuery, C6© 2012, Mike Murach & Associates, Inc. Slide 52
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.