JWU Guest Talk: JavaScript and AJAX

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    1 Favorite

    JWU Guest Talk: JavaScript and AJAX - Presentation 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.  
      • <! 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 > </ head > < body > < div id = &quot;top&quot; >This is the top.</ div > </ body > </ html >
    5. The Document Object Model (DOM) XML Document Object Model
    6. JavaScript! Magic?
    7. Referencing an XHTML element
      • < div id = &quot;top&quot; >This is the top.</ div >
      • … reference the element by unique ID
      • document. getElementById( &quot;top&quot; )
      • … this returns the selected element in the parse tree.
      DOM Element Properties
    8. How to Lose Friends
      • <! 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 >
    9. Manipulating Element Contents InnerHTML! DOM Manipulation!
    10. Events
      • <! 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 >
      Try Me
    11. Complicated Behavior… Path101
    12. XMLHttpRequest()
      • XMLHttpRequest (XHR) transfers data between a client (browser) and a server over background HTTP requests.
    13. Using XMLHttpRequest …in a cross-browser friendly way
      • 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; } }
    14. 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…
    15. jQuery
      • < 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 >
      • </ html >
    16. jQuery Selector Syntax
      • $(‘#elementid’)
      • $(‘.classname’)
      • $(‘#content a.link’)
    17. Events
      • $(‘#top’).click();
      • $(‘#top’).click(function() {
      • // do stuff when #top is clicked
      • });
    18. Document Ready
      • Not “onload”!
      • $(document).ready(function(){
      • // Your code here
      • });
    19. Local Example
      • < 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 >
      • </ html >
    20. … explore… Thank you!

    + Hilary MasonHilary Mason, 9 months ago

    custom

    1351 views, 1 favs, 4 embeds more stats

    A quick introduction to JavaScript, AJAX, and jQuer more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1351
      • 1251 on SlideShare
      • 100 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 18
    Most viewed embeds
    • 97 views on http://www.hilarymason.com
    • 1 views on http://64.233.183.100
    • 1 views on http://66.102.9.132
    • 1 views on http://feeds.feedburner.com

    more

    All embeds
    • 97 views on http://www.hilarymason.com
    • 1 views on http://64.233.183.100
    • 1 views on http://66.102.9.132
    • 1 views on http://feeds.feedburner.com

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories