lesson 206 11 oct13-1500-ay
TRANSCRIPT
![Page 1: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/1.jpg)
Unit 2: jQueryLesson 6: Tying It Together
October 14, 2013
![Page 2: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/2.jpg)
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
![Page 3: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/3.jpg)
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
![Page 4: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/4.jpg)
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
![Page 5: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/5.jpg)
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
![Page 6: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/6.jpg)
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
![Page 7: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/7.jpg)
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?
![Page 8: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/8.jpg)
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
![Page 9: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/9.jpg)
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
![Page 10: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/10.jpg)
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)
![Page 11: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/11.jpg)
11
Website with HTML and jQuery walkthrough
• x
![Page 12: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/12.jpg)
12
Website with HTML, CSS, and jQuery walkthrough
• x
![Page 13: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/13.jpg)
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
![Page 14: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/14.jpg)
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
![Page 15: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/15.jpg)
15
Summary (III)
• x
![Page 16: Lesson 206 11 oct13-1500-ay](https://reader036.vdocuments.us/reader036/viewer/2022062418/5552ecc5b4c90587048b4763/html5/thumbnails/16.jpg)
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