javascript the language of the web

Javascriptthe Programming Language of the Web

http://[email protected]

Anders Janmyr

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


Syntax


Values


Number

• 64-bit floating 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, undefined, "", 0, NaN


null


Undefined

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


Exceptionstry { 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$/


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


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'


delete kjell.firstname

kjell.firstname // undefined


Prototypical


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’


kjell.kind = 'Baird';

rudolph.kind // ‘Baird’

rudolph.kind // ‘Malayan’


delete rudolph.name

rudolph.name // ‘Kjell’



new Constructor();

Returns a new object with a link toConstructor.prototype



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



name kjell

kind Malayan...

id a4r54edname 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

function() {};

lambda


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)


thisInvocation

Formthis

functionthe global

object

method kjell

constructor a new object

apply rudolph

this is an extra 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 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);


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


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


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

Localtunnel

• gem install localtunnel

• localtunnel -k my_public_ssh.key

• localtunnel 80• Port 80 is now publicly accessible from

http://8bv2.localtunnel.com ...

•


http://8bv2.localtunnel.com

http://8bv2.localtunnel.com

Lab

http://10.48.44.155/~andersjanmyr/


http://localhost/~andersjanmyr/

http://localhost/~andersjanmyr/

Thank you!

http://[email protected]

Anders Janmyr




javascript the language of the web

Technology

falsy values false

scope of variable

litrereturn value elsereturn

webanders janmyr http

programming language

switch case

strings immutable