2. Lesson 2: jQuery and Javascript
Introduction
to jQuery
Syntax and
Structure
Abstraction
Pictures, Vid
eo, and
Media
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Learning to
Use CSS
Introduction
to CSS
Search
Engine
Optimization
HTML and
Forms
Lesson 8
Lesson 7
Lesson 6
Lesson 5
Separation of
Concerns
3 Ways to
Use CSS
Reusing
Code
Launching
Your Own
Website
Lesson 9
Lesson 10
Lesson 11
Lesson 12
2
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)
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
4
5. Three benefits of jQuery over Javascript
1. Fewer mistakes – jQuery’s simple structure makes it easier to
1
identify mistakes. Fewer mistakes means less time spent
debugging!
2
2. Less code – jQuery often requires only a few lines of code in
comparison to Javascript
3
1. 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!
5
6. 1
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
6
7. 1
jQuery structure and syntax (I)
jQuery code
English translation
$(document).ready(function() {
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});
});
7
8. 1
jQuery structure and syntax (II)
jQuery code
$(document).ready(function() {
English translation
When the document is ready, do the
following:
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
});
});
8
9. 1
jQuery structure and syntax (III)
jQuery code
$(document).ready(function() {
$(pageElement).someEvent(function() {
English translation
When the document is ready, do the
following:
When someEvent happens to
pageElement, do the following:
$(thingToChange).someEffect();
});
});
9
10. 1
jQuery structure and syntax (IV)
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
});
});
10
11. 1
jQuery structure and syntax (V)
jQuery code
English translation
$(document).ready(function() {
When the document is ready, do the
following:
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
When someEvent happens to pageElement,
do the following:
Make someEffect happen to thingToChange
});
});
Syntax
notes
$(element)
means “select the element”
11
12. 1
jQuery structure and syntax (VI)
jQuery code
English translation
$(document).ready(function() {
When the document is ready, do the
following:
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
When someEvent happens to pageElement,
do the following:
Make someEffect happen to thingToChange
});
});
Syntax
notes
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
12
13. 1
jQuery structure and syntax (VII)
jQuery code
English translation
$(document).ready(function() {
When the document is ready, do the
following:
$(pageElement).someEvent(function() {
$(thingToChange).someEffect();
When someEvent happens to
pageElement, do the following:
Make someEffect happen to thingToChange
});
});
Syntax
notes
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
function()
means “do the following”
13
14. 2
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
14
15. 2
jQuery is a simpler version of Javascript (II)
• We can enable this behavior by using either jQuery or Javascript
• The effect of the two code snippets below is identical!
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');
});
});
15
16. 2
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
Javascript
jQuery
var anchors =document.getElementsByTagName(“a”);
for(var z =0; z < anchors.length; z++){
var elem = anchors[z];
elem.onclick = function(){
alert(“hello”);
};
}
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
The code triggering the alert is identical
16
17. 3
Translating jQuery into English (I)
jQuery code
English translation
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
Syntax
notes
17
18. 3
Translating jQuery into English (II)
jQuery code
$(document).ready(function() {
English translation
When the document is ready, do the
following:
$('a').click(function() {
alert('hello');
});
});
Syntax
notes
18
19. 3
Translating jQuery into English (III)
jQuery code
$(document).ready(function() {
$('a').click(function() {
English translation
When the document is ready, do the
following:
When the HTML element with an <a> tag
is clicked, do the following:
alert('hello');
});
});
Syntax
notes
19
20. 3
Translating jQuery into English (IV)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
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”
});
});
Syntax
notes
20
21. 3
Translating jQuery into English (V)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
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”
});
});
Syntax
notes
$(element)
means “select the element”
21
22. 3
Translating jQuery into English (VI)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
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”
});
});
Syntax
notes
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
22
23. 3
Translating jQuery into English (VII)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
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”
});
});
Syntax
notes
$(element)
means “select the element”
$(element).action()
means “do this action to the element”
function()
means “do the following”
23
24. 3
Translating jQuery into English (VII)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
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”
24
25. 3
Translating jQuery into English (VII)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
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
25
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();
});
});
26
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
$(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
});
});
27
28. Summary (III)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
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”
28
29. Summary (IV)
jQuery code
$(document).ready(function() {
$('a').click(function() {
alert('hello');
});
});
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
29
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
1. Take the follow-up quiz to test your understanding
30
