Différence de dates en secondes

Introduction

Dans ce laboratoire (lab), nous allons explorer comment calculer la différence entre deux dates en secondes en utilisant JavaScript. Comprendre comment manipuler les dates et l'heure est essentiel pour de nombreuses applications web. Nous allons créer une fonction qui prend deux objets Date en entrée et renvoie la différence de temps entre eux en secondes. Cette technique est utile pour diverses applications, notamment la mesure d'intervalles de temps, le calcul de durées ou la création de minuteurs. À la fin de ce laboratoire, vous aurez une meilleure compréhension des objets Date en JavaScript et de la manière d'effectuer des calculs de temps efficacement.

Skills Graph

Prise en main des objets Date en JavaScript

JavaScript propose un objet Date intégré qui nous permet de manipuler les dates et les heures. Avant de calculer la différence entre des dates, comprenons d'abord comment créer et manipuler des objets Date en JavaScript.

Démarrage de l'environnement Node.js

Commençons par ouvrir l'environnement interactif de Node.js :

1. Ouvrez le Terminal en cliquant sur le menu Terminal en haut de l'IDE Web.
2. Tapez la commande suivante et appuyez sur Entrée :

node

Vous devriez maintenant voir l'invite Node.js (>), ce qui indique que vous êtes dans l'environnement interactif JavaScript. Cela vous permet d'exécuter du code JavaScript directement dans le terminal.

Création d'objets Date

En JavaScript, nous pouvons créer un nouvel objet Date de plusieurs manières :

// Date et heure actuelles
let now = new Date();
console.log(now);

// Date et heure spécifiques (année, mois [0-11], jour, heure, minute, seconde)
let specificDate = new Date(2023, 0, 15, 10, 30, 45); // 15 janvier 2023, 10:30:45
console.log(specificDate);

// Date à partir d'une chaîne de caractères
let dateFromString = new Date("2023-01-15T10:30:45");
console.log(dateFromString);

Essayez de taper chacun de ces exemples dans l'environnement Node.js et observez la sortie.

Notez qu'en JavaScript, les mois sont indexés à partir de zéro, ce qui signifie que janvier est 0, février est 1, et ainsi de suite.

Obtention d'un horodatage (timestamp) à partir d'objets Date

Chaque objet Date en JavaScript stocke en interne l'heure sous forme du nombre de millisecondes écoulées depuis le 1er janvier 1970 (UTC). Cela est connu sous le nom d'horodatage (timestamp).

let now = new Date();
console.log(now.getTime()); // Obtenir l'horodatage en millisecondes

Cet horodatage sera utile pour calculer la différence entre des dates.

Comprendre les calculs de dates en JavaScript

Maintenant que nous savons comment créer des objets Date, apprenons à calculer la différence entre deux dates.

Arithmétique des dates en JavaScript

JavaScript vous permet d'effectuer des opérations arithmétiques directement sur les objets Date. Lorsque vous soustrayez un objet Date à un autre, JavaScript les convertit automatiquement en horodatages (timestamp, en millisecondes) et effectue la soustraction.

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 secondes * 1000 millisecondes)

Essayez d'exécuter ce code dans votre environnement Node.js. Le résultat devrait être 60000, qui représente 60 secondes en millisecondes.

Conversion des millisecondes en secondes

Pour convertir une différence de temps de millisecondes en secondes, nous divisons simplement par 1000 :

let differenceInSeconds = differenceInMilliseconds / 1000;
console.log(differenceInSeconds); // 60

Cela nous donne notre différence de temps en secondes, qui est de 60 secondes ou 1 minute dans cet exemple.

Création d'une fonction de différence de dates

Maintenant que nous comprenons le concept, créons une fonction simple pour calculer la différence entre deux dates en secondes :

function getDateDifferenceInSeconds(startDate, endDate) {
  return (endDate - startDate) / 1000;
}

// Test de la fonction
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 minute et 30 secondes)

Essayez de taper et d'exécuter cette fonction dans l'environnement Node.js. Le résultat devrait être 90, qui représente 1 minute et 30 secondes.

Implémentation de la fonction de différence de dates en utilisant les fonctions fléchées

Maintenant que nous savons comment calculer les différences de dates, implémentons une version plus concise de notre fonction en utilisant les fonctions fléchées.

Les fonctions fléchées en JavaScript

Les fonctions fléchées offrent une syntaxe plus courte pour écrire des fonctions en JavaScript. Voici comment nous pouvons réécrire notre fonction de différence de dates en utilisant la syntaxe des fonctions fléchées :

const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

Cette fonction fait exactement la même chose que notre fonction précédente, mais avec une syntaxe plus propre et plus concise.

Création d'un fichier JavaScript

Créons un fichier JavaScript pour stocker et tester notre fonction. Quittez l'environnement Node.js en appuyant sur Ctrl+D ou en tapant .exit puis en appuyant sur Entrée.

Maintenant, créez un nouveau fichier nommé dateDifference.js dans l'IDE Web :

1. Cliquez sur l'icône "Explorer" dans la barre latérale de gauche.
2. Cliquez avec le bouton droit dans l'explorateur de fichiers et sélectionnez "New File".
3. Nommez le fichier dateDifference.js et appuyez sur Entrée.
4. Ajoutez le code suivant au fichier :

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Test examples
console.log("Example 1:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:15"),
    new Date("2020-12-24 00:00:17")
  )
); // Expected output: 2

console.log("\nExample 2:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 00:01:00")
  )
); // Expected output: 60

console.log("\nExample 3:");
console.log(
  getSecondsDiffBetweenDates(
    new Date("2020-12-24 00:00:00"),
    new Date("2020-12-24 01:00:00")
  )
); // Expected output: 3600

Enregistrez le fichier en appuyant sur Ctrl+S ou en cliquant sur Fichier > Enregistrer.

Exécution du fichier JavaScript

Pour exécuter le fichier que nous venons de créer, utilisez la commande suivante dans le terminal :

node dateDifference.js

Vous devriez voir la sortie suivante :

Example 1:
2

Example 2:
60

Example 3:
3600

Cela confirme que notre fonction fonctionne correctement :

• Premier exemple : La différence entre 00:00:15 et 00:00:17 est de 2 secondes.
• Deuxième exemple : La différence entre 00:00:00 et 00:01:00 est de 60 secondes (1 minute).
• Troisième exemple : La différence entre 00:00:00 et 01:00:00 est de 3600 secondes (1 heure).

Création d'une application pratique

Maintenant que nous avons une fonction opérationnelle pour calculer la différence entre des dates en secondes, créons une application plus pratique. Nous allons construire un simple minuteur qui calcule le temps écoulé depuis son démarrage.

Création d'une application de minuteur

Créez un nouveau fichier nommé timer.js dans l'IDE Web :

1. Cliquez sur l'icône "Explorer" dans la barre latérale de gauche.
2. Cliquez avec le bouton droit dans l'explorateur de fichiers et sélectionnez "New File".
3. Nommez le fichier timer.js et appuyez sur Entrée.
4. Ajoutez le code suivant au fichier :

// Function to calculate difference between two dates in seconds
const getSecondsDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / 1000;

// Start time - when the script starts running
const startTime = new Date();
console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);

// Function to update and display the elapsed time
function updateTimer() {
  const currentTime = new Date();
  const elapsedSeconds = getSecondsDiffBetweenDates(startTime, currentTime);

  // Format the time as hours:minutes:seconds
  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")}`;

  // Clear the console and display the updated time
  console.clear();
  console.log(`Timer started at: ${startTime.toLocaleTimeString()}`);
  console.log(`Elapsed time: ${formattedTime}`);
}

// Update the timer every second
console.log("Timer is running... Press Ctrl+C to stop.");
const timerInterval = setInterval(updateTimer, 1000);

// Keep the script running
setTimeout(() => {
  clearInterval(timerInterval);
  console.log("\nTimer stopped after 1 minute.");
}, 60000); // Run for 1 minute

Enregistrez le fichier en appuyant sur Ctrl+S ou en cliquant sur Fichier > Enregistrer.

Exécution de l'application de minuteur

Pour exécuter l'application de minuteur, utilisez la commande suivante dans le terminal :

node timer.js

Le minuteur démarrera et s'actualisera toutes les secondes, affichant le temps écoulé depuis son démarrage. Le minuteur s'arrêtera automatiquement après 1 minute, ou vous pouvez l'arrêter plus tôt en appuyant sur Ctrl+C.

Compréhension de l'application de minuteur

Analysons le fonctionnement de l'application de minuteur :

1. Nous définissons la fonction getSecondsDiffBetweenDates pour calculer la différence de temps en secondes.
2. Nous enregistrons l'heure de démarrage lorsque le script commence à s'exécuter.
3. Nous définissons une fonction updateTimer qui :
   • Récupère l'heure actuelle
   • Calcule le nombre de secondes écoulées depuis l'heure de démarrage
   • Formate le temps écoulé au format heures:minutes:secondes
   • Affiche le temps formaté
4. Nous utilisons setInterval pour exécuter la fonction updateTimer toutes les 1000 millisecondes (1 seconde).
5. Nous utilisons setTimeout pour arrêter le minuteur après 60000 millisecondes (1 minute).

Cette application démontre une utilisation pratique de notre fonction de différence de dates pour créer un minuteur en temps réel.

Résumé

Dans ce laboratoire, vous avez appris à manipuler les dates en JavaScript et à calculer la différence entre deux dates en secondes. Voici un résumé de ce que vous avez accompli :

1. Vous avez appris à créer et manipuler des objets Date en JavaScript.
2. Vous avez compris comment JavaScript gère les opérations arithmétiques sur les dates en interne en utilisant des timestamps (horodatages).
3. Vous avez implémenté une fonction pour calculer la différence entre deux dates en secondes.
4. Vous avez créé une application de minuteur pratique qui utilise la fonction de différence de dates.

Ces compétences seront précieuses pour de nombreuses applications du monde réel, telles que :

• La création de minuteurs de compte à rebours pour des événements
• La mesure des performances ou des temps de chargement dans les applications web
• Le calcul des durées entre les actions des utilisateurs
• La mise en œuvre de fonctionnalités temporelles dans les applications web

L'objet Date de JavaScript est un outil puissant pour travailler avec les dates et les heures, et savoir calculer les différences de temps est une compétence essentielle pour les développeurs web.