lesson 205 07 oct13-1500-ay
TRANSCRIPT
![Page 1: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/1.jpg)
Unit 2: jQueryLesson 5: Identifying Events
October 7, 2013
![Page 2: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/2.jpg)
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
![Page 3: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/3.jpg)
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
![Page 4: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/4.jpg)
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”);
});});
![Page 5: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/5.jpg)
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”);
});});
![Page 6: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/6.jpg)
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
![Page 7: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/7.jpg)
7
Example: Google search (I)
• Let’s navigate to www.google.com to see some examples of how events are used on the web
![Page 8: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/8.jpg)
8
Example: Google search (II)
Event #1: Click in the search bar• Do you notice any change?
![Page 9: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/9.jpg)
9
Example: Google search (III)
Event #1: Click in the search bar
Clicking in the search bar triggers the border to turn blue
![Page 10: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/10.jpg)
10
Example: Google search (IV)
Event #2: Hover the cursor over the “I’m Feeling Lucky” button• See any difference?
![Page 11: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/11.jpg)
11
Example: Google search (V)
Hovering over the button triggers the text to change to “I’m Feeling Artistic”
![Page 12: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/12.jpg)
12
Exercise: Creating a Google Account (I)
• Go to https://accounts.google.com/SignUp
• How many different events can you identify?
![Page 13: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/13.jpg)
13
Exercise: Creating a Google Account (II)
1. Hovering the cursor over a text field triggers the border to become dark grey
1
1
![Page 14: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/15.jpg)
15
Exercise: Creating a Google Account (IV)
1. Hovering the cursor over the link triggers the text to become underlined
3
3
![Page 16: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/16.jpg)
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
![Page 17: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/17.jpg)
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
![Page 18: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/18.jpg)
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
![Page 19: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/19.jpg)
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
![Page 20: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/20.jpg)
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
![Page 21: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/21.jpg)
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()
![Page 22: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/22.jpg)
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()
![Page 23: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/23.jpg)
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()...
.
.
.
![Page 24: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/24.jpg)
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
![Page 25: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/25.jpg)
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
![Page 26: Lesson 205 07 oct13-1500-ay](https://reader033.vdocument.in/reader033/viewer/2022042814/5552ec1cb4c90584028b4706/html5/thumbnails/26.jpg)
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