12.

LES OBJETS DU NAVIGATEUR

12.1.Généralités

Il existe aussi plusieurs objets en JS rattachés à la fenêtre, à la page et au navigateur.

Il sont appelés window, document et navigator. Ce sont 3 classes distinctes - sans lien entre
elle – puisque l’héritage n’existe pas en JS. Nous étudierons chaque classe l’une après l’autre.
Cependant, l’objet document fait partie de l’objet window.

12.2.Arborescence

Je présente ici l’arborescence des objets de JS. Elle comprend les 3 objets principaux
ainsi que tous les « sous-objets » contenus dans chaque objet principal.

navigator document
plugins [] all /
layers
window frames[]

parent images[]

frames[] anchors[]

top applets[]

opener plugins[]

history links[]

location forms []

external elements
[]
screen

event

document

13.L’OBJET NAVIGATOR
Il s’agit – comme son nom l’indique – de votre navigateur, ou votre browser.
L’objet navigator possède toutes les caractéristiques de votre navigateur ainsi
que certaines de votre ordinateur. Cela peut s’avérer utile pour tester la
compatibilité de certains codes avec un browser.
L’objet navigator étant intégré dans le langage, il n’est pas nécessaire de
créer une instance de cette classe.

13.1.Les propriétés de navigator

Toutes ces propriétés ne font que donner des informations sur votre type de
navigateur. Pour y accéder, on suit la syntaxe habituelle d’un objet.

Syntaxe :

Var variable = navigator.propriété ;

Les propriétés qui suivent fonctionnent sous tous les navigateurs

 appCodeName : nom de code du navigateur.
 appName : nom complet du navigateur.
 appVersion : numéro de version du navigateur ainsi que d’autres
informations de plate-forme.
 userAgent : informations de appCodeName et de appVersion réunies.

13.2.Les méthodes de navigator

Dans cette partie, je vous cite quelques méthodes de navigator,
Syntaxe :

variable = navigator.méthode() ;

 javaEnabled()
 taintEnabled()

13.4.Exemple
Le but est d’afficher les informations du navigateur

<script language="Javascript">
document.write (navigator.appCodeName + "<br>");
document.write (navigator.appName + "<br>");
document.write (navigator.appVersion + "<br>");
document.write (navigator.userAgent + "<br>");
</script>
15. L’OBJET DOCUMENT
Il s’agit – comme son nom l’indique – de la page en cours d’exécution. Tous
les éléments de la page sont des propriétés ou des méthodes de document.
L’objet document étant intégré dans le langage, il n’est pas nécessaire de
créer une instance de cette classe.
L’objet document fait partie de l’objet window, mais il n’est pas
nécessaire de préciser le suffixe "window."

15.1. Les propriétés de document

Toutes ces propriétés correspondent à des éléments de la page ouverte. On
les utilise grâce à la syntaxe habituelle.

Syntaxe :

document.propriété;


 lastModified : date de dernière modification du fichier source
 fileSize : taille de la page en octets.
 mimeType : type du document chargé.
 URLUnencoded : URL complète de la page, avec les caractères spéciaux
encodés.
 URL : URL de la page.
 protocol : protocole de chargement de la page.
 domain : domaine de l’URL complète de la page.

Exemple 15.1 :

<script language="Javascript">
document.write ("Taille du fichier : " + document.fileSize + "<br>");
document.write ("Type mime : " + document.mimeType + "<br>");
document.write ("Jeu de caractères : " + document.defaultCharset +
"<br>");
document.write ("URL décodée : " + document.URLUnencoded + "<br>");
document.write ("URL : " + document.URL + "<br>");
document.write ("Protocole : " + document.protocol + "<br>");
document.write ("Dernière modification : " + document.lastModified +
"<br>");
 </script>

15.2. Les méthodes de document

L’objet document possède de plusieurs méthodes, dont certaines que nous
avons déjà vu précédemment.

Syntaxe :

variable = document.méthode();

Certaines propriétés ne nécessitent pas de préciser le suffixe window. pour

fonctionner. C’est notamment le cas des boites de dialogue.

Je cite quelques méthodes :

 getElementById(ID) : renvoie un objet HTML en fonction de son ID. A ne

pas confondre avec le Name.
 getElementsByName(nom) : renvoie un objet HTML en fonction de son
name.
 getElementsByTagName(type) : renvoie un tableau de toutes les balises
HTML du type passé en paramètre.

Exemple 15.2 :

<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<script language="Javascript">
function f() {
var tab = document.getElementsByTagName ("input");
var result;
for (i = 0; i < tab.length; i++) {
result = result + " " + (tab[i].value);
}
document.form1.result.value = result;
}
</script>
</HEAD>
<BODY>
<form name="form1">
<input type="text" name="1" value=" "><br/>
<input type="text" name="2" value=" "><br/>
<input type="text" name="3" value=" "><br/>
<input type="text" name="4" value=" "><br/>
<input type="text" name="5" value=" "><br/>
<input type="button" value="click!" name="click" onClick="f();"><br/>
<textarea rows=4 cols=40 name="result"></textarea>
</form>
</BODY>
 </HTML>

15.4. Les objets de document

L’objet document contient plusieurs autres objets assez réduits que je
présente dans cette partie.

Syntaxe :

variable = document.objet.propriété ;
variable = document.objet.méthode() ;

Nous préciserons ici que tout élément de la page est en soit un objet de document. On
y accède selon la syntaxe ci-dessus. Il serait trop lourd de donner la liste des éléments, qui
sont répertoriés dans tout cours HTML digne de ce nom

15.4.3.L’objet forms

Il s’agit d’un tableau contenant tous les formulaires du document. Il possède une
propriété – elements[] – qui est un tableau de tous les éléments de formulaire.

Syntaxe :

document.forms[i].elements[j] ;

L’objet forms permet de travailler avec les formulaires de la page HTML. Cet Objet peut être
mis en référence soit par sa position dans le tableau des formulaires contenus par un
document, soit par son nom (si vous assignez un identifiant à l’attribut NAME à l’intérieur de
la balise <FORM>. Si un seul formulaire apparaît dans le document, il est référencé de la
façon suivante :
document.forms[0] ;

Mais si vous assignez un nom au formulaire, indiquez simplement le nom du formulaire dans
la référence :
document.formName;
En plus de garder une trace de chaque type d’élément à l’intérieur d’un formulaire,
l’explorateur maintient également une liste de tous les éléments de contrôle à l’intérieur d’un
formulaire. Cette liste est un autre tableau, avec des éléments énumérés selon l’ordre
d’apparition des étiquettes HTML.

Accès aux propriétés

Vous pouvez définir des attributs NAME, ACTION, METHOD et ENCTYPE. Chacun de ces
derniers est une propriété d’un objet FORM, que l’on peut utiliser en minuscule.

document.forms[0].action

document.formName.action

Pour changer n’importe laquelle de ces propriétés, assignez-leur simplement de nouvelles

valeurs :

document.forms[0].action= "valeur "

La propriétés FORM.ELEMENTS[ ]

En plus de garder une trace de chaque type d’élément à l’intérieur d’un formulaire,
l’explorateur maintient également une liste de tous les éléments de contrôle à l’intérieur d’un
formulaire. Cette liste est un autre tableau, avec des éléments énumérés selon l’ordre
d’apparition des étiquettes HTML.

Exemple : Dans cet exemple on cherche les éléments de type text et, pour chacun d’entre eux,
on place une chaîne vide dans la propriété value.

<html>

<head></head>

<body>

<form name="formu1">

<input type="text" name="input" value=" ">

<input type="button" name="bouton"

value="vérifier" >

</form>

<script language="javascript">

var form=window.document.formu1;

form.input.value="aaac "
form.input.name="abcd "

alert(form.input.name);

</script>

</body></html>

Exemple : Lire une valeur dans une zone de texte

Créer un formulaire qui contient une zone de texte et un bouton. Dans cette zone de texte,
entrez une valeur et appuyez sur le bouton pour vérifier celle-ci : Lorsqu'on clique le bouton
"vérifier", JavaScript appelle la fonction verifier() à laquelle on passe le formulaire dont le
nom est formu1 comme argument et cette affiche ce que vous avez écrit.

<html>

<head>

<script language="javascript">

function verifier(formu1)

{ var test=document.formu1.input.value;

alert("vous avez écrit : "+test);}

</script>

<body>

<form name="formu1">

<input type="text" name="input" value=" ">

<input type="button" name="bouton"

value="vérifier" onclick="verifier(formu1)">

</form>

</body></html>

Exemple : Ecrire une valeur dans une zone de texte

Créer un formulaire qui contient :

une zone 1 de texte

un bouton

une zone 2de texte

Entrez une valeur quelconque dans la zone1. Appuyer sur le bouton pour afficher cette valeur
dans la zone 2.

<html><head>

<script language="javascript">

function afficher(formu2){

var test_en=document.formu2.input.value;

document.formu2.output.value=test_en;}

</script>

</head>

<body>

<form name="formu2">

<input type="text" name ="input" value="">

zone de texte d'entrée <br>

<input type="button" name="bouton" value="afficher"

onclick="afficher(formu2)"><br>

<input type="text" name="output" value=" "> zone de texte de sortie

</form></body></html>

L’objet button

Le bouton est un des objets les plus simples à écrire. L’objet button possède seulement
certaines propriétés qui sont rarement consultées ou modifiées dans les scripts d’aujourd’hui.
De loin, le manipulateur d’événement le plus utile de l’objet button est onClick. Il déclenche
une action dès que l’utilisateur clique sur un bouton.

<input type="button" value="Afficher"

onclick="afficher(this.form)" />

L’objet checkbox
Une case à cocher est également un élément simple de l’objet FORM. La propriété principale
d’un objet checkbox indique si la case est cochée. La propriété checked est une valeur
booléenne : true si la case est cochée, false dans le cas contraire.

Exemple : Dans cet exemple la valeur de la propriété checked détermine la boîte d’alerte que
l’utilisateur visualise

<html><head>

<script language="javascript">

function choiprop(){

if (document.forms[0].prop1.checked)

alert(" la case est cochée");

else{

alert("la case n'est pas cochée");

}}

</script></head>

<body>

<form name="formu3">

<input type="checkbox" name="prop1" > Choix numéro 1 <br>

<input type="button" value="quel est votre choix"

onclick="choiprop()">

</form>

</body></html>