Você conhece a função Date no Javascript?

Esse código logo abaixo, apresenta como mostrar a data atual de forma mais bruta possível. Ela é quase inutilizável, de tão bruta (simples), mas quem ainda não sabe comandar eventos de data em JavaScript, deve começar por aqui.

<html>
<head>
</head>
<body>
<script language=javascript type="text/javascript">
now = new Date
document.write ("Hoje é " + now.getDay() + ", " + now.getDate() + " de " + now.getMonth() + " de " + now.getFullYear() )
</script>
</body>
</html>
Listagem 1. Código bruto de como mostrar a data atual

data bruta
Figura 1. Como ficaria a data bruta

Explicando o código:

now = new Date

Essa primeira linha do código irá criar uma nova variável de data now com o comando new Date, que instrui o JavaScript a criar um novo objeto date e preenche-lo com a data atual.

document.write ("Hoje é " + now.getDay() + ", " + now.getDate() + " de " + now.getMonth() + " de " + now.getFullYear() )

Nessa próxima parte do código, vamos chamar o método document.write, que tem a função de escrever na tela. Dentro, nós colocaremos o código principal, responsável pela criação das datas. O que se encontra dentro de aspas, a partir de agora, será um texto; e o que estiver fora de aspas, será o tal código que deveremos estudar.

O getDay() irá mostrar o dia da semana. É preciso saber que no JavaScript, na maioria das vezes, uma contagem começa com o número zero. Então, domingo vale zero, segunda vale um, terça vale dois, e assim por diante.

O getDate(), por sua vez, equivale ao dia do mês, não tendo a mesma regra de antes de só começar em zero.

Já o getMonth() e o getFullYear(), equivalem, respectivamente, ao mês e ao ano, e o mês, como o dia da semana, começa em zero, logo, julho não é mês sete, mas mês seis.

É lógico que em um site decente, o usuário não será obrigado a saber disso, por isso, nós criaremos arrays, que são conjuntos de informações compactas.

Apresentando datas usando arrays

Nesse código, eu criarei dois arrays, um para os dias da semana, e outro para os dias dos meses.

<html>
<head>
<script language=javascript type="text/javascript">
dayName = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado")
monName = new Array ("janeiro", "fevereiro", "março", "abril", "maio", "junho", "agosto", "outubro", "novembro", "dezembro")
now = new Date
</script>
</head>
<body>
<script language=javascript type="text/javascript">
document.write ("<h1> Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ]   +  " de "  +     now.getFullYear () + ". </h1>")
</script>
</body>
</html>
Listagem 2. Usando arrays para apresentar os dias

Explicando o código:

dayName = new Array ("domingo", "segunda", "terça", "quarta", "quinta", "sexta", "sábado") 
monName = new Array ("janeiro", "fevereiro", "março", "abril", "Maio", "junho", "agosto", "outubro", "novembro", "dezembro")

Essa é a parte do código em que criamos os arrays. No primeiro array, eu dei nomes para os dias da semana. Zero agora será domingo, um será segunda, e assim por diante. Do mesmo modo com os nomes dos meses.

document.write ("<h1> Hoje é " + dayName[now.getDay() ] + ", " + now.getDate () + " de " + monName [now.getMonth() ]   +  " de "  +     now.getFullYear () + ". </h1>")

Dentro de document.write, pomos o nome da array que será utilizada, e logo depois, entre colchetes, pomos a função que retorna o índice do dia e do mês no vetor.

Resultado da apresentação de datas usando alguns arrays
Figura 2. Resultado da apresentação de datas usando alguns arrays

Trabalhando com horários

Até agora, só foi apresentado como mostrar datas. Agora, será como apresentar horários.

<html>
<head>
</head>
<body>
<script language=javascript type="text/javascript">
now = new Date
document.write ( "Agora são "  + now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds() + ":" + now.getMilliseconds() )
</script>
</body>
</html>
Listagem 3. Apresentando horários

Trabalhando com horários em tempo real

No código anterior, mostrei como apresentar horários, mas eles são fixos. Ou seja, praticamente inúteis, mas devemos aprender primeiramente do jeito mais fácil para passar ao mais difícil, que é esse, que apresenta o horário em tempo real, ou seja, que se altera conforme o tempo passa.

<html>
<head>
<script type="text/javascript">
function time()
{
today=new Date();
h=today.getHours();
m=today.getMinutes();
s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout('time()',500);
}
</script>
</head>
<body onload="time()">
<div id="txt"></div>
</body>
</html>
Listagem 4. Apresentando horário em tempo real

Explicando o código:

function time()
{
...
}

Em head, devemos criar uma função. Dentro dela, criei variáveis (h, m e s) para respectivos objetos de tempo, como minutos e segundos. Logo após criar essas variáveis, vamos ligá-las a div criada logo depois, em body.

setTimeout irá executar o código a cada 500 milésimos de segundo, ou, a cada meio segundo.

<body onload="time()">
<div id="txt"></div>

Em body, devemos especificar que a função time() deverá ser executada logo após o carregamento da página, para isso, a chamamos no evento onload. Logo abaixo, está a div que irá carregar o relógio criado.

Métodos de data

Tendo em vista que você poderá lidar frequentemente com datas, segue abaixo uma tabela com todos os métodos do objeto date. Você verá algumas referências a UTC, que significa Coordinated Universal Time, que substitui a GreenWich Mean Time (GMT) em 1986 como padrão mundial para hora.

MétodoDescriçãoValores retornados
getDate()O dia do mês1 a 31
getUTCDate()
getDay()O valor inteiro do dia da semana0 a 6
getUTCDay()
getFullYear()O ano com quatro dígitos1900 em diante
getUTCFullYear
getHours()A hora do dia0 a 23
getUTCHours()
getMilliseconds()O número de milissegundos desde o último segundo0 a 999
getUTCMilliseconds()
getMinutes()O número de minutos desde a última hora0 a 59
getUTCMinutes()
getMonth()O mês do ano0 a 11
getUTCMonth()
getSeconds()O número de segundos desde o último minuto0 a 59
getUTCSeconds()
getTime()O número de milissegundos desde a meia noite de 1º de janeiro de 1970
getTimezoneOffset()Diferença entre hora local e GMT em minutos0 a 1439
getYear()O ano da data0 a 99 para os anos de 1900 a 1999 e quatro dígitos em diante
parse()Dado um string de data/hora, retorna o número de milissegundos desde meia noite de 1º de jan. de 1970
setDate()Define o dia, dado o número entre 1 e 31Data em milissegundos
setUTCDate()Data em milissegundos
setFullYear()Data em milissegundos
setUTCFullYear()Data em milissegundos
setHours()Define a hora, dado um número entre 0 e 23Data em milissegundos
setUTCHours()
setMilliseconds()Define os milissegundos, dado um númeroData em milissegundos
setUTCMilliseconds()Data em milissegundos
setMinutes()Define os minutos, dado um número entre 0 e 59Data em milissegundos
setUTCMinutes()
setMonth()Define o mês, dado um número entre 0 e 11.Data em milissegundos
setUTCMonth()
setSeconds()Define os segundos, dado um número entre 0 e 59Data em milissegundos
setUTCSeconds()
setTime()Define uma data, dado um número de milissegundos desde janeiro de 1970Data em milissegundos
setYear()Define o ano, dado um número de dois ou quatro dígitosData em milissegundos
toGMTString()A data e hora GMT em formato de stringDay dd mmm yyyy, hh:mm:ss GMT
toUTCString()
TolocaleString()A data e hora local em formato de stringVaria de acordo com o SO, localidade e navegador
toString()A data e hora local em formato de stringVaria de acordo com o SO e o navegador
UTC()Sendo dada uma data no formato de ano, mês e dia (e horas, minutos, segundos e milissegundos opcionais), retorna o número de milissegundos desde a meia noite de 1º de jan. de 1970Data em milissegundos
valueOf()Número de milissegundos desde a meia noite de 1º de janeiro de 1970Data em milissegundos

Em verdade, essa foi uma introdução à utilização de datas e horários em páginas web usando Java Script. Usando esses objetos apresentados anteriormente, o web designer poderá fazer eventos muito mais complexos, mas esses não cabem nesse artigo, que está voltado aos iniciantes em JavaScript.

Links Úteis

Saiba mais sobre Javascript ;)

  • JavaScript Tutorial:
    Neste artigo veremos como utilizar o código javascript em nossas aplicações web e websites. Teremos uma introdução à essa maravilhosa linguagem que cada vez mais cresce no desenvolvimento web.
  • Introdução ao Javascript:
    Veja neste artigo uma breve introdução, de forma simples e prática, à linguagem de scripting Javascript, que tem se consolidado como uma das bases do desenvolvimento web.
  • JavaScript: como e quando utilizar os operadores == e ===:
    Conheça as diferenças entre os operadores == e === (e != e !==) no JavaScript e a influência que eles podem ter no seu código.