SlideShare a Scribd company logo
JavaScript 1.5 to 2.0
   John Resig (ejohn.org)
    Mozilla Corporation
The Big Picture
                     ECMAScript 3


JavaScript 1.5   ActionScript 2      JScript        Etc.


SpiderMonkey         AVM          JScript Engine KJS (Apple)


   Rhino                                           Opera
Jav
          aS




1999
             crip
                 t1
                    .5
       Jav




2005
          aS
             crip
                 t1
                    .6
       Jav

2006
          aS
             crip
                 t1
                    .7
       Jav
          aS
2008

             c
       Jav ript
          aS        1.8
             cr
                ipt
       Ja
                              Path to JavaScript 2




                    1.9
          va
2009




             Sc
                 ri
                    pt
                          2
The JavaScript Language
    Current:
✦
    JavaScript 1.5 (Firefox 1, ES3)
    JavaScript 1.6 (Firefox 1.5)
✦

    JavaScript 1.7 (Firefox 2)
✦

    JavaScipt 1.8 (Firefox 3)
✦

    JavaScript 1.9 (Firefox 3.1)
✦

    JavaScript 2 (Firefox 4, ES4)
✦
JavaScript 1.5
    Getters and Setters
✦
    ✦ Extra power over properties
    ✦ Two powerful uses:
      ✦ Private data access
      ✦ Lazy-loading data

    var n = “John”;
✦
    var obj = {
      get name(){ return n; },
      set name(value){ n = value; }
    };
    obj.name = “Ted”;
    obj.name == “Ted” // true
Getters and Setters
    var n = “John”;
✦
    var obj = {};
    obj.__defineGetter__(“name”,
     function(){ return n; });
    obj.__defineSetter__(“name”,
     function(value){ n = value; });
    obj.name = “Ted”;
    obj.name == “Ted”; // true
    obj.__lookupGetter__(“name”)
✦
    // => function(){ return n; }
    // __lookupSetter__ too!
Lazy-Loading Data
    var pixelsDone;
✦
    data.__defineGetter__(”pixels”, function(){
      if ( pixelsDone )
        return pixelsDone;
      pixelsDone = [];
      for ( var i = 0; i < pixels.length; i += 4 ){
        pixelsDone.push( p.color(...) );
      }
      return pixelsDone;
    });
    obj.pixels[3]
✦
JavaScript 1.6
    Array Extras
✦
    ✦ indexOf / lastIndexOf
      [0,1,2].indexOf(1) == 1
    ✦ every / filter / some
      [0,1,2].every(function(val){ return val >
      0; }); // false
    ✦ map
      [0,1,2].map(function(val){return val + 1;});
      // [1,2,3]
    ✦ forEach
      [0,1,2].forEach(function(val,index){});
JavaScript 1.7
    Generators and Iterators
✦
    ✦ Lazy-load data
      ✦ Database querying
    ✦ Threading
      http://www.neilmix.com/2007/02/07/
      threading-in-javascript-17/
Generators and Iterators
    function fib() {
✦
      var i = 0, j = 1;
      while (true) {
        yield i;
        var t = i;
        i = j; j += t;
      }
    }
    var g = fib();
    for ( var i in g ) {
      document.write(i + “<br>n”);
      if ( i > 100 ) break;
    }
let
    Block-level statements
✦

    for ( let i = 0; i < 10; i++ ) { }
✦

    while ( true ) { let test = 5; }
✦

    let (test = 5) {
✦
      function stuff(){ return test; }
    }
    { let test = 5;
✦
      { let test = 6; print(test);}
      print(test); }
Array Comprehension
    [i for ( let i = 0; i < 3; i++ )]
✦
    // => [0, 1, 2]
    function range(begin, end) {
✦
      for (let i = begin; i < end; ++i) {
        yield i;
      }
    }
    [i for each (i in range(0, 3))]
Destructuring
    var [newA, newB] = [a, b];
✦

    var newA = a, newB = b;
✦

    [a, b] = [b, a]
✦

    function test(){ return [0, 1]; }
✦
    let [a, b] = test();
    var [, c] = test();
    var {name: name} = {name: “John”}
✦
    name == “John”
    var {name} = {name: “John”}
✦
JavaScript 1.8
    Mostly a bug fix release
✦

    Expression Closures
✦
    function(x){ return x * x; }
    function(x) x * x;
    Generator Expressions
✦
    function val_iter(obj) {
      return (obj[x] for (x in obj));
    }
    for ( let value in val_iter(obj) ) { ... }
reduce
    Great for summing or concating
✦
    [x for ( x in 100 )]
     .reduce(function(a,b) a+b);
    [[...],[...]]
✦
     .reduce(function(a,b){ a.concat(b);}, [])
    reduceRight
✦
JavaScript 1.9
    Merge object properties:
✦
    Object.extend( baseObj, otherObj )
    Function.prototype.bind()
✦
    fn.bind(someThis)
    “ string ”.trim()
✦
    // => “string”
    mozilla.hashcode(someObj)
✦
    // => 1234 (unique ID)
defineProperty
    Object.defineProperty(obj, name, value,
✦
    types)
    var obj = {};
✦
    Object.defineProperty(obj, “name”, “John”,
     Object.NOT_WRITABLE |
     Object.NOT_DELETABLE);
    obj.name = “Test”;
    obj.name == “John”;
    delete obj.name
    obj.name == “John”;
JSON
    mozilla.JSON.parse(“{name:’John’}”)
✦
    // => {name: ‘John’}
    mozilla.JSON.serialize({name:’John’})
✦
    // => “{name:’John’}”
Catchalls
    var props = {};
✦
    var obj = {
      test: true,
      get *(name){
        return props[name];
      },
      set *(name, value){
        props[name] = value;
      }
    }
    obj.__defineGetter_(“”, function(){})
✦
JavaScript 2 Goals
    Backwards Compatible
✦

    Suitable to developing large systems
✦

    Allow for reusable libraries
✦

    Merge previous efforts (ActionScript)
✦

    Fix ECMAScript 3 bugs
✦

    Keep it usable for small programs
✦
Features
    Classes and Interfaces
✦

    Packages and Namespaces
✦

    Type Annotations
✦

    Strict Verification
✦

    Optimization
✦

    Syntax Shortcuts
✦

    Iterators and Generators
✦

    Self-hosting
✦
The Direction
                         ECMAScript 4


JavaScript 2         ActionScript 4      JScript       Etc.


                                        Screaming
               Tamarin                              KJS (Apple)
                                         Monkey


                                                      Opera
Tamarin
    Tamarin
✦
    ✦ New Virtual Machine from Adobe
    ✦ Perfect for ActionScript
      ✦ (a mutant cousin of JavaScript 2)

    The Three Monkeys:
✦
    ✦ ActionMonkey
    ✦ ScreamingMonkey
    ✦ IronMonkey
Three Monkies
    ActionMonkey
✦
    ✦ Integrating Tamarin into SpiderMonkey
    ✦ Powering Firefox 4 (?) + JavaScript 2

    ScreamingMonkey
✦
    ✦ Forcing Tamarin into Internet Explorer
    ✦ (Kicking and screaming?)

    IronMonkey
✦
    ✦ Bringing Python + Ruby to Tamarin
Classes
Classes
    class Programmer {
✦
       var name;
       var city = “Boston, MA”;
       const interest = “computers”;
       function work() {}
    }
    var p = new Programmer;
✦
    p.name = “John”;
    p.work();
    p.work.apply( someotherp );
    p.interest = “science”; // Error
Dynamic Classes
    dynamic class Programmer {
✦
      var name;
      var city = “Boston, MA”;
      const interest = “computers”;
      function work() {}
    }
    var p = new Programmer;
✦
    p.lastName = “Resig”;
    for ( var i in p )
       alert( i );
    // alert( “Resig” );
Getters and Setters
    class Programmer {
✦
       var _name;
       function get name(){ return _name; }
       function set name(value){
         _name = value + “ Resig”;
       }
    }
    var p = new Programmer;
✦
    p.name = “John”;
    alert( p.name );
    // “John Resig”
Catch-Alls
    dynamic class Programmer {
✦
      meta function get(name) { ... }
      meta function set(name, value) {
        alert(“Setting “ + name + “ to “ + value);
      }
    }
    var p = new Programmer
✦
    p.name = “John”;
    // alert(“Setting name to John”);
Inheritance
    class Artist {
✦
       function draw() { alert(“Drawing!”); }
    }
    class Designer extends Artist {
       override function draw() {
         alert(“Designing!”);
       }
    }
    var d = new Designer
✦
    d.draw();
    // alert(“Designing!”);
Inheritance (cont.)
    ‘final’ methods can’t be overriden
✦

    class Artist {
✦
       final function draw() {alert(“Drawing!”);}
    }
    class Designer extends Artist {
       // ERROR: Can’t override draw!
       override function draw() {
          alert(“Designing!”);
       }
    }
Inheritance (cont.)
    ‘final’ classes can’t be inherited from
✦

    final class Artist {
✦
      function draw() { alert(“Drawing!”); }
    }

    // ERROR: Can’t inherit from Artist
    class Designer extends Artist {
       override function draw() {
         alert(“Designing!”);
       }
    }
Metaclass
    Provide global functions and properties on
✦
    a class object
    class Users {
✦
       static function find( name ) {
         // ...
       }
    }
    Users.find( “John” );
✦
Interfaces
    Verify that a class implements another
✦

    class Artist {
✦
       function draw();
    }

    class Designer implements Artist {
       function draw() { alert(“Designing!”); }
    }
    if ( Designer is Artist )
✦
       alert(“Designers are Artists!”);
Types
Types
    Types are broken down into:
✦
    ✦ string
    ✦ double (ECMAScript 3-style Number)
    ✦ boolean
Type Annotations
    var name : string = “John”;
✦

    let x : double = 5.3;
✦

    function stuff( x: string, obj: Object ) :
✦
    boolean {}
Function Types
    Only return specific types:
✦
    function isValid() : boolean { }
    Only be used on certain objects types:
✦
    function every( this: Array ) {
       for ( var i = 0; i < this.length; i++ )
          alert( this[i] );
    }
    every.call( [0,1,2] );
    // alert(0); alert(1); alert(2);
    every.call({a: “b”});
    // ERROR
Rest Arguments
    function stuff( name, ...values ){
✦
      alert( values.length );
    }
    stuff( “John”, 1, 2, 3, 4 );
✦
    // alert( 4 );
    function stuff( name : string, ...values : [double] ) : void
✦
    {
      alert( values.length );
    }

    var array = [1,2,3,4];
✦
    stuff( “John”, ...array );
Union and Any Types
    var test : (string, double) = “test”;
✦
    test = 3;
    test = {}; // ERROR
    These are equivalent:
✦
    ✦ var test : * = “test”;
    ✦ var test = “test”;
Type Definitions
    type Point = { x: double, y: double };
✦

    var p : Point = { x: 3.0, y: 24.0 };
✦
Nullability
    Prevent variables from accepting null
✦
    values
    var name : * = “John”;
✦

    var name : string! = “John”;
✦
    name = “Ted”;
    name = null; // ERROR
    function test( name: string? ) {
✦
      alert( name );
    }
Initialization
    class User {
✦
       var name : string!; // Must be initialized
       function User( n ) : name = n {
          // ...
       }
    }
“like”
    type Point = { x: double, y: double };
✦

    if ( { x: 3, y: 5 } like Point )
✦
       alert( “That looks like a point to me!” );
    if ( !({ x: 3 } like Point) )
✦
       alert( “Not a point!” );
    // Loop over array-like things:
✦
    function every( a: like { length: double } ) {
       for ( var i = 0; i < a.length; i++ )
         alert( a[i] );
    }
Parameterized Types
    var m: Map.<string, *>;
✦

    class Point.<T> {
✦
       var x: T, y: T;
    }
    var p = new Point.<double>;
✦
    p.x = 3.0;
    p.y = 5.0;
Structure
Namespaces
    namespace extra = “extra”;
✦

    Pre-defined namespaces:
✦
    ✦ __ES4__
      ✦ intrinsic
      ✦ iterator
      ✦ meta

    Namespaced variables:
✦
    iteration::StopIteration
    intrinsic::readFile
Multimethods
    generic function intersect(s1, s2);
✦
    generic function intersect(s1: Shape, s2: Shape ) {
      // ...
    }
    generic function intersect(s1: Rect, s2: Rect ) {
      // ...
    }
    generic function test(a: Object?, b...
✦

    generic function test(a: Object!
✦
Iteration
    class Fib {
✦
       private var a=0, b=1;

        iterator function get(deep:boolean = false) : IteratorType.<double>
           this

        public function next(): double {
          if ( b > 100 )
              throw iterator::StopIteration;
          [a,b] = [b,a+b];
          return a;
        }
    }

    for ( let i in new Fib )
✦
      alert( i );
For .. Each
    For each loops through values
✦

    let s = “”;
✦
    for each ( let n in [“a”,”b”,”c”] )
        s += n;
    alert(s);
    // “abc”
Self-Hosting
Map.es
    The reference implementation’s classes are
✦
    written in ECMAScript
    package
✦
    {
      use namespace intrinsic;
      use default namespace public;
      intrinsic class Map.<K,V>
      {
        static const length = 2;
        function Map(equals=intrinsic::===, hashcode=intrinsic::hashcode)
            : equals = equals
            , hashcode = hashcode
            , element_count = 0
        {
        }
        // ...
    }
More Info
    ECMAScript 4 Progress:
✦
    http://spreadsheets.google.com/ccc?key=pFIHldY_CkszsFxMkQOReAQ&hl=en


    ECMAScript 4 White Paper Overview:
✦
    http://www.ecmascript.org/es4/spec/overview.pdf

    Blogging:
✦
    http://ejohn.org/

More Related Content

What's hot

Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
deimos
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
Remy Sharp
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
deimos
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
Remy Sharp
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
QConLondon2008
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
Bedis ElAchèche
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
Remy Sharp
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
Remy Sharp
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
Angel Ruiz
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
Doug Neiner
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
지수 윤
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
Remy Sharp
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
Paul Bakaus
 
Jquery ui
Jquery uiJquery ui
Jquery ui
adm_exoplatform
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuery
Sudar Muthu
 
jQuery
jQueryjQuery
jQuery
Vishwa Mohan
 
JQuery in Seaside
JQuery in SeasideJQuery in Seaside
JQuery in Seaside
ESUG
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
Constantin Titarenko
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
Jussi Pohjolainen
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
Rebecca Murphey
 

What's hot (20)

Remy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQueryRemy Sharp The DOM scripting toolkit jQuery
Remy Sharp The DOM scripting toolkit jQuery
 
Prototype & jQuery
Prototype & jQueryPrototype & jQuery
Prototype & jQuery
 
Joe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand DwrJoe Walker Interactivewebsites Cometand Dwr
Joe Walker Interactivewebsites Cometand Dwr
 
Yearning jQuery
Yearning jQueryYearning jQuery
Yearning jQuery
 
The Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J QueryThe Dom Scripting Toolkit J Query
The Dom Scripting Toolkit J Query
 
jQuery Essentials
jQuery EssentialsjQuery Essentials
jQuery Essentials
 
HTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymoreHTML5: where flash isn't needed anymore
HTML5: where flash isn't needed anymore
 
Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)Is HTML5 Ready? (workshop)
Is HTML5 Ready? (workshop)
 
Unobtrusive javascript with jQuery
Unobtrusive javascript with jQueryUnobtrusive javascript with jQuery
Unobtrusive javascript with jQuery
 
jQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and BlingjQuery: Nuts, Bolts and Bling
jQuery: Nuts, Bolts and Bling
 
HTML,CSS Next
HTML,CSS NextHTML,CSS Next
HTML,CSS Next
 
jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009jQuery Loves Developers - Oredev 2009
jQuery Loves Developers - Oredev 2009
 
An in-depth look at jQuery
An in-depth look at jQueryAn in-depth look at jQuery
An in-depth look at jQuery
 
Jquery ui
Jquery uiJquery ui
Jquery ui
 
A Short Introduction To jQuery
A Short Introduction To jQueryA Short Introduction To jQuery
A Short Introduction To jQuery
 
jQuery
jQueryjQuery
jQuery
 
JQuery in Seaside
JQuery in SeasideJQuery in Seaside
JQuery in Seaside
 
jQuery: Events, Animation, Ajax
jQuery: Events, Animation, AjaxjQuery: Events, Animation, Ajax
jQuery: Events, Animation, Ajax
 
Intro to HTML5
Intro to HTML5Intro to HTML5
Intro to HTML5
 
Mulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development ToolkitMulberry: A Mobile App Development Toolkit
Mulberry: A Mobile App Development Toolkit
 

Similar to JavaScript 1.5 to 2.0 (TomTom)

Tamarin and ECMAScript 4
Tamarin and ECMAScript 4Tamarin and ECMAScript 4
Tamarin and ECMAScript 4
jeresig
 
Tamarin And Ecmascript 4
Tamarin And Ecmascript 4Tamarin And Ecmascript 4
Tamarin And Ecmascript 4
elliando dias
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)
jeresig
 
MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScript
Caridy Patino
 
What's up with Prototype and script.aculo.us?
What's up with Prototype and script.aculo.us?What's up with Prototype and script.aculo.us?
What's up with Prototype and script.aculo.us?
Christophe Porteneuve
 
History of jQuery
History of jQueryHistory of jQuery
History of jQuery
jeresig
 
Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009
tolmasky
 
Groovy and Grails talk
Groovy and Grails talkGroovy and Grails talk
Groovy and Grails talk
desistartups
 
Functional Javascript
Functional JavascriptFunctional Javascript
Functional Javascript
guest4d57e6
 
Javascript status 2016
Javascript status 2016Javascript status 2016
Javascript status 2016
Arshavski Alexander
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
François Sarradin
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6
Solution4Future
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
Bruno Scopelliti
 
javascript teach
javascript teachjavascript teach
javascript teach
guest3732fa
 
JSBootcamp_White
JSBootcamp_WhiteJSBootcamp_White
JSBootcamp_White
guest3732fa
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
Siarhei Barysiuk
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
Troy Miles
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial Slides
Tobias Oetiker
 
OO JS for AS3 Devs
OO JS for AS3 DevsOO JS for AS3 Devs
OO JS for AS3 Devs
Jason Hanson
 
From Javascript To Haskell
From Javascript To HaskellFrom Javascript To Haskell
From Javascript To Haskell
ujihisa
 

Similar to JavaScript 1.5 to 2.0 (TomTom) (20)

Tamarin and ECMAScript 4
Tamarin and ECMAScript 4Tamarin and ECMAScript 4
Tamarin and ECMAScript 4
 
Tamarin And Ecmascript 4
Tamarin And Ecmascript 4Tamarin And Ecmascript 4
Tamarin And Ecmascript 4
 
The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)The Future of JavaScript (Ajax Exp '07)
The Future of JavaScript (Ajax Exp '07)
 
MiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScriptMiamiJS - The Future of JavaScript
MiamiJS - The Future of JavaScript
 
What's up with Prototype and script.aculo.us?
What's up with Prototype and script.aculo.us?What's up with Prototype and script.aculo.us?
What's up with Prototype and script.aculo.us?
 
History of jQuery
History of jQueryHistory of jQuery
History of jQuery
 
Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009Cappuccino @ JSConf 2009
Cappuccino @ JSConf 2009
 
Groovy and Grails talk
Groovy and Grails talkGroovy and Grails talk
Groovy and Grails talk
 
Functional Javascript
Functional JavascriptFunctional Javascript
Functional Javascript
 
Javascript status 2016
Javascript status 2016Javascript status 2016
Javascript status 2016
 
JavaScript Core
JavaScript CoreJavaScript Core
JavaScript Core
 
JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6JavaScript - new features in ECMAScript 6
JavaScript - new features in ECMAScript 6
 
ES6 Overview
ES6 OverviewES6 Overview
ES6 Overview
 
javascript teach
javascript teachjavascript teach
javascript teach
 
JSBootcamp_White
JSBootcamp_WhiteJSBootcamp_White
JSBootcamp_White
 
JavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best PracticesJavaScript and UI Architecture Best Practices
JavaScript and UI Architecture Best Practices
 
Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1Game Design and Development Workshop Day 1
Game Design and Development Workshop Day 1
 
LISA QooxdooTutorial Slides
LISA QooxdooTutorial SlidesLISA QooxdooTutorial Slides
LISA QooxdooTutorial Slides
 
OO JS for AS3 Devs
OO JS for AS3 DevsOO JS for AS3 Devs
OO JS for AS3 Devs
 
From Javascript To Haskell
From Javascript To HaskellFrom Javascript To Haskell
From Javascript To Haskell
 

More from jeresig

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
jeresig
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
jeresig
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
jeresig
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
jeresig
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
jeresig
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
jeresig
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
jeresig
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
jeresig
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
jeresig
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
jeresig
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
jeresig
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
jeresig
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
jeresig
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
jeresig
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
jeresig
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
jeresig
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
jeresig
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
jeresig
 

More from jeresig (20)

Does Coding Every Day Matter?
Does Coding Every Day Matter?Does Coding Every Day Matter?
Does Coding Every Day Matter?
 
Accidentally Becoming a Digital Librarian
Accidentally Becoming a Digital LibrarianAccidentally Becoming a Digital Librarian
Accidentally Becoming a Digital Librarian
 
2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)2014: John's Favorite Thing (Neo4j)
2014: John's Favorite Thing (Neo4j)
 
Computer Vision as Art Historical Investigation
Computer Vision as Art Historical InvestigationComputer Vision as Art Historical Investigation
Computer Vision as Art Historical Investigation
 
Hacking Art History
Hacking Art HistoryHacking Art History
Hacking Art History
 
Using JS to teach JS at Khan Academy
Using JS to teach JS at Khan AcademyUsing JS to teach JS at Khan Academy
Using JS to teach JS at Khan Academy
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
NYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri ResultsNYARC 2014: Frick/Zeri Results
NYARC 2014: Frick/Zeri Results
 
EmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image AnalysisEmpireJS: Hacking Art with Node js and Image Analysis
EmpireJS: Hacking Art with Node js and Image Analysis
 
Applying Computer Vision to Art History
Applying Computer Vision to Art HistoryApplying Computer Vision to Art History
Applying Computer Vision to Art History
 
JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)JavaScript Libraries (Ajax Exp 2006)
JavaScript Libraries (Ajax Exp 2006)
 
Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)Introduction to jQuery (Ajax Exp 2006)
Introduction to jQuery (Ajax Exp 2006)
 
jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)jQuery Recommendations to the W3C (2011)
jQuery Recommendations to the W3C (2011)
 
jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)jQuery Open Source Process (RIT 2011)
jQuery Open Source Process (RIT 2011)
 
jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)jQuery Open Source Process (Knight Foundation 2011)
jQuery Open Source Process (Knight Foundation 2011)
 
jQuery Mobile
jQuery MobilejQuery Mobile
jQuery Mobile
 
jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)jQuery Open Source (Fronteer 2011)
jQuery Open Source (Fronteer 2011)
 
Holistic JavaScript Performance
Holistic JavaScript PerformanceHolistic JavaScript Performance
Holistic JavaScript Performance
 
New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)New Features Coming in Browsers (RIT '09)
New Features Coming in Browsers (RIT '09)
 
Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)Introduction to jQuery (Ajax Exp 2007)
Introduction to jQuery (Ajax Exp 2007)
 

Recently uploaded

欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
concepsionchomo153
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results
 
Prescriptive analytics BA4206 Anna University PPT
Prescriptive analytics BA4206 Anna University PPTPrescriptive analytics BA4206 Anna University PPT
Prescriptive analytics BA4206 Anna University PPT
Freelance
 
Best Competitive Marble Pricing in Dubai - ☎ 9928909666
Best Competitive Marble Pricing in Dubai - ☎ 9928909666Best Competitive Marble Pricing in Dubai - ☎ 9928909666
Best Competitive Marble Pricing in Dubai - ☎ 9928909666
Stone Art Hub
 
Efficient PHP Development Solutions for Dynamic Web Applications
Efficient PHP Development Solutions for Dynamic Web ApplicationsEfficient PHP Development Solutions for Dynamic Web Applications
Efficient PHP Development Solutions for Dynamic Web Applications
Harwinder Singh
 
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
dpbossdpboss69
 
High-Quality IPTV Monthly Subscription for $15
High-Quality IPTV Monthly Subscription for $15High-Quality IPTV Monthly Subscription for $15
High-Quality IPTV Monthly Subscription for $15
advik4387
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results
 
Science Around Us Module 2 Matter Around Us
Science Around Us Module 2 Matter Around UsScience Around Us Module 2 Matter Around Us
Science Around Us Module 2 Matter Around Us
PennapaKeavsiri
 
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
Niswey
 
Discover the Beauty and Functionality of The Expert Remodeling Service
Discover the Beauty and Functionality of The Expert Remodeling ServiceDiscover the Beauty and Functionality of The Expert Remodeling Service
Discover the Beauty and Functionality of The Expert Remodeling Service
obriengroupinc04
 
GKohler - Retail Scavenger Hunt Presentation
GKohler - Retail Scavenger Hunt PresentationGKohler - Retail Scavenger Hunt Presentation
GKohler - Retail Scavenger Hunt Presentation
GraceKohler1
 
Kalyan Chart Satta Matka Dpboss Kalyan Matka Results
Kalyan Chart Satta Matka Dpboss Kalyan Matka ResultsKalyan Chart Satta Matka Dpboss Kalyan Matka Results
Kalyan Chart Satta Matka Dpboss Kalyan Matka Results
Satta Matka Dpboss Kalyan Matka Results
 
The Most Inspiring Entrepreneurs to Follow in 2024.pdf
The Most Inspiring Entrepreneurs to Follow in 2024.pdfThe Most Inspiring Entrepreneurs to Follow in 2024.pdf
The Most Inspiring Entrepreneurs to Follow in 2024.pdf
thesiliconleaders
 
AI Transformation Playbook: Thinking AI-First for Your Business
AI Transformation Playbook: Thinking AI-First for Your BusinessAI Transformation Playbook: Thinking AI-First for Your Business
AI Transformation Playbook: Thinking AI-First for Your Business
Arijit Dutta
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results
 
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
Cambridge Product Management Network
 
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
Ksquare Energy Pvt. Ltd.
 
8328958814KALYAN MATKA | MATKA RESULT | KALYAN
8328958814KALYAN MATKA | MATKA RESULT | KALYAN8328958814KALYAN MATKA | MATKA RESULT | KALYAN
8328958814KALYAN MATKA | MATKA RESULT | KALYAN
➑➌➋➑➒➎➑➑➊➍
 
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
taqyea
 

Recently uploaded (20)

欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
欧洲杯投注-欧洲杯投注外围盘口-欧洲杯投注盘口app|【​网址​🎉ac22.net🎉​】
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
 
Prescriptive analytics BA4206 Anna University PPT
Prescriptive analytics BA4206 Anna University PPTPrescriptive analytics BA4206 Anna University PPT
Prescriptive analytics BA4206 Anna University PPT
 
Best Competitive Marble Pricing in Dubai - ☎ 9928909666
Best Competitive Marble Pricing in Dubai - ☎ 9928909666Best Competitive Marble Pricing in Dubai - ☎ 9928909666
Best Competitive Marble Pricing in Dubai - ☎ 9928909666
 
Efficient PHP Development Solutions for Dynamic Web Applications
Efficient PHP Development Solutions for Dynamic Web ApplicationsEfficient PHP Development Solutions for Dynamic Web Applications
Efficient PHP Development Solutions for Dynamic Web Applications
 
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
Call 8867766396 Dpboss Matka Guessing Satta Matta Matka Kalyan Chart Indian M...
 
High-Quality IPTV Monthly Subscription for $15
High-Quality IPTV Monthly Subscription for $15High-Quality IPTV Monthly Subscription for $15
High-Quality IPTV Monthly Subscription for $15
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
 
Science Around Us Module 2 Matter Around Us
Science Around Us Module 2 Matter Around UsScience Around Us Module 2 Matter Around Us
Science Around Us Module 2 Matter Around Us
 
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
Unlocking WhatsApp Marketing with HubSpot: Integrating Messaging into Your Ma...
 
Discover the Beauty and Functionality of The Expert Remodeling Service
Discover the Beauty and Functionality of The Expert Remodeling ServiceDiscover the Beauty and Functionality of The Expert Remodeling Service
Discover the Beauty and Functionality of The Expert Remodeling Service
 
GKohler - Retail Scavenger Hunt Presentation
GKohler - Retail Scavenger Hunt PresentationGKohler - Retail Scavenger Hunt Presentation
GKohler - Retail Scavenger Hunt Presentation
 
Kalyan Chart Satta Matka Dpboss Kalyan Matka Results
Kalyan Chart Satta Matka Dpboss Kalyan Matka ResultsKalyan Chart Satta Matka Dpboss Kalyan Matka Results
Kalyan Chart Satta Matka Dpboss Kalyan Matka Results
 
The Most Inspiring Entrepreneurs to Follow in 2024.pdf
The Most Inspiring Entrepreneurs to Follow in 2024.pdfThe Most Inspiring Entrepreneurs to Follow in 2024.pdf
The Most Inspiring Entrepreneurs to Follow in 2024.pdf
 
AI Transformation Playbook: Thinking AI-First for Your Business
AI Transformation Playbook: Thinking AI-First for Your BusinessAI Transformation Playbook: Thinking AI-First for Your Business
AI Transformation Playbook: Thinking AI-First for Your Business
 
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan ChartSatta Matka Dpboss Kalyan Matka Results Kalyan Chart
Satta Matka Dpboss Kalyan Matka Results Kalyan Chart
 
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
2024.06 CPMN Cambridge - Beyond Now-Next-Later.pdf
 
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
PM Surya Ghar Muft Bijli Yojana: Online Application, Eligibility, Subsidies &...
 
8328958814KALYAN MATKA | MATKA RESULT | KALYAN
8328958814KALYAN MATKA | MATKA RESULT | KALYAN8328958814KALYAN MATKA | MATKA RESULT | KALYAN
8328958814KALYAN MATKA | MATKA RESULT | KALYAN
 
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
一比一原版(QMUE毕业证书)英国爱丁堡玛格丽特女王大学毕业证文凭如何办理
 

JavaScript 1.5 to 2.0 (TomTom)

  • 1. JavaScript 1.5 to 2.0 John Resig (ejohn.org) Mozilla Corporation
  • 2. The Big Picture ECMAScript 3 JavaScript 1.5 ActionScript 2 JScript Etc. SpiderMonkey AVM JScript Engine KJS (Apple) Rhino Opera
  • 3. Jav aS 1999 crip t1 .5 Jav 2005 aS crip t1 .6 Jav 2006 aS crip t1 .7 Jav aS 2008 c Jav ript aS 1.8 cr ipt Ja Path to JavaScript 2 1.9 va 2009 Sc ri pt 2
  • 4. The JavaScript Language Current: ✦ JavaScript 1.5 (Firefox 1, ES3) JavaScript 1.6 (Firefox 1.5) ✦ JavaScript 1.7 (Firefox 2) ✦ JavaScipt 1.8 (Firefox 3) ✦ JavaScript 1.9 (Firefox 3.1) ✦ JavaScript 2 (Firefox 4, ES4) ✦
  • 5. JavaScript 1.5 Getters and Setters ✦ ✦ Extra power over properties ✦ Two powerful uses: ✦ Private data access ✦ Lazy-loading data var n = “John”; ✦ var obj = { get name(){ return n; }, set name(value){ n = value; } }; obj.name = “Ted”; obj.name == “Ted” // true
  • 6. Getters and Setters var n = “John”; ✦ var obj = {}; obj.__defineGetter__(“name”, function(){ return n; }); obj.__defineSetter__(“name”, function(value){ n = value; }); obj.name = “Ted”; obj.name == “Ted”; // true obj.__lookupGetter__(“name”) ✦ // => function(){ return n; } // __lookupSetter__ too!
  • 7. Lazy-Loading Data var pixelsDone; ✦ data.__defineGetter__(”pixels”, function(){ if ( pixelsDone ) return pixelsDone; pixelsDone = []; for ( var i = 0; i < pixels.length; i += 4 ){ pixelsDone.push( p.color(...) ); } return pixelsDone; }); obj.pixels[3] ✦
  • 8. JavaScript 1.6 Array Extras ✦ ✦ indexOf / lastIndexOf [0,1,2].indexOf(1) == 1 ✦ every / filter / some [0,1,2].every(function(val){ return val > 0; }); // false ✦ map [0,1,2].map(function(val){return val + 1;}); // [1,2,3] ✦ forEach [0,1,2].forEach(function(val,index){});
  • 9. JavaScript 1.7 Generators and Iterators ✦ ✦ Lazy-load data ✦ Database querying ✦ Threading http://www.neilmix.com/2007/02/07/ threading-in-javascript-17/
  • 10. Generators and Iterators function fib() { ✦ var i = 0, j = 1; while (true) { yield i; var t = i; i = j; j += t; } } var g = fib(); for ( var i in g ) { document.write(i + “<br>n”); if ( i > 100 ) break; }
  • 11. let Block-level statements ✦ for ( let i = 0; i < 10; i++ ) { } ✦ while ( true ) { let test = 5; } ✦ let (test = 5) { ✦ function stuff(){ return test; } } { let test = 5; ✦ { let test = 6; print(test);} print(test); }
  • 12. Array Comprehension [i for ( let i = 0; i < 3; i++ )] ✦ // => [0, 1, 2] function range(begin, end) { ✦ for (let i = begin; i < end; ++i) { yield i; } } [i for each (i in range(0, 3))]
  • 13. Destructuring var [newA, newB] = [a, b]; ✦ var newA = a, newB = b; ✦ [a, b] = [b, a] ✦ function test(){ return [0, 1]; } ✦ let [a, b] = test(); var [, c] = test(); var {name: name} = {name: “John”} ✦ name == “John” var {name} = {name: “John”} ✦
  • 14. JavaScript 1.8 Mostly a bug fix release ✦ Expression Closures ✦ function(x){ return x * x; } function(x) x * x; Generator Expressions ✦ function val_iter(obj) { return (obj[x] for (x in obj)); } for ( let value in val_iter(obj) ) { ... }
  • 15. reduce Great for summing or concating ✦ [x for ( x in 100 )] .reduce(function(a,b) a+b); [[...],[...]] ✦ .reduce(function(a,b){ a.concat(b);}, []) reduceRight ✦
  • 16. JavaScript 1.9 Merge object properties: ✦ Object.extend( baseObj, otherObj ) Function.prototype.bind() ✦ fn.bind(someThis) “ string ”.trim() ✦ // => “string” mozilla.hashcode(someObj) ✦ // => 1234 (unique ID)
  • 17. defineProperty Object.defineProperty(obj, name, value, ✦ types) var obj = {}; ✦ Object.defineProperty(obj, “name”, “John”, Object.NOT_WRITABLE | Object.NOT_DELETABLE); obj.name = “Test”; obj.name == “John”; delete obj.name obj.name == “John”;
  • 18. JSON mozilla.JSON.parse(“{name:’John’}”) ✦ // => {name: ‘John’} mozilla.JSON.serialize({name:’John’}) ✦ // => “{name:’John’}”
  • 19. Catchalls var props = {}; ✦ var obj = { test: true, get *(name){ return props[name]; }, set *(name, value){ props[name] = value; } } obj.__defineGetter_(“”, function(){}) ✦
  • 20. JavaScript 2 Goals Backwards Compatible ✦ Suitable to developing large systems ✦ Allow for reusable libraries ✦ Merge previous efforts (ActionScript) ✦ Fix ECMAScript 3 bugs ✦ Keep it usable for small programs ✦
  • 21. Features Classes and Interfaces ✦ Packages and Namespaces ✦ Type Annotations ✦ Strict Verification ✦ Optimization ✦ Syntax Shortcuts ✦ Iterators and Generators ✦ Self-hosting ✦
  • 22. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 JScript Etc. Screaming Tamarin KJS (Apple) Monkey Opera
  • 23. Tamarin Tamarin ✦ ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) The Three Monkeys: ✦ ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey
  • 24. Three Monkies ActionMonkey ✦ ✦ Integrating Tamarin into SpiderMonkey ✦ Powering Firefox 4 (?) + JavaScript 2 ScreamingMonkey ✦ ✦ Forcing Tamarin into Internet Explorer ✦ (Kicking and screaming?) IronMonkey ✦ ✦ Bringing Python + Ruby to Tamarin
  • 26. Classes class Programmer { ✦ var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } var p = new Programmer; ✦ p.name = “John”; p.work(); p.work.apply( someotherp ); p.interest = “science”; // Error
  • 27. Dynamic Classes dynamic class Programmer { ✦ var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } var p = new Programmer; ✦ p.lastName = “Resig”; for ( var i in p ) alert( i ); // alert( “Resig” );
  • 28. Getters and Setters class Programmer { ✦ var _name; function get name(){ return _name; } function set name(value){ _name = value + “ Resig”; } } var p = new Programmer; ✦ p.name = “John”; alert( p.name ); // “John Resig”
  • 29. Catch-Alls dynamic class Programmer { ✦ meta function get(name) { ... } meta function set(name, value) { alert(“Setting “ + name + “ to “ + value); } } var p = new Programmer ✦ p.name = “John”; // alert(“Setting name to John”);
  • 30. Inheritance class Artist { ✦ function draw() { alert(“Drawing!”); } } class Designer extends Artist { override function draw() { alert(“Designing!”); } } var d = new Designer ✦ d.draw(); // alert(“Designing!”);
  • 31. Inheritance (cont.) ‘final’ methods can’t be overriden ✦ class Artist { ✦ final function draw() {alert(“Drawing!”);} } class Designer extends Artist { // ERROR: Can’t override draw! override function draw() { alert(“Designing!”); } }
  • 32. Inheritance (cont.) ‘final’ classes can’t be inherited from ✦ final class Artist { ✦ function draw() { alert(“Drawing!”); } } // ERROR: Can’t inherit from Artist class Designer extends Artist { override function draw() { alert(“Designing!”); } }
  • 33. Metaclass Provide global functions and properties on ✦ a class object class Users { ✦ static function find( name ) { // ... } } Users.find( “John” ); ✦
  • 34. Interfaces Verify that a class implements another ✦ class Artist { ✦ function draw(); } class Designer implements Artist { function draw() { alert(“Designing!”); } } if ( Designer is Artist ) ✦ alert(“Designers are Artists!”);
  • 35. Types
  • 36. Types Types are broken down into: ✦ ✦ string ✦ double (ECMAScript 3-style Number) ✦ boolean
  • 37. Type Annotations var name : string = “John”; ✦ let x : double = 5.3; ✦ function stuff( x: string, obj: Object ) : ✦ boolean {}
  • 38. Function Types Only return specific types: ✦ function isValid() : boolean { } Only be used on certain objects types: ✦ function every( this: Array ) { for ( var i = 0; i < this.length; i++ ) alert( this[i] ); } every.call( [0,1,2] ); // alert(0); alert(1); alert(2); every.call({a: “b”}); // ERROR
  • 39. Rest Arguments function stuff( name, ...values ){ ✦ alert( values.length ); } stuff( “John”, 1, 2, 3, 4 ); ✦ // alert( 4 ); function stuff( name : string, ...values : [double] ) : void ✦ { alert( values.length ); } var array = [1,2,3,4]; ✦ stuff( “John”, ...array );
  • 40. Union and Any Types var test : (string, double) = “test”; ✦ test = 3; test = {}; // ERROR These are equivalent: ✦ ✦ var test : * = “test”; ✦ var test = “test”;
  • 41. Type Definitions type Point = { x: double, y: double }; ✦ var p : Point = { x: 3.0, y: 24.0 }; ✦
  • 42. Nullability Prevent variables from accepting null ✦ values var name : * = “John”; ✦ var name : string! = “John”; ✦ name = “Ted”; name = null; // ERROR function test( name: string? ) { ✦ alert( name ); }
  • 43. Initialization class User { ✦ var name : string!; // Must be initialized function User( n ) : name = n { // ... } }
  • 44. “like” type Point = { x: double, y: double }; ✦ if ( { x: 3, y: 5 } like Point ) ✦ alert( “That looks like a point to me!” ); if ( !({ x: 3 } like Point) ) ✦ alert( “Not a point!” ); // Loop over array-like things: ✦ function every( a: like { length: double } ) { for ( var i = 0; i < a.length; i++ ) alert( a[i] ); }
  • 45. Parameterized Types var m: Map.<string, *>; ✦ class Point.<T> { ✦ var x: T, y: T; } var p = new Point.<double>; ✦ p.x = 3.0; p.y = 5.0;
  • 47. Namespaces namespace extra = “extra”; ✦ Pre-defined namespaces: ✦ ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta Namespaced variables: ✦ iteration::StopIteration intrinsic::readFile
  • 48. Multimethods generic function intersect(s1, s2); ✦ generic function intersect(s1: Shape, s2: Shape ) { // ... } generic function intersect(s1: Rect, s2: Rect ) { // ... } generic function test(a: Object?, b... ✦ generic function test(a: Object! ✦
  • 49. Iteration class Fib { ✦ private var a=0, b=1; iterator function get(deep:boolean = false) : IteratorType.<double> this public function next(): double { if ( b > 100 ) throw iterator::StopIteration; [a,b] = [b,a+b]; return a; } } for ( let i in new Fib ) ✦ alert( i );
  • 50. For .. Each For each loops through values ✦ let s = “”; ✦ for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc”
  • 52. Map.es The reference implementation’s classes are ✦ written in ECMAScript package ✦ { use namespace intrinsic; use default namespace public; intrinsic class Map.<K,V> { static const length = 2; function Map(equals=intrinsic::===, hashcode=intrinsic::hashcode) : equals = equals , hashcode = hashcode , element_count = 0 { } // ... }
  • 53. More Info ECMAScript 4 Progress: ✦ http://spreadsheets.google.com/ccc?key=pFIHldY_CkszsFxMkQOReAQ&hl=en ECMAScript 4 White Paper Overview: ✦ http://www.ecmascript.org/es4/spec/overview.pdf Blogging: ✦ http://ejohn.org/