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