lesson 207 19 oct13-1500-ay
TRANSCRIPT
![Page 1: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/1.jpg)
Unit 2: jQueryLesson 7: Effects
October 19, 2013
![Page 2: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/2.jpg)
2
Lesson 7: Effects
Introduction to jQuery
Syntax and Structure Abstraction Events
Identifying Events
Tying It TogetherTBD Effects
TBDTBDTBD TBD
Lesson 1 Lesson 2 Lesson 3 Lesson 4
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
![Page 3: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/3.jpg)
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
![Page 4: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/4.jpg)
4
Recap from last time (II)
Saves time by reusing code(Don’t Repeat Yourself)
Helps to debug code(Avoid code bloat)
Keeps us organized(Separation of concerns)
• 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
![Page 5: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/5.jpg)
5
Recap from last time (III)
• x
![Page 6: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/6.jpg)
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
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
jQuery code English translation
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
![Page 7: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/7.jpg)
7
What is a jQuery effect?
• x
![Page 8: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/8.jpg)
8
jQuery effects
• x
Event Effect
If user
If user
If user
clicks on a button,
clicks on a button
clicks on a button
turn the text background color redthen
then
then
turn the text background color red
turn the text background color red
![Page 9: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/9.jpg)
9
Effects are where the magic happens!
• x
![Page 10: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/10.jpg)
10
Examples
• x
![Page 11: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/11.jpg)
11
Walkthrough
• x
![Page 12: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/12.jpg)
12
Summary
• x
![Page 13: Lesson 207 19 oct13-1500-ay](https://reader035.vdocument.in/reader035/viewer/2022062418/554a132bb4c9055c598b4cbf/html5/thumbnails/13.jpg)
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
3. Take the follow-up quiz to test your understanding