Javascript the Interlingua of the Web
-
Upload
andersjanmyr -
Category
Documents
-
view
5.744 -
download
1
description
Transcript of Javascript the Interlingua of the Web
![Page 1: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/1.jpg)
JavascriptThe Interlingua of the Web
http://[email protected]
@andersjanmyr
Anders Janmyr
Monday, October 4, 2010
![Page 2: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/2.jpg)
Ugly Javascript
Monday, October 4, 2010
![Page 3: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/3.jpg)
Beautiful Javascript
Monday, October 4, 2010
![Page 4: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/4.jpg)
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
![Page 5: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/5.jpg)
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
![Page 6: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/6.jpg)
Object
Dynamic
Monday, October 4, 2010
![Page 7: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/7.jpg)
Object
Hashtable
Monday, October 4, 2010
![Page 8: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/8.jpg)
Object
Prototypical
Monday, October 4, 2010
![Page 9: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/9.jpg)
Object Literal
var empty_object = {};
Monday, October 4, 2010
![Page 10: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/10.jpg)
var kjell = { name: "Kjell", "kind": "Malayan"};
Monday, October 4, 2010
![Page 11: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/11.jpg)
var kjell = { name: "Kjell", "kind": "Malayan" address: { country: "Denmark" }};
Monday, October 4, 2010
![Page 12: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/12.jpg)
Retrievalkjell.name // “Kjell”kjell["name"] // “Kjell”
// Denmarkkjell.address.country kjell['address']["country"]
Monday, October 4, 2010
![Page 13: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/13.jpg)
Retrieving non-existent properties
kjell.firstname // undefinedkjell["NAME"] // undefinedkjell.home.country // Error
Monday, October 4, 2010
![Page 14: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/14.jpg)
Setting non-existent properties
kjell.firstname = 'Sven';kjell["NAME"] = 'SVEN';
kjell.firstname // 'Sven'
Monday, October 4, 2010
![Page 15: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/15.jpg)
Prototypical Inheritance using Object.createvar rudolph = Object.create(kjell);
rudolph.name // “Kjell”
Monday, October 4, 2010
![Page 16: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/16.jpg)
Prototypical Inheritance
name Kjell
kind Malayan
id a4r54ed
prototype
Monday, October 4, 2010
![Page 17: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/17.jpg)
rudolph.name = 'Rudolph';
rudolph.name // “Rudolph”kjell.name // “Kjell”
rudolph.kind // ‘Malayan’
Monday, October 4, 2010
![Page 18: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/18.jpg)
kjell.kind = 'Baird';
rudolph.kind // ‘Baird’
rudolph.kind // ‘Malayan’
Monday, October 4, 2010
![Page 19: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/19.jpg)
delete rudolph.name
rudolph.name // ‘Kjell’
Monday, October 4, 2010
![Page 20: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/20.jpg)
Prototypical Inheritance
new Constructor();
Returns a new object with a link to
Constructor.prototype
Monday, October 4, 2010
![Page 21: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/21.jpg)
Prototypical Inheritance
Object.create = function(o) { function F() {} F.prototype = o; return new F();}
Monday, October 4, 2010
![Page 22: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/22.jpg)
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
![Page 23: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/23.jpg)
Array Literals
• [ ]
• names = [ ʻRudolphʼ, ʻKjellʼ, ʻTorstenʼ]
• typeof value == ʻobjectʼ• value.constructor === Array
Monday, October 4, 2010
![Page 24: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/24.jpg)
Array Methods
• concat• join• pop• push• slice• sort• splice
Monday, October 4, 2010
![Page 25: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/25.jpg)
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
![Page 26: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/26.jpg)
Function
First class object
Monday, October 4, 2010
![Page 27: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/27.jpg)
Function
function() {};
lambda
Monday, October 4, 2010
![Page 28: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/28.jpg)
Function Statement
function foo() {}
expands to
var foo = function foo() {};
Monday, October 4, 2010
![Page 29: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/29.jpg)
Functions
Can be defined inside other functions!
Monday, October 4, 2010
![Page 30: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/30.jpg)
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
![Page 31: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/31.jpg)
Methods
functions stored in objects
Monday, October 4, 2010
![Page 32: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/32.jpg)
Built-in Prototypes
• Object.prototype
• Array.prototype
• Function.prototype
• Number.prototype
• String.prototype
Monday, October 4, 2010
![Page 33: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/33.jpg)
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
![Page 34: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/34.jpg)
Function.prototype.method = function(name, func) {
this.prototype[name] = func;return this;
}
Monday, October 4, 2010
![Page 35: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/35.jpg)
String.method(‘trim’, function() { return this.replace(/^\s+|\s+$/g, ‘’);}
“ tapir “.trim(); // “tapir”
Monday, October 4, 2010
![Page 36: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/36.jpg)
Dynamics
Monday, October 4, 2010
![Page 37: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/37.jpg)
Scope
The function is the scope of the variables
Monday, October 4, 2010
![Page 38: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/38.jpg)
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
![Page 39: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/39.jpg)
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
![Page 40: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/40.jpg)
arguments
• A special array like, DYNAMIC, parameter
• All the arguments of the invocation
Monday, October 4, 2010
![Page 41: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/41.jpg)
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
![Page 42: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/42.jpg)
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
![Page 43: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/43.jpg)
Global Object• Container for all variables
• On browsers window == global
• Any var not declared is global
• Global variables are Dangerous
Monday, October 4, 2010
![Page 44: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/44.jpg)
Good Practices
Monday, October 4, 2010
![Page 45: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/45.jpg)
Modules
var MyNamespace = {};
var MyNS = MyNS || {};
Monday, October 4, 2010
![Page 46: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/46.jpg)
CascadesetFirst: function(name) { this.first = name; return this;}
person.setFirst(“Anders”).setLast(“Janmyr”).setAge(40);
Monday, October 4, 2010
![Page 47: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/47.jpg)
Encapsulationvar Esperanto = Esperanto || {};
Esperanto.Lab = function() { var privVar = "example"; function privFunc() { return privVar; } return { example: function() { return privFunc(); } }}()
Monday, October 4, 2010
![Page 48: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/48.jpg)
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
![Page 49: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/49.jpg)
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
![Page 50: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/50.jpg)
Mixins
Object.mixin = function(destination, source) { for (property in source) destination[property] = source[property]; return destination;}
Monday, October 4, 2010
![Page 51: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/51.jpg)
Test
• QUnit
• JsTest
• ScrewUnit
• jSpec
• ...
Monday, October 4, 2010
![Page 52: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/52.jpg)
jQuerywrite less, do more.
Monday, October 4, 2010
![Page 53: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/53.jpg)
Monday, October 4, 2010
![Page 54: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/54.jpg)
jQuery Philosophy
• Find some HTML
• Do something to it
Monday, October 4, 2010
![Page 55: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/55.jpg)
Find some HTML$(“div”)
<html> <body> <div>Malayan Tapir</div> <div>Baird Tapir</div></body> </html>
Monday, October 4, 2010
![Page 56: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/56.jpg)
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
![Page 57: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/57.jpg)
Document Ready
$(function(){ // Document is ready});
Monday, October 4, 2010
![Page 58: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/58.jpg)
Tools
Monday, October 4, 2010
![Page 59: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/59.jpg)
Debuggers
• Firebug
• Apple Dev Tools
• Chrome Dev Tools
• Internet Explorer Developer Tools
Monday, October 4, 2010
![Page 60: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/60.jpg)
CSS Tools
• http://codylindley.com/jqueryselectors/
• Selector Gadget
• Nokogiri• XML, HTML, SAX Parser
Monday, October 4, 2010
![Page 61: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/61.jpg)
Minification
• JsMin• http://www.crockford.com/javascript/
jsmin.html
• YUI Compressor• http://developer.yahoo.com/yui/compressor/
Monday, October 4, 2010
![Page 62: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/62.jpg)
Build Tools
• Rake
• SCons
• Ant
• Scripts
Monday, October 4, 2010
![Page 63: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/63.jpg)
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
![Page 64: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/64.jpg)
Monday, October 4, 2010
![Page 65: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/65.jpg)
DemoBrowser Command Line
• jQuery (10 lines)
• Sinatra (10 lines)
• LiveReload
Monday, October 4, 2010
![Page 66: Javascript the Interlingua of the Web](https://reader034.fdocuments.in/reader034/viewer/2022052619/555193b4b4c90580128b55dd/html5/thumbnails/66.jpg)
Questions?http://anders.janmyr.com
[email protected]@andersjanmyr
Anders Janmyr
Monday, October 4, 2010