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