Download - Javascript the Language of the Web
Javascriptthe Programming Language of the Web
http://[email protected]
Anders Janmyr
Tuesday, November 9, 2010
Ugly Javascript
Tuesday, November 9, 2010
Beautiful Javascript
Tuesday, November 9, 2010
Y-CombinatorScheme (Lisp)
(define Y (lambda (X) ((lambda (procedure) (X (lambda (arg)
((procedure procedure) arg))))
(lambda (procedure) (X (lambda (arg)
((procedure procedure) arg)))))))
Tuesday, November 9, 2010
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); }); });}
Tuesday, November 9, 2010
Syntax
Tuesday, November 9, 2010
Values
Tuesday, November 9, 2010
Number
• 64-bit floating point Double
• 0.1 + 0.2 = 0.30000000000000004
• NaN
Tuesday, November 9, 2010
Strings
• Immutable
• ‘a string’ == “a string”
Tuesday, November 9, 2010
Booleans
• true
• false
• Boolean()
• returns false for falsy values
• false, null, undefined, "", 0, NaN
Tuesday, November 9, 2010
null
Tuesday, November 9, 2010
Undefined
• Not even null
• Default value
• Parameters
• Arguments
• Non-existent members
Tuesday, November 9, 2010
Object
• Everything else
• Including functions
Tuesday, November 9, 2010
Statements
Tuesday, November 9, 2010
var
• Declares a variable
• If you forget, it will be defined globally!
• Scope of variable is the function
Tuesday, November 9, 2010
Conditionals
• If
• Switch - Case
if (unit == 'Litre') return value;else return this.withTwoDecimals(value / 3.7854);
Tuesday, November 9, 2010
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]);}
Tuesday, November 9, 2010
Exceptionstry { setSelected(target); f();} catch (err) { console.log(err);}
throw(anyObject)
Tuesday, November 9, 2010
Disruptive
• return [value]
• break [label]
• continue [label]
• throw object
Tuesday, November 9, 2010
Literals
number 1.234
string ‘anders’, “janmyr”
object { }
array [ ]
function function() {}
regexp /^anders$/
Tuesday, November 9, 2010
typeoftype typeof
object 'object'
function 'function'
array 'object'
number 'number'
string 'string'
boolean 'boolean'
null 'object'
undefined 'undefined'
Tuesday, November 9, 2010
Equality
• 5 == “5” // true
• 5 === “5” // false
Tuesday, November 9, 2010
Object
Tuesday, November 9, 2010
Object
Hashtable
Tuesday, November 9, 2010
Object
Dynamic
Tuesday, November 9, 2010
Object Literal
var empty_object = {};
Tuesday, November 9, 2010
var kjell = { name: "Kjell", "kind": "Malayan"};
Tuesday, November 9, 2010
var kjell = { name: "Kjell", "kind": "Malayan" address: { country: "Denmark" }};
Tuesday, November 9, 2010
Retrievalkjell.name // “Kjell”kjell["name"] // “Kjell”
// Denmarkkjell.address.country kjell['address']["country"]
Tuesday, November 9, 2010
Retrieving non-existent properties
kjell.firstname // undefinedkjell["NAME"] // undefinedkjell.home.country // Error
Tuesday, November 9, 2010
Setting non-existent properties
kjell.firstname = 'Sven';kjell["NAME"] = 'SVEN';
kjell.firstname // 'Sven'
Tuesday, November 9, 2010
delete kjell.firstname
kjell.firstname // undefined
Tuesday, November 9, 2010
Prototypical
Tuesday, November 9, 2010
Prototypical Inheritance using Object.create
var rudolph = Object.create(kjell);
rudolph.name // “Kjell”
Tuesday, November 9, 2010
Prototypical Inheritance
name Kjell
kind Malayan
id a4r54ed
prototype
Tuesday, November 9, 2010
rudolph.name = 'Rudolph';
rudolph.name // “Rudolph”kjell.name // “Kjell”
rudolph.kind // ‘Malayan’
Tuesday, November 9, 2010
kjell.kind = 'Baird';
rudolph.kind // ‘Baird’
rudolph.kind // ‘Malayan’
Tuesday, November 9, 2010
delete rudolph.name
rudolph.name // ‘Kjell’
Tuesday, November 9, 2010
Prototypical Inheritance
new Constructor();
Returns a new object with a link toConstructor.prototype
Tuesday, November 9, 2010
Prototypical Inheritance
Object.create = function(o) { function F() {} F.prototype = o; return new F();}
Tuesday, November 9, 2010
Prototypical Inheritance
name kjell
kind Malayan...
id a4r54edname rudolph
prototype
Tuesday, November 9, 2010
Array
Tuesday, November 9, 2010
Arrays
• Array inherits from object
• Indexes are converted to strings
• Magic length property
• Always one larger than the highest int property
Tuesday, November 9, 2010
Array Literals
• [ ]
• names = [ ‘Rudolph’, ‘Kjell’, ‘Torsten’]
• typeof value == ‘object’
• value.constructor === Array
Tuesday, November 9, 2010
Array Methods
• concat
• join
• pop
• push
• slice
• sort
• splice
Tuesday, November 9, 2010
JSON
Tuesday, November 9, 2010
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"]}
Tuesday, November 9, 2010
Functions
Tuesday, November 9, 2010
Function
function() {};
lambda
Tuesday, November 9, 2010
Function
First class object
Tuesday, November 9, 2010
Function Statement
function foo() {}
expands to
var foo = function foo() {};
Tuesday, November 9, 2010
Functions
Can be defined inside other functions!
Tuesday, November 9, 2010
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) }; }); }}
Tuesday, November 9, 2010
Methods
functions stored in objects
Tuesday, November 9, 2010
Built-in Prototypes
• Object.prototype
• Array.prototype
• Function.prototype
• Number.prototype
• String.prototype
• Boolean.prototype
Tuesday, November 9, 2010
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
Tuesday, November 9, 2010
Function.prototype.method = function(name, func) {
this.prototype[name] = func;return this;
}
Tuesday, November 9, 2010
String.method(‘trim’, function() { return this.replace(/^\s+|\s+$/g, ‘’);}
“ tapir “.trim(); // “tapir”
Tuesday, November 9, 2010
Scope
Tuesday, November 9, 2010
Scope
The function is the scope of the variables
Tuesday, November 9, 2010
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)
Tuesday, November 9, 2010
thisInvocation
Formthis
functionthe global
object
method kjell
constructor a new object
apply rudolph
this is an extra parameter that depends on the
calling form
Tuesday, November 9, 2010
arguments
• A special array like, DYNAMIC, parameter
• All the arguments of the invocation
Tuesday, November 9, 2010
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);
Tuesday, November 9, 2010
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;");
Tuesday, November 9, 2010
Global Variables
Tuesday, November 9, 2010
The global Object
• Container for all variables
• On browsers window == global
• Any var not declared is global
• Global variables are BAD
Tuesday, November 9, 2010
Good Practices
Tuesday, November 9, 2010
Modules
var MyNamespace = {};
var MyNS = MyNS || {};
Tuesday, November 9, 2010
Cascade
setFirst: function(name) { this.first = name; return this;}
person.setFirst(“Anders”).setLast(“Janmyr”).setAge(40);
Tuesday, November 9, 2010
Encapsulationvar Esperanto = Esperanto || {};
Esperanto.Lab = function() { var privVar = "example"; function privFunc() { return privVar; } return { example: function() { return privFunc(); } }}()
Tuesday, November 9, 2010
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;},
Tuesday, November 9, 2010
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); });},
Tuesday, November 9, 2010
Mixins
Object.mixin = function(destination, source) { for (property in source) destination[property] = source[property]; return destination;}
Tuesday, November 9, 2010
Enforcing New
function User(first, last) { if ( !(this instanceOf User)) return new User(first, last); this.name = first + ‘ ‘ + last;}
Tuesday, November 9, 2010
Tools
Tuesday, November 9, 2010
Debuggers
• Firebug
• Apple Dev Tools
• Chrome Dev Tools
• Internet Explorer Developer Tools
Tuesday, November 9, 2010
CSS Tools
• http://codylindley.com/jqueryselectors/
• Selector Gadget
• Nokogiri• XML, HTML, SAX Parser
Tuesday, November 9, 2010
Minification
• JsMin• http://www.crockford.com/javascript/
jsmin.html
• YUI Compressor• http://developer.yahoo.com/yui/compressor/
Tuesday, November 9, 2010
Build Tools
• Rake
• SCons
• Ant
• Scripts
Tuesday, November 9, 2010
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
Tuesday, November 9, 2010
Localtunnel
• gem install localtunnel
• localtunnel -k my_public_ssh.key
• localtunnel 80• Port 80 is now publicly accessible from
http://8bv2.localtunnel.com ...
•
Tuesday, November 9, 2010
Tuesday, November 9, 2010
Lab
http://10.48.44.155/~andersjanmyr/
Tuesday, November 9, 2010