Jquery Air Slides

jQuery Air- FIRST FLIGHT -

Fuel Up- Foundations for jQuery -

Back in 1995JavaScript is Born

LEVEL 1 Foundations for jQuery

VBScript

Mocha

LiveScript

JAVAscript

Javascript TodayExplosive Growth


Why jQuery?An Abstraction Layer


Use jQuery because...

...it’s easy!

...browsers suck!

...users have old browsers!

JQUERY IS NOT PERFECTRight Tool for the Job


You still need JavaScript

jQuery is heavy & slow!

Build now, perfect later.

Just Enough Javascript

- THE BASICS -

Creating VariablesGiving Names to Data


var keyword

Name for the variable, normally insnake_case

Data or function on the right side

var message = “Hello, World!”;

Line ends in semicolon

VARIABLES AND DATAJavaScript Types are Dynamic


var alpha = 42;

var bravo = “Fifty Two”;

var charlie = 5.2;

var delta = true;

JS Global FUNCTIONS


alert(“Hello, World!”);

Pop up a message box with theParameter Text and an OK button

Alert

var answer = confirm(“Start Engines?”);

JS Global FUNCTIONS


Confirmation dialog with the message,returns true or false

Con!rm

var count = prompt(“Passenger Count:”);

JS Global FUNCTIONS


Take in data from the user,returns the value they enteras a String

Prompt

“First Flight”; “First Flight”.toLowerCase();

Object FunctionsUse Dot Notation and Parentheses


“first flight”

“First Flight”.toLowerCase;

function toLowerCase(){[native code]}

A Few String Functions


“Hello, World!”.toLowerCase(); “hello, world!”

“Hello, World!”.toUpperCase(); “HELLO, WORLD!”

“Hello, World!”.charAt(7); “W”

“Hello!”.replace(“!”,“World!”); “HelloWorld!”

“Hello, World!”.split(“, ”); [“Hello”,“World!”]

Number-related Operations


16 + 26; 42

42.toString(); “42”

parseInt(“42 people”); 42

16 / 2; 8

ARRAYS


Ordered Sets of Data

var x = [“zero”,“one”,“two”]; Create an array in variable X

x.reverse(); [“two”,“one”,“zero”]Returns reversed list

x.length; Returns array length 3

x[2]; Returns postion 2 “two”

https://developer.mozilla.org/en/JavaScript/Reference/

Take OFF- WRITING YOUR FIRST JQUERY -

http://jquery.com

http://docs.jquery.com/Downloading_jQuery

Fastest Human Readable

MINIFIED JavascriptBetter Performance, Sacri!cing Readability

LEVEL 2 Writing Your First jQuery

function sum(input_1, input_2) { return input_1 + input_2;}sum(16, 32);

function s(i,j){return i+j;}s(16,32);

75 Characters

38 Characters

LOADING JQUERYLocal File System


<script type="text/javascript" src="jquery.js"></script>

LOADING JQUERYGoogle’s Content Delivery Network


<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"> </script>

LOADING JQUERYDuring This Tutorial


Use the evaluator window

We’ve already loaded jQuery

Your code will run in asafe “sandbox”

KICK THE TIRESIs jQuery Loaded?


jQuery;

ReferenceError: jQuery is not defined

jQuery is not loaded!

jQuery;

function (j,s){return new b.fn.init(j,s)}

Ready to go!

$;

function (j,s){return new b.fn.init(j,s)}

Still jQuery!

Take OffPart 1: Elementary Selectors

The DOMDocument 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>

The DOMDocument Object Model


html

head

body

title jQuery First Flight

h1 Welcome to jQuery Air

p.plan Before you can takeoff...

p#final Then, before landing...

$(“h1”);


jQuery Selection


html

body


JQUERY

DOM



Element Name



jQuery Selection


html

body

$(“p”);

JQUERY

DOM




Element Name


jQuery Selection


html

body


$(“p.plan”);

JQUERY

DOM



Element + . + class Name


jQuery Selection


html

body


$(“p#final”);

JQUERY

DOM



Element + # + ID Name

Take OffPart 2: Selection Results

Selection Results


$(“p”);

JQUERY

DOM



Javascript Results

[“<p class=‘plan’>Before you can takeoff...</p>”, “<p class=‘final’>Then, before landing...</p>”]

Non-match Results


$(“h2”);

JQUERY

DOM

Javascript Results

[]

There were no H2s in the DOM

Watch out, I’m “truthy”

Selection Results


$(“h1, p.plan”);

JQUERY

DOM

Javascript Results

[“<h1>Welcome to jQuery Air</h1>”, “<p class=‘final’>Then, before landing...</p>”]



$(“h1”,“p.plan”);

This won’t work!


Understanding Whitespace


document

body


$(“p#final”);

JQUERY

DOM



This matches paragraphs with ID “final”

Understanding Whitespace


document

body


$(“p #final”);

JQUERY

DOM



This matches any element with class“final” within a paragraph

No Match in this Dom

The Art of Selecting


$(“#final”);Don’t use anonymous Class/ID Selectors

$(“.errors”);

Do use Class/ID with ELEMENT TYPES

$(“p#final”);

$(“h3.errors”);

$(“h3.errors, p.errors”); Even withMultiple Elements

Take OffPart 3: Pseudo-Classes and Direct Descendants


PSEUDO-Classes


$(“p:first”);

JQUERY

DOM

Javascript Results

[“<p class=‘plan’>Before you can takeoff</p>”]

$(“p.first”);

This is not the same!

body



span.highlight WARNING

span seatbelt

Direct Descendants


$(“body span”);

JQUERY

DOM

body


Any span within body

p Then, before landing...

span.highlight WARNING

span seatbelt

span.highlight

Direct Descendants


JQUERY

DOM

body


WARNING


span seatbelt

$(“body > span”); Only spans directly under body

No Matches

WARNING span.highlight span.highlight WARNING span

Direct Descendants


JQUERY

DOM

body



span seatbelt

$(“p.plan > span”); Only spans directly under Plan

View from 30,000 Feet

- MANIPULATING STYLE -

$(“p”)

$(“p”)

$(“p”)

“16px”

function(a,c){if(arguments...

TypeError: Cannot call method


Querying CSS

LEVEL 3 VIEW FROM 30,000 FEET

html

body




.css();

.css;

.css(“font-size”);


Welcome to jQuery Air!

Before you can takeoff...

Then, before landing...




“16px”

p#final

SETTING CSS Explicitly


p.plan

$(“p”).css(“font-size”);

JQUERY

Rendered DOM

$(“p”).css(“font-size”,“24px”); [<p>...

[<p>...

“16px”






Then, before landing... p#final

SETTING CSS Relatively


p.plan

var original =

JQUERY

Rendered DOM

$(“p”).css(“font-size”, original + 8 [<p>...

$(“p”).css(“font-size”);

No actual change!

);

Doesn’t work because of string

[<p>...

“16px” 16



Then, before landing... p#final

SETTING CSS Relatively


p.plan

var original =

JQUERY

Rendered DOM

$(“p”).css(“font-size”, original + 8 [<p>...

parseInt($(“p”).css(“font-size”));

+ “px”);

Works!

Setting Multiple AttributesUsing Method Chaining


Using a Map

$(“p”).css({“font-size”:“24px”, “font-weight”:“bold”, “line-height”:“32px”});

$(“p”).css(“font-size”,“24px”). css(“font-weight”,“bold”). css(“line-height”,“32px”);

Javascript Maps


Key and valueseparated by :

Pairs separated by ,

Just Enough JavaScript

Wrapped in {}

Pairs are one key and one value

“font-size” “24px”“font-weight” “bold”“line-height” “32px”

:::

,,

{

}

Wait, Wait, wait!


HTMLcontent

CSSpresentation

JavaScriptinteraction

The CSS Interface


DOM and CSS communicatevia IDs and Classes

Use .css() with reservation

Manipulate IDs and Classes

More reliable and maintainable




true

Querying CSS Class


p:first

$(“p:first”)

JQUERY

Rendered DOM

.hasClass(“plan”);







[<p class="plan bigger"> Before you can takeoff...</p>]

ADDING A CSS Class


p:first

$(“p:first”)

JQUERY

Rendered DOM

.addClass(“bigger”);







[<p class="plan"> Before you can takeoff...</p>]

REMOVING A CSS Class


p:first

$(“p:first”)

JQUERY

Rendered DOM

.removeClass(“bigger”);







[<p class=""> Before you can takeoff...</p>]

REMOVING All CSS Classes


p:first

$(“p:first”)

JQUERY

Rendered DOM

.removeClass();







[<p class="plan bigger"> Before you can takeoff...</p>]

Toggling a Class


p:first

$(“p:first”)

JQUERY

Rendered DOM

.toggleClass(“bigger”);.toggleClass(“bigger”);

[<p class="plan"> Before you can takeoff...</p>]

[<p style=“display:none”> Before you can takeoff...</p>]



Visibility


p:first

$(“p:first”)

JQUERY

Rendered DOM

.hide();


[<p style=“display:normal”> Before you can takeoff...</p>] $(“p:first”).show();

[<p> Before you can takeoff...</p>][<p style=“display:none”> Before you can takeoff...</p>]



Visibility


p:first

$(“p:first”)

JQUERY

Rendered DOM

.toggle();

Switches between show and hide

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>


No Paragraphs Found!

JS already executed!


Timing Matters


<html> <head> <title>jQuery First Flight</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(“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>

Waiting for the DOM...

DOM is “Ready”: fire the JavaScript!

style=‘display:none’>

CONTENTS MAY SHIFT- MANIPULATING CONTENT -

WHY (NOT) Manipulate the DoM

LEVEL 4 CONTENTS MAY SHIFT

Dividing Responsibilities

HTMLcontent

CSSpresentation

JavaScriptinteraction

Flight manifest


Our Sample HTML

Manifest for Flight #1337Time: 10:36AMGate 26

body

h1 Manifest for Flight #1337

p#time Time:

p.gate Gate 26

10:36AM

span.label

DOM

BROWSER

Retrieving Text Content


Querying with .text()

body


p#time Time:

p.gate Gate 26

10:36AM

span.label

$(“p#time span.label”)

DOM

JQUERY

“Time:”

.text();

span.label

Manifest for Flight #1337 Time: 10:36AM Gate 26

BROWSER

Setting Text Content


Time: p#time

10:36AM

span.label DOMDeparts At:

Setting Text Content


Manifest for Flight #1337 Gate 26

BROWSER

$(“p#time span.label”) JQUERY

[<span class="label">Departs At:”</span>]

span.label

.text(“Departs At:”);

Departs At: 10:36AM

Text is just text


Departs At: p#time

10:36AM

span.label DOM

$(“p#time”) JQUERY

“Departs At: 10:36AM”

.text();

p#time

Text() With HTML


p#time DOM


[<p id="time"><b>Departs At: </b> 10:36AM</p>]

.text(“<b>Departs At:</b> 10:36AM”);

p#time <b>Departs At:</b> 10:36AM

Queries with html()


Departs At: p#time

10:36AM

span.label DOM


“<span class="label">Departs At:</span> 10:36AM”

.html();

p#time

Setting with html()


Departs At: p#time

10:36AM

span.label DOM


“<b>Departs At:</b> 10:36AM”

.html(“<b>Departs At:</b> 10:36AM”);

p#time b

text()


Queries

html()

Strips HTML Maintains HTML

Setting Escapes HTML Builds DOM

Prepending


p#time

10:36AM

span.label DOM

$(“span.label”) JQUERY

“<span class=‘label’>Departure Time: </span> 10:36AM”

.prepend(“Departure”);

span.label Time: Departure

Appending


p#time

10:36AM

span.label DOM


“<p><span class=‘label’>Departure Time: </span> 10:36AM from the Gate</p>”

.append(“ from the Gate”);

Departure Time: p#time

from the Gate

h3 Departure Details

Inserting Siblings with before


body


p#time Time:

p.gate Gate 26

10:36AM

span.label


“<p><span class=‘label’>Time</span>10:36AM</p>”

.before(“<h3>Departure Details</h3>”);

DOM

h1 h1

h3 Departure Details

Inserting Siblings with AFTER()


body

Manifest for Flight #1337

p#time Time:

p.gate Gate 26

10:36AM

span.label

$(“h1”) JQUERY

“<h1>Manifest for Flight #1337</h1>”

.after(“<h3>Departure Details</h3>”);

DOM

Removing nodes


body


p#time Time:

p.gate Gate 26

10:36AM

span.label

DOM

$(“span.label”) JQUERY

“<span>Time:</span>”

span.label

.remove();

Moving nodes


body


p#time Time:

p.gate Gate 26

10:36AM

span.label

DOM

p#time

Moving nodes


body


Time:

10:36AM

span.label

DOM

var gate = $(“p.gate”).remove();

JQUERY

“<p class=‘gate’>...

$(“p#time”) “<p id=‘time’>....before(gate);

p.gate Gate 26

review


Functions for Manipulating Content

function without parameter with parameter

.text query the plain text set the plain text

.html query html and text set html and text

descriptiondescription

.prepend add element inside the beginning of the selectionadd element inside the beginning of the selection

.append add element inside the end of the selectionadd element inside the end of the selection

.before add element before selectionadd element before selection

.after add element after selectionadd element after selection

.remove remove element from the DOMremove element from the DOM

Fasten your seatbelts- Events & Animation -

How events work

LEVEL 5 FASTEN YOUR SEATBELTS

Dividing Responsibilities

body


p#time Time:

p.gate Gate 26

10:36AM

span.label

DOM

CLICK!

function popWarning (message){ alert(“Warning: “ + message);}

Functions



function {instructions}name (parameters)

Example

function (message){ alert(“Warning: “ + message);}

Anonymous Functions



function name {instructions}(parameters)

Example

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">

</script> </head>

$(document).ready();

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">

</script> </head>

$(document).ready(function(){ alert(“The DOM is Ready!”); });

$(document).ready(function(){ $(“p”)

});

.click(

);

function(){

}

Click Event


Left-Button Mouse Click

alert(“Got It!”);


});

.click(

);

function(){

}

Click To Hide


$(“p”).hide();


});

.click(

);

function(){

}

Click To Hide


$(this)

this refers to the current object

usually just a plain DOM element

wrap it to accessjQuery functions: $(this)

.hide();

$(“p”) .click(

);

function(){

}

Notes About timing


$(this).hide();

$(document).ready(function(){

});


});

function(){

}

.hover(

);

Hover


$(this).addClass(“highlight”);

Manifest for Flight #1337 BROWSER

jQuery

Time: 10:36AMGate 26

$(document).ready(function(){ $(“p”).hover(

);});

function(){$(this).addClass(“highlight”);},

Hover



jQuery


function(){$(this).removeClass(“highlight”);}

$(document).ready(function(){ $(“p”).hover(

);});

function(){$(this).toggleClass(“highlight”);}

Hover



jQuery


Keyboard Events


keydown fires once whena key is depressed

keypress fires one or moretimes when a key is held down

keyup fires once whena key is released

Keypress


$(document).ready(function(){ $(“body”).keypress(

);});

jQuery

function(){alert(“Fantastic!”);}

F

G

The Event Object


event.which has a numeric codefor the key that was pressed

event has other attributes likepageX, pageY, and target

$(document).ready(function(){ $(“body”).keypress(

);});

jQuery

function(event){alert(“Fantastic!”);}

Keypress


$(document).ready(function(){ $(“body”).keypress( function(event){

} );});

jQuery

if (event.which == 102){alert(“Fantastic!”)};

F

G

The Event Object’s Functions


event.preventDefault() prevent the browser’s normal reaction

event.stopPropogation() prevent the event from bubbling upthe DOM tree

A SPlash of AJAX


Real AJAXsubmitting or loading content viaXMLHttpRequest

Fake AJAXanimating and other manipulationsusing JavaScript

[<p id=”time”><span class="label">Time...

Animating Transitions


Time: p#time

10:36AM

span.label DOM


BROWSER


Time: 10:36AM

.hide(“slow”);

$(“p#time”).slideUp(“slow”);

Slide Animations


Time: p#time

10:36AM

span.label DOM


BROWSER

JQUERY

Time: 10:36AM

$(“p#time”).slideDown(“slow”);

$(“p#time”).slideToggle(“slow”);

$(“p#time”)

Fade Animations


Time: p#time

10:36AM

span.label DOM


BROWSER

JQUERY

Time: 10:36AM

.fadeIn(“slow”);

$(“p#time”)

$(“p#time”).fadeToggle(“slow”);

.fadeOut(“slow”);

True ajax


sending or receiving contentvia XMLHttpRequest

fetch HTML content with the.load() function

Using load()


p.gate

span.number 26

span.label Gate

span.number

$(“span.number”)

DOM

JQUERY

[<span class=“number”>26</span>]

.load(“/flights/824/gate”);

Review


function name (parameters) {instructions}

Named functions

function (parameters) {instructions}

Anonymous functions

$(document).ready(function(){

});

Document Ready Wrapper

Review


$(element).event(function(){

});

General Event Handler

function description

.ready !res when the object is completely loaded

.click left mouse button is clicked and released

.hoveronce when the mouse moves on to an element,then again when it moves out

.keypress keyboard key is pressed and released

Commonly Used Events

Review


description

.which code for which key was pressed

.pageX & .pageY coordinates of the mouse pointer

.preventDefault() stop the broswer from it’s default action

.stopPropogation() stop the event from triggering other handlers

Event Object

Review


$(element).load(address);

Load via AJAX

functions description

.hide(speed)

.show(speed)

.toggle(speed)show/reveal with a scaling effect

.slideDown(speed)

.slideUp(speed)

.slideToggle(speed)show/reveal with a sliding effect

.fadeIn(speed)

.fadeOut(speed)

.fadeToggle(speed)show/reveal with a dissolve effect

Animations

Documents

Jquery Air Slides