JavaScript for C# Developers

My Orando Code Camp Talk

Transcript

1. Shawn Wildermuth One of the Minds, Wilder Minds LLC Microsoft MVP @shawnwildermuth http://wilderminds.com It's Not As Painful As You Think JavaScript for C# Developers
2. JavaScript for C# Developers © 2012 Wilder Minds LLC Who Am I?  Shawn Wildermuth – shawn@wilderminds.com  Wilder Minds LLC – http://wilderminds.com  10 Time Microsoft MVP (Mostly that means I’m old)  Book Author – Pragmatic ADO.NET – MS Press Training Kits – Silverlight Appendix for WPF Programming (O’Reilly) – Essential Windows Phone (7.5 and 8 coming soon)
3. JavaScript for C# Developers © 2012 Wilder Minds LLC Agenda  Runtime Environments  HelloWorld.js  Hello Debugging  Managed Languages and JavaScript  Static and Loose Typing  JavaScript Versions
4. JavaScript for C# Developers © 2012 Wilder Minds LLC using System; namespace Example { public class Dog : Pet, IAnimal { public Dog() : base(4) { } FoodType _foodType = FoodType.Dry; public FoodType FoodType { get { return _foodType; } set { _foodType = value; } } public override void Feed(FoodType food) { base.Feed(food); } } } Requiring Libraries Defining Packaging Inheritance/Implementation Construction State Exposing State Behavior Defining Scope
5. JavaScript for C# Developers © 2012 Wilder Minds LLC Comparing the Languages C# • Strongly-Typed • Static • Classical Inheritance • Classes • Constructors • Methods JavaScript • Loosely-typed • Dynamic • Prototypal • Functions • Functions • Functions * From Douglas Crawford's "Classical Inheritance in JavaScript" (http://shawnw.me/jsinheritance)
6. JavaScript for C# Developers © 2012 Wilder Minds LLC Strong and Loose Typing  .NET and JavaScript are Different // C# var customer = new Customer(); // JavaScript var customer = new Customer(); Compiler Inferred Variable Declaration
7. JavaScript for C# Developers © 2012 Wilder Minds LLC Strong and Loose Typing  Strong Typing –Types are defined by names and static structure –Compiler does the checks for you –Compiler can infer the type when necessary // C# var x = 0; // Infers type to be int bool isInt = x is int; // true x = new object(); // Compilation Error
8. JavaScript for C# Developers © 2012 Wilder Minds LLC Strong and Loose Typing  Loose Typing –Types are typically defined by structure not by identity –Runtime checks –Type is dynamic // JavaScript var x = 0; // creates variable x that holds a number var isNumber = typeof x == "number"; // Works but limited x = new Object(); // no problem, redefines x with new type
9. JavaScript for C# Developers © 2012 Wilder Minds LLC Strong and Loose Typing  Strong Typing and OOP –Inheritance and interfaces are part of type identity // C# class Dog : Animal, IMoveable {...} class Car : Vehicle, IMoveable {...} // Accepts Any Animal (base class has Feed Method) void Feed(Animal ani) { ani.Feed(); } // Accepts any object that implements Interface void Move(IMoveable object) { object.Move(); }
10. JavaScript for C# Developers © 2012 Wilder Minds LLC Strong and Loose Typing  Loose Typing and OOP –Type is less important, but shape is important –Classic Duck Typing // JavaScript // Accepts any object // (must implement Feed function) function Feed(ani) { ani.Feed(); } // Accepts any object // (must implement Move method) function Move(object) { object.Move(); }
11. JavaScript for C# Developers © 2012 Wilder Minds LLC Dynamic Typing  Dynamic Typing Can be Powerful –"With much power comes much responsibility" // JavaScript var x = { name: "Shawn", city: "Atlanta" }; x.phone = "404-555-1212"; x.makeCall = function () { callSomeone(this.phone); };
12. JavaScript for C# Developers © 2012 Wilder Minds LLC Language Basics  Type Coalescing –JavaScript Wants to Coalesce Values // C# "test " + "me" // test me "test " + 1.ToString(); // test 1 String.Concat(100, "25"); // 10025 // JavaScript "test " + "me" // test me "test " + 1 // test 1 "test " + true // test true "test " + (1 == 1) // test true 100 + "25" // 10025
13. JavaScript for C# Developers © 2012 Wilder Minds LLC Language Basics  Most Operators Identical to .NET, except… –Equality/NotEqual (==, !=)  Determines equality with coalescing (if necessary) // JavaScript "hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true
14. JavaScript for C# Developers © 2012 Wilder Minds LLC Language Basics  JavaScript's Identically Equality Operators –Similar to .Equal()  Determines equality without coalescing // JavaScript "hello" == "hello"; // true 1 == 1; // true 1 == "1"; // true 1 === "1"; // false 1 !== "1"; // true 1 === 1.000000000000001; // false 1 === 1.0000000000000001; // true
15. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  Looks like C#, but not… // JavaScript function foo(one, two, three) { alert(one); alert(two); alert(three); } foo(1); // two and three are undefined // JavaScript function foo(one, two, three) { alert(one); if (two) alert(two); if (three) alert(three); } foo(1); // two and three are undefined
16. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  Overloading Functions? // JavaScript function foo(one) { alert("first"); } function foo(one, two) { alert("second"); } foo(1); // "second"
17. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  arguments object –Available Inside Function Body Only // JavaScript function foo(one, two, three) { alert(arguments.length); } foo(1); // 1 foo(1, 2); // 2 foo(1, 2, 3); // 3
18. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  arguments object –Declared Parameters Do Not Matter // JavaScript function foo() { alert(arguments.length); } foo(1); // 1 foo(1, 2); // 2 foo(1, 2, 3); // 3
19. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  arguments object –Accessing the Values // JavaScript function foo() { for (var x = 0; x < arguments.length; x++) { alert(arguments[x]); } } foo(1); // 1 foo(1, 2); // 1,2 foo(1, 2, 3); // 1,2,3
20. JavaScript for C# Developers © 2012 Wilder Minds LLC Function Parameters  Parameters are for mapping to arguments // JavaScript function foo(one, two, three) { alert(one); } foo(1,"hello", new Date());
21. JavaScript for C# Developers © 2012 Wilder Minds LLC Dynamic Objects  C# Supports Object and Collection Initializers // C# var cust = new Customer() { Name = "Shawn", CompanyName" = "Wilder Minds", Address = new Address() { StreetAddress = "123 Main Street", CityTown = "Atlanta", StateProvince = "Georgia", PostalCode = "12345", Country = "USA" } };
22. JavaScript for C# Developers © 2012 Wilder Minds LLC Dynamic Objects  Anonymous Types are Closer to Objects // C# var cust = new { Name = "Shawn", CompanyName" = "Wilder Minds", Address = new { StreetAddress = "123 Main Street", CityTown = "Atlanta", StateProvince = "Georgia", PostalCode = "12345", Country = "USA" } };
23. JavaScript for C# Developers © 2012 Wilder Minds LLC Dynamic Objects  Simple Object Creation –Follows Object Instantiation // JavaScript var cust = { name: "Shawn", "company name": "Wilder Minds", address: { streetAddress: "123 Main Street", cityTown: "Atlanta", stateProvince: "Georgia", postalCode: "12345", country: "USA" } };
24. JavaScript for C# Developers © 2012 Wilder Minds LLC What is 'this'?  In C#, this represents the instance of the class // C# class Foo { string _name; void Run(string newName) { this._name = newName; } }
25. JavaScript for C# Developers © 2012 Wilder Minds LLC What is 'this'?  Function Body Variable –"this" applies to the owner of the function // JavaScript var f = function() { alert(this); }; f(); // [Object Window] (huh?)
26. JavaScript for C# Developers © 2012 Wilder Minds LLC What is 'this'?  'this' is Owner // JavaScript var obj = { name: "myObj", myFunc: function() { log(this.name); } }; obj.myFunc(); // "myObj"
27. JavaScript for C# Developers © 2012 Wilder Minds LLC What is 'this'?  'this' is Owner –bind() lets you change the owner // JavaScript var obj = { name: "myObj", myFunc: function() { log(this); } }; obj.myFunc(); // this == obj var f = obj.myFunc.bind(this); // Copy Function with global f(); // this == global object
28. JavaScript for C# Developers © 2012 Wilder Minds LLC Closures  References outside are accessible in function –Regardless of lifetime // JavaScript var x = 1; function someFunction() { // Works as it wraps 'x' with a closure var y = x; } // Much Later someFunction();
29. JavaScript for C# Developers © 2012 Wilder Minds LLC Scoping  C# is different than JavaScript // C# var a = "Hello"; if (true) { // This works var b = a; } // This doesn't work var c = b; // JavaScript var a = "Hello"; if (true) { // This works var b = a; } // This works too var c = b; // JavaScript var a = "Hello"; function () { // This works (closure) var b = a; } // This doesn't (functions define scope) var c = b;
30. JavaScript for C# Developers © 2012 Wilder Minds LLC "Classes" in JavaScript  In .NET, Class is Standard Unit of Work –Containers for data, code and behavior // C# class Customer { string Name { get; private set; } string Company { get; private set; } Customer(string name, string company = "") { Name = name; Company = company; } }
31. JavaScript for C# Developers © 2012 Wilder Minds LLC "Classes" in JavaScript  No such thing as a "Class" in JavaScript –But you can mimic them with some effort // JavaScript function Customer(name, company) { this.name = name; this.company = company; } var cust = new Customer("Shawn", "Wilder Minds"); var name = cust.name;
32. JavaScript for C# Developers © 2012 Wilder Minds LLC "Classes" in JavaScript  Member Functions Work Fine // JavaScript function Customer(name, company) { this.name = name; this.company = company; this.sendEmail = function (email) { ... }; } var cust = new Customer("Shawn", "Wilder Minds"); cust.sendEmail("shawn@foo.com");
33. JavaScript for C# Developers © 2012 Wilder Minds LLC Improving JavaScript "Classes"  Sharing a Function –That way each instance doesn't have it's own copy // JavaScript function Customer(name, company) { this.name = name; this.company = company; } // Works but no access to private/member data Customer.send = function (email) { ... }; // JavaScript function Customer(name, company) { this.name = name; this.company = company; } // Gives access to each instance of Customer Customer.prototype.send = function (email) { ... }; var cust = new Customer("Shawn"); cust.send("shawn@foo.com"); // WORKS
34. JavaScript for C# Developers © 2012 Wilder Minds LLC Inheritance in JavaScript "Classes"  Basic Inheritance with the Prototype object –The basic is-a relationship // JavaScript function Animal(foodType) { this.foodType = foodType; } Animal.prototype.feed = function () { alert("Fed the animal: " + this.foodType); }; var a = new Animal("None"); a.feed(); // "None" var test = a instanceof Animal; // true // JavaScript function Cow(color) { this.color = color; } // Inheritance Magic Cow.prototype = new Animal("Hay"); var c = new Cow("White"); c.feed(); // "Hay" var test = c instanceof Animal; // true var test2 = c instanceof Cow; // true
35. JavaScript for C# Developers © 2012 Wilder Minds LLC Inheritance in JavaScript "Classes"  Constructor Chaining // JavaScript function Animal(foodType) { this.foodType = foodType; } function Cow(foodType, color) { Animal.call(this, foodType); this.color = color; } // Inheritance Magic Cow.prototype = new Animal();
36. JavaScript for C# Developers © 2012 Wilder Minds LLC Takeaways…  This demo and slides will be available: –http://wildermuth.com  Important Links –http://javascript.crawford.com –http://www.ecmascript.org  My Company –http://wilderminds.com