Lesson 206 11 oct13-1500-ay

8,063 views

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
8,063
On SlideShare
0
From Embeds
0
Number of Embeds
7,751
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Lesson 206 11 oct13-1500-ay

  1. 1. Unit 2: jQuery Lesson 6: Tying It Together October 14, 2013
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 11. Website with HTML and jQuery walkthrough • x 11
  12. 12. Website with HTML, CSS, and jQuery walkthrough • x 12
  13. 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. 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. 15. Summary (III) • x 15
  16. 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

×