Lesson 204 03 oct13-1500-ay

Unit 2: jQueryLesson 4: Events

October 2, 2013

2

Lesson 4: Events

Introduction to jQuery

Syntax and Structure Abstraction Events

HTML and Forms

Search Engine

Optimization

Learning to Use CSS

Introduction to CSS

Reusing Code

3 Ways to Use CSS

Separation of Concerns

Launching Your Own Website

Lesson 1 Lesson 2 Lesson 3 Lesson 4



3

Recap from last time (I)

• Abstraction is the process of hiding the complex parts of a system so that only the important details can be seen

• A gas pedal is an example of an abstraction – it lets us control the speed of the car without needing to understand what happens under the hood

Recap from last time (II)

4

• Similarly, jQuery is an abstraction of Javascript – it lets us use Javascript without having to understand the implementation details

$(document).ready(function() {

$(‘#clickedElement’).click(function() {

$(‘#fadedElement’).fadeOut(); });});

jQuery code

Recap from last time (III)

5

• Similarly, jQuery is an abstraction of Javascript – it lets us use Javascript without having to understand the implementation details


$(‘#clickedElement’).click(function() {

$(‘#fadedElement’).fadeOut(); });});

jQuery code English translation

Select the document. When it is readydo the following:

Select the element with id named clickedElement. If clicked, do the following:

Select the element with id named fadedElement and make it fade out

6

Events are an important part of jQuery

• We saw in Lesson 2 that jQuery often has the same structure

• Today we’ll be focusing on understanding the part of the structure that relates to events


$(pageElement).someEvent(function() {

$(thingToChange).someEffect();

});});


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

• 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

• Events are important because they allow us to interact with our users by responding to their actions

Tom Cruise interacts with a fancy computer in the 2002

movie Minority Report

8

Events are often used to trigger an effect

• A good example of an event in real-life is stepping on the gas pedal of a car

• In this case, the driver (the user) initiates the event by pressing down on the gas pedal

• This event triggers the car to increase its speed

The event (the cause) The resulting effect

9

jQuery events work in the same way

• jQuery events are similar, except that we get to decide which events to respond to

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


10

Time for an example (I)


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

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

});});


11

Time for an example (II)




});});



12

Time for an example (III)




});});



When the HTML element with id ‘button’ is double-clicked, do the following:

13

Time for an example (IV)




});});



When the HTML element with id ‘button’ is double-clicked, do the following

Select the HTML element with <p> tag and edit its CSS styling for background color to red

14

Time for an example (V)




});});





Syntax notes

$(element) means “select the element”

15

Time for an example (VI)




});});





Syntax notes


$(element).action() means “do this action to the element”

16

Time for an example (VII)




});});





Syntax notes


$(element).action() means “do this action to the element”

function() means “do the following”

17

Time for an example (VIII)




});});

jQuery code Before

After

Need image here (text, button, and image on page)

?Can you figure out how the page to the right will change?

18

Time for an example (IX)




});});

jQuery code Before

After

Need image here (text now has red background)


After double-clicking the button, the text now has red background

19

Time for an example (X)




});});

jQuery code Before

After

Need image here (text now has red background)


After double-clicking the button, the text now has red background

20

Events in action! (I)

• jQuery makes it easy for us to use different events

• If we change our minds and want the text background color to become red when the user single-clicks on the button, all we need to do is swap out our one line of jQuery event code




});});


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


});});

21

Events in action! (II)

• If we change our minds again and want the text background color to become red when the user hovers over the image, all we need to do is swap out our line of jQuery event code




});});


$(‘#img’).hover(function() {


});});

22

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



23

Summary (II)


• 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




});});

24

Summary (III)


• 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).click(function() {


});});

25

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 204 03 oct13-1500-ay

Technology

Transcript of Lesson 204 03 oct13-1500-ay