Iberian SharePoint Conference 2013

1. JavaScript para desarrolladores C#

2. Luis Ruiz Pavón
Back-End Developer
http://geeks.ms/blogs/lruiz
@luisruizpavon

3. DISCLAIMER
No soy un ninja!!!

4. ¿Cuál es el
problema con
JavaScript?

5. ¿Por qué
debemos
aprender
Javacript?

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

9. Demo
Comparación de lenguajes

10. Duck Typing

11. Duck typing
public class Persona
{
public string Name { get; set; }
}
public class Educado
{
public void Saluda(Persona persona)
{
Console.WriteLine("Hola {0}", persona.Name);
}
}

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

13. JavaScript

14. Tipos
• Tipos por valor
• boolean
• string
• number
• Tipos por referencia
• object
• Delegados
• function
• Especiales
• null
• undefined
http://jsfiddle.net/luisruizpavon/3NkD3

15. Á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();

16. 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/

17. 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/

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

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

20. 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/

21. 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);

22. 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);

23. 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);

24. 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);

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

26. 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/

27. 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/

28. Herramientas
• Developer Tools
• Firebug
• Chrome Developer Tools
• JSHint - http://jshint.com
• jsfiddle - http://jsfiddle.net
• Visual Studio
• WebStorm - Jetbrains
http://jsfiddle.net/luisruizpavon/Mjkpc/

29. Demo
Beezy

30. Q&A

31. Luis Ruiz Pavón
Back-End Developer
http://geeks.ms/blogs/lruiz
@luisruizpavon
GRACIAS POR SU ATENCIÓN