Lesson 207 19 oct13-1500-ay
Download as PPTX, PDF0 likes8,108 views
This document is a lesson plan on jQuery effects. It introduces effects and their relationship to events. The recap reviews best practices for jQuery code placement and organization. The main content explains that effects change the properties of page elements, provides examples like changing an element's color, and promises a walkthrough. Students are encouraged to complete an online course, practice set, and quiz to reinforce their understanding.
Lesson 207 19 oct13-1500-ay
- 1. Unit 2: jQuery Lesson 7: Effects October 19, 2013
- 2. Lesson 7: Effects 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) • 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 3
- 4. Recap from last time (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) 4
- 5. Recap from last time (III) • x 5
- 6. Events and effects go hand-in-hand • Now that we’ve taken a good look at events, it’s time to gain a better understanding of effects 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. What is a jQuery effect? • x 7
- 8. jQuery effects • x Effect Event If user clicks on a button, then turn the text background color red If user clicks on a button then turn the text background color red If user clicks on a button then turn the text background color red 8
- 9. Effects are where the magic happens! • x 9
- 10. Examples • x 10
- 12. Summary • x 12
- 13. 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 13