Date JavaScript - Trabalhando com data e hora em JS
Veja neste artigo quais são e como utilizar os métodos disponíveis no JavaScript para lidar com datas e horários em páginas web.
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.
Relacionado: Curso completo de JavaScript
<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>
Figura 1. Como ficaria a data bruta
Explicando o código:
now = new DateEssa 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>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.
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>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>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étodo | Descrição | Valores retornados |
| getDate() | O dia do mês | 1 a 31 |
| getUTCDate() | ||
| getDay() | O valor inteiro do dia da semana | 0 a 6 |
| getUTCDay() | ||
| getFullYear() | O ano com quatro dígitos | 1900 em diante |
| getUTCFullYear | ||
| getHours() | A hora do dia | 0 a 23 |
| getUTCHours() | ||
| getMilliseconds() | O número de milissegundos desde o último segundo | 0 a 999 |
| getUTCMilliseconds() | ||
| getMinutes() | O número de minutos desde a última hora | 0 a 59 |
| getUTCMinutes() | ||
| getMonth() | O mês do ano | 0 a 11 |
| getUTCMonth() | ||
| getSeconds() | O número de segundos desde o último minuto | 0 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 minutos | 0 a 1439 |
| getYear() | O ano da data | 0 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 31 | Data 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 23 | Data em milissegundos |
| setUTCHours() | ||
| setMilliseconds() | Define os milissegundos, dado um número | Data em milissegundos |
| setUTCMilliseconds() | Data em milissegundos | |
| setMinutes() | Define os minutos, dado um número entre 0 e 59 | Data 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 59 | Data em milissegundos |
| setUTCSeconds() | ||
| setTime() | Define uma data, dado um número de milissegundos desde janeiro de 1970 | Data em milissegundos |
| setYear() | Define o ano, dado um número de dois ou quatro dígitos | Data em milissegundos |
| toGMTString() | A data e hora GMT em formato de string | Day dd mmm yyyy, hh:mm:ss GMT |
| toUTCString() | ||
| TolocaleString() | A data e hora local em formato de string | Varia de acordo com o SO, localidade e navegador |
| toString() | A data e hora local em formato de string | Varia 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 1970 | Data em milissegundos |
| valueOf() | Número de milissegundos desde a meia noite de 1º de janeiro de 1970 | Data 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.
Artigos relacionados
-
Artigo
-
Artigo
-
Artigo
-
Artigo
-
Artigo