javascript 2009
DESCRIPTION
JavaScript Guest Lecture to PSU Web Programming Class 2009TRANSCRIPT
JavaScriptUsed by many. Understood by few.
Matthew BatchelderLead 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• “ \t\r\n “ == 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 objectvar ohhai2u = new Object();
// then doohhai2u.foo = ‘bar’;
// you can now doalert(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 objectvar ohhai2u = {};
// then doohhai2u.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!