Lesson 205 07 oct13-1500-ay
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Lesson 205 07 oct13-1500-ay

on

  • 7,481 views

 

Statistics

Views

Total Views
7,481
Views on SlideShare
191
Embed Views
7,290

Actions

Likes
0
Downloads
12
Comments
0

4 Embeds 7,290

http://www.codecademy.com 7146
http://localhost 84
http://10.0.0.10 53
http://staging.codecademy.com 7

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Lesson 205 07 oct13-1500-ay Presentation Transcript

  • 1. Unit 2: jQuery Lesson 5: Identifying Events October 7, 2013
  • 2. Lesson 5: Identifying Events Introduction to jQuery Syntax and Structure Abstraction Events Lesson 1 Lesson 2 Lesson 3 Lesson 4 TBD Effects Tying It Together Identifying Events Lesson 8 Lesson 7 Lesson 6 Lesson 5 TBD TBD TBD TBD Lesson 9 Lesson 10 Lesson 11 Lesson 12 2
  • 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 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 3
  • 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”); }); }); 4
  • 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() { $(document).ready(function() { $(‘#button).click(function() { $(p).css(“background-color”: “red”); }); }); $(p).css(“background-color”: “red”); }); }); 5
  • 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 6
  • 7. Example: Google search (I) • Let’s navigate to www.google.com to see some examples of how events are used on the web 7
  • 8. Example: Google search (II) Event #1: Click in the search bar • Do you notice any change? 8
  • 9. Example: Google search (III) Event #1: Click in the search bar Clicking in the search bar triggers the border to turn blue 9
  • 10. Example: Google search (IV) Event #2: Hover the cursor over the “I’m Feeling Lucky” button • See any difference? 10
  • 11. Example: Google search (V) Hovering over the button triggers the text to change to “I’m Feeling Artistic” 11
  • 12. Exercise: Creating a Google Account (I) • Go to https://accounts.google.com/SignUp • How many different events can you identify? 12
  • 13. Exercise: Creating a Google Account (II) 1 1. Hovering the cursor over a text field triggers the border to become dark grey 1 13
  • 14. Exercise: Creating a Google Account (III) 1 1. Hovering the cursor over a text field triggers the border to turn dark grey 2 2. Clicking in the text field triggers the border to turn blue 1 2 14
  • 15. Exercise: Creating a Google Account (IV) 3 1. Hovering the cursor over the link triggers the text to become underlined 3 15
  • 16. Exercise: Creating a Google Account (V) 3 1. Hovering the cursor over the link triggers the text to become underlined 4 2. Clicking in certain text fields triggers a dialog box to appear 3 4 16
  • 17. Exercise: Creating a Google Account (VI) 5 1. Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear 5 17
  • 18. Exercise: Creating a Google Account (VII) 5 1. Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear 6 2. Typing inside the password field triggers a meter to evaluate the strength of your password 5 6 18
  • 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 19
  • 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 20
  • 21. Every event that can be triggered has its corresponding jQuery code (I) Event jQuery • Text field is selected • .focusin() • Cursor hovers over an element • .hover() • Click on an element • .click() 21
  • 22. Every event that can be triggered has its corresponding jQuery code (II) Event jQuery • Text field is selected • .focusin() • Cursor hovers over an element • .hover() • Click on an element • .click() • Double-click on an element • .dblclick() • Press down on a key • .keydown() • Release a pressed key • .keyup() 22
  • 23. Every event that can be triggered has its corresponding jQuery code (III) Event jQuery • Text field is selected • .focusin() • Cursor hovers over an element • .hover() • Click on an element • .click() • Double-click on an element • .dblclick() • Press down on a key • .keydown() • Release a pressed key . . . • .keyup() . . . • There are many, many more! 23
  • 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 24
  • 25. Summary (II) • Websites use events to make tasks as basic as filling out a form become as seamless as possible! Clicking in the text field triggers the border to turn blue Clicking out of an empty text field triggers the border to turn red and causes an alert message to appear 25
  • 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 1. Take the follow-up quiz to test your understanding 26