Lesson 201 14 sep13-1500-ay

  • View
    11.255

  • Download
    0

Embed Size (px)

Text of Lesson 201 14 sep13-1500-ay

  • 1.Unit 2: jQuery Lesson 1: Introduction to jQuery October 2, 2013

2. Recap of Unit 1 (I) HTML is very important and is used in everything from websites to email messages to sending data with forms HTML files are easy to create no harder than writing a Word document2 3. Recap of Unit 1 (II) Using HTML, we can add images, video, and forms to create a rich experience for the visitors to our website Meta tags and search engine optimization help potential visitors to find our website on search engines like Google or YahooThis is the meta description tag3 4. Recap of Unit 1 (III) CSS is just as important as HTML because it allows us to style a page to make it look pretty CSS always needs to be paired with HTML for the styling to take effect, but due to separation of concerns, they should be split into two separate files4 5. Recap of Unit 1 (IV) Remember the DRY Principle: Dont Repeat Yourself. Reuse code whenever possible! Using open source code and frameworks like Twitter Bootstrap can save us a lot of time5 6. Unit 2 will focus on jQueryUnit 1: HTML/CSSUnit 2: jQueryUnit 3: Javascript6 7. Lesson 1: Introduction to jQuery Introduction to jQuerySyntax and StructureAbstractionPictures, Vid eo, and MediaLesson 1Lesson 2Lesson 3Lesson 4Learning to Use CSSIntroduction to CSSSearch Engine OptimizationHTML and FormsLesson 8Lesson 7Lesson 6Lesson 5Separation of Concerns3 Ways to Use CSSReusing CodeLaunching Your Own WebsiteLesson 9Lesson 10Lesson 11Lesson 127 8. HTML/CSS alone have limited capabilities Weve seen that HTML and CSS are excellent tools for creating webpages, but they dont allow us to do everything we might want Remember our Prince William analogy from Unit 1? HTML as the structure/skeletonCSS as the presentation/clothingjQuery/Javascript as the action/movement8 9. jQuery gives us the ability to animate a website To animate our webpage, we need to learn a new language jQuery Were learning jQuery for two main purposes: 1. Make dynamic websites that engage and interact with our users 2. Take advantage of the full range of our computers power9 10. jQuery appears everywhere on the web jQuery is now used by more than half of the top 10,000 websites Youve probably visited many of these, such as Amazon, The Guardian, and ESPN10 11. So what exactly is jQuery? jQuery is one of the fastest ways to bring movement to a webpage and have it come to life! Its easy to use because its not a programming language of its own; instead it is a library (a bunch of commonly used pieces of code), written in a programming language called Javascript To use jQuery, you dont need to know Javascript (we will cover this in detail in Unit 3)11 12. Think of jQuery as a phrase book (I) If youre getting ready to visit France, but dont speak any French, you could buy a French phrase book a book that has translations for commonly used phrases: EnglishFrenchDo you speak English?Parlez-vous anglais?Is there someone here who speaks English?Est-ce quil y a quelquun ici qui parle anglais? While we may not understand the individual words (what does quil or quelquun mean by themselves?), we can still use the entire phrase to convey what we mean 12 13. Think of jQuery as a phrase book (II) Just as a French phrase book helps us understand common phrases without knowing individual words, jQuery helps us with common features without needing to understand Javascript Some of the common features we might want to enable include: Zoom in on an image Slowly fade in some text Slide down a box when clicked13 14. Think of jQuery as a phrase book (III) jQuery takes the Javascript code needed to run each of these common features and packages them into some simple commands For example, the complicated Javascript code on the left becomes the much simpler jQuery on the right Javascript var anchors =document.getElementsByTagName(a); for(var z =0; z < anchors.length; z++){ var elem = anchors[z]; elem.onclick = function(){ alert(hello); }; }jQuery $(document).ready(function() { $('a').click(function() { alert('hello'); }); });14 15. jQuery can transform a static webpage into a dynamic, interactive website BeforeAfterDate inputted using a regular HTML formDate inputted through a jQuery calendar popup 15 16. Examples of jQuery in action (I)Password Meter evaluates password strength16 17. Examples of jQuery in action (II)Numbers and circular bars update in real-time17 18. Examples of jQuery in action (III) Image appears when cursor hovers over tooltip18 19. Summary (I) jQuery is one of the fastest ways to bring movement to a webpage and have it come to life Its easy to use because its not a programming language of its own; instead it is a library (a bunch of commonly used pieces of code), written in a programming language called Javascript To use jQuery, you dont need to know Javascript (we will cover this in detail in Unit 3)19 20. Summary (II) Just as a French phrase book helps us understand common phrases without knowing individual words, jQuery helps us with common features without needing to understand Javascript jQuery takes the Javascript code needed to run each of these common features and packages them into some simple commands20 21. What to do on your own 1. Go to URL to complete the Codecademy course online2. Do the practice set on the material learned1. Take the follow-up quiz to test your understanding21