Lesson 207 19 oct13-1500-ay

7,998 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
7,998
On SlideShare
0
From Embeds
0
Number of Embeds
7,709
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 207 19 oct13-1500-ay

  1. 1. Unit 2: jQuery Lesson 7: Effects October 19, 2013
  2. 2. Lesson 7: Effects Introduction to jQuery Syntax and Structure Abstraction Events Lesson 1 Lesson 2 Lesson 3 Lesson 4 TBD Effects Tying It Together Identifying Events Lesson 8 Lesson 7 Lesson 6 Lesson 5 TBD TBD TBD TBD Lesson 9 Lesson 10 Lesson 11 Lesson 12 2
  3. 3. Recap from last time (I) • There is more than one valid place to put jQuery code: 1. At the bottom of the HTML file 2. In a separate sheet linked to the HTML file • However, it’s best to store jQuery code in a separate file for the same reasons why we keep our HTML separate from our CSS 3
  4. 4. Recap from last time (II) • There is more than one valid place to put jQuery code: 1. At the bottom of the HTML file 2. In a separate sheet linked to the HTML file • However, it’s best to store jQuery code in a separate file for the same reasons why we keep our HTML separate from our CSS Saves time by reusing code (Don’t Repeat Yourself) Helps to debug code (Avoid code bloat) Keeps us organized (Separation of concerns) 4
  5. 5. Recap from last time (III) • x 5
  6. 6. Events and effects go hand-in-hand • Now that we’ve taken a good look at events, it’s time to gain a better understanding of effects jQuery code $(document).ready(function() { $(pageElement).someEvent(function() { $(thingToChange).someEffect(); English translation When the document is ready, do the following: When someEvent happens to pageElement, do the following: Make someEffect happen to thingToChange }); }); 6
  7. 7. What is a jQuery effect? • x 7
  8. 8. jQuery effects • x Effect Event If user clicks on a button, then turn the text background color red If user clicks on a button then turn the text background color red If user clicks on a button then turn the text background color red 8
  9. 9. Effects are where the magic happens! • x 9
  10. 10. Examples • x 10
  11. 11. Walkthrough • x 11
  12. 12. Summary • x 12
  13. 13. What to do on your own 1. Go to URL to complete the Codecademy course online 2. Do the practice set on the material learned 1. Take the follow-up quiz to test your understanding 13

×