Neste laboratório, exploraremos como calcular a diferença entre duas datas em segundos usando JavaScript. Compreender como trabalhar com datas e tempo é essencial para muitas aplicações web. Criaremos uma função que recebe dois objetos Date como entrada e retorna a diferença de tempo entre eles em segundos. Esta técnica é útil para várias aplicações, incluindo medição de intervalos de tempo, cálculo de durações ou criação de temporizadores. Ao final deste laboratório, você terá uma melhor compreensão dos objetos Date do JavaScript e como realizar cálculos de tempo de forma eficiente.
Começando com Objetos Date do JavaScript
O JavaScript fornece um objeto Date embutido que nos permite trabalhar com datas e horas. Antes de calcularmos a diferença entre datas, vamos primeiro entender como criar e trabalhar com objetos Date em JavaScript.
Iniciando o Ambiente Node.js
Vamos começar abrindo o ambiente interativo Node.js:
Abra o Terminal clicando no menu Terminal na parte superior da WebIDE
Digite o seguinte comando e pressione Enter:
node
Você deve ver o prompt do Node.js (>), indicando que você está no ambiente interativo do JavaScript. Isso permite que você execute código JavaScript diretamente no terminal.
Criando Objetos Date
No JavaScript, podemos criar um novo objeto Date de várias maneiras:
// Data e hora atuais
let now = new Date();
console.log(now);
// Data e hora específicas (ano, mês [0-11], dia, hora, minuto, segundo)
let specificDate = new Date(2023, 0, 15, 10, 30, 45); // 15 de janeiro de 2023, 10:30:45
console.log(specificDate);
// Data a partir de uma string
let dateFromString = new Date("2023-01-15T10:30:45");
console.log(dateFromString);
Tente digitar cada um desses exemplos no ambiente Node.js e observe a saída.
Observe que no JavaScript, os meses são indexados a partir de zero, o que significa que janeiro é 0, fevereiro é 1 e assim por diante.
Obtendo Timestamp de Objetos Date
Cada objeto Date no JavaScript armazena internamente o tempo como o número de milissegundos que se passaram desde 1º de janeiro de 1970 (UTC). Isso é conhecido como um timestamp.
let now = new Date();
console.log(now.getTime()); // Obtém o timestamp em milissegundos
Este timestamp será útil para calcular a diferença entre datas.
Compreendendo os Cálculos de Data em JavaScript
Agora que entendemos como criar objetos Date, vamos aprender como calcular a diferença entre duas datas.
Aritmética de Data em JavaScript
O JavaScript permite que você execute operações aritméticas diretamente em objetos Date. Quando você subtrai um objeto Date de outro, o JavaScript os converte automaticamente em timestamps (milissegundos) e realiza a subtração.
let date1 = new Date("2023-01-01T00:00:00");
let date2 = new Date("2023-01-01T00:01:00");
let differenceInMilliseconds = date2 - date1;
console.log(differenceInMilliseconds); // 60000 (60 segundos * 1000 milissegundos)
Tente executar este código no seu ambiente Node.js. O resultado deve ser 60000, que representa 60 segundos em milissegundos.
Convertendo Milissegundos em Segundos
Para converter uma diferença de tempo de milissegundos para segundos, simplesmente dividimos por 1000:
let differenceInSeconds = differenceInMilliseconds / 1000;
console.log(differenceInSeconds); // 60
Isso nos dá a diferença de tempo em segundos, que é 60 segundos ou 1 minuto neste exemplo.
Criando uma Função de Diferença de Data
Agora que entendemos o conceito, vamos criar uma função simples para calcular a diferença entre duas datas em segundos:
function getDateDifferenceInSeconds(startDate, endDate) {
return (endDate - startDate) / 1000;
}
// Teste a função
let start = new Date("2023-01-01T00:00:00");
let end = new Date("2023-01-01T00:01:30");
let difference = getDateDifferenceInSeconds(start, end);
console.log(difference); // 90 (1 minuto e 30 segundos)
Tente digitar e executar esta função no ambiente Node.js. O resultado deve ser 90, que representa 1 minuto e 30 segundos.
Implementando a Função de Diferença de Data Usando Arrow Functions
Agora que entendemos como calcular diferenças de data, vamos implementar uma versão mais concisa de nossa função usando arrow functions.
Arrow Functions em JavaScript
Arrow functions fornecem uma sintaxe mais curta para escrever funções em JavaScript. Veja como podemos reescrever nossa função de diferença de data usando a sintaxe de arrow function:
Esta função faz exatamente a mesma coisa que nossa função anterior, mas com uma sintaxe mais limpa e concisa.
Criando um Arquivo JavaScript
Vamos criar um arquivo JavaScript para armazenar e testar nossa função. Saia do ambiente Node.js pressionando Ctrl+D ou digitando .exit e pressionando Enter.
Agora, crie um novo arquivo chamado dateDifference.js na WebIDE:
Clique no ícone "Explorer" na barra lateral esquerda
Clique com o botão direito no explorador de arquivos e selecione "New File" (Novo Arquivo)
Nomeie o arquivo dateDifference.js e pressione Enter
Adicione o seguinte código ao arquivo:
// Função para calcular a diferença entre duas datas em segundos
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / 1000;
// Exemplos de teste
console.log("Example 1:");
console.log(
getSecondsDiffBetweenDates(
new Date("2020-12-24 00:00:15"),
new Date("2020-12-24 00:00:17")
)
); // Saída esperada: 2
console.log("\nExample 2:");
console.log(
getSecondsDiffBetweenDates(
new Date("2020-12-24 00:00:00"),
new Date("2020-12-24 00:01:00")
)
); // Saída esperada: 60
console.log("\nExample 3:");
console.log(
getSecondsDiffBetweenDates(
new Date("2020-12-24 00:00:00"),
new Date("2020-12-24 01:00:00")
)
); // Saída esperada: 3600
Salve o arquivo pressionando Ctrl+S ou clicando em File > Save (Arquivo > Salvar).
Executando o Arquivo JavaScript
Para executar o arquivo que acabamos de criar, use o seguinte comando no terminal:
node dateDifference.js
Você deve ver a seguinte saída:
Example 1:
2
Example 2:
60
Example 3:
3600
Isso confirma que nossa função está funcionando corretamente:
Primeiro exemplo: A diferença entre 00:00:15 e 00:00:17 é 2 segundos
Segundo exemplo: A diferença entre 00:00:00 e 00:01:00 é 60 segundos (1 minuto)
Terceiro exemplo: A diferença entre 00:00:00 e 01:00:00 é 3600 segundos (1 hora)
Criando uma Aplicação Prática
Agora que temos uma função funcional para calcular a diferença entre datas em segundos, vamos criar uma aplicação mais prática. Vamos construir um cronômetro simples que calcula quanto tempo se passou desde que o iniciamos.
Criando uma Aplicação de Cronômetro
Crie um novo arquivo chamado timer.js na WebIDE:
Clique no ícone "Explorer" na barra lateral esquerda
Clique com o botão direito no explorador de arquivos e selecione "New File" (Novo Arquivo)
Nomeie o arquivo timer.js e pressione Enter
Adicione o seguinte código ao arquivo:
// Função para calcular a diferença entre duas datas em segundos
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
(dateFinal - dateInitial) / 1000;
// Tempo de início - quando o script começa a ser executado
const startTime = new Date();
console.log(`Cronômetro iniciado em: ${startTime.toLocaleTimeString()}`);
// Função para atualizar e exibir o tempo decorrido
function updateTimer() {
const currentTime = new Date();
const elapsedSeconds = getSecondsDiffBetweenDates(startTime, currentTime);
// Formata o tempo como horas:minutos:segundos
const hours = Math.floor(elapsedSeconds / 3600);
const minutes = Math.floor((elapsedSeconds % 3600) / 60);
const seconds = Math.floor(elapsedSeconds % 60);
const formattedTime = `${hours.toString().padStart(2, "0")}:${minutes
.toString()
.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
// Limpa o console e exibe o tempo atualizado
console.clear();
console.log(`Cronômetro iniciado em: ${startTime.toLocaleTimeString()}`);
console.log(`Tempo decorrido: ${formattedTime}`);
}
// Atualiza o cronômetro a cada segundo
console.log("Cronômetro em execução... Pressione Ctrl+C para parar.");
const timerInterval = setInterval(updateTimer, 1000);
// Mantém o script em execução
setTimeout(() => {
clearInterval(timerInterval);
console.log("\nCronômetro parado após 1 minuto.");
}, 60000); // Executa por 1 minuto
Salve o arquivo pressionando Ctrl+S ou clicando em File > Save (Arquivo > Salvar).
Executando a Aplicação de Cronômetro
Para executar a aplicação de cronômetro, use o seguinte comando no terminal:
node timer.js
O cronômetro iniciará e atualizará a cada segundo, mostrando quanto tempo se passou desde que foi iniciado. O cronômetro parará automaticamente após 1 minuto, ou você pode pará-lo antes pressionando Ctrl+C.
Compreendendo a Aplicação de Cronômetro
Vamos detalhar como a aplicação de cronômetro funciona:
Definimos a função getSecondsDiffBetweenDates para calcular a diferença de tempo em segundos.
Registramos o tempo de início quando o script começa a ser executado.
Definimos uma função updateTimer que:
Obtém o tempo atual
Calcula quantos segundos se passaram desde o tempo de início
Formata o tempo decorrido como horas:minutos:segundos
Exibe o tempo formatado
Usamos setInterval para executar a função updateTimer a cada 1000 milissegundos (1 segundo).
Usamos setTimeout para parar o cronômetro após 60000 milissegundos (1 minuto).
Esta aplicação demonstra um uso prático de nossa função de diferença de data para criar um cronômetro em tempo real.
Resumo
Neste laboratório, você aprendeu a trabalhar com datas em JavaScript e como calcular a diferença entre duas datas em segundos. Aqui está um resumo do que você realizou:
Você aprendeu a criar e manipular objetos Date em JavaScript.
Você entendeu como o JavaScript lida internamente com a aritmética de datas usando timestamps (carimbos de data/hora).
Você implementou uma função para calcular a diferença entre duas datas em segundos.
Você criou uma aplicação prática de cronômetro que utiliza a função de diferença de data.
Essas habilidades serão valiosas para muitas aplicações do mundo real, como:
Criar contadores regressivos (countdown timers) para eventos
Medir o desempenho ou tempos de carregamento em aplicações web
Calcular durações entre ações do usuário
Implementar recursos baseados em tempo em aplicações web
O objeto Date do JavaScript é uma ferramenta poderosa para trabalhar com datas e horas, e saber como calcular diferenças de tempo é uma habilidade essencial para desenvolvedores web.
