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
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
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
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
