HTML Dinámico: JavaScript. HTML Dinámico: JavaScript. Grupo de Ingeniería del Software. Departamento de Lenguajes y Sistemas Informáticos HTTP TCP/IP

Transcripción

1 escuela técnica superior de ingeniería informática HTML Dinámico: JavaScript Departamento de Lenguajes 2005 Cliente web HTTP TCP/IP Servidor de aplicaciones SQL Servidor de datos Validación Validación en en cliente cliente

2 Qué es HTML HTML dinámico = HTML estático + scripts Los scripts (código ejecutable interpretado) permiten modificar dinámicamente el contenido de la página HTML La página HTML se manipula desde el código script mediante los objetos del DOM (Document( Object Model) La programación de HTML dinámico es básicamente programación por eventos JavaScript fue desarrollado por Netscape (1995) A pesar del nombre, JavaScript no tiene nada que ver con Java (originalmente LiveScript) Es el único lenguaje de script que es admitido por todos los navegadores La versión de Microsoft se denomina JScript y es una implementación casi completa del estándar ECMAScript Es un lenguaje basado en objetos, interpretado y sin tipos. Su sintaxis es similar a C/C++ o Java Otros usos: dentro de documentos PDF Qué versión? Qué navegador? Versión Java Script 1.0 (95) Java Script 1.1 Java Script 1.2 Java Script 1.3 Java Script 1.5 JScript 1.0 (96) JScript 2.0 JScript 3.0 JScript 4.0 JScript 5.0 JScript 5.5 Navegador Netscape 2.0, IE 3.0 Netscape 3.0, IE 4.0 Netscape , IE 4.0 Netscape x, IE 5.0 Netscape 6.0+, Mozilla, IE 5.5+ IE 3.0 IE 3.0 IE 4.0 IE 4.0 IE 5.0 IE 5.0 Además existe VBScript y ECMAScript (3.0,E4X)

3 Los scripts pueden insertarse en HTML de 4 formas distintas: En <body> mediante una etiqueta <script> de ejecución inmediata. En <head> mediante una etiqueta <script> de ejecución diferida. Como gestor de un evento de un objeto DOM. En la sección <head> con una etiqueta <script for...event...> En la etiqueta que genera el evento en un atributo onevento Como una URL especial (javascript:) en los atributos href de las etiquetas <a>. Siempre que se use la etiqueta script se puede usar el atributo src para indicar que el código se encuentra en una URL aparte. Script de ejecución inmediata <html> </html> <head> </head> <body> <title>título del documento</title>   <script language="javascript">  </script> <! más contenido del documento --> </body>

4 Script de ejecución diferida <html> <head> <title>título del documento</title> <script language="javascript">  </script> </head> <body>  </body> </html> Gestor de eventos (1/2) <html> <head> <title>título del documento</title> <script language="javascript" for="identificador de objeto" event="evento"> </script> </head> </html>  <body> </body>

5 Gestor de Eventos (2/2) <html> <head> <title>título del documento</title> </head> <body>  <marca onevento="código JavaScript"> </marca> <! más contenido del documento --> </body> </html>. Suele ser una llamada a una función previamente declarada en un bloque script en la sección de head o en un archivo externo. Como URLs de enlaces <html> <head> <title>título del documento</title> </head> <body>  <a href="javascript:código JavaScript"> Texto enlace </a> </html> <! más contenido del documento --> </body>

6 Funciones en JavaScript function nombre_función( argumentos ){ var variable_local = valor_inicial; // código función return (expresión_devuelta); Si no existe return o bien no se devuelve nada o bien el tipo es undefined Los tipos de datos básicos en JavaScript son los string, numéricos y boleanos. Las variables pueden cambiar de tipo dentro del código aunque es mejor no utilizar esta funcionalidad. Objetos en JavaScript En JavaScript, los objetos son arrays a los que pueden añadirse propiedades (atributos) o funciones (métodos) dinámicamente. A las propiedades se accede mediante el operador punto o mediante los corchetes: objeto.propiedad objeto["propiedad"] Para añadir una propiedad nueva basta con una asignación. A los métodos se accede mediante el operador punto con paréntesis objeto.método( parámetros )

7 Estructuras if (condición) { // bloque if else { // bloque else switch (expresión) { case etiq1 : // bloque1 break; case etiq2 : // bloque2 break;... default : // bloquen while (condición) { // bloque while do { // bloque do while (condición) for (i=0; i<=n; i++) { // bloque for Objetos (core( objects) String Tiene en atributo length para saber la longitud y además las siguientes funciones: big(): para poner la fuente más grande bold(): para ponerla en negritas charat(n): devuelve el carácter colocado en la posición n. match(c) : dice si subcadena c pertenece a la cadena. substring(x,y): Devuelve la subcadena que va de x a y inclusive (las cadenas empiezan en 0) tolowercase():convierte a mayúsculas touppercase():convierte a minúsculas valueof()// tostring(): devuelve el valor de tipo string (importante a la hora de comparar cadenas)

8 Objetos (core( objects) Math abs(numero). Función valor absoluto max(x,y): Devuelve el máximo de 'x' e 'y' min(x,y): Devuelve el mínimo de 'x' e 'y' pow(base,exp): potencia random(). Devuelve un número aleatorio entre 0 y 1 round(numero). Redondea 'numero' al entero más cercano sin(numero). Devuelve el seno de 'numero' sqrt(numero). Devuelve la raíz cuadrada de número. tan(numero). Devuelve la tangente de 'numero'... Objetos (core( objects) Array Tiene en atributo length para saber la longitud y además las siguientes funciones: join(): agrupa los elementos separándolos por comas. reverse(): invierte el orden de los elementos. sort(): ordena los elementos del array a = new Array (25); // crea un array de 25 elementos a = new Array (1, abd",true); // un array con tres posiciones a = new Array ("cadena"); // un array con una cadena a = new Array (false); // array con el elemento false Array de 3 filas y 6 columnas? a = new Array (3); for (i=0;i<3;i++) a[i]= new Array (6); //acceso al array a[i][j]

9 Objetos (core( objects) Date getdate(). Devuelve el día del mes actual como un entero entre 1 y 31. getday(). Devuelve el día de la semana actual como un entero entre 0 y 6. gethours(). Devuelve la hora del día actual como un entero entre 0 y 23. getminutes(). Devuelve los minutos de la hora actual como un entero entre 0 y 59. getmonth(). Devuelve el mes del año actual como un entero entre 0 y 11. getseconds(). Devuelve los segundos del minuto actual como un entero entre 0 y 59. gettime(). Devuelve el tiempo transcurrido en milisegundos desde el 1 de enero de 1970 hasta el momento actual. Objetos (core( objects) Date getyear(). Devuelve el año actual como un entero. setdate(día_mes). Pone el día del mes actual en el objeto Date que estemos usando. togmtstring(). Devuelve una cadena que usa las convenciones de Internet con la zona horaria GMT var f = new Date (); var f = new Date (año, mes); var f = new Date (año, mes, día); var f = new Date (año, mes, día, horas); var f = new Date (año, mes, día, horas, minutos); var f = new Date (año, mes, día, horas, minutos, segundos);

10 Objetos (core( objects) Date function diadelasemana(){ var hoy = new Date(); var dia; switch(hoy.getday()){ case 0:dia = "Domingo";break; case 1:dia = "Lunes";break; case 2: dia = "Martes";break; case 3: dia = "Miércoles"; break; case 4: dia = "Jueves"; break; case 5: dia = "Viernes"; break; case 6: dia = "Sábado"; break; alert(dia); DOM (Document( Object Model) Pensado para acceder a documentos XML y HTML Estándar del W3C ( ) También conocido como W3CDOM Tres niveles: level 1, level 2, level 3 Cada navegador tiene una versión del DOM A partir de la versión 6 de IE (Trident( Trident) ) y los navegadores basados en Gecko (Mozilla, Firefox) soportan W3CDOM Trident Gecko KHTML Presto icab L Yes 7.0 Yes L2 Minor Major Major Major Major L3 No Minor Minor Minor Minor Tomado de

11 DOM (Document( Object Model) Estándar del W3C ( ) Window History Location Frame[] Navigator Document Plugin[] Applet[] Anchor[] Area[] Image[] Link[] FileUpload Password Radio Checkbox Hidden Submit Form[] Textarea Text Reset Button Select Options[] Plugin Layer[] MimeType Window Es el objeto que representa a la ventana que contiene la página status: mensaje de la barra de estado document: objeto que representa a la página HTML visualizada history: representa al objeto history closed: indica si la ventana está cerrada length: número de frames que contiene la ventana frames: un array que contiene todos los frames que tiene la ventana, es decir, devuelve un array de objetos de tipo Frame close(): cierra la ventana activa

12 Window alert(srt): abre una ventana que dice que algo va a suceder confirm(srt): una ventana con un botón de cancelar y otro de aceptar. devuelve true si se ha pulsado aceptar y false si ha pulsado cancelar prompt(msg,default): una ventana de entrada de datos con un valor por defecto default open(url,nombre,opt): abre una ventana del navegador close(): cierra la ventana navigate(url): ir a url (sólo IE) Navigator Es el objeto que representa al navegador de la ventana. Tiene un serie de propiedades: appname: : Nombre concreto del navegador: Microsoft Internet Explorer, Mozilla, NetScape, appversion: : Versión n del navegador: Netscape 5.0 (Windows; es-es) Microsoft Internet Explorer 4.0 (compatible; MSIE 6.0; Windows NT 5.0) mimetypes: : un array con los tipos MIME (Multipurpose Internet Mail Extensions) que soporta el navegador. Application, Audio, Image, Message, Multipart, Text, Video plugins: : un array con los plugins que tiene instalado el navegador javaenabled(): devuelve un booleano indicando si está habilitado el lenguaje JAVA para los applets

13 Frame Es el objeto que representa a los marcos (frames) de una página y tiene como atributo: parent: apunta al padre del frame Location Es el objeto que representa la URL que contiene el objeto window: host: Contiene el nombre del servidor que ha servido la página y el número de puerto de la URL hostname: nombre del servidor pathname: camino sin incluir ni el servidor ni el puerto port: puerto protocol: protocolo (http, ftp,..) href: URL que se puede cambiar dinámicamente Document Es el objeto que representa al documento en si: bgcolor: valor entero con el código del color de fondo o cadena con el color ( #12345, red ) fgcolor: identifica el color del texto del documento forms: un array conteniendo todos los Form de un documento images: array de imágenes del documento. lastmodified: es una cadena con la fecha de modificación del documento links: Contiene un array con todos los enlaces externos del documento referrer: cadena con la URL del enlace desde el que se llegó al documento. title: cadena con el título del documento

14 Document close(): cierra el documento (importante si se ha escrito en el) write(srt), writeln(str), ( ojo! writeln no mete ningún salto de línea al mostrarlo en el navegador) getelementbyid(id): aquí se le pone el ID del elemento contenido en el documento. <img id= imgmail src = mail.jpg > document.getelementbyid( imgmail ).src = mail2.jpg. Link target: cadena con el nombre del target href: cadena con el nombre del destino Image Este objeto representa a una imagen. Tiene las siguientes propiedades y métodos que están relacionadas con los atributos de la etiqueta img: Form border: valor entero con el valor de border de la imagen, número de pixels con el borde de la imagen. complete: valor booleano indicando si se ha cargado la imagen entera del servidor. src: se refiere al contenido de la imagen en sí. Este objeto representa a un formulario Todos los atributos de la etiqueta form: action, method, elements: un array con todos los elementos del formulario (botones, áreas de texto,...). length: el número de elementos de un form.

15 Form submit(): hace lo mismo que si se pulsara submit en el formulario reset(): borra el formulario como si se pulsase el botón reset Text / TextArea Este objeto representa a un control de texto tiene todos los elementos de éste tipo de controles: defaultvalue, value: contiene el valor de la cadena de caracteres del área de texto por tanto, se puede cambiar mediante javascript el valor de un area de texto. focus(): captura el foco sobre la caja de texto. select(): selecciona el texto que hay en la caja de texto. CheckBox Representa a una caja de selección name: nombredel objeto checked: indica si el objeto ha sido seleccionado defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado value: indica el valor de la cadena de caracteres asociada a la caja de selección click(): Lo mismo que si se hiciese clic con el ratón

16 Radio Este objeto es diferente al anterior puesto que contiene más de una casilla con una sola posible selección. Este objeto es por tanto un array con los elementos que en el aparecen length : indica el número de elementos que lo contienen. Cada elemento del array contendrá las siguientes propiedades: name: indica el nombre del objeto. checked: indica si el objeto ha sido seleccionado. defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado. value: indica el valor de la cadena de caracteres asociada al radiobutton. click(): Lo mismo que si se hiciese clic con el ratón. Select Representa a select. Tiene como propiedad un array con las opciones que aparecen en la selección. length: indica el número de elementos que contiene. options: array con las diferentes opciones de la selección defaultchecked: indica si el objeto debe aparecer inicialmente como seleccionado. index: un valor entero que indica la posición del objeto en el array selected: indica si la opción ha sido seleccionada selectedindex: un entero que indica el índice de la posición que ha sido seleccionada. text: cadena de caracteres con el texto mostrado en la opción selectedindex: un entero que indica el índice de la posición que ha sido seleccionada

17 Comparación de cadenas <html> <head> </head> <body> <title>comparación de cadenas en cliente</title> <script language="javascript src= script.js > </script> <form method="post" onsubmit="return comparar(this)"> <br/> </form> </body> </html> Contraseña : <input name= passwd1"/> <br/> Repita Contraseña: <input name=" passwd2 "/> <br/> <input type="submit"/> Comparación de cadenas

18 Eventos onabort onblur onchange onclick Evento Objetos afectados Image Button, Checkbox, FileUpload, Password,, Radio, Reset, Select, Submit, Text, Textarea, window FileUpload, Select, Text, Textarea Button, document, Checkbox,, Link, Radio, Reset, Submit Causa Se interrumpe la carga de una imagen Un elemento de formulario, una ventana o un marco pierden el foco El valor de un campo de formulario cambia Se hace click en un objeto o formulario Eventos Evento ondblclick ondragdrop onerror Objetos afectados document,, Link window Image, window Causa Se hace click doble en un objeto o formulario Se arrastra y suelta un objeto en la ventana La carga de un documento o imagen produce un error onfocus Button, Checkbox, FileUpload, Password,, Radio, Reset, Select, Submit, Text, Textarea, window Una ventana, marco o elemento de formulario recibe el foco

19 Eventos onkeyup onload Evento onkeydown onkeypress Objetos afectados document,, Link, Textarea document, Image,, Link, Textarea document, Image,, Link, Textarea Image, window Causa Se pulsa una tecla Se mantiene pulsada una tecla Se libera una tecla El navegador termina la carga de una ventana onmousedown onmousemove Button, document,, Link * Se pulsa un botón del ratón Se mueve el puntero del ratón Eventos onmove onreset Evento onmouseout onmouseover onmouseup Objetos afectados Image, Link Image, Link Button, document, Link window Form Causa El puntero abando una área o enlace El puntero entra en una área o imagen El usuario libera un botón del ratón Se mueve una ventana o un marco El usuario limpia un formulario onresize window Se cambia el tamaño de una ventana o marco

20 Eventos onselect Evento onsubmit onunload Objetos afectados Text, Textarea Form window Causa Se selecciona el texto del campo texto o área de texto de un formulario El usuario envía un formulario El usuario abandona una página Ejemplo. Hacer que una imagen se presente como un botón. <head> <script language="javascript">  </script> </head> <body> </body> <img src="images/bup.jpg" id="iboton onmouseover="cambiaimagendown()" onmouseout="cambiaimagenup()"/>

21 Validación de formulario Construir una página que le pida los siguientes datos al usuario: DNI, Letra DNI, Apellidos y nombre. Cuándo se envíen los datos se deberá comprobar que ningún dato esté vacío. Si no están rellenos los datos no se enviará el formulario. Además se comprobará que la letra del NIF corresponde con el DNI tecleado. Algoritmo para comprobar la letra del DNI: tabla[23]=[t,r,w,a,g,m,y,f,p,d,x,b,n,j,z,s,q,v,h,l,c,k,e] modulo = dni %23; letra = tabla[modulo]; function checkdni(dni,letra) { var res = false; var tabla = ["T","R","W","A","G","M","Y","F","P","D", "X","B","N","J","Z","S","Q","V","H","L", "C","K","E"]; var modulo = dni%23; if (letra.touppercase() == tabla[modulo]) res = true return res;