1. Unit 2: jQuery
Lesson 3: Abstraction
October 2, 2013

2. Lesson 3: Abstraction
Introduction
to jQuery
Syntax and
Structure
Abstraction
Pictures,
Video, 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 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();
});
});
3

4. Recap from last time (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
});
});
4

5. Recap from last time (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”
5

6. Recap from last time (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
6

7. jQuery vs. Javascript (I)
• We’ve mentioned Javascript a few times already, but let’s better
understand how it relates to jQuery
Javascript
• Javascript is a programming
language
jQuery
• jQuery is NOT a programming
language
7

8. jQuery vs. Javascript (II)
• We’ve mentioned Javascript a few times already, but let’s better
understand how it relates to jQuery
Javascript
jQuery
• Javascript is a programming
language
• jQuery is NOT a programming
language
• Can be used to create all
kinds of cool features
• Can only produce some of the
features we might need
8

9. jQuery vs. Javascript (III)
• We’ve mentioned Javascript a few times already, but let’s better
understand how it relates to jQuery
Javascript
jQuery
• Javascript is a programming
language
• jQuery is NOT a programming
language
• Can be used to create all
kinds of cool features
• Can only produce some of the
features we might need
• More complicated
• Easier to learn
9

10. jQuery vs. Javascript (IV)
• We’ve mentioned Javascript a few times already, but let’s better
understand how it relates to jQuery
Javascript
jQuery
• Javascript is a programming
language
• jQuery is NOT a programming
language
• Can be used to create all
kinds of cool features
• Can only produce some of the
features we might need
• More complicated
• Easier to learn
So how does jQuery relate to Javascript?
jQuery is an abstraction of Javascript.
10

11. What is an abstraction?
• An abstraction is a system that hides the complex parts so that only
the important details can be seen
• It is a core concept in computer science because computers are
fundamentally very complex machines
• Abstractions allow us to interact with computers on a much simpler
level
One of the earliest computers (from 1946)
11

12. Even watching a video online is a very
complicated process
12

13. A real life example of an abstraction (I)
• It’s pretty easy to drive a car – there are really only 3 things you
need to know:
1. Step on the gas pedal / brake to accelerate / slow down
2. Rotate the steering wheel to turn the car
3. Use the gear stick to switch between forward and backward
13

14. A real life example of an abstraction (II)
• However, a car is actually a very complicated machine
• Every car is built from thousands of individual parts that each
serve a distinct purpose
14

15. A real life example of an abstraction (III)
• What happens when we step on the gas pedal?
• Well, a lot of things happen involving the pedal, throttle valve, and
something called an ECU…The truth is most of us don’t know how
a gas pedal works!
• But that’s ok – the details are not important. All we need to know is
the end result – the car will accelerate!
15

16. A real life example of an abstraction (IV)
• The gas pedal is an abstraction – we use the abstraction of the
gas pedal to control the engine speed
• We don’t need to understand the details to know how to operate it
• Similarly, the steering wheel is an abstraction for the direction of
the front wheels and the gear stick is an abstraction for the car’s
direction of travel
16

17. Like the gas pedal, jQuery is also an abstraction
• jQuery is an abstraction for Javascript
• jQuery provides us with an easier way to use Javascript without
needing to understand the details of how Javascript works
• That’s why it’s one of the easiest ways to add movement to a
webpage
17

18. Another example of jQuery vs. Javascript (I)
• Let’s look at another example to see how jQuery makes our lives much
easier. If we want to make something disappear, we can do this in
either jQuery or Javascript.
Original page
Text disappears almost
immediately
18

19. Another example of jQuery vs. Javascript (II)
• As you can see, the Javascript version is far more complicated!
jQuery:
Javascript:
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
});
function fadeThisElement(elm) {
for (var i=10; i>0; i--) {
var opacity = i/10;
setTimeout( function(opacity) {
elm.setStyle(“-moz-opacity”, opacity);
elm.setStyle(“opacity”, opacity);
elm.setStyle(“filter”, “alpha(opacity=“ + (opacity*100).toString() );
}, 100;
}
}
window.onload = function() {
document.getElementsById(“clickedElement”).onclick = function() {
fadeThisElement(document.getElementById(‘fadedElement’));
}
}
19

20. Another example of jQuery vs. Javascript (III)
• jQuery provides us with an abstraction for working with Javascript
without worrying about the implementation details
• It’s much easier to understand!
jQuery code
English translation
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
});
20

21. Another example of jQuery vs. Javascript (IV)
• jQuery provides us with an abstraction for working with Javascript
without worrying about the implementation details
• It’s much easier to understand!
jQuery code
$(document).ready(function() {
English translation
Select the document. When it is ready
do the following:
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
});
21

22. Another example of jQuery vs. Javascript (V)
• jQuery provides us with an abstraction for working with Javascript
without worrying about the implementation details
• It’s much easier to understand!
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
English translation
Select the document. When it is ready
do the following:
Select the element with id named
clickedElement. If clicked, do the following:
$(‘#fadedElement’).fadeOut();
});
});
22

23. Another example of jQuery vs. Javascript (VI)
• jQuery provides us with an abstraction for working with Javascript
without worrying about the implementation details
• It’s much easier to understand!
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
English translation
Select the document. When it is ready
do the following:
Select the element with id named
clickedElement. If clicked, do the following:
Select the element with id named
fadedElement and make it fade out
});
23

24. Summary (I)
• Abstraction is the process of hiding the complex parts of a system
so that only the important details can be seen
• A gas pedal is an example of an abstraction – it lets us control the
speed of the car without needing to understand what happens under
the hood
24

25. Summary (II)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having to understand the implementation details
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
});
25

26. Summary (III)
• Similarly, jQuery is an abstraction of Javascript – it lets us use
Javascript without having to understand the implementation details
jQuery code
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut();
});
English translation
Select the document. When it is ready
do the following:
Select the element with id named
clickedElement. If clicked, do the following:
Select the element with id named
fadedElement and make it fade out
});
26

27. 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
27