lesson 201 14 sep13-1500-ay
TRANSCRIPT
![Page 1: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/1.jpg)
Unit 2: jQueryLesson 1: Introduction to jQuery
October 2, 2013
![Page 2: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/2.jpg)
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 document
![Page 3: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/3.jpg)
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 Yahoo
This is the meta description tag
![Page 4: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/4.jpg)
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 files
HTML HTML
CSS
![Page 5: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/5.jpg)
5
Recap of Unit 1 (IV)
• Remember the DRY Principle: Don’t Repeat Yourself. Reuse code whenever possible!
• Using open source code and frameworks like Twitter Bootstrap can save us a lot of time
![Page 6: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/6.jpg)
Unit 2 will focus on jQuery
6
Unit 1:HTML/CSS
Unit 2:jQuery
Unit 3:Javascript
![Page 7: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/7.jpg)
7
Lesson 1: Introduction to jQuery
Introduction to jQuery
Syntax and Structure Abstraction
Pictures, Video, and
Media
HTML and Forms
Search Engine
Optimization
Learning to Use CSS
Introduction to CSS
Reusing Code
3 Ways to Use CSS
Separation of Concerns
Launching Your Own Website
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 8: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/8.jpg)
8
HTML/CSS alone have limited capabilities
• We’ve seen that HTML and CSS are excellent tools for creating webpages, but they don’t allow us to do everything we might want
• Remember our Prince William analogy from Unit 1?
HTML as the structure/skeleton
CSS as the presentation/clothing
jQuery/Javascript as the action/movement
![Page 9: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/9.jpg)
9
jQuery gives us the ability to animate a website
• To animate our webpage, we need to learn a new language – jQuery
• We’re 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 computer’s power
![Page 10: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/10.jpg)
10
jQuery appears everywhere on the web
• jQuery is now used by more than half of the top 10,000 websites
• You’ve probably visited many of these, such as Amazon, The Guardian, and ESPN
![Page 11: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/11.jpg)
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!
• It’s easy to use because it’s 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 don’t need to know Javascript (we will cover this in detail in Unit 3)
![Page 12: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/12.jpg)
12
Think of jQuery as a phrase book (I)
• If you’re getting ready to visit France, but don’t speak any French, you could buy a French phrase book – a book that has translations for commonly used phrases:
• While we may not understand the individual words (what does qu’il or quelqu’un mean by themselves?), we can still use the entire phrase to convey what we mean
Is there someone here who speaks English?
Est-ce qu’il y a quelqu’un ici qui parle anglais?
English French
Do you speak English? Parlez-vous anglais?
![Page 13: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/13.jpg)
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 clicked
![Page 14: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/14.jpg)
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
jQueryJavascript
$(document).ready(function() { $('a').click(function() { alert('hello'); });});
var anchors =document.getElementsByTagName(“a”);for(var z =0; z < anchors.length; z++){ var elem = anchors[z]; elem.onclick = function(){ alert(“hello”); };}
![Page 15: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/15.jpg)
15
jQuery can transform a static webpage into a dynamic, interactive website
Before After
Date inputted using a regular HTML form
Date inputted through a jQuery calendar popup
![Page 16: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/16.jpg)
16
Examples of jQuery in action (I)
“Password Meter” evaluates password strength
![Page 17: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/17.jpg)
17
Examples of jQuery in action (II)
Numbers and circular bars update in real-time
![Page 18: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/18.jpg)
18
Examples of jQuery in action (III)
Image appears when cursor hovers over tooltip
![Page 19: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/19.jpg)
19
Summary (I)
• jQuery is one of the fastest ways to bring movement to a webpage and have it come to life
• It’s easy to use because it’s 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 don’t need to know Javascript (we will cover this in detail in Unit 3)
![Page 20: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/20.jpg)
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 commands
![Page 21: Lesson 201 14 sep13-1500-ay](https://reader033.vdocuments.us/reader033/viewer/2022042614/5552ecccb4c90587048b4767/html5/thumbnails/21.jpg)
21
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