Lesson 207 19 oct13-1500-ay
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
7,379
On Slideshare
201
From Embeds
7,178
Number of Embeds
4

Actions

Shares
Downloads
13
Comments
0
Likes
0

Embeds 7,178

http://www.codecademy.com 7,028
http://localhost 90
http://10.0.0.10 53
http://staging.codecademy.com 7

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Unit 2: jQuery Lesson 7: Effects October 19, 2013
  • 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. 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. 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. Recap from last time (III) • x 5
  • 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. What is a jQuery effect? • x 7
  • 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. Effects are where the magic happens! • x 9
  • 10. Examples • x 10
  • 11. Walkthrough • x 11
  • 12. Summary • x 12
  • 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