<HTML>
<HEAD></HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
-->
</SCRIPT>
</BODY>
</HTML>
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
<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.
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>
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) )
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())
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())
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>
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...
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.