JavaScript Ajax & DOM Manipulation

Matthew Batchelder JavaScriptAjax & DOM Manipulation

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

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

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

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

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>

JS: Literals • Values (the stuff on the right of the equal sign) are literals. <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>

JS: Objects • Everything in JS is an Object • All literals are object literals. • 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>

JS: Objects <html> <head> <title>Examples</title> <script type="text/javascript"> 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> • Objects values are accessed using dot (“.”) notation: • example

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) { //... }

What is the DOM? • DOM == Document Object Model • The DOM is hierarchical <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>

Finding DOM Elements • document.getElementById() • returns a specific element • document.getElementByTag() • returns an array of elements

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

Manipulating the DOM • Dynamically creating and adding elements • document.createElement • appendChild • example

innerHTML • Why go through the trouble of creating Nodes? • More efficient • Easier • example

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

Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>

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

Hiding/Displaying Elements • Element visibility is a nice use of events and DOM manipulation • example

AJAX • AJAX (Asychronous Javascript and XML) • Gives you the ability to load content dynamically! • Loading content on demand • Possible usability Issues • Possible performance problems and benefits • Limitation: No AJAX calls beyond the sandbox. • Note: The way around this is with XSS (Cross Site Scripting)…which can be dangerous if done poorly.

Ajax: XMLHttpRequest • Loading content on demand: <script type="text/javascript"> function ajax(url, vars, callbackFunction){ var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("MSXML2.XMLHTTP.3.0"); request.open("GET", url, true); request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 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('http://borkweb.com/examples/js_workshop/dynamic_content1.html','',out);return false; }//end ajaxCall function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad window.addEventListener('load', doLoad, false); </script> • example

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

jQuery. That’s what we use on campus. It is awesome. WTF?

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

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.

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.

Lets do some of the stuff we already did… • Adding Text Fields • Toggling Element Visibility • Ajax Content

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

jQuery Plugins • Pluggable! Additional jQuery functionality added by including jQuery plugins.

jQuery in myPlymouth • Go Sidebar • Bookmarks • Tab Stack • Etc… • Check out the source.

Resources: Slide Examples, jQuery, Image Sprites, Mega Man! The End.

JavaScript Ajax & DOM Manipulation