View
11.116
Download
1
Category
Preview:
Citation preview
Unit 2: jQueryLesson 2: Syntax and Structure
October 2, 2013
2
Lesson 2: jQuery and Javascript
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
3
Recap from last time (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)
4
Recap from last time (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
5
Three benefits of jQuery over Javascript
1. Fewer mistakes – jQuery’s simple structure makes it easier to identify mistakes. Fewer mistakes means less time spent debugging!
2. Less code – jQuery often requires only a few lines of code in comparison to Javascript
3. Faster to learn – the intuitive structure makes for a more gradual learning curve. It’s one of the easiest ways to add movement to a webpage!
1
2
3
6
jQuery uses a consistent structure
• jQuery code is usually structured the same way – that’s what makes it easy to learn!
• So whether you want to zoom in on an image or make some text disappear, the structure of your code will probably be the same
• It may look confusing at first, but you’ll quickly get the hang of it after you have seen it a few times
1
7
jQuery structure and syntax (I)
jQuery code English translation
1
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
8
jQuery structure and syntax (II)
jQuery code English translation
When the document is ready, do the following:
1
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
9
jQuery structure and syntax (III)
jQuery code English translation
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
1
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
10
jQuery structure and syntax (IV)
jQuery code English translation
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
1
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
11
jQuery structure and syntax (V)
jQuery code English translation
Syntax notes
$(element) means “select the element”
1
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
12
jQuery structure and syntax (VI)
jQuery code English translation
Syntax notes
$(element) means “select the element”
$(element).action() means “do this action to the element”
1
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
13
jQuery structure and syntax (VII)
jQuery code English translation
Syntax notes
$(element) means “select the element”
$(element).action() means “do this action to the element”
function() means “do the following”
1
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
14
jQuery is a simpler version of Javascript (I)
• Let’s look at a live example. Say we want to have an alert pop up when the user clicks
Original page
After clicking the text, a popup appears
2
15
jQuery is a simpler version of Javascript (II)
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”); };}
• We can enable this behavior by using either jQuery or Javascript
• The effect of the two code snippets below is identical!
2
16
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”); };}
jQuery is a simpler version of Javascript (III)
• As you can see, parts of the code are the same, but the jQuery version removes a lot of the complexity that you get with Javascript
The code triggering the alert is identical
2
17
Translating jQuery into English (I)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
3
18
Translating jQuery into English (II)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
3
19
Translating jQuery into English (III)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
3
20
Translating jQuery into English (IV)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
3
21
Translating jQuery into English (V)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
$(element) means “select the element”
3
22
Translating jQuery into English (VI)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
$(element) means “select the element”
$(element).action() means “do this action to the element”
3
23
Translating jQuery into English (VII)
$(document).ready(function() {
$('a').click(function() {
alert('hello'); });});
jQuery code English translation
Syntax notes
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
$(element) means “select the element”
$(element).action() means “do this action to the element”
function() means “do the following”
3
24
Translating jQuery into English (VII)
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
jQuery code English translation
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
3
25
Translating jQuery into English (VII)
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
jQuery code English translation
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
3
Original page Result after clicking
26
Summary (I)
• jQuery has three main benefits over Javascript:
1) Fewer mistakes 2) Less code 3) Faster to learn
• jQuery code has a consistent structure
jQuery code
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
27
Summary (II)
• jQuery has three main benefits over Javascript:
1) Fewer mistakes 2) Less code 3) Faster to learn
• jQuery code has a consistent structure
jQuery code English translation
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});});
When the document is ready, do the following:
When someEvent happens to pageElement, do the following:
Make someEffect happen to thingToChange
28
Summary (III)
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
jQuery code English translation
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
29
Summary (IV)
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
jQuery code English translation
When the document is ready, do the following:
When the HTML element with an <a> tag is clicked, do the following:
Send an alert that says “hello”
Original page Result after clicking
30
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
Recommended