Javascript the Language of the Web

Javascript
the Programming Language of the Web
Anders Janmyr
http://anders.janmyr.com
anders.janmyr@jayway.com

Tuesday, November 9, 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);
});
});
}


Syntax


Values


Number

• 64-bit ﬂoating point Double
• 0.1 + 0.2 = 0.30000000000000004

• NaN


Strings

• Immutable
• ‘a string’ == “a string”


Booleans

• true
• false
• Boolean()
• returns false for falsy values
• false, null, undeﬁned, "", 0, NaN


null


Undeﬁned

• Not even null
• Default value
• Parameters
• Arguments
• Non-existent members


Object

• Everything else
• Including functions


Statements


var

• Declares a variable
• If you forget, it will be deﬁned globally!
• Scope of variable is the function


Conditionals
• If
• Switch - Case
if (unit == 'Litre')
return value;
else
return this.withTwoDecimals(value / 3.7854);


Loops
• while
• do - while
• for(var i; i<42; i++)
• for (key in object)
for (var key in market) {
current.market[key] = gui.convert(market[key]);
}


Exceptions
try {
setSelected(target);
f();
} catch (err) {
console.log(err);
}

throw(anyObject)


Disruptive

• return [value]
• break [label]
• continue [label]
• throw object


Literals
number 1.234
string ‘anders’, “janmyr”
object {}
array []
function function() {}
regexp /^anders$/


typeof
type typeof

object 'object'

function 'function'

array 'object'

number 'number'

string 'string'

boolean 'boolean'
null 'object'
undefined 'undefined'


Equality

• 5 == “5” // true
• 5 === “5” // false


Object


Object

Hashtable


Object

Dynamic


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'


delete kjell.firstname

kjell.firstname // undefined


Prototypical


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

rudolph.name // “Kjell”


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’


new Constructor();

Returns a new object with a link to
Constructor.prototype


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


name kjell
kind Malayan...

id a4r54ed
name rudolph
prototype


Array


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

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"]
}


Functions


Function

lambda
function() {};


Function

First class
object


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
• Boolean.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”


Scope


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
this is an extra Form
parameter that the global
function
object
depends on the
calling form method kjell

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
Variables


The global Object

• Container for all variables
• On browsers window == global
• Any var not declared is global
• Global variables are BAD


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


Enforcing New

function User(first, last) {
if ( !(this instanceOf User))
return new User(first, last);

this.name = first + ‘ ‘ + last;
}


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


Localtunnel
• gem install localtunnel
• localtunnel -k my_public_ssh.key
• localtunnel 80
• Port 80 is now publicly accessible from
http://8bv2.localtunnel.com ...

•


Lab

http://10.48.44.155/~andersjanmyr/


Thank you!
Anders Janmyr
http://anders.janmyr.com
anders.janmyr@jayway.com


Javascript the Language of the Web

More Related Content

What's hot

Viewers also liked

Similar to Javascript the Language of the Web

Recently uploaded

Javascript the Language of the Web