Introduction à JavaScript: Cours N° 04

IV. Utiliser les objets du navigateur
IV-A. L'objet window
IV-B. L'objet window.navigator
IV-C. L'objet window.document

IV. Utiliser les objets du navigateur

 Script d'affichage des propriétés des objets du document
Ce script affiche les propriétés (et la valeur de ces propriétés) d'un élément choisi dans une liste. Il permet, entre autres, pour un même élément de mettre en évidence les différentes propriétés utilisées par les navigateurs (pour cela il doit être exécuté sur différents navigateurs).

IV-A. L'objet window

Cet objet représente le navigateur contenant l'objet document. Il est créé lors de l'ouverture du navigateur et contient toutes les propriétés et les méthodes de gestion de la fenêtre. Ses propriétés et ses méthodes peuvent être appelées sans devoir préciser l'objet window.

Une méthode de l'objet window

window.alert ("Coucou");

L'objet window est sous-entendu

alert("Coucou");

IV-B. L'objet window.navigator

Cet objet contient les propriétés du navigateur (nom, version, langue, etc...). On utilise de moins en moins souvent cet objet pour identifier la navigateur de l'utilisateur car certaines propriétés peuvent être modifiées (cas d'Opera). On utilisera plutôt certaines propriétés de l'objet document pour réaliser ces tests.

IV-C. L'objet window.document

L'objet document regroupe toutes les méthodes de gestion de la page Web. Ses fonctions permettent de cibler un objet (un paragraphe par exemple) pour modifier ses attributs.

Pour modifier les attributs d'un élément (paragraphe, lien, etc...), celui-ci doit être au préalable identifié par un identifiant unique (attribut id). L'objet est ensuite ciblé grâce à la méthode getElementById() contenue dans l'objet document. Si l'élément possédant cet id n'existe pas la méthode renvoie null.

Utilisation des objets contenu dans le document

//objet contient toutes les propriétés de idElement var monElement = document.getElementById("idElement") ; //pour modifier la taille de la police monElement.style.fontSize = "12px"; //pour modifier la police monElement.style.fontFamily = "Arial"; //pour modifier le contenu du paragraphe (balises div, span, p et body uniquement). monElement.innerHTML = "Salut tout le monde !!";

Les attributs définis dans les feuilles de styles (CSS) peuvent être modifiés par l'objet style de l'élément. Cependant, cela ne modifie pas la valeur de la feuille de style qui reste la valeur par défaut.