SlideShare uma empresa Scribd logo
1 de 109
Baixar para ler offline
JavaScript
para Javeros
Cómo ser moderno
y no morir en el
intento ;)
Madrid JUG / 12 Marzo 2014
I
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
@pasku1
Gracias a
Guillermo Pascual
El que sabe y me va a corregir
cuando diga alguna barbaridad
o no sepa algo
¿JavaScript?
¿Cómo te atreves?
¿has visto alguna pegatina de Java en un portátil?
navegadores, televisiones, teléfonos,
servidores, robots…
ha conseguido lo que Java ha intentado
JavaScript está
en todas partes
Java es una opción
JavaScript
es una imposición
(es el lenguaje de la web)
Si no puedes con tu
enemigo, únete a él
El arte de la Guerra. Sun Tzu
no hay problema…
Java y
JavaScript son
“casi”
iguales…
no?
no hay problema…
Java y
JavaScript son
“casi”
iguales…
no?
vamos al lío…
El lenguaje JavaScript
(en los navegadores web)
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
• 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
<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
Tipos de datos básicos
y operadores
• 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
• 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
• 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
• 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
Arrays (y listas)
• 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
• 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
• 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
• 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
• 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
Sentencias de control
de flujo (if, while…)
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
• 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
• 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
try {
var error = ...;
if (error) {
throw "An error";
}
return true;
} catch (e) {
alert (e);
return false;
} finally {
//do cleanup, etc here
}
Excepciones
empieza la fiesta…
Funciones
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
• 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
• 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 ;)
• 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?
• 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
• 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
• 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
• 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
• 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
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
• 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
• 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]
• 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
Orientación a Objetos
¿sabes lo que son los prototipos? yo
tampoco ;)
• 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
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
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
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
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
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
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()
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
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
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
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
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
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
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
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
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
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
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
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
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/
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
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
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!!!
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
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
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
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
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
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
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
Herencia
…las cosas se complican
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
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
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
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
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
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
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
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”
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
si no hay clases...
¿Qué estructura tiene
una aplicación
JavaScript?
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
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
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
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
vamos a hacer las
paces
JavaScript en
la JVM
I
• 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
Proyecto Nashorn (Rhino)
• 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
• 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[]")
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);
}
}
}
• Presentaciones de la última JavaOne
 https://blogs.oracle.com/nashorn/entry/javaone_ja
vascript_sessions
• Página oficial del proyecto
 http://openjdk.java.net/projects/nashorn/
• Blog oficial
 https://blogs.oracle.com/nashorn/
JavaScript en la JVM
Lo que molaría es ejecutar
aplicaciones
node.js en la JVM
• Proyecto avatar.js
• Aplicaciones node.js se ejecutan sin modificaciones*
JavaScript en la JVM
https://avatar.java.net/
*casi
Muchas
gracias!!
JavaScript
para Javeros
Cómo ser moderno
y no morir en el
intento ;)
Madrid JUG / 12 Marzo 2014
I

Mais conteúdo relacionado

Mais procurados

Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Micael Gallego
 
JavaScript para Programadores Java
JavaScript para Programadores JavaJavaScript para Programadores Java
JavaScript para Programadores JavaCarlos A. Iglesias
 
Introduccion a java script
Introduccion a java scriptIntroduccion a java script
Introduccion a java scriptLuis Aceituno
 
Programacion orientada a objetos 2
Programacion orientada a objetos 2Programacion orientada a objetos 2
Programacion orientada a objetos 2mellcv
 
Swift migration. the true history
Swift migration. the true historySwift migration. the true history
Swift migration. the true historyidealistacreamcode
 
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez.NET UY Meetup
 
Ejercicios de evaluación de fundametnos de programacion en JAva
Ejercicios de evaluación de fundametnos de programacion en JAvaEjercicios de evaluación de fundametnos de programacion en JAva
Ejercicios de evaluación de fundametnos de programacion en JAvaMartha Beatriz Coronado Rosales
 
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...Miguel Ángel Sánchez Chordi
 
Pon a dieta tus apps con Proguard de android
Pon a dieta tus apps con Proguard de androidPon a dieta tus apps con Proguard de android
Pon a dieta tus apps con Proguard de androidAnahí Salgado
 
TypeScript, ¿la solución definitiva?
TypeScript, ¿la solución definitiva?TypeScript, ¿la solución definitiva?
TypeScript, ¿la solución definitiva?Pablo Bouzada
 
Tema 7 polimorfismo en java
Tema 7 polimorfismo en javaTema 7 polimorfismo en java
Tema 7 polimorfismo en javaFaby Páez
 
Guia1 programacion de-procesos_concurrentes-hilos
Guia1 programacion de-procesos_concurrentes-hilosGuia1 programacion de-procesos_concurrentes-hilos
Guia1 programacion de-procesos_concurrentes-hilosharoldhicc
 

Mais procurados (20)

Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016Angular 2 Campus Madrid Septiembre 2016
Angular 2 Campus Madrid Septiembre 2016
 
JavaScript para Programadores Java
JavaScript para Programadores JavaJavaScript para Programadores Java
JavaScript para Programadores Java
 
Manual de Java
Manual de JavaManual de Java
Manual de Java
 
Introduccion a java script
Introduccion a java scriptIntroduccion a java script
Introduccion a java script
 
Programacion orientada a objetos 2
Programacion orientada a objetos 2Programacion orientada a objetos 2
Programacion orientada a objetos 2
 
Swift migration. the true history
Swift migration. the true historySwift migration. the true history
Swift migration. the true history
 
JAVA3.0
JAVA3.0JAVA3.0
JAVA3.0
 
Python
PythonPython
Python
 
TDD: ¿Cómo escribir código testeable?
TDD: ¿Cómo escribir código testeable?TDD: ¿Cómo escribir código testeable?
TDD: ¿Cómo escribir código testeable?
 
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez
.NET UY Meetup 4 - AOP & PostSharp by Bruno Bologna & Fabian Fernandez
 
TUTORIAL JAVA
TUTORIAL JAVATUTORIAL JAVA
TUTORIAL JAVA
 
Ejercicios de evaluación de fundametnos de programacion en JAva
Ejercicios de evaluación de fundametnos de programacion en JAvaEjercicios de evaluación de fundametnos de programacion en JAva
Ejercicios de evaluación de fundametnos de programacion en JAva
 
Diapositivas de JAVA
Diapositivas de JAVADiapositivas de JAVA
Diapositivas de JAVA
 
Python gui-mvc-pyqt
Python gui-mvc-pyqtPython gui-mvc-pyqt
Python gui-mvc-pyqt
 
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...VLCTechFest -  Simplificando Controladores: Una introducción a Action-Domain ...
VLCTechFest - Simplificando Controladores: Una introducción a Action-Domain ...
 
Pon a dieta tus apps con Proguard de android
Pon a dieta tus apps con Proguard de androidPon a dieta tus apps con Proguard de android
Pon a dieta tus apps con Proguard de android
 
Java
Java Java
Java
 
TypeScript, ¿la solución definitiva?
TypeScript, ¿la solución definitiva?TypeScript, ¿la solución definitiva?
TypeScript, ¿la solución definitiva?
 
Tema 7 polimorfismo en java
Tema 7 polimorfismo en javaTema 7 polimorfismo en java
Tema 7 polimorfismo en java
 
Guia1 programacion de-procesos_concurrentes-hilos
Guia1 programacion de-procesos_concurrentes-hilosGuia1 programacion de-procesos_concurrentes-hilos
Guia1 programacion de-procesos_concurrentes-hilos
 

Destaque

Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Micael Gallego
 
Docker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCDocker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCMicael Gallego
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016Micael Gallego
 
La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)Micael Gallego
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorMicael Gallego
 
La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)Micael Gallego
 
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicDesarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicMicael Gallego
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Micael Gallego
 
WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015Micael Gallego
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsMicael Gallego
 
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Micael Gallego
 

Destaque (11)

Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
Tema 1: ¿Qué es la web? (Desarrollo Aplicaciones Web)
 
Docker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJCDocker para Data Scientist - Master en Data Science URJC
Docker para Data Scientist - Master en Data Science URJC
 
GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016GRASP con PR para el SRFLP en el MAEB 2016
GRASP con PR para el SRFLP en el MAEB 2016
 
La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)La priorización de historias de usuario (versión ampliada)
La priorización de historias de usuario (versión ampliada)
 
El mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesorEl mundo real en el aula, con la ayuda del profesor
El mundo real en el aula, con la ayuda del profesor
 
La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)La priorización de historias de usuario (versión reducida)
La priorización de historias de usuario (versión reducida)
 
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e IonicDesarrollo web front-end con TypeScript, Angular 2 e Ionic
Desarrollo web front-end con TypeScript, Angular 2 e Ionic
 
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
Tema 3: Despliegue de aplicaciones web (Desarrollo Aplicaciones Web)
 
WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015WebRTC y Kurento en el T3cgFest 2015
WebRTC y Kurento en el T3cgFest 2015
 
Using Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and JenkinsUsing Docker to build and test in your laptop and Jenkins
Using Docker to build and test in your laptop and Jenkins
 
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
Tema2: Tecnologías de desarrollo web (Desarrollo Aplicaciones Web)
 

Semelhante a JavaScript para modernizar Java

Semelhante a JavaScript para modernizar Java (20)

Lenguaje de Alto Nivel
Lenguaje de Alto NivelLenguaje de Alto Nivel
Lenguaje de Alto Nivel
 
Tipos de datos
Tipos de datosTipos de datos
Tipos de datos
 
Lenguaje de Alto Nivel (I Bimestre)
Lenguaje de Alto Nivel (I Bimestre)Lenguaje de Alto Nivel (I Bimestre)
Lenguaje de Alto Nivel (I Bimestre)
 
Introduccion java
Introduccion javaIntroduccion java
Introduccion java
 
Programacion java basica
Programacion java basicaProgramacion java basica
Programacion java basica
 
Jyoc java-cap01 tipos de datos y entrada-salida
Jyoc java-cap01 tipos de datos y entrada-salidaJyoc java-cap01 tipos de datos y entrada-salida
Jyoc java-cap01 tipos de datos y entrada-salida
 
Javascript continuación
Javascript   continuaciónJavascript   continuación
Javascript continuación
 
Manual de Java
Manual de JavaManual de Java
Manual de Java
 
Javascript
JavascriptJavascript
Javascript
 
Java 1.8:Road to Functional Language
Java 1.8:Road to Functional LanguageJava 1.8:Road to Functional Language
Java 1.8:Road to Functional Language
 
Java12
Java12Java12
Java12
 
Curso Java Inicial 2 - Introducción y Sintaxis
Curso Java Inicial  2 - Introducción y SintaxisCurso Java Inicial  2 - Introducción y Sintaxis
Curso Java Inicial 2 - Introducción y Sintaxis
 
lenguajejava.pptx
lenguajejava.pptxlenguajejava.pptx
lenguajejava.pptx
 
Java basico
Java basicoJava basico
Java basico
 
Unidad i antecedentes
Unidad i antecedentesUnidad i antecedentes
Unidad i antecedentes
 
Unidad i antecedentes1
Unidad i antecedentes1Unidad i antecedentes1
Unidad i antecedentes1
 
Java
JavaJava
Java
 
Java
JavaJava
Java
 
Programación 3: arrays (arreglos) y vectores
Programación 3: arrays (arreglos) y vectoresProgramación 3: arrays (arreglos) y vectores
Programación 3: arrays (arreglos) y vectores
 
Grupo1
Grupo1Grupo1
Grupo1
 

Mais de Micael Gallego

Software libre para videoconferencias
Software libre para videoconferenciasSoftware libre para videoconferencias
Software libre para videoconferenciasMicael Gallego
 
La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...Micael Gallego
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduMicael Gallego
 
¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?Micael Gallego
 
Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Micael Gallego
 
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Micael Gallego
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Micael Gallego
 
Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Micael Gallego
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestMicael Gallego
 
Curso Kubernetes CodeURJC
Curso Kubernetes CodeURJCCurso Kubernetes CodeURJC
Curso Kubernetes CodeURJCMicael Gallego
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosMicael Gallego
 
OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 Micael Gallego
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas SoftwareMicael Gallego
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoMicael Gallego
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosMicael Gallego
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Micael Gallego
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesMicael Gallego
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...Micael Gallego
 

Mais de Micael Gallego (18)

Software libre para videoconferencias
Software libre para videoconferenciasSoftware libre para videoconferencias
Software libre para videoconferencias
 
La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...La evaluación con realimentación y posibilidad de recuperación para evitar el...
La evaluación con realimentación y posibilidad de recuperación para evitar el...
 
WebRTC en tu web con OpenVidu
WebRTC en tu web con OpenViduWebRTC en tu web con OpenVidu
WebRTC en tu web con OpenVidu
 
¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?¿Cómo poner software de calidad en manos del usuario de forma rápida?
¿Cómo poner software de calidad en manos del usuario de forma rápida?
 
Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020Curso Angular 9 - CodeURJC - Marzo 2020
Curso Angular 9 - CodeURJC - Marzo 2020
 
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
Concurrencia y asincronía: Lenguajes, modelos y rendimiento: GDG Toledo Enero...
 
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
Herramientas y plugins para el desarrollo de aplicaciones cloud native para K...
 
Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019Dev Tools para Kubernetes - Codemotion 2019
Dev Tools para Kubernetes - Codemotion 2019
 
Testing cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTestTesting cloud and kubernetes applications - ElasTest
Testing cloud and kubernetes applications - ElasTest
 
Curso Kubernetes CodeURJC
Curso Kubernetes CodeURJCCurso Kubernetes CodeURJC
Curso Kubernetes CodeURJC
 
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallosTesteando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
Testeando aplicaciones Kubernetes: escalabilidad y tolerancia a fallos
 
OpenVidu Commitconf 2018
OpenVidu Commitconf 2018 OpenVidu Commitconf 2018
OpenVidu Commitconf 2018
 
Introducción a las Pruebas Software
Introducción a las Pruebas SoftwareIntroducción a las Pruebas Software
Introducción a las Pruebas Software
 
Node para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigoNode para Javeros: Conoce a tu enemigo
Node para Javeros: Conoce a tu enemigo
 
Testing fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornosTesting fácil con Docker: Gestiona dependencias y unifica entornos
Testing fácil con Docker: Gestiona dependencias y unifica entornos
 
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009Desarrollo centrado en tareas en Eclipse con Mylyn 2009
Desarrollo centrado en tareas en Eclipse con Mylyn 2009
 
Como ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicacionesComo ser mas productivo en el desarrollo de aplicaciones
Como ser mas productivo en el desarrollo de aplicaciones
 
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
El Aprendizaje Basado en Proyectos y la Clase Invertida para acercar el mundo...
 

Último

La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesFundación YOD YOD
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdfIsabellaMontaomurill
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIAWilbisVega
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024GiovanniJavierHidalg
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfsoporteupcology
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxpabonheidy28
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxJOSEMANUELHERNANDEZH11
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudianteAndreaHuertas24
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 

Último (16)

La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
KELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento ProtégelesKELA Presentacion Costa Rica 2024 - evento Protégeles
KELA Presentacion Costa Rica 2024 - evento Protégeles
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
trabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdftrabajotecologiaisabella-240424003133-8f126965.pdf
trabajotecologiaisabella-240424003133-8f126965.pdf
 
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE  DE TECNOLOGIA E INFORMATICA PRIMARIACLASE  DE TECNOLOGIA E INFORMATICA PRIMARIA
CLASE DE TECNOLOGIA E INFORMATICA PRIMARIA
 
guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024Cortes-24-de-abril-Tungurahua-3 año 2024
Cortes-24-de-abril-Tungurahua-3 año 2024
 
Redes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdfRedes direccionamiento y subredes ipv4 2024 .pdf
Redes direccionamiento y subredes ipv4 2024 .pdf
 
Plan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docxPlan de aula informatica segundo periodo.docx
Plan de aula informatica segundo periodo.docx
 
Hernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptxHernandez_Hernandez_Practica web de la sesion 12.pptx
Hernandez_Hernandez_Practica web de la sesion 12.pptx
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante9egb-lengua y Literatura.pdf_texto del estudiante
9egb-lengua y Literatura.pdf_texto del estudiante
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 

JavaScript para modernizar Java

  • 1. JavaScript para Javeros Cómo ser moderno y no morir en el intento ;) Madrid JUG / 12 Marzo 2014 I
  • 2. 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
  • 3. @pasku1 Gracias a Guillermo Pascual El que sabe y me va a corregir cuando diga alguna barbaridad o no sepa algo
  • 5.
  • 6. ¿has visto alguna pegatina de Java en un portátil?
  • 7.
  • 8. navegadores, televisiones, teléfonos, servidores, robots… ha conseguido lo que Java ha intentado JavaScript está en todas partes
  • 9. Java es una opción JavaScript es una imposición (es el lenguaje de la web)
  • 10. Si no puedes con tu enemigo, únete a él El arte de la Guerra. Sun Tzu
  • 11. no hay problema… Java y JavaScript son “casi” iguales… no?
  • 12. no hay problema… Java y JavaScript son “casi” iguales… no?
  • 13. vamos al lío… El lenguaje JavaScript (en los navegadores web)
  • 14. • 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
  • 15. • 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
  • 16. • 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
  • 17. • 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
  • 18. • 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
  • 19. • 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
  • 20. • 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
  • 21. • 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
  • 22. • 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
  • 23. <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
  • 24. Tipos de datos básicos y operadores
  • 25. • 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
  • 26. • 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
  • 27. • 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
  • 28. • 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
  • 30. • 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
  • 31. • 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
  • 32. • 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
  • 33. • 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
  • 34. • 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
  • 35. Sentencias de control de flujo (if, while…)
  • 36. 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
  • 37. • 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
  • 38. • 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
  • 39. try { var error = ...; if (error) { throw "An error"; } return true; } catch (e) { alert (e); return false; } finally { //do cleanup, etc here } Excepciones
  • 41. 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
  • 42. • 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
  • 43. • 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 ;)
  • 44. • 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?
  • 45. • 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
  • 46. • 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
  • 47. • 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
  • 48. • 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
  • 49. • 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
  • 50. 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
  • 51. • 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
  • 52. • 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]
  • 53. • 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
  • 54. Orientación a Objetos ¿sabes lo que son los prototipos? yo tampoco ;)
  • 55. • 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
  • 56. 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
  • 57. 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
  • 58. 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
  • 59. 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
  • 60. 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
  • 61. 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()
  • 62. 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
  • 63. 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
  • 64. 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
  • 65. 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
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. 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
  • 70. 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
  • 71. 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
  • 72. 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
  • 73. 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
  • 74. 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/
  • 75. 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
  • 76. 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
  • 77. 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!!!
  • 78. 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
  • 79. 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
  • 80. 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
  • 81. 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
  • 82. 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
  • 83. 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
  • 84. 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
  • 86. 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
  • 87. 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
  • 88. 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
  • 89. 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
  • 90. 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
  • 91. 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
  • 92. 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
  • 93. 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”
  • 94. 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
  • 95. si no hay clases... ¿Qué estructura tiene una aplicación JavaScript?
  • 96. 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
  • 97. 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
  • 98. 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
  • 99. 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
  • 100. vamos a hacer las paces JavaScript en la JVM I
  • 101. • 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
  • 103. • 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
  • 104. • 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[]")
  • 105. 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); } } }
  • 106. • Presentaciones de la última JavaOne  https://blogs.oracle.com/nashorn/entry/javaone_ja vascript_sessions • Página oficial del proyecto  http://openjdk.java.net/projects/nashorn/ • Blog oficial  https://blogs.oracle.com/nashorn/ JavaScript en la JVM
  • 107. Lo que molaría es ejecutar aplicaciones node.js en la JVM
  • 108. • Proyecto avatar.js • Aplicaciones node.js se ejecutan sin modificaciones* JavaScript en la JVM https://avatar.java.net/ *casi
  • 109. Muchas gracias!! JavaScript para Javeros Cómo ser moderno y no morir en el intento ;) Madrid JUG / 12 Marzo 2014 I