javascript the interlingua of the web
DESCRIPTION
Javascript is one of the worlds most used programming languages. Yet, most programmers dislike it and it is treated like a second class citizen. The Javascript language has a reputation of being an ugly programming language and to some extent rightfully so, but under the ugly surface is a beautiful programming language with lambdas and closures. In this presentation you will learn to use Javascript, functional programming techniques, and some useful tools.TRANSCRIPT
JavascriptThe Interlingua of the Web
http://[email protected]
@andersjanmyr
Anders Janmyr
Monday, October 4, 2010
Ugly Javascript
Monday, October 4, 2010
Beautiful Javascript
Monday, October 4, 2010
Y-CombinatorScheme (Lisp)
(define Y (lambda (X) ((lambda (procedure) (X (lambda (arg)
((procedure procedure) arg))))
(lambda (procedure) (X (lambda (arg)
((procedure procedure) arg)))))))
Monday, October 4, 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); }); });}
Monday, October 4, 2010
Object
Dynamic
Monday, October 4, 2010
Object
Hashtable
Monday, October 4, 2010
Object
Prototypical
Monday, October 4, 2010
Object Literal
var empty_object = {};
Monday, October 4, 2010
var kjell = { name: "Kjell", "kind": "Malayan"};
Monday, October 4, 2010
var kjell = { name: "Kjell", "kind": "Malayan" address: { country: "Denmark" }};
Monday, October 4, 2010
Retrievalkjell.name // “Kjell”kjell["name"] // “Kjell”
// Denmarkkjell.address.country kjell['address']["country"]
Monday, October 4, 2010
Retrieving non-existent properties
kjell.firstname // undefinedkjell["NAME"] // undefinedkjell.home.country // Error
Monday, October 4, 2010
Setting non-existent properties
kjell.firstname = 'Sven';kjell["NAME"] = 'SVEN';
kjell.firstname // 'Sven'
Monday, October 4, 2010
Prototypical Inheritance using Object.createvar rudolph = Object.create(kjell);
rudolph.name // “Kjell”
Monday, October 4, 2010
Prototypical Inheritance
name Kjell
kind Malayan
id a4r54ed
prototype
Monday, October 4, 2010
rudolph.name = 'Rudolph';
rudolph.name // “Rudolph”kjell.name // “Kjell”
rudolph.kind // ‘Malayan’
Monday, October 4, 2010
kjell.kind = 'Baird';
rudolph.kind // ‘Baird’
rudolph.kind // ‘Malayan’
Monday, October 4, 2010
delete rudolph.name
rudolph.name // ‘Kjell’
Monday, October 4, 2010
Prototypical Inheritance
new Constructor();
Returns a new object with a link to
Constructor.prototype
Monday, October 4, 2010
Prototypical Inheritance
Object.create = function(o) { function F() {} F.prototype = o; return new F();}
Monday, October 4, 2010
Arrays
• Array inherits from object
• Indexes are converted to strings
• Magic length property• Always one larger than the highest int
property
Monday, October 4, 2010
Array Literals
• [ ]
• names = [ ʻRudolphʼ, ʻKjellʼ, ʻTorstenʼ]
• typeof value == ʻobjectʼ• value.constructor === Array
Monday, October 4, 2010
Array Methods
• concat• join• pop• push• slice• sort• splice
Monday, October 4, 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"]}
Monday, October 4, 2010
Function
First class object
Monday, October 4, 2010
Function
function() {};
lambda
Monday, October 4, 2010
Function Statement
function foo() {}
expands to
var foo = function foo() {};
Monday, October 4, 2010
Functions
Can be defined inside other functions!
Monday, October 4, 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) }; }); }}
Monday, October 4, 2010
Methods
functions stored in objects
Monday, October 4, 2010
Built-in Prototypes
• Object.prototype
• Array.prototype
• Function.prototype
• Number.prototype
• String.prototype
Monday, October 4, 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
Monday, October 4, 2010
Function.prototype.method = function(name, func) {
this.prototype[name] = func;return this;
}
Monday, October 4, 2010
String.method(‘trim’, function() { return this.replace(/^\s+|\s+$/g, ‘’);}
“ tapir “.trim(); // “tapir”
Monday, October 4, 2010
Dynamics
Monday, October 4, 2010
Scope
The function is the scope of the variables
Monday, October 4, 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)
Monday, October 4, 2010
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
Monday, October 4, 2010
arguments
• A special array like, DYNAMIC, parameter
• All the arguments of the invocation
Monday, October 4, 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);
Monday, October 4, 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;");
Monday, October 4, 2010
Global Object• Container for all variables
• On browsers window == global
• Any var not declared is global
• Global variables are Dangerous
Monday, October 4, 2010
Good Practices
Monday, October 4, 2010
Modules
var MyNamespace = {};
var MyNS = MyNS || {};
Monday, October 4, 2010
CascadesetFirst: function(name) { this.first = name; return this;}
person.setFirst(“Anders”).setLast(“Janmyr”).setAge(40);
Monday, October 4, 2010
Encapsulationvar Esperanto = Esperanto || {};
Esperanto.Lab = function() { var privVar = "example"; function privFunc() { return privVar; } return { example: function() { return privFunc(); } }}()
Monday, October 4, 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;},
Monday, October 4, 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); });},
Monday, October 4, 2010
Mixins
Object.mixin = function(destination, source) { for (property in source) destination[property] = source[property]; return destination;}
Monday, October 4, 2010
Test
• QUnit
• JsTest
• ScrewUnit
• jSpec
• ...
Monday, October 4, 2010
jQuerywrite less, do more.
Monday, October 4, 2010
Monday, October 4, 2010
jQuery Philosophy
• Find some HTML
• Do something to it
Monday, October 4, 2010
Find some HTML$(“div”)
<html> <body> <div>Malayan Tapir</div> <div>Baird Tapir</div></body> </html>
Monday, October 4, 2010
Do something to it!$(“div”).addClass(‘cool’);
<html> <body> <div class=‘cool’>Malayan Tapir</div> <div class=‘cool’>Baird Tapir</div></body> </html>
Monday, October 4, 2010
Document Ready
$(function(){ // Document is ready});
Monday, October 4, 2010
Tools
Monday, October 4, 2010
Debuggers
• Firebug
• Apple Dev Tools
• Chrome Dev Tools
• Internet Explorer Developer Tools
Monday, October 4, 2010
CSS Tools
• http://codylindley.com/jqueryselectors/
• Selector Gadget
• Nokogiri• XML, HTML, SAX Parser
Monday, October 4, 2010
Minification
• JsMin• http://www.crockford.com/javascript/
jsmin.html
• YUI Compressor• http://developer.yahoo.com/yui/compressor/
Monday, October 4, 2010
Build Tools
• Rake
• SCons
• Ant
• Scripts
Monday, October 4, 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
Monday, October 4, 2010
Monday, October 4, 2010
DemoBrowser Command Line
• jQuery (10 lines)
• Sinatra (10 lines)
• LiveReload
Monday, October 4, 2010
Questions?http://anders.janmyr.com
[email protected]@andersjanmyr
Anders Janmyr
Monday, October 4, 2010