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