Operando com Datas em JavaScript: aprenda como trabalhar com datas e realizar operações de tempo no JavaScript.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Nesta aula, eu quero te ensinar como fazer operações com datas no JavaScript, para que você consiga realizar seus projetos operando com datas em JavaScript.
Para te ensinar tudo que é necessário para trabalhar com datas e horas no JavaScript, iremos desenvolver ao longo dessa aula um contador para o Ano Novo.
Dessa forma, você aprenderá a operar com datas no JavaScript, calculando e manipulando informações como dias, horas, minutos e segundos.
Para começar, iremos criar nosso arquivo JavaScript e dentro dele iremos definir o objeto agora a partir da classe Date.
const agora = new Date();Para visualizarmos esse objeto, podemos adicionar o comando console.log.
const agora = new Date();
console.log(agora);No terminal do editor de códigos, vamos executar node ./date.js.
Observação.: É importante ter o Node instalado em seu computador. Caso não tenha, confira essa aula aqui.
No meu caso, o nome do arquivo é date.js. Caso o seu tenha outro nome, ajuste o comando com o nome do seu arquivo.
Para melhorar a visualização, podemos utilizar o Debug Console.
Com esse objeto, conseguimos visualizar as informações do momento atual: domingo (Sun), dezembro (Dec), dia 17 de 2023, às 23 horas, 38 minutos, 55 segundos, no fuso horário GMT -03, que é o horário padrão de Brasília.
Ou seja, utilizando a classe Date, conseguimos manipular informações de data, utilizando diversas funcionalidades de forma prática e fácil.
Nesse exemplo, criamos uma data referente ao momento atual. No entanto, podemos utilizar essa classe para criar um objeto para outra data desejada, como, por exemplo, a data do ano novo.
const agora = new Date();
const anoNovo = new Date('01 01 2024');
console.log(agora);
console.log(anoNovo);
Temos, então, nosso segundo objeto de data criado com as informações referentes ao primeiro dia de janeiro de 2024, de acordo com o argumento fornecido.
Dessa forma, se não passarmos nenhum argumento para a classe Date(), ela irá gerar um objeto com a data atual. No entanto, podemos definir a data e a hora dentro dela quando quisermos gerar um objeto para uma data específica.
A partir dos objetos de data criados, podemos extrair informações específicas contidas neles, como dia, mês, ano e hora. Para isso, podemos utilizar alguns métodos.
Para obter o dia, utilizamos o método getDate():
const agora = new Date();
console.log(agora.getDate());
Para obter o ano, podemos usar o método getFullYear():
const agora = new Date();
console.log(agora.getFullYear());
As horas podem ser obtidas através do getHours():
Observe que apenas as horas foram retornadas; não tivemos nem os minutos, nem os segundos. Podemos obter as informações fracionadas de acordo com a necessidade do projeto.
Da mesma forma que utilizamos esses métodos, poderíamos fazer de forma semelhante para obter o mês, os minutos, os segundos e assim por diante.
O computador calcula o tempo contando quanto tempo já passou a partir de uma data específica, chamada de Epoch, em português seria “época”. Essa data inicial corresponde ao dia primeiro de janeiro de 1970, às 0 horas, 0 minutos e 0 segundos.
Isso significa que quando o computador se refere a uma data, na verdade, o que ele tem ali são quantos milissegundos passaram desde a Epoch.
Então, quando o computador nos informa uma data, está calculando quantos milissegundos passaram desde a data da Epoch e convertendo esse valor para uma representação de data e hora compreensível.
Por exemplo, se utilizarmos o método getTime, vamos obter quantos milissegundos se passaram desde a Epoch até o momento presente.
console.log(agora.getTime());
A partir desse controle de datas, é que vamos desenvolver nosso contador, nossa contagem regressiva para o Ano Novo. Podemos calcular isso da seguinte forma:
const agora = new Date();
const anoNovo = new Date('01 01 2024');
const tempoRestante = anoNovo.getTime() - agora.getTime();
console.log(tempoRestante);
Ou seja, entre o dia primeiro de janeiro de 2024, e a data e hora atual (17 de dezembro), temos 1210276366 milissegundos.
No entanto, essa não é uma forma intuitiva e clara para calcularmos o tempo restante do nosso contador. Para melhorar essa visualização, vamos construir nosso contador.
Vamos definir a função contagemAnoNovo. Ela irá informar a contagem de tempo para o Ano Novo de forma mais intuitiva e clara.
Para calcular os dias restantes até o ano novo, precisamos converter, primeiro, os milissegundos em dias.
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = tempoRestante / (1000 * 60 * 60 * 24)
console.log(diasRestantes);
}Para calcular os dias, estamos pegando o tempoRestante que está em milissegundos e dividindo-o pelo resultado da expressão 1000 * 60 * 60 * 24.
Esse cálculo considera todas as etapas de conversão: 1000 (converte de milissegundos para segundos), 60 (de segundos para minutos), 60 (de minutos para horas) e, por fim, 24 (de horas para dias).
Se chamarmos essa função, o resultado obtido será:
contagemAnoNovo();
Ou seja, faltam 14 dias mais 0.00441150462963 dias. Isso ocorre porque não faltam 14 dias exatos até o ano novo. Temos ainda horas, minutos e segundos que separam a data atual do dia primeiro de janeiro de 2024.
Para pegarmos apenas os dias inteiros, desconsiderando esse valor após a vírgula, podemos utilizar a função Math.floor, que arredonda para baixo um número decimal para o número inteiro mais próximo. Ou seja, irá arredondar para 14.
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24));
console.log(diasRestantes);
}
contagemAnoNovo();
Com isso, teremos os dias restantes. No entanto, precisamos calcular as demais informações, como as horas restantes.
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24))
const horasRestantes = Math.floor((tempoRestante – diasRestantes * 1000 * 60 * 60 * 24) / (1000 * 60 * 60));
console.log(diasRestantes);
console.log(horasRestantes);
}
contagemAnoNovo();Dessa forma, estamos subtraindo do tempoRestante a quantidade de dias restantes convertida novamente para milissegundos (ou seja, os 14 dias como milissegundos).
Em seguida, convertemos o valor dessa diferença para horas utilizando a mesma lógica anterior, mas dessa vez sem usar o * 24 que convertia para dias.
E, por fim, englobamos tudo dentro da função Math.floor para arredondar as horas para baixo. Chamando essa função novamente, teremos como resultado:
Ou seja, temos o valor de 13 para 13 dias e 23 para 23 horas. Isso ocorre porque, como calculamos com o tempo real, conforme a aula vai passando, o contador vai modificando também. Então, neste momento, não faltam mais 14 dias, mas sim 13 dias e 23 horas.
Vamos ter de replicar essa mesma lógica para os minutos restantes e os segundos restantes. Dessa forma, nossa função ficará assim:
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24))
const horasRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24) / (1000 * 60 * 60))
const minRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60) / (1000 * 60))
const segRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60 - minRestantes * 1000 * 60) / 1000);
console.log(diasRestantes);
console.log(horasRestantes);
console.log(minRestantes);
console.log(segRestantes);
}
contagemAnoNovo();
Dessa forma, temos os dias, horas, minutos e segundos restantes até o dia primeiro de janeiro de 2024.
Para melhorarmos essa exibição, podemos definir ao final um console.log com a seguinte mensagem:
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24))
const horasRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24) / (1000 * 60 * 60))
const minRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60) / (1000 * 60))
const segRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60 - minRestantes * 1000 * 60) / 1000);
console.log(diasRestantes);
console.log(horasRestantes);
console.log(minRestantes);
console.log(segRestantes);
console.log(`tempo até o ano novo: ${diasRestantes} dias e ${horasRestantes}:${minRestantes}:${segRestantes}`);
}
contagemAnoNovo();
Nosso contador já está calculando os tempos corretamente. Porém, quando o valor chegar a um número de apenas 1 dígito, ao invés de exibir como, por exemplo, “09“, ele exibirá como “9“.
Para corrigirmos isso e exibirmos os valores de forma adequada, vamos adicionar à mensagem final operadores ternários que irão verificar se os valores são menores do que 10. Caso sejam, adicionaremos o número 0, como texto, antes; caso contrário, não faremos nada.
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24))
const horasRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24) / (1000 * 60 * 60))
const minRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60) / (1000 * 60))
const segRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60 - minRestantes * 1000 * 60) / 1000);
console.log(diasRestantes);
console.log(horasRestantes);
console.log(minRestantes);
console.log(segRestantes);
console.log(`tempo até o ano novo: ${diasRestantes} dias e ${horasRestantes < 10 ? '0' + horasRestantes : horasRestantes}:${minRestantes < 10 ? '0' + minRestantes : minRestantes}:${segRestantes < 10 ? '0' + segRestantes : segRestantes}`);
}
contagemAnoNovo();
Temos o nosso contador sendo exibido e formatado corretamente como gostaríamos.
Para finalizar nosso contador de tempo até o ano novo, podemos adicionar uma estrutura condicional IF para verificar quando o contador finalizar.
Para isso, podemos verificar se (if) o tempoRestante é maior do que 0. Caso seja, significa que ainda falta algum tempo para o ano novo, e nosso contador será exibido.
Caso contrário (else), vamos exibir uma mensagem de feliz ano novo..
Podemos remover também os console.log anteriores que exibiam individualmente cada valor de tempo, deixando nosso código final assim:
function contagemAnoNovo() {
const agora = new Date();
const anoNovo = new Date(' 01 01 2024')
const tempoRestante = anoNovo.getTime() - agora.getTime();
const diasRestantes = Math.floor(tempoRestante / (1000 * 60 * 60 * 24))
const horasRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24) / (1000 * 60 * 60))
const minRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60) / (1000 * 60))
const segRestantes = Math.floor((tempoRestante - diasRestantes * 1000 * 60 * 60 * 24 - horasRestantes * 1000 * 60 * 60 - minRestantes * 1000 * 60) / 1000);
if (tempoRestante > 0){
console.log(`tempo até o ano novo: ${diasRestantes} dias e ${horasRestantes < 10 ? '0' + horasRestantes : horasRestantes}:${minRestantes < 10 ? '0' + minRestantes : minRestantes}:${segRestantes < 10 ? '0' + segRestantes : segRestantes}`);
}
else {
console.log('Um feliz 2024 pra você em nome da Hashtag Treinamentos e da Hashtag Programação!');
}
}
contagemAnoNovo();Nessa aula, eu te ensinei como fazer operações com datas no JavaScript! E através dessa manipulação de tempo e datas, construímos juntos um contador para o Ano Novo.
Além de aprender como lidar com operações de datas no JavaScript, você também pode revisar e colocar em prática conhecimentos de aulas passadas para esse projeto.
Continue praticando e estudando JavaScript. Um Feliz Ano Novo!
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador