javascript the interlingua of the web

JavascriptThe Interlingua of the Web

http://anders.janmyr.comanders.janmyr@jayway.com

@andersjanmyr

Anders Janmyr

Monday, October 4, 2010

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

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

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

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

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

DemoBrowser Command Line

• jQuery (10 lines)

• Sinatra (10 lines)

• LiveReload

Questions?http://anders.janmyr.com

anders.janmyr@jayway.com@andersjanmyr

Anders Janmyr

javascript the interlingua of the web

Documents

interlingua e analisi degli errori apprendimenti di base a....

minidictionario interlingua – lituano interlingua ......

interlingua partners: british council kulturkontakt, austria...

union mundial pro interlingua -...

the structure of interlingua in translator

mini-anthologia in interlingua 3 in... · 2012-06-25 ·...

3 rue du rh´ne 44100 nantes interlingua

interlingua events, evenementiel multilingue presentation-fr

bartlett/latino_viventi.pdf · latino viventi per 1923...

eiw: javascript the language1 the javascript language

lûgatçe türkçe-interlingua turkce... · 2017. 3....

interlingua-based englishâ€“hindi machine translation...

parsing into the interlingua using phrase-level grammars and...

biblia interlingua 01-genesis

interlingua e intercultura

lege interlingua e apprende su structura interlingua...

interlingua grammar -...

grammatica de interlingua - union mundial pro interlingua

interlingua events presentation-en

architectures for mt – direct, transfer and...