Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Javascript: Ajax & DOM Manipulation v1.2


Published on

This is just a slight revamp of my previous slide on this topic.

Published in: Technology
  • Be the first to comment

Javascript: Ajax & DOM Manipulation v1.2

  1. 1. Matthew Batchelder
  2. 2. Agenda <ul><li>JavaScript: What it is and isn't </li></ul><ul><li>JavaScript: Uses </li></ul><ul><li>What is the DOM? </li></ul><ul><li>What is AJAX? </li></ul><ul><li>jQuery FTW! </li></ul><ul><ul><li>Manipulating page elements (the DOM) in sweet ways </li></ul></ul><ul><ul><li>Simplified AJAX </li></ul></ul><ul><ul><li>Other Coolness </li></ul></ul><ul><ul><li>Pluggability </li></ul></ul><ul><li>jQuery in myPlymouth </li></ul>
  3. 3. Before We Start! <ul><li>Important tools to have </li></ul><ul><ul><li>Use Firefox </li></ul></ul><ul><ul><ul><li>Firebug </li></ul></ul></ul><ul><ul><ul><li>JS Debugging FTW </li></ul></ul></ul><ul><ul><ul><li>Web Developer Toolbar (handy) </li></ul></ul></ul><ul><ul><li>A sexy text editor (not notepad) </li></ul></ul>
  4. 4. JS: What it is and isn’t <ul><li>NOT Java despite its name </li></ul><ul><li>ECMAScript </li></ul><ul><li>More than form validation </li></ul><ul><li>Client-Side Scripting Language </li></ul><ul><ul><li>Dynamic </li></ul></ul><ul><ul><li>Weakly Typed </li></ul></ul><ul><ul><li>Object-Oriented (Prototype-Based) </li></ul></ul><ul><li>DOM Event Tool </li></ul>
  5. 5. JavaScript Sandbox <ul><li>Scripts run in a “sandbox” </li></ul><ul><ul><li>Can only perform web-related actions, not File-System actions </li></ul></ul><ul><ul><li>Constrained by a “Same Origin Policy” </li></ul></ul>
  6. 6. JS: Usage <ul><li>Drop this puppy in your page: </li></ul><html> <head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script> </head> <body> … </body> </html>
  7. 7. JS: Literals <ul><li>Values (the stuff on the right of the equal sign) are literals. </li></ul><script type=“text/javascript”> var myNumber = 123; var myString = ‘Bork!’; var myBoolean = true; var myFunction = function(){ return ‘hello’;} var myRegExp = /bork/gi; var myArray = [1, 2, 3]; var myCarObject = { color: ‘red’, tires: 4, windows: 6 } </script>
  8. 8. JS: Objects <ul><li>Everything in JS is an Object </li></ul><ul><ul><li>All literals are object literals . </li></ul></ul><ul><li>Those literals can be written: </li></ul><script type=“text/javascript”> var myNumber = new Number(123); var myString = new String(‘Bork!’); var myBoolean = new Boolean(true); var myFunction = new Function(‘’, “return ‘hello’”);} var myRegExp = new RegExp(‘bork’); var myArray = new Array(); myArray[0] = 1; myArray[1] = 2; myArray[2] = 3; var myCarObject = new Object(); myCarObject.color = ‘red’; = 4; = 6; </script>
  9. 9. JS: Objects <ul><li>Objects values are accessed using dot (“.”) notation: </li></ul><ul><li>example </li></ul><html> <head> <title>Examples</title> <script type=&quot;text/javascript&quot;> var bork = 'Bork!'; var w00t = { hello: 'Greetings', yo: function(){ alert(bork + ' ' + this.hello); } }; var zomg = { nested: { iMeanReallyNested: { seriously: { out: function(){ alert('whee!'); } } } } }; w00t.yo(); zomg.nested.iMeanReallyNested.seriously.out(); </script> </head> <body> ... </body> </html>
  10. 10. JS: Control Structures if (bork) { //... } else { //... } while (bork) { //... } for (var i = 0; i< 10; i++) { //... } for (var element in array_of_elements) { //... } do { //... } while (bork); switch (bork) { case 1: // if bork == 1... case 'whee': // if bork == 'whee'... case false: // if bork == false... default : // otherwise ... } try { //... } catch (err) { //... }
  11. 11. What is the DOM? <ul><li>DOM == Document Object Model </li></ul><ul><li>The DOM is hierarchical </li></ul><html> <head> <title>Example JS Page</title> </head> <body> <form id=“some_form”> <input type=“text” name=“bork”/> <input type=“submit” value=“Go”/> </form> </body> </html>
  12. 12. Finding DOM Elements <ul><li>document.getElementById() </li></ul><ul><ul><li>returns a specific element </li></ul></ul><ul><li>document.getElementByTag() </li></ul><ul><ul><li>returns an array of elements </li></ul></ul>
  13. 13. DOM Element Attributes <ul><li>nodeName </li></ul><ul><li>nodeValue </li></ul><ul><li>nodeType </li></ul><ul><li>parentNode </li></ul><ul><li>childNodes </li></ul><ul><li>firstChild </li></ul><ul><li>lastChild </li></ul><ul><li>previousSibling </li></ul><ul><li>nextSibling </li></ul><ul><li>attributes </li></ul><ul><li>ownerDocument </li></ul><ul><li>1 = an HTML element </li></ul><ul><li>2 = an element attribute </li></ul><ul><li>3 = text </li></ul><ul><li>8 = an HTML comment </li></ul><ul><li>9 = a document </li></ul><ul><li>10 = a document type definition </li></ul>DOM Attributes Node Types Here’s a good article that uses these.
  14. 14. Manipulating the DOM <ul><li>Dynamically creating and adding elements </li></ul><ul><ul><li>document.createElement </li></ul></ul><ul><ul><li>appendChild </li></ul></ul><ul><li>example </li></ul>
  15. 15. innerHTML <ul><li>Why go through the trouble of creating Nodes? </li></ul><ul><li>More efficient </li></ul><ul><li>Easier </li></ul><ul><li>example </li></ul>
  16. 16. Events <ul><li>Click </li></ul><ul><li>Dblclick </li></ul><ul><li>Mousedown </li></ul><ul><li>Mouseup </li></ul><ul><li>Mouseover </li></ul><ul><li>Mousemove </li></ul><ul><li>Mouseout </li></ul><ul><li>Keypress </li></ul><ul><li>Keydown </li></ul><ul><li>Keyup </li></ul><ul><li>Select </li></ul><ul><li>Change </li></ul><ul><li>Submit </li></ul><ul><li>Reset </li></ul><ul><li>Focus </li></ul><ul><li>Blur </li></ul><ul><li>Load </li></ul><ul><li>Unload </li></ul><ul><li>Abort </li></ul><ul><li>Error </li></ul><ul><li>Resize </li></ul><ul><li>Scroll </li></ul>Mouse Keyboard Frame/Object Form
  17. 17. Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>
  18. 18. Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quot;> function doLoad() { document.getElementById('sweet-link').addEventListener(‘click’, confirmClick, false); }//end doLoad function confirmClick() { return confirm(‘Are you sure you wish to go to that link?’); }//end confirmClick window.addEventListener(‘load’, doLoad, false); </script> </head> <body> <a id=&quot;sweet-link&quot; href=&quot;;>BorkWeb</a> </body> </html> example
  19. 19. Hiding/Displaying Elements <ul><li>Element visibility is a nice use of events and DOM manipulation </li></ul><ul><li>example </li></ul>
  20. 20. AJAX <ul><li>AJAX (Asychronous Javascript and XML) </li></ul><ul><li>Gives you the ability to load content dynamically ! </li></ul><ul><ul><li>Loading content on demand </li></ul></ul><ul><ul><li>Possible usability Issues </li></ul></ul><ul><ul><li>Possible performance problems and benefits </li></ul></ul><ul><li>Limitation : No AJAX calls beyond the sandbox. </li></ul><ul><ul><li>Note: The way around this is with XSS (Cross Site Scripting)…which can be dangerous if done poorly. </li></ul></ul>
  21. 21. Ajax: XMLHttpRequest <ul><li>Loading content on demand: </li></ul><script type=&quot;text/javascript&quot;> function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&quot;MSXML2.XMLHTTP.3.0&quot;);;GET&quot;, url, true); request.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;); request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ if (request.responseText){ callbackFunction(request.responseText); } } }; request.send(vars); }//end ajax function out(text){ document.getElementById('content').innerHTML = text; }//end out function ajaxCall(){ ajax('','',out);return false; }//end ajaxCall function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad window.addEventListener('load', doLoad, false); </script> <ul><li>example </li></ul>
  22. 22. Things can actually be a bit easier. How much? Well most of the above.
  23. 23. jQuery. That’s what we use on campus. It is awesome.
  24. 24. What is jQuery? <ul><li>jQuery is a sweet JavaScript Library </li></ul><ul><ul><li>Its Mantra: Find stuff and do stuff with it </li></ul></ul><ul><ul><li>Focuses on simplicity </li></ul></ul><ul><li>Get it here </li></ul><ul><li>Check out the docs </li></ul>
  25. 25. Finding Elements <ul><li>Say goodbye to document.getElementById() and document.getElementByTag() </li></ul><ul><li>Say hello to: $() </li></ul><ul><ul><li>Uses CSS Selectors to find elements and returns them as an array of elements. </li></ul></ul>
  26. 26. Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an example . Check out the selector syntax for more info.
  27. 27. Lets do some of the stuff we already did… <ul><li>Adding Text Fields </li></ul><ul><li>Toggling Element Visibility </li></ul><ul><li>Ajax Content </li></ul>
  28. 28. jQuery Coolness <ul><li>Browser data </li></ul><ul><ul><li>$.browser </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>Sliding </li></ul></ul><ul><ul><li>Fading </li></ul></ul><ul><ul><li>Animating </li></ul></ul><ul><li>Chaining </li></ul><ul><ul><li>$(‘a’).click(function(){alert(‘hello’); return false;}).css(‘font-weight’,’bold’).fadeOut(‘slow’); </li></ul></ul>
  29. 29. jQuery Plugins <ul><li>Pluggable! Additional jQuery functionality added by including jQuery plugins . </li></ul>
  30. 30. jQuery in myPlymouth <ul><li>Go Sidebar </li></ul><ul><li>Bookmarks </li></ul><ul><li>Tab Stack </li></ul><ul><li>Etc… </li></ul><ul><li>Check out the source . </li></ul>
  31. 31. Resources: Slide Examples , jQuery , Image Sprites , Mega Man !