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.

Pour savoir comment mettre en forme la date du jour et l'afficher dans une fenêtre modale, il vous faut aussi avoir étudié la leçon correspondante Afficher la date du jour dans une fenêtre modale.

Lorsque vous aurez fait ça, vous serez prêt.

 
 


Comment ça marche

Ca marche très exactement comme dans la leçon Afficher la date du jour dans une fenêtre modale où la date est affichée dans une fenêtre modale, sauf que maintenant, nous allons afficher cette date dans la page même que consulte le client, comme si cette date faisait partie intégrante du code HTML.
Pour faire ça, nous allons utiliser trois méthodes de l'objet document.

La méthode .open() pour ouvrir un "canal" dans l'affichage de la page.
La méthode .write() pour écrire ce que nous voulons dans la page
La méthode .close() pour fermer le "canal" d'écriture dans la page.

En ce qui concerne la mise en forme de la date, je rappelle qu'il vous faut aller voir dans Afficher la date du jour dans une fenêtre modale. C'est là que tout se prépare.

Au sortir de la mise en forme de la date, vous disposez de plusieurs variables :  

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). Je rappelle par ailleurs (pour celles et ceux qui l'auraient oublié...) que :


ATTENTION !!!
Pour l'année, Netscape et MIE ne sont pas d'accord.
Pour MIE 5.0, il affiche les deux deniers 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...

En utilisant la méthode .getFullYear() pour ne pas avoir de problème au moins jusqu'en 2037, l'instruction pour l'affichage de la date complète devient :

alert ("Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + FullAnnee + " à " + Heure + "h " + LesMinutes + "mn " + Secondes +"s très exactement" );

Cliquez ici pour vérifier que tout est bien en ordre!

Ca marche ? Parfait !!! Nous pouvons continuer. Il ne nous reste plus maintenant qu'à effectuer le même affichage avec la même mise en forme mais dans le corps de la page HTML et non plus dans une fenêtre modale. Là, vous avez deux solutions possibles. La longue et la courte. Pour ma part, je préfères la courte (je suis toujours aussi cossard. Vous me connaissez hein !).

La manière courte consiste à mettre toute cette belle mise en forme dans une variable. Par exemple Mess pour "Message". là encore le choix du nom de la variable est tout à fait personnel. Ca n'engage que moi. Nous mettrons notre mise en forme de la date dans cette variable de la manière suivante (ne pas oublier de déclarer cette variable en global comme d'habitude de sorte que nous y ayons accès depuis n'importe quelle fonction.

var Mess = "" ; // vide la variable et la vide pour usage ultérieur.

Nous remplirons alors la variable Mess avec notre mise en forme par l'instruction :

Mess = "<b>Vous avez chargé cette page le " + NomJours + " " + JourDuMois + " " + NomMois + " " + FullAnnee + " à " + Heure + "h " + LesMinutes + " mn et " + Secondes +"s très exactement</b>" ;

Désormais, nous avons à notre disposition notre affichage pour en faire ce que nous voulons sans avoir à retaper toute l'instruction fastidieuse de mise en forme. J'ai rajouté <b> et </b> pour que le texte apparaisse ne caractères gras.
Pour afficher cette date dans le corps du document HTML, nous devrons écrire le code suivant :

<Script language="javascript">

document.open() ; // ouvre le "canal" d'écriture dans la page HTML.
document.write(Mess) ; // écrit le contenu de la variable Mess dans la page HTML
document.close() ; // ferme le canal d'écriture dans la page HTML.

</Script>

Ce code, comme vous pouvez le constater, est à exécution immédiate. C'est à dire que le navigateur va exécuter ces instructions très exactement au moment où il les rencontrera au chargement de la page (l'objet document) dans le navigateur du client. Nous devrons donc placer ces instructions à l'endroit où nous désirons voir s'afficher notre message dans la page HTML. Si tout fonctionne bien, vous devriez voir cet affichage apparaître dans la ligne juste ci-dessous en caractères gras.

 

Bien entendu, si vous rechargez la page, les secondes, les minutes voire les heures seront modifiées. L'intérêt, est que chaque fois que cette page sera chargée dans un navigateur, cette ligne sera automatiquement remise à jour. Selon la date interne du navigateur du client, on le sait. Si le poste sur lequel cette page est chargée n'est pas à la bonne heure ni à la bonne date, ces informations seront fausses. Mais ça, nous n'y pouvons rein. Hélas.


   



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.