JavaScript             CoreNicolas Demengel and François Sarradin
Application  (client side)     Web Page                    Animation                                   HTLM(5)            ...
JavaScript History    1996     1998 1995    1997     2000     2010    Whats next?    ECMA      1.3   1.0, 1.1         1.5 ...
JavaScriptIs made of...   Self     Python          Perl    C/Java             JavaScript   ActionScript      Dart      Cof...
JavaScriptLanguage   &Concepts
JavaScript SyntaxLooks like Java / C++/* Factorial of n. */function fact(n) {  // result of fact  var result = 1;  for (va...
JavaScriptIs dynamically typedvar x = 1; // it should be an intvar s = "a"; // string or char?// its a function, (type of ...
JavaScriptHas bad parts42 == 42 !== 42if (false) <-> if (null) <-> if (undefined)false != null == undefinedfalse !== null ...
JavaScriptHas few built-in types●   Boolean    true / false●   Number     42 21.6 NaN           +∞    -∞●   String     "hi...
JavaScriptCan define functions// function declaration (statement)function f(x) { /* ... */ }// function expression (operat...
JavaScriptCAN HAZ FUNCTIONZ EVERYWHEREfunction compose(f, g) {  // BTW, this is a closure!  // more on that later  return ...
JavaScriptFunction: scope & bindingvar o = {   name: "an object",   logName: function() { log(this.name); }};// o.logName ...
JavaScriptFunction: scope & binding// what is the value of this?var o = { /* ... */   logName: function() { log(this.name)...
JavaScriptFunction: scope & binding● this = object to wich the function is bound  ○ By default: the global object (window ...
JavaScriptFunction: scope & bindingvar o = { nm: "John Doe" };function say(message) {  console.log(this.nm + ": " + messag...
JavaScriptFunction arguments(function(x, y) {   console.log(y); > b  console.log(arguments.length); > 3  console.log(argum...
Prototype-oriented programmingLanguages                 SelfNewtonScript   JavaScript   Lua     Io                        ...
Prototype-oriented programmingInstance, prototype, and inheritancevar Vehicle = {   description: "some vehicle",   startEn...
Prototype-oriented programmingWhat do you get?Vehicle.startEngine();> "some vehicle => engine started"Car.startEngine();> ...
Prototype-oriented programmingInheritance manipulationCar.startEngine = function() {   console.log("overridden");}Car.star...
Prototype-oriented programmingInheritance: level 2Car.startEngine = function() {  Vehicle.startEngine.call(this); // ≃ sup...
Prototype-oriented programmingClasses in JS?    Vehicule                           Car                              myPige...
Prototype-oriented programming             Wait!...   What about that Object.create()?
Prototype-oriented programmingCreate an instance// Object.create(): JS 1.8.5 and +if (!Object.create) {   Object.create = ...
Prototype-oriented programmingClasses in JS// previous example could have been written:var Vehicle = { /* desc, startEngin...
Prototype-oriented programmingNew in JS    Er... Car is a functions, but I can new it?!● new is a keyword that  1. Allocat...
Prototype-oriented programmingLast word about constructor functionsWhat happens when calling the Carconstructor without ne...
Prototype-oriented programmingLast but not least● Be carefull with this and new● Factory method instead of new  function c...
Prototype-oriented programmingPrivate membersvar Entity = (function() { // class lvl   var counter = 0;        // private ...
Prototype-oriented programmingPrivate membersvar o1 = new Entity();var o2 = new Entity();console.log(o1.id);> undefinedcon...
Access to Your Web PageDOM manipulationDOM != JS, its another APINo need for jQuery  ○   getElementById()  ○   getElementB...
Access to Your Web PageDOM manipulation: tips● know your CSS selectors  ○ #element  ○ .element  ○ [attribute=value]● limit...
The Good, The Bad, and The Ugly
ReferencesBooksDavid Flanagan, JavaScript: The Definitive Guide, 6thEdition, OReilly Media, April 2011Doug Crockford, Java...
ReferencesOnlineDoug Crockford, JavaScript: The Good Partshttp://googlecode.blogspot.com/2009/03/doug-crockford-javascript...
Upcoming SlideShare
Loading in...5
×

JavaScript Core

1,245

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,245
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
62
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

JavaScript Core

  1. 1. JavaScript CoreNicolas Demengel and François Sarradin
  2. 2. Application (client side) Web Page Animation HTLM(5) CSS(3)Client JavaScript Server JS Engine Service (server side) Embeded (noSql, ...)
  3. 3. JavaScript History 1996 1998 1995 1997 2000 2010 Whats next? ECMA 1.3 1.0, 1.1 1.5 1.8.5 ES 6 ES 3 ES 5 Harmony ECMAScriptBrendan Eich 1.2@ NetscapeJavaScript
  4. 4. JavaScriptIs made of... Self Python Perl C/Java JavaScript ActionScript Dart CoffeeScript
  5. 5. JavaScriptLanguage &Concepts
  6. 6. JavaScript SyntaxLooks like Java / C++/* Factorial of n. */function fact(n) { // result of fact var result = 1; for (var i = 1; i <= n; i++) { result *= i; } return result;}
  7. 7. JavaScriptIs dynamically typedvar x = 1; // it should be an intvar s = "a"; // string or char?// its a function, (type of p?// does it return something?)function f(p) { /* ... */ }var g; // anything (even a function)
  8. 8. JavaScriptHas bad parts42 == 42 !== 42if (false) <-> if (null) <-> if (undefined)false != null == undefinedfalse !== null !== undefinedreturn{ prop: "val"};Use an editor providing validation with JSLint
  9. 9. 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] (its just an Object)● Function function() {}● List, Map, Set: where are you? => ES 6
  10. 10. JavaScriptCan define functions// function declaration (statement)function f(x) { /* ... */ }// function expression (operator)var f = function(x) { /* ... */ };// Function constructorvar f = new Function(x, ...);
  11. 11. JavaScriptCAN HAZ FUNCTIONZ EVERYWHEREfunction compose(f, g) { // BTW, this is a closure! // more on that later return function(x) { return f(g(x)); };}compose(square, add_one)(10);
  12. 12. JavaScriptFunction: scope & bindingvar 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;
  13. 13. 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...
  14. 14. 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
  15. 15. JavaScriptFunction: scope & bindingvar 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!"
  16. 16. JavaScriptFunction arguments(function(x, y) { console.log(y); > b console.log(arguments.length); > 3 console.log(arguments[2]); > c console.log(arguments.callee);> function(){ } console.log(arguments.join); > undefined // Array.prototype.join.call(arguments)})(a, b, c);
  17. 17. Prototype-oriented programmingLanguages SelfNewtonScript JavaScript Lua Io Ioke JVM
  18. 18. Prototype-oriented programmingInstance, prototype, and inheritancevar 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;
  19. 19. Prototype-oriented programmingWhat do you get?Vehicle.startEngine();> "some vehicle => engine started"Car.startEngine();> "some car => engine started"console.log(Vehicle.wheelCount);> undefinedconsole.log(Car.wheelCount);> 4
  20. 20. Prototype-oriented programmingInheritance manipulationCar.startEngine = function() { console.log("overridden");}Car.startEngine(); > "overridden"// lets delete the car-specific methoddelete Car.startEngine;// parent method is still thereCar.startEngine(); > "some car => engine started" JS prototype-based programming = delegation (object ⇒ prototype)
  21. 21. Prototype-oriented programmingInheritance: level 2Car.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
  22. 22. Prototype-oriented programmingClasses in JS? Vehicule Car myPigeotVehicle, Car = prototypes ≃ classesNote: myPigeot can be prototype too!
  23. 23. Prototype-oriented programming Wait!... What about that Object.create()?
  24. 24. Prototype-oriented programmingCreate an instance// Object.create(): JS 1.8.5 and +if (!Object.create) { Object.create = function(o) { // creates new temp. constructor function F() {} // gives it o as prototype F.prototype = o; // instantiates return new F(); };}
  25. 25. Prototype-oriented programmingClasses in JS// 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";
  26. 26. Prototype-oriented programmingNew in JS Er... Car is a functions, but I can new it?!● new is a keyword that 1. Allocates an object 2. Inits this object with constructor● new Car("some car") is equivalent to var car = {}; car.__proto__ = Car.prototype; Car.call(car, "some car");
  27. 27. Prototype-oriented programmingLast word about constructor functionsWhat happens when calling the Carconstructor without new? this is bound to global objectWant to play this game? ○ Change window.location and youll risk a crash
  28. 28. Prototype-oriented programmingLast but not least● Be carefull with this and new● Factory method instead of new function createCar(d) { return new Car(d); }● Prevent bad usage of your constructor function Car(desc) { if (!(this instanceof Car)) { return new Car(desc); } /* ... */ }
  29. 29. Prototype-oriented programmingPrivate membersvar Entity = (function() { // class lvl var counter = 0; // private return function() { // instance lvl var id = counter++; // private this.getId = function() { return id; } };})();
  30. 30. Prototype-oriented programmingPrivate membersvar o1 = new Entity();var o2 = new Entity();console.log(o1.id);> undefinedconsole.log(o1.getId());> 1console.log(o2.getId());> 2
  31. 31. Access to Your Web PageDOM manipulationDOM != JS, its another APINo need for jQuery ○ getElementById() ○ getElementByTagName() ○ getElementByName() ○ getElementByClassName() // !IE ○ querySelector() // IE 8 ○ querySelectorAll() // IE 8
  32. 32. Access to Your Web PageDOM manipulation: tips● know your CSS selectors ○ #element ○ .element ○ [attribute=value]● limit changes to the DOM ○ use fragments
  33. 33. The Good, The Bad, and The Ugly
  34. 34. ReferencesBooksDavid Flanagan, JavaScript: The Definitive Guide, 6thEdition, OReilly Media, April 2011Doug Crockford, JavaScript: The Good Parts, OReillyMedia, May 2008
  35. 35. ReferencesOnlineDoug Crockford, JavaScript: The Good Partshttp://googlecode.blogspot.com/2009/03/doug-crockford-javascript-good-parts.htmlAlex Russel, Learning to Love JavaScripthttp://www.google.com/events/io/2011/sessions/learning-to-love-javascript.htmlJohn Resig, Learning Advanced JavaScripthttp://ejohn.org/apps/learn/Mozilla, JavaScript Referencehttps://developer.mozilla.org/en/JavaScript/Reference/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×