JavaScriptCore
Nicolas Demengel and François Sarradin
JavaScript
HTLM(5)CSS(3)
Web PageAnimation
Application(client side)
JSEngine
Service(server side) Embeded
(noSql, ...)
ClientServer
JavaScriptHistory
1995
Brendan Eich @ NetscapeJavaScript
1996
ECMA1.0, 1.1
1997
ECMAScript1.2
1998
1.3
2000
1.5ES 3
2010
1.8.5ES 5
What's next?
ES 6Harmony
JavaScript
Self Python Perl C/Java
ActionScript CoffeeScriptDart
JavaScriptIs made of...
JavaScript
Language&
Concepts
/* Factorial of n. */function fact(n) { // result of fact var result = 1; for (var i = 1; i <= n; i++) { result *= i; } return result;}
JavaScript SyntaxLooks like Java / C++
var x = 1; // it should be an intvar s = "a"; // string or char?
// it's a function, (type of p?// does it return something?)function f(p) { /* ... */ }
var g; // anything (even a function)
JavaScriptIs dynamically typed
JavaScriptHas bad parts
42 == '42' !== 42if (false) <-> if (null) <-> if (undefined)false != null == undefinedfalse !== null !== undefined
return{
prop: "val"};
Use an editor providing validation with JSLint
JavaScriptHas few built-in types
● Boolean true / false● Number 42 21.6 NaN +∞ -∞● String "hi" 'hello'● Date java-like● Regexp /^.*([0-9]+)\w{2,3}$/● Object {prop: val}● Array [a, b] (it's just an Object)● Function function() {}
● List, Map, Set: where are you? => ES 6
// function declaration (statement)function f(x) { /* ... */ }
// function expression (operator)var f = function(x) { /* ... */ };
// Function constructorvar f = new Function('x', '...');
JavaScriptCan define functions
function compose(f, g) {// BTW, this is a closure!// more on that later
return function(x) { return f(g(x)); };}
compose(square, add_one)(10);
JavaScriptCAN HAZ FUNCTIONZ EVERYWHERE
var o = { name: "an object", logName: function() { log(this.name); }};
// o.logName can be assigned to a variable:var logN = o.logName;logN();
// another way to give o the logName methodfunction ln() { log(this.name); }var o = { name: "an object" };o.logName = ln;
JavaScriptFunction: scope & binding
// what is the value of 'this'?var o = { /* ... */
logName: function() { log(this.name); }};
// here it obviously refers to oo.logName();
// what about the following?function ln() { log(this.name); }ln(); // er...
JavaScriptFunction: scope & binding
● this = object to wich the function is bound○ By default: the global object (window in browsers)
● Change the way a function is bound to an object: apply or call
JavaScriptFunction: scope & binding
var o = { nm: "John Doe" };
function say(message) { console.log(this.nm + ": " + message);}
say("hello!"); // ": hello!" (this.nm is undefined)
o.sayIt = say;o.sayIt("greetings!"); // "John Doe: greetings!"
say.call(o, "yo!"); // "John Doe: yo!"say.apply(o, ["hi!"]); // "John Doe: hi!"
JavaScriptFunction: scope & binding
(function(x, y) {console.log(y); > 'b'
console.log(arguments.length); > 3console.log(arguments[2]); > 'c'
console.log(arguments.callee);> function(){ }
console.log(arguments.join); > undefined// Array.prototype.join.call(arguments)
})('a', 'b', 'c');
JavaScriptFunction arguments
JVM
Prototype-oriented programmingLanguages
Self
Io
Ioke
NewtonScript JavaScript Lua
var Vehicle = {description: "some vehicle",startEngine: function() {
console.log(this.description+ " => engine started");
}};// uses Vehicle as protovar Car = Object.create(Vehicle);Car.description = "some car";Car.wheelCount = 4;
Prototype-oriented programmingInstance, prototype, and inheritance
Vehicle.startEngine();> "some vehicle => engine started"
Car.startEngine();> "some car => engine started"
console.log(Vehicle.wheelCount);> undefined
console.log(Car.wheelCount);> 4
Prototype-oriented programmingWhat do you get?
Car.startEngine = function() {console.log("overridden");
}Car.startEngine(); > "overridden"
// let's delete the car-specific methoddelete Car.startEngine;
// parent method is still thereCar.startEngine(); > "some car => engine started"
JS prototype-based programming= delegation (object ⇒ prototype)
Prototype-oriented programmingInheritance manipulation
Car.startEngine = function() { Vehicle.startEngine.call(this); // ≃ super.start console.log("model: " + this.model);}
// inheritance is not limited to one levelvar myPigeot = Object.create(Car);myPigeot.description = "My Pigeot";myPigeot.model = "403";
myPigeot.startEngine();// My Pigeot: engine started// model: 403
Prototype-oriented programmingInheritance: level 2
Vehicle, Car = prototypes ≃ classes
Note: myPigeot can be prototype too!
Prototype-oriented programmingClasses in JS?
CarVehicule
myPigeot
Wait!...
What about that Object.create()?
Prototype-oriented programming
// Object.create(): JS 1.8.5 and +if (!Object.create) {
Object.create = function(o) {// creates new temp. constructorfunction F() {}
// gives it o as prototypeF.prototype = o;
// instantiatesreturn new F();
};}
Prototype-oriented programmingCreate an instance
// previous example could have been written:var Vehicle = { /* desc, startEngine */ };
function Car(desc) { this.description = desc; }
Car.prototype = Vehicle;
Car.prototype.description = "some car";Car.prototype.wheelCount = 4;
var myPigeot = new Car("My Pigeot");myPigeot.model = "403";
Prototype-oriented programmingClasses in JS
Er... Car is a functions, but I can new it?!
● new is a keyword that1. Allocates an object2. Inits this object with constructor
● new Car("some car") is equivalent tovar car = {};car.__proto__ = Car.prototype;Car.call(car, "some car");
Prototype-oriented programmingNew in JS
What happens when calling the Car constructor without new?
this is bound to global object
Want to play this game?○ Change window.location and you'll risk a crash
Prototype-oriented programmingLast word about constructor functions
● Be carefull with this and new
● Factory method instead of newfunction createCar(d) { return new Car(d); }
● Prevent bad usage of your constructorfunction Car(desc) {
if (!(this instanceof Car)) {return new Car(desc);
}/* ... */
}
Prototype-oriented programmingLast but not least
var Entity = (function() { // class lvlvar counter = 0; // private
return function() { // instance lvlvar id = counter++; // private
this.getId = function() {return id;
}};
})();
Prototype-oriented programmingPrivate members
Prototype-oriented programmingPrivate members
var o1 = new Entity();var o2 = new Entity();
console.log(o1.id);> undefined
console.log(o1.getId());> 1
console.log(o2.getId());> 2
Access to Your Web PageDOM manipulation
DOM != JS, it's another API
No need for jQuery○ getElementById()○ getElementByTagName()○ getElementByName()○ getElementByClassName() // !IE○ querySelector() // IE 8○ querySelectorAll() // IE 8
Access to Your Web PageDOM manipulation: tips
● know your CSS selectors○ #element○ .element○ [attribute=value]
● limit changes to the DOM○ use fragments
The Good, The Bad, and The Ugly
ReferencesBooks
David Flanagan, JavaScript: The Definitive Guide, 6th Edition, O'Reilly Media, April 2011
Doug Crockford, JavaScript: The Good Parts, O'Reilly Media, May 2008
ReferencesOnline
Doug Crockford, JavaScript: The Good Partshttp://googlecode.blogspot.com/2009/03/doug-crockford-javascript-good-parts.html
Alex Russel, Learning to Love JavaScripthttp://www.google.com/events/io/2011/sessions/learning-to-love-javascript.html
John Resig, Learning Advanced JavaScripthttp://ejohn.org/apps/learn/
Mozilla, JavaScript Referencehttps://developer.mozilla.org/en/JavaScript/Reference/