JavaScript Core
Upcoming SlideShare
Loading in...5
×
 

JavaScript Core

on

  • 1,422 views

 

Statistics

Views

Total Views
1,422
Views on SlideShare
1,415
Embed Views
7

Actions

Likes
3
Downloads
51
Comments
0

2 Embeds 7

http://www.linkedin.com 6
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript Core JavaScript Core Presentation Transcript

  • JavaScript CoreNicolas Demengel and François Sarradin
  • Application (client side) Web Page Animation HTLM(5) CSS(3)Client JavaScript Server JS Engine Service (server side) Embeded (noSql, ...)
  • 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 View slide
  • JavaScriptIs made of... Self Python Perl C/Java JavaScript ActionScript Dart CoffeeScript View slide
  • JavaScriptLanguage &Concepts
  • 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;}
  • 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)
  • JavaScriptHas bad parts42 == 42 !== 42if (false) <-> if (null) <-> if (undefined)false != null == undefinedfalse !== null !== undefinedreturn{ 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] (its just an Object)● Function function() {}● List, Map, Set: where are you? => ES 6
  • JavaScriptCan define functions// function declaration (statement)function f(x) { /* ... */ }// function expression (operator)var f = function(x) { /* ... */ };// Function constructorvar f = new Function(x, ...);
  • 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);
  • 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;
  • 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 & 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!"
  • 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);
  • Prototype-oriented programmingLanguages SelfNewtonScript JavaScript Lua Io Ioke JVM
  • 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;
  • 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
  • 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)
  • 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
  • Prototype-oriented programmingClasses in JS? Vehicule Car myPigeotVehicle, Car = prototypes ≃ classesNote: myPigeot can be prototype too!
  • 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 = function(o) { // creates new temp. constructor function F() {} // gives it o as prototype F.prototype = o; // instantiates return new F(); };}
  • 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";
  • 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");
  • 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
  • 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); } /* ... */ }
  • 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; } };})();
  • Prototype-oriented programmingPrivate membersvar o1 = new Entity();var o2 = new Entity();console.log(o1.id);> undefinedconsole.log(o1.getId());> 1console.log(o2.getId());> 2
  • Access to Your Web PageDOM manipulationDOM != JS, its another APINo 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
  • ReferencesBooksDavid Flanagan, JavaScript: The Definitive Guide, 6thEdition, OReilly Media, April 2011Doug Crockford, JavaScript: The Good Parts, OReillyMedia, May 2008
  • 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/