Your SlideShare is downloading. ×
0
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!
 
<ul><li><! DOCTYPE  html PUBLIC  &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1...
The Document Object Model (DOM) XML Document Object Model
JavaScript! Magic?
Referencing an XHTML element <ul><li>< div  id = &quot;top&quot; >This is the top.</ div > </li></ul><ul><li>… reference t...
How to Lose Friends <ul><li><! DOCTYPE  html PUBLIC  &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/...
Manipulating Element Contents InnerHTML! DOM Manipulation!
Events <ul><li><! DOCTYPE  html PUBLIC  &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD...
Complicated Behavior… Path101
XMLHttpRequest() <ul><li>XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP ...
Using XMLHttpRequest …in a cross-browser friendly way <ul><li>var request  =  new  XMLHttpRequest(); request. open( &quot;...
JavaScript Libraries <ul><li>A good library will abstract away the ugly details of cross-platform code. </li></ul><ul><li>...
jQuery <ul><li>< html >   < head >   < script type= &quot;text/javascript&quot;  src= &quot;jquery.js&quot;></ script>   <...
jQuery Selector Syntax <ul><li>$(‘#elementid’) </li></ul><ul><li>$(‘.classname’) </li></ul><ul><li>$(‘#content a.link’) </...
Events <ul><li>$(‘#top’).click(); </li></ul><ul><li>$(‘#top’).click(function() { </li></ul><ul><li>// do stuff when #top i...
Document Ready <ul><li>Not “onload”! </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Your code here <...
Local Example <ul><li>< html >   < head >   < script type= &quot;text/javascript&quot;  src= &quot;http://ajax.googleapis....
… explore… Thank you!
Upcoming SlideShare
Loading in...5
×

JWU Guest Talk: JavaScript and AJAX

5,472

Published on

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

Published in: Technology
1 Comment
3 Likes
Statistics
Notes
No Downloads
Views
Total Views
5,472
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide
  • Transcript of "JWU Guest Talk: JavaScript and AJAX"

    1. 1. JavaScript, AJAX, jQuery, Code, OH MY! Or: How cool web stuff works
    2. 2. The Web That Was Web Page Web Page CGI
    3. 3. No reloading OMG LMAO!
    4. 5. <ul><li><! DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; > </li></ul><ul><li>< html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; > < head > < meta http-equiv = &quot;Content-Type&quot; content = &quot;text/html; charset=ISO-8859-1&quot; /> < title >I'm a web page</ title > </ head > < body > < div id = &quot;top&quot; >This is the top.</ div > </ body > </ html > </li></ul>
    5. 6. The Document Object Model (DOM) XML Document Object Model
    6. 7. JavaScript! Magic?
    7. 8. Referencing an XHTML element <ul><li>< div id = &quot;top&quot; >This is the top.</ div > </li></ul><ul><li>… reference the element by unique ID </li></ul><ul><li>document. getElementById( &quot;top&quot; ) </li></ul><ul><li>… this returns the selected element in the parse tree. </li></ul>DOM Element Properties
    8. 9. How to Lose Friends <ul><li><! DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; > < html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; > < head > < meta http-equiv = &quot;Content-Type&quot; content = &quot;text/html; charset=ISO-8859-1&quot; /> < title >I'm a web page</ title > < script type= &quot;text/javascript&quot;> function element() { alert( document. getElementById( &quot;top&quot;).innerHTML); } </ script> </ head > < body onload = &quot;element()&quot; > < div id = &quot;top&quot; >This is the top.</ div > </ body > </ html > </li></ul>
    9. 10. Manipulating Element Contents InnerHTML! DOM Manipulation!
    10. 11. Events <ul><li><! DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot; > < html xmlns = &quot;http://www.w3.org/1999/xhtml&quot; > < head > < meta http-equiv = &quot;Content-Type&quot; content = &quot;text/html; charset=ISO-8859-1&quot; /> < title >I'm also a web page</ title > < script type= &quot;text/javascript&quot;> function update() { document. getElementById( &quot;contents&quot;).innerHTML = &quot;You clicked!&quot;; } </ script> </ head > < body > < div id = &quot;contents&quot; >I'm here when you initially load.</ div > < input type = &quot;button&quot; value = &quot;Click Me&quot; onclick = &quot;update()&quot; /> </ body > </ html > </li></ul>Try Me
    11. 12. Complicated Behavior… Path101
    12. 13. XMLHttpRequest() <ul><li>XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests. </li></ul>
    13. 14. Using XMLHttpRequest …in a cross-browser friendly way <ul><li>var request = new XMLHttpRequest(); request. open( &quot;GET&quot;, url, false); request. send( null); if(!request. getResponseHeader( &quot;Date&quot;)) { var cached = request; request = new XMLHttpRequest(); var ifModifiedSince = cached. getResponseHeader( &quot;Last-Modified&quot;); ifModifiedSince = (ifModifiedSince) ? ifModifiedSince : new Date( 0); // January 1, 1970 request. open( &quot;GET&quot;, url, false); request. setRequestHeader( &quot;If-Modified-Since&quot;, ifModifiedSince); request. send( &quot;&quot;); if(request. status == 304) { request = cached; } } </li></ul>
    14. 15. JavaScript Libraries <ul><li>A good library will abstract away the ugly details of cross-platform code. </li></ul><ul><li>Prototype (the first major lib) </li></ul><ul><li>jQuery (write less, do more) </li></ul><ul><li>Script.aculo.us (the prettiest) </li></ul><ul><li>YUL! (the yahoo!iest) </li></ul><ul><li>Etc… </li></ul>
    15. 16. jQuery <ul><li>< html > < head > < script type= &quot;text/javascript&quot; src= &quot;jquery.js&quot;></ script> <script type= &quot;text/javascript&quot;> // Your code goes here </ script> </ head > < body > < a href = &quot;http://jquery.com/&quot; >jQuery</ a > </ body > </li></ul><ul><li></ html > </li></ul>
    16. 17. jQuery Selector Syntax <ul><li>$(‘#elementid’) </li></ul><ul><li>$(‘.classname’) </li></ul><ul><li>$(‘#content a.link’) </li></ul>
    17. 18. Events <ul><li>$(‘#top’).click(); </li></ul><ul><li>$(‘#top’).click(function() { </li></ul><ul><li>// do stuff when #top is clicked </li></ul><ul><li>}); </li></ul>
    18. 19. Document Ready <ul><li>Not “onload”! </li></ul><ul><li>$(document).ready(function(){ </li></ul><ul><li>// Your code here </li></ul><ul><li>}); </li></ul>
    19. 20. Local Example <ul><li>< html > < head > < script type= &quot;text/javascript&quot; src= &quot;http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js&quot;></ script> <script type= &quot;text/javascript&quot;> $( document).ready( function() { $( &quot;#content&quot;). click( function() { alert( &quot;hi&quot;); }); }); </ script> </ head > < body > < div id = &quot;content&quot; >Did anyone go to Denny's today?</ div > </ body > </li></ul><ul><li></ html > </li></ul>
    20. 21. … explore… Thank you!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×