JavaScript for C# Developers

JavaScript for C# Developers

My Orando Code Camp Talk

41ea68e40ed39c5392cbce8ab0a7d720?s=128

Shawn Wildermuth

March 16, 2013
Tweet

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