Scribd
Cargar
596 vistas

JavaScript Inicio

El documento presenta información sobre un curso de programación en JavaScript dictado por el Mg. Jorge Luis Huamán Vera en la Facultad de Ingeniería Ambiental de la Universidad Nacional de Ingeniería. El curso introduce los conceptos básicos del lenguaje JavaScript como su sintaxis, tipos de datos, operadores, sentencias de control de flujo, funciones, excepciones y librerías.

Cargado por

joaquin de la cruz palomino
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
596 vistas

JavaScript Inicio

El documento presenta información sobre un curso de programación en JavaScript dictado por el Mg. Jorge Luis Huamán Vera en la Facultad de Ingeniería Ambiental de la Universidad Nacional de Ingeniería. El curso introduce los conceptos básicos del lenguaje JavaScript como su sintaxis, tipos de datos, operadores, sentencias de control de flujo, funciones, excepciones y librerías.

Cargado por

joaquin de la cruz palomino
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 107

Universidad Nacional de Ingeniería

Facultad de Ingeniería Ambiental (FIA)

Programación en JAVA SCRIPT

Mg. Jorge Luis Huamán Vera


¿JavaScript?
¿Cómo te atreves?
¿has visto alguna pegatina de Java en un portátil?
ha conseguido lo que Java ha intentado

JavaScript está
en todas
parte
navegadores, televisiones, teléfonos,
s servidores, robots…
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)
El lenguaje JavaScript

• 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 GoogleChrome)
Librerías 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 deJava


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
El lenguaje 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
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)


<html>
<body>
...
<script src="js/script.js"></script>
</body>
</html>
Tipos de datos básicos
y operadores
Tipos de datos básicos

• 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?

* https://blogs.oracle.com/jrose/entry/fixnums_in_the_vm
Tipos de datos básicos
• 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
//La variable edad tendrá un valor de 34
var edad = 34;
var encontrado = false;

 Si no se inicializan, las variables tienen el valor


undefined (en vez de null o error de compilación en
Java)
Operadores en expresiones
• 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
Arrays (y listas)
Arrays
• 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
var array = new Array();
var empty = [];
var numbers = ['zero','one','two','three']

 Los arrays pueden mezclar valores de varios tipos


(como si fuera un array de Object en Java)
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)
delete numbers[2];

 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.
numbers.splice(2, 1);
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 delcliente 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 delcliente 37


Excepciones

• 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
}
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
Funciones
• 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*

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


System.out.println(param);
}

func.apply(4); // Imprime 4

• Con las expresiones lambda declaramos el tipo,


pero sólo en la declaración de la variable (no en la
expresión)
* Vale, todavía no. La semana que viene ;)
Funciones

• 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

Pero esto es cosa del pasado, verdad?


Funciones
• Invocación de una función
 Nombre seguido de parámetros:

func(3);

 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
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)
var texto = "Hola";
var print_texto = function (){
console.log(texto);
}

print_texto(); // Imprime 'Hola'

 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
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

var func = function(){


console.log(this);
}

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

* Un objeto accesible directamente desde cualquier parte de JavaScript


Funciones
• 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…
Orientación a Objetos
¿sabes lo que son los prototipos? yo
tampoco ;)
Orientación a Objetos
• 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
• 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
• 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
• 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
• 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
• 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
• Invocación de métodos en objetos (como en Java)
//Devuelve 'Nombre:Pepe, Salario:700'
var texto = empleado.toString();

//Devuelve 700
var salario = empleado.salario;

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


empleado.telefono = "663232539";
empleado.getCategoria = function(){
return salario > 800 ? "Superior":"Normal";
}

*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
• 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
• 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
• ¿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
• 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

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
• 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
• 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
function newEmpleado(nombre, salario){
var empleado = Object.create(prototipoEmpleado);
empleado.nombre = nombre;
empleado.salario = salario;
return empleado; Cuando se utiliza el
}
operador new al
var empleado = newEmpleado(“Pepe”, 700); llamar a una función,
se comporta como un
constructor porque
this apunta a un
function Empleado(nombre, salario){ nuevo objeto que se
this.nombre = nombre; devuelve al terminar
this.salario = salario;
}

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


Orientación a Objetos
function newEmpleado(nombre, salario){
var empleado = Object.create(prototipoEmpleado);
empleado.nombre = nombre;
empleado.salario = salario;
return empleado; CUIDADO!!!!
}
Nunca llames a una
var empleado = newEmpleado(“Pepe”, 700); función constructor
sin el operador new

function Empleado(nombre, salario){ Pasarán cosas malas


this.nombre = nombre; (pero no aparecerá un
this.salario = salario; error hasta mucho
} más adelante)
var empleado = Empleado(“Pepe”, 700);
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
• 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
• 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

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
Clase en Java Simulación de clase en JS con prototipos
public class Empleado { function Empleado(nombre, salario){

private String nombre;


private double salario;

public Empleado(String nombre,


double salario){
this.nombre = nombre; this.nombre = nombre;
this.salario = salario; this.salario = salario;
} }

public String getNombre(){ Empleado.prototype.getNombre = function(){


return nombre; return nombre;
} };

public String toString(){ Empleado.prototype.toString = function(){


return "Nombre:"+nombre+", return "Nombre:"+this.nombre+",
Salario:"+salario; Salario:"+this.salario;
} };
}
Orientación a Objetos
Creación de objetos en Java
Empleado empleado = new Empleado("Juan",800);
System.out.println( empleado.toString() );

Creación de objetos en JavaScript


var empleado = new Empleado("Pepe", 700);
console.log( empleado.toString() );

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


Orientación a Objetos
Clase en Java Simulación de clase en JS con closures
public class Empleado { var createEmpleado(nombre, salario){

private String nombre; var that = {};


private double salario;
var _nombre = nombre;
public Empleado(String nombre, var _salario = salario;
double salario){
this.nombre = nombre; function getNombre(){
this.salario = salario; return _nombre;
} }

public String getNombre(){ function toString(){


return nombre; return "Nombre:"+_nombre+",
} Salario:"+_salario;
}
public String toString(){
return "Nombre:"+nombre+", that.getNombre = getNombre;
Salario:"+salario; that.toString = toString;
}
} return that;
};
Orientación a Objetos
Creación de objetos en Java
Empleado empleado = new Empleado("Juan",800);
System.out.println( empleado.toString() );

Creación de objetos en JavaScript


var empleado = createEmpleado("Pepe", 700);
console.log( empleado.toString() );
Orientación a Objetos
Clase en Java Objecto singleton con closures
public class Manager { var manager = (function(){

private static Manager INSTANCE var that = {};


= new Empleado();
var _number = 300;
private int number = 300;
function doSomething (){
public static Manager getInstance(){ ...
return INSTANCE; }
}
that.doSomething = doSomething;
private Manager(){
... return that;
} })();

public String doSomething(){


...
}
}
Orientación a Objetos
• 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
Clase en Java Simulación de clase en JS con librerías
public class Empleado { var Empleado = new Class({

private String nombre; initialize: function(nombre, salario){


private double salario; this.nombre = nombre;
this.salario = salario;
public Empleado(String nombre, },
double salario){
this.nombre = nombre; getNombre: function(){
this.salario = salario; return nombre;
} },

public String getNombre(){ getSalario: function(){


return nombre; return salario;
} },

public String toString(){ toString: function(){


return "Nombre:"+nombre+", return "Nombre:"+this.nombre+",
Salario:"+salario; Salario:"+this.salario;
} }
} });
Orientación a Objetos
Creación de objetos en Java
Empleado empleado = new Empleado("Juan",800);
System.out.println( empleado.toString() );

Creación de objetos en JavaScript


var empleado = new Empleado("Pepe", 700);
console.log( empleado.toString() );

Igual que con prototipos, porque en realidad es una sintaxis


que facilita la creación de los prototipos
Orientación a Objetos
• 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)
Herencia
…las cosas se complican
Herencia
• 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
Clase hija en Java
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;
}
}

Tema 4 - Tecnologías delcliente 87


Herencia
Clase hija en Java
Llamada al
public class Jefe extends Empleado {
constructor de la clase
private String despacho; padre

public Jefe(String nombre, double salario,


String despacho){
super(nombre, salario);
this.despacho = despacho;
}

public String toString(){


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

Tema 4 - Tecnologías delcliente 88


Herencia
Clase hija en Java
public class Jefe extends Empleado {

private String despacho;

public Jefe(String nombre, double salario,


String despacho){
super(nombre, salario); Llamada al método de
this.despacho = despacho; la clase padre desde la
} redefinición del métod o
en la clase hija
public String toString(){
return super.toString()+" Despacho:"+this.despacho;
}
}
Herencia
Empleado
getNombre()
getSalario()

prototype prototype

Jefe Juan: Jefe


getDespacho() nombre = “Juan”
salario = 400
prototype

Pepe: Jefe
nombre = “Pepe”
salario = 500
despacho = “D34” En JavaScript todo
Son objetos. No hay clases
Herencia
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
Simulación de clase hija en JavaScript
Llamada al
function Jefe(nombre, salario, despacho){ constructor de la
Empleado.call(this, nombre, salario); clase padre
this.despacho = despacho;
} Hacemos una
llamada como si
Jefe.prototype = Object.create(Empleado.proto type);
fuera una función
normal (no como
Jefe.prototype.toString = function(){
constructor),
return Empleado.prototype.toString.call(th is)+"
Despacho:"+this.despacho; asociando this al
}; objeto que se está
creando
Herencia El prototipo de todos
los objetos Jefe es un
objeto Empleado
Simulación de clase hija en JavaScript
De esta forma, los
métodos que no
function Jefe(nombre, salario, despacho){ estén en “la clase”
Empleado.call(this, nombre, salario); Jefe se buscarán en la
this.despacho = despacho;
“clase Empleado”
}

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

Jefe.prototype.toString = function(){
return Empleado.prototype.toString.call(this)+"
Despacho:"+this.despacho;
};
Herencia
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
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
index.html
<!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>
Estructura de una aplicación
app.js
$(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'));

});
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”
vamos a hacer las
paces

JavaScript en I
la JVM
JavaScript en la JVM
• 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
Proyecto Nashorn (Rhino)
JavaScript en la JVM
• 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
jjs -fx fxscript.js

• Acceso a librerías Java desdeJavaScript


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);
}
}
}
JavaScript en la JVM
• 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/
Lo que molaría es ejecutar
aplicaciones
node.js en la JVM
JavaScript en la JVM
• Proyecto avatar.js
• Aplicaciones node.js se ejecutan sin modificaciones*

https://avatar.java.net/
*casi
Muchas
gracias!!

JavaScript
para Javeros
I Cómo ser moderno
y no morir en el
intento ;)

Mg. Jorge Luis Huamán Vera

También podría gustarte