Lesson 205 07 oct13-1500-ay

Unit 2: jQueryLesson 5: Identifying Events

October 7, 2013

2

Lesson 5: Identifying Events

Introduction to jQuery

Syntax and Structure Abstraction Events

Identifying Events

Tying It TogetherTBD Effects

TBDTBDTBD TBD

Lesson 1 Lesson 2 Lesson 3 Lesson 4



3

Recap from last time (I)

• An event is any action that a user takes on a web page, such as:• Double-clicking on a button • Single-clicking on a button• Hovering the mouse over an image

Event Effect

If user

If user

If user

double-clicks on a button,

single-clicks on a button

hovers over the image

turn the text background color redthen

then

then

turn the text background color red

turn the text background color red

4

Recap from last time (II)

• jQuery makes it easy for us to use different events

• If we change our minds and want to trigger the effect based on a different event, all we need to do is swap out our line of jQuery event code

$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(“background-color”: “red”);

});});

5

Recap from last time (III)

• jQuery makes it easy for us to use different events

• If we change our minds and want to trigger the effect based on a different event, all we need to do is swap out our line of jQuery event code


$(‘#button’).dblclick(function() {


});});


$(‘#button).click(function() {


});});

6

Events are triggered more often than you think

• Whenever you search on Google, look to buy something on Amazon, or scroll through your Facebook News Feed, you are probably triggering events

• Events play an important role in creating a rich user experience and so they appear on every interactive page—or almost all the websites you regularly visit

Google Amazon Facebook

7

Example: Google search (I)

• Let’s navigate to www.google.com to see some examples of how events are used on the web

http://www.google.com/

8

Example: Google search (II)

Event #1: Click in the search bar• Do you notice any change?

9

Example: Google search (III)

Event #1: Click in the search bar

Clicking in the search bar triggers the border to turn blue

10

Example: Google search (IV)

Event #2: Hover the cursor over the “I’m Feeling Lucky” button• See any difference?

11

Example: Google search (V)

Hovering over the button triggers the text to change to “I’m Feeling Artistic”

12

Exercise: Creating a Google Account (I)

• Go to https://accounts.google.com/SignUp

• How many different events can you identify?

https://accounts.google.com/SignUp

https://accounts.google.com/SignUp

13

Exercise: Creating a Google Account (II)

1. Hovering the cursor over a text field triggers the border to become dark grey

1

1

14

Exercise: Creating a Google Account (III)

1. Hovering the cursor over a text field triggers the border to turn dark grey

2. Clicking in the text field triggers the border to turn blue

1

2

1 2

15

Exercise: Creating a Google Account (IV)

1. Hovering the cursor over the link triggers the text to become underlined

3

3

16

Exercise: Creating a Google Account (V)

1. Hovering the cursor over the link triggers the text to become underlined

2. Clicking in certain text fields triggers a dialog box to appear

3

4

3 4

17

Exercise: Creating a Google Account (VI)

1. Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear

5

5

18

Exercise: Creating a Google Account (VII)

1. Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear

2. Typing inside the password field triggers a meter to evaluate the strength of your password

5

5

6

6

19

Exercise: Creating a Google Account (VIII)

• There are many other events you might have found, such as:

• Hovering the cursor over a selection in the dropdown menu triggers the selection’s background to turn grey

• Hovering the cursor over the flag icon triggers the flag’s background to turn grey

20

Exercise: Creating a Google Account (IX)

• There are many other events you might have found, such as:

• Hovering the cursor over a selection in the dropdown menu triggers the selection’s background to turn grey

• Hovering the cursor over the flag icon triggers the flag’s background to turn grey

Websites use events to make tasks as basic as filling out a form become as seamless as possible

21

Every event that can be triggered has its corresponding jQuery code (I)

Event jQuery

• Text field is selected

• Cursor hovers over an element

• Click on an element

• .focusin()

• .hover()

• .click()

22

Every event that can be triggered has its corresponding jQuery code (II)

Event jQuery




• Double-click on an element

• Press down on a key

• Release a pressed key

• .focusin()

• .hover()

• .click()

• .dblclick()

• .keydown()

• .keyup()

23

Every event that can be triggered has its corresponding jQuery code (III)

Event jQuery




• Double-click on an element

• Press down on a key

• Release a pressed key

• There are many, many more!

• .focusin()

• .hover()

• .click()

• .dblclick()

• .keydown()

• .keyup()...

.

.

.

24

Summary (I)

• Whenever you search on Google, look to buy something on Amazon, or scroll through your Facebook News Feed, you are probably triggering events

• Events play an important role in creating a rich user experience and so they appear on every interactive page—or almost all the websites you regularly visit

Google Amazon Facebook

25

Summary (II)

• Websites use events to make tasks as basic as filling out a form become as seamless as possible!

Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear

Clicking in the text field triggers the border to turn blue

26

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

Lesson 205 07 oct13-1500-ay

Technology

Transcript of Lesson 205 07 oct13-1500-ay