JavaScript para desarrolladores de C#

1. JavaScript para desarrolladores de C# Edin Kapić

2. JavaScript != C# Edin Kapić

3. JavaScript: “With or WithoutYou” BrendanEich “El padre de la criatura”

4. ¿Cómollegamoshasta aquí? 1996 Internet Explorer 3.0 JScript 1997 ECMAScript 1995 NetscapeNavigator2.0 Mocha/LiveScript

5. 2005 Jesse James Garrett AJAX 2006 John Resig jQuery 1999 XMLHttpRequest (OWA Exchange 2000)

6. TypeScript 2012 SharePoint 2013 TypeScript 2010 Node.js 2011 Windows 8 2009 PhoneGap

7. Hay que saltar de una vez

8. Las herramientas Firebug / IE Dev Tools JSLint JSHint JsFiddle Firebug Lite

9. JavaScript es bueno ... • Lenguajedinámico • Notación literal potente • “Loose-typed” • “JS is Lisp in C Clothing” (Douglas Crockford) http://bit.ly/Qn0qLi

10. ... pero tiene cosas malas • Variables globales implícitas • Variable hoisting • Functionhoisting • PrototypeLeaking • == '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined// false false == null// false null == undefined// true ' \t\r\n ' == 0 // true

11. JavaScript != C#

12. C# • Corta el pan • Tienemecanismos de seguridad • Es complejo • JavaScript • Corta el pan • Te puedeshacerdaño • Es un trozo de metal con un mango

13. Bueno en C#, malo en JS • La sintaxis parecida nos puede llevar a hacer lo que en C# son buenasprácticas • ...pero en JS puedentenerconsecuencias graves • “Ifitwalkslike a duck...”

14. JS != C# 1: Tipos de datos Simples Complejos Object Array Function RegExp Date • Number • String • Boolean • Undefined • Null

15. JS != C# 2: Variables globales • Toda variable no asignada a un objeto, se asigna a window • var a = 1; • window.a = 1; http://jsfiddle.net/wQDwN/

16. JS != C# 3: “Variable Hoisting” • Sólo dos niveles: global i función • { } no crea ámbito de variable (como C#) • La variable declarada subehasta el inicio de la función en la que está declarada • /*.....*/ var a = 1; • var a; /*.....*/ a = 1; http://jsfiddle.net/NE2Km/3/

17. Recomendación • Ser consciente de los tipos de datos • No contaminar window • Declarar variables lo más arriba possible (hacerhoistingexplícito)

18. Test var imAGlobal = true; functionglobalGrabber() { imAGlobal= false; returnimAGlobal; } console.log(imAGlobal); console.log(globalGrabber()); console.log(imAGlobal); // true o false?

19. Test var imAGlobal = true; functionglobalGrabber() { var imAGlobal= false; returnimAGlobal; } console.log(imAGlobal); console.log(globalGrabber()); console.log(imAGlobal); // true o false? http://jsfiddle.net/JxESg/

20. JS != C# 4: this • thisapunta al objetocontenedor de la función en la que está (en ejecución) y es modificable console.log(this); // window var myFunction = function() { console.log(this); } myFunction(); // window http://jsfiddle.net/UsCtz/ y http://jsfiddle.net/8tBEM/

21. JS != C# 5: Wrappers • JS estilo C# var myVar = newObject(); var myArr = newArray(); • JS estilo puro var myVar = {};var myArr = [];

22. Recomendación • No usar wrappersinnecesariamente • Aprender la notación literal de objetos de JS

23. Test var a = new Object(); a.nombre = 'Edin'; console.log(a.nombre);

24. Test var a = { nombre: 'Edin'}; console.log(a.nombre);

25. Test var a = function() { this.nombre= 'Edin'; return this; }(); console.log(a.nombre);

26. Test var a = function() { this.nombre= 'Edin'; return this; }(); console.log(a.document.URL);

27. Test var a = function() { varobj = {}; obj.nombre= 'Edin'; return obj; }(); console.log(a.document.URL);

28. JS != C# 6: Truthy / Falsey Valores que dan true Valores que dan false false 0 "" null undefined NaN • "0" • "false" • Objetosvacíos • Todos los demás

29. Recomendación • Simplificar los condicionales if(myVar != "" || myVar != undefined) if(myVar) • Inicializar los valores por defecto if(myVar== "") { myVar = "Hola"; } myVar = myVar || "hola";

30. JS != C# 7: Operador == • Comparación if(false == 0) // true if(false === 0) // false • El operador == intenta convertir los valores y casi siempre es algo que no queremos

31. Comparación “indeterminista” (false == 0); // true (false == ""); // true (0 == ""); // true (null == false); // false (null == null); // true (undefined == undefined); // true (undefined == null); // true (NaN == null); // false (NaN == NaN); // false

32. Recomendación • Usar los operadores === i !== por defecto • No hacen la conversión de valores • Se comportan como los operadores “habituales” == y != de C#

33. JS != C# 8: Otras “perlas” • parseInt() • Operador +http://jsfiddle.net/tbMX2/ • NaNhttp://jsfiddle.net/vVgB9/ • “PrototypeLeak” • Inserción de ;

34. Funciones

35. Funciones de JavaScript • Son objetos, por tanto se les pueden agregar propiedades • Se puedenpasar como parámetrosa otras funciones • Haydos maneras de declarar funciones

36. Manera 1: Declaración • La declaración de la función sehace con functionfoo() { /* .... */ } • La función declarada hace “hoisting” y està disponible en todo el código JS, independientemente del orden de ejecución http://jsfiddle.net/TQ6LG/

37. Manera 2: Expresión • Tambiénpodemosasignar la función a una variable mediante una expresión: var foo = function () { /* ... */ }; • En este caso no hay “hoisting” • Podemos pensar que una declaración es realmente una expresiónpuesta al principio http://jsfiddle.net/NrQhM/

38. Equivalencias • functionfoo() { /* .... */ } • var foo = function () { /* ... */ }; • var foo = functionfoo () { /* ... */ }; • var foo = functionbar () { /* ... */ }; • Las dos últimas se usan para funciones recursivas • Las expresioneshacen explícita la declaración

39. Código de un solo uso (IIFE) • Podemos asignar una función anónimamente y no recogerla como resultado • Útil para ejecutar un código privado y de una sola vez • (function () { /* ... */ })(); http://jsfiddle.net/YAe9S/1/

40. Anidamiento de funciones • Las funcions son objetosypuedencontenerotras funciones var foo = function() { function bar() { /* ... */ } return bar(); }; foo(); http://jsfiddle.net/XUswD/

41. Cierres (Closures) • El cierrees una manera de asociar la función con susparámetros de entrada • Es el mantenimiento de las variables localesdespués de que la funciónhayaacabado var bind = function(x) { returnfunction(y) { return x + y; }; } var plus5 = bind(5); alert(plus5(3)); http://jsfiddle.net/xWAm4/

42. Recomendaciones • Dedicar tiempo para jugar con las funciones en JS es imprescindible • Haymuchosejemplos que se puedenprobar con JsFiddle • Comprender los cierreses importante para entender los eventhandlers y encapsulamiento(http://jsfiddle.net/GBfPf/)

43. JavaScript en el siglo XXI

44. ¿Vamostirando?

45. ¿O estamos al día?

46. Regla #1: UnobtrusiveJavaScript • El JS se tieen que añadirsin impactar el HTML de la página <input type="text" name="date“ onchange="validateDate()" /> window.onload = function() { document.getElementById('date').onchange = validateDate; };

47. Regla #2: Modularidad • No colisionar con otros JS presentes (es decir, “comportarnosbien”) • Encapsulemosnuestrocódigo en namespaces • Usemostry/catch

48. Métodos de encapsulamiento • Ninguno(objetowindow) • Todoprivado(funciónanónima auto-ejecutada) • Todopúblico(objeto literal) • Mezclapúblico/privado(RevealingModule)

49. Objeto literal var car = {    status: "off",    start: function() {this.status = "on";    },getStatus: function() {        return "the car is " + this.status;    }}; car.start();alert(car.getStatus()); http://jsfiddle.net/DY2Zw/

50. RevealingModule var car = (function() { varpubCar = {}, varinnerStatus = "off"; pubCar.start= function() { innerStatus= "on"; } pubCar.status = function() { return "the car is“ + innerStatus; } returnpubCar; }()); car.start(); alert(car.status()); http://jsfiddle.net/AUzNT/