2. Lesson 4: Events
Introduction
to jQuery
Syntax and
Structure
Abstraction
Events
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Learning to
Use CSS
Introduction
to CSS
Search
Engine
Optimization
HTML and
Forms
Lesson 8
Lesson 7
Lesson 6
Lesson 5
Separation of
Concerns
3 Ways to
Use CSS
Reusing
Code
Launching
Your Own
Website
Lesson 9
Lesson 10
Lesson 11
Lesson 12
2
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
3
4. Recap from last time (II)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having to understand the implementation details
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
});
4
5. Recap from last time (III)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having to understand the implementation details
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
English translation
Select the document. When it is ready
do 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
});
5
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
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
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
7
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
8
9. jQuery events work in the same way
• jQuery events are similar, except that we get to decide which
events to respond to
Effect
Event
If user
double-clicks on a button,
then
turn the text background color red
If user
single-clicks on a button
then
turn the text background color red
If user
hovers over the image
then
turn the text background color red
9
10. Time for an example (I)
jQuery code
English translation
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
10
11. Time for an example (II)
jQuery code
$(document).ready(function() {
English translation
When the document is ready, do the
following:
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
11
12. Time for an example (III)
jQuery code
$(document).ready(function() {
$(‘#button’).dblclick(function() {
English translation
When the document is ready, do the
following:
When the HTML element with id ‘button’ is
double-clicked, do the following:
$(p).css(“background-color”:
“red”);
});
});
12
13. Time for an example (IV)
jQuery code
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
English translation
When the document is ready, do the
following:
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
13
14. Time for an example (V)
jQuery code
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
Syntax
notes
$(element)
English translation
When the document is ready, do the
following:
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
means “select the element”
14
15. Time for an example (VI)
jQuery code
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
Syntax
notes
English translation
When the document is ready, do the
following:
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
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
15
16. Time for an example (VII)
jQuery code
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
Syntax
notes
English translation
When the document is ready, do the
following:
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
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
function()
means “do the following”
16
17. Time for an example (VIII)
jQuery code
Before
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
Can you figure out how the page
to the right will change?
Need image here (text,
button, and image on page)
After
?
17
18. Time for an example (IX)
jQuery code
Before
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
After double-clicking the button,
the text now has red background
Need image here
(text, button, and image on
page)
After
Need image here (text now
has red background)
18
19. Time for an example (X)
jQuery code
Before
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”:
“red”);
});
});
After double-clicking the
button, the text now has red
background
Need image here (text,
button, and image on page)
After
Need image here (text now
has red background)
19
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
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(document).ready(function() {
$(‘#button).click(function() {
$(p).css(“background-color”:
“red”);
});
});
$(p).css(“background-color”:
“red”);
});
});
20
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
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(document).ready(function() {
$(‘#img’).hover(function() {
$(p).css(“background-color”:
“red”);
});
});
$(p).css(“background-color”:
“red”);
});
});
21
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
Effect
Event
If user
double-clicks on a button,
then
turn the text background color red
If user
single-clicks on a button
then
turn the text background color red
If user
hovers over the image
then
turn the text background color red
22
23. Summary (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”);
});
});
23
24. Summary (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
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(document).ready(function() {
$(‘#button).click(function() {
$(p).css(“background-color”:
“red”);
});
});
$(p).css(“background-color”:
“red”);
});
});
24
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
1. Take the follow-up quiz to test your understanding
25
