jwu guest talk: javascript and ajax

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

Upload: hilary-mason

Post on 15-May-2015

5.397 views

Category:

Technology


1 download

DESCRIPTION

A quick introduction to JavaScript, AJAX, and jQuery for graphic design students at JWU.

TRANSCRIPT

Page 1: JWU Guest Talk: JavaScript and AJAX

JavaScript, AJAX, jQuery, Code, OH MY!

Or: How cool web stuff works

Page 2: JWU Guest Talk: JavaScript and AJAX

The Web That Was

Web PageWeb Page Web PageWeb Page

CGI

Page 3: JWU Guest Talk: JavaScript and AJAX

No reloading OMG LMAO!No reloading OMG LMAO!

Page 4: JWU Guest Talk: JavaScript and AJAX
Page 5: JWU Guest Talk: JavaScript and AJAX

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

Page 6: JWU Guest Talk: JavaScript and AJAX

The Document Object Model (DOM)

XML Document Object Model

Page 7: JWU Guest Talk: JavaScript and AJAX

JavaScript!Magic?

Page 8: JWU Guest Talk: JavaScript and AJAX

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

Page 9: JWU Guest Talk: JavaScript and AJAX

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>

Page 10: JWU Guest Talk: JavaScript and AJAX

Manipulating Element Contents

InnerHTML!InnerHTML!

DOM Manipulation!

DOM Manipulation!

Page 11: JWU Guest Talk: JavaScript and AJAX

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

Page 12: JWU Guest Talk: JavaScript and AJAX

Complicated Behavior…

Path101

Page 13: JWU Guest Talk: JavaScript and AJAX

XMLHttpRequest()

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

Page 14: JWU Guest Talk: JavaScript and AJAX

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; }}

Page 15: JWU Guest Talk: JavaScript and AJAX

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…

Page 16: JWU Guest Talk: JavaScript and AJAX

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>

Page 17: JWU Guest Talk: JavaScript and AJAX

jQuery Selector Syntax

$(‘#elementid’)

$(‘.classname’)

$(‘#content a.link’)

Page 18: JWU Guest Talk: JavaScript and AJAX

Events

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

$(‘#top’).click(function() {// do stuff when #top is clicked

});

Page 19: JWU Guest Talk: JavaScript and AJAX

Document Ready

Not “onload”!

$(document).ready(function(){

// Your code here

});

Page 20: JWU Guest Talk: JavaScript and AJAX

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>

Page 21: JWU Guest Talk: JavaScript and AJAX

…explore…

Thank you!