Post on 13-May-2015
Unit 2: jQueryLesson 3: Abstraction
October 2, 2013
2
Lesson 3: Abstraction
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 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();
});});
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 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
5
Recap from last time (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”
6
Recap from last time (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
7
jQuery vs. Javascript (I)
• 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
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
• Can be used to create all kinds of cool features
• jQuery is NOT a programming language
• Can only produce some of the features we might need
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
• Can be used to create all kinds of cool features
• More complicated
• jQuery is NOT a programming language
• Can only produce some of the features we might need
• Easier to learn
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
• Can be used to create all kinds of cool features
• More complicated
• jQuery is NOT a programming language
• Can only produce some of the features we might need
• Easier to learn
So how does jQuery relate to Javascript? jQuery is an abstraction of Javascript.
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)
12
Even watching a video online is a very complicated process
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
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
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!
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
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
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
Another example of jQuery vs. Javascript (II)
19
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’)); }}
• As you can see, the Javascript version is far more complicated!
Another example of jQuery vs. Javascript (III)
20
• jQuery provides us with an abstraction for working with Javascript without worrying about the implementation details
• It’s much easier to understand!
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code English translation
Another example of jQuery vs. Javascript (IV)
21
• jQuery provides us with an abstraction for working with Javascript without worrying about the implementation details
• It’s much easier to understand!
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code English translation
Select the document. When it is readydo the following:
Another example of jQuery vs. Javascript (V)
22
• jQuery provides us with an abstraction for working with Javascript without worrying about the implementation details
• It’s much easier to understand!
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code English translation
Select the document. When it is readydo the following:
Select the element with id named clickedElement. If clicked, do the following:
Another example of jQuery vs. Javascript (VI)
23
• jQuery provides us with an abstraction for working with Javascript without worrying about the implementation details
• It’s much easier to understand!
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code English translation
Select the document. When it is readydo 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
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
Summary (II)
25
• Similarly, jQuery is an abstraction of Javascript – it lets us use Javascript without having to understand the implementation details
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code
Summary (III)
26
• Similarly, jQuery is an abstraction of Javascript – it lets us use Javascript without having to understand the implementation details
$(document).ready(function() {
$(‘#clickedElement’).click(function() {
$(‘#fadedElement’).fadeOut(); });});
jQuery code English translation
Select the document. When it is readydo 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
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
3. Take the follow-up quiz to test your understanding