jwu guest talk: javascript and ajax
DESCRIPTION
A quick introduction to JavaScript, AJAX, and jQuery for graphic design students at JWU.TRANSCRIPT
JavaScript, AJAX, jQuery, Code, OH MY!
Or: How cool web stuff works
The Web That Was
Web PageWeb Page Web PageWeb Page
CGI
No reloading OMG LMAO!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!InnerHTML!
DOM Manipulation!
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>
</html>
…explore…
Thank you!