Post on 13-May-2015
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
Lesson 8 Lesson 7 Lesson 6 Lesson 5
Lesson 9 Lesson 10 Lesson 11 Lesson 12
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
$(document).ready(function() {
$(‘#button’).dblclick(function() {
$(p).css(“background-color”: “red”);
});});
$(document).ready(function() {
$(‘#button).click(function() {
$(p).css(“background-color”: “red”);
});});
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
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?
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
• Text field is selected
• Cursor hovers over an element
• Click on an element
• 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
• Text field is selected
• Cursor hovers over an element
• Click on an element
• 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