JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

109
JavaScript para Javeros Cómo ser moderno y no morir en el intento ;) Madrid JUG / 12 Marzo 2014 I

description

Charla del 12 de Marzo de 2014 en el MadridJUG, el grupo de usuarios de Java de Madrid. En ella se presentó JavaScript desde el punto de vista de un programador Java que se adentra en ese maravilloso mundo.

Transcript of JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Page 1: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

JavaScript

para Javeros

Cómo ser moderno y no morir en el

intento ;)

Madrid JUG / 12 Marzo 2014

I

Page 2: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Un pobre programador Java que quiere ser

moderno

Micael Gallego

@micael_gallego

Profesor de

programación

concurrente en la

URJC y

desarrollador Java

en Kurento.org

Page 3: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

@pasku1

Gracias a

Guillermo Pascual

El que sabe y me va a corregir cuando diga alguna barbaridad

o no sepa algo

Page 4: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

¿JavaScript?

¿Cómo te atreves?

Page 5: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
Page 6: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

¿has visto alguna pegatina de Java en un portátil?

Page 7: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?
Page 8: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

navegadores, televisiones, teléfonos, servidores, robots…

ha conseguido lo que Java ha intentado

JavaScript está

en todas partes

Page 9: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Java es una opción

JavaScript

es una imposición (es el lenguaje de la web)

Page 10: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Si no puedes con tu

enemigo, únete a él

El arte de la Guerra. Sun Tzu

Page 11: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

no hay problema…

Java y

JavaScript son

“casi”

iguales…

no?

Page 12: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

no hay problema…

Java y

JavaScript son

“casi”

iguales…

no?

Page 13: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

vamos al lío…

El lenguaje JavaScript

(en los navegadores web)

Page 14: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• No tiene nada que ver con Java (sólo se

parece en la sintáxis superficial)

• Se llamó JavaScript por marketing

(inicialmente se llamó LiveScript)

El lenguaje JavaScript

Page 15: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Características

Tipado dinámico

Funcional y orientado a objetos

• Ejecución

Inicialmente interpretado

Actualmente se ejecuta con máquinas virtuales (V8 en Google Chrome)

El lenguaje JavaScript

Page 16: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• DOM (Document Object Model)

Librería para manipular el documento HTML cargado en el navegador (eventos, elementos, estilos…)

• BOM (Browser Object Model)

Librería para gestionar aspectos del navegador: historial, peticiones de red AJAX, etc…

• Son el equivalente a la API estándar de Java

Librerías JavaScript

Page 17: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Un recubrimiento de la API DOM

• Facilidad de uso, potencia y compatibilidad entre navegadores

• Interfaz de usuario (el documento) y peticiones ajax

• Estructuras de datos con un enfoque funcional

• Gestión de plantillas (templates)

Librerías

JavaScript

Page 18: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Frameworks de alto nivel para construcción de clientes completos

• Arquietectura Single Page Application (SPI) con clientes que hacen peticiones REST

• Algo parecido en Java?

Eclipse RCP

Netbeans RCP en Java

Eclipse RAP

Librerías

JavaScript

Page 19: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Imperativo y estructurado (como Java)

Se declaran variables

Se ejecutan las sentencias en orden

Dispone de sentencias de control de flujo de ejecución

La sintaxis imperativa/estructurada es muy parecida a Java y a C

El lenguaje JavaScript

Page 20: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Lenguaje de script (Java es compilado)

No existe compilador

El navegador analiza el código y lo ejecuta, notificando los errores que encuentra

• Tipado dinámico (Java es estático)

Al declarar una variable no se indica su tipo

A lo largo de la ejecución del programa una misma variable puede tener valores de diferentes tipos

El lenguaje JavaScript

Page 21: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Orientado a objetos

Todos los valores son objetos (no como en Java, que existen tipos primitivos)

Existe recolector de basura para objetos que no se utilizan (como en Java)

La orientación a objetos está basada en prototipos (en Java está basada en clases)

Se pueden crear objetos, añadir atributos y métodos en tiempo de ejecución

El lenguaje JavaScript

Page 22: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Funciones

Aunque sea orientado a objetos, también permite declarar funciones independientes (como en Java 8 con las expresiones lambda)

Esas funciones se pueden declarar en cualquier sitio, asignarse a variables, pasarse como parámetro

En JavaScript se puede implementar código inspirado en el paradigma funcional (aunque no sea un lenguaje funcional puro)

El lenguaje JavaScript

Page 23: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

<html>

<body>

...

<script src="js/script.js"></script>

</body>

</html>

En la cabecera de la página

<html>

<head>

<link type="text/javascript" ref="js/script.js">

</head>

<body>

...

</body>

</html>

En el cuerpo de la página (se carga y ejecuta cuando se encuentra)

El lenguaje JavaScript

Page 24: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Tipos de datos básicos

y operadores

Page 25: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• En JavaScript todos los valores son objetos

• En Java existe la división entre tipos primitivos y objetos (tenían miedo?)

• Lo intentaron arraglar con el auto-boxing y el auto-unboxing

• Posiblemente lo terminarán de arreglar con los fixnums* en ¿Java 9?

Tipos de datos básicos

* https://blogs.oracle.com/jrose/entry/fixnums_in_the_vm

Page 26: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Number Números enteros y reales de cualquier precisión

Si no estuviéramos tan preocupados de la eficiencia en Java sería así

• String Cadenas de caracteres

Inmutable (como en Java)

Operador + (como en Java)

Como no hay tipo caracter, se usa un string de tamaño 1

Comillas simples o dobles

• Boolean true o false (como en Java)

Tipos de datos básicos

Page 27: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Variables

Es un lenguaje dinámico (con tipado dinámico)

Las variables se tienen que declarar pero no se indica el tipo

Si no se inicializan, las variables tienen el valor undefined (en vez de null o error de compilación en Java)

//La variable edad tendrá un valor de 34

var edad = 34;

var encontrado = false;

Tipos de datos básicos

Page 28: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Similares a Java

Aritméticos: + - * / % (a división es siempre real)

Comparación números: < > <= >=

Lógicos: && || !

Comparativo: ?: (Elvis operator)

Modificación: ++ --

Asignación: = += -= *= /= %=

• Diferentes a Java

¿Dos variables apuntan al mismo objeto? === (en java es ==)

¿Dos variables apuntan a distintos objetos? !== (en java es !=)

En strings se comporta como equals en Java

En arrays se comporta como == en Java

Operadores en expresiones

Page 29: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Arrays (y listas)

Page 30: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Igual que en Java

El acceso para lectura o escritura es con [ ]

Tienen la propiedad length

Empiezan por cero

La asignación de variables no copia el array, las variables apuntan al mismo objeto

El operador === compara si son el mismo objeto (no que tengan el contenido igual)

Los arrays de varias dimensiones son arrays de arrays. Hay que crear de forma explícita los niveles.

Arrays

Page 31: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Diferente a Java

Los literales son con [ ] en vez de { }

No se pone new en el literal

Los arrays pueden mezclar valores de varios tipos (como si fuera un array de Object en Java)

var array = new Array();

var empty = [];

var numbers = ['zero','one','two','three']

Arrays

Page 32: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Errores de acceso

El acceso a un elemento fuera de los límites es undefined (en Java sería un ArrayIndexOutOfBoundsException)

El intento de acceso a un array undefined da un error ReferenceError (en Java sería un NullPointerException)

Arrays

Page 33: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Gestión como listas (como java.util.List)

Se pueden establecer elementos en posiciones no existentes y el array crece dinámicamente

El método push añade un elemento al final (como el método add en Java)

La propiedad length se puede cambiar para reducir el tamaño del array

Arrays

Page 34: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Gestión como listas (como java.util.List)

El operador delete borra un elemento (pero deja el hueco)

Para borrar y no dejar el hueco se usa el método splice indicando el índice desde el que hay que borrar y el número de elementos.

delete numbers[2];

numbers.splice(2, 1);

Arrays

Page 35: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Sentencias de control

de flujo (if, while…)

Page 36: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Sentencias de control de flujo

• Bloques de sentencias

Con llaves { } (como en Java)

Las variables no desaparecen al terminar en bloque (como ocurre en Java)

• Sentencia if

Sintaxis como en Java

La expresión no tiene que devolver un valor boolean

Se considera falso: false, null, undefined, “” (cadena vacía), 0, NaN

Tema 4 - Tecnologías del cliente 36

Sentencias de control de flujo

Page 37: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Sentencias switch, while y do

Sintaxis y semántica como en Java

• Sentencia for

for(init; expr; inc) como en Java, pero la variable se declara fuera del for

No existe continue, pero si break

• Sentencia return

Rompe el flujo y devuelve control (como en Java)

Tema 4 - Tecnologías del cliente 37

Sentencias de control de flujo

Page 38: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Funcionan igual que en Java

• Existe un bloque con try catch finally

• El operador throw eleva la excepción

• A diferencia de Java, se puede lanzar cualquier

objeto como excepción, aunque lo

recomendable es elevar un objeto con name y

message

Excepciones

Page 39: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

try {

var error = ...;

if (error) {

throw "An error";

}

return true;

} catch (e) {

alert (e);

return false;

} finally {

//do cleanup, etc here

}

Excepciones

Page 40: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

empieza la fiesta…

Funciones

Page 41: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Funciones

• JS es un lenguaje funcional en el sentido de

que las funciones son ciudadanos de primera

clase

• Se pueden declarar con nombre

function func(param){

console.log(param);

}

func(4); // Imprime 4

Page 42: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Se pueden declarar sin nombre (anónimas) y

asignarse a una variable o usarse como

parámetro

var func = function(param){

console.log(param);

}

func(4); // Imprime 4

Funciones

Page 43: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• En Java también tenemos funciones*

• Con las expresiones lambda declaramos el tipo, pero sólo en la declaración de la variable (no en la expresión)

Function<Integer,Void> func = (param){

System.out.println(param);

}

func.apply(4); // Imprime 4

Funciones

* Vale, todavía no. La semana que viene ;)

Page 44: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• En Java antes era mucho peor :(

Function<Integer,Void> func =

new Function<String, Void>() {

public Void apply(Integer param) {

System.out.println(param);

return null;

}

};

func.apply(4); // Imprime 4

Funciones

Pero esto es cosa del pasado, verdad?

Page 45: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Invocación de una función

Nombre seguido de parámetros:

Si se pasan menos parámetros, los que faltan se reciben como undefined

Si se pasan más parámetros, los que sobran se ignoran

func(3);

Funciones

Page 46: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Información accesible desde la función

Parámetros y variables declaradas en la función

var func = function (param){

var numero = 0;

console.log(param+" numero:"+numero);

}

func(4); // Imprime '4 numero:0'

Funciones

Page 47: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Información accesible desde la función

Variables accesibles en el punto en que se declara la función (en su ámbito léxico)

En Java estas variables tienen que ser final (con clases anónimas) o no deben cambiar de valor (con expresiones lambda). En JavaScript pueden cambiar de valor

var texto = "Hola";

var print_texto = function (){

console.log(texto);

}

print_texto(); // Imprime 'Hola'

Funciones

Page 48: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Información accesible desde la función

Cuando se referencia a una variable no se accede a su valor,

se accede a la propia variable en sí.

El conjunto de variables a las que tiene acceso la función se

llama cerradura o cierre (closure)

var texto = "Hola";

var print_texto = function (){

console.log(texto);

}

print_texto(); // Imprime 'Hola'

texto = "Adios";

print_texto(); // Imprime 'Adios'

Funciones

Page 49: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Información accesible desde la función

En Java sólo se accede al valor

Para no confundir al desarrollador, se pide que la variable

no cambie nunca de valor (por eso tiene que ser final o

efectivamente final)

Cuando diseñaron las expresiones lambda evaluaron

hacerlo como en JavaScript, pero pensaron que podía ser

una fuente de memory leaks y problemas de rendimiento

Funciones

Page 50: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Se pueden declarar funciones dentro de otras

var add_onclick_handler = function(node) {

node.onclick = function (e) {

alert("Alerta");

};

};

var listIn = function(selector) {

return function(num){

$(selector).append('<p>' + num + '</p>');

};

};

Funciones

Page 51: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Uso de ‘this’ dentro de una función

En Java sólo se puede usar this cuando tiene sentido.

Cuando se usa en un método de instancia, apunta al objeto

que recibe en mensaje

En un método estático no se puede usar this

En JavaScript se puede usar this siempre, pero su valor

depende de muuuuuchas cosas ;)

Funciones

Page 52: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Uso de ‘this’ dentro de una función

Si llamas a una función (sin que esté asociada a un objeto) el

valor de this dentro de la función apunta al objeto global*

Puedes llamar a una función de forma especial

configurando el valor que tendrá this dentro de la función

Funciones

* Un objeto accesible directamente desde cualquier parte de JavaScript

var func = function(){

console.log(this);

}

func.call([4,5,3]); // Imprime [4,5,3]

Page 53: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Uso de ‘this’ dentro de una función

Si quieres usar this en una función que pasas como

parámetro a otra función…

Mira bien la documentación y asegúrate del valor que

tendrá cuando llamen a dicha función

Puedes tener sorpresas…

Funciones

Page 54: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

¿sabes lo que son los prototipos? yo

tampoco ;)

Page 55: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Hasta ahora hemos visto que JavaScript es un lenguaje bastante familiar en cuanto a sintaxis y características

Imperativo y estructurado

Tres tipos básico: Number, Boolean y String

Arrays dinámicos (como Listas)

Recolector de basura

Funciones

Tipado dinámico (es cuestión de acostumbrarse…)

Orientación a Objetos

Page 56: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• La orientación a objetos en JavaScript a primera vista parece similar a la de Java, pero en esencia es muy diferente

• Clases vs prototipos

La gran mayoría de los lenguajes de programación (Java, C#, C++, Python, Ruby…) implementan la POO basada en clases

Pero JavaScript implementa la POO basada en prototipos

Orientación a Objetos

Page 57: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• POO basada en clases

Los objetos son ejemplares de una clase

La clase se utiliza para definir las propiedades y

métodos que tendrán los objetos de esa clase

Cada objeto se diferencia entre sí por el valor de los

atributos

Todos los objetos de una clase tienen los mismos

métodos

Orientación a Objetos

Page 58: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• POO basada en prototipos

No existen las clases

Cada objeto puede tener cualquier atributo o método

Se le pueden añadir (y borrar) atributos y métodos en cualquier momento de la ejecución del programa

Los objetos se pueden asociar a otros objetos (sus prototipos) de forma que si se busca un método o atributo en un objeto y no existe, se busca en su prototipo

Se pueden crear cadenas de prototipos

Orientación a Objetos

Page 59: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Prototipos

a.uno; // Valor 1

a.tres; // Valor 3

a.toString() // Ejecuta el método toString

Basado en el material de redradix https://github.com/redradix/material-projs

Orientación a Objetos

Page 60: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Creación de objetos literales

En cualquier momento se puede crear un objeto y

añadir atributos y métodos

var empleado = {

nombre: "Pepe",

salario: 700,

toString: function(){

return "Nombre:"+this.nombre+",Salario:"+this.salario;

}

};

Los métodos son funciones asociadas a una “propiedad” del objeto

Orientación a Objetos

Page 61: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Invocación de métodos en objetos (como en Java)

• Modificación estructural de objetos (Monkey patch)*

//Devuelve 'Nombre:Pepe, Salario:700'

var texto = empleado.toString();

//Devuelve 700

var salario = empleado.salario;

empleado.telefono = "663232539";

empleado.getCategoria = function(){

return salario > 800 ? "Superior":"Normal";

}

Orientación a Objetos

*Aunque se puede evitar congelando el objeto con Object.freeze()

Page 62: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Los objetos son muy flexibles porque no necesitan un molde (la clase)

• Esta forma de trabajar es muy útil cuando sólo hay un objeto con una estructura determinada (singleton)

• También permite crear objetos con ciertos atributos y métodos iguales, pero con otros atributos y métodos particulares

• No se aplican los conceptos de privacidad (todo el público)

Orientación a Objetos

Page 63: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Crear muchos objetos con la misma estructura

Es conveniente crear una función para crear los objetos, de

forma que no haya que repetir en código de creación del

nuevo objeto

function newEmpleado(nombre, salario){

var empleado = {

nombre: nombre,

salario: salario,

toString: function(){

return "Nombre:"+this.nombre+", Salario:"+this.salario;

}

};

return empleado;

}

Orientación a Objetos

Page 64: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Crear muchos objetos con la misma estructura

Esa función de construcción se utilizaría:

var empleado = newEmpleado("Pepe",700);

//Devuelve 'Nombre:Pepe, Salario:700'

var texto = empleado.toString();

//Devuelve 700

var salario = empleado.salario;

OJO! La función newEmpleado no es una clase. Es una función

normal y corriente, pero que devuelve un objeto cuando se la invoca

Orientación a Objetos

Page 65: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• ¿Qué son los prototipos?

Cada objeto se puede asociar a un prototipo

Cuando se accede a un atributo en un objeto y no existe en dicho objeto, se busca en su prototipo y se devuelve su valor.

Cuando se escribe en un atributo y no existe el atributo en ese objeto, se crea el atributo en el objeto. Por tanto el valor se cambia en el objeto, no en el prototipo.

Cuando se intenta ejecutar un método en un objeto y no existe en dicho objeto, se busca en su prototipo y se ejecuta.

A un objeto se le pueden añadir y quitar atributos y métodos en tiempo de ejecución, pero no puede cambiar de prototipo.

Orientación a Objetos

Page 66: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Prototipos

En el ejemplo de los empleados, cada empleado puede tener valores diferentes en cada atributo, pero todos tendrán los mismos métodos

Para optimizar la memoria se podría usar un prototipo, de forma que los métodos estén en un único lugar

Si se quiere añadir un nuevo método a todos los empleados y todos los empleados están asociadas al un mismo prototipo, entonces basta con añadir el método al prototipo.

Orientación a Objetos

Page 67: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

var prototipoEmpleado = {

toString: function(){

return "Nombre:"+this.nombre+",Salario:"+this.salario;

}

};

function newEmpleado(nombre, salario){

var empleado = Object.create(prototipoEmpleado);

empleado.nombre = nombre;

empleado.salario = salario;

return empleado;

} Asocia el prototipo al crear el objeto

Orientación a Objetos

Page 68: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Prototipos

Como estamos acostumbrados a pensar en la POO basada en clases, el prototipo de un objeto nos parece como una clase

Es mejor pensar siempre en términos de prototipos, porque es como funciona realmente JS

Orientación a Objetos

Page 69: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Como es tan habitual que existan funciones para crear objetos, JavaScript tiene una sintaxis especial para ello

• Función constructor

En JS existe una sintaxis para crear objetos con el operador new inspirada en Java (no sé si es bueno)

Pero está adaptada al funcionamiento con prototipos en vez de clases

Orientación a Objetos

Page 70: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

function newEmpleado(nombre, salario){

var empleado = Object.create(prototipoEmpleado);

empleado.nombre = nombre;

empleado.salario = salario;

return empleado;

}

var empleado = newEmpleado(“Pepe”, 700);

function Empleado(nombre, salario){

this.nombre = nombre;

this.salario = salario;

}

var empleado = new Empleado(“Pepe”, 700);

Cuando se utiliza el operador new al llamar a una función, se comporta como un constructor porque this apunta a un nuevo objeto que se devuelve al terminar

Orientación a Objetos

Page 71: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

function newEmpleado(nombre, salario){

var empleado = Object.create(prototipoEmpleado);

empleado.nombre = nombre;

empleado.salario = salario;

return empleado;

}

var empleado = newEmpleado(“Pepe”, 700);

function Empleado(nombre, salario){

this.nombre = nombre;

this.salario = salario;

}

var empleado = Empleado(“Pepe”, 700);

CUIDADO!!!! Nunca llames a una función constructor sin el operador new Pasarán cosas malas (pero no aparecerá un error hasta mucho más adelante)

Orientación a Objetos

Page 72: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Función constructor

¿Cómo se especifica el prototipo cuando se usar el operador new?

Si se usar la función “Empleado” como constructor, los nuevos objetos tendrán como prototipo el objeto que está en “Empleado.prototype”

Empleado.protoype.toString = function(){

return "Nombre:"+this.nombre+",

Salario:"+this.salario;

};

Orientación a Objetos

Page 73: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Simulación de clases en JS

JavaScript no tiene clases, tiene objetos dinámicos y prototipos

Un desarrollador Java puede sentirse cómodo programando si emula el concepto de clase usando los objetos dinámicos y los prototipos

Orientación a Objetos

Page 74: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Simulación de clases en JS

Existen tres formas de emular clases en JavaScript: • Usando directamente los prototipos

• Usando módulos (simulados con clousures)

• Usando librerías JavaScript para simular clases

Ninguna es mejor que la otra, va por gustos

Los expertos en JavaScript suelen usar los prototipos y los módulos, pero no las librerías

Orientación a Objetos

http://micaelgallego.github.io/blog/Orientacion-a-Objetos-en-JavaScript-comparado-con-Java/

Page 75: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Orientación a Objetos

• Simulación de clases con prototipos

Es la que hemos visto en los ejemplos anteriores

Se basa en tratar a los prototipos como si fueran clases

El primer objeto de la cadena tiene los atributos (con los valores particulares)

El prototipo de ese objeto actúa como su clase y tiene los métodos

Dos objetos de “la misma clase” tienen el mismo prototipo y por tanto los mismos métodos

Orientación a Objetos

Page 76: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

public class Empleado {

private String nombre;

private double salario;

public Empleado(String nombre,

double salario){

this.nombre = nombre;

this.salario = salario;

}

public String getNombre(){

return nombre;

}

public String toString(){

return "Nombre:"+nombre+",

Salario:"+salario;

}

}

Clase en Java

function Empleado(nombre, salario){

this.nombre = nombre;

this.salario = salario;

}

Empleado.prototype.getNombre = function(){

return nombre;

};

Empleado.prototype.toString = function(){

return "Nombre:"+this.nombre+",

Salario:"+this.salario;

};

Simulación de clase en JS con prototipos

Orientación a Objetos

Page 77: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Empleado empleado = new Empleado("Juan",800);

System.out.println( empleado.toString() );

Creación de objetos en Java

var empleado = new Empleado("Pepe", 700);

console.log( empleado.toString() );

Creación de objetos en JavaScript

Orientación a Objetos

Es muy parecido, no sé si ayuda o confunde!!!

Page 78: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

public class Empleado {

private String nombre;

private double salario;

public Empleado(String nombre,

double salario){

this.nombre = nombre;

this.salario = salario;

}

public String getNombre(){

return nombre;

}

public String toString(){

return "Nombre:"+nombre+",

Salario:"+salario;

}

}

Clase en Java

var createEmpleado(nombre, salario){

var that = {};

var _nombre = nombre;

var _salario = salario;

function getNombre(){

return _nombre;

}

function toString(){

return "Nombre:"+_nombre+",

Salario:"+_salario;

}

that.getNombre = getNombre;

that.toString = toString;

return that;

};

Simulación de clase en JS con closures

Orientación a Objetos

Page 79: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Empleado empleado = new Empleado("Juan",800);

System.out.println( empleado.toString() );

Creación de objetos en Java

var empleado = createEmpleado("Pepe", 700);

console.log( empleado.toString() );

Creación de objetos en JavaScript

Orientación a Objetos

Page 80: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

public class Manager {

private static Manager INSTANCE

= new Empleado();

private int number = 300;

public static Manager getInstance(){

return INSTANCE;

}

private Manager(){

...

}

public String doSomething(){

...

}

}

Clase en Java

var manager = (function(){

var that = {};

var _number = 300;

function doSomething (){

...

}

that.doSomething = doSomething;

return that;

})();

Objecto singleton con closures

Orientación a Objetos

Page 81: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

• Existen muchas librerías que facilitan la simulación de clases con prototipos

Prototype.js, JS.Class, Base2, Joose, Klass, Mootools, Selfish, Classy, qooxdoo, yui, dejavu…

Veamos cómo es con Prototype.js

Orientación a Objetos

Page 82: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

public class Empleado {

private String nombre;

private double salario;

public Empleado(String nombre,

double salario){

this.nombre = nombre;

this.salario = salario;

}

public String getNombre(){

return nombre;

}

public String toString(){

return "Nombre:"+nombre+",

Salario:"+salario;

}

}

Clase en Java

var Empleado = new Class({

initialize: function(nombre, salario){

this.nombre = nombre;

this.salario = salario;

},

getNombre: function(){

return nombre;

},

getSalario: function(){

return salario;

},

toString: function(){

return "Nombre:"+this.nombre+",

Salario:"+this.salario;

}

});

Simulación de clase en JS con librerías

Orientación a Objetos

Page 83: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Empleado empleado = new Empleado("Juan",800);

System.out.println( empleado.toString() );

Creación de objetos en Java

var empleado = new Empleado("Pepe", 700);

console.log( empleado.toString() );

Creación de objetos en JavaScript

Orientación a Objetos

Igual que con prototipos, porque en realidad es una sintaxis

que facilita la creación de los prototipos

Page 84: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

• Diferencias Java vs JavaScript

En JS todos los atributos son públicos

En JS todo es dinámico, en cualquier parte del código, en cualquier momento, se puede:

• Añadir / Eliminar atributos al objeto • Añadir / Eliminar / Cambiar métodos al objeto • Añadir / Eliminar atributos al prototipo (y todos los

objetos que comparten el prototipo lo ven) • Añadir / Eliminar / Cambiar métodos al prototipo (y

todos los objetos que comparten el prototipo lo ven)

Orientación a Objetos

Page 85: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Herencia

…las cosas se complican

Page 86: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

• Se puede simular en JavaScript usando cadenas de prototipos

• En Java

Si un método no está definido en la clase hija, se usa la definición de la clase padre

• En JavaScript

Si un método no está definido en el prototipo directo del objeto, se busca en el prototipo del prototipo

Herencia

Page 87: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Tema 4 - Tecnologías del cliente 87

public class Jefe extends Empleado {

private String despacho;

public Jefe(String nombre, double salario,

String despacho){

super(nombre, salario);

this.despacho = despacho;

}

public String toString(){

return super.toString()+" Despacho:"+this.despacho;

}

}

Clase hija en Java

Herencia

Page 88: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Tema 4 - Tecnologías del cliente 88

public class Jefe extends Empleado {

private String despacho;

public Jefe(String nombre, double salario,

String despacho){

super(nombre, salario);

this.despacho = despacho;

}

public String toString(){

return super.toString()+" Despacho:"+this.despacho;

}

}

Clase hija en Java Llamada al constructor de la clase padre

Herencia

Page 89: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

public class Jefe extends Empleado {

private String despacho;

public Jefe(String nombre, double salario,

String despacho){

super(nombre, salario);

this.despacho = despacho;

}

public String toString(){

return super.toString()+" Despacho:"+this.despacho;

}

}

Clase hija en Java

Llamada al método de la clase padre desde la redefinición del método en la clase hija

Herencia

Page 90: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Empleado getNombre() getSalario()

Herencia

Jefe getDespacho()

prototype

Pepe: Jefe nombre = “Pepe”

salario = 500 despacho = “D34”

prototype

Juan: Jefe nombre = “Juan”

salario = 400

prototype

En JavaScript todo

Son objetos. No hay clases

Page 91: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

function Jefe(nombre, salario, despacho){

Empleado.call(this, nombre, salario);

this.despacho = despacho;

}

Jefe.prototype = Object.create(Empleado.prototype);

Jefe.prototype.toString = function(){

return Empleado.prototype.toString.call(this)+"

Despacho:"+this.despacho;

};

Simulación de clase hija en JavaScript

Herencia

Page 92: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

function Jefe(nombre, salario, despacho){

Empleado.call(this, nombre, salario);

this.despacho = despacho;

}

Jefe.prototype = Object.create(Empleado.prototype);

Jefe.prototype.toString = function(){

return Empleado.prototype.toString.call(this)+"

Despacho:"+this.despacho;

};

Simulación de clase hija en JavaScript

Llamada al constructor de la clase padre Hacemos una llamada como si fuera una función normal (no como constructor), asociando this al objeto que se está creando

Herencia

Page 93: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Simulación de clase hija en JavaScript

function Jefe(nombre, salario, despacho){

Empleado.call(this, nombre, salario);

this.despacho = despacho;

}

Jefe.prototype = Object.create(Empleado.prototype);

Jefe.prototype.toString = function(){

return Empleado.prototype.toString.call(this)+"

Despacho:"+this.despacho;

};

Herencia El prototipo de todos los objetos Jefe es un objeto Empleado De esta forma, los métodos que no estén en “la clase” Jefe se buscarán en la “clase Empleado”

Page 94: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Simulación de clases con prototipos

Simulación de clase hija en JavaScript

function Jefe(nombre, salario, despacho){

Empleado.call(this, nombre, salario);

this.despacho = despacho;

}

Jefe.prototype = Object.create(Empleado.prototype);

Jefe.prototype.toString = function(){

return Empleado.prototype.toString.call(this)+"

Despacho:"+this.despacho;

}; Llamada al método de la clase padre desde la redefinición del método en la clase hija

Herencia

Page 95: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

si no hay clases...

¿Qué estructura tiene

una aplicación

JavaScript?

Page 96: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Estructura de una aplicación

• En Java una aplicación está formada por un conjunto de clases (junto con algunos ficheros de configuración)

• En JavaScript una aplicación normalmente está formada por un conjunto de funciones, posiblemente anidadas entre sí

Estructura de una aplicación

Page 97: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Estructura de una aplicación

<!DOCTYPE html>

<html>

<head>

<script src="http://code.jquery.com/jquery-1.7.2.js">

</script>

<script src="http://underscorejs.org/underscore.js">

</script>

<script src="app.js"></script>

</head>

<body>

<div id="primenumbers">Prime numbers</div>

<div id="theirsquares">Their squares</div>

</body>

</html>

index.html

Estructura de una aplicación

Page 98: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Estructura de una aplicación

$(function() {

var primeNumbers = [2, 3, 5, 7, 11];

var listIn = function(selector) {

return function(num){

$(selector).append('<p>' + num + '</p>');

};

};

_.each(primeNumbers, listIn('#primenumbers'));

var square = function(num) { return num * num; };

_.each(

_.map(primeNumbers, square), listIn('#theirsquares'));

});

app.js

Estructura de una aplicación

Page 99: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Estructura de una aplicación

• En JavaScript es bastante natural llamar a las funciones o los métodos como $ o _

• Es también muy habitual “abusar” de la sobrecarga de funciones y hacer que se comporten de forma radicalmente diferente dependiendo del tipo del parámetro

• No tienen método estáticos, pero usan objetos sin estado accesibles globalmente con métodos “de utilidad”

Estructura de una aplicación

Page 100: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

vamos a hacer las

paces

JavaScript en

la JVM I

Page 101: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Oracle (y antes Sun) son conscientes de que su fuente de ingresos es la plataforma, no tanto el lenguaje (que también)

• Soportan oficialmente JRuby

• Han modificado la JVM para que sea “dynamic language friendly”

• Ellos también quieren ser modernos como nosotros

JavaScript en la JVM

Page 102: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Proyecto Nashorn (Rhino)

Page 103: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Ejecución nativa en la JVM (con generación de bytecode e invokedynamic)

• Estándar completo ECMAScript 5.1

• Interoperabilidad completa Java y JavaScript

• Ejecución de código JavaScript en aplicaciones Java con la librería de scripting JSR 223

• Se publica oficialmente con Java 8

JavaScript en la JVM

Page 104: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Herramienta de ejecución en línea de comandos

• Acceso a librerías Java desde JavaScript

JavaScript en la JVM

jjs -fx fxscript.js

var ScriptEngine = Java.type("javax.script.ScriptEngine");

var System = Java.type("java.lang.System");

var DoubleArray = Java.type("double[]")

Page 105: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

JavaScript en la JVM

import javax.script.*;

public class NashornEngine {

public static void main(String[] args) {

ScriptEngineManager m = new ScriptEngineManager();

ScriptEngine e = m.getEngineByName("nashorn");

try {

e.put("x", 10);

e.put("y", 20);

e.eval("var z = x + y;");

System.out.println(((Number) e.get("z")).intValue());

} catch (final ScriptException ex) {

System.err.println(ex);

}

}

}

Page 106: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Presentaciones de la última JavaOne

https://blogs.oracle.com/nashorn/entry/javaone_javascript_sessions

• Página oficial del proyecto

http://openjdk.java.net/projects/nashorn/

• Blog oficial

https://blogs.oracle.com/nashorn/

JavaScript en la JVM

Page 107: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Lo que molaría es ejecutar

aplicaciones

node.js en la JVM

Page 108: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

• Proyecto avatar.js

• Aplicaciones node.js se ejecutan sin modificaciones*

JavaScript en la JVM

https://avatar.java.net/ *casi

Page 109: JavaScript para Javeros. ¿Cómo ser moderno y no morir en el intento?

Muchas

gracias!!

JavaScript

para Javeros

Cómo ser moderno y no morir en el

intento ;)

Madrid JUG / 12 Marzo 2014

I