Your SlideShare is downloading. ×
0
Unit 2: jQuery
Lesson 7: Effects
October 19, 2013
Lesson 7: Effects
Introduction
to jQuery

Syntax and
Structure

Abstraction

Events

Lesson 1

Lesson 2

Lesson 3

Lesson ...
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 ...
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...
Recap from last time (III)
• x

5
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 ...
What is a jQuery effect?
• x

7
jQuery effects
• x

Effect

Event
If user

clicks on a button,

then

turn the text background color red

If user

clicks ...
Effects are where the magic happens!
•

x

9
Examples
•

x

10
Walkthrough
•

x

11
Summary
•

x

12
What to do on your own
1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learn...
Upcoming SlideShare
Loading in...5
×

Lesson 207 19 oct13-1500-ay

7,825

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,825
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×