Lesson 203 18 sep13-1500-ay
Upcoming SlideShare
Loading in...5
×
 

Lesson 203 18 sep13-1500-ay

on

  • 10,382 views

 

Statistics

Views

Total Views
10,382
Slideshare-icon Views on SlideShare
554
Embed Views
9,828

Actions

Likes
0
Downloads
12
Comments
0

5 Embeds 9,828

http://www.codecademy.com 9643
http://localhost 108
http://10.0.0.10 59
http://www.tes.co.uk 12
http://staging.codecademy.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Lesson 203 18 sep13-1500-ay Lesson 203 18 sep13-1500-ay Presentation Transcript

    • Unit 2: jQuery Lesson 3: Abstraction October 2, 2013
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • Even watching a video online is a very complicated process 12
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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