Relógio em Javascript

Aprendemos a criar um relógio simples mediante Javascript e lhe aplicamos algumas melhoras.

Vamos ver um workshop prático sobre Javascript com o qual poderemos incluir um relógio em nossa página web. É um simples script, que poderemos colocar simplesmente copiando e colando, embora procuraremos explica-lo um pouco para os que estejam em condições de entender Javascript.

Para começar, vamos ver o reloginho que pretendemos criar:

É um relógio muito simples de maneira intencionada, para que possamos entender bem o exercício. Logo, o complicamos um pouco mais para lhe dar algo mais de atração.

Construir o formulário

Começamos colocando o campo de texto onde será mostrado o relógio. Devemos colocar um pequeno formulário onde somente teremos um campo de texto.

<form name="form_relogio">
<input type="text" name="relogio" size="10">
</form>

Não deveria haver nenhum problema nessas linhas de HTML. Só colocamos as etiquetas de início e final do formulário e dentro um campo de texto. Atribuímos um nome tanto ao formulário como ao campo de texto para logo acessarmos por esse nome mediante Javascript.

Função para atualizar o valor do relógio

Temos que construir uma função que busque a hora do sistema e a mostre no campo de texto.

Para pegar a hora vamos fazer uso do objeto Date de Javascript.

momentoAtual = new Date()

Se criarmos uma nova instância do objeto Date sem lhe passar parâmetros, inicia-se à data e hora atuais.

Logo temos que obter dessa instância de Date o que nos interessa, que é a hora, os minutos e segundos. Fazemos isto utilizando os correspondentes métodos do objeto Date.

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

Agora combinamos os resultados para construir a hora com o formato que desejarmos.

horaImprimivel = hora + " : " + minuto + " : " + segundo

Por último colocamos no campo de texto dol formulário o valor atual da hora.

document.form_reloj.reloj.value = horaImprimible

Por agora a função fica desta maneira:

function moveRelogio(){
    momentoAtual = new Date()
    hora = momentoAtual.getHours()
    minuto = momentoAtual.getMinutes()
    segundo = momentoAtual.getSeconds()

    horaImprimivel = hora + " : " + minuto + " : " + segundo

    document.form_relogio.relogio.value = horaImprimivel
}

A função deve charmar a si mesma

Com estas linhas de código obtemos a hora e a atualizamos em seu campo de texto, mas ainda não terminou, necessitamos que essa função se chame constantemente e cada segundo para que atualize o valor de nosso campo de texto constantemente também.

Para isso, o melhor é que a função se encarregue também de chamar a si mesma a cada segundo, assim voltará a fazer todo o processo de obtenção e atualização da hora e por último chamará a si mesma ao final de um segundo. Este processo se repetirá sempre até sairmos da página.

A linha de código para chamar a si mesma, que colocaremos na última linha da função é a seguinte:

setTimeout("moveRelogio()",1000)

A função setTimeout serve para fazer o adiantamento antes de executar a sentença. A sentença é uma simples chamada à função e o adiantamento é de 1000 milésimos de segundos (um segundo).

Colocar o relógio em funcionamento

Finalmente necessitamos colocar o relógio em funcionamento. Isto pode ser feito uma vez terminado o carregamento da página com o administrador de eventos onload, que coloca-se no <body>.

<body onload="moveRelogio()">

Isto quer dizer que quando termine de carregar a página se chamará à função moveRelogio(), que se encarregará de mover o relógio e chamar a si mesmo para fazer o processo de maneira contínua.

Código inteiro

O código da página fica desta maneira:

<html>
<head>
<title>Relogio com Javascript</title>
<script language="JavaScript">
function moveRelogio(){
    momentoAtual = new Date()
    hora = momentoAtual.getHours()
    minuto = momentoAtual.getMinutes()
    segundo = momentoAtual.getSeconds()

    horaImprimivel = hora + " : " + minuto + " : " + segundo

    document.form_relogio.relogio.value = horaImprimivel

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

<body onload="moveRelogio()">

Vemos aqui o relógio funcionando...

<form name="form_relogio">
<input type="text" name="relogio" size="10">
</form>

</body>
</html>

Acréscimos para o relógio

Podemos fazer muitas coisas para melhorar os aspectos deste relógio. Por exemplo, dar um pouco de estilo ao campo de texto ou fazer co que ninguém possa pousar em cima do campo de texto para atualizar manualmente o valor da hora. Vamos ver alguma coisinha:

Estilo ao relógio

Com folhas de estilo podemos mudar a aparência do relógio para torná-lo um pouco mais especial. Este é um exemplo o qual poderíamos colocar.

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

Evitar que acessem ao campo de texto

Assim ninguém poderá modificar o texto do relógio manualmente. Conseguimos isso com Javascript. O administrador de eventos onfocus se ativa quando o campo de texto adquire o foco da aplicação. Nesse momento noós tiraremos o foco da aplicação com o método blur(). O botão ficaria assim:

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

Fazer com que sempre tenhamos dois dígitos na hora, minutos e segundos.

Para conseguir que a hora tenha sempre um formato hh : mm : ss devemos brincar um pouco com os valores de tempo como se fossem strings. Para isso, o primeiro que teremos que fazer é construir um string a partir do valor (hora, minuto ou segundo) que quisermos formatar. Logo, observaremos esse string para saber se temos que lhe acrescentar um dígito ao valor.

Vejamos como obtemos o string a partir do número de segundos obtido. Faremos para os segundos, logo, a hora e os minutos serão realizados de maneira similar.

str_segundo = new String (segundo)

Em seguida, observamos se temos só um caractere no string, porque se for assim, temos que concatenar um zero ("0") ao princípio.

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

Tudo junto

Vejamos outra vez nosso exemplo em uma só peça para ver como ficam todas estas melhoras:

<html>
<head>
<title>Relogio com Javascript</title>
<script language="JavaScript">
function moveRelogio(){
    momentoAtual = new Date()
    hora = momentoAtual.getHours()
    minuto = momentoAtual.getMinutes()
    segundo = momentoAtual.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_relogio.relogio.value = horaImprimivel

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

<body onload="moveRelogio()">

Vemos aqui o relógio funcionando...

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

</body>
</html>

Este segundo relógio pode ser visto a seguir:

Se desejarmos podemos abrir uma página web para visualizar: