#IberianSPC

¿Cuál es el problema con JavaScript?

#IberianSPC

¿Por qué debemos aprender Javacript?

Comparando los lenguajes

C#Tipado fuerteEstáticoHerencia clásicaClasesConstructoresMétodos

JavaScriptTipado débilDinámicoHerencia por prototiposFuncionesFuncionesFunciones

DemoCOMPARACIÓN DE LENGUAJES

#IberianSPC

Duck Typing

Duck typingpublic class Persona{ public string Name { get; set; }}

public class Educado{ public void Saluda(Persona persona) { Console.WriteLine("Hola {0}", persona.Name); }}

Duck typingvar 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

Tipos

Tipos por valor boolean string number

Tipos por referencia object

Delegados function

Especiales null undefined

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

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/

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/

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

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.

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/

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

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

Funciones III

El objeto “arguments” Sólo está disponible en el cuerpo de la función

function myFunction(arg1) { alert(arguments.length);}

myFunction(1);

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

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

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.

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 …

Herramientas

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