JavaScript para Programadores Java

1,758 views

Published on

JavaSc

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,758
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
71
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JavaScript para Programadores Java

  1. 1. Arquitectura de Servicios TelemáticosJavaScript para Programadores JavaDepartamento de Ingeniería de Sistemas Telemáticos
  2. 2. ÍndiceJavaScript vs Java●● Sentencias, comentarios● Variables● Estructuras de control● Funciones● Objetos JavaScript para Programadores Java 2
  3. 3. JavaScript● Como ya hemos visto, JavaScript no viene de “Java”● Vamos a ver similitudes y diferencias JavaScript para Programadores Java 3
  4. 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. 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. 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. 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. 8. Variables Java (I)● Java es un lenguaje fuertemente tipado: cada variable debe declarar su tipo antes de usarseEj.● String s = “hola”; JavaScript para Programadores Java 8
  9. 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 tengaEj.● var s; s = “hola”; s = 9.3; JavaScript para Programadores Java 9
  10. 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. 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
  12. 12. Ejemplo JavaScript para Programadores Java 12
  13. 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. 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. 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. 16. Estructuras de control● Condicionales – if – if /else – switch● Bucles – while-do – do-while – for – for-each JavaScript para Programadores Java 16
  17. 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. 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. 19. Bucle while-dovar i = 0;var s;while (i < 10) { s += i; i++;} ¡Igual en Java/Javascript! JavaScript para Programadores Java 19
  20. 20. Bucle do-whilevar i = 0;var s;do { s += i; i++;} while (i < 10); ¡Igual en Java/Javascript! JavaScript para Programadores Java 20
  21. 21. Bucle forint 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. 22. Bucle for-each / for-inString [] 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. 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. 24. Funciones en JSpublic 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. 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. 26. Funciones anónimas● Podemos asignar directamente una función a una variable sin darle nombre JavaScript para Programadores Java 26
  27. 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
  28. 28. Ejemplo Clausuras JavaScript para Programadores Java 28
  29. 29. Funciones anónimas que se autollaman (self-invoking)(function() {...})(function(){ document.write("hola");}()) JavaScript para Programadores Java 29
  30. 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. 31. Excepcionesvar 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. 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.messageEn 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. 33. Objetos en Java● Java es un lenguaje orientado a objetos basado en clasesEn 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. 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. 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. 36. Crear objetos - propiedades var producto; producto.nombre = “libro”; producto.precio = 3; JavaScript para Programadores Java 36
  37. 37. Crear objeto - literales var producto = { nombre: libro, precio: 3 }; JavaScript para Programadores Java 37
  38. 38. Crear métodosvar 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. 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. 40. Clases con métodosfunction 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. 41. Métodos en líneavar 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. 42. Métodos en literalesfunction 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. 43. Sentencia withfunction 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. 44. Iterador for-infunction 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
  45. 45. Ejemplo for/in JavaScript para Programadores Java 45
  46. 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. 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. 48. Subclases JavaScript para Programadores Java 48
  49. 49. Bibliotecas de JavaScript● JavaScript “Core Objects” – Arrays – Date – Math – String JavaScript para Programadores Java 49
  50. 50. ArraysString [] 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. 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. 52. Datevar 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(); JavaScript para Programadores Java 52
  53. 53. Objecto MathMath.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); JavaScript para Programadores Java 53
  54. 54. Objecto StringString 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>”); JavaScript para Programadores Java 54
  55. 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. 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. 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. 58. Referencias JavaScript para Programadores Java 58

×