You are on page 1of 7

Aprendemos a crear un reloj sencillo mediante Javascript y le aplicamos algunas mejoras.

Por Miguel Angel Alvarez Vamos a ver un taller prctico sobre Javascript con el cual podremos incluir un reloj en nuestra pgina web. Es un sencillo script, que podremos colocar con tan slo cortar y pegar, aunque procuraremos explicarlo un poco para los que estn en condiciones de entender Javascript.

Para empezar, vamos a ver el relojito que pretendemos crear:

Es un reloj muy sencillito de manera intencionada, para que podamos entender bien el ejercicio. Luego lo complicaremos un poco ms para darle algo de vistosidad.

Construir el formulario

Empezamos por colocar el campo de texto donde se mostrar el reloj. Debemos colocar un pequeo formulario donde tan solo tendremos un campo de texto.

<form name="form_reloj"> <input type="text" name="reloj" size="10"> </form>

No debera haber ningn problema en estas lneas de HTML. Slo colocamos las etiquetas de inicio y final del formulario y dentro un campo de texto. Tanto al formulario como al campo de texto les asignamos un nombre para luego accederlos por ese nombre mediante Javascript.

Funcin para actualizar el valor del reloj

Tenemos que construir una funcin que recoja la hora del sistema y la muestre en el campo de texto.

Para tomar la hora vamos a hacer uso del objeto Date de Javascript.

momentoActual = new Date()

Si creamos una nueva instancia del objeto Date sin pasarle parmetros se inicializa a la fecha y hora actuales.

Luego tenemos que obtener de esa instancia de Date lo que nos interesa, que es la hora, los minutos y segundos. Esto lo hacemos utilizando los correspondientes mtodos del objeto Date.

hora = momentoActual.getHours() minuto = momentoActual.getMinutes() segundo = momentoActual.getSeconds()

Ahora combinamos los resultados para construir la hora con el formato que deseamos.

horaImprimible = hora + " : " + minuto + " : " + segundo

Por ltimo colocamos en el campo de texto del formulario el valor actual de la hora.

document.form_reloj.reloj.value = horaImprimible

Por ahora la funcin queda de esta manera:

function mueveReloj(){ momentoActual = new Date() hora = momentoActual.getHours() minuto = momentoActual.getMinutes() segundo = momentoActual.getSeconds()

horaImprimible = hora + " : " + minuto + " : " + segundo

document.form_reloj.reloj.value = horaImprimible }

La funcin debe llamarse a si misma

Con estas lneas de cdigo obtenemos la hora y la actualizamos en su campo de texto, pero no est hecho todo, necesitamos que esa funcin se llame constantemente y cada segundo para que actualice el valor de

nuestro campo de texto constantemente tambin.

Para ello, lo mejor es que la funcin se encargue tambin de llamarse a si misma al cabo de un segundo, as volver a hacer todo el proceso de obtencin y actualizacin de la hora y por ltimo se llamar a si misma al cabo de un segundo. Este proceso se repetir por siempre hasta que nos salgamos de la pgina.

La lnea de cdigo para llamarse a si misma, que colocaremos en la ltima lnea de la funcin es la siguiente:

setTimeout("mueveReloj()",1000)

La funcin setTimeout sirve para hacer el retardo antes de ejecutar la sentencia. La sentencia es una simple llamada a la funcin y el retardo es de 1000 milisegundos (un segundo).

Poner en marcha el reloj

Finalmente necesitamos poner el reloj en marcha. Esto lo podemos hacer una vez acabada la carga de la pgina con el manejador de eventos onload, que se coloca en el <body>.

<body onload="mueveReloj()">

Esto quiere decir que cuando se termine de cargar la pgina se llame a la funcin mueveReloj(), que se encargar de mover el reloj y llamarse a si misma para hacer el proceso de manera continuada.

Cdigo entero

El cdigo de la pgina queda de esta manera:

<html> <head> <title>Reloj con Javascript</title> <script language="JavaScript"> function mueveReloj(){ momentoActual = new Date() hora = momentoActual.getHours() minuto = momentoActual.getMinutes()

segundo = momentoActual.getSeconds()

horaImprimible = hora + " : " + minuto + " : " + segundo

document.form_reloj.reloj.value = horaImprimible

setTimeout("mueveReloj()",1000) } </script> </head>

<body onload="mueveReloj()">

Vemos aqu el reloj funcionando...

<form name="form_reloj"> <input type="text" name="reloj" size="10"> </form>

</body> </html>

Aadidos al reloj

Podemos hacer muchas cosas para mejorar aspectos de este reloj. Por ejemplo darle un poco de estilo al campo de texto o hacer que nadie se pueda posar encima del campo de texto para actualizar manualmente el valor de la hora. Vamos a ver alguna cosilla.

Estilo al reloj

Con hojas de estilo podemos cambiar la apariencia del reloj para hacerlo un poco ms especial. Este es un ejemplo de lo que se podra poner.

<input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;">

Evitar que accedan al campo de texto

As nadie podr modificar el texto del reloj manualmente. Lo conseguimos con Javascript. El manejador de eventos onfocus se activa cuando el campo de texto adquiere el foco de la aplicacin. En ese momento nosotros sacaremos el foco de la aplicacin con el mtodo blur(). El botn quedara as:

<input type="text" name="reloj" size="10" onfocus="window.document.form_reloj.reloj.blur()">

Hacer que siempre tengamos dos digitos en la hora minutos y segundos.

Para conseguir que la hora tenga siempre un formato hh : mm : ss debemos jugar un poco con los valores de tiempo como si fueran strings. Para ello lo primero que tendremos que hacer es construir un string a partir del valor (hora, minuto o segundo) que queramos formatear. Luego observaremos ese string para saber si tenemos que aadirle un dgito al valor.

Veamos cmo obtenemos el string a partir del nmero de segundos obtenido. Lo hacemos para los segundos, la hora y los minutos sern realizados de manera similar.

str_segundo = new String (segundo)

Seguidamente observamos si tenemos un solo carcter en el string, porque si es as le tenemos que concatenar un cero ("0") al principio.

if (str_segundo.length == 1) segundo = "0" + segundo

Todo junto

Veamos otra vez nuestro ejemplo en una sola pieza para ver cmo quedan todas estas mejoras.

<html> <head> <title>Reloj con Javascript</title> <script language="JavaScript"> function mueveReloj(){

momentoActual = new Date() hora = momentoActual.getHours() minuto = momentoActual.getMinutes() segundo = momentoActual.getSeconds()

str_segundo = new String (segundo) if (str_segundo.length == 1) segundo = "0" + segundo

str_minuto = new String (minuto) if (str_minuto.length == 1) minuto = "0" + minuto

str_hora = new String (hora) if (str_hora.length == 1) hora = "0" + hora

horaImprimible = hora + " : " + minuto + " : " + segundo

document.form_reloj.reloj.value = horaImprimible

setTimeout("mueveReloj()",1000) } </script> </head>

<body onload="mueveReloj()">

Vemos aqu el reloj funcionando...

<form name="form_reloj"> <input type="text" name="reloj" size="10" style="background-color : Black; color : White; font-family : Verdana, Arial, Helvetica; font-size : 8pt; text-align : center;" onfocus="window.document.form_reloj.reloj.blur()"> </form>

</body> </html>

Este segundo reloj lo podemos ver a continuacin.