Por que eu devo ler este artigo:Data/hora fazem parte da nossa rotina e naturalmente est�o presentes nos c�digos que escrevemos. Por essa raz�o, � imprescind�vel para o programador saber lidar com esses elementos, sendo dominar o objeto Date o primeiro passo para isso em JavaScript. Show JavaScript permite trabalhar com data/hora nativamente atrav�s do objeto Date. JavaScript Date na pr�ticavar hoje = Date.now(); var nascimento = new Date('1989-03-19 00:00:00'); var independencia = new Date('September 7, 1822 00:00:00'); var umDia = 1000*60*60*24; var diasDesdeIndependencia = (hoje - independencia) / umDia; var umAno = 1000*60*60*24*365; var anosDesdeIndependencia = (hoje - independencia) / umAno Como funciona o objeto DateDate armazena a quantidade de milissegundos desde o in�cio do Unix Epoch (1 de janeiro de 1970 00:00:00 UTC). Por essa raz�o � poss�vel criar e apresentar data/hora em formato num�rico em JavaScript usando um inteiro longo para represent�-las. As diversas formas poss�veis de se escrever uma data/hora s�o normatizadas pela RFC 2822 e ISO 8601. SintaxeExistem muitas formas de se instanciar Date:
DicaCaso o seu c�digo dependa muito da cria��o e manipula��o de data/hora considere utilizar a biblioteca moment, que � como grandes aplica��es lidam com os problemas decorrentes desse cen�rio. Fa�a o download da biblioteca moment aqui. Exemplos de DateExemplo 1No c�digo abaixo usamos o objeto Date para obter um timestamp: new Date() > Thu Oct 10 2019 18:39:13 GMT-0300 (Hor�rio Padr�o de Bras�lia) Quando nenhum par�metro for fornecido para o construtor de Date, o resultado ser� um objeto representando a data/hora atual no fuso hor�rio local. Tamb�m podemos utilizar a seguinte forma para obter a data/hora atual: Date.now() > 1570743994427 Nesse caso, o inteiro retornado pelo m�todo now() corresponde ao timestamp em milissegundos. Exemplo 2Para obter a data atual primeiro criamos uma inst�ncia de Date e ent�o invocamos os seus m�todos. const data = new Date(); data.getDate(); > 10 data.getFullYear(); > 2019 A contagem dos dias se inicia em 0. Tr�s m�todos de Date podem n�o ser �bvios. O primeiro deles � getDay(), que n�o retorna o dia do m�s, mas sim o dia da semana. No caso acima o resultado foi 4, correspondendo a quinta-feira, porque a contagem inicia em 0. O segundo m�todo � getMonth(), que pode ser visto abaixo e retorna o m�s atual, mas a contagem inicia em 0: No caso acima o m�s � outubro. O terceiro m�todo � getYear() que retorna a soma dos anos desde 1900. No caso acima o resultado foi 119, porque o ano � 2019 (2019 - 1900 � igual a 119). Exemplo 3Detectar uma data inv�lida em JavaScript requer duas verifica��es: primeiro constatamos se o objeto � uma inst�ncia de Date e depois se o seu valor n�o � um n�mero. const data = new Date(�Thu�) data instanceof Date && !isNaN(data) > false A data � inv�lida porque quando passamos um texto para o construtor da classe Date, se espera que ele esteja num formato espec�fico, o que n�o � o caso. Na linha seguinte fazemos as duas verifica��es citadas anteriormente e, dado que a data � inv�lida, o resultado � false. Exemplo 4Podemos usar as fun��es setter de Date para manipular a data criada quando a classe foi instanciada. No exemplo a seguir adicionamos tr�s dias a uma data qualquer: const data = new Date() data.setDate(data.getDate() + 3) data.getDate() > 13 No caso acima o dia inicial era 10 e ap�s a soma se tornou 13. Caso a data fosse 31/8, ap�s somar um dia ela se tornaria 1/9. Exemplo 5Comparar duas datas � muito simples, basta usar o operador de compara��o estrita (===) e o m�todo getTime(), que retorna o n�mero de milissegundos desde 1900: const data1 = new Date(2019, 0, 1) const data2 = new Date(2019, 0, 1) data1.getTime() === data2.getTime() > true Nesse caso as datas s�o iguais. O motivo de n�o usarmos express�es como data1 == data2 ou data1 === data2 � devido ao fato de a compara��o de objetos levar em conta o endere�o de mem�ria onde eles est�o armazenados e n�o os valores das suas propriedades. Exemplo 6Calcular a diferen�a entre duas datas pode ser feito de diferentes formas. Em dias, o c�digo poderia ser esse: const data1 = new Date(2019, 0, 1) const data2 = new Date(2019, 0, 2) const umDia = 1000*60*60*24 (data2 - data1) / umDia > 1 As datas s�o 1 e 2 de janeiro e a diferen�a entre elas � 1. Para calcular em horas poder�amos fazer dessa forma: const data1 = new Date(2019, 0, 1) const data2 = new Date(2019, 0, 2) const umaHora = 1000*60*60 (data2 - data1) / umHora > 24 Podemos subtrair duas datas, porque em opera��es matem�ticas inst�ncias de Date ser�o convertidas em inteiros, dada a invoca��o do m�todo valueOf(), que nesse caso � equivalente a getTime(). Exemplo 7Caso a data/hora esteja escrita com uma m�scara, algo muito comum na programa��o web, podemos obter a quantidade de milissegundos dessa representa��o para atribuir esse n�mero ao construtor de Date, criando assim um objeto v�lido. var milissegundos = Date.parse(�2019/01/13�); var data = new Date(milissegundos); O m�todo parse() converte a representa��o em texto de uma data/hora em milissegundos, retornando um inteiro com esse valor, o qual pode ser usado em um dos construtores de Date. Isso ser� necess�rio principalmente porque o formato de data/hora que estamos acostumados a usar no Brasil n�o � compat�vel com aquele recebido no construtor de Date. Compatibilidade entre navegadoresO objeto Date � suportado por todos os browsers indicados na Tabela 1.
Tabela 1. Browsers que suportam Date Mais sobre JavaScriptConfira tamb�m
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> Listagem 1. C�digo bruto de como mostrar a data atualFigura 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.
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 diasExplicando 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
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
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 realExplicando 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.
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.
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 ;)
|