JavaScript: Ajax & DOM Manipulation

Slide 1: JavaScript Ajax & DOM Manipulation Matthew Batchelder

Slide 2: Agenda  JavaScript: What it is and isn't  JavaScript: Uses  What is the DOM?  What is AJAX?  jQuery FTW!  Manipulating page elements (the DOM) in sweet ways  Simplified AJAX  Other Coolness  Pluggability  jQuery in myPlymouth

Slide 3: Before We Start!  Important tools to have  Use Firefox • Firebug • JS Debugging FTW • Web Developer Toolbar (handy)  A sexy text editor (not notepad)

Slide 4: JS: What it is and isn’t  NOT Java despite its name  ECMAScript  More than form validation  Client-Side Scripting Language  Dynamic  Weakly Typed  Object-Oriented (Prototype-Based)  DOM Event Tool

Slide 5: JavaScript Sandbox  Scripts run in a “sandbox”  Can only perform web-related actions, not File-System actions  Constrained by a “Same Origin Policy”

Slide 6: JS: Usage  Drop this puppy in your page: <html> <head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script> </head> <body> … </body> </html>

Slide 7: JS: Literals  The following are literals…each variable is literally the data assigned. <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>

Slide 8: JS: Objects  Everything in JS is an Object  Those literals can be written: <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>

Slide 9: JS: Objects <html> <head> <title>Examples</title>  Objects <script type="text/javascript"> var bork = 'Bork!'; values are var w00t = { hello: 'Greetings', yo: function(){ alert(bork + ' ' + this.hello); accessed } }; using dot (“.”) var zomg = { nested: { iMeanReallyNested: { notation: seriously: { out: function(){ alert('whee!'); } } } }  }; example w00t.yo(); zomg.nested.iMeanReallyNested.seriously.out(); </script> </head> <body> ... </body> </html>

Slide 10: JS: Control Structures if(bork) { switch(bork) { //... case 1: } else { // if bork == 1... //... case 'whee': } // if bork == 'whee'... case false: while(bork) { // if bork == false... //... default: } // otherwise ... } for(var i = 0; i< 10; i++) { //... try { } //... } catch(err) { for(var element in array_of_elements) { //... //... } } do { //... } while(bork);

Slide 11: What is the DOM?  DOM == Document Object Model <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>  The DOM is hierarchical

Slide 12: Finding DOM Elements  document.getElementById()  returns a specific element  document.getElementByTag()  returns an array of elements

Slide 13: DOM Element Attributes DOM Attributes Node Types   1 = an HTML element nodeName  2 = an element attribute  nodeValue  3 = text  nodeType  8 = an HTML comment  parentNode  9 = a document  childNodes  10 = a document type  firstChild definition  lastChild  previousSibling Here’s a good article that uses these.  nextSibling  attributes  ownerDocument

Slide 14: Manipulating the DOM  Dynamically creating and adding elements  document.createElement  appendChild  example

Slide 15: innerHTML  Why go through the trouble of creating Nodes?  More efficient  Easier  example

Slide 16: Events Mouse Frame/Object Form  Select   Click Load  Change   Dblclick Unload  Submit   Mousedown Abort  Reset  Error  Mouseup  Focus  Resize  Mouseover  Blur  Scroll  Mousemove  Mouseout Keyboard  Keypress  Keydown  Keyup

Slide 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>

Slide 18: Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type="text/javascript"> 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="sweet-link" href="http://borkweb.com">BorkWeb</a> </body> </html> example

Slide 19: Hiding/Displaying Elements  Element visibility is a nice use of events and DOM manipulation  example

Slide 20: AJAX  AJAX (Asychronous Javascript and XML)  Gives you the ability to load content dynamically!  Loading content on demand  Possible usability Issues  Possible performance issues and benefits  Limitation: the sandbox prevents Cross- Site Ajax

Slide 21: Ajax: XMLHttpRequest  Loading content on demand:  example

Slide 22: WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.

Slide 23: WTF? jQuery. That’s what we use on campus. Its hawt.

Slide 24: What is jQuery?  jQuery is a sweet JavaScript Library  Its Mantra: Find stuff and do stuff with it  Focuses on simplicity  Get it here  Check out the docs

Slide 25: Finding Elements  Say goodbye to document.getElementById() and document.getElementByTag()  Say hello to: $()  Uses CSS Selectors to find elements and returns them as an array of elements.

Slide 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.

Slide 27: Lets do some of the stuff we already did…  Adding Text Fields  Toggling Element Visibility  Ajax Content

Slide 28: jQuery Coolness  Browser data  $.browser  Effects  Sliding  Fading  Animating  Chaining $(‘a’).click(function(){alert(‘hello’);return false;}).css(‘font-  weight’,’bold’).fadeOut(‘slow’);

Slide 29: jQuery Plugins  Pluggable! Additional jQuery functionality added by including jQuery plugins.

Slide 30: jQuery in myPlymouth  Go Sidebar  Bookmarks  Tab Stack  Etc…  Check out the source.

Slide 31: The End. Resources Slide Examples jQuery Image Sprites (I talked about this briefly) Mega Man!

Slideshare.net (beta)