Unit 2: jQuery
Lesson 4: Events
October 2, 2013
Lesson 4: Events
Introduction
to jQuery

Syntax and
Structure

Abstraction

Events

Lesson 1

Lesson 2

Lesson 3

Lesson 4...
Recap from last time (I)
• Abstraction is the process of hiding the complex parts of a system
so that only the important d...
Recap from last time (II)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having t...
Recap from last time (III)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having ...
Events are an important part of jQuery
• We saw in Lesson 2 that jQuery often has the same structure
• Today we’ll be focu...
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
•...
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...
jQuery events work in the same way
• jQuery events are similar, except that we get to decide which
events to respond to
Ef...
Time for an example (I)
jQuery code

English translation

$(document).ready(function() {

$(‘#button’).dblclick(function()...
Time for an example (II)
jQuery code
$(document).ready(function() {

English translation
When the document is ready, do th...
Time for an example (III)
jQuery code
$(document).ready(function() {

$(‘#button’).dblclick(function() {

English translat...
Time for an example (IV)
jQuery code
$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(“backgro...
Time for an example (V)
jQuery code
$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(“backgrou...
Time for an example (VI)
jQuery code
$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(“backgro...
Time for an example (VII)
jQuery code
$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(“backgr...
Time for an example (VIII)
jQuery code

Before

$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).c...
Time for an example (IX)
jQuery code

Before

$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css...
Time for an example (X)
jQuery code

Before

$(document).ready(function() {

$(‘#button’).dblclick(function() {

$(p).css(...
Events in action! (I)
• jQuery makes it easy for us to use different events
• If we change our minds and want the text bac...
Events in action! (II)
• If we change our minds again and want the text background color
to become red when the user hover...
Summary (I)
• An event is any action that a user takes on a web page, such as:
• Double-clicking on a button
• Single-clic...
Summary (II)
• jQuery makes it easy for us to use different events
• If we change our minds and want to trigger the effect...
Summary (III)
• jQuery makes it easy for us to use different events
• If we change our minds and want to trigger the effec...
What to do on your own
1. Go to URL to complete the Codecademy course online

2. Do the practice set on the material learn...
Upcoming SlideShare
Loading in...5
×

Lesson 204 03 oct13-1500-ay

11,001

Published on

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

No Downloads
Views
Total Views
11,001
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Lesson 204 03 oct13-1500-ay

  1. 1. Unit 2: jQuery Lesson 4: Events October 2, 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 10. Time for an example (I) jQuery code English translation $(document).ready(function() { $(‘#button’).dblclick(function() { $(p).css(“background-color”: “red”); }); }); 10
  11. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×