Your SlideShare is downloading. ×
0
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

38,895

Published on

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

Published in: Technology
1 Comment
26 Likes
Statistics
Notes
No Downloads
Views
Total Views
38,895
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
1,253
Comments
1
Likes
26
Embeds 0
No embeds

No notes for slide

Transcript of "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>
  1. A particular slide catching your eye?

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

×