JavaScript Primer

HTML5 and JavaScript
Part Deux

Thursday, July 5, 12

Daniel Cousineau
@dcousineau


History


Mocha
April 1995 LiveScript
JavaScript

Brendan Eich
CTO, Mozilla Corp.


JScript

JavaScript
ECMAScript

ActionScript


Basics


Data Types
• number
• string
• boolean
• object
• null
• NaN
• undeﬁned

Strings

• Are Objects, have methods


Strings

"Foo" + "Bar"; //"FooBar"

var str = "Lorem Ipsum Dolor Sit Amet";

str.toLowerCase(); //"lorem ipsum dolor sit amet"
str.toUpperCase(); //"LOREM IPSUM DOLOR SIT AMET"
str.split(" "); //["Lorem", "Ispum", "Dolor", "Sit", "Amet"]
str.substring(6,9); //"Ips"

new String("Lorem Ipsum Dolor Sit Amet") == str; //true


String to Number

parseInt("56"); //56
parseInt("42.567"); //42
parseInt("asdf"); //NaN
parseInt("5a6"); //5
parseFloat("24.68"); //24.68
parseFloat("asdf"); //NaN
parseFloat("24a"); //24


Objects

• “Dictionary” / “Associative Array”
• Key: Value or 'Key': Value
• Without ': A-Z0-9 only
• Does not keep intrinsic ordering
• Accessed keys using . (dot) or [] notation


Objects

var object = {
foo: 'value',
'complex key': 0,
bar: {
nested: true
}
};

object.foo; //'value'
object.['complex key']; //0
object.bar.nested; //true
object.bar['nested']; //true
object['bar'].nested; //true
object['bar']['nested']; //true


in or hasOwnProperty()

• Tough call:
• .hasOwnProperty() more consistent
• in checks inherited properties
• Used in for loop


in

var test = {
foo: 'value',
bar: 'value',
baz: 'value'
}

for (var key in test) {
console.log(key + ": " + test[key]);
}

//PRINTS:
//foo: value
//bar: value
//baz: value


Arrays

• Special object
• Numerical keys only
• Keeps intrinsic ordering
• Short ([]) and Long (new Array()) syntax


Arrays

var arrayShort = [
'one',
'two'
];
arrayShort[2] = 'three';

var arrayLong = new Array();
arrayLong[0] = 'one';
arrayLong[1] = 'two';
arrayLong[2] = 'three';

//arrayShort: ["one", "two", "three"]
//arrayLong: ["one", "two", "three"]


Arrays
var arr = [1,2,3,4,6];

arr.indexOf(2); //1
arr.join(':'); //"1:2:3:4:6"
arr.pop(); //6
//[1,2,3,4]
arr.push(7); //5
//[1,2,3,4,7]
arr.reverse(); //[7,4,3,2,1]
arr.shift(); //1
//[2,3,4,7]
arr.unshift(8); //5
//[8,2,3,4,7]
arr.slice(1); //[2,3,4,7]
arr.slice(1,3); //[2,3]
arr.slice(-3); //[3,4,7]
arr.slice(-3,-1); //[3,4]


Arrays

var arr1 = [1,2,3];
var arr2 = [3,4,5];

arr1.concat(arr2); //[1,2,3,3,4,5]


delete

• Removes element from an object
• “Removes element from an array”
• Not really, just sets it to undeﬁned


Functions

• Are Objects as well
• “Elevated”
• You can use a named function before it is
deﬁned in code

• Function deﬁnitions are elevated to the
top


Functions

function Foo() {
//...
}

Foo(); //valid
Bar(); //valid

function Bar() {
//...
}


Functions

function Foo() {

}

Foo.bar = "value";

'bar' in Foo; //true
Foo.bar == "value"; //true


Function Arguments

• No way to assign default arguments
• But arguments are not required
• If an argument is not speciﬁed, it is set to
undefined


arguments

• A special variable found inside a function
• A not-quite array object containing all the
function arguments


arguments

function sum() {
var x = 0;
for (var i = 0; i < arguments.length; ++i) {
x += arguments[i];
}
return x;
}
sum(1, 2, 3); //6


typeof

• Determines a variables type
• Returns a string


typeof

typeof true; //"boolean"
typeof 12; //"number"
typeof "string"; //"string"
typeof []; //"object"
typeof {}; //"object"
typeof NaN; //"number"
typeof null; //"object"
typeof undefined; //"undefined"

function Foo() {}
typeof Foo; //"function"


Comparison

• a == b / a != b
• A and B compared by value alone
• 1 == “1” evaluates to true
• a === b / a !== b
• A and B compared by value and by type
• 1 === “1” evaluates to false


window, document
• Built in, global, Objects
• window
• Provides access to the browser window
• The “global” object: foo === window.foo
• Things like window.location.href, etc
• document
• Provides access to the current DOM

Closures


Closures

• First-Class
• Can assign functions to variables, pass as
arguments and return as values

• Anonymous
• Not required to have a name
• A function that “closes over” variables
deﬁned outside itself


Closures

function Foo() {
var count = 0;

return function() {
count = count + 1;
return count;
};
}

var bar = Foo();

bar(); //1
bar(); //2
bar(); //3


Closures

function createAdder(amount) {
return function(input) {
return input + amount;
};
}

var add2 = createAdder(2);

add2(2); //4
add2(8); //10

var add3 = createAdder(3);

add3(3); //6
add3(7); //10


Module Pattern

(function(exports, undefined){
//ALL your code here

var localVar = "bar"
globalVar = "baz";

exports.foo = "bat";
})(window);

alert(localVar); //error
alert(globalVar); //"baz"
alert(window.globalVar); //"baz"
alert(foo); //"bat"
alert(window.foo); //"bat"

BEWARE: export (singular) is a reserved word in Safari

Scoping


Global & Local

• Functions are the only way to create new
scopes

• Variables deﬁned with var are local
• Variables deﬁned without var are global
• Global variables are members of window


Global & Local

var outerScope = 10;
var outerScope2 = 10;

function Foo() {
var outerScope = 20;
var innerScope = 20;
globalVariable = 30;
outerScope2 = 40;
}

Foo();

alert(outerScope); //10
alert(outerScope2); //40
alert(innerScope); //error
alert(globalVariable); //30


Lexical Scoping
function Foo() { function Foo() {
var baz = 1; var baz = 1;
return Bar();
function Bar() { }
return baz;
} function Bar() {
return baz;
return Bar(); }
}
Foo(); //baz is not defined
Foo(); //1


Hoisting
foo(); //called foo! Named functions are parsed and
made available before general
function foo() {
evaluation (thus “hoisted” to the top
console.log('called foo!');
}
of the ﬁle).

foo(); //called foo! Anonymous functions, or functions
assigned to variables, require
evaluation before they become
bar(); //undefined is not a function
available
var bar = function() {
console.log('called bar!');
}

bar(); //called bar!


Practical: Currying

function makeAdder(a) {
return function(b) {
return a+b;
}
}

var two = makeAdder(2);
two(1); //3
two(2); //4
two(3); //5


this

• Trips everyone up
• Special variable used within a function
• Refers to the “contextual object”
• Changes based on where a function
executes


this

var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};

Foo.baz(); //"bar"

Foo.bar = "bat";
Foo.baz(); //"bat"

var baz = Foo.baz;
baz(); //undefined


this

var Foo = {
bar: "bar",
baz: function() {
return this.bar;
}
};

Foo.bat = function() {
return this.bar + "bat";
};

Foo.bat(); //"barbat"


call & apply

• Methods in the function prototype
• Change the context in which a function
executes!


call & apply

var Foo = {
bar: "bar",
baz = function(param1, param2) {
return this.bar + param1 + param2;
}
};

var Foo2 = {
bar: "123"
};

Foo.baz("baz", "bat"); //"barbazbat"

Foo.baz.apply(Foo2, "baz", "bat"); //"123bazbat"
Foo.baz.call(Foo2, ["baz", "bat"]); //"123bazbat"


Practical: Binding

function bind(func, context) {
return function() {
return func.call(context, arguments);
}
}


Exceptions


Exceptions

• All errors are thrown
• Classic try...catch...ﬁnally blocks


Exceptions

try {
funcDoesNotExist();
} catch (e) {
alert(e); //ReferenceError: funcDoesNotExist is not defined
} finally {
//Always Executes
}


Exceptions
function Foo() {
throw new Error("Message");
}

function Bar() {
throw "Message";
}

try {
Foo();
} catch (e) {
e.message == "Message"; //true
}

try {
Bar();
} catch (e) {
e == "Message"; //true
}


Prototype


OOP... Kinda...

• Almost no real difference between a
dictionary and an object

• Named Functions double as object
constructors

• Function objects contain a prototype
dictionary that is copied to instance when
using new


OOP... Kinda...

Foo
function Foo() {
//The "Constructor"
} ‣ bar
‣ prototype
Foo.bar = function() { ‣ baz
//A "Static" Function ‣ constructor
}
‣ __proto__

Foo.prototype.baz = function() {
//A "Method"
};


new

instance
var instance = new Foo();

instance.baz(); //works ‣ __proto__
instance.bar(); //error ‣ baz
‣ constructor
Foo.bar(); //works ‣ __proto__
Foo.baz(); //error
‣ ...
Foo.prototype.baz(); //works


new

instance
instance.bat = function() {
/* ... */
} ‣ bat
‣ __proto__
instance.bat(); //works ‣ baz
‣ constructor
Foo.bat(); //error
‣ __proto__
Foo.prototype.bat(); //error
‣ ...


Overriding Prototype
function Foo(baz) {
this.baz = baz;
}

Foo.prototype.bar = function() {
return this.baz;
};

var foo1 = new Foo(1);
var foo2 = new Foo(2);

foo1.bar(); //1
foo2.bar(); //2

return this.baz * 2;
};

foo1.bar(); //2
foo2.bar(); //4


Asynchronous


Asynchronous

• setTimeout, setInterval allow you to have
code executing asynchronously while other
code executes


setInterval

var id = setInterval(function() {
//Code to execute every 1000 milliseconds
}, 1000);

//clearInterval(id); to stop


setTimeout

var id = setTimeout(function() {
//Code to execute after 1000 milliseconds have passed
}, 1000);

//clearTimeout(id); to cancel


setInterval()

setTimeout()


Nifty Trick

setTimeout(function() {
//Code to run in parallel
//while the code after is
//executed.
}, 1);

//Code here will execute immediately
//without waiting on the above


DOM

• Document Object Model
• API to interact with the HTML/XHTML
document


DOM: Selection
document Basic selection methods in native
.getElementById('foo'); DOM
document
.getElementsByClassName('.bar');

document
.getElementsByTagName('script');


DOM: Creation

var paragraph = document.createElement('p');
var content = document.createTextNode("Lorem Ipsum");

paragraph.appendChild(content);
paragraph.classList.add('my-class');

document.getElementsByTagName('body')[0].appendChild(paragraph);


Async Script Loading
var script = Creates a script element, set its src
document.createElement('script'); and async properties
script.src =
"http://path.to/script.js";
script.async = true;
Insert the script before the ﬁrst
script tag in the body of the
var s = document document
.getElementsByTagName('script')[0];

s.parentNode
.insertBefore(script, s);


DOM

https://developer.mozilla.org/en/Gecko_DOM_Reference


Debugging


Chrome/Safari Devel. Tools


Firefox FireBug


Console

• Provided by major browser vendors
• Useful for viewing logs, exceptions, real-time
data dumping, and code execution within
the current context

• Your best friend
• Though older IEs FREAK OUT when you
leave it in, remove before deploy!


console

• Ditch alert(), this is your var_dump()
• console.log(arg1, arg2, ...)
• console.info Same as log
• console.warn Icon indicator
• console.error Stack trace


BEWARE

• console.log is not blocking
• In heavily asynchronous applications,
sometimes value displayed is not value at
the moment of the call

• Your if/else conditionals will work yet
console.log will return something that should
cause them to fail


Network

• Display all network requests via a gantt-like
graph

• Shows browser-initiated (css, images, etc)
and script initiated (ajax) alike

• Along with both request and response
headers


Script

• Provides a familiar break-point debugging
workﬂow


Coding Styles


Coding Styles

• Mostly your standard C based style
techniques

• Special considerations
• Semi-colons? No semi-colons?
• Leading , ?
• Prototype Deﬁnition?


Comma Style
var dict = { var dict = {
foo: 'bar', foo: 'bar'
baz: 'bat' , baz: 'bat'
}; };


var Declaration Style
var foo; var foo
var bar; , bar
var baz; , baz;


Prototype Style
function Foo() { function Foo() {

} }

Foo.prototype.bar = function(){ Foo.prototype = {
bar: function() {
};
}
}


Code Quality Tools

• JSLint http://www.jslint.com/
• By Crockford, extremely strict and
inﬂexible. Code like Crockford!

• JSHint http://www.jshint.com/
• Fork, more ﬂexible according to your own
rules and preferences


Common Techniques


Safe Extension
App = window.App || {}; Grab global App dictionary, or
create if not found
App.utility = function() {
//Globally available, no
//conflicts Add a function utility, is now
}; globally accessible without fearing
collision with other functioned
similarly named


IIFE
(function(exports){ Immediately
exports.foo = function() { Invoked
Function
};
Expression
var bar = function() {
Function is deﬁned then
}; immediately invoked. Closest thing
})(window); to a namespace/module system.
foo(); //success
bar(); //not found!
Prevents variable leakage into outer
scopes


Pro-Tip

• Create an application namespace as a
dictionary in the global scope

• Add in any global level conﬁguration values


2001 JSON

Douglas Crockford
Awesome


JSON
• JavaScript Object Notation
• Serialization format that is basically
JavaScript code minus comments

• Can be eval()’ed
• But don’t! Use JSON2.js or equivalent
• Minimal overhead compared to XML
• No parsers required, native mapping

JSON
{"menu": { <menu id="file" value="File">
"id": "file", <popup>
"value": "File", <menuitem value="New"
"popup": { onclick="CreateNewDoc()" />
"menuitem": [ <menuitem value="Open"
{"value": "New", onclick="OpenDoc()" />
"onclick": "CreateNewDoc()"}, <menuitem value="Close"
{"value": "Open", onclick="CloseDoc()" />
"onclick": "OpenDoc()"}, </popup>
{"value": "Close", </menu>
"onclick": "CloseDoc()"}
]
}
}}


BREAK
HAMMER TIME


jQuery


January 2006 jQuery

John Resig
Author, jQuery


jQuery

• Cross-browser JavaScript library
• Simpliﬁes and normalizes DOM, AJAX, etc.
• Centers around using extended CSS
selectors to grab an element(s)


Selectors

• Superset of CSS3 selectors
• Custom Pseudo-Classes
• Filters in jQuery parlance


Selectors

• $('selector') returns jQuery object for
chaining purposes

• Chained methods will apply to all results if
selector matches multiple elements


Selectors
$("p:not(.special)") Finds all p tags that do not have the
.addClass("semi-special");
class special, and adds the class
semi-special


Selectors
$('select option:selected').val(); Gets the value of the selected option
in a select box


Testing Elements
$('.foo').is(':visible'); Tests matched element against
selector, in this case the jQuery
‘visible’ selector


Custom Filters

• jQuery provides the ability to create custom
ﬁlters

• :radio, :hidden, etc are custom ﬁlters
provided by default


jQuery
$("#foo") <div id="foo"></div>
.html("<strong>bar</strong> baz");
<div id="foo">
<strong>bar</strong> baz
</div>


Chaining

• Most all jQuery methods are chain-able
• If $() returns > 1 element, methods invoked
will apply to all matched


Chaining
$('ul.first') Find all ul with class first
.find('.foo')
.css('color', 'red')
.end().find('.bar') Find elements of class foo that are
.css('color', 'blue') children of the top level matched set
.end();
Apply the css style of color:red;

Pop the matching of .foo oﬀ the
jQuery object

Find elements of class bar that are
children of the top level matched set
(ul.first)

Apply the css style of color:blue;


Events

• jQuery wraps an event handling system
• Handles browser events, AJAX events, and
custom events


Events

$(document).ready(function() {
//Only execute when the document fires
//its onready event (page is done loading)
});

$(document).bind('ready', function() {
//Equivalent to the above
});

$(function() {
//Shortcut, equivalent to the above
});


Events

$('img').hover(function(){
//Do something when user hovers over
//any img tag
});


Events

• Event functions have the matched element
from jQuery bound as this


jQuery
$('a.foo').click(function(){ Listen for click on a.foo
var $this = $(this)
, href = $this.href();
this will be the speciﬁc a.foo
//href will be the clicked element that was clicked
//links href
});


Live Events

• Events using .bind are bound to the speciﬁc
element at the speciﬁc point in time it was
bound
• New elements that match will not be included

• Using .on or .off produces a delegate listener
that scans for bubbled events that match a
selector
• New elements that match said selector WILL be included


Live Events
$('.grandparent') All a tags that exist at some point
.on('click', 'a', function(e){
as a descendant of .grandparent
var $target = $(e.target);
will trigger this event on click
//$target will *usually*
//be the a tag, though Any future a tags that are added as
//sometimes it will be a a descendant of .grandparent
//nested tag
});
will trigger this event on click


Proxy
function Foo() {} Create a Prototype object for
example purposes, then create new
Foo.prototype.baz = function() {};
instance.
this.baz();
}; The ﬁrst click handler will fail. The
keyword this will not be a
var instance = new Foo(); reference to the instance of Foo as
expected, but a reference to the
$('element').click(instance.bar);
matched DOM element that was
$('element').click( clicked.
jQuery.proxy(
instance.bar, jQuery.proxy() will wrap your
instance function such that further
);
invocations will use the context you
);
set for this


Animation
$('.button').click(function(){ When .button is clicked, fade out
$('img.preview') img.preview over 600 milliseconds
.fadeOut(600, function() {
and then remove it from the DOM
$(this).remove();
});
});


animate
$('#book').animate({ Animate the following attributes
opacity: 0.25, over the course of 5 seconds:
left: '+=50',
opacity to 25%
height: 'toggle'
},
move to the right 50px
5000, toggle height
function() {
// Animation complete.
}
);


DOM Creation / Insertion

• Super easy! Provide html tag to $() and
jQuery will create the element and return it
wrapped in jQuery

• Second parameter is dictionary for
properties

• Then use methods like .append() to insert


DOM Creation
$('<div>'); Creates a DIV tag
$('<input type="text" />');
Creates an input (text) tag
$('<span>', {
'class': 'foo' Creates a span with the class of foo
});


DOM Override
$('#foo') Replaces the content of #foo with:
.html("<strong>Testing</strong>"); Testing
$('#bar')
.text("<strong>Testing</strong>");
Replaces the content of #bar with:
<strong>Testing</strong>


DOM Insertion
$('<div>') Insertion (inside):
.appendTo($('#foo'));
-append
$('#foo')
-appendTo
.append($('<span>')); -html
-prepend
$('<div>') -prependTo
.prependTo($('#bar')); -text
Insertion (outside):
$('#baz')
.after($('<span>'));
-after
-before
$('<div>') -insertAfter
.insertBefore($('#baz')); -insertBefore


AJAX

• Asynchronous JavaScript And XML
• Though never use XML, use JSON
• jQuery has an AJAX library
• Wraps all the different browser quirks
• IE is weird


AJAX

$.ajax({
url: "test.php",
success: function(data){
$('div.status').addClass("done")
.html(data);
}
});


Cross-Domain

• Browser will not ﬁre AJAX requests to a
domain outside the one said JavaScript was
loaded from

• If you include http://sub.domain.tld/ﬁle.js, it
cannot make AJAX requests to http://
another.tld/

• It can make requests to http://domain.tld/


JSONp

• Workaround to cross-domain
• Load like it is a javascript ﬁle (create an
inject a script tag into the DOM)

• Response is a function (deﬁned by a
callback GET parameter) that executes
and returns value


JSONp
domain.tld/api.json domain.tld/api.jsonp?callback=callback
["api", "response"] callback(["api", "response"]);


JSONp
$.ajax({
dataType: 'jsonp'
, url: 'http://search.twitter.com/search.json'
, data: {
q: "#tek12"
}
, success: function(resp) {
jQuery.each(resp.results, function(id, tweet){
$('<div>', {
'class': 'tweet'
})
.append($('<strong>', {
'class': 'user'
, text: '@' + tweet.from_user
}))
.append($('<span>',{
'class': 'text'
, text: tweet.text
}))
.appendTo($('#tweets'));
});
}
});


Extending: Custom Filters
$.expr[':'].inline = function(elem){ Create new :inline ﬁlter (checks
var $elem = $(elem)
if display is set to inline)
, disp = $elem.css('display');

return disp === 'inline'; Works like any other native inline
};

$('div a:inline')
.css('color', 'red');

$('span:not(:inline)')
.css('color', 'blue')


Resources

http://api.jquery.com/


Underscore.js


2009 Underscore.js

DocumentCloud


Underscore.js

• Functional, self-contained micro library
• Uses chaining for expressiveness
• Does not inject methods into native objects!


Functional Programming

• Functions are mappings between input and
output

• No side-effects
• Input A always results in output B
• No OOP
• LISP, Haskell, Erlang


Underscore.js

• _(coll).method(arg1, ..)
• _.method(coll, arg1, ..)


Underscore.js
Collections •union •has
•each •intersection •isEqual
•map •difference •isEmpty
•reduce •uniq •isElement
•reduceRight •zip •isArray
•find •indexOf •isObject
•filter •lastIndexOf •isArguments
•reject •range •isFunction
•all Functions •isString
•any •bind •isNumber
•include •bindAll •isFinite
•invoke •memoize •isBoolean
•pluck •delay •isDate
•max •defer •isRegExp
•min •throttle •isNaN
•sortBy •debounce •isNull
•groupBy •once •isUndefined
•sortedIndex •after Utility
•shuffle •wrap •noConflict
•toArray •compose •identity
•size Objects •times
Arrays •keys •mixin
•first •values •uniqueId
•initial •functions •escape
•last •extend •result
•rest •pick •template
•compact •defaults Chaining
•flatten •clone •chain
•without •tap •value


Map
var inp = [1, 2, 3] Maps function to each element in
, out = _.map(inp, function(n){ the input collection
return n*2;
});

//out = [2, 4, 6]


Reduce
var inp = [1, 2, 3]; Reduces collection to a single
value. mem is the initial state, each
_(inp).reduce(function(mem, n){
return mem + n;
successive iteration must be
}); returned

//Iter 0: mem = 1 | n = 2
//Iter 1: mem = 3 | n = 3
//Returns: 6


Pluck
var stooges = [ Iterates over a collection and
{name: 'moe', age: 40} extracts the values for the input key
, {name: 'larry', age: 50}
(assumes all elements in the
, {name: 'curly', age: 60}
];
collection are objects/arrays)

_.pluck(stooges, 'name');

//Returns ["moe", "larry", "curly"]


Max (Min)
var stooges = [ Returns the max item in a
{name: 'moe', age: 40} collection.
, {name: 'larry', age: 50}
, {name: 'curly', age: 60}
];
If second argument (iterator)
provided, will use to produce the
_.max(stooges, function(s){ value to be compared
return s.age;
});

//Returns {name: 'curly', age: 60}


Keys
_.keys({ Returns the keys from a dictionary
one: 1, as an array
two: 2,
three: 3
});

//Returns ["one", "two", "three"]


Defaults
var iceCream = { Maps a duplicate input dictionary
flavor: "chocolate" on top of a predeﬁned “default”
};
dictionary
_.defaults(iceCream, {
flavor: "vanilla"
, sprinkles: "lots"
});

//Returns {flavor : "chocolate",
sprinkles : "lots"}


Chaining
var stooges = [ When chain is initiated, method
{name : 'curly', age : 25}, return a self-reference back to
{name : 'moe', age : 21},
underscore but with the value
{name : 'larry', age : 23}
];
attached [similar to opening with
_(val)].
var youngest = _.chain(stooges)
.sortBy(function(s){ The chain continues until the value
return s.age;
is extracted using .value()
})
.map(function(s){
return s.name + ' is ' + s.age;
})
.first()
.value();

//Returns "moe is 21"


Chain: FUN!
_(request.params).chain() chain: begins a chain
.map(function(v, k) {
return [k,v];
map: takes dictionary and maps to
})
.sortBy(function(a) { a nested array [[key, val],
return a[0]; [key, val], ..]
})
.reduce(function(s, v){ sortBy: sorts array returned by map
s[v[0]] = v[1]; return s;
by key (ﬁrst element)
}, {})
.value();
reduce: reforms an object using the
nested list, [0] as key and [1] as
value

value: spits out the value an ends
the chain


Backbone.js


2010 Backbone.js

DocumentCloud


Backbone.js

• Micro application framework
• Relies on jQuery/Zepto and Underscore.js
• Provides Views, Models, Collections, and
Router

• If standard REST, default sync will work out
of box


Model

• Fires events on value changes
• Must use model.get() and model.set()


Collection

• Collection of models
• Can be enforced
• Fires events on add, remove, reset, etc


View

• Creates own DOM object (or utilizes existing
one)

• Easy event delegation/undelegation


Router

• Hash/History Router
• History management abstraction provided


Require.js


2009 Require.js

James Burke


Require.js

• Implements AMD
• Asynchronous Module Deﬁnition
• Dependency Management


r.js

• Optimizer, Compiler
• Concatenates dependencies into single ﬁle,
optionally runs closure/uglifyjs/etc


Other Libraries Of Note


Compilers/Compressors

• UglifyJS
• http://marijnhaverbeke.nl/uglifyjs

• JSmin:
• http://www.crockford.com/javascript/jsmin.html

• YUI Compressor
• http://developer.yahoo.com/yui/compressor/
http://marijnhaverbeke.nl/uglifyjs


Lawnchair

• HTML5 localstorage abstraction
• Good suite of storage adapaters
• DOM, webkit-sqlite, etc

http://brian.io/lawnchair


Moment.js

• Date/Time library
• Finally! Almost as easy as DateTime and
strtotime()

http://momentjs.com/


Enyo

• Application Framework
• Developed for the HP/Palm TouchPad
• Now open-source
• Designed for nested views and complex,
ﬁnger-based UI

http://enyojs.com/


And Many More!

http://microjs.com/


https://joind.in/6503

http://bit.ly/js-ruby-wat

JavaScript Primer

More Related Content

What's hot

Similar to JavaScript Primer

Recently uploaded

JavaScript Primer