Javascript the Interlingua of the Web

JavascriptThe Interlingua of the Web

http://[email protected]

@andersjanmyr

Anders Janmyr

Monday, October 4, 2010

mailto:[email protected]


Ugly Javascript


Beautiful Javascript


Y-CombinatorScheme (Lisp)

(define Y (lambda (X) ((lambda (procedure) (X (lambda (arg)

((procedure procedure) arg))))

(lambda (procedure) (X (lambda (arg)

((procedure procedure) arg)))))))


Y-CombinatorJavascript

function Y (X) { return (function(procedure) { return X(function(arg) { return procedure(procedure)(arg); }); })(function(procedure) { return X(function(arg) { return procedure(procedure)(arg); }); });}


Object

Dynamic


Object

Hashtable


Object

Prototypical


Object Literal

var empty_object = {};


var kjell = { name: "Kjell", "kind": "Malayan"};


var kjell = { name: "Kjell", "kind": "Malayan" address: { country: "Denmark" }};


Retrievalkjell.name // “Kjell”kjell["name"] // “Kjell”

// Denmarkkjell.address.country kjell['address']["country"]


Retrieving non-existent properties

kjell.firstname // undefinedkjell["NAME"] // undefinedkjell.home.country // Error


Setting non-existent properties

kjell.firstname = 'Sven';kjell["NAME"] = 'SVEN';

kjell.firstname // 'Sven'


Prototypical Inheritance using Object.createvar rudolph = Object.create(kjell);

rudolph.name // “Kjell”


Prototypical Inheritance

name Kjell

kind Malayan

id a4r54ed

prototype


rudolph.name = 'Rudolph';

rudolph.name // “Rudolph”kjell.name // “Kjell”

rudolph.kind // ‘Malayan’


kjell.kind = 'Baird';

rudolph.kind // ‘Baird’

rudolph.kind // ‘Malayan’


delete rudolph.name

rudolph.name // ‘Kjell’



new Constructor();

Returns a new object with a link to

Constructor.prototype



Object.create = function(o) { function F() {} F.prototype = o; return new F();}


Arrays

• Array inherits from object

• Indexes are converted to strings

• Magic length property• Always one larger than the highest int

property


Array Literals

• [ ]

• names = [ ʻRudolphʼ, ʻKjellʼ, ʻTorstenʼ]

• typeof value == ʻobjectʼ• value.constructor === Array


Array Methods

• concat• join• pop• push• slice• sort• splice


JSON{ "version": "1.0", "markets": [ { "name": "Europe", "currency": "EUR"}, { "name": "North America", "currency": "USD"}, { "name": "Other", "currency": "USD"} ], "serviceTypes": ["Maintenence", "WearingPart"], "valueTypes": ["Market value", "Trade in value"]}


Function

First class object


Function

function() {};

lambda


Function Statement

function foo() {}

expands to

var foo = function foo() {};


Functions

Can be defined inside other functions!


residualValues: function(cur) { var self = this; return function() { return [1,2,3,4,5].map(function(age) { return { years: age, value: self.tradePercent(cur, age) }; }); }}


Methods

functions stored in objects


Built-in Prototypes

• Object.prototype

• Array.prototype

• Function.prototype

• Number.prototype

• String.prototype


Array.prototype.contains = function(element) { for (var i = 0; i < this.length; i++) { if (this[i] == element) return true; } return false;}

[1, 2, 3].contains(3); // true


Function.prototype.method = function(name, func) {

this.prototype[name] = func;return this;

}


String.method(‘trim’, function() { return this.replace(/^\s+|\s+$/g, ‘’);}

“ tapir “.trim(); // “tapir”


Dynamics


Scope

The function is the scope of the variables


Invocation Forms• Function form• sleep(10)

• Method form• kjell.sleep(10) • kjell[“sleep”](10)

• Constructor form• new sleep(10)

• Apply form• sleep.apply(rudolph, 10)


thisInvocation

Formthis

functionthe global

object

method kjell

constructor a new object

apply rudolph

this is an extra dynamic

parameter that depends on the

calling form


arguments

• A special array like, DYNAMIC, parameter

• All the arguments of the invocation


function sum() { var i, n = arguments.length, total = 0; for (i = 0; i < n; i += 1) { total += arguments[i]; } return total;}

sum(1, 2, 3, 4);


Dynamic Compilation

• eval• Evaluates a string and returns the result.

• new Function(parameterArray, codeString)• Creates and returns a function.• var add=new Function("a", "b", "return a+b;");


Global Object• Container for all variables

• On browsers window == global

• Any var not declared is global

• Global variables are Dangerous


Good Practices


Modules

var MyNamespace = {};

var MyNS = MyNS || {};


CascadesetFirst: function(name) { this.first = name; return this;}

person.setFirst(“Anders”).setLast(“Janmyr”).setAge(40);


Encapsulationvar Esperanto = Esperanto || {};

Esperanto.Lab = function() { var privVar = "example"; function privFunc() { return privVar; } return { example: function() { return privFunc(); } }}()


Local FunctionscostData: function(current) { var data = {}; function addEntry(name, cost) { data[name + "PerHour"] = model.withTwoDec(cost/hours); data[name] = model.noDecimalsWithSeparator(cost); };

addEntry("interest", this.financialCost(current)), addEntry("depreciation", this.depreciationCost(current)), return data;},


self = this

attachFormListener: function(form, object) { var self = this; function populator(event) { self.populateFromForm(form, object); object.notify(); }; form.getElements().each(function(child) { child.observe('change', populator); });},


Mixins

Object.mixin = function(destination, source) { for (property in source) destination[property] = source[property]; return destination;}


Test

• QUnit

• JsTest

• ScrewUnit

• jSpec

• ...


jQuerywrite less, do more.



jQuery Philosophy

• Find some HTML

• Do something to it


Find some HTML$(“div”)

<html> <body> <div>Malayan Tapir</div> <div>Baird Tapir</div></body> </html>


Do something to it!$(“div”).addClass(‘cool’);

<html> <body> <div class=‘cool’>Malayan Tapir</div> <div class=‘cool’>Baird Tapir</div></body> </html>


Document Ready

$(function(){ // Document is ready});


Tools


Debuggers

• Firebug

• Apple Dev Tools

• Chrome Dev Tools

• Internet Explorer Developer Tools


CSS Tools

• http://codylindley.com/jqueryselectors/

• Selector Gadget

• Nokogiri• XML, HTML, SAX Parser


http://codylindley.com/jqueryselectors/

http://codylindley.com/jqueryselectors/

Minification

• JsMin• http://www.crockford.com/javascript/

jsmin.html

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


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




http://developer.yahoo.com/yui/compressor/

http://developer.yahoo.com/yui/compressor/

Build Tools

• Rake

• SCons

• Ant

• Scripts


File Watchers

• xrefresh for Firefox and IE• http://xrefresh.binaryage.com/

• LiveReload for Safari and Chrome• http://github.com/mockko/livereload

• Watchr• gem install watchr


http://xrefresh.binaryage.com

http://xrefresh.binaryage.com

http://github.com/mockko/livereload

http://github.com/mockko/livereload


DemoBrowser Command Line

• jQuery (10 lines)

• Sinatra (10 lines)

• LiveReload


Questions?http://anders.janmyr.com

[email protected]@andersjanmyr

Anders Janmyr


http://anders.janmyr.com








Documents

Javascript the Interlingua of the Web