Java Script The Language Luke Hoban Java Script
Java. Script: The Language Luke Hoban Java. Script PM Microsoft
1000 Sunspider runs per minute (log scale) Java. Script Internet Explorer Java. Script Performance 100 10 1 2002 2003 2004 2005 2006 2007 2008 2009 2010
ECMAScript is just a funny name for Java. Script
is based on a few key ideas
C-style syntax but not a whole lot of it function everything() { var x = {a: 10}, y = [1, 2], z = function() { }; for(var p in x) { lbl: for(var i = 0; i < 10; i++) { switch(x[p]) { case 0: continue; default: break lbl; } } if(x instanceof String || 'a' in x) delete x. a; } while(true) { if(true) { this. x = 3 / (-this. f()) ? /foo/g : new String("hello") } else { do { try { throw 3; } catch(e) { debugger; return; } finally {}} while(false); } } }
a small set of basic types
Objects are bags of properties var o 1 = {}; o 1. x = 3; o 1. x = 4; var o 2 = { x : 3 }; var o 3 = { first: o 2, second: function() { return 5; } } o 2. x === 3; o 2["x"] === 3; o 2["the answer!"] = 42;
Objects have prototypes var o 1 = { }; o 1. value. Of() === "[object Object]" var o 2 = {value. Of: function() { return 10; }}; o 2. value. Of() === 10
Objects inherit from other objects var point 2 d = { x: 10, y: 20 }; var point 3 d = Object. create(point 2 d); point 3 d. z = 30; var location = Object. create(point 2 d); location. name = "Mandalay Bay"
Objects can have both “data properties” and “accessor properties” // Data Property var bank. Account = { balance: 1257 } // Accessor Property var bank. Account 2 = { get balance() { return 1257; } set balance(v) { }; }
Objects have a descriptor associated with each property Data Descriptor: { } value : 47, writable : false, enumerable : true, configurable : true Accessor Descriptor: { } get : function location() { }, set : function location() { }, enumerable : true, configurable : true
demo Objects, Properties and the DOM Accessor Properties Object. get. Own. Property. Descriptor Object. define. Property
Objects key ideas
Functions are first-class values function sum(x, y) { return x + y; } var sum 2 = function(x, y) { return x + y; } var sum 3 = sum; function wrap(f) { return f(); } wrap(function() { return 5; })
Functions are objects function sum(x, y) { return x + y; } sum. length === 2; Object. get. Prototype. Of(sum) === Function. prototype;
Functions have special rules for ‘this’ var obj = { sum: function(x, y) { return x + y; } } obj. sum(3, 4); var obj 2 = { offset: 7; sum: function(x, y) { return x + y + this. offset; } } obj 2. sum(3, 4) === 14; var f = obj 2. sum; f(3, 4) === Na. N; f. call(obj 2, 3, 4);
Functions have special behaviour when invoked with ‘new’ function Person(first. Name, last. Name) { this. first. Name = first. Name; this. last. Name = last. Name; } var bob = new Person("Bob", "Crites"); var anil = new Person("Anil", "Madhavan"); bob. first. Name === "Bob"; Person. prototype. get. Full. Name = function() { return this. first. Name + " " + this. last. Name; } bob. get. Full. Name() === "Bob Crites"
Functions objects and prototypes and constructors, oh my! bob. first. Name === "bob"; bob. get. Full. Name() === "Bob Crites"; anil. get. Full. Name === bob. get. Full. Name;
Functions objects and prototypes and constructors, oh my! bob instanceof Person. prototype. get. Full. Name = function() {. . . }; new (bob. constructor)("Cynthia", "Washington")
Functions objects and prototypes and constructors, oh my! bob. value. Of() Person. value. Of()
Functions objects and prototypes and constructors, oh my!
demo Constructors and the DOM Constructors and ‘new’ HTML Element inheritance Web. IDL
Functions have their own variable scopes // Scope (function() { var x = 5; x === 5; })(); x === undefined // Outer variable access var outer = "hello"; (function() { outer = "goodbye"; })(); outer === "goodbye"; // Isolating from changes in outer variables var outer = "hello"; (function(outer) { set. Interval(function() {alert(outer); }, 100); })(outer); outer = "goodbye";
Functions important points
Strict Mode lets you opt-in to a more constrained subset of Java. Script (function () { "use strict"; // this function is strict. . . x = 5; // Error! arguments. caller; // Error! arguments. callee; // Error! var o = { x: 5}; Object. freeze(o); o. x = 7; // Throws }());
demo Strict Mode Indirect eval Duplicates Eval scope
and calls to action!
Visual Studio Home Page : : http: //www. microsoft. com/visualstudio/en-us Somasegar’s Blog : : http: //blogs. msdn. com/b/somasegar/ Jason Zander’s Blog : : http: //blogs. msdn. com/b/jasonz/ Facebook : : http: //www. facebook. com/visualstudio Twitter : : http: //twitter. com/#!/visualstudio
Learning Connect. Share. Discuss. Microsoft Certification & Training Resources http: //northamerica. msteched. com www. microsoft. com/learning Tech. Net Resources for IT Professionals Resources for Developers http: //microsoft. com/technet http: //microsoft. com/msdn
Complete an evaluation on Comm. Net and enter to win!
Scan the Tag to evaluate this session now on my. Tech. Ed Mobile
- Slides: 34