JavaScript para Programadores Java

Arquitectura
de Servicios Telemáticos

JavaScript para Programadores Java

Departamento de Ingeniería de Sistemas Telemáticos

Índice
JavaScript vs Java
●

●
Sentencias, comentarios
●
Variables
●
Estructuras de control
●
Funciones
●
Objetos

JavaScript para Programadores Java 2

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 // Comentario de una línea
/* Comentario
– De línea // De varias líneas */

– De bloque /* … */

¡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
var pi = 3.14159;
– string var nombre = 'pepe'; // o usa “pepe”
var abierto = true;
– boolean
●
Tipos compuestos: “Objetos”, funciones,
arrays, null y undefined.


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
Implicit casting: coercion
●
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


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
¡Igual en Java/Javascript! En Java7 los switch admiten String

switch (color) {
switch (opcion) {
case “azul”:
case 1:
case “verde”:
direccion = “izda”;
color = “frío”;
break;
break;
case 2:
case “rojo”:
direccion = “dcha”;
color = “cálido”;
break;
break;
default:
default:
direccion = “recto”;
color = “frío”;
break;
break;
}
}


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; var s = 0;
for (int i = 0; i < 10; i++){ for (var i = 0; i < 10; i++) {
s += i; s += i;
} }



Bucle for-each / for-in

String [] a = {“hola”, “adiós”}; var curso = new Curso(“TEWC”, 2);
for (String s : a){ for (var prop in curso) {
System.out.println(“Valor “ + s); document.write(curso[prop]);
} }

Java: bucle for-each para arrays y colecciones
JavaScript: 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) {{
suma (int a, int b) function suma (a, b) {
return a + b; return a + b;
} }

public void imprime (int a) { function imprime (a) {
System.out.println(“Num “ + 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
<script type=”text/javascript”>function hola() {alert(“¡hola!”);}</script>

Desde HTML, en un enlace
●

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

●
Desde HTML, en un evento
<input type=”button” value=”Di hola” onClick=”hola();” />


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",""); if (edad < 18) {
document.write("Edad " + edad); alert("Menor de edad");
try { } else if (edad > 65) {
if ((edad > 100) || (edad < 0)) { alert ("Jubilado");
throw "FueraRango"; } else {
} else if (edad == null) { alert("Adulto");
throw "CampoNull"; }
} else if (edad == "") {
throw "CampoVacio";
} else if (isNaN(edad)) {
throw "CampoNoNumerico";
}

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


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
● 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 producto = new Object();
var d = new Date(“November 21, 2011”);
producto.nombre = “libro”;
var a = new Array(“a”, “b”, “c”);
producto.precio = 3;
Var e = new RegExp(“^[a-zA-Z]”);


Crear objetos - propiedades

var producto;


Crear objeto - literales

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


Crear métodos

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

producto.muestra();
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
constructor
function Producto(){
this.nombre = “libro”;
this.precio = 3;
}
var producto = new Producto();
document.write(“Producto “ + producto.nombre);


Clases con métodos

this.precio = 3;
this.muestra = imprimir;
}
function imprimir(){
document.write(“El producto es un “ + producto.nombre + “<br/>”);
document.write(“El producto cuesta “ + producto.precio + “<br/>”);
}
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 + “<br/>”);
document.write(“El producto cuesta “ + this.precio + “<br/>”);
}
};



Métodos en literales

this.precio = 3;
this.muestra = function(){
}


Sentencia with

this.precio = 3;
}
with (producto) { // abreviatura
document.write(“Producto “ + nombre + “ “ + precio + “ “ + muestra());


Iterador for-in
this.precio = 3;
}
function itera(obj){
for (prop in ojb){
document.write(“Prop: “ + prop + “ valor “ + obj[prop]);
}
}
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


Prototipos
function Producto(nombre, precio){
this.nombre = nombre;
this.precio = 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 + “<br/>”);
document.write(producto2.nombre + “ es de la marca “ +
producto2.marca + “<br/>”);
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 JavaScript para Programadores Java 47

Subclases


Bibliotecas de JavaScript
● JavaScript “Core Objects”
– Arrays
– Date
– Math
– String


Arrays

String [] meses = new String[3]; var meses = new Array();
meses[0] = “Enero”; meses[0] = “Enero”;
meses[1] = “Febrero”; meses[1] = “Febrero”;
String [] dias1 = new String[3]; var dias = new Array(3);
String [] dias = {“lunes”, “martes”, “miercóles”}; var dias = {“lunes”, “martes”, “miercóles”};
for (String dia in dias) { for (var i in dias) {
System.out.println(“Día “ + dia); document.write(“dias[“ + i + “] : ” +
} dias[i] + “ <br/>”);
}
Int [] numeros = new int[10]; var numeros = new Array(10);
for (int i = 0; i < numeros.length; i++) { for (var i = 0; i < numeros.length; i++) {
numeros[i] = i; numeros[i] = i;
} }


Arrays bidimensionales
(de filas)

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

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 0
var 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”; var s = “Hola”;
System.out.println(“” + s.length(); document.write(“” + s.length + “<br>”);
System.out.println(“” + s.toUpperCase(); document.write(“” + s.toUpperCase() + “<br>”);
System.out.println(“” + s.substring(2,3); document.write(“” + s.substr(2, 3) + “<br>”);
System.out.println(“” + s.charAt(1); 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
function hola() {
alert('¡hola!');
}

●
Definir una variable de tipo función
var saluda = hola;
saluda();


Funciones en JS (II)
●
Añadir propiedades a una función
hola.idioma = 'español';
alert(hola.idioma);
alert(hola.constructor);

●
Devolver una función desde otra función
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


JavaScript para Programadores Java

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (20)

Similar a JavaScript para Programadores Java

Similar a JavaScript para Programadores Java (20)

Más de Carlos A. Iglesias

Más de Carlos A. Iglesias (20)

Último

Último (20)

JavaScript para Programadores Java