Javascript 4en4

542 views
483 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
542
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Javascript 4en4

  1. 1. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA El lenguaje HTML Hasta ahora habéis hecho páginas HTML completas y vistosas Introducción al Javascript Una vez cargadas en el navegador no podemos interaccionar Sería útil poder interaccionar y programar acciones asociadas a ciertos elementos de la página Pedro A. Castillo Valdivieso Universidad de Granada Ceuta 9 - 13 Julio 2007 1 Ceuta 9 - 13 Julio 2007 2 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAIntroducción al Javascript Introducción al Javascript Javascript es un lenguaje interpretado Los programas se ejecutan en el navegador (cliente): Desarrollo en web Ejecución de los programas en el navegador cliente: Es el navegador el que interpreta las instrucciones servidor cliente navegador No hay intervención por parte del servidor Ceuta 9 - 13 Julio 2007 3 Ceuta 9 - 13 Julio 2007 4
  2. 2. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA¿Qué no es Javascript? Índice de la presentación Javascript no es un lenguaje de propósito general. Introducción Pequeños trozos de programa de unas pocas líneas de código. Sintaxis básica de Javascript No da control a todos los recursos del ordenador Cómo trabajar con Javascript No podemos leer o escribir en disco, sólo acceder al documento HTML en el que va inmerso Eventos. Objetos window y document Javascript NO es Java Definición de matrices y objetos Ceuta 9 - 13 Julio 2007 5 Ceuta 9 - 13 Julio 2007 6 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIASintaxis de Javascript Operaciones con cadenas y números Toma su sintaxis de lenguajes de programación más conocidos …con cadenas C++ y Pascal cad1 = “las cosas”; Se concatenan ambas cad2 = “van mejorando”; cadenas y se guarda en cad3 Definición de variables: cad3 = cad1 + cad2 ; Hemos definido dos <HTML> variables, una de tipo cadena <SCRIPT> y la otra de tipo numérico …con variables numéricas numero = 73; num1 = 7; cadena = “contenido de la cadena”; num2 = 2; Se suman los valores y el </SCRIPT> num3 = num1 + num2 ; resultado se guarda en num3 Ceuta 9 - 13 Julio 2007 7 Ceuta 9 - 13 Julio 2007 8
  3. 3. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAÍndice de la presentación ¿Cómo se usa Javascript? Crearemos una página HTML Introducción <HTML> e insertaremos el programa entre etiquetas <SCRIPT> y <HEAD> </SCRIPT> Sintaxis básica de Javascript <SCRIPT> variable = 45 * 3 ; Cómo trabajar con Javascript cadena = “ un contenido “; </SCRIPT> Eventos. Objetos window y document </HEAD> La página HTML se <BODY> interpreta y se muestra. Al encontrar los scripts, se Definición de matrices y objetos ... ejecutan línea por línea Ceuta 9 - 13 Julio 2007 9 Ceuta 9 - 13 Julio 2007 10 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA 2 1 3 ¿Cómo vamos a hacer los ejemplos? 4 Ceuta 9 - 13 Julio 2007 11 Ceuta 9 - 13 Julio 2007 12
  4. 4. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIASentencias en los programas Probar el primer ejemplo... La asignación de valores a variables se hace como en C++ <HTML> <BODY> Veamos cómo mostrar mensajes y valores de variables <b>esta página mostrará un mensaje en una ventana</b> y cómo realizar entradas de datos: <SCRIPT> <HTML> variable = 1; <SCRIPT> alert(“mensaje en la ventana” + variable); alert(“ un mensaje en una ventana “); </SCRIPT> Crear una página HTML. </SCRIPT> </BODY> El navegador ejecuta las La sentencia ALERT sentencias del JS y ... </HTML> muestra el mensaje. muestra una ventana Ceuta 9 - 13 Julio 2007 con el mensaje13 Ceuta 9 - 13 Julio 2007 14 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAProbar el segundo ejemplo... Índice de la presentación <HTML> Cómo trabajar con Javascript <BODY> <b>Contenido escrito directamente en la página</b> Sintaxis básica de Javascript <SCRIPT> variable = 1; Eventos. Objetos window y document document.writeln(“y escrito desde JS”); </SCRIPT> Definición de matrices y objetos Crear una página HTML. </BODY> Lo que escribamos con WRITELN aparece en el </HTML> documento. Ceuta 9 - 13 Julio 2007 15 Ceuta 9 - 13 Julio 2007 16
  5. 5. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIADefinición de funciones Funciones (variables locales) Podemos agrupar trozos de código que se vayan a usar repetidas veces Para definir variables locales a la función: en una función, para llamarla posteriormente: <HTML> <HTML> <SCRIPT> <SCRIPT> function suma3 () { function suma3 () { var numero = numero + 3; numero = numero + 3; } En este ejemplo estamos } definiendo una variable que En este ejemplo estamos sólo existe dentro del suma3(); suma3(); usando una variable global cuerpo de la función </SCRIPT> </SCRIPT> Ceuta 9 - 13 Julio 2007 17 Ceuta 9 - 13 Julio 2007 18 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIASentencias en los programas Sentencias en los programas Recordemos cómo mostrar mensajes y valores de variables Entradas de datos se suelen hacer en elementos de formulario o con: y veamos cómo realizar entradas de datos: <HTML> <SCRIPT> <HTML> dato = prompt(“Dame el dato:“); <SCRIPT> alert( “has tecleado: “ + dato ); alert(“ un mensaje en una ventana “); </SCRIPT> </SCRIPT> ... La sentencia PROMPT ... ... pide un dato por teclado. La sentencia ALERT La sentencia ALERT lo muestra una ventana muestra en una ventana. con el mensaje Ceuta 9 - 13 Julio 2007 19 Ceuta 9 - 13 Julio 2007 20
  6. 6. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjercicio: Sentencias en los programas Hacer una página web que incluya un programa Para escribir en el documento, usaremos WRITELN: en Javascript que pida los datos personales <BODY> y luego los muestre concatenados <SCRIPT> document.writeln(“ algo que aparece “); document.writeln(“ en el documento “); </SCRIPT> ... Lo que escribamos en el documento aparecerá como si lo hubiésemos escrito al crear la página HTML Ceuta 9 - 13 Julio 2007 21 Ceuta 9 - 13 Julio 2007 22 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: prompt + alert Ejemplo: status <HTML> <HTML> <BODY> <BODY> La página de Un ejemplo que cambia la barra de estado <SCRIPT> <SCRIPT> nombre = prompt(“Cómo te llamas? “); nombre = prompt(“Cómo te llamas? “); alert( “Hola, “ + nombre ); window.status= nombre ; document.write(nombre); </SCRIPT> </SCRIPT> </BODY> </BODY> </HTML> </HTML> Ceuta 9 - 13 Julio 2007 23 Ceuta 9 - 13 Julio 2007 24
  7. 7. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEstructuras de control condicionales Estructuras de control iterativas if (condicion) { switch (variable) { while (condicion) { sentencias_true case valor: { sentencias; }else{ sentencias; } sentencias-else break; } for(inic;condic;increm){ } case otrovalor: { sentencias; sentencias; do { } break; } sentencias; default: sentencias; }while ( condicion ); } Ceuta 9 - 13 Julio 2007 25 Ceuta 9 - 13 Julio 2007 26 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: crear una tabla con javascript Ejercicio: <SCRIPT> Hacer una página web que incluya un programa filas = 7; en Javascript que pida los nombres de cinco Colum = 7; personas y después los imprima en el mismo documento. for (i=0; i<filas; i++ ) { document.writeln("<TR>"); for (j=0; j<colum; j++ ) { document.writeln( "<TD>["+i+","+j+"]</TD>" ); } document.writeln( "</TR>" ); } </SCRIPT> Ceuta 9 - 13 Julio 2007 27 Ceuta 9 - 13 Julio 2007 28
  8. 8. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAÍndice de la presentación Eventos en Javascript Cómo trabajar con Javascript Un evento es algo que puede ocurrir mientras se ejecuta un programa Sintaxis básica de Javascript • Mover el ratón • Pulsar una tecla Eventos. • etc. Objetos window y document Queremos ejecutar ciertas acciones cuando suceda uno de esos eventos Definición de matrices y objetos Ceuta 9 - 13 Julio 2007 29 Ceuta 9 - 13 Julio 2007 30 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEventos en Javascript Ejemplo: onMouseOver Para asociar un evento a un elemento de la página HTML : <SCRIPT> function gracias() { alert( "parece que el ejemplo funciona" ); <ETIQUETA atributo=valor onEvento=“programaJS;”> } Cuando suceda ese evento al elemento, se ejecuta un programa </SCRIPT> Entre comillas dobles podemos llamar a una función Javascript o poner varias instrucciones directamente <A HREF="http://www.ugr.es" onMouseOver="gracias();"> pasa el cursor por encima de este enlace</A> Debemos conocer los eventos que pueden asociarse a cada elemento Ceuta 9 - 13 Julio 2007 31 Ceuta 9 - 13 Julio 2007 32
  9. 9. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: status Tabla de eventos asociados a etiquetas Eventos Objetos que los soportan <HTML> abort image blur window,frame, elementos de form <BODY> click button,radio,checkbox,submit,reset,link Al pasar por el enlace la barra de estado cambia Change text,textarea,select load body focus window,frame,elementos de form <A href="http://www.google.es" error image,window onMouseOver="window.status=‘mensaje en la barra;”> mouseout area,link mouseover link el enlace...</A> reset form select text,textarea </BODY> submit submit unload body </HTML> Ceuta 9 - 13 Julio 2007 33 Ceuta 9 - 13 Julio 2007 34 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: onMouseOver / OnMouseOut Ejemplo: onLoad / onUnload <SCRIPT> <HTML> function entrada() { <BODY> alert("acabas de llegar a mi web"); <a href="http://www.google.com" } function salida() { onClick="alert(Has pulsado el enlace);" alert("¿tan pronto quieres irte?"); onMouseOver="alert(encima del enlace);" } onMouseOut="alert(fuera del enlace);"> </SCRIPT> acerca el cursor a este enlace</a> <BODY onLoad="entrada();" </BODY> onUnLoad="salida();"> </HTML> la web que saluda al entrar y te pide que no te vayas. Ceuta 9 - 13 Julio 2007 35 Ceuta 9 - 13 Julio 2007 36
  10. 10. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAÍndice de la presentación Objetos window y document Sintaxis básica de Javascript Para cada página HTML, el navegador define un objeto window y un document para usarlos con Javascript Eventos. A partir del window podemos acceder a ciertas propiedades de la Objetos window y document ventana en la que vemos la página Definición de matrices y objetos A partir del document podemos acceder a todos los elementos de la página HTML que estamos viendo Ejemplos avanzados Ceuta 9 - 13 Julio 2007 37 Ceuta 9 - 13 Julio 2007 38 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAObjetos window y document Ejemplo: abrir y cerrar ventanas A partir del objeto window podemos abrir una nueva ventana para ver <SCRIPT> var nueva; una nueva página en ella: function abrir() { nueva = window.open("http://www.google.com", "abierta", "toolbar=yes,location=yes,menubar=yes,resizable=yes" ); variable = window.open(“URL”,”nombre”,”propiedades”); } function cerrar() { nueva.close(); } Para cerrarla, usamos la variable creada: </SCRIPT> <a href="" variable.close(); onClick="abrir(); return false;"> abre una ventana </a> <a href="" Ceuta 9 - 13 Julio 2007 39 Ceuta 9 onClick="cerrar(); return false;"> cierrala</a> - 13 Julio 2007 40
  11. 11. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjercicio: El objeto history El navegador guarda un historial de las páginas visitadas. Hacer una página web que incluya un programa Normalmente usamos los botones de la barra de herramientas. en Javascript que abre una ventana nueva y muestra un texto de ayuda (una página nueva). Desde Javascript podemos obtener el mismo resultado con el objeto history Ceuta 9 - 13 Julio 2007 41 Ceuta 9 - 13 Julio 2007 42 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: history Manejo de imágenes desde Javascriptcon history.back() retrocedemos una página en el historial visitado A partir del objeto document podemos acceder a las imágenes de lacon history.back(-2) retrocedemos dos páginas en el historial visitado : página y cambiarlas <HTML> <BODY> Existe un array de imágenes dentro de document : <FORM> <input type="button" value="Atras" document.images[‘cabecera’].src onClick="history.back();"> Eso sería el nombre <input type="button" value="2 Atras" de una imagen onClick="history.go(-2);"> Si asignamos un nuevo fichero, la imagen definida en la página </FORM> </BODY> </HTML> cambia automáticamente Ceuta 9 - 13 Julio 2007 43 Ceuta 9 - 13 Julio 2007 44
  12. 12. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: imágenes Ejercicio: Hacer una página web que muestra un menú hecho <HTML> <BODY> a base de imágenes. <A HREF="" onMouseOver="document.images[prueba].src=uno.gif;" Hacer la programación Javascript para que cuando pase el ratón onMouseOut="document.images[prueba].src=dos.gif;" sobre alguna de las imágenes (opciones) cambie la imagen onClick="return false;"> cambiar la imagen</a> y se vea resaltada. <p> <IMG SRC="dos.gif" NAME="prueba"> </BODY> </HTML> Es importante ponerle un nombre a la imagen para acceder después Ceuta 9 - 13 Julio 2007 45 Ceuta 9 - 13 Julio 2007 46 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAManejo de los elementos de formulario Manejo de los elementos de formulario Podemos controlar los elementos de formulario desde Javascript: Igual que accedemos a las imágenes, podemos acceder a los elementos de formulario • Comprobar si un elemento tiene valor o está vacío document.nombreFormulario.nombreElemento.value • Asignar valores a los campos de formulario en función de eventos Accedemos al valor de uno de los elementos del formulario definido • Comprobar el formato del dato que contiene un elemento Sin teclear nada, podemos cambiar el contenido del elemento desde Javascript Ceuta 9 - 13 Julio 2007 47 Ceuta 9 - 13 Julio 2007 48
  13. 13. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: elementos de formulario Ejercicio: <HTML><BODY> Hacer una página web que muestre un formulario <a href="" con tres elementos de texto (nombre, teléfono y dirección). onMouseOver="document.formu.caja.value=hola;" onClick="return false;"> un mensaje en la caja de texto </a> Hacer la programación Javascript para que cuando <a href="" onMouseOver="document.formu.caja.value=adios;" se pulse el botón de enviar, se compruebe que cada elemento onClick="return false;"> otro mensaje en la caja </a> tiene un valor (no está vacío). <FORM NAME="formu"> <INPUT TYPE="text" NAME="caja" SIZE="40" VALUE=""> ay </FORM> ud a… </BODY></HTML> Ceuta 9 - 13 Julio 2007 49 Ceuta 9 - 13 Julio 2007 50 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjercicio (ayuda) Uso de temporizadores </SCRIPT> function validar( formulario ) { En ocasiones querremos planificar cierta acción para un tiempo futuro if (formulario.campo.value == ) { alert(“campo vacio”); return false; Para eso utilizaremos un temporizador: } else { return true; } } setTimeout( “sentenciasJS;“ , milisegundos ); </SCRIPT> clearTimeout(variable) <form name=“miform" action=“pagina.htm" onSubmit="return validar(this);"> También podremos hacer que una acción se repita indefinidamente <input type="text" name=“campo" VALUE=""> cada cierto número de segundos <input type="submit" value="Enviar" name="enviar"> Ceuta 9 - 13 Julio 2007 </form> 51 Ceuta 9 - 13 Julio 2007 52
  14. 14. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: temporizador Ejercicio: <HTML> <HEAD> Hacer una página web que muestra dos enlaces. Al pulsar el primero debe aparecer inmediatamente una <SCRIPT> function mensaje() { ventana mostrando un mensaje. setTimeout("alert(‘Salgo a los 2 segundos);",2000); } Al pulsar el segundo debe aparecer, dos segundos después, </SCRIPT> una ventana mostrando otro mensaje. </HEAD> <BODY onLoad="mensaje();"> Página con un temporizador. </BODY> </HTML> El evento onLoad se activa cuando se carga la página HTML Ceuta 9 - 13 Julio 2007 53 Ceuta 9 - 13 Julio 2007 54 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAÍndice de la presentación Uso de matrices en Javascript Eventos. Para crear programas complejos necesitamos el tipo de dato MATRIZ Objetos window y document En Javascript son dinámicas. Se crean con new Array Definición de matrices y objetos var matriz = new Array( 5 ); matriz[0] = 45; Ejemplos avanzados matriz[1] = 3 + 4; matriz[2] = matriz[0] + matriz[1]; Ceuta 9 - 13 Julio 2007 55 Ceuta 9 - 13 Julio 2007 56
  15. 15. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAUso de matrices en Javascript Ejercicio: Podemos crearlas y asignarles valor directamente. Para calcular el Hacer una página web que incluye un programa Javascript tamaño podemos usar la propiedad length que pide siete nombres, los va guardando en un array y posteriormente los muestre concatenados usando var matriz = new Array( “cadena”,23,45,”juan” ); un “alert”. for(i=0; i< matriz.length ; i++){ alert( “elemento “+ i +”=“+ matriz[i] ); } Ceuta 9 - 13 Julio 2007 57 Ceuta 9 - 13 Julio 2007 58 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAÍndice de la presentación Creación de objetos en Javascript Objetos window y document Para crear un objeto y asignarle propiedades, debemos hacer una función constructor Definición de matrices De esta forma encapsulamos varias propiedades de un mismo objeto. Definición de objetos Para crear en el programa una instancia del objeto, usamos new Ejemplos avanzados Se pueden añadir funciones miembro a un objeto, y posteriormente acceder a sus propiedades o a sus funciones miembro Ceuta 9 - 13 Julio 2007 59 Ceuta 9 - 13 Julio 2007 60
  16. 16. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo de uso de objetos Índice de la presentación function amigo( nombre , tlf ){ Objetos window y document this.nombre = nombre; this.tlf = tlf; Definición de matrices y objetos } Ejemplos avanzados var amigo1 = new amigo(“juan”,956453412); var amigo2 = new amigo(“pepe”,666777888); alert( amigo1.nombre ); Ceuta 9 - 13 Julio 2007 61 Ceuta 9 - 13 Julio 2007 62 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplos avanzados Cómo calcular la hora y fecha Fecha y hora Podemos calcular la hora y fecha con: new Date() Días hasta un cumpleaños podemos asignarlo a una variable que después nos dará hora, minutos, Reloj segundos, mes, día y año: d.getDate() d.getMonth() d.getFullYear() Cronómetro d.getHours() d.getMinutes() d.getSeconds() Uso de ficheros para guardar los programas Javascript Ceuta 9 - 13 Julio 2007 63 Ceuta 9 - 13 Julio 2007 64
  17. 17. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: fecha y hora Ejemplo: Cumpleaños <SCRIPT LANGUAGE="JavaScript"> <SCRIPT LANGUAGE="JavaScript"> var d = new Date(); var now=new Date(); var cumple=new Date("2007, 09, 23"); Eso da el número fecha = d.getDate() + "/"; de milisegundos fecha += (d.getMonth()+1) + "/“; var dif= cumple.getTime() - now.getTime(); fecha += d.getFullYear(); dif = Math.floor(dif/(1000*60*60*24)) + 1; hora = d.getHours() + ":"; if( dif == 0 ){ hora += d.getMinutes() + ":"; document.write(" Hoy es mi cumpleaños "); hora += d.getSeconds(); }else{ document.write(" Aún faltan "+ dif +" dias "); document.write( " Fecha: " + fecha + " ); } document.write( " Hora: " + hora + ); </SCRIPT> Ceuta 9 - 13 Julio 2007 </SCRIPT> 65 Ceuta 9 - 13 Julio 2007 66 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA var h_ini;Ejemplo: reloj var crono; Ejemplo: cronómetro (primera parte) function crono_start() { <HTML><HEAD> h_ini=new Date(); <SCRIPT> crono_cuenta(); function hora() { } var h=new Date(); function crono_pon() { document.f1.hora.value = h.getHours()+":"; var h_act=new Date(); document.f1.hora.value += h.getMinutes()+":"; milisec=(h_act-h_ini); document.f1.hora.value += h.getSeconds(); h_crono=Math.floor( milisec/3600000 ) % 24; setTimeout( "hora();" , 1000 ); m_crono=Math.floor( milisec/60000 ) % 60; } Usamos un TIMER s_crono=Math.floor( milisec/1000 ) % 60; </SCRIPT> para llamar la función milisec=milisec%1000; </HEAD> cada segundo document.f1.crono.value=h_crono+":"+m_crono+":"+s_crono+"."+milisec; <BODY> } <FORM name="f1"> function crono_cuenta() { Hora: <INPUT TYPE="text" NAME="hora" SIZE="8"> crono_pon(); </FORM> crono=setTimeout( "crono_cuenta();",53 ); <SCRIPT>hora()</SCRIPT> Ceuta 9 - 13 Julio 2007 67 } Ceuta 9 - 13 Julio 2007 68 </BODY></HTML>
  18. 18. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjemplo: cronómetro (segunda parte) Ejemplo: fichero externofunction crono_stop() { clearTimeout( crono ); <HTML>} <HEAD>function crono_reset() { h_ini=new Date(); <SCRIPT SRC="http://servidor.com/directorio/fichero.js“> </SCRIPT> crono_pon();} </HEAD> <BODY> <SCRIPT> funcion() </SCRIPT><FORM name="f1"> Crono: <INPUT TYPE="text" NAME="crono" SIZE="12" VALUE="00:00:00.000"> </BODY> <INPUT TYPE="button" VALUE="Start" onClick="crono_start();"> </HTML> <INPUT TYPE="button" VALUE="Stop" onClick="crono_stop();"> <INPUT TYPE="button" VALUE="Reset" onClick="crono_reset();"></FORM> Ceuta 9 - 13 Julio 2007 69 Ceuta 9 - 13 Julio 2007 70 DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIAEjercicio: Ejercicio final: Modificar el ejemplo del cronómetro para poner las funciones Haz una página web que incluya una calculadora Javascript en un fichero externo a la página web. programada en Javascript. Puedes hacer una tabla que represente las teclas, y la pantalla puede ser un elemento de formulario. Incluye las funciones que creas oportunas (suma, resta, mutiplicación, división…) Ceuta 9 - 13 Julio 2007 71 Ceuta 9 - 13 Julio 2007 72
  19. 19. DISEÑO DE PÁGINAS WEB CON CONTENIDOS MULTIMEDIA ¡eso es todo! Pedro A. Castillo Valdivieso Universidad de GranadaCeuta 9 - 13 Julio 2007 73

×