Matthew Batchelder

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: Example JS Page // javascript code goes here …

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

JS: Objects  Everything in JS is an Object All literals are object literals.  Those literals can be written: 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;

JS: Objects  Objects values are accessed using dot (“.”) notation:  example example Examples 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();...

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 Example JS Page

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  1 = an HTML element  2 = an element attribute  3 = text  8 = an HTML comment  9 = a document  10 = a document type definition DOM AttributesNode Types Here’s a good article that uses these.good article

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

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

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

Simple Alert Box Example Message Box Page alert(‘I like butter’); …

Confirm Box Bound to an Event Example Message Box Page 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); BorkWeb example

Hiding/Displaying Elements  Element visibility is a nice use of events and DOM manipulation  example 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.XSS

Ajax: XMLHttpRequest  Loading content on demand: 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(' false; }//end ajaxCall function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad window.addEventListener('load', doLoad, false);  exampleexample

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

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

What is jQuery?  jQuery is a sweet JavaScript Library Its Mantra: Find stuff and do stuff with it Focuses on simplicity  Get it herehere  Check out the docsdocs

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.CSS Selectors

Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an example.example Check out the selector syntax for more info.

Lets do some of the stuff we already did…  Adding Text Fields Adding Text Fields  Toggling Element Visibility Toggling Element Visibility  Ajax Content 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 plugins

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

Resources: Slide Examples, jQuery, Image Sprites, Mega Man!Slide ExamplesjQueryImage Sprites Mega Man