Activités JavaScript

Objet Date

Fonctions Usuelles

1. Création d'une nouvelle instance de Date

const currentDate = new Date();
console.log(currentDate);

Résultat

2. Obtenir la date

const dayOfMonth = currentDate.getDate();
console.log(`Jour du mois : ${dayOfMonth}`);

const month = currentDate.getMonth(); 
// Renvoie un nombre entre 0 (janvier) et 11 (décembre)
console.log(`Mois : ${month}`);

const year = currentDate.getFullYear();
console.log(`Année : ${year}`);

Résultat

3. Obtenir le jour de la semaine

const dayOfWeek = currentDate.getDay(); 
// Renvoie un nombre entre 0 (dimanche) et 6 (samedi)
console.log(`Jour de la semaine : ${dayOfWeek}`);

Résultat

4. Obtenir l'heure actuelle

const hours = currentDate.getHours();
const minutes = currentDate.getMinutes();
const seconds = currentDate.getSeconds();
console.log(`Heure actuelle : ${hours}:${minutes}:${seconds}`);

Résultat

5. Formater une date

const formattedDate = currentDate.toLocaleDateString('fr-FR');
console.log(`Date formatée : ${formattedDate}`);

Résultat

6. Calculer la différence entre deux dates

const startDate = new Date('2022-01-01');
const endDate = new Date();
const timeDifference = endDate - startDate; 
// Renvoie la différence en millisecondes
const daysDifference=Math.floor(timeDifference/(1000*60*60*24));
console.log(`Différence en jours : ${daysDifference}`);

Résultat

7.Convertir une date en format ISO

const isoDateString = currentDate.toISOString();
console.log(`Date au format ISO : ${isoDateString}`);

Résultat

Digital Clock

En exploitant les méthodes de l'objet Date, créer l'horloge suivante :

On donne le code HTML suivant :

<div id="date"></div>
<div id="time"></div>

Travail demandé

Enregistrer le fichier HTML avec sous le nom clock.html.
Développer le code CSS dans le fichier clock.css.
Développer le code JavaScript dans le fichier HTML.

Date anniversaire

Créer une application qui permet de calculer :

Le jour de la semaine de la date de naissance.
L'âge exact en années, mois et jours.
La date du prochain anniversaire.
Le nombre de jours restant avant de fêter son anniversaire.
Afficher "Joyeux anniversaire" si la date du jour correspond à la date d'anniversaire./li>

On donne le code HTML suivant :

<form action="#">
  <div>
    <label for="db">Date de naissance</label>
    <input type="date" name="db" id="db">
  </div>
  <div>
    <button type="button" onclick="compute()">Calculer mon âge!</button>
  </div>
</form>
<div id="res">
  <div>Votre jour de naissance est <strong><span id="day">-</span></strong></div>
  <div>Vous avez exactement <strong><span id="year">-</span></strong> ans, <strong><span id="month">-</span></strong>
    mois et <strong><span id="date">-</span></strong> jours</div>
  <div>Votre prochain anniversaire est le <strong><span id="anniv">-</span></strong> 
  dans <strong><span id="anniv-jour"></span></strong> jours.</div>
</div>

Travail demandé

Enregistrer le fichier HTML sous le nom birth-date.html.
Placer la mise en forme dans le fichier dob.css.
Placer le code JavaScript dans le fichier dob.js.
Développer les fonctions JavaScript suivantes:
- La fonction numberDays(a, m) calcule le nombre de jours par mois.
  On suppose que m est le mois (0 → Janvier et 11 → Décembre) et a est l'année.
- La fonction nextBirthDate(dt) accepte un objet de type Date et retourne la date du prochain anniversaire (de type Date).
- La fonction substractDates(dt1, dt2) accepte deux objets de type Date et retrourne la différence entre les deux dates dans un tableau contenant 4 valeurs :
  - na : Nombre d'années entre dt1 et dt2
  - nm : Nombre de mois entre dt1 et dt2
  - nj : Nombre de jours entre dt1 et dt2
  - ntj : Nombre total de jours entre dt1 et dt2
  Ces valeurs seront retrouvées grâce à l'algorithme suivant :
```
nm ← (Année(dt2) - Année(dt1)) * 12 + (Mois(dt2) - Mois(dt1))
nj ← Jour(dt2) - Jour(dt1)
Si nj < 0 Alors 
  nm ← nm - 1
  nj ← nj + numberDays(Année(dt1), Mois(dr1))
Fin Si
na ← nm div 12
nm ← nm mod 12
ntj ← (Temps(dt2) - Temps(dt1)) div (1000 * 24 * 3600) + 1
```
La fonction compute() est déclenchée par le clic sur le bouton [Calculer mon age!] et permet de récupérer la date de naissance de l'utilisateur et de calculer et afficher toutes les informations demandées précédemment.