Javascript 2009

JavaScript Used by many. Understood by few. Matthew Batchelder Lead Developer, Plymouth State University

Agenda JavaScript: What it is and isn't 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

“ The World’s Most Misunderstood Programming Language” -Douglas Crockford

Complaints “JavaScript is not a language I know” “The browser programming experience is awful.” “It’s not fast enough.” “The language is just a pile of mistakes.” -Douglas Crockford

JS: What is it? Client Side Scripting language.

JS: What is it? JavaScript is not Java. In fact, it has succeeded where Java has failed.

JS: What is it? Prototypal Inheritance Dynamic Object Lambda Functions Loosely Typed C Family Syntax Java-like Conventions Perl Regular Expressions

JS: The Bad Stuff Global Variables + is used for adding AND concatenation Semicolon insertion Typeof Phony arrays == and != False, null, undefined, NaN

== and != ‘’ == ‘0’ //false 0 == ‘’ //true 0 == ‘0’ //true false == ‘false’ // false false == ‘0’ //true false == undefined //false false == null //false null == undefined //true “ “ == 0 //true

JS: Good Stuff Lambda Functions Dynamic Objects Loose Typing Object Literals A function is an Object Too! var bob = function(){ alert(‘cheeseypoof’); }

JS: Good Stuff Lambda Functions Dynamic Objects Loose Typing Object Literals At any time you can take an object and dynamically add a property to it. // create an object var ohhai2u = new Object(); // then do ohhai2u.foo = ‘bar’; // you can now do alert(ohhai2u.foo);

JS: Good Stuff Lambda Functions Dynamic Objects Loose Typing Object Literals Flexibility in not defining variable types…just like PHP.

JS: Good Stuff Lambda Functions Dynamic Objects Loose Typing Object Literals You don’t need to use “new” syntax to define objects: // create an object var ohhai2u = {}; // then do ohhai2u.foo = ‘bar’; // ohhai2u now looks like this {foo: ‘bar’}

Inheritance Prototypical Inheritance Class free Objects inherit from other objects An object contains only what makes it different from inherited objects.

JS: Sweetness JavaScript is Sandboxed Client Side Data Transport (JSON vs XML) UI Manipulation … DOM!

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 1 = an HTML element 2 = an element attribute 3 = text 8 = an HTML comment 9 = a document 10 = a document type definition DOM Attributes Node Types 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 Keypress Keydown Keyup Select Change Submit Reset Focus Blur Load Unload Abort Error Resize Scroll Mouse Keyboard Frame/Object Form

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>

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

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

WTF? 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 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 .

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

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

Javascript 2009

Related slideshows

More Related Content

Javascript 2009

Editor's Notes