javascript core
TRANSCRIPT
![Page 1: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/1.jpg)
JavaScriptCore
Nicolas Demengel and François Sarradin
![Page 2: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/2.jpg)
JavaScript
HTLM(5)CSS(3)
Web PageAnimation
Application(client side)
JSEngine
Service(server side) Embeded
(noSql, ...)
ClientServer
![Page 3: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/3.jpg)
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
![Page 4: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/4.jpg)
JavaScript
Self Python Perl C/Java
ActionScript CoffeeScriptDart
JavaScriptIs made of...
![Page 5: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/5.jpg)
JavaScript
Language&
Concepts
![Page 6: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/6.jpg)
/* 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++
![Page 7: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/7.jpg)
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
![Page 8: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/8.jpg)
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
![Page 9: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/9.jpg)
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
![Page 10: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/10.jpg)
// function declaration (statement)function f(x) { /* ... */ }
// function expression (operator)var f = function(x) { /* ... */ };
// Function constructorvar f = new Function('x', '...');
JavaScriptCan define functions
![Page 11: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/11.jpg)
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
![Page 12: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/12.jpg)
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
![Page 13: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/13.jpg)
// 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
![Page 14: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/14.jpg)
● 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
![Page 15: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/15.jpg)
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
![Page 16: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/16.jpg)
(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
![Page 17: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/17.jpg)
JVM
Prototype-oriented programmingLanguages
Self
Io
Ioke
NewtonScript JavaScript Lua
![Page 18: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/18.jpg)
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
![Page 19: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/19.jpg)
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?
![Page 20: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/21.jpg)
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
![Page 22: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/22.jpg)
Vehicle, Car = prototypes ≃ classes
Note: myPigeot can be prototype too!
Prototype-oriented programmingClasses in JS?
CarVehicule
myPigeot
![Page 23: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/23.jpg)
Wait!...
What about that Object.create()?
Prototype-oriented programming
![Page 24: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/24.jpg)
// 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
![Page 25: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/25.jpg)
// 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
![Page 26: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/26.jpg)
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
![Page 27: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/27.jpg)
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
![Page 28: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/28.jpg)
● 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
![Page 29: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/29.jpg)
var Entity = (function() { // class lvlvar counter = 0; // private
return function() { // instance lvlvar id = counter++; // private
this.getId = function() {return id;
}};
})();
Prototype-oriented programmingPrivate members
![Page 30: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/30.jpg)
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
![Page 31: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/31.jpg)
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
![Page 32: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/32.jpg)
Access to Your Web PageDOM manipulation: tips
● know your CSS selectors○ #element○ .element○ [attribute=value]
● limit changes to the DOM○ use fragments
![Page 33: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/33.jpg)
The Good, The Bad, and The Ugly
![Page 34: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/34.jpg)
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
![Page 35: JavaScript Core](https://reader033.vdocument.in/reader033/viewer/2022042613/554cc2afb4c905a5208b471d/html5/thumbnails/35.jpg)
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/