Fundamentos de Desarrollo de Aplicaciones Web en J2EE JavaScript básico Dpto. de Ingeniería de Sistemas Telemáticos http://www.gsi.dit.upm.es/moodle/course/category.php?id=1 Qué es JavaScript? Integración con HTML - <script> DOM y BOM W3C DOM BOM Eventos y gestores de eventos Ejemplos Índice Octubre 2005 Octubre 2005 JavaScript Básico 2 Qué es JavaScript? Para qué es bueno JavaScript? No es Java!! Es un lenguaje que se ejecuta en el cliente (en el navegador) Evita recargar la página del servidor Fue creado en 1995 en Netscape por Brendan Eich y se llamaba LiveScript. Como Java estaba de moda, se cambió el nombre Microsoft creó en 1996 su propia versión, llamada Jscript, una versión reducida de JavaScript 1.1 Sun, Netscape y Microsoft intentaron estandarizarlo en el organismo ECMA (European Computer Manufacturers Association), creando ECMAScript en 1996 Se basa en objetos del navegador, se conoce como DOM (Document Object Model), que está siendo estandarizado por W3C en sus versiones level 1.0 (1998) y level 2.0 (2000) pero deja muchos aspectos que son diferentes en los navegadores JavaScript suele ser un dolor de cabeza para la compatibilidad Las versiones actuales son JScript 5.6 y JavaScript 1.5 pero los detalles varían mucho de versión a versión incluso del mismo navegador Octubre 2005 JavaScript Básico 3 Dar vida a páginas web, que sean menos estáticas : DHTML Validación de datos en formularios Nunca es un sustituto de la validación en el servidor! Descargar al servidor Tendencia del cliente web pesado No es buena idea, mejor usar tecnología Flash Usadlo siempre con mucho cuidado Fuente de problemas por su incompatibilidad Educar a diseñadores (CSS, Flash, ) Octubre 2005 JavaScript Básico 4
Integración en HTML Integración en XHTML <html> <head> </head> <body> <script type= text/javascript > /* Comentario de JavaScript para múltiples líneas */ document.write( hola ); // Comentario de una línea </script> <noscript> El navegador no soporta JavaScript </noscript> </body> </html> Al programar JavaScript podemos usar caracteres como <, >, y podríamos escaparlas por < o > pero es incómodo El comentario es por si no lo soporta el navegado <script type= text/javascript > //<![CDATA[ Código JavaScript sin escapar //]]> </script> Octubre 2005 JavaScript Básico 5 Octubre 2005 JavaScript Básico 6 Atributos de <script> DOM y BOM charset: por defecto ISO-8859-1 language: lenguaje de script, JavaScript o VBScript src: URL al fichero JavaScript type: tipo MIME del código script Ej. <script charset= ISO-8859-1 language= JavaScript src= js/prueba.js type= text/javascript > Con XHTML se espera type en vez de language BOM Browser Object Model Diferente según el navegador Define los objetos y eventos propios del navegador (botones, barras, ) y algunos de los documentos (páginas web) DOM Document Object Model Estandarizado por W3C (pero con extensiones propietarias) Define objetos sólo de la página web Nivel 1 versión 1 del estándar (2000) www.w3.org/tr/rec-dom-level-1/ Nivel 2 versión 2 del estándar www.w3.org/tr/dom-level-2-core/ Ofrece un modelo de eventos de los objetos estándar Octubre 2005 JavaScript Básico 7 Octubre 2005 JavaScript Básico 8
W3C DOM Ejemplo DOM Define un modelo de árbol de la página web, para poder acceder a todos los elementos Objetos básicos: Node y NodeList Tipos de Nodos: Document: el nodo root del documento Document type: el DTD Element: h1, Text Attr: atributo de elementos Comment: comentario Document_type node <!DOCTYPE> document node <HEAD> <TITLE> text node Ej. DOM" <HTML> <BODY> <P> text node Texto de prueba." Octubre 2005 JavaScript Básico 9 Octubre 2005 JavaScript Básico 10 Ejemplo de la API DOM BOM <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <title>ejemplo createelement DOM</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="content-language" content="es-es" /> <script type="text/javascript"> function creamensaje() { var op = document.createelement("p"); var otext = document.createtextnode(" Nuevo nodo! "); op.appendchild(otext); document.body.appendchild(op); } </script> A menudo se le llama DOM Principales elementos (comunes): </head> <body onload="creamensaje()"> </body> </html> Octubre 2005 JavaScript Básico 11 Octubre 2005 JavaScript Básico 12
El objeto Window Atributos de Window (I) Ventana o marco del navegador que contiene la página web El objeto window es un objeto global: no es necesario escribir su nombre window.alert( Hola ); alert( Hola ); Algunas propiedades del objeto window son a su vez objetos (document, navigator, history, location, screen) window self parent top frames[] length la ventana actual (no se suele usar) igual que window en un marco la ventana que lo contiene inmediatamente en un marco la ventana contenedora raíz array de marcos (si hay) de la ventana los marcos son a su vez ventanas número de marcos contenidos en la ventana Octubre 2005 JavaScript Básico 13 Octubre 2005 JavaScript Básico 14 Atributos de Window (II) Métodos de Window (I) document El documento HTML que se muestra en la ventana alert(string) Muestra una caja de diálogo con el string y un botón Aceptar location navigator defaultstatus La URL del documento que se está mostrando en la ventana. Si se cambia con otra URL, se cargará otra página Referencia al objeto Navigator. Algunas propiedades son appname (nombre del navegador) y useragent (nombre largo del navegador) y platform (sistema operativo) Información que aparece en la barra de estado no va en Firefox confirm(string) prompt(string) Muestra una caja de diálogo con el string y dos botones: Aceptar y Cancelar. Según pulse el usuario, devuelve true o false Muestra el string y pide un texto de entrada. Si pulsamos Aceptar, devuelve el texto de entrada y null si pulsamos Cancelar. Octubre 2005 JavaScript Básico 15 Octubre 2005 JavaScript Básico 16
Métodos de Window (I) Ejercicio - alert open(url) close() settimeout(nomfunc ion, ms) cleartimeout(id) setinterval (nom, ms) clearinterval(id) Abre una nueva ventana con la url Cierra la ventana actual. Debe ser una ventana, no un marco Invoca la función especificada transcurrido un intervalo de tiempo Ej. var t1 = settimeout( nomfuncion, tiempo-ms) Cancela el intervalo especificado Ej. cleartimeout(t1) Establece una llamada periódica Cancela la llamada periódica Octubre 2005 JavaScript Básico 17 Octubre 2005 JavaScript Básico 18 Depurar en Firefox Ejercicio confirm Herramientas->Consola JavaScript Para definir variables usamos var Ej. var contador = 4; Podemos usar las estructuras de control habituales if/else, while,. Mostrar una ventana que diga quieres seguir? Si pulsamos Aceptar, muestre OK. Seguimos Si pulsamos Cancelar, muestre Vale. Adiós Octubre 2005 JavaScript Básico 19 Octubre 2005 JavaScript Básico 20
Ejercicio prompt Ejercicio close/open Pide al usuario que te diga su nombre Si responde (p. ej. Pablo), dile Hola Pablo! Si no responde, dile Adiós, sin nombre! Abrir una ventana que cargue www.google.es y cerrar la actual Octubre 2005 JavaScript Básico 21 Octubre 2005 JavaScript Básico 22 Ejercicio atributos Objeto document - Atributos (I) Octubre 2005 JavaScript Básico 23 anchors[] applets[] forms[] elements[] stylesheets[] images[] links[] Array con los objetos Anchor (enlaces <a href=.. >) Array con objetos Applet Array con objetos Form Si el documento sólo tiene un formulario, está en forms[0] Array de elementos form Array con las hojas de estilo Array con objetos Image. Podemos cambiar la imagen dando un nuevo valor a src Array con objetos Link Octubre 2005 JavaScript Básico 24
Objeto document - Atributos (II) Métodos de document bgcolor Color de fondo write Escribe en el documento title URL Título de la página URL de la página (sólo lectura) writeln Escribe un documento y un fin de línea lastmodified Cúando se modificó el documento referrer URL que ha pinchado para llegar aquí URL URL de la página (sólo lectura) Octubre 2005 JavaScript Básico 25 Octubre 2005 JavaScript Básico 26 Ejercicio Document Objeto navigator Hacer una página cuyo texto Que muestre el título que tiene La URL Cuándo fue modificada Pregunte si se quiere cambiar el título de la página y lo cambie si se acepta Pregunte si se quiere cambiar el fondo de la página a azul y lo cambie si se acepta Ya hemos visto los atributos principales (appname, useragent) Métodos javaenabled() - para saber si soporta Java Octubre 2005 JavaScript Básico 27 Octubre 2005 JavaScript Básico 28
Objeto history Objeto location Mantiene la historia del navegador Métodos back(): ir a la página anterior forward(): ir a la página siguiente de la historia go(int n): saltar n páginas o retroceder si es negativo Podemos llamar a estas funciones dentro de un enlace Ej. <a href="javascript:history.back(-1)"> Dada URL http://www.dit.upm.es:80/doc/prueba.html#13 href http://www.dit.upm.es:80/doc/prueba.html#13 hash: #13 host: www.dit.upm.es:80 hostname: www.dit.upm.es port: 80 protocol: http pathname doc/prueba.html Dada URL http://www.dit.upm.es:80/doc/vernotas?al=1 search al=1 Octubre 2005 JavaScript Básico 29 Octubre 2005 JavaScript Básico 30 Eventos y gestores de eventos Ejemplo Cambio con ratón La mayoría de elementos HTML responden a las interacciones del usuario (clicks, teclas) generando eventos Evento: click Gestor de evento: onclick Gestores de Eventos de ratón en HTML onclick, ondblclick, onmousemove, onmouseover, onmouseout, onmouseup, onmousedown Gestores de Eventos de teclado en HTML onkeydown, onkeypress, onkeyup Gestores de Eventos de controles HTML en HTML onblur (pierde foco), onchange, onfocus, onreset, onselect, onsubmit Gestores de Eventos de Ventana en HTML onload, onresize, onreload Gestores de Eventos de Imágenes en HTML onabort (carga de imágenes), onerror <h1 onmouseover="style.color='red';" onmouseout="style.color='blue';">pasa el ratón para ver el efecto</h1> <p><img src="avatar_chico.jpg" onmouseover="src='avatar_chica.jpg';" onmouseout="src='avatar_chico.jpg';"/></p> Octubre 2005 JavaScript Básico 31 Octubre 2005 JavaScript Básico 32
Ej. Banner function Tres imágenes: banner_1.jpg, banner_2.jpg y banner_3.jpg <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <script type="text/javascript"> var currentimgnumber = 1; var numberofimages = 3; function window_onload() {settimeout("switchimage()",3000); } function switchimage() { currentimgnumber++; document.imgadvert.src = "AdvertImage" + currentimgnumber + ".jpg"; if (currentimgnumber < numberofimages) { settimeout("switchimage()",3000); } } </script> </head> <body onload="window_onload()"> <img src="advertimage1.jpg" name="imgadvert"> </body> </html> Con XHTML estricto, en vez de < deberíamos poner < o usar CDATA[ que aún no está soportado Octubre 2005 JavaScript Básico 33 Hemos visto que podemos poner JavaScript en el head o el body Normalmente en el head definiremos funciones (directamente o las cargamos de ficheros) y las usamos en el body Octubre 2005 JavaScript Básico 34 Ejercicio Banner Ahora salen los 3 banners y se para Hacer que continuamente esté mostrando los 3 banners en orden (1, 2, 3, 1, 2, 3, ) Octubre 2005 JavaScript Básico 35