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 Matthew Batchelder
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...
Before We Start! <ul><li>Important tools to have </li></ul><ul><ul><li>Use Firefox  </li></ul></ul><ul><ul><ul><li>Firebug...
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 v...
JavaScript Sandbox <ul><li>Scripts run in a “sandbox” </li></ul><ul><ul><li>Can only perform web-related actions, not File...
JS: Usage <ul><li>Drop this puppy in your page:  </li></ul><html> <head> <title>Example JS Page</title> <script type=“text...
JS: Literals <ul><li>The following are literals…each variable is literally the data assigned. </li></ul><script type=“text...
JS: Objects <ul><li>Everything in JS is an Object </li></ul><ul><li>Those literals can be written: </li></ul><script type=...
JS: Objects <ul><li>Objects values are accessed using dot (“.”) notation: </li></ul><ul><li>example </li></ul><html> <head...
JS: Control Structures if (bork) { //... }  else  { //... } while (bork) { //... } for (var i = 0; i< 10; i++) { //... } f...
What is the DOM? <ul><li>DOM == Document Object Model </li></ul><ul><li>The DOM is hierarchical </li></ul><html> <head> <t...
Finding DOM Elements <ul><li>document.getElementById() </li></ul><ul><ul><li>returns a specific element </li></ul></ul><ul...
DOM Element Attributes <ul><li>nodeName </li></ul><ul><li>nodeValue </li></ul><ul><li>nodeType </li></ul><ul><li>parentNod...
Manipulating the DOM <ul><li>Dynamically creating and adding elements </li></ul><ul><ul><li>document.createElement </li></...
innerHTML <ul><li>Why go through the trouble of creating Nodes? </li></ul><ul><li>More efficient </li></ul><ul><li>Easier ...
Events <ul><li>Click </li></ul><ul><li>Dblclick </li></ul><ul><li>Mousedown </li></ul><ul><li>Mouseup </li></ul><ul><li>Mo...
Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butte...
Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quo...
Hiding/Displaying Elements <ul><li>Element visibility is a nice use of events and DOM manipulation </li></ul><ul><li>examp...
AJAX <ul><li>AJAX (Asychronous Javascript and XML) </li></ul><ul><li>Gives you the ability to load content dynamically! </...
Ajax: XMLHttpRequest <ul><li>Loading content on demand: </li></ul><ul><li>example </li></ul>
WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much?  Well most of the above.
WTF? jQuery.  That’s what we use on campus.  Its hawt.
What is jQuery? <ul><li>jQuery is a sweet JavaScript Library </li></ul><ul><ul><li>Its Mantra: Find stuff and do stuff wit...
Finding Elements <ul><li>Say goodbye to document.getElementById() and document.getElementByTag() </li></ul><ul><li>Say hel...
Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an  ex...
Lets do some of the stuff we already did… <ul><li>Adding Text Fields </li></ul><ul><li>Toggling   Element Visibility </li>...
jQuery Coolness <ul><li>Browser data </li></ul><ul><ul><li>$.browser </li></ul></ul><ul><li>Effects </li></ul><ul><ul><li>...
jQuery Plugins <ul><li>Pluggable!  Additional jQuery functionality added by including  jQuery  plugins . </li></ul>
jQuery in myPlymouth <ul><li>Go Sidebar </li></ul><ul><li>Bookmarks </li></ul><ul><li>Tab Stack </li></ul><ul><li>Etc… </l...
The End. <ul><li>Resources </li></ul><ul><li>Slide Examples </li></ul><ul><li>jQuery </li></ul><ul><li>Image Sprites  (I t...
Upcoming SlideShare
Loading in …5
×

JavaScript: Ajax & DOM Manipulation

40,745 views

Published on

JavaScript workshop for PSU Information Desk employees. Discusses JavaScript, Ajax, DOM Manipulation, jQuery, etc.

Published in: Technology

JavaScript: Ajax & DOM Manipulation

  1. 1. JavaScript Ajax & DOM Manipulation 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>The following are literals…each variable is literally the data assigned. </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><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’; myCarObject.tires = 4; myCarObject.windows = 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;http://borkweb.com&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 issues and benefits </li></ul></ul><ul><li>Limitation: the sandbox prevents Cross-Site Ajax </li></ul>
  21. 21. Ajax: XMLHttpRequest <ul><li>Loading content on demand: </li></ul><ul><li>example </li></ul>
  22. 22. WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.
  23. 23. WTF? jQuery. That’s what we use on campus. Its hawt.
  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. The End. <ul><li>Resources </li></ul><ul><li>Slide Examples </li></ul><ul><li>jQuery </li></ul><ul><li>Image Sprites (I talked about this briefly) </li></ul><ul><li>Mega Man ! </li></ul>

×