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 !

http://borkweb.com	5079
http://www.ilovejs.net	53
http://coderwall.com	28
http://translate.googleusercontent.com	3
http://feeds.feedburner.com	2
http://www.slideshare.net	1
http://webcache.googleusercontent.com	1
http://admin.totalmarketing.com	1
http://cache.baidu.com	1
http://www.google.com	1

Javascript 2009

by borkweb on Dec 07, 2009

Accessibility

Categories

Upload Details

Usage Rights

10 Embeds 5,170

Statistics

Javascript 2009 Presentation Transcript