JavaScript para desarrolladores c#
-
Upload
luis-ruiz-pavon -
Category
Technology
-
view
308 -
download
5
description
Transcript of JavaScript para desarrolladores c#
![Page 1: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/1.jpg)
Madrid, 10 de Octubre
JavaScript para desarrolladores C#
![Page 2: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/2.jpg)
Madrid, 10 de Octubre #IberianSPC
Luis Ruiz PavónBack-End Developer
http://geeks.ms/blogs/lruiz
@luisruizpavon
![Page 3: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/3.jpg)
#IberianSPC
DISCLAIMERNo soy un ninja!!!
![Page 4: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/4.jpg)
#IberianSPC
¿Cuál es el problema con JavaScript?
![Page 5: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/5.jpg)
#IberianSPC
¿Por qué debemos aprender Javacript?
![Page 6: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/6.jpg)
#IberianSPC
![Page 7: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/7.jpg)
#IberianSPC
![Page 8: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/8.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/9.jpg)
#IberianSPC
DemoComparación de lenguajes
![Page 10: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/10.jpg)
#IberianSPC
Duck Typing
![Page 11: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/11.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/12.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/13.jpg)
#IberianSPC
JavaScript
![Page 14: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/14.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/15.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/16.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/17.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/18.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/19.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/20.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/21.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/22.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/23.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/24.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/25.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/26.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/27.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/28.jpg)
#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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/29.jpg)
#IberianSPC
DemoBeezy
![Page 30: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/30.jpg)
Madrid, 10 de Octubre #IberianSPC
Q&A
![Page 31: JavaScript para desarrolladores c#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/31.jpg)
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#](https://reader033.fdocuments.net/reader033/viewer/2022060115/557ad7b6d8b42a85648b4732/html5/thumbnails/32.jpg)
Madrid, 10 de Octubre
#IberianSPC