Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript for C# Developers

JavaScript for C# Developers

My Orando Code Camp Talk

Shawn Wildermuth

March 16, 2013
Tweet

More Decks by Shawn Wildermuth

Other Decks in Programming

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

    View full-size slide

  2. JavaScript for C# Developers © 2012 Wilder Minds LLC
    Who Am I?
     Shawn Wildermuth
    [email protected]
     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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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)

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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(); }

    View full-size slide

  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(); }

    View full-size slide

  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);
    };

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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"

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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());

    View full-size slide

  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"
    }
    };

    View full-size slide

  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"
    }
    };

    View full-size slide

  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"
    }
    };

    View full-size slide

  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;
    }
    }

    View full-size slide

  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?)

    View full-size slide

  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"

    View full-size slide

  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

    View full-size slide

  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();

    View full-size slide

  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;

    View full-size slide

  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;
    }
    }

    View full-size slide

  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;

    View full-size slide

  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("[email protected]");

    View full-size slide

  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("[email protected]"); // WORKS

    View full-size slide

  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

    View full-size slide

  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();

    View full-size slide

  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

    View full-size slide