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