JavaScript para Programadores Java

Arquitectura de Servicios Telemáticos

JavaScript para Programadores Java

Departamento de Ingeniería de Sistemas Telemáticos

JavaScript para Programadores Java 2

Índice●JavaScript vs Java● Sentencias, comentarios● Variables● Estructuras de control● Funciones● Objetos


JavaScript

● Como ya hemos visto, JavaScript no viene de “Java”

● Vamos a ver similitudes y diferencias


Lenguaje compilado vs interpretado

● Java:– Lenguaje compilado → se genera lenguaje

máquina (.class) que se ejecuta en la JVM● JavaScript:

– Lenguaje interpretado por un intérprete • En el navegador (JS en cliente)

• En el servidor (p. ej. node.js)

– ¡No compilamos!• ¡Detectamos errores de sintaxis en tiempo de

ejecución!


Programando...

● Java:– Programamos clases

– El programa 'empieza' cuando llamamos a una clase ejecutable (método main) o a un método público de clase (static) de una clase

● JavaScript:– Programamos 'sentencias', no tienen que ir

'dentro de una clase'.


Sentencias

● Java– Las sentencias terminan en “;”

– Ej. String s = “hola”;● JavaScript

– Las sentencias terminan en ”;”

– Ej. var s = “hola”;

Declarar variables: con var y sin tipo


Comentarios

● Java– De línea //

– De bloque /* … */● JavaScript

– De línea //

– De bloque /* … */

// Comentario de una línea/* Comentario De varias líneas */

¡Igual en Java/Javascript!


Variables Java (I)

● Java es un lenguaje fuertemente tipado: cada variable debe declarar su tipo antes de usarse

●Ej.

String s = “hola”;


Variables JavaScript (II)

● JavaScript es un lenguaje débilmente tipado:

– debemos declarar una variable (mediante var), pero no declaramos su tipo.

– El tipo se infiere del contenido que tenga●Ej. var s;

s = “hola”;s = 9.3;


Tipos de datos Java (I)

● Java distingue dos tipos de datos:– Primitivos: byte, short, int, long, float,

double, char, boolean

– Referencias: objetos, arrays e interfaces


Tipos de datos: JS (II)

● Primitivos:– number

• No distingue entre entero y flotante. Todos son flotantes

– string

– boolean● Tipos compuestos: “Objetos”, funciones,

arrays, null y undefined.

var pi = 3.14159;var nombre = 'pepe'; // o usa “pepe”var abierto = true;


Ejemplo


Operadores

● Son igual que en Java● Aritméticos:

– Incremento/Decremento (++/--)

– Operaciones básicas: + - * / %

– Comparación: < <= > >= == !=

– Asignación: = += -= *= **= /= %= <<= >>=● Lógicos:

– && || !Nuevo, equivale a Math.sqrt()


Operadores – Idéntico/igual● Java

– == // equals● JavaScript

– == (Igual, mismo valor) // !=• Ej. T: “23” == 23; 4 == 4.0; “hola” == “hola”; null == null

• Ej. F: “Pepe” == “pepe”, NaN == NaN,

– === (Idéntico, mismo tipo y mismo valor) // !==• Ej. T: 4 === 4.0

• Ej. F: “23” === 23

Not a Number

Implicit casting: coercion


Conversión de tipos

● Funciones: parseInt(), parseFloat()●Ej.

– var s = 5 + parseInt(“3”); // s = 8

– var s = 5 + parseInt(“3.0”); // s = 8.0● Evaluar una expresión: eval()● Ej. var s = eval(“(5 + 3) * 2”); // s = 16


Estructuras de control● Condicionales

– if

– if /else

– switch● Bucles

– while-do

– do-while

– for

– for-each


Condicional if/else

● Condicional simple Java/JavaScript– if (condición) {expr-if}

– if (condición) {expr-if} else {expr-else};

– s = condición ? expr-if : expr-else;if (nota >= 5) { resultado = “aprobado”;} else { resultado = “suspenso”;}



Condicional switch

switch (opcion) { case 1: direccion = “izda”; break; case 2: direccion = “dcha”; break; default: direccion = “recto”; break;}

switch (color) { case “azul”: case “verde”: color = “frío”; break; case “rojo”: color = “cálido”; break; default: color = “frío”; break;}

En Java7 los switch admiten String¡Igual en Java/Javascript!


Bucle while-do

var i = 0;var s;while (i < 10) { s += i; i++;}



Bucle do-while

var i = 0;var s;do { s += i; i++;} while (i < 10);



Bucle for

int s = 0;for (int i = 0; i < 10; i++){ s += i;}

var s = 0;for (var i = 0; i < 10; i++) { s += i;}



Bucle for-each / for-in

String [] a = {“hola”, “adiós”};for (String s : a){ System.out.println(“Valor “ + s);}

var curso = new Curso(“TEWC”, 2);for (var prop in curso) { document.write(curso[prop]);}

Java: bucle for-each para arrays y coleccionesJavaScript: bucle for-in para propiedades de objetos


Funciones en JS

● En Java no hay funciones, hay métodos dentro de las clases

● En JS, las funciones son un tipo de objeto más.


Funciones en JS

public int suma(int a, int b) { return a + b;}

public void imprime (int a) { System.out.println(“Num “ + a);}

function suma (a, b) { return a + b;}

public int suma (int a, int b) { return a + b;}

function imprime (a) { document.write(“Num “ + a);}

- No indicamos si devuelve (o no) algo una función. - Si no devuelve nada, devuelve undefined- No indicamos tipos- Palabra clave function para definir funciones


Llamando a funciones JS directamente desde HTML

●Desde HTML, en un enlace

● Desde HTML, en un evento

<a href=”JavaScript:hola()”>Pincha aquí</a>

<input type=”button” value=”Di hola” onClick=”hola();” />

<script type=”text/javascript”>function hola() {alert(“¡hola!”);}</script>


Funciones anónimas

● Podemos asignar directamente una función a una variable sin darle nombre


Closures (Clausuras)● Una clausura es una función anónima definida dentro de

otra función– Mientras la función externa exista, devuelve una

referencia a la función interna

– Así podemos llamar a la función interna

– La clausura permite que la función interna acceda a las variables de la función externa, aún cuando esa función haya terminado

– Es decir, la clausura retiene una referencia al entorno donde fue creado (variables locales, etc.)

● No existe en Java (aún) pero sí en otros lenguajes como Perl, Python, Lisp o Scheme


Ejemplo Clausuras


Funciones anónimas que se autollaman (self-invoking)

(function() {...})

(function(){ document.write("hola");}())


Alcance (Scope)

● En JS, si declaramos una variable, tiene ámbito / alcance global

● Las variables definidas dentro de una función son (i) locales si se definen con var o (ii) globales


Excepciones

var edad = prompt("Introduce edad","");document.write("Edad " + edad);try { if ((edad > 100) || (edad < 0)) { throw "FueraRango"; } else if (edad == null) { throw "CampoNull"; } else if (edad == "") { throw "CampoVacio"; } else if (isNaN(edad)) { throw "CampoNoNumerico"; }

}catch(err){ alert ("Error " + err); return;}

if (edad < 18) { alert("Menor de edad");} else if (edad > 65) { alert ("Jubilado");} else { alert("Adulto");}


Excepciones● Sigue el patrón try-catch-finally, pero...●La excepción err del catch es un objeto con campos

err.name y err.message●En JS:

– EvalError: uso incorrecto de eval()

– RangeError: rango incorrecto númerico

– ReferenceError: referencia incorrecta (p.ej. Variable no definida)

– SyntaxError: error de sintaxis en eval()

– TypeError: tipo incorrecto● throw no lanza un objeto excepción, sino un String


Objetos en Java

● Java es un lenguaje orientado a objetos basado en clases

●En Java las clases definen– Atributos comunes

– Métodos comunes● para todos los objetos de una clase● Si queremos añadir una propiedad, hay que

cambiar la clase y añadirlo ahí


Objetos en JavaScript

● JavaScript es un lenguaje orientado a objetos sin clases, se basa en prototipos

● Podemos crear un objeto, y añadirle atributos una vez creado

● Al crearlo, podemos indicar 'un prototipo'● Si añadimos un atributo a un prototipo, se

añade los objetos creados conforme a ese prototipo


Crear objetos - Constructor

var producto = new Object();producto.nombre = “libro”;producto.precio = 3;

● Podemos usar new para construir un objeto seguido de un nombre de una función

●JS tiene varios constructores predefinidos: Object(), Date(), Array(), RegExp()

var p = new Object();var d = new Date(“November 21, 2011”);var a = new Array(“a”, “b”, “c”);Var e = new RegExp(“^[a-zA-Z]”);


Crear objetos - propiedades

var producto;producto.nombre = “libro”;producto.precio = 3;


Crear objeto - literales

var producto = { nombre: 'libro', precio: 3};


Crear métodos

var producto = new Object();producto.nombre = “libro”;producto.precio = 3;producto.muestra = imprimir;function imprimir(){ document.write(“El producto es un “ + producto.nombre + “ ”); document.write(“El producto cuesta “ + producto.precio + “ ”);}

producto.muestra();producto.precio = 4;producto.muestra();


Clases

● Para definir una clase en JS, simplemente definimos una función (el constructor), y luego creamos los objetos con new seguido del constructor

● Usamos this para acceder al objeto en el constructorfunction Producto(){ this.nombre = “libro”; this.precio = 3;}var producto = new Producto();document.write(“Producto “ + producto.nombre);


Clases con métodos

function Producto(){ this.nombre = “libro”; this.precio = 3; this.muestra = imprimir;}function imprimir(){ document.write(“El producto es un “ + producto.nombre + “ ”); document.write(“El producto cuesta “ + producto.precio + “ ”);}var producto = new Producto();document.write(“Producto “ + producto.muestra());


Métodos en línea

var producto = { nombre: “libro”, precio: 3, muestra: function(){ document.write(“El producto es un “ + this.nombre + “ ”); document.write(“El producto cuesta “ + this.precio + “ ”); }};

document.write(“Producto “ + producto.muestra());


Métodos en literales

function Producto(){ this.nombre = “libro”; this.precio = 3; this.muestra = function(){ document.write(“El producto es un “ + this.nombre + “ ”); document.write(“El producto cuesta “ + this.precio + “ ”);}var producto = new Producto();document.write(“Producto “ + producto.muestra());


Sentencia with

function Producto(){ this.nombre = “libro”; this.precio = 3; this.muestra = function(){ document.write(“El producto es un “ + this.nombre + “ ”); document.write(“El producto cuesta “ + this.precio + “ ”);}var producto = new Producto();with (producto) { // abreviatura document.write(“Producto “ + nombre + “ “ + precio + “ “ + muestra());


Iterador for-in

function Producto(){ this.nombre = “libro”; this.precio = 3; this.muestra = function(){ document.write(“El producto es un “ + this.nombre + “ ”); document.write(“El producto cuesta “ + this.precio + “ ”);}function itera(obj){ for (prop in ojb){ document.write(“Prop: “ + prop + “ valor “ + obj[prop]); }}var producto = new Producto();itera(producto);


Ejemplo for/in


Prototipos

●Todos los objetos en JS tienen una propiedad 'prototype'

● Si añadimos una propiedad/método al prototipo, se añade a todos los objetos de la clase


Prototiposfunction Producto(nombre, precio){ this.nombre = nombre; this.precio = precio; this.muestra = function(){ document.write(“El producto es un “ + this.nombre + “ ”); document.write(“El producto cuesta “ + this.precio + “ ”);}var producto1 = new Producto(“libro”, 3);var producto2 = new Producto(“cuadro”, 4);Producto.prototype.marca = “ACME”;document.write(producto1.nombre + “ es de la marca “ + producto1.marca + “ ”);document.write(producto2.nombre + “ es de la marca “ + producto2.marca + “ ”);

Cuando accedemos a una propiedad, JS mira en orden: - si el objeto tiene la propiedad, devuelve el valor- si el prototipo del objeto tiene la propiedad, devuelve el valor- si Object tiene la propiedad, devuelve el valor- si no, devuelve undefined


Subclases


Bibliotecas de JavaScript

● JavaScript “Core Objects”– Arrays

– Date

– Math

– String


Arrays

var meses = new Array();meses[0] = “Enero”;meses[1] = “Febrero”;var dias = new Array(3);var dias = {“lunes”, “martes”, “miercóles”};for (var i in dias) {

document.write(“dias[“ + i + “] : ” + dias[i] + “ ”); }var numeros = new Array(10);for (var i = 0; i < numeros.length; i++) { numeros[i] = i;}

String [] meses = new String[3];meses[0] = “Enero”;meses[1] = “Febrero”;String [] dias1 = new String[3];String [] dias = {“lunes”, “martes”, “miercóles”};for (String dia in dias) {

System.out.println(“Día “ + dia); }

Int [] numeros = new int[10];for (int i = 0; i < numeros.length; i++) { numeros[i] = i;}


Arrays bidimensionales (de filas)

var a1 = new Array(new Array(1, 2, 3), new Array(2, 3, 4), new Array(4, 5 6));var a2 = [ [1, 2, 3], [4, 5, 6], [7, 8, 9]];for (var i = 0; i < a1.length; i++) { for (var j = 0; j < a1[0].length; j++) { document.write(“valor “ + a[i][j] + “ ”); }}

int [][] a1 = new int [3][3]; // y relleno

int [][] a2 = { {1, 2, 3}, {4, 5, 6}, {7, 8, 9}};for (int i = 0; i < a1.length; i++) { for (int j = 0; j < a1[0].length; j++) { System.out.println(“valor “ + a[i][j]); }}

En JS los arrays también son objetos. Tienen métodos como sort(), toString(), …

No tienen longitud fija


Date

var fecha = new Date();fecha.setFullDate(2011, 10, 24); //24/11/2010, mes empieza en 0var dia = fecha.getDay();var mes = fecha.getMonth();var anno = fecha.getYear();


Objecto Math

Math.PI;Math.abs(num);Math.asin(num);Math.max(num1, num2);Math.min(num1, num2);Math.pow(x, y);Math.random();Math.toString(num);Math.sqrt(num);


Objecto String

String s = “Hola”;System.out.println(“” + s.length();System.out.println(“” + s.toUpperCase();System.out.println(“” + s.substring(2,3);System.out.println(“” + s.charAt(1);

var s = “Hola”;document.write(“” + s.length + “<br\>”);document.write(“” + s.toUpperCase() + “<br\>”);document.write(“” + s.substr(2, 3) + “<br\>”);document.write(“” + s.chartAt(1) + “<br\>”);


Funciones como objetos (I)

● Las funciones en JS son un tipo de objeto como otro cualquiera

● Podemos declarar una función

● Definir una variable de tipo función

function hola() { alert('¡hola!');}

var saluda = hola;saluda();


Funciones en JS (II)

● Añadir propiedades a una función

● Devolver una función desde otra función

hola.idioma = 'español';alert(hola.idioma);alert(hola.constructor);

function holaMatutino() { return hola;}var saludo = holaMatutino();saludo();


Funciones en JS (III)

● Los métodos simplemente son propiedades cuyo tipo es función

var producto = { nombre: 'libro', precio: 3, Imprime: function() { alert('hola'};}};


Referencias

Technology

JavaScript para Programadores Java