Your SlideShare is downloading. ×
0
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

JWU Guest Talk: JavaScript and AJAX

5,437

Published on

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

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,437
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
31
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Transcript

    • 1. JavaScript, AJAX, jQuery, Code, OH MY! Or: How cool web stuff works
    • 2. The Web That Was Web Page Web Page CGI
    • 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>
    • 6. The Document Object Model (DOM) XML Document Object Model
    • 7. JavaScript! Magic?
    • 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
    • 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>
    • 10. Manipulating Element Contents InnerHTML! DOM Manipulation!
    • 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
    • 12. Complicated Behavior… Path101
    • 13. XMLHttpRequest() <ul><li>XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests. </li></ul>
    • 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>
    • 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>
    • 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>
    • 17. jQuery Selector Syntax <ul><li>$(‘#elementid’) </li></ul><ul><li>$(‘.classname’) </li></ul><ul><li>$(‘#content a.link’) </li></ul>
    • 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>
    • 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>
    • 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>
    • 21. … explore… Thank you!

    ×