JavaScript : Petite application affichage de la date et de l'heure de manière conviviale

Il s'agit d'afficher : "Nous sommes le Mercredi 18 septembre 2001. Il est 14H25"

Etape 1: Préparons le terrain

<HTML>
<HEAD></HEAD>
<BODY>
  <SCRIPT LANGUAGE = "JavaScript">
  <!--
  -->
  </SCRIPT>

</BODY>
</HTML>

Etape 2 : affichage brut

Nous avons vu qu'il est possible d'afficher la date et l'heure de manière un peu Rustre :

document.write( Date() )

Résultat : Tue Oct 30 15:24:12 2001

Etape 3 : Créer une variable objet qui contiendra la date actuelle :

<SCRIPT LANGUAGE = "JavaScript">
<!--
var Aujourdhui = new Date()
-->
</SCRIPT>

<HTML>

<HEAD></HEAD>
<BODY>
  <SCRIPT LANGUAGE = "JavaScript">
  <!--
  document.write(Aujourdhui)
  -->
  </SCRIPT>
</BODY>
</HTML>

Résultat : Tue Oct 30 15:29:33 UTC+0100 2001

On doit mettre new Date() et pas simplement Date() car sinon on n'a pas accès a des méthodes telles que getMonth, getFullyear, etc. J'ai mis la variable Aujourdhui en entête de page HTML pour pouvoir l'utiliser comme variable globale, car j'ai dans l'idée de faire des fonctions qui vont l'utiliser.

Etape 4 : Récupérer le nom du jour en français :

Grâce à la méthode getDay, nous allons pouvoir obtenir un chiffre entre 1 et 7 que nous allons pouvoir traiter avec un Switch pour le transformer en Lundi, Mardi, Mercredi, etc.

document.write ( Aujourdhui.getDay() )

Renverrait 1,2,3,4,5,6, ou 7.

Utilisation du switch à présent : J'initialise ma variable NomDuJour à Inconnu plutôt qu'à rien uniquement au cas ou le switch se passe mal : NomDuJour restera : "inconnu", mais il n'y a pas vraiment de raison à ce que ce soit utile !

var NomDuJour = "Inconnu"
switch (Aujourdhui.getDay())
 {
 case 1 : NomDuJour = "lundi"
 case 2 : NomDuJour = "mardi"
 case 3 : NomDuJour = "mercredi"
 case 4 : NomDuJour = "jeudi"
 case 5 : NomDuJour = "vendredi"
 case 6 : NomDuJour = "samedi"
 case 7 : NomDuJour = "dimanche"
 }
document.write (NomDuJour)

Etrangement, quel que soit le jour sur lequel on est, ce bout de code renvoie systématiquement dimanche... Bizarre... J'ai remédié à cet état de fait en plaçant un break après chaque case :

<BODY>
  <SCRIPT LANGUAGE = "JavaScript">
  <!--
  var NomDuJour = "Inconnu"
  switch (Aujourdhui.getDay())
   {
   case 1 : NomDuJour = "lundi"
            break
   case 2 : NomDuJour = "mardi"
            break
   case 3 : NomDuJour = "mercredi"
            break

   case 4 : NomDuJour = "jeudi"
            break
   case 5 : NomDuJour = "vendredi"
            break
   case 6 : NomDuJour = "samedi"
            break
   case 7 : NomDuJour = "dimanche"
            break
   }
  document.write (NomDuJour)
  -->
  </SCRIPT>
</BODY>

Cette fois ça marche. Mais ce n'est pas très élégant. J'aurais préféré une fonction NomDuJour qui accepte une date en paramètre.

Je crée donc la fonction NomDuJour qui va accepter une date (QuelleDate) en paramètre. Ensuite, dans la fonction, je return le nom du jour suivant le numéro du jour donné. Je peux utiliser la méthode getDay sur QuelleDate puisque cette variable passée en paramètre est une variable objet de type date (Aujourdhui est une variable qui a été initialisée en new Date() )

<SCRIPT LANGUAGE = "JavaScript">
<!--
var Aujourdhui = new Date()

function NomDuJour (QuelleDate)
  {
  switch (QuelleDate.getDay())
    {
    case 1 : return "lundi"
             break
    case 2 : return "mardi"
             break
    case 3 : return "mercredi"
             break
    case 4 : return "jeudi"
             break
    case 5 : return "vendredi"
             break
    case 6 : return "samedi"
             break
    case 7 : return "dimanche"
             break
    }
// Fin du switch
  }
// Fin de la fonction NomDuJour
-->
</SCRIPT>

<HTML>

<HEAD></HEAD>
<BODY>
  <SCRIPT LANGUAGE = "JavaScript">
  <!--
  document.write (NomDuJour (Aujourdhui) )
  -->
  </SCRIPT>
</BODY>
</HTML>

Etape 5 : Récupérer le nom du mois en français :

Cette étape ressemble furieusement à la récupération du jour. Nous allons utiliser getMonth pour obtenir le numéro du mois que nous allons transposer :

document.write ( Aujourdhui.getMonth() )

renvoie le numéro du mois (de 0 à 11 pour de janvier à décembre. Et donc PAS de 1 à 12, attention !). N'oubliez pas les parenthèses après getMonth().

Et c'est reparti avec un switch / case :

switch (Aujourdhui.getMonth())
  {
  case 0 : document.write ("janvier")
           break
  case 1 : document.write ("février")
           break
  case 2 : document.write ("mars")
           break
  case 3 : document.write ("avril")
           break
  case 4 : document.write ("mai")
           break
  case 5 : document.write ("juin")
           break
  case 6 : document.write ("juillet")
           break
  case 7 : document.write ("août")
           break
  case 8 : document.write ("septembre")
           break
  case 9 : document.write ("octobre")
           break
  case 10 : document.write ("novembre")
           break
  case 11 : document.write ("décembre")
           break
  }

Et comme avec les jours, nous allons transformer ce code en fonction qui va aussi accepter une date comme paramètre :

function NomDuMois (QuelleDate)
  {
  switch (QuelleDate.getMonth())
    {
    case 0 : return ("janvier")
             break
    case 1 : return ("février")
             break
    case 2 : return ("mars")
             break
    case 3 : return ("avril")
             break
    case 4 : return ("mai")
             break
    case 5 : return ("juin")
             break
    case 6 : return ("juillet")
             break
    case 7 : return ("août")
             break
    case 8 : return ("septembre")
             break
    case 9 : return ("octobre")
             break
    case 10: return ("novembre")
             break
    case 11: return ("décembre")
             break
   } // Fin du switch
  } // Fin de la fonction NomDuMois

Que nous allons pouvoir appeler par

document.write (NomDuMois (Aujourdhui) )

Etape 6 : Récupération de l'heure et des minutes

Cette étape est nettement plus facile puisque nous avons la méthode getHours() qui nous renvoie les heures (0-23) et les minutes :

document.write (Aujourdhui.getHours())
document.write (Aujourdhui.getMinutes())

Etape 7 : finalisation

Il ne reste plus qu'à écrire d'une seule traite notre résultat :

Admettons que nous soyons le mardi 30 actobre 2001, à 16H50 :

document.write (NomDuJour (Aujourdhui) )   // mardi
document.write (Aujourdhui.getDate())     // 30
document.write (NomDuMois (Aujourdhui) )   // octobre
document.write (Aujourdhui.getFullYear() ) // 2001
document.write (Aujourdhui.getHours())     // 16
document.write (Aujourdhui.getMinutes())   // 50

Nous aurions pu tout installer dans un seul document.write en séparant les éléments par des virgules suivant la forme ::

document.write ("abc" , "def")

Affiche : abcdef

Comme ceci :

document.write (NomDuJour (Aujourdhui), Aujourdhui.getDate(), etc. )

Mais ce n'est pas très lisible. D'autant qu'il nous manque des éléments. En effet, l'affichage tel quel est :

mardi9octobre20011657

ce qui n'est pas satisfaisant puisque nous attendons en fait :

Nous sommes le Mercredi 18 septembre 2001. Il est 14H25

Nous allons ajouter les éléments qui manquent (Nous sommes le, les espaces, le point, le H) :

document.write ("Nous sommes le ")
document.write (NomDuJour (Aujourdhui) )
document.write (" ")
document.write (Aujourdhui.getDate())
document.write (" ")
document.write (NomDuMois (Aujourdhui) )
document.write (" ")
document.write (Aujourdhui.getFullYear() )
document.write (". Il est ")
document.write (Aujourdhui.getHours())
document.write ("H")
document.write (Aujourdhui.getMinutes())
document.write (".")

Cette fois, c'est pas mal. voici le résultat :

Nous sommes le mardi 9 octobre 2001. Il est 17H2.

Oups ! 17H2 ? pourquoi pas 17H02 ??? Parce que getMinutes aretourné 2, pas 02 ...

Il a fait la même chose pour le 9 de 9 octobre, mais, là, c'est nettement moins gênant. Il faut remédier à celà avec un tout petit if :

document.write ("H")
if (Aujourdhui.getMinutes() < 10 ) document.write ("0")
document.write (Aujourdhui.getMinutes())

Etape 8 : Création d'une fonction d'affichage

Et finalement, si on mettait tout cet affichage dans une fonction qui s'appellerait tout simplement AffichageDateConviviale() ?

function AffichageDateConviviale ()
  {
  document.write ("Nous sommes le ")
  document.write (NomDuJour (Aujourdhui) )
  document.write (" ")
  document.write (Aujourdhui.getDate())
  document.write (" ")
  document.write (NomDuMois (Aujourdhui) )
  document.write (" ")
  document.write (Aujourdhui.getFullYear() )
  document.write (". Il est ")
  document.write (Aujourdhui.getHours())
  document.write ("H")
  if (Aujourdhui.getMinutes() < 10 )
   document.write ("0")
  document.write (Aujourdhui.getMinutes())
  document.write (".")
  } // Fin de la fonction AffichageDateConviviale ()

Voici finalement toute la page HTML qui affichera simplement : Nous sommes le Mercredi 18 septembre 2001. Il est 14H25¨

<SCRIPT LANGUAGE = "JavaScript">
<!--
var Aujourdhui = new Date()

// Renvoie le nom du jour en toutes lettres en français :
function NomDuJour (QuelleDate)
  {
  switch (QuelleDate.getDay())
    {
    case 1 : return "lundi"
             break
    case 2 : return "mardi"
             break
    case 3 : return "mercredi"
             break
    case 4 : return "jeudi"
             break
    case 5 : return "vendredi"
             break
    case 6 : return "samedi"
             break
    case 7 : return "dimanche"
             break
   } // Fin du switch
} // Fin de la fonction NomDuJour

// Renvoie le nom du mois en toutes lettres en français :
function NomDuMois (QuelleDate)
{
  switch (QuelleDate.getMonth())
    {
    case 0 : return ("janvier")
             break
    case 1 : return ("février")
             break
    case 2 : return ("mars")
             break
    case 3 : return ("avril")
             break
    case 4 : return ("mai")
             break
    case 5 : return ("juin")
             break
    case 6 : return ("juillet")
             break
    case 7 : return ("août")
              break
    case 8 : return ("septembre")
             break
    case 9 : return ("octobre")
             break
    case 10: return ("novembre")
             break
    case 11: return ("décembre")
             break
   } // Fin du switch
} // Fin de la fonction NomDuMois

function AffichageDateConviviale ()
  {
  document.write ("Nous sommes le ")
  document.write (NomDuJour (Aujourdhui) ) // Appel à la fonction NomDuJour
  document.write (" ")
  document.write (Aujourdhui.getDate())
  document.write (" ")
  document.write (NomDuMois (Aujourdhui) ) // Appel à la fonction NomDuMois
  document.write (" ")
  document.write (Aujourdhui.getFullYear() )
  document.write (". Il est ")
  document.write (Aujourdhui.getHours())
  document.write ("H")
  if (Aujourdhui.getMinutes() < 10 )
     document.write ("0")
  document.write (Aujourdhui.getMinutes())
  document.write (". ")
} // Fin de la fonction AffichageDateConviviale ()
-->
</SCRIPT>

<HTML>
<HEAD></HEAD>

<BODY>
  <SCRIPT LANGUAGE = "JavaScript">
  <!--
  AffichageDateConviviale ()
  -->
  </SCRIPT>
</BODY>

</HTML>

Etape 9: afficher les événements de l'année

Pour compléter notre exercice, nous pourrions afficher une petite phrase spéciale selon la date de l'année (Halloween, fête du travail, Noël, ..)

Pour faire ceci, il serait bien élégant de créer 2 switch l'un dans l'autre : L'un pour les mois, l'autre pour les jours de ce mois :

function AffichageTextePerso ()
 
{
  switch (Aujourdhui.getMonth() + 1)
    {
    case 1 : switch (Aujourdhui.getDate())
      {
      case 1 : return ("BONNE ANNEE " , Aujourdhui.getFullYear() , " !!! Pas trop la gueule de bois ?" )
      break
      }
    case 2 : switch (Aujourdhui.getDate())
      {
      case 7 : return ("Dans une semaine, c'est la St.-Valentin. Ne l'oubliez pas !")
      break
      case 12 : return ("Après-demain, c'est la St.-Valentin. Ne l'oubliez pas !")
      break
      case 13 : return ("Demain, c'est la St.-Valentin. Ne l'oubliez pas !")
      break
      case 14 : return ("Aujourd'hui, c'est la St.-Valentin. Ne l'oubliez pas !")
      break
      }
    }
  }
etc...

Etape 10 : Finaliser le tout

Nous allons juste un peu modifier AffichageDateConviviale de manière à ce que que cette fonction n'affiche pas directement la date, mais renvoie une variable texte qui contiendra la date et l'heure, que nous n'aurons plus qu'a afficher, de cette manière :

document.write(AffichageDateConviviale (Aujourdui) )

Finalement, vous pouvez voir le résultat en cliquant sur ce lien. Vous n'aurez ensuite dans votre navigateur qu'à faire Affichage/Source pour constater tout le code JavaScript ci dessus. Attention : La petite phrase personnalisée selon la date que vous êtes n'apparaitra que si vous êtes sur un jour spécial ! Sinon, rien... Avant de cliquer sur le lien, vous pouvez changer la date de votre ordinateur pour le mettre à Noël par exemple.