32
Madrid, 10 de Octubre JavaScript para desarrolladores C#

JavaScript para desarrolladores c#

Embed Size (px)

DESCRIPTION

Iberian SharePoint Conference 2013

Citation preview

Page 1: JavaScript para desarrolladores c#

Madrid, 10 de Octubre

JavaScript para desarrolladores C#

Page 2: JavaScript para desarrolladores c#

Madrid, 10 de Octubre #IberianSPC

Luis Ruiz PavónBack-End Developer

http://geeks.ms/blogs/lruiz

@luisruizpavon

Page 3: JavaScript para desarrolladores c#

#IberianSPC

DISCLAIMERNo soy un ninja!!!

Page 4: JavaScript para desarrolladores c#

#IberianSPC

¿Cuál es el problema con JavaScript?

Page 5: JavaScript para desarrolladores c#

#IberianSPC

¿Por qué debemos aprender Javacript?

Page 6: JavaScript para desarrolladores c#

#IberianSPC

Page 7: JavaScript para desarrolladores c#

#IberianSPC

Page 8: JavaScript para desarrolladores c#

#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

Page 9: JavaScript para desarrolladores c#

#IberianSPC

DemoComparación de lenguajes

Page 10: JavaScript para desarrolladores c#

#IberianSPC

Duck Typing

Page 11: JavaScript para desarrolladores c#

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

Page 12: JavaScript para desarrolladores c#

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

Page 13: JavaScript para desarrolladores c#

#IberianSPC

JavaScript

Page 14: JavaScript para desarrolladores c#

#IberianSPC

Tipos

• Tipos por valor• boolean• string• number

• Tipos por referencia• object

• Delegados• function

• Especiales• null• undefined

http://jsfiddle.net/luisruizpavon/3NkD3

Page 15: JavaScript para desarrolladores c#

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

Page 16: JavaScript para desarrolladores c#

#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/

Page 17: JavaScript para desarrolladores c#

#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/

Page 18: JavaScript para desarrolladores c#

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

Page 19: JavaScript para desarrolladores c#

#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.

Page 20: JavaScript para desarrolladores c#

#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/

Page 21: JavaScript para desarrolladores c#

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

Page 22: JavaScript para desarrolladores c#

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

Page 23: JavaScript para desarrolladores c#

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

Page 24: JavaScript para desarrolladores c#

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

Page 25: JavaScript para desarrolladores c#

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

Page 26: JavaScript para desarrolladores c#

#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/

Page 27: JavaScript para desarrolladores c#

#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/

Page 28: JavaScript para desarrolladores c#

#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/

Page 29: JavaScript para desarrolladores c#

#IberianSPC

DemoBeezy

Page 30: JavaScript para desarrolladores c#

Madrid, 10 de Octubre #IberianSPC

Q&A

Page 31: JavaScript para desarrolladores c#

Madrid, 10 de Octubre #IberianSPC

Luis Ruiz PavónBack-End Developer

http://geeks.ms/blogs/lruiz @luisruizpavon

GRACIAS POR SU ATENCIÓN

Page 32: JavaScript para desarrolladores c#

Madrid, 10 de Octubre

#IberianSPC