IV Les principaux objets

Comme vu précédemment, un certain nombre díobjets sont prédéfins par la somme javascript (Voir le DOM). Certains sont plus utilisés que díautres. Ce sont ceux-ci que nous allons découvrir.

IV.1 Líobjet window

Cet objet est le parent de tous les autres.

Par défaut, si vous utilisez une méthodes ou une propriété sans préciser líobjet auquel elle se rattache, cíest alors à líobjet window quíelle est associée.

window.open() équivaut à open().

a. Les propriétés

1. Récupération des propriétés

Ces propriétés peuvent être récupérées en utilisant la fonction for déjà vu dans le chapitre précédent. Il faut juste supprimer de líaffichage à lëecran les éléments qui ne sont ps des propriétés comme les méthodes (function).

Attention

Les propriétés ne sont pas toutes gérées par les différents navigateurs. Certains respectent la norme (Mozilla, Netscape ..) et díautres non (Internet Explorer). Il existe des différences importantes qui ne facilitent pas le travail du développeur.

Ces différences sont présentées dans le tableau ci-dessous.

Les résultats proviennent de Netscape version 7.01, et IE version 6.0.

Mozilla version 1.1b utilise le même moteur que Nestcape et le résultat est identique. Les tests avec Opera et Konqueror níont pas permis díobtenir de résultats du fait certainement des privilèges appliquées sur ces deux navigateurs.

Netscape 7.01

Internet Explorer 6.0

window.closed

window.content

window.controllers

window.crypto

window.defaultStatus

window.directories

window.frames

window.history

window.innerHeight

window.innerWidth

window.length

window.locationbar

window.menubar

window.name

window.opener

window.outerHeight

window.outerWidth

window.pageXOffset

window.pageYOffset

window.parent

window.personalbar

window.pkcs11

window.screen

window.screenX

window.screenY

window.scrollbars

window.scrollX

window.scrollY

window.self

window.sidebar

window.status

window.statusbar

window.toolbar

window.top

window.clientInformation

window.clipboardData

window.closed

window.defaultStatus

window.document

window.event

window.external

window.frameElement

window.frames

window.history

window.Image

window.length

window.location

window.name

window.navigator

window.offscreenBuffering

window.onafterprint

window.onbeforeprint

window.onbeforeunload

window.onblur

window.onerror

window.onfocus

window.onhelp

window.onload

window.onresize

window.onscroll

window.onunload

window.opener

window.Option

window.parent

window.screenLeft

window.screen

window.screenTop

window.self

window.status

window.top

window.window

Pour fournir un code portable il est de votre intérêt de ne pas privilégier líun ou líautre des navigateurs et par conséquent de níutiliser dans la mesure du possible que les propriétés communes aux deux navigateurs.

Le tableau ci-dessous indique ces propriétés communes.

Numéro du paragraphe

Propriétés communes à Netscape 7.01 et Internet Explorer 6.0

window.closed

window.defaultStatus

window.frames

window.history

window.length

window.name

window.opener

window.parent

window.screen

window.self

window.status

window.top

Remarque

Il est à noter que bizaremment la propriété document níest pas présente. Netscape et Mozilla ne la proposent pas même si cíest une propriété importante du DOM.

Afin díobtenir ce tableau jíai utilisé le programme suivant exécuté sous les différents navigateurs et sauvegardé au format texte.

Jíai ensuite isolé les propriétés, ainsi que les objets que líon retrouve aussi sous forme de propriétés. Une fois ceci effectué, jíai effectué une différence entre les deux fichiers (Netscape et IE) et tout ceci via un script shell sous Unix.

Le format brut des résultats est sous la forme suivante :

window.parent = [object Window]

window.top = [object Window]

window.scrollbars = [object BarProp]

window.name =

window.scrollX = 0

window.scrollY = 0

window.scrollTo = function scrollTo() { [native code] }

window.scrollBy = function scrollBy() { [native code] }

window.getSelection = function getSelection() { [native code] }

window.scrollByLines = function scrollByLines() { [native code] }

Le programme javascript est le suivant :

<HTML>

<HEAD>

</HEAD>

<BODY>

for(var i in window)

{

document.write("window."+i+" = " + window[i] + "<BR>");

}

</script>

</BODY>

</HTML>

2. closed

Cette propriété permet de tester líétat díune fenêtre ouverte ou fermée.

closed prend la valeur true si la fenêtre testée a été fermée.

Cette propriété est souvent utilisée en même temps que la méthode open() qui permet elle díouvrir une fenêtre afin de savoir si la fenêtre en question est bien ouverte.

Exemple

Code

<HTML>

<HEAD>

</HEAD>

<BODY>

var fenetre=window.open("open.html","f2");

if(fenetre.closed)

{

alert("Fenetre fermee ->valeur = " + fenetre.closed);

}

else

{

fenetre.document.bgColor="blue";

alert("Fenetre ouverte ->valeur = " + fenetre.closed);

fenetre.close();

if(fenetre.closed)

{

alert("Fenetre fermee ->valeur = " + fenetre.closed);

}

</script>

</BODY>

</HTML>

Explications

La ligne 6 permet líouverture díune nouvelle fenêtre (objet fenetre) suite au chargement de la page qui contient le javascript.

La ligne 7 permet díeffectuer un test pour déterminer líétat de la nouvelle fenêtre.

Les lignes 13 à 18 permettent díenchaîner un ensemble díactions lorsque la nouvelle fenêtre est ouverte.

13 Mise en bleu du fond de cette nouvelle fenêtre

14 Avertissement de líouverture de la fenêtre

15 Fermeture de la nouvelle fenêtre

16 Nouveau test et affichage de líétat ´ fermé Ş de la nouvelle fenêtre

3. Defautlstatus

Cette propriété concerne le contenu de la zone située en dessous de la fenêtre díaffichage. Vous pouvez y insérer des informations textes.

Cíest à cet endroit que vous voyez généralement apparaître líadresse de líURL avant le clic sur le lien hypertexte (Figure 1) ou líinformation indiquant que le document est chargé (figure 2).

Figure 1

Figure 2

Vous pouvez aussi y faire défiler du texte au moyen díune petite astuce.

Exemple

Code

<HTML>

<HEAD>

var msg= " Bienvenue sur mes pages Web,"

+" Depechez vous ENTREZ ! ";

function scroll_status()

{

if(msg.length>0)

{

window.defaultStatus=msg;

window.setTimeout('scroll_status()',100);

msg=msg.substring(1,msg.length);

}

else

{

window.defaultStatus="--> Jacquenod Frédéric";

}

</script>

</HEAD>

</BODY>

</HTML>

Explications

Ligne 4 et 5 déclaration díune variable msg qui contient le texte qui va défiler.

Ligne 7 création díune fonction qui est activée lors du chargement de la page html (ligne 22).

Líastuce est díutiliser la propriété length de líobjet window et de supprimer la première lettre de la variable msg à chaque passage et ceci tant que la longueur de msg níest pas nulle (ligne 11 à 13).

Lorsque cette taille est nulle on affecte à la propriété defaultStatus une nouvelle valeur qui reste alors fixe dans la barre de status (voir copie díécran).

Capture écran

Attention

Il existe une propriété status (voir paragraphe 12). La différence est minime mais existe. Líeffet de la propriété DefaultStatus est permanente. Si un événement vient écrire par dessus le texte, une fois lëévénement terminé, líaffichage réapparaît. Cela montre aussi que la propriété status a priorité sur la propriété DefaultStatus.

4. frames

Cette propriété est un tableau qui contient les informations sur tous les codes en rapport avec votre fenêtre et donc avec líobjet window (voir aussi líobjet frame).

Attention

Il ne faut pas confondre la propriété frames avec líobjet Frame.

La création díune frame permet de décomposer votre page en plusieurs sous-ensemble díaffichage. Chaque sous-ensemble est alors ´ indépendant Ş.

Pour cela les balises frameset et frame doivent être utilisées dans le fichier html chargé initialement pour effectuer ce découpage.

La fenêtre initiale est le parent des sous-fenêtres.

Ce parent est représenté par líobjet top qui dépend lui-même de líobjet window (Voir DOM).

La propriété frames correspond aux balises html frame.

Exemple

Nous découpons en trois zones une fenêtre afin díy afficher des contenus suivant líinteraction de líutilisateur sur le menu contenu dans la frame de gauche.

Le DOM de ce document est le suivant :

Top

Ø MenuGauche

Ø contenuCentre

Ø menuBas

Code (page de départ)

<HTML>

<HEAD>

</FRAMESET>

</FRAMESET>

</HEAD>

<BODY>

</BODY>

</HTML>

Code (menu gauche -> menuGauche.html)

<HTML>

<HEAD>

</HEAD>

<BODY>

<U>haut droit</U><BR>

<INPUT TYPE=BUTTON

onclick="window.top.frames[1].location='http://www.google.fr'"

VALUE="Google !">

<INPUT TYPE=BUTTON

onclick="top.frames[1].location='http://www.altavista.fr'" VALUE="Altavista !">

<INPUT TYPE=BUTTON

onclick="top.contenuCentre.location='http://www.yahoo.fr'" VALUE="Yahoo !">

<BR><BR><U>bas droit</U><BR>

<INPUT TYPE=BUTTON

onclick="top.frames[2].contenuBasCentre.location='http://www.lycos.fr'" VALUE="Lycos !">

<INPUT TYPE=BUTTON

onclick="top.menuBas.contenuBasCentre.location='http://www.netscape.fr'" VALUE="Netscape !">

</BODY>

</HTML>

Explications

Lorsque vous cliquez sur un des boutons du menu de gauche, la page díaccueil du moteur de recherche choisi síaffiche dans la frame de droite (contenuCentre).

Captures écran

Remarque

Les propriétés, méthodes et objet rattachés au tableau frames sont les mêmes que pour window. En effet, la frame est elle-même une fenêtre. Il suffit donc de tout préfixer par le nom de cette frame pour atteindre les éléments de cette frame.

Remarque

Une frame peut elle-même à nouveau être décomposée en frame. Le schéma est alors un peu plus complexe. Par contre la méthode díaccès est la même.

Exemple

Reprenons lëexemple précédent en ajoutant un découpage en deux dans la frame du bas.

Le DOM de ce document est le suivant :

Top

Ø menuGauche

Ø contenuCentre

Ø menuBas

- menuBasGauche

- contenuBasCentre

Ou graphiquement

Code (page de départ)

<HTML>

<HEAD>

</FRAMESET>

</FRAMESET>

</HEAD>

<BODY>

</BODY>

</HTML>

Code (frame menu gauche -> menuGauche.html)

<HTML>

<HEAD>

</HEAD>

<BODY>

<U>haut droit</U><BR>

<INPUT TYPE=BUTTON

onclick="window.top.frames[1].location='http://www.google.fr'"

VALUE="Google !">

<INPUT TYPE=BUTTON

onclick="top.frames[1].location='http://www.altavista.fr'" VALUE="Altavista !">

<INPUT TYPE=BUTTON

onclick="top.contenuCentre.location='http://www.yahoo.fr'" VALUE="Yahoo !">

<BR><BR><U>bas droit</U><BR>

<INPUT TYPE=BUTTON

onclick="top.frames[2].contenuBasCentre.location='http://www.lycos.fr'" VALUE="Lycos !">

<INPUT TYPE=BUTTON

onclick="top.menuBas.contenuBasCentre.location='http://www.netscape.fr'" VALUE="Netscape !">

</BODY>

</HTML>

Code (page frame bas -> menuBas.html)

<HEAD>

</FRAMESET>

</HEAD>

Code (page frame base droite -> contenuBasCentre.html)

<HTML>

<HEAD>

</HEAD>

<BODY>

<U>haut droit</U><BR>

<INPUT TYPE=BUTTON

onclick="window.top.frames[1].location='http://www.google.fr'" VALUE="Google !">

<INPUT TYPE=BUTTON

onclick="top.frames[1].location='http://www.altavista.fr'" VALUE="Altavista !">

<INPUT TYPE=BUTTON

onclick="top.contenuCentre.location='http://www.yahoo.fr'" VALUE="Yahoo !">

<BR><BR><U>bas droit</U><BR>

<INPUT TYPE=BUTTON

onclick="top.frames[2].contenuBasCentre.location='h