Unit 2: jQueryLesson 6: Tying It Together

October 14, 2013

2

Lesson 6: Tying It Together

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

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

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

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

HTML

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

HTML HTML

CSS

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?

HTML HTML

CSS?

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

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

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)

11

Website with HTML and jQuery walkthrough

• x

12

Website with HTML, CSS, and jQuery walkthrough

• x

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

14

Summary (II)

Saves time by reusing code(Don’t Repeat Yourself)

Helps to debug code(Avoid code bloat)

Keeps us organized(Separation of concerns)

• 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

15

Summary (III)

• x

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

3. Take the follow-up quiz to test your understanding