Uso de Javascript

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

2. ¿Por qué
debemos
aprender
Javacript?

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

6. Demo
COMPARACIÓN DE LENGUAJES

7. Duck Typing

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

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

10. JavaScript

11. Tipos
 Tipos por valor
 boolean
 string
 number
 Tipos por referencia
 object
 Delegados
 function
 Especiales
 null
 undefined

12. Ámbito global
Toda variable no asignada a un objeto se asigna por defecto a window.
var myVar = 1;
function myFunction() {
alert(myVar);
alert(window.myVar);
}
myFunction();

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

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

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

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

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

18. Funciones I
Pueden parecernos que son como los métodos en C#, pero no es así:
function myFunction(arg1, arg2, arg3) {
alert(arg1);
alert(arg2);
alert(arg3);
}
myFunction(1);

19. Funciones II
 ¿Sobrecarga de funciones?
function myFunction(arg1) {
alert("Uno");
}
function myFunction(arg1, arg2) {
alert("Dos");
}
function myFunction(arg1, arg2, arg3) {
alert("Tres");
}
myFunction(1);

20. Funciones III
 El objeto “arguments”
 Sólo está disponible en el cuerpo de la función
function myFunction(arg1) {
alert(arguments.length);
}
myFunction(1);

21. Funciones IV
 Todas las funciones retornan un valor
 Sino está definido, retorna ‘undefined’
 return; También retorna ‘undefined’
function myFunction() {
return;
}
var my = myFunction(1);
alert(typeof my);

22. Funciones V
 Las funciones son objetos. Tienen propiedades y funciones.
 Podemos pasar como parámetros de una función otras funciones.
function myFunction(arg1) {
alert(arg1);
}
alert(myFunction.length);
alert(myFunction.toString());

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

24. 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
 …

25. Herramientas
 Developer Tools
 Firebug
 Chrome Developer Tools
 JSHint - http://jshint.com
 jsfiddle - http://jsfiddle.net
 Visual Studio
 WebStorm - Jetbrains