JavaScript para desarrolladores c#

591 views
414 views

Published on

Iberian SharePoint Conference 2013

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
591
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • El Duck Typing, en los lenguajes de programación, es una técnica para determinar si un objeto es una instacia de una determinada clase basándose únicamente en los métodos que implementa.
  • typeof operator
    Null & undefined example
  • Recomendación: No contaminar window
  • Recomendación: Hacer hoisting explicito
  • Recomendación con ejemplo: Simplificar los condicionales, Incializar valores por defecto (Namespaces)
  • Podemos almacenarla en una variable y luego invocarla (Delegado anónimo)
  • JavaScript para desarrolladores c#

    1. 1. JavaScript para desarrolladores C#
    2. 2. Luis Ruiz Pavón Back-End Developer http://geeks.ms/blogs/lruiz @luisruizpavon
    3. 3. DISCLAIMER No soy un ninja!!!
    4. 4. ¿Cuál es el problema con JavaScript?
    5. 5. ¿Por qué debemos aprender Javacript?
    6. 6. Comparando los lenguajes C# Tipado fuerte Estático Herencia clásica Clases Constructores Métodos JavaScript Tipado débil Dinámico Herencia por prototipos Funciones Funciones Funciones
    7. 7. Demo Comparación de lenguajes
    8. 8. Duck Typing
    9. 9. Duck typing public class Persona { public string Name { get; set; } } public class Educado { public void Saluda(Persona persona) { Console.WriteLine("Hola {0}", persona.Name); } }
    10. 10. Duck typing var Persona = function (name) { this.name = name; } function educado(arg1) { console.log('Hola ' + arg1.name); } var p = new Persona("Luis"); educado(p); educado({ name: "Juan" });
    11. 11. JavaScript
    12. 12. Tipos • Tipos por valor • boolean • string • number • Tipos por referencia • object • Delegados • function • Especiales • null • undefined http://jsfiddle.net/luisruizpavon/3NkD3
    13. 13. Ámbito global Toda variable no asignada a un objeto se asigna por defecto a window. http://jsfiddle.net/luisruizpavon/y7Wpa/ var myVar = 1; function myFunction() { alert(myVar); alert(window.myVar); } myFunction();
    14. 14. Variable hoisting Los { } no crean ámbito como en C# (Sólo las funciones) public MainPage() { if (true) { var title = "Main"; } this.InitializeComponent(); } La variable declarada dentro de una función sube hasta el principio de la función. http://jsfiddle.net/luisruizpavon/BXv7F/
    15. 15. this C# • La palabra clave this hace referencia a la instancia actual de la clase. JS • Hace referencia al propietario de la función que la está invocando y se puede modificar haciendo uso de call/apply http://jsfiddle.net/luisruizpavon/q2GeU/
    16. 16. this - Patrón de invocación por método Una función es almacenada como propiedad de un objeto convirtiéndose así en lo que denominamos un método. var myObj = { name: 'Luis', lastName: 'Ruiz', fullName: function () { return this.name + ' ' + this.lastName; } }; alert(myObj.fullName());
    17. 17. Truthy y Falsy • Valores que siempre dan false: • false • 0 • "" • null • undefined • NaN Todos los demás valores son siempre true, incluyendo “0”, “false”, funciones vacías, arrays vacíos y objetos vacíos.
    18. 18. Los operadores ==/!= Estos 2 operadores no funcionan igual que en C#. Determinan la igualdad con type coalescing (Intenta convertir el valor cast) alert("ola ke ase" == "ola ke ase"); alert(1 == 1); alert(1 == "1"); Usar siempre === y !=== (.Equals() de C#) http://jsfiddle.net/luisruizpavon/RXaU3/
    19. 19. Funciones I Pueden parecernos que son como los métodos en C#, pero no es así: http://jsfiddle.net/luisruizpavon/smGvY/ function myFunction(arg1, arg2, arg3) { alert(arg1); alert(arg2); alert(arg3); } myFunction(1);
    20. 20. Funciones II • ¿Sobrecarga de funciones? http://jsfiddle.net/luisruizpavon/rQ6mf/ function myFunction(arg1) { alert("Uno"); } function myFunction(arg1, arg2) { alert("Dos"); } function myFunction(arg1, arg2, arg3) { alert("Tres"); } myFunction(1);
    21. 21. Funciones III • El objeto “arguments” • Sólo está disponible en el cuerpo de la función http://jsfiddle.net/luisruizpavon/MjDVm/ function myFunction(arg1) { alert(arguments.length); } myFunction(1);
    22. 22. Funciones IV • Todas las funciones retornan un valor • Sino está definido, retorna ‘undefined’ • return; También retorna ‘undefined’ http://jsfiddle.net/luisruizpavon/VmeSf/ function myFunction() { return; } var my = myFunction(1); alert(typeof my);
    23. 23. Funciones V • Las funciones son objetos. Tienen propiedades y funciones. • Podemos pasar como parámetros de una función otras funciones. http://jsfiddle.net/luisruizpavon/MwsbC/ function myFunction(arg1) { alert(arg1); } alert(myFunction.length); alert(myFunction.toString());
    24. 24. Patrón módulo • Nos ayuda a mantener el contexto global lo más limpio y seguro posible. • Bootstraper • Un ejemplo de uso son los plugins de jQuery. http://jsfiddle.net/luisruizpavon/Mjkpc/
    25. 25. Frameworks • Require.js – Cargador de módulos JavaScript (ServiceLocator) • Underscore.js – Utilidades (Métodos extensores) • jQuery • TypeScript • linq.js - LINQ for JavaScript • Backbone - MVC • Knockout - MVVM • AngularJS – Google • Handlebars.js • … http://jsfiddle.net/luisruizpavon/Qd96w/
    26. 26. Herramientas • Developer Tools • Firebug • Chrome Developer Tools • JSHint - http://jshint.com • jsfiddle - http://jsfiddle.net • Visual Studio • WebStorm - Jetbrains http://jsfiddle.net/luisruizpavon/Mjkpc/
    27. 27. Demo Beezy
    28. 28. Q&A
    29. 29. Luis Ruiz Pavón Back-End Developer http://geeks.ms/blogs/lruiz @luisruizpavon GRACIAS POR SU ATENCIÓN

    ×