Javascript the Interlingua of the Web

Javascript
The Interlingua of the Web
Anders Janmyr
http://anders.janmyr.com
anders.janmyr@jayway.com
@andersjanmyr

Monday, October 4, 2010

Ugly
Javascript


Beautiful
Javascript


Y-Combinator
Scheme (Lisp)
(define Y
(lambda (X)
((lambda (procedure)
(X (lambda (arg)
((procedure procedure)
arg))))
(lambda (procedure)
(X (lambda (arg)
((procedure procedure)
arg)))))))


Y-Combinator
Javascript
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"
}
};


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

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


Retrieving non-
existent properties
kjell.firstname // undefined
kjell["NAME"] // undefined
kjell.home.country // Error


Setting non-existent
properties
kjell.firstname = 'Sven';
kjell["NAME"] = 'SVEN';

kjell.firstname // 'Sven'


Prototypical Inheritance
using Object.create
var 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’


rudolph.kind // ‘Malayan’

kjell.kind = 'Baird';

rudolph.kind // ‘Baird’


delete rudolph.name

rudolph.name // ‘Kjell’


Prototypical
Inheritance
new Constructor();

Returns a new object with a link to

Constructor.prototype


Prototypical
Inheritance
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

lambda
function() {};


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)


this
Invocation
this is an extra this
Form
dynamic the global
parameter that function
object
depends on the method kjell
calling form
constructor a new object

apply rudolph


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 || {};


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

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


Encapsulation
var Esperanto = Esperanto || {};

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

return {
example: function() {
return privFunc();
}
}
}()


Local Functions
costData: 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
• ...

jQuery
write 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


Minification

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

• 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


Demo
Browser Command Line

• jQuery (10 lines)
• Sinatra (10 lines)
• LiveReload


Questions?
Anders Janmyr
http://anders.janmyr.com
anders.janmyr@jayway.com
@andersjanmyr


Javascript the Interlingua of the Web

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Javascript the Interlingua of the Web