Unit 2: jQueryLesson 7: Effects

October 19, 2013

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

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

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

5

Recap from last time (III)

• x

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

7

What is a jQuery effect?

• x

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

9

Effects are where the magic happens!

• x

10

Examples

• x

11

Walkthrough

• x

12

Summary

• x

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