COURS JavaScript


Accueil | Afficher la date du jour dans une fenêtre modale

Afficher la date du jour dans une fenêtre modale



Principe

Pour bien comprendre comment fonctionne l'affichage de la date du jour (celle du moment où la page se charge dans le Navigateur), il faut bien avoir assimilé les principes de base de l'objet Date() dans JavaScript. Pour toutes celles et tous ceux qui auraient oublié comment fonctionne l'objet Date() dans JavaScript, reportez vous à la leçon sur l'objet Date.

Comme nous le savons désormais (puisque nous sommes allé voir la leçon correspondante...), l'objet Date() dans JavaScript, permet d'avoir accès à toutes les valeurs qui font une date traditionnelle, y compris l'heure, les minutes, et les secondes (et bien plus encore). Seulement, nous l'avons vu, dans un ordre peu compréhensible. Le travail consiste donc à remettre tout ça dans le bon ordre. Ensuite, choisir le mode d'affichage (dans une fenêtre modale, ou dans la page, etc...)

Une remarque cependant : pour ce qui concerne l'année, les méthodes .getYear() et .getFullYear() ne fonctionnent pas vraiment bien, ni l'une ni l'autre, comme nous le verrons dans la suite de cette leçon, selon les Navigateurs utilisés. Nous décrirons donc les deux méthodes, la plus simple étant encore .getFullYear() qui nous laisse tranquille sous les deux navigateurs jusqu'en 2037 !!


 
 



Comment ça marche

Premièrement, il faut déterminer si nous voulons la date du chargement de la page dans le navigateur, ou la date du moment où l'utilisateur clique sur un objet da la page HTML comme un bouton par exemple. Souvenez-vous que l'objet Date exploitable doit être créé par l'instruction :

var ObjetDate = new Date();

Mais qu'à ce moment précis, lorsque cette instruction est exécutée, la variable ObjetDate (qui est un objet en lui même) contient les valeurs qui étaient celles de la date de l'ordinateur à l'instant précis où l'instruction a été exécutée. Ces valeurs ne changeront pas tant que l'instruction ne sera pas exécutée de nouveau.

Nous savons alors que nous avons accès aux valeurs de la date de l'objet ObjetDate en utilisant les méthodes liées à l'objet Date de JavaScript. Comme nous travaillons toujours très très proprement :-), nous utiliserons des variables pour stocker les valeurs dont nous avons besoin, et, après les avoir remise dans le bon ordre, nous n'aurons plus qu'à les afficher selon le mode désiré. Je rappelle que les méthodes de l'objet Date() se trouvent à : La leçon sur l'objet Date.

 


 
 



Mise en forme de la date 

Après avoir créé l'objet ObjetDate comme décrit plus haut, il reste à en extraire les valeurs dont nous avons besoin. Vous trouverez aussi ces extractions et les tables correspondantes (pour les noms des jours et des mois) à la même adresse, dans la même leçon sur l'objet Date.

Nous disposons alors des variables suivantes :

var ObjetDate = new Date()
var JourDuMois = ObjetDate.getDate()
var JourDeLaSemaine = ObjetDate.getDay()
var Heure = ObjetDate.getHours()
var LesMinutes = ObjetDate.getMinutes()
var Mois = ObjetDate.getMonth()
var Secondes = ObjetDate.getSeconds()
var Annee = ObjetDate.getYear()
var FullAnnee = ObjetDate.getFullYear()

var NomMois
var NomJours

Chacune validées par les méthodes adéquates et les fonction idoines... (voir toujours la même leçon).

Pour les remettre dans le bon ordre, nous utiliserons ce que l'on appelle la "concaténation" de chaînes de caractères, c'est-à-dire, faire une grande chaîne avec plusieurs petites en les mettant bout à bout. En JavaScript, coller une chaîne de caractère à une autre, se fait à l'aide du signe "+" (plus). On peut aussi concaténer des chaînes avec des variables, et c'est alors leur contenu qui se mettent bout à bout. Nous utiliserons des chaînes de caractères lorsque ce sera des mots que nous voulons afficher, et le contenu des variable correspondantes pour les valeurs de la date à afficher.

Par exemple pour écrire :

Vous avez chargé cette page le Lundi 6 Décembre 1999 à 19 heure 34 minute et 22 seconde très exactement

(avec les valeurs du moment, bien entendu, ceci n'étant qu'un exemple abstrait), nous allons décomposer la phrase en chaînes de caractères et en variables. Une chaîne de caractère en JavaScript, se met entre "guillemets". Si bien que nous aurons :

"Vous avez chargé cette page le " comme première chaîne de caractères. Ensuite, le jour, nous le trouvons dans la variable NomJours. Pour l'accoler à la première partie de la phrase, il suffit d'écrire :

"Vous avez chargé cette page le " + NomJours

La chaîne de caractères résultante sera alors :

"Vous avez chargé cette page le Lundi", puisque dans notre exemple, la variable NomJour contient "Lundi". Et ainsi de suite avec les autres variables et chaînes de caractères. Notez bien que même les espaces sont considérés comme des caractères. Ne les oubliez pas dans vos textes, autrement, tout serait collé les uns aux autres, ce qui serait peu lisible. Si nous décidons (c'est arbitraire) de faire apparaître ce message dans une fenêtre modale d'alerte (vois la leçon sur les fenêtres modales pour ceux ou celles qui auraient oublié), le code devient :

alert ("Vous avez chargé cette page le " + NomJours );

Cliquez ici pour voir par vous même !

Continuons avec la date du jour qui est dans la variable JourDuMois. Nous l'ajoutons en écrivant :

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois );

Remarquez la chaîne + " "+ qui insère un espace entre le nom du jour et le nom du mois, de façon à ce qu'ils ne soient pas collés l'un à l'autre.

Cliquez ici pour voir par vous même !

Il ne reste plus qu'à continuer de la même manière avec le nom du mois dont nous savons qu'il est dans la variable NomMois, elle même validé correctement comme vu dans la leçon sur l'objet Date. Nous le concaténons par l'instruction :

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois );

Cliquez ici pour voir par vous même !

Toujours sans oublier de mettre l'espace nécessaire pour la lisibilité.

ATTENTION !!!
Pour l'année, Netscape et MIE ne sont pas d'accord.
Pour MIE 5.0, il affiche les deux dreniers chiffres de l'année jusqu'en 1999, et ensuite, il affiche les 4 chiffres en entier de 2000 jusqu'en 2999 (j'ai testé !) Y aura-t-il un bugg de l'an 3000 ? Tout ça n'est pas bien cohérent.
Pour Netscape 4.7fr il faut faire un test et ajuster l'année (sans doute mettront-ils leur navigateur à jour avant l'an 2000 ? Qui sait !!! Même la méthode .getFullYear() ne franchit pas 2037 sous Netscape !!!

Pour ne pas se casser la tête, utilisez .getFullYear() qui fonctionnera quand même bien pour les deux navigateurs jusqu'en 2037...

Pour l'année (sous Netscape 4.7fr), tant que nous sommes avant l'an 2000, tout se passera bien en ajoutant "19" devant les deux derniers chiffres de l'année. Pour après le premier janvier 2000, tout dépendra si votre ordinateur passe ou non l'an 2000 et le fameux Bog (Bugg en anglais). Pour le savoir, une seule méthode, attendre le premier janvier 2000 et tester pour voir. Je ne connais pas d'autre moyen plus fiable. Plus probablement, et pour les micros qui passent sans problème l'an 2000, il faudra juste faire un test et rajouter "19" si l'année donnée par la méthode var Annee = ObjetDate.getYear(); est <= à 99 et 1900 + Annee dans le cas contraire, puisqu'alors, l'année donnée sera "100" et pas "00" (toujours pour Netscape 4.7fr). Pour l'affichage de l'année, nous utiliserons une variable intermédiaire AffAnnee afin de conserver Annee intacte pour d'autres usages. Ce que nous ferons en écrivant uniquement pour Netscape :

if (Annee <= "99") {
AffAnnee = "19" + Annee
} else {
AffAnnee = 1900 + Annee // ici, pas de concaténation, mais une addition mathématique
}

Après ça, pour notre chaîne de caractère, nous écrirons simplement :

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + AffAnnee);

Cliquez ici pour voir par vous même si vous êtes sous Netscape 4.7fr seulement ! (sera aberrant sous MIE à partir de 2000 mais marche bien avant 2000)

Pour MIE, le test est différent puisque après 2000, plus besoin d'ajuster l'affichage de la date. Le test sera donc :

if (Annee <= "99") {
AffAnnee = "19" + Annee
} else {
AffAnnee = Annee // il n'y aura rien à faire de plus
}

Rien à faire à partir de 2000 puisque le navigateur prend les 4 chiffres de la date, comme la méthode .getFullYear().

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + AffAnnee);

Cliquez ici pour voir par vous même si vous êtes sous MIE 5.0 seulement ! (Marchera bien sous Netscape avant 2000, mais sera aberrant sous Netscape après 2000)

Pour ma part, lorsque je positionne la date interne de mon ordinateur en 2000, j'obtient "100" pour l'année par la méthode
var Annee = ObjetDate.getYear(); comme dit plus haut sous Netscape. Notez bien que ceci ne fonctionne (toujours sur mon ordinateur et sous Netscape 4.7fr) que jusqu'en 2037, car après, ça repasse à 2 !!!! Y aura-t-il un Bog de l'an 2038 ? Ou (plus probablement) Netscape lui même n'est-il pas correctement programmé ? Allez savoir. D'ici là, ils nous auront bien inventé autre chose... Pour MIE, pas de problème jusqu'en 2999. J'ai essayé.

Je pense que maintenant vous comprenez la suite par vous même. Il reste à insérer l'heure, les minutes et les secondes qui sont respectivement contenues dans les variables Heure, LesMinutes, Secondes. Notre instruction devient alors :

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + AffAnnee + " à " + Heure + ", " + LesMinutes + " minute et " + Secondes +" secondes très exactement" );

Cliquez ici pour voir par vous même le résultat si vous êtes sous Netscape 4.7fr ! (sera aberrant sous MIE à partir de 2000 mais marche bien avant 2000).

Sous MIE, il faut le test spécifique MIE, bien entendu

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + AffAnnee + " à " + Heure + ", " + LesMinutes + " minute et " + Secondes +" secondes très exactement" );

Cliquez ici pour voir par vous même le résultat si vous êtes sous MIE 5.0 ! (Marchera bien sous Netscape avant 2000, mais sera aberrant sous Netscape après 2000).

Bien sûr, l'utilisation de la méthode .getFullYear() permettra d'accorder les navigateurs jusqu'en 2037 pour Netscape (à moins qu'ils corrigent ça d'ici là) et semble fonctionner jusqu'en 2999 pour MIE. Au delà, je n'ai pas pu tester...


   


Deuxième méthode

Comme toujours, je vous apprend à travailler proprement, en utilisant des variables etc. Ce qui est une bonne méthode de travail. Mais on peut aussi utiliser des raccourcis, et utiliser directement les méthodes de l'objet Date() dans un affichage lorsqu'elles renvoient les bonnes valeurs tout de suite sans traitement intermédiaire (comme les noms de mois ou les noms des jours de la semaine qui réclament des recherches en tables indexées). Si nous voulons utiliser ces raccourcis (qui à mon avis n'en sont pas vraiment...) nous pouvons écrire les instructions de la manière suivante :

alert ("Vous avez chargé cette page le " + NomJours + " " + ObjetDate.getDate() + " " + NomMois + " " + AffAnnee + " à " + ObjetDate.getHours() + " heure" + ObjetDate.getMinutes() + " minute et " + ObjetDate.getSeconds() +" secondes très exactement" );

Où on remplace :
JourDuMois par sa méthode d'obtention : ObjetDate.getDate()
Heure par sa méthode d'obtention : ObjetDate.getHours()
LesMinutes par sa méthode d'obtention : ObjetDate.getMinutes()
Secondes par sa méthode d'obtention : ObjetDate.getSeconds()

Mais la lisibilité s'en ressent pour un non confirmé très féru du langage.

Cliquez ici pour voir le résultat si vous êtes sous Netscape 4.7fr seulement ! (sera aberrant sous MIE à partir de 2000 mais marche bien avant 2000).

Et pour le même résultat sous MIE, avec le test spécifique MIE pour l'année :

alert ("Vous avez chargé cette page le " + NomJours + " " + ObjetDate.getDate() + " " + NomMois + " " + AffAnnee + " à " + ObjetDate.getHours() + " heure" + ObjetDate.getMinutes() + " minute et " + ObjetDate.getSeconds() +" secondes très exactement" );

Où on remplace de la même manière :
JourDuMois par sa méthode d'obtention : ObjetDate.getDate()
Heure par sa méthode d'obtention : ObjetDate.getHours()
LesMinutes par sa méthode d'obtention : ObjetDate.getMinutes()
Secondes par sa méthode d'obtention : ObjetDate.getSeconds()

Après 2000, on pourra aussi remplacer AffAnnee par sa méthode ObjetDate.getYear() puisqu'il n'y aura plus besoin de tests sous MIE pour les années >= 2000. D'ici là, on peut aussi utiliser .getFullYear() jusqu'en 2037.

Cliquez ici pour voir le résultat si vous êtes sous MIE 5.0 seulement ! (Marchera bien sous Netscape avant 2000, mais sera aberrant sous Netscape après 2000).

 
 


   


Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.