Madrid, 10 de Octubre
JavaScript para desarrolladores C#
Madrid, 10 de Octubre #IberianSPC
Luis Ruiz PavónBack-End Developer
http://geeks.ms/blogs/lruiz
@luisruizpavon
#IberianSPC
DISCLAIMERNo soy un ninja!!!
#IberianSPC
¿Cuál es el problema con JavaScript?
#IberianSPC
¿Por qué debemos aprender Javacript?
#IberianSPC
#IberianSPC
#IberianSPC
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
#IberianSPC
DemoComparación de lenguajes
#IberianSPC
Duck Typing
#IberianSPC
Duck typing
public class Persona{ public string Name { get; set; }}
public class Educado{ public void Saluda(Persona persona) { Console.WriteLine("Hola {0}", persona.Name); }}
#IberianSPC
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" });
#IberianSPC
JavaScript
#IberianSPC
Tipos
• Tipos por valor• boolean• string• number
• Tipos por referencia• object
• Delegados• function
• Especiales• null• undefined
http://jsfiddle.net/luisruizpavon/3NkD3
#IberianSPC
Á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();
#IberianSPC
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/
#IberianSPC
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/
#IberianSPC
this - Patrón de invocación por métodoUna 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());
#IberianSPC
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.
#IberianSPC
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/
#IberianSPC
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);
#IberianSPC
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);
#IberianSPC
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);
#IberianSPC
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);
#IberianSPC
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());
#IberianSPC
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/
#IberianSPC
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/
#IberianSPC
Herramientas
• Developer Tools• Firebug• Chrome Developer Tools• JSHint - http://jshint.com• jsfiddle - http://jsfiddle.net• Visual Studio• WebStorm - Jetbrains
http://jsfiddle.net/luisruizpavon/Mjkpc/
#IberianSPC
DemoBeezy
Madrid, 10 de Octubre #IberianSPC
Q&A
Madrid, 10 de Octubre #IberianSPC
Luis Ruiz PavónBack-End Developer
http://geeks.ms/blogs/lruiz @luisruizpavon
GRACIAS POR SU ATENCIÓN
Madrid, 10 de Octubre
#IberianSPC
Top Related