1. Unit 2: jQuery
Lesson 6: Tying It Together
October 14, 2013

2. Lesson 6: Tying It Together
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)
• 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
3

4. Recap from last time (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
4

5. HTML. CSS. Now jQuery! (I)
•
We saw in Unit 1 how HTML and CSS files work together:
• The HTML file stores the code that relates to the structure of
the page
5

6. HTML. CSS. Now jQuery! (II)
•
We saw in Unit 1 how HTML and CSS files work together:
• The HTML file stores the code that relates to the structure of
the page
• A separate CSS file contains the code that affects the
appearance of the page, and a line in the HTML code tells the
browser where to find this file
6

7. HTML. CSS. Now jQuery! (III)
•
•
We saw in Unit 1 how HTML and CSS files work together:
• The HTML file stores the code that relates to the structure of
the page
• A separate CSS file contains the code that affects the
appearance of the page, and a line in the HTML code tells the
browser where to find this file
So what happens when we add jQuery?
?
7

8. More than one way to work with jQuery (I)
•
•
Just like with CSS, there are multiple places to keep your jQuery
code, all of which are valid
For example, you could:
1. Place jQuery code at the bottom of the HTML file
Example 1
8

9. More than one way to work with jQuery (II)
•
•
Just like with CSS, there are multiple places to keep your jQuery
code, all of which are valid
For example, you could:
1. Place jQuery code at the bottom of the HTML file
2. Store jQuery in a separate sheet linked to the HTML file
Example 1
Example 2
9

10. Three reasons to keep jQuery in a separate file
•
While both of these are valid, it’s best to store our jQuery code in
a separate file for the same reasons why we keep our HTML
separate from our CSS
Saves time by reusing code
(Don’t Repeat Yourself)
Helps to debug code
(Avoid code bloat)
Keeps us organized
(Separation of concerns)
10

11. Website with HTML and jQuery walkthrough
•
x
11

12. Website with HTML, CSS, and jQuery
walkthrough
•
x
12

13. Summary (I)
• There is more than one valid place to put jQuery code:
1. At the bottom of the HTML file
2. In a separate sheet linked to the HTML file
• However, it’s best to store jQuery code in a separate file for the
same reasons why we keep our HTML separate from our CSS
13

14. Summary (II)
• There is more than one valid place to put jQuery code:
1. At the bottom of the HTML file
2. In a separate sheet linked to the HTML file
• However, it’s best to store jQuery code in a separate file for the
same reasons why we keep our HTML separate from our CSS
Saves time by reusing code
(Don’t Repeat Yourself)
Helps to debug code
(Avoid code bloat)
Keeps us organized
(Separation of concerns)
14

15. Summary (III)
• x
15

16. 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
16