Professional Documents
Culture Documents
- FIRST FLIGHT -
Fuel Up
- Foundations for jQuery -
Back in 1995
JavaScript is Born
LEVEL 1
Ja ascript Today v
Explosive Growth
LEVEL 1
Why jQuery?
An Abstraction Layer
Use jQuery because... ...its easy! ...browsers suck! ...users have old browsers!
LEVEL 1
You still need JavaScript jQuery is heavy & slow! Build now, perfect later.
LEVEL 1
Creating V ariables
Giving Names to Data
var message = Hello, World!;
var keyword Name for the variable, normally in snake_case Data or function on the right side Line ends in semicolon
Foundations for jQuery
LEVEL 1
LEVEL 1
JS Global FUNCTIONS
Alert
alert(Hello, World!);
LEVEL 1
JS Global FUNCTIONS
Con rm
var answer = confirm(Start Engines?);
LEVEL 1
JS Global FUNCTIONS
Prompt
var count = prompt(Passenger Count:);
Take in data from the user, returns the v alue they enter as a String
LEVEL 1
Object Functions
Use Dot Notation and Parentheses
First Flight; Flight.toLowerCase();
first flight
First Flight.toLowerCase;
LEVEL 1
LEVEL 1
Number-related Operations
16 + 26; 16 / 2; parseInt(42 people); 42.toString(); 42 8 42 42
LEVEL 1
ARRAYS
Ordered Sets of Data
var x = [zero,one,two]; x[2]; x.length; x.reverse();
3 [two,one,zero]
LEVEL 1
https://developer.mozilla.org/en/JavaScript/Reference/
T ake OFF
- WRITING YOUR FIRST JQUERY -
http://jquery.com
Fastest
Human Readable
http://docs.jquery.com/Downloading_jQuery
MINIFIED Ja ascript v
Better Performance, Sacri cing Readability
function sum(input_1, input_2) { return input_1 + input_2; } sum(16, 32);
75 Characters
38 Characters
LEVEL 2
LOADING JQUERY
Local File System
<script type="text/javascript" src="jquery.js"></script>
LEVEL 2
LOADING JQUERY
Googles Content Delivery Network
<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>
LEVEL 2
LOADING JQUERY
During This Tutorial
Use the evaluator window Weve already loaded jQuery Your code will run in a safe sandbox
LEVEL 2
jQuery;
Ready to go!
function (j,s){return new b.fn.init(j,s)}
$;
Still jQuery!
function (j,s){return new b.fn.init(j,s)}
LEVEL 2
Take Off
Part 1: Elementary Selectors
The DOM
Document Object Model
<html> <head> <title>jQuery First Flight</title> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>
LEVEL 2
The DOM
Document Object Model
html head title body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing... jQuery First Flight
LEVEL 2
jQuery Selection
JQUERY
$(h1);
Element Name
DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
jQuery Selection
JQUERY
$(p);
Element Name
DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
jQuery Selection
JQUERY
$(p.plan);
DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
jQuery Selection
JQUERY
$(p#final);
Element + # + ID Name
DOM
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
Take Off
Part 2: Selection Results
Selection Results
JQUERY
$(p);
DOM
p.plan p#final Before you can takeoff... Then, before landing...
Ja ascript Results v
[<p class=plan>Before you can takeoff...</p>, <p class=final>Then, before landing...</p>]
LEVEL 2
Non-match Results
JQUERY
$(h2);
DOM
There were no H2s in the DOM
Ja ascript Results v
[]
Selection Results
JQUERY
$(h1, p.plan);
DOM
h1 p#final Welcome to jQuery Air Then, before landing...
Ja ascript Results v
[<h1>Welcome to jQuery Air</h1>, <p class=final>Then, before landing...</p>]
LEVEL 2
Understanding Whitespace
JQUERY
$(p#final);
DOM
document body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 2
Understanding Whitespace
JQUERY
$(p #final);
DOM
document body h1 p.plan p#final
LEVEL 2
LEVEL 2
Take Off
Part 3: Pseudo-Classes and Direct Descendants
PSEUDO-Classes
JQUERY
$(p:first);
DOM
body p.plan p#final Before you can takeoff... Then, before landing...
Ja ascript Results v
[<p class=plan>Before you can takeoff</p>]
LEVEL 2
Direct Descendants
JQUERY
$(body span);
DOM
body p.plan Before you can takeoff... span.highlight p span WARNING
LEVEL 2
Direct Descendants
JQUERY
$(body > span);
DOM
body p.plan
No Matches
Before you can takeoff... span.highlight p span WARNING
LEVEL 2
Direct Descendants
JQUERY
$(p.plan > span);
DOM
body p.plan Before you can takeoff... span span.highlight p span WARNING
LEVEL 2
Querying CSS
$(p).css; $(p).css(); $(p).css(font-size);
html body h1 p.plan p#final Welcome to jQuery Air Before you can takeoff... Then, before landing...
LEVEL 3
16px [<p>...
LEVEL 3
16px [<p>...
No actual change!
Rendered DOM
LEVEL 3
16 16px [<p>...
Rendered DOM
Works!
LEVEL 3
Using a Map
$(p).css({font-size:24px, font-weight:bold, line-height:32px});
LEVEL 3
Ja ascript Maps v
Just Enough JavaScript
{ font-size:24px, font-weight:bold, line-height:32px }
Wrapped in {} Pairs are one key and one value Key and value separated by : Pairs separated by ,
LEVEL 3
CSS
JavaScript
interaction
LEVEL 3
LEVEL 3
true
LEVEL 3
LEVEL 3
LEVEL 3
LEVEL 3
Toggling a Class
JQUERY
$(p:first).toggleClass(bigger);
[<p class="plan bigger"> Before class="plan"> Before you you can takeoff...</p>] can takeoff...</p>]
LEVEL 3
Visibility
JQUERY
$(p:first).hide();
[<p style=display:none> Before you can takeoff...</p>]
$(p:first).show();
LEVEL 3
Visibility
JQUERY
$(p:first) .toggle();
Switche
s betwee
n show a
nd hide
LEVEL 3
Timing Matters
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(p:first).hide(); </script> </head> <body> <h1>Welcome to jQuery Air!</h1> <p class=plan> Before you can takeoff... </p> <p id=final> Before Landing </p> </body> </html>
LEVEL 3
Timing Matters
<html> <html> <head> <head> <title>jQuery First Flight</title> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> <script type="text/javascript"> $(document).ready(function(){ $(p:first).hide(); $(p:first).hide(); </script> }); </head> </script> <body> </head> <h1>Welcome to jQuery Air!</h1> <p <body>class=plan> Before you jQuery Air!</h1> <h1>Welcome tocan takeoff... </p> style=display:none> <p class=plan> <p id=final> takeoff... Before you can Before Landing </p> </p> <p id=final> </body> Before Landing </html> </p> </body> </html>
CONTENTS MA SHIFT Y
- MANIPULATING CONTENT -
HTML
content
presentation
CSS
JavaScript
interaction
LEVEL 4
Flight manifest
Our Sample HTML
body h1 p#time
DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
BROWSER
LEVEL 4
DOM
Manifest for Flight #1337 span.label span.label 10:36AM p.gate Gate 26 Time:
JQUERY
$(p#time span.label).text(); Time:
LEVEL 4
BROWSER
LEVEL 4
BROWSER
p#time
span.label 10:36AM
DOM
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
text()
Queries Setting Strips HTML Escapes HTML
html()
Maintains HTML Builds DOM
LEVEL 4
Prepending
p#time span.label span.label 10:36AM Departure Time:
DOM
JQUERY
LEVEL 4
Appending
p#time span.label Departure Time:
DOM
$(p#time).append( from the Gate); <p><span class=label>Departure Time: </span> 10:36AM from the Gate</p>
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
DOM
JQUERY
LEVEL 4
Removing nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
DOM
$(span.label).remove(); <span>Time:</span>
JQUERY
LEVEL 4
Moving nodes
body h1 p#time Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
DOM
LEVEL 4
Moving nodes
body h1 p.gate p#time Manifest for Flight #1337 Gate 26 span.label 10:36AM Time:
DOM
JQUERY
var gate = $(p.gate).remove(); $(p#time).before(gate); <p class=gate>... <p id=time>...
LEVEL 4
review
Functions for Manipulating Content
function
.text .html
without parameter
query the plain text query html and text
with parameter
set the plain text set html and text
description
.prepend .append .before .after .remove add element inside the beginning of the selection add element inside the end of the selection add element before selection add element after selection remove element from the DOM
LEVEL 4
DOM
Manifest for Flight #1337 span.label 10:36AM p.gate Gate 26 Time:
ICK! CL
LEVEL 5
Functions
Just Enough JavaScript
function name (parameters) {instructions}
Example
function popWarning (message){ alert(Warning: + message); }
LEVEL 5
Anonymous Functions
Just Enough JavaScript
function name (parameters) {instructions}
Example
function (message){ alert(Warning: + message); }
LEVEL 5
Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready();
</script> </head>
LEVEL 5
Document Ready
A First jQuery Event
<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ alert(The DOM is Ready!); }); </script> </head>
LEVEL 5
Click Event
Left-Button Mouse Click
$(document).ready(function(){ $(p).click(function(){ alert(Got It!); }); });
LEVEL 5
Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(p).hide(); }); });
LEVEL 5
Click To Hide
$(document).ready(function(){ $(p).click(function(){ $(this).hide(); }); });
this refers to the current object usually just a plain DOM element wrap it to access jQuery functions: $(this)
LEVEL 5
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover(function(){ $(this).addClass(highlight); }); });
jQuery
BROWSER
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover( function(){$(this).addClass(highlight);}, function(){$(this).removeClass(highlight);} ); });
jQuery
BROWSER
LEVEL 5
Hover
$(document).ready(function(){ $(p).hover( function(){$(this).toggleClass(highlight);} ); });
jQuery
BROWSER
LEVEL 5
Keyboard Events
keydown res once when a key is depressed keypress res one or more times when a key is held down keyup res once when a key is released
LEVEL 5
Keypress
$(document).ready(function(){ $(body).keypress( function(){alert(Fantastic!);} ); });
jQuery
F G
LEVEL 5
jQuery
event.which has a numeric code for the key that was pressed event has other attributes like pageX, pageY, and target
LEVEL 5
Keypress
$(document).ready(function(){ $(body).keypress( function(event){ if (event.which == 102){alert(Fantastic!)}; } ); });
jQuery
F G
LEVEL 5
LEVEL 5
A SPlash of AJAX
Fake AJAX animating and other manipulations using JavaScript Real AJAX submitting or loading content via XMLHttpRequest
LEVEL 5
Animating Transitions
Manifest for Flight #1337
Time: 10:36AM Gate 26
BROWSER
p#time
span.label 10:36AM
Time:
DOM
JQUERY
LEVEL 5
Slide Animations
Manifest for Flight #1337
Time: 10:36AM Gate 26
BROWSER
p#time
span.label 10:36AM
Time:
DOM
JQUERY
LEVEL 5
Fade Animations
Manifest for Flight #1337
Time: 10:36AM Gate 26
BROWSER
p#time
span.label 10:36AM
Time:
DOM
JQUERY
LEVEL 5
True ajax
sending or receiving content via XMLHttpRequest fetch HTML content with the .load() function
LEVEL 5
Using load()
p.gate span.label span.number span.number Gate 26
DOM
JQUERY
$(span.number).load(/flights/824/gate); [<span class=number>26</span>]
LEVEL 5
Review
Named functions
function name (parameters) {instructions}
Anonymous functions
function (parameters) {instructions}
LEVEL 5
Review
General Event Handler
$(element).event(function(){ });
description
res when the object is completely loaded left mouse button is clicked and released once when the mouse moves on to an element, then again when it moves out
LEVEL 5
Review
Event Object
description
.which .pageX & .pageY .preventDefault() .stopPropogation() code for which key was pressed coordinates of the mouse pointer stop the broswer from its default action stop the event from triggering other handlers
LEVEL 5
Review
Animations
functions
.hide(speed) .show(speed) .toggle(speed) .slideDown(speed) .slideUp(speed) .slideToggle(speed) .fadeIn(speed) .fadeOut(speed) .fadeToggle(speed)
description
show/reveal with a scaling effect
LEVEL 5