JavaScript Primer

HTML5 and JavaScriptPart Deux

Thursday, July 5, 12

Daniel Cousineau@dcousineau

History

MochaLiveScript

JavaScript

Brendan EichCTO, Mozilla Corp.

April 1995

JavaScriptECMAScript

ActionScript

JScript

Basics

Data Types•number

• string

•boolean

•object

•null

•NaN

•undefined

Strings

•Are Objects, have methods

"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

Strings

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

String to Number

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

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

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

Objects

in or hasOwnProperty()

•Tough call:

•.hasOwnProperty() more consistent

•in checks inherited properties

•Used in for loop

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

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); //1arr.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]

Arrays

delete

•Removes element from an object

• “Removes element from an array”

•Not really, just sets it to undefined

Functions

•Are Objects as well

• “Elevated”

•You can use a named function before it is defined in code

•Function definitions are elevated to the top

function Foo() { //...}

Foo(); //validBar(); //valid

function Bar() { //...}

Functions

function Foo() { }

Foo.bar = "value";

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

Functions

Function Arguments

•No way to assign default arguments

•But arguments are not required

• If an argument is not specified, it is set to undefined

arguments

•A special variable found inside a function

•A not-quite array object containing all the function arguments

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

arguments

typeof

•Determines a variables type

•Returns a string

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"

typeof

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 DOMThursday, July 5, 12

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 defined outside itself

function Foo() { var count = 0; return function() { count = count + 1; return count; };}

var bar = Foo();

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

Closures

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

var add2 = createAdder(2);

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

var add3 = createAdder(3);

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

Closures

(function(exports, undefined){ //ALL your code here var localVar = "bar" globalVar = "baz"; exports.foo = "bat";})(window);

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

Module Pattern

BEWARE: export (singular) is a reserved word in SafariThursday, July 5, 12

Scoping

Global & Local

•Functions are the only way to create new scopes

•Variables defined with var are local

•Variables defined without var are global

•Global variables are members of window

var outerScope = 10;var outerScope2 = 10;

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

Foo();

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

Global & Local

function Foo() { var baz = 1; function Bar() { return baz; } return Bar();}

Foo(); //1

Lexical Scopingfunction Foo() { var baz = 1; return Bar();}

function Bar() { return baz;}

Foo(); //baz is not defined

Named functions are parsed and made available before general evaluation (thus “hoisted” to the top of the file).

Anonymous functions, or functions assigned to variables, require evaluation before they become available

foo(); //called foo!

function foo() { console.log('called foo!');}

foo(); //called foo!

bar(); //undefined is not a function

var bar = function() { console.log('called bar!');}

bar(); //called bar!

Hoisting

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

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

Practical: Currying

•Trips everyone up

•Special variable used within a function

•Refers to the “contextual object”

•Changes based on where a function executes

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

Foo.baz(); //"bar"

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

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

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!

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"

call & apply

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

Practical: Binding

Exceptions

•All errors are thrown

•Classic try...catch...finally blocks

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}

Exceptions

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

Foo‣ bar‣ prototype‣ baz‣ constructor‣ __proto__

function Foo() { //The "Constructor"}

Foo.bar = function() { //A "Static" Function}

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

OOP... Kinda...

instance‣ __proto__‣ baz‣ constructor‣ __proto__‣ ...

var instance = new Foo();

instance.baz(); //worksinstance.bar(); //error

Foo.bar(); //worksFoo.baz(); //errorFoo.prototype.baz(); //works

instance‣ bat‣ __proto__‣ baz‣ constructor‣ __proto__‣ ...

instance.bat = function() { /* ... */ }

instance.bat(); //works

Foo.bat(); //errorFoo.prototype.bat(); //error

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(); //1foo2.bar(); //2

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

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

Overriding Prototype

Asynchronous

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

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

//clearInterval(id); to stop

setInterval

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

//clearTimeout(id); to cancel

setTimeout

setInterval()

setTimeout()

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

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

Nifty Trick

•Document Object Model

•API to interact with the HTML/XHTML document

Basic selection methods in native DOM

document .getElementById('foo');

document .getElementsByClassName('.bar');

document .getElementsByTagName('script');

DOM: Selection

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);

DOM: Creation

Creates a script element, set its src and async properties

Insert the script before the first script tag in the body of the document

var script = document.createElement('script');script.src = "http://path.to/script.js";script.async = true;

var s = document .getElementsByTagName('script')[0];

s.parentNode .insertBefore(script, s);

Async Script Loading

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 workflow

Coding Styles

•Mostly your standard C based style techniques

•Special considerations

•Semi-colons? No semi-colons?

•Leading , ?

•Prototype Definition?

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

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

Comma Style

var foo;var bar;var baz;

var foo , bar , baz;

var Declaration Style

function Foo() { }

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

Prototype Stylefunction Foo() { }

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

Code Quality Tools

• JSLint http://www.jslint.com/

•By Crockford, extremely strict and inflexible. Code like Crockford!

• JSHint http://www.jshint.com/

•Fork, more flexible according to your own rules and preferences

Common Techniques

Grab global App dictionary, or create if not found

Add a function utility, is now globally accessible without fearing collision with other functioned similarly named

App = window.App || {};

App.utility = function() { //Globally available, no //conflicts};

Safe Extension

Immediately Invoked Function Expression

Function is defined then immediately invoked. Closest thing to a namespace/module system.

Prevents variable leakage into outer scopes

(function(exports){ exports.foo = function() { }; var bar = function() { };})(window);

foo(); //successbar(); //not found!

Pro-Tip

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

•Add in any global level configuration values

Douglas CrockfordAwesome

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

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

JSON<menu id="file" value="File"> <popup> <menuitem value="New" onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup></menu>

BREAK HAMMER TIME

jQuery

John ResigAuthor, jQuery

January 2006

jQuery

•Cross-browser JavaScript library

•Simplifies 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

Finds all p tags that do not have the class special, and adds the class semi-special

$("p:not(.special)") .addClass("semi-special");

Selectors

Gets the value of the selected option in a select box

$('select option:selected').val();

Selectors

Tests matched element against selector, in this case the jQuery ‘visible’ selector

$('.foo').is(':visible');

Testing Elements

Custom Filters

• jQuery provides the ability to create custom filters

•:radio, :hidden, etc are custom filters provided by default

$("#foo") .html("<strong>bar</strong> baz");

jQuery<div id="foo"></div>

Chaining

•Most all jQuery methods are chain-able

• If $() returns > 1 element, methods invoked will apply to all matched

Find all ul with class first

Find elements of class foo that are children of the top level matched set

Apply the css style of color:red;

Pop the matching of .foo off 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;

$('ul.first') .find('.foo') .css('color', 'red') .end().find('.bar') .css('color', 'blue') .end();

Chaining

Events

• jQuery wraps an event handling system

•Handles browser events, AJAX events, and custom 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

Listen for click on a.foo

this will be the specific a.foo element that was clicked

$('a.foo').click(function(){ var $this = $(this) , href = $this.href(); //href will be the clicked //links href});

jQuery

Live Events

•Events using .bind are bound to the specific element at the specific 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

All a tags that exist at some point as a descendant of .grandparent will trigger this event on click

Any future a tags that are added as a descendant of .grandparent will trigger this event on click

$('.grandparent') .on('click', 'a', function(e){ var $target = $(e.target); //$target will *usually* //be the a tag, though //sometimes it will be a //nested tag });

Live Events

Create a Prototype object for example purposes, then create new instance.

The first click handler will fail. The keyword this will not be a reference to the instance of Foo as expected, but a reference to the matched DOM element that was clicked.

jQuery.proxy() will wrap your function such that further invocations will use the context you set for this

function Foo() {}

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

var instance = new Foo();

$('element').click(instance.bar);

$('element').click( jQuery.proxy( instance.bar, instance ););

When .button is clicked, fade out img.preview over 600 milliseconds and then remove it from the DOM

$('.button').click(function(){ $('img.preview') .fadeOut(600, function() { $(this).remove(); });});

Animation

Animate the following attributes over the course of 5 seconds: opacity to 25% move to the right 50px toggle height

$('#book').animate({ opacity: 0.25, left: '+=50', height: 'toggle' }, 5000, function() { // Animation complete. });

animate

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

Creates a DIV tag

Creates an input (text) tag

Creates a span with the class of foo

$('<div>');

$('<input type="text" />');

$('<span>', { 'class': 'foo'});

DOM Creation

Replaces the content of #foo with:Testing

Replaces the content of #bar with:<strong>Testing</strong>

$('#foo') .html("<strong>Testing</strong>"); $('#bar') .text("<strong>Testing</strong>");

DOM Override

Insertion (inside):-append-appendTo-html-prepend-prependTo-textInsertion (outside):-after-before-insertAfter-insertBefore

$('<div>') .appendTo($('#foo'));

$('#foo') .append($('<span>'));

$('<div>') .prependTo($('#bar')); $('#baz') .after($('<span>'));

$('<div>') .insertBefore($('#baz'));

DOM Insertion

•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({ url: "test.php", success: function(data){ $('div.status').addClass("done") .html(data); }});

Cross-Domain

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

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

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

•Workaround to cross-domain

•Load like it is a javascript file (create an inject a script tag into the DOM)

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

["api", "response"] callback(["api", "response"]);

JSONpdomain.tld/api.json domain.tld/api.jsonp?callback=callback

$.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')); }); }});

Create new :inline filter (checks if display is set to inline)

Works like any other native inline

$.expr[':'].inline = function(elem){ var $elem = $(elem) , disp = $elem.css('display'); return disp === 'inline';};

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

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

Extending: Custom Filters

(function($, global, undefined){

var defaults = { foo: "bar" };

var methods = { init: function(options) { // Merge user defined options options = $.extend(true, {}, defaults, options); return this; }, method: function() { }, }

$.fn.foo = function(method) { if( methods[method] ) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method == 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist'); return undefined; } }

})(jQuery, window);

Resources

http://api.jquery.com/

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.jsCollections

•each•map•reduce•reduceRight•find•filter•reject•all•any•include•invoke•pluck•max•min•sortBy•groupBy•sortedIndex•shuffle•toArray•size

Arrays•first•initial•last•rest•compact•flatten•without

•union•intersection•difference•uniq•zip•indexOf•lastIndexOf•range

Functions•bind•bindAll•memoize•delay•defer•throttle•debounce•once•after•wrap•compose

Objects•keys•values•functions•extend•pick•defaults•clone•tap

•has•isEqual•isEmpty•isElement•isArray•isObject•isArguments•isFunction•isString•isNumber•isFinite•isBoolean•isDate•isRegExp•isNaN•isNull•isUndefined

Utility•noConflict•identity•times•mixin•uniqueId•escape•result•template

Chaining•chain•value

Maps function to each element in the input collection

var inp = [1, 2, 3] , out = _.map(inp, function(n){ return n*2; });

//out = [2, 4, 6]

Reduces collection to a single value. mem is the initial state, each successive iteration must be returned

var inp = [1, 2, 3];

_(inp).reduce(function(mem, n){ return mem + n;});

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

Reduce

Iterates over a collection and extracts the values for the input key (assumes all elements in the collection are objects/arrays)

var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60}];

_.pluck(stooges, 'name');

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

Returns the max item in a collection.

If second argument (iterator) provided, will use to produce the value to be compared

var stooges = [ {name: 'moe', age: 40} , {name: 'larry', age: 50} , {name: 'curly', age: 60}];

_.max(stooges, function(s){ return s.age; });

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

Max (Min)

Returns the keys from a dictionary as an array

_.keys({ one: 1, two: 2, three: 3});

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

Maps a duplicate input dictionary on top of a predefined “default” dictionary

var iceCream = { flavor: "chocolate"};

_.defaults(iceCream, { flavor: "vanilla" , sprinkles: "lots"});

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

Defaults

When chain is initiated, method return a self-reference back to underscore but with the value attached [similar to opening with _(val)].

The chain continues until the value is extracted using .value()

var stooges = [ {name : 'curly', age : 25}, {name : 'moe', age : 21}, {name : 'larry', age : 23}];

var youngest = _.chain(stooges) .sortBy(function(s){ return s.age; }) .map(function(s){ return s.name + ' is ' + s.age; }) .first() .value();

//Returns "moe is 21"

Chaining

chain: begins a chain

map: takes dictionary and maps to a nested array [[key, val],[key, val], ..]

sortBy: sorts array returned by map by key (first element)

reduce: reforms an object using the nested list, [0] as key and [1] as value

value: spits out the value an ends the chain

_(request.params).chain() .map(function(v, k) { return [k,v]; }) .sortBy(function(a) { return a[0]; }) .reduce(function(s, v){ s[v[0]] = v[1]; return s; }, {}) .value();

Chain: FUN!

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

•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

•Creates own DOM object (or utilizes existing one)

•Easy event delegation/undelegation

Router

•Hash/History Router

•History management abstraction provided

Require.js

James Burke

Require.js

• Implements AMD

•Asynchronous Module Definition

•Dependency Management

•Optimizer, Compiler

•Concatenates dependencies into single file, 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/

•Application Framework

•Developed for the HP/Palm TouchPad

•Now open-source

•Designed for nested views and complex, finger-based UI

http://enyojs.com/

And Many More!

http://microjs.com/

https://joind.in/6503

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

JavaScript Primer

Technology

Measuring JavaScript Performance, JavaScript Games

Javascript Guide - Belajar Pemrograman JavaScript

Loopage Scene 6. JavaScript Loops SchemeSelfJava JavaScript

Javascript e Prototype JS Overview. Javascript essencial

JavaScript for Beginners - Daniel Wintersteinwinterstein.me.uk/javascript/JavaScript Course Notes.pdf · 4 A Tour of JavaScript ... JavaScript for Beginners 8 o An example of a server-side

Javascript Primer

JavaScript for · PDF file“JavaScript,nottobeconfusedwithJava ... Whenthereisduplicationinthetestssetup,wecanextractitoutusingthe“beforeEach” function ... JavaScript for Testers

JS275: Mastering JavaScript (with · 4. JavaScript Patterns » Pattern Enablers • Prototyping • Object Literals • Namespaces • Closures 1. JavaScript Primer » Variables,

EIW: Javascript the Language1 The JavaScript Language

Attacking Edge through the JavaScript compiler...JavaScript engine primer 3. ChakraCore internals basics 4. Just-In-Time (JIT) compilation of JavaScript and its problematic 5. Chakra’s

JavaScript Programming - eecs.csuohio.eduCS142 Lecture Notes - JavaScript Programming Stepping through the execution ... CS142 Lecture Notes - JavaScript Programming JavaScript: The

JavaScript Beginner's guide to JavaScript

JavaScript JavaScript Introduction. Q. What is JavaScript? Ans. JavaScript was designed to add interactivity to HTML pages. JavaScript is a scripting

Javascript session 01 - Introduction to Javascript

Cyberaide JavaScript: A JavaScript Commodity Grid Kit

JavaScript CMPT 281. Outline Introduction to JavaScript Resources What is JavaScript? JavaScript in web pages

JavaScript For Beginners - Learn JavaScript From Scratch

TDC2016POA | Trilha JavaScript - JavaScript Promises na Prática

JavaScript Awesomeness: JavaScript for Beginners

JavaScript & jQuery JavaScript and jQuery introduction