Your SlideShare is downloading. ×
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Lesson 204 03 oct13-1500-ay
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Lesson 204 03 oct13-1500-ay

10,975

Published on

Published in: Technology, Spiritual
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
10,975
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Unit 2: jQuery Lesson 4: Events October 2, 2013
  • 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

×