1. JavaScript: The Language
12/2/2018 6:27 AM
DEV307
JavaScript: The Language
Luke Hoban
JavaScript PM
Microsoft
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

2. JavaScript - Outlook Web Access, 1997
MIX 11
12/2/2018
JavaScript
<INPUT TYPE="button" Value="CLICK HERE" onClick="alert(' Wouldn\'t one of these be cool on your page? ')")>
- Free JavaScripts, 1996
- Outlook Web Access, 1997
“Gmail is comprised of 443,000 lines of JavaScript, 978,000 lines if comments are included”
- Google, 2010
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

3. ECMAScript is just a funny name for JavaScript
= ES5

4. Agenda Goal: We’ll talk about: We won’t focus on:
Deeper understanding of the flexible, simple core of JavaScript
We’ll talk about:
Core Concepts of the JavaScript language
Common usage patterns
What’s new in ES5?
We won’t focus on:
HTML, DOM, CSS
A complete tutorial of JavaScript

5. JavaScript is based on a few key ideas
C-style syntax
Dynamic typing
Objects
Functions
Prototypal inheritance

6. C-style syntax but not a whole lot of it
Similar to C, C++, Java, C#,
but with…
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);
Object, Array, and Function literals
for..in
Automatic semicolon insertion
Regular expressions

7. Dynamic Typing a small set of basic types
Number values (0, , 12e10, 3.14e1045)
Boolean values (true, false)
String values ("x", "hello", 'hel"lo', 'he\u1234ll\0\0')
undefined value (undefined)
null value (null)
Object values
User defined ({x:10})
Host defined (document)
Built-in (Object, Array, Function, RegExp, String, Number, Date, …)

8. Objects are bags of properties
Object literals create new objects
var o1 = {};
o1.x = 3;
o1.x = 4;
var o2 = { x : 3 };
var o3 = {
first: o2,
second: function() { return 5; } }
o2.x === 3;
o2["x"] === 3;
o2["the answer!"] = 42;
Property assignments add or modify properties.
Object literals can initialize object with properties
Properties can store any JavaScript values
Dot (.) and index ([]) are the same…
…but index can refer to full range of property

9. Objects have prototypes
var o1 = { };
o1.valueOf() === "[object Object]"
var o2 = {valueOf: function() { return 10; }};
o2.valueOf() === 10
Where does ‘valueOf’ come from?
It’s in a prototype object.
If the property isn’t in the current object, check it’s prototype, etc
Can be “overridden” by hiding.

10. Objects inherit from other objects
var point2d = { x:10, y:20 };
var point3d = Object.create(point2d);
point3d.z = 30;
var location = Object.create(point2d);
location.name = "Mandalay Bay"
The prototype chain
Sharing state

11. Objects can have both “data properties” and “accessor properties”
// Data Property
var bankAccount = {
balance: 1257 }
// Accessor Property
var bankAccount2 = {
get balance() { return 1257; }
set balance(v) { };
Can’t intercept reads/writes
Accessor property
Optional setter

12. 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 }
Can the value be changed?
Will the property be enumerated by “for..in”?
Can the property descriptor be changed?

13. Objects, Properties and the DOM
12/2/2018 6:27 AM
demo
Objects, Properties and the DOM
Accessor Properties
Object.getOwnPropertyDescriptor
Object.defineProperty
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

14. Objects key ideas String-keyed property bags Prototypes Properties
Flexible data structure
Prototypes
Sharing, inheritance
Properties
Descriptors, inspection, configuration, accessor properties

15. Functions are first-class values
function sum(x, y) {
return x + y; }
var sum2 = function(x, y) {
var sum3 = sum;
function wrap(f) {
return f();
wrap(function() { return 5; })
Functions can be defined with function declarations…
…or with anonymous function expressions.
The name of a function refers to the function value
Functions can be passed to other functions

16. Functions are objects Just an object. function sum(x, y) {
return x + y; }
sum.length === 2;
Object.getPrototypeOf(sum) === Function.prototype;
But inherits from Function.prototype
Every function instance has a ‘length’ property…
…and a ‘prototype’ property, we’ll get to this later.

17. Functions have special rules for ‘this’
Properties of an object can be functions.
var obj = {
sum: function(x,y) { return x + y; } }
obj.sum(3,4);
var obj2 = {
offset: 7;
sum: function(x,y) { return x + y + this.offset; }
obj2.sum(3,4) === 14;
var f = obj2.sum;
f(3,4) === NaN;
f.call(obj2, 3, 4);
Calls on a receiver object look like method calls.
Inside a function, ‘this’ is bound to the receiver of the call, if there is one.
There is no receiver – ‘this’ is the global object, ‘this.offset’ is undefined.
Use Function.prototype.call to specify the ‘this’ parameter.

18. Functions have special behaviour when invoked with ‘new’
‘new’ creates a fresh object…
function Person(firstName,lastName) {
this.firstName = firstName;
this.lastName = lastName; }
var bob = new Person("Bob", "Crites");
var anil = new Person("Anil", "Madhavan");
bob.firstName === "Bob";
Person.prototype.getFullName = function() {
return this.firstName + " " + this.lastName;
bob.getFullName() === "Bob Crites"
…with [Prototype] set to Person.prototype…
…then calls the Person function with the object as ‘this’.

19. Functions objects and prototypes and constructors, oh my!
MIX 11
12/2/2018
Functions objects and prototypes and constructors, oh my!
bob.firstName === "bob";
bob.getFullName() === "Bob Crites";
anil.getFullName === bob.getFullName;
But what about ‘Person’?
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

20. Functions objects and prototypes and constructors, oh my!
MIX 11
12/2/2018
Functions objects and prototypes and constructors, oh my!
bob instanceof Person
Person.prototype.getFullName = function() { ... };
new (bob.constructor)("Cynthia", "Washington")
There’s more to the prototype chain though…
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

21. Functions objects and prototypes and constructors, oh my!
MIX 11
12/2/2018
Functions objects and prototypes and constructors, oh my!
What about ‘Object’?
bob.valueOf()
Person.valueOf()
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

22. Functions objects and prototypes and constructors, oh my!
MIX 11
12/2/2018
Functions objects and prototypes and constructors, oh my!
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

23. Constructors and the DOM
12/2/2018 6:27 AM
demo
Constructors and the DOM
Constructors and ‘new’
HTML Element inheritance
WebIDL
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

24. Functions have their own variable scopes
var x = 5;
x === 5;
})();
x === undefined
// Outer variable access
var outer = "hello";
outer = "goodbye";
outer === "goodbye";
// Isolating from changes in outer variables
(function(outer) {
setInterval(function() {alert(outer);}, 100);
})(outer);
Doesn’t pollute the global object
Can see variables outside the function.
Pass variables in explicitly to isolate inside from outside

25. Functions important points
Objects
First-class, Function.prototype
this
Members, sharing, call
new
Constructors, function prototypes
Closures
Scoping, isolation, sharing

26. Strict Mode lets you opt-in to a more constrained subset of JavaScript
MIX 11
12/2/2018
Strict Mode lets you opt-in to a more constrained subset of JavaScript
(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
}());
Backward compatible opt-in.
Can’t accidentally add to global.
Restrict some common information leaks, like arguments.caller/callee.
Writing to non-writable property is an exception.
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

27. Indirect eval Duplicates Eval scope
12/2/2018 6:27 AM
demo
Strict Mode
Indirect eval
Duplicates
Eval scope
© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

28. Summary and calls to action!
MIX 11
12/2/2018
Summary and calls to action!
JavaScript is a simple, powerful, and flexible programming language
Just learn the core concepts
Be curious!
Browse through the implementation of your favorite JS library
Download IE9 or IE10
Use F12 tools to explore the JavaScript language
Learn about new ES5 features
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

29. DEV Track Resources
Visual Studio Home Page ::
Somasegar’s Blog ::
Jason Zander’s Blog ::
Facebook ::
Twitter ::

30. Resources Learning TechNet http://northamerica.msteched.com
Connect. Share. Discuss.
Microsoft Certification & Training Resources
TechNet
Resources for IT Professionals
Resources for Developers

31. Complete an evaluation on CommNet and enter to win!
Required Slide
Complete an evaluation on CommNet and enter to win!

32. MS Tag
Scan the Tag
to evaluate this
session now on
myTechEd Mobile

33. 12/2/2018 6:27 AM
© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

34. 12/2/2018 6:27 AM
© 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.
The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.