COURS JavaScript


Accueil | Les objets JavaScript : L'objet document


Introduction

Pour ce qui concerne les généralités sur les Objets JavaScript, ceux et celles qui ne l'ont pas encore vu, peuvent aller regarder Les objets dans la rubrique "Les éléments de base du langage JavaScript".

L'objet document (écrit en minuscules selon la syntaxe JavaScript), est purement et simplement la page HTML que vous êtes en train de regarder en ce moment dans la fenêtre de votre Navigateur. Rien de plus, mais rien de moins non plus. C'est l'un des principaux objets JavaScript. Certainement même le plus important. En effet, c'est lui qui contient tous les autres objets de votre page HTML. En particulier, l'objet form (en minuscules aussi) qui représente un formulaire à l'intérieur de la page HTML, qui lui même contiendra les objets que vous y aurez placés, comme des champs de texte, des boutons radio, des cases à cocher etc. Qui sont eux mêmes des objets JavaScript. Tous ces objets, comme tous les objets JavaScript, posséderont des propriétés pour les décrire, et on pourra faire appel aux méthodes qui leurs sont attachées pour en faire quelque chose. Mais tous ces objets, du formulaire aux éléments de celui-ci, feront parti de l'objet document qui les contient.

Comme il ne peut y avoir à un moment donné qu'un document et un seul de chargé dans la fenêtre de votre Navigateur (la page HTML qui est affiché sous vos yeux ébahis par cette merveille de la technologie moderne), l'objet document ne possède pas la propriété name qui permettrait de le distinguer d'un petit copain ouvert en même temps dans la même fenêtre. Pratique non ? Si bien que pour faire appel au document chargé dans la fenêtre de votre navigateur (ou celui du client), nous n'aurons qu'à écrire : document sans autre forme de procès. Puisqu'il n'y a aucun risque de confusion.

A ce propos, il est important de savoir comment le document se charge dans la fenêtre de votre navigateur. Lorsque le client lance une requête sur Internet (c'est lorsque l'on demande de consulter une adresse Internet de la forme http:// etc.), le réseau va chercher le serveur sur lequel se trouve la page demandée par la requête. Lorsqu'il l'a trouvé, le serveur en question en fait une copie qui est renvoyée vers l'ordinateur qui a lancé la requête. Cette copie est d'abord stockée dans la zone "cache mémoire" de votre navigateur, puis une autre copie est stockée dans la zone "cache disque" de votre navigateur. Le Navigateur prend alors la copie de la zone "cache mémoire" et interprète le code HTML et JavaScript au besoin, pour vous afficher le résultat de cette interprétation dans la fenêtre de votre Navigateur. C'est cette interprétation que vous avez sous les yeux.

 


La propriété .location de l'objet document

Type de donnée Chaîne de caractères
Lecture oui
Ecriture oui

Contenu : Le contenu de document.location, n'est ni plus ni moins que ce que vous pouvez lire en haut de votre navigateur, dans la barre d'adresse. C'est l'adresse de la page HTML d'origine que vous êtes en train de lire.
Nous avons déjà utilisé cette propriété dans les exemples de la boîte à outils sur la redirection de l'utilisateur selon la nature et la version de son Navigateur. Cette propriété est en lecture et en écriture. C'est-à-dire que nous pouvons non seulement la lire, c'est-à-dire voir ce qu'elle contient (dans quel état elle est), mais encore nous pouvons la modifier, c'est-à-dire en changer la valeur, ce qui a pour effet de charger une autre page dans la fenêtre du Navigateur. C'est la même chose que de lancer une requête sur internet.

L'accès au contenu de la propriété .location de l'objet document se fait par l'instruction :

document.location

Pour mettre cette valeur dans une variable quelconque (par exemple LaLocation, attention à ne pas utiliser de mots réservés comme noms de variables), il n'y a qu'à écrire :

LaLocation = document.location

Ce qui mettra dans la variable LaLocation, la valeur du contenu de la propriété .location de l'objet document en cours de lecture dans votre Navigateur.

Par exemple, si vous voulez voir le contenu de cette propriété pour la page que vous êtes en train de lire en ce moment, cliquez sur le bouton ci dessous. Et comparez avec ce que vous voyez dans la barre d'adresse de votre Navigateur.


La propriété .lastModified de l'objet document

Type de donnée Chaîne de caractères
Lecture oui
Ecriture non

Contenu : Le contenu de document.lastModified, comme son nom l'indique (last en anglais = dernier, et Modified = Modifié (participe passé de modifier)), représente la date de dernière modification du document que vous êtes en train de regarder dans la fenêtre de votre Navigateur favori. Vous savez que chaque fois que vous enregistrez un document (quel qu'il soit) sur un disque dur d'ordinateur, la date et l'heure de cet enregistrement sont stockés quelque part avec ce document. C'est ce renseignement que va lire la propriété .lastModified de l'objet document.

Attention, ce n'est pas un objet JavaScript de type "date", mais bien une simple chaîne de caractères. Nous verrons plus tard comment convertir cette chaîne de caractères en objet date, et l'exploiter pour afficher la date de dernière modification dans la page courante, comme je le fais dans toutes les pages de ce site. Pour les curieux(ses), et les plus avancé(e)s qui voudraient savoir tout de suite, vous pouvez afficher le source de cette page, et aller voir comment je fais. Mais ça n'est pas l'objet de cette leçon.

L'accès au contenu de cette propriété se fait par l'instruction :

document.lastModified

Faites très attention au "M" majuscule. Vous savez que JavaScript est sensible à la "casse" des caractères (casse = majuscule ou minuscule en typographie)

Pour mettre cette valeur dans une variable quelconque (par exemple LaDateDeModif, attention à ne pas utiliser de mots réservés comme noms de variables), il n'y a qu'à écrire :

LaDateDeModif = document.lastModified

Ce qui mettra dans la variable LaDateDeModif, la valeur du contenu de la propriété .lastModified de l'objet document en cours de lecture dans votre Navigateur.

Par exemple, si vous voulez voir le contenu de cette propriété pour la page que vous êtes en train de lire en ce moment, cliquez sur le bouton ci dessous. Et comparez avec ce que vous voyez en tête de cette page, juste en dessous du titre "Cours JavaScript"

ATTENTION !!
Selon le navigateur qu'utilise le client, la chaîne de caractère sera différente. La date de dernière modification sera bien sûr la même, mais sa représentation sera différente. Si vous avez Netscape et MIE, essayez de lire cette page sous les deux Navigateurs, et vous comprendrez toute la galère du programmeur pour satisfaire tout le monde. Par exemple, au moment où j'enregistre cette page, j'obtient :
11/01/1999 11:45:20 sous MIE 5.0
et
Monday, November 01, 1999 11:45:20 sous Netscape 4.6Fr
Allez donc savoir pourquoi !!! Lorsque ces deux là se mettront d'accord sur tout, nous aurons moins de mal à programmer (on peut toujours rêver hein ?).


La propriété .title de l'objet document

Type de donnée Chaîne de caractères
Lecture oui
Ecriture non

 

Contenu : Le contenu de document.title, (title = titre en anglais) n'est ni plus ni moins que ce que vous avez mis entre les balises HTML <Title> ... et </Title> de votre page HTML. C'est ce qui apparaît en général dans la barre de titre de votre Navigateur (en général en bleu, tout en haut à gauche). Ici aussi, c'est une simple chaîne de caractères. L'utilité de cette donnée reste à prouver, puisqu'elle est visible dans le Navigateur. Nous verrons cependant que parfois, elle peut s'avérer utile pour tester si une page à bien le titre que nous voulons, et entreprendre une action quelconque ne fonction de ce titre.

L'accès au contenu de cette propriété se fait par l'instruction :

document.title

Pour mettre cette valeur dans une variable quelconque (par exemple LeTitre, attention à ne pas utiliser de mots réservés comme noms de variables), il n'y a qu'à écrire :

LeTitre = document.title

Ce qui mettra dans la variable LeTitre, la valeur du contenu de la propriété .title de l'objet document en cours de lecture dans votre Navigateur.

Par exemple, si vous voulez voir le contenu de cette propriété pour la page que vous êtes en train de lire en ce moment, cliquez sur le bouton ci dessous. Et comparez avec ce que vous voyez dans la barre de titre de votre Navigateur, tout en haut à gauche. En bleu en général.


La méthode .writeln du l'objet document

Comme nous le savons déjà, une méthode, pour un objet JavaScript, représente en quelque sorte ce que cet objet est capable de faire. Nous avons vu ça au chapitre sur les objets JavaScript.

La méthode .writeln de l'objet document, représente la capacité de l'objet document à écrire du texte dans une page HTML en cours de chargement. Mais ATTENTION ! je dis bien écrire en cours de chargement. Pas de modifier une page déjà chargée. Ce qui n'est pas possible.

On sait que le navigateur charge la page HTML, l'interprète, et affiche à l'écran le résultat de l'interprétation qu'il a fait du code HTML. Mais il ne fait que placer à l'endroit voulu, le texte les images etc. qui sont décrits dans la page HTML. Supposons maintenant que nous voulions écrire à l'écran quelque chose que nous ne connaissons pas au moment où nous rédigeons notre code HTML. Par exemple, la date du jour et l'heure où l'utilisateur lis la page en question. Ce jour change tout le temps, et comme cette page peut être lue à n'importe quel moment par un utilisateur quelconque, on ne peut pas la mettre en "dur" dans le code HTML. Ce serait faux à chaque fois. Il faut donc trouver un moyen d'afficher (écrire) cette information au moment même où la page se charge dans le Navigateur. C'est exactement ce pour quoi est faite (tout exprès, comme le monde est bien fait !!!) la méthode .writeln de l'objet document et qui va nous permettre de réaliser cette petite prouesse. La méthode .writeln permet de placer une chaîne de caractère n'importe où dans le document en cours de chargement. L'invocation de cette méthode se fera donc à l'endroit même où nous voulons écrire la chaîne de caractères en question. La syntaxe exacte est :

document.writeln("chaîne de caractères quelconque ")

ou encore, puisque nous savons utiliser les variables :

document.writeln(LigneInseree)

en supposant que la variable LigneInseree contienne une chaîne de caractères.

Bien sûr, vous avez toutes et tous maintenant deviné que nous avions ici affaire à un script à exécution immédiate. Et que l'invocation de la méthode document.writeln() devra se trouver entre les Tags <script language="javascript"> et </script> je ne vous ferais pas l'affront de vous le rappeler :-)) (quoi que ...). D'une manière générale, et pour simplifier pour le moment, il faut retenir que la méthode .writeln de l'objet document s'utilise surtout dans des scripts à exécution immédiate, puisqu'elle est justement destinée à être utilisée au bon endroit et au bon moment.

Pour illustrer cette méthode, j'ai créé un exemple qui affiche une page en haut de laquelle (juste en dessous de l'introduction habituelle) je fais apparaître le jour et l'heure auxquels l'utilisateur consulte l'exemple. Allez le regarder, et rechargez la page autant de fois que vous voulez en utilisant les boutons "Actualiser" de votre Navigateur (sous MIE) ou "Recharger" sous Netscape afin de constater que les secondes changent à chaque fois.

Exemple de page personnalisée.



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.