Este documento presenta una introducción al lenguaje JavaScript para desarrolladores Java. Explica que aunque JavaScript se llama así por razones de marketing, no tiene relación con Java excepto en su sintaxis superficial. Describe las características básicas de JavaScript como su tipado dinámico, funcionalidad y orientación a objetos basada en prototipos en lugar de clases. Finalmente, compara y contrasta conceptos de JavaScript con Java como tipos de datos, funciones, control de flujo y orientación a objetos para ayudar a los desarrolladores Java a familiarizarse
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
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
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
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
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
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
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