COURS JavaScript


Accueil | Afficher la date de dernière mise à jour dans une page

Afficher la date de dernière mise à jour dans une page



Principe

La date de dernière mise à jour est la date à laquelle la page en question a été enregistrée pour la dernière fois sur un serveur ou sur votre disque dur si vous travaillez en local. Cette date est une propriété de l'objet document. Cette propriété est la propriété document.lastModified. En français, "date de dernière modification" (last = dernier, modified = modifié, pour les non anglophones).

Pour bien comprendre comment fonctionne l'affichage d'une date comme la date de dernière mise à jour par exemple (celle du moment où la page a été enregistrée sur le serveur pour la dernière fois), 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. Dans la mesure où nous ne sommes pas difficile, nous pouvons nous contenter le ce que renvoie le serveur comme date de dernière modification et afficher simplement cette date dans le format renvoyé, même si ça n'est pas très lisible pour un Français.

Le hic! c'est que tous les serveurs ne renvoient pas la même chose et que tous les navigateurs n'interprètent pas ce que renvoie le serveur de la même manière. Concrètement, ça veut dire que ce que nous obtiendrons dépendra en même temps du serveur et du navigateur utilisé. Pour vous donner un exemple, voici ce que j'obtient en local avec les quatre navigateurs que je possède sur ma machine (un système Windows 98 deuxième édition). Cette date dépend bien entendu du réglage de la date et de l'heure de votre ordinateur. Si vous le réglez pour faire semblant d'être le premier janvier 2003, c'est cette date qui sera prise en compte. Et pas la date réelle. A vous de régler votre ordinateur correctement.

Légende : = Netscape 4.75 - = Netscape 6.2 - = Mozilla 1.0.0+ - = MIE 6.0

Navigateurs valeur renvoyée par document.lastModified en local (W98)
= Netscape 4.75 Friday, June 07, 2002 11:31:56
= Netscape 6.2 Friday, June 07, 2002 11:31:56
= Mozilla 1.0.0+ Friday, June 07, 2002 11:31:56
= MIE 6.0 06/07/2002 11:31:56

Si parmi vous certaines ou certains ont un autre navigateur et/ou un autre système d'exploitation, n'hésitez pas à me faire parvenir ce que renvoie cette instruction de manière à ce que ce tableau comparatif s'enrichisse. Par avance merci pour cette petite contribution.

Nous voyons tout de suite qu'en local tout du moins, et sous W98, seul MIE (pour ne pas changer) renvoie une valeur différente de ses petits camarades.

Voyons maintenant ce que j'obtiens lorsque la même page est placée sur le serveur de mon hébergeur (wanadoo pour ne pas le nommer).

Légende : = Netscape 4.75 - = Netscape 6.2 - = Mozilla 1.0.0+ - = MIE 6.0

Navigateurs valeur renvoyée par document.lastModified sur serveur
= Netscape 4.75 Friday, June 07, 2002 11:31:10
= Netscape 6.2 Friday, 07-Jun-02 09:31:10 GMT
= Mozilla 1.0.0+ Friday, 07-Jun-02 09:31:10 GMT
= MIE 6.0 06/07/2002 11:31:10

On constate tout de suite que les différences sont plus grandes. Alors que Netscape et MIE donnent l'heure serveur qui est à quelques secondes près (le temps de télécharger le fichier en question sur le serveur) la même chose, Netscape 6.2 et son petit frère Mozilla donnent un autre format GMT avec le décalage des deux heures par rapport au temps réel. De plus, ils renvoient un format différent (comparez les deux tableaux).

Jusque là, rien de très grave si nous nous satisfaisons d'afficher la date de dernière modification de notre page telle que le serveur et le navigateur la renvoient. Là où nous commencerons à avoir un soucis, c'est lorsque nous voudrons remettre cette date renvoyée dans l'ordre dont nous avons l'habitude en France, c'est à dire jour/mois/année.

C'est ce que nous allons étudier plus bas.

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

Nous allons nous contenter dans un premier temps de ce que renvoie le serveur. Donc pas de problème à priori. Nous avons en main toutes les connaissances nécessaires pour le faire (si nous avons bien suivi tous les cours). Voici les instructions dont nous avons besoin :

1) Récupérer la date de dernière modification :

document.lastModified

suffira amplement.

2) Afficher cette date dans notre page HTML :

document.write()

est très bien adapté. La méthode .write() de l'objet document permet d'écrire ce qui se trouve entre les deux parenthèses dans notre page, exactement à l'endroit où l'instruction est rencontrée par le navigateur.

3) mettre tous ça en forme :

document.write(document.lastModified)

fera parfaitement l'affaire. Et puisque nous voulons afficher ça à un endroit précis au chargement de notre page dans le navigateur du client, nous avons affaire à une instruction d'éxécution immédiate, donc hors de toute fonction. Il suffira simplement d'avertir le navigateur qu'il va devoir interpréter une instruction JavaScript en encadrant cette instruction par les tags HTML classiques pour obtenir :

<Script language="javascript">
document.write(document.lastModified) ;
</Script>

et le tour est joué. Pour plus de convivialité, nous pouvons mettre un commentaire devant la date en ajoutant :

<Script language="javascript">
document.write("Date de dernière modification : " + document.lastModified) ;
</Script>

et nous obtiendrons à peu près ce que vous voyez en tête de toutes les pages de ces leçons (allez regarder pour voir).
Voila. Pas plus difficile que ça. Copiez et collez simplement ce petit bout de code dans votre page et vous verrez le résultat. Entre nous, bon élèves comme vous êtes, j'espère bien qu'au lieu de copier/coller, vous aller retaper ce code pour bien comprendre comment ça marche... Mais bon...
Bien entendu, la date affichée sera dans le format du navigateur, à l'américaine et pas du tout commme nous en avons l'habitude. Mais est-ce bien important ? Oui ? Alors il va nous faloir jongler pour arriver à un résultat plus clair. C'est ce que nous allons voir plus bas.

 


 
 



Mise en forme de la date 

Pour la mise en forme de la date, je ne vais pas recopier ce que j'ai déjà fait dans d'autres leçons et je vous engage à aller voir les leçons suivantes :

L'objet Date (Généralités)
L'objet Date sur la date courante (lecture seule)
L'objet Date sur d'autres dates (écriture et lecture)

si jamais vous ne les avez pas encore vues.

Pour ce ui nous concerne, il faut d'abord créer un objet Date() à la date de dernière mise à jour. L'instruction est donc :

var DerMaj = new Date(document.lastModified); // prend la date der maj

Ce qui fonctionne parfaitement en local comme sur serveur avec Netscape 4.75 et MIE 6.0. Là où le problème va se corser pour nous, c'est que comme nous l'avons vu dans la leçon L'objet Date sur d'autres dates (écriture et lecture) le positionnement d'un objet Date() à une date particulière nécessite un format bien défini. Tant que nous utiliserons des serveurs et des navigateurs qui renvoient un format acceptable (Netscape 4.7 et MIE 6.0) tout se passera bien, mais quand nous voudrons nous pencher sur le cas des navigateurs tels que Netscape 6.2 et son frère Mozilla 1.0.0+ (sur serveur seulement), nous obtiendrons la désagréable remarque suivante : "invalid object Date" ("Objet Date non valide") et le résultat suivant : "NaN/NaN/NaN" au lieu de "jour/mois/année". Simplement parce que ce qui est renvoyé par document.lastModified ne correspond pas à ce qu'il faut. Alors qu'en local, ça marche parfaitement.

 


   


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.