El documento presenta una introducción a JavaScript para programadores Java, comparando y contrastando las similitudes y diferencias entre los dos lenguajes. Explica las diferencias en la sintaxis, tipos de datos, variables, estructuras de control, funciones y objetos entre JavaScript y Java. También cubre temas como operadores, conversiones de tipos, alcance, excepciones y clases/prototipos en JavaScript.
investigación de los Avances tecnológicos del siglo XXI
JavaScript para Programadores Java
1. Arquitectura
de Servicios Telemáticos
JavaScript para Programadores Java
Departamento de Ingeniería de Sistemas Telemáticos
2. Índice
JavaScript vs Java
●
●
Sentencias, comentarios
●
Variables
●
Estructuras de control
●
Funciones
●
Objetos
JavaScript para Programadores Java 2
3. JavaScript
●
Como ya hemos visto, JavaScript no viene
de “Java”
●
Vamos a ver similitudes y diferencias
JavaScript para Programadores Java 3
4. 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!
JavaScript para Programadores Java 4
5. 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'.
JavaScript para Programadores Java 5
6. 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
JavaScript para Programadores Java 6
7. 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!
JavaScript para Programadores Java 7
8. Variables Java (I)
●
Java es un lenguaje fuertemente tipado:
cada variable debe declarar su tipo antes
de usarse
Ej.
●
String s = “hola”;
JavaScript para Programadores Java 8
9. 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;
JavaScript para Programadores Java 9
10. 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
JavaScript para Programadores Java 10
11. 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.
JavaScript para Programadores Java 11
13. Operadores
●
Son igual que en Java
●
Aritméticos:
– Incremento/Decremento (++/--)
– Operaciones básicas: + - * / %
– Comparación: < <= > >= == !=
– Asignación: = += -= *= **= /= %= <<= >>=
●
Lógicos: Nuevo, equivale a Math.sqrt()
– && || !
JavaScript para Programadores Java 13
14. 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
JavaScript para Programadores Java 14
15. 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
JavaScript para Programadores Java 15
16. Estructuras de control
●
Condicionales
– if
– if /else
– switch
●
Bucles
– while-do
– do-while
– for
– for-each
JavaScript para Programadores Java 16
17. 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”;
}
¡Igual en Java/Javascript!
JavaScript para Programadores Java 17
18. 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;
}
}
JavaScript para Programadores Java 18
19. Bucle while-do
var i = 0;
var s;
while (i < 10) {
s += i;
i++;
}
¡Igual en Java/Javascript!
JavaScript para Programadores Java 19
20. Bucle do-while
var i = 0;
var s;
do {
s += i;
i++;
} while (i < 10);
¡Igual en Java/Javascript!
JavaScript para Programadores Java 20
21. 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;
} }
¡Igual en Java/Javascript!
JavaScript para Programadores Java 21
22. 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
JavaScript para Programadores Java 22
23. 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.
JavaScript para Programadores Java 23
24. 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
JavaScript para Programadores Java 24
25. 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();” />
JavaScript para Programadores Java 25
26. Funciones anónimas
●
Podemos asignar directamente una función
a una variable sin darle nombre
JavaScript para Programadores Java 26
27. 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
JavaScript para Programadores Java 27
29. Funciones anónimas que se
autollaman (self-invoking)
(function() {...})
(function(){
document.write("hola");
}())
JavaScript para Programadores Java 29
30. 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
JavaScript para Programadores Java 30
31. 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;
}
JavaScript para Programadores Java 31
32. 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
JavaScript para Programadores Java 32
33. 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í
JavaScript para Programadores Java 33
34. 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
JavaScript para Programadores Java 34
35. 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]”);
JavaScript para Programadores Java 35
36. Crear objetos - propiedades
var producto;
producto.nombre = “libro”;
producto.precio = 3;
JavaScript para Programadores Java 36
37. Crear objeto - literales
var producto = {
nombre: 'libro',
precio: 3
};
JavaScript para Programadores Java 37
38. 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 + “<br/>”);
document.write(“El producto cuesta “ + producto.precio + “<br/>”);
}
producto.muestra();
producto.precio = 4;
producto.muestra();
JavaScript para Programadores Java 38
39. 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);
JavaScript para Programadores Java 39
40. 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 + “<br/>”);
document.write(“El producto cuesta “ + producto.precio + “<br/>”);
}
var producto = new Producto();
document.write(“Producto “ + producto.muestra());
JavaScript para Programadores Java 40
41. 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/>”);
}
};
document.write(“Producto “ + producto.muestra());
JavaScript para Programadores Java 41
42. Métodos en literales
function Producto(){
this.nombre = “libro”;
this.precio = 3;
this.muestra = function(){
document.write(“El producto es un “ + this.nombre + “<br/>”);
document.write(“El producto cuesta “ + this.precio + “<br/>”);
}
var producto = new Producto();
document.write(“Producto “ + producto.muestra());
JavaScript para Programadores Java 42
43. Sentencia with
function Producto(){
this.nombre = “libro”;
this.precio = 3;
this.muestra = function(){
document.write(“El producto es un “ + this.nombre + “<br/>”);
document.write(“El producto cuesta “ + this.precio + “<br/>”);
}
var producto = new Producto();
with (producto) { // abreviatura
document.write(“Producto “ + nombre + “ “ + precio + “ “ + muestra());
JavaScript para Programadores Java 43
44. Iterador for-in
function Producto(){
this.nombre = “libro”;
this.precio = 3;
this.muestra = function(){
document.write(“El producto es un “ + this.nombre + “<br/>”);
document.write(“El producto cuesta “ + this.precio + “<br/>”);
}
function itera(obj){
for (prop in ojb){
document.write(“Prop: “ + prop + “ valor “ + obj[prop]);
}
}
var producto = new Producto();
itera(producto);
JavaScript para Programadores Java 44
46. 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
JavaScript para Programadores Java 46
47. Prototipos
function Producto(nombre, precio){
this.nombre = nombre;
this.precio = precio;
this.muestra = function(){
document.write(“El producto es un “ + this.nombre + “<br/>”);
document.write(“El producto cuesta “ + this.precio + “<br/>”);
}
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
48. Subclases
JavaScript para Programadores Java 48
49. Bibliotecas de JavaScript
● JavaScript “Core Objects”
– Arrays
– Date
– Math
– String
JavaScript para Programadores Java 49
50. 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;
} }
JavaScript para Programadores Java 50
51. 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
JavaScript para Programadores Java 51
52. 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();
JavaScript para Programadores Java 52
55. 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();
JavaScript para Programadores Java 55
56. 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();
JavaScript para Programadores Java 56
57. 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'};}
};
JavaScript para Programadores Java 57
58. Referencias
JavaScript para Programadores Java 58