JWU Guest Talk: JavaScript and AJAX

JavaScript, AJAX, jQuery, Code, OH MY! Or: How cool web stuff works

The Web That Was Web Page Web Page CGI

No reloading OMG LMAO!

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > </ head > < body > < div id = "top" >This is the top.</ div > </ body > </ html >

The Document Object Model (DOM) XML Document Object Model

JavaScript! Magic?

Referencing an XHTML element

< div id = "top" >This is the top.</ div >

… reference the element by unique ID

document. getElementById( "top" )

… this returns the selected element in the parse tree.

DOM Element Properties

How to Lose Friends

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm a web page</ title > < script type= "text/javascript"> function element() { alert( document. getElementById( "top").innerHTML); } </ script> </ head > < body onload = "element()" > < div id = "top" >This is the top.</ div > </ body > </ html >

Manipulating Element Contents InnerHTML! DOM Manipulation!

Events

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < html xmlns = "http://www.w3.org/1999/xhtml" > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=ISO-8859-1" /> < title >I'm also a web page</ title > < script type= "text/javascript"> function update() { document. getElementById( "contents").innerHTML = "You clicked!"; } </ script> </ head > < body > < div id = "contents" >I'm here when you initially load.</ div > < input type = "button" value = "Click Me" onclick = "update()" /> </ body > </ html >

Try Me

Complicated Behavior… Path101

XMLHttpRequest()

XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests.

Using XMLHttpRequest …in a cross-browser friendly way

var request = new XMLHttpRequest(); request. open( "GET", url, false); request. send( null); if(!request. getResponseHeader( "Date")) { var cached = request; request = new XMLHttpRequest(); var ifModifiedSince = cached. getResponseHeader( "Last-Modified"); ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date( 0); // January 1, 1970 request. open( "GET", url, false); request. setRequestHeader( "If-Modified-Since", ifModifiedSince); request. send( ""); if(request. status == 304) { request = cached; } }

JavaScript Libraries

A good library will abstract away the ugly details of cross-platform code.

Prototype (the first major lib)

jQuery (write less, do more)

Script.aculo.us (the prettiest)

YUL! (the yahoo!iest)

Etc…

jQuery

< html > < head > < script type= "text/javascript" src= "jquery.js"></ script> <script type= "text/javascript"> // Your code goes here </ script> </ head > < body > < a href = "http://jquery.com/" >jQuery</ a > </ body >

</ html >

jQuery Selector Syntax

$(‘#elementid’)

$(‘.classname’)

$(‘#content a.link’)

Events

$(‘#top’).click();

$(‘#top’).click(function() {

// do stuff when #top is clicked

});

Document Ready

Not “onload”!

$(document).ready(function(){

// Your code here

});

Local Example

< html > < head > < script type= "text/javascript" src= "http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></ script> <script type= "text/javascript"> $( document).ready( function() { $( "#content"). click( function() { alert( "hi"); }); }); </ script> </ head > < body > < div id = "content" >Did anyone go to Denny's today?</ div > </ body >