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='http://www.lycos.fr'" VALUE="Lycos !">

<INPUT TYPE=BUTTON

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

</BODY>

</HTML>

Explications

Les boutons sous le texte ´ haut droit Ş permettrent líaffichage dans la frame située à ce niveau tandis que les bouton sous le texte bas effectuent líaffichage dans la frame bas droite.

Captures écran

5. history

Cette propriété est aussi un tableau. Il contient líhistorique de navigation associé à une fenêtre. Cíest-à-dire les contenus de líobjet history. Ces informations ne sont accessibles quíen lecture. Seuls les sites accédés sont présents dans cette liste. Un site qui nía pu être atteint níy est donc pas.

Pour obtenir les informations liées à cet objet, hormis length, il est nécessaire de posséder des privilèges qui par défaut ne vont sont pas donnés.

Pour les obtenir, il faut utiliser les propriétés de líobjet navigator.

Dans le cas de líhistorique, il faut posséder le privilège UniversalBrowserRead.

Exemple

Je viens de naviguer sur plusieurs sites et je désire obtenir la liste. Je suis tenter de faire un petit programme comme suit :

Code Version 1

function go()

{

// Affichage de la liste des sites visites

// Affichage du nombre de sites contenus dans ma liste

document.write("window.history.length = " + window.history.length+ "<BR>");

for(i=0;i<window.history.length;i++)

{

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

}

</script>

</HEAD><BODY>

</BODY></HTML>

Explications

La fonction go est activée lorsque líutilisateur clique sur le bouton ci-dessous.

Cette fonction récupère le nombre de lignes contenues dans líobjet history (Ligne 8) et les affiche via une boucle (Ligne 8 à 11).

Captures écran

Mais níayant pas le privilège de lecture, une erreur apparaît au niveau de la console javascript.

Le source suivant permet díobtenir le bon privilège et donc díafficher la liste des sites visités.

Code Version 2

function go()

{

// Affichage du nombre d'element dans la liste

document.write("window.history.length = " + window.history.length+ "<BR>");

// Modification des privileges sur l'objet navigator

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

// Affichage de la liste des sites visites

for(i=0;i<window.history.length;i++)

{

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

}

// Ouverture d'une nouvelle fenetre

f2 = window.open("","","","");

// Affichage dans la nouvelle fenetre du 3eme site visite (0,1,2 ...)

f2.document.location=history[2];

}

</script>

</HEAD><BODY>

</BODY>

Explications

La ligne 8 permet díactiver le bon droit. Une fenêtre est ouverte pour demander à líinternaute si il accepte de donner ce privilège au programme chargé.

Ajout de líouverture díune fenêtre contenant le 3^ème site visités (la liste commence à 0).

Captures écran

6. length

Cette propriété permet díobtenir le nombre díéléments existant pour líobjet ciblé.

Dans le cas de líobjet frame vu précédemment, cette propriété indique le nombre de découpages effectués dans la fenêtre cible. Si, il níy a pas de découpage, la valeur renvoyée est alors 0.

Exemple

Reprise de líexemple vu au point 3.

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 bas -> menuBas.html)

<HEAD>

</FRAMESET>

</HEAD>

Code (menu bas gauche -> menuBasGauche.html)

<BODY>

document.write("window.top.length = " + window.top.length);

document.write("<br>window.top.menuBas.length = " + window.top.menuBas.length);

document.write("<br>window.top.contenuCentre.length = " + window.top.contenuCentre.length);

</script>

</BODY>

</HTML>

Explications

La frame menuBasGauche contient líaffichage du nombre de découpage effectué dans chaque fenêtre.

La fenêtre de départ (top) est découpée en 3 zones.

La fenêtre référencée par menuBas en 2 zones.

La fenêtre référencée par contenuCentre níest pas redécoupée (0).

Captures écran

7. name

Cette propriété contient le nom de la fenêtre. Ceci est vrai uniquement si la ce nom a été renseigné.

Pour le renseigner il existe plusieurs possibilités.

Ø Le renseigner directement dans la page html via la ligne :

window.name="nom de la fenêtre" ;

Ø Le renseigner au moment de líouverture díune fenêtre

¸ Lors du clic sur un lien hypertexte en utilisant líoption target

¸ Lors de líouverture en utilisant la méthode open et en y insérant le nom

Exemple

Code (page de départ)

15
16

function ouvrir()

{

window.open("name3.html","fenetre3","","");

}

</script>

</HEAD>

<BODY>

document.write("window.name avant = " + window.name);

window.name="fenetre1";

document.write("<BR>window.name apres = " + window.name);

</script>

<BR>

<A HREF=name2.html onClick='ouvrir()' TARGET=fenetre2>Cliquez et j'ouvre 2 fenetres</A>

</BODY></HTML>

Explications

Les lignes 3 à 6 permettent de créer une fonction nommée ouvrir qui lorsquíelle est appelée ouvre une fenêtre référencée fenetre3.

La ligne 11 permet díécrire dans la fenêtre de départ le texte indiqué ainsi que le nom de la fenêtre active. A ce moment de líexécution la fenêtre ne possède pas de nom.

La ligne 12 affecte à cette fenêtre sans nom le nom fenetre1.

La ligne 13 effectue le même travail que la ligne 11. Par contre à ce moment de líexécution, la fenêtre possède un nom (fenetre1).

La ligne 16-17 permet díinsérer dans la page html, un lien hypertexte qui va, lorsque líutilisateur clique dessus, ouvrir deux nouvelles fenêtres.

¸ Líune au moyen díun code javascript (onClick) qui fait appel à la fonction ouvrir.

¸ Lëautre simplement au moyen díun code html (target).

Les fichiers qui seront ouverts dans les deux nouvelles fenêtres contiennent le même code :

Code des nouvelles fenêtres (name2.html et name3.html)

<BODY>

document.write("window.name = " + window.name);

</script>

</BODY>

</HTML>

Captures écran

Ø Avant de cliquer sur le lien hypertexte

Ø Après le clic sur le lien hypertexte

8. opener

Cet objet renvoie, si il en possède un, le nom de la fenêtre parent en utilisant la propriété name.

Syntaxe

nom = window.opener.name ;

Exemple

Modifions le code de la page html name2.html vu précédemment.

On y ajoute líaffichage du nom de la fenêtre parent.

Code

document.write("window.name = " + window.name + "<BR>");

document.write("window.opener.name = " + window.opener.name);

</script>

</BODY></HTML>

Captures écran

9. parent

Cet objet permet díobtenir le nom de la frame díorigine (celle dans lequel est effectué le découpage) en líassociant avec la propriété name. Ce nom est celui associé à líoption name de la balise frame lors du découpage (<frame src="adresse" name="nom">).

Remarque

Cette propriété est aussi utilisée lors de líouverture de plusieurs fenêtres à líécran. Líune est forcément le parent des autres.

Syntaxe

nom = window.parent.name;

Exemple

Je modifie le fichier menBasGauche.html vu dans les paragraphes 4 (frames) et 6 (length) notamment en ajoutant líaffichage du nom du parent de la frame contenant ce fichier html.

Code de la page menuBasGauche.html

document.write("window.top.length = " + window.top.length);

document.write("<br>window.top.menuBas.length = " + window.top.menuBas.length);

document.write("<br>window.top.contenuCentre.length = " + window.top.contenuCentre.length);

document.write("<br>window.parent.name = " + window.parent.name);

</script>

</BODY></HTML>

Explications

La ligne 8 permet díafficher le nom de la frame parent de celle qui contient ce code html.

Captures écran

10. screen

Screen est un objet de window qui permet díobtenir les informations en rapport avec líaffichage X (graphique). Ses propriétés ne sont accessibles quíen lecture.

Attention

Cela concerne les propriétés de votre écran et non de la fenêtre du navigateur.

Exemple

Le programme suivant permet de récupérer les informations provenant de cet objet.

Code

var i=0;

for(var prop in window.screen)

{

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

}

</script>

</BODY></HTML>

Explications

Les lignes 4 à 7 permettent de récupérer, au moyen de la boucle for, les propriétés de líobjet screen.

Capture écran

Attention

Toutes les propriétés ne sont pas disponibles sur tous les navigateurs. Celles présentées ici proviennent díune utilisation de netscape. Seules les propriétés suivantes sont aussi disponibles sous IE :

Ø width contient la taille en pixels de la largeur de líécran

Ø height contient la taille en pixels de la hauteur de líécran

Ø colorDepth correspond au ´ nombre Ş de couleur par pixels

Ø availWidth correspond à la largeur effective de líécran (moins les bandes díétats)

Ø availHeight correspond à la largeur effective de líécran (moins les bandes díétats)

Remarque

Sous linux, quíil y ait ou non les barres díétat, la taille maximale de líécran est prise en compte. width et availWidth possèdent la même valeur (même conséquence pour height et availHeight, top et availTop Ö).

Capture écran sur MacX (barre díétat en bas et en haut)

11. self

Quelque soit le nom de la fenêtre, vous pouvez utiliser pour la nommer líobjet self qui par défaut représente cette dernière.

Exemple

Dans líexemple du paragraphe 4 (frames) il est ainsi possible de remplacer window.top.menuBas.length par self.top.menuBas.length.

Exemple

Code

<HTML>

<HEAD>

function ouvrir1()

{

f1 = window.open("http://www.google.com","google",

"height=100,width=100,screenx=50","");

self.document.bgColor="yellow";

}

</script>

</HEAD>

<BODY>

<INPUT TYPE=BUTTON NAME=B1

onClick='ouvrir1();í VALUE="Ouvrir Google">

</FORM>

</BODY>

</HTML>

Explications

La ligne 8 permet, lorsque líutilisateur clique sur le bouton défini ligne 14 de modifier la couleur de fond de la fenêtre qui contient ce code.

Ce code est identique à window.document.bgColor="yellow";

Captures écran

Ø Avant de cliquer sur le bouton

Ø Une fois le clic effectué

12. status

status permet díafficher des informations dans la barre de statut (barre en bas) de votre navigateur.

Voir aussi defaultStatus paragraphe 3.

Exemple

Code

<HTML>

<HEAD>

</HEAD>

<BODY>

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

</script>

</BODY>

</HTML>

Explications

Tant que la propriété status níest pas renseignée, si la souris passe sur le bouton défini ligne 8, le message ´ coucou Ş se substitue au message par defaut ´ à Jacquenod Frédéric Ş.

Une fois la propriété status renseignée, le passage sur le bouton de la souris ne provoque plus rien, le message est figé.

Captures écran

Ø Avant le passage de la souris sur le bouton ´ ici Ş

Ø Après le passage de la souris sur le bouton ´ ici Ş

13. top

Cette propriété est utilisée lors de la gestion des cadres (frames) ou de líouverture de multiples fenêtres.

Elle référence le cadre initial dont la fenêtre ou le sous-cadre est issu.

Top et parent sont identiques seulement et seulement si il níy a que deux niveaux de cadres ou de fenêtres (père -> fils).

Par contre, si il y a un ´ grand-père Ş (gp à père à fils), parent utilisé au niveau du cadre ou fenêtre ´ fils Ş (3^ème niveau), renvoie le ´ père Ş tandis que top renvoie le ´ grand-père Ş.

Exemple

Reprenons líexemple du paragraphe 4 (frames).

Je modifie le fichier menuBasGauche.html afin de voir la différence entre top et parent.

Code

<BODY>

document.write(top.document.location);

</script>

<FORM>

<U>Modification de moi-meme</U><BR>

<INPUT TYPE="BUTTON" NAME="b1" VALUE="Fond bleu" onClick='

parent.menuBasGauche.document.bgColor="blue";

parent.menuBasGauche.document.fgColor="green";

b1.value="Enfoncé"

onBlur='b1.value="Fond bleu"'

<INPUT TYPE="BUTTON" NAME="b2" VALUE="Fond rouge" onClick='

top.menuBas.menuBasGauche.document.bgColor="red";

top.menuBas.menuBasGauche.document.fgColor="yellow"

b2.value="Enfoncé"

onBlur='b2.value="Fond rouge"'

<HR>

<U>Modification de la fenetre haut Gauche</U><BR>

<INPUT TYPE="BUTTON" NAME="b3" VALUE="Fond vert" onClick='

top.menuGauche.document.bgColor="green";

top.menuGauche.document.fgColor="blue"

b3.value="Enfoncé"

onBlur='b3.value="Fond vert"'

<INPUT TYPE="BUTTON" NAME="b4" VALUE="Fond jaune" onClick='

parent.parent.menuGauche.document.bgColor="yellow";

parent.parent.menuGauche.document.fgColor="black"

b4.value="Enfoncé"

onBlur='b4.value="Fond jaune"'

<HR>

<U>Remise à zéro</U><BR>

<INPUT TYPE="BUTTON" VALUE="Reset" onClick='

top.menuGauche.document.bgColor="white";

top.menuGauche.document.fgColor="black";

parent.menuBasGauche.document.bgColor="white";

parent.menuBasGauche.document.fgColor="black"

</FORM></BODY></HTML>

Explications

Pour bien comprendre le fonctionnement de cette page HTML il faut bien avoir en tête le schéma de construction de la fenêtre et son découpage.

Il est possible díutiliser le nom de la frame ou sa numérotation :

Ø top.menusBas.menuBasGauche.document.bgcolor

est identique à

Ø top.frames[2].frames[0].document.bgcolor

Lorsque líutilisateur clique sur les boutons, ceux-ci ont pour effet de modifier la couleur de certaines frames en fonctions de leur description (top. Ö parent. Ö).

Les lignes 15 à 21 par exemple

<INPUT TYPE="BUTTON" NAME="b2" VALUE="Fond rouge" onClick='

top.menuBas.menuBasGauche.document.bgColor="red";

top.menuBas.menuBasGauche.document.fgColor="yellow"

b2.value="Enfoncé"

onBlur='b2.value="Fond rouge"'

Lorsque le bouton ´ Fond rouge Ş est enfoncé (clic), la couleur de fond de la frame menuBasGauche devient rouge (ligne 16), la couleur du texte devient jaune (ligne 17), le bouton voit son intitulé modifié en ´ Enfoncé Ş (ligne 18). Si le clic se porte sur un autre bouton, la ligne 20 permet alors de remettre le texte initial sur le bouton ´ Fond rouge Ş.

Les autres boutons ont un comportement identique.

Captures écran

Le tableau ci-dessous indique le nom de chaque frame par rapport à líimage ci-dessus.

menuGauche

contenuCentre

menuBasGauche

contenuBasCentre

Je clique sur les boutons ´ Fond bleu Ş puis ´ Fond rouge Ş.

Le code javascript va permettre de changer la couleur de la frame menuBasGauche cíest à dire elle même.

Je clique sur les boutons ´ Fond vert Ş puis ´ Fond jaune Ş après avoir cliqué sur le bouton ´ fond rouge Ş.

Le code javascript va permettre de changer la couleur de la frame menuGauche.

b. Les méthodes

1. back() et forward()

Les deux méthodes permettent díobtenir la page précédemment visitée dans la fenêtre indiquée (back()) ou la page suivante (forward()).

Les informations utilisées sont celles déjà évoquées avec la propriété history.

Díailleurs, ces méthodes sont aussi disponibles avec líobjet history sous la forme : window.history.back() et window.history.forward().

Exemple

La page suivante montre différentes possibilités díutilisation de ces méthodes.

Code

function retour()

{

window.back();

}

function avance()

{

window.forward();

}

</script>

</HEAD><BODY>

<B>

<FONT COLOR=red>Voir le passé</FONT><BR>

<BR>

<A onClick='retour()'>Vers le passé</A><BR>

<A HREF="javascript:retour();">Vers le passé</A><BR>

<A HREF="javascript:window.back();">Vers le passé</A><BR>

<FORM>

<INPUT TYPE=BUTTON NAME=B1

onClick="retour();"

VALUE="Vers le passé"

<BR>

<FONT COLOR=green>Voir le futur</FONT><BR>

<BR>

<A onClick='avance()'>Vers le futur</A><BR>

<A HREF="javascript:avance();">Vers le futur</A><BR>

<A HREF="javascript:window.forward();">Vers le futur</A><BR>

<INPUT TYPE=BUTTON NAME=B2

onClick='avance();'

VALUE="Vers le futur"

</FORM></B>

</BODY</HTML>

Explications

Les deux méthodes sont associées pour líexemple, à un lien hypertexte directement (ligne 19) ou via une fonction prédéfinie (ligne 18). La ligne 17 montre que líon peut aussi associer un événement à un texte. Elles sont aussi associées à un bouton de formulaire à travers líévénement onClick.

Pour que ces méthodes fonctionnent, il faut évidemment quíil y ait eu une navigation, des pages visitées, dans la fenêtre concernée.

Captures écran

2. blur() et focus()

Ces deux méthodes permettent de rendre inactif (blur) ou actif (focus) une fenêtre. Lorsquíune fenêtre (objet window ou frame) possède le ´ focus Ş, les événements sont alors destinés à cette fenêtre.

Lorsque ces méthodes sont utilisées sur une fenêtre, il se peut que celle qui perd le focus se retrouve cachée par les autres fenêtres présentes à líécran. Ces dernières viennent alors en avant.

Exemple

Une fenêtre nommée f1 est créée au moment du chargement de la page.

Les méthodes blur et focus lui sont associées.

Code

<HTML>

<HEAD>

function ouvrir()

{

f1 = window.open("http://www.google.com","google",

"height=100,width=100,screenx=50","");

}

</script>

</HEAD>

<INPUT TYPE=BUTTON NAME=B1

onClick='f1.blur();B1.value="Selectionné";B2.value="Focus"'

VALUE="Blur">

<BR>

<INPUT TYPE=BUTTON NAME=B2

onClick='f1.focus();B2.value="Selectionné";B1.value="Blur"'

VALUE="Focus">

</FORM>

</BODY></HTML>

Explications

La fonction ouvrir (lignes 4 à 8) est activée au moment du chargement de la page html contenant ce code grâce à líutilisation de líévénement onLoad inclus dans la balise BODY (ligne 11).

Cette focntion ouvre un fenêtre appelée f1 qui contient la page du site www.google.com. Cette fenêtre a une taille de 100 pixels sur 100 pixels (sans les barres díétat).

Au moment du chargement, cíest cette fenêtre qui possède le focus.

Les boutons définis dans la page (B1 et B2) parent, permettent de donner le focus ou de líenlever à cette fenêtre f1. Ceci a pour effet de líenvoyer en avant ou en arrière par rapport à la fenêtre parent.

Captures écran

3. close() et open()

Ces deux méthodes ont déjà été vues. Elles permettent díouvrir et de fermer une fenêtre.

Líouverture díune fenêtre est possible en incluant un certain nombre de paramètres.

Syntaxe

[windowVar=][window].open("URL","windowName",["windowFeatures"])

windowVar est la variable qui permet de référencer la fenêtre. Cíest elle qui sera ensuite utilisée avec les méthodes et propriétés.

URL contient líadresse de la page à ouvrir dans cette nouvelle fenêtre.

WindowName contient un identifiant qui sera utilisé avec líoption target des balises. Ce nom ne doit contenir que des caractères alphanumériques et/ou underscore (_).

WindowFeatures contient les options associées à líouverture de la fenêtre.

toolbar[=yes|no]|[=1|0] à barre de navigation (back, forward .. .)

location[=yes|no]|[=1|0] à barre contenant líURL

directories[=yes|no]|[=1|0] à barre des favoris

status[=yes|no]|[=1|0] à barre de status tout en bas

menubar[=yes|no]|[=1|0] à barre de menus tout en haut

scrollbars[=yes|no]|[=1|0] à ascenseurs horizontaux et verticaux

resizable[=yes|no]|[=1|0] à redimensionnement de la fenêtre

width=pixels à largeur de la fenêtre au moment de líouverture

height=pixels à hauteur de la fenêtre au moment de líouverture

Exemple

Cet exemple montre simplement comment ouvrir et fermer une fenêtre tut en modifiant le contenu des boutons qui permettent ces actions.

Code

1ß

<HTML>

<HEAD>

function ouvrir()

{

f1 = window.open("http://www.google.com","google",

"height=100,width=100,screenx=50","");

}

</script>

</HEAD>

<BODY>

<INPUT TYPE=BUTTON NAME=B1

onClick='ouvrir();B1.value="Selectionné";B2.value="Close"'

VALUE="Open">

<BR>

<INPUT TYPE=BUTTON NAME=B2

onClick='f1.close();B2.value="Selectionné";B1.value="Open"'

VALUE="Close">

<BR>

</FORM>

</BODY></HTML>

Explications

Lors de líouverture (Ligne 14) ou de la fermeture (Ligne 17) le texte des boutons changent tout en effectuant líouverture ou la fermeture de la fenêtre nommée google et dont la variable est f1.

Captures écran

Il peut être utile lors de la création de fenêtres, de ne pas laisser à líécran les celles précédemment ouvertes. Pour cela il est possible díutiliser líévénement onUnLoad en lui associant la méthode close sur une fenêtre déjà ouverte.

Exemple

Voici une petite astuce qui permet de tester líexistence des fenêtres ouvertes.

Il peut être intéressant lors de la création de fenêtres, de ne pas laisser à líécran les fenêtres précédemment ouvertes. Pour cela il est possible díutiliser líévénement onUnLoad en lui associant la méthode close sur une fenêtre déjà ouverte.

Code

<HTML>

<HEAD>

function initialisation()

{

f1_ouverte = false;

f2_ouverte = false;

}

function ouvrir1()

{

f1 = window.open("http://www.google.com","google",

"height=100,width=100,screenx=50","");

f1_ouverte= true;

self.document.bgColor="yellow";

if(f2_ouverte)

f2.close();

}

function ouvrir2()

{

f2 = window.open("http://www.altavista.com","altavista",

"height=100,width=100,screenx=50","");

f2_ouverte= true;

self.document.bgColor="red";

if(f1_ouverte)

f1.close();

}

function fermeture()

{

if(f1_ouverte)

f1.close();

if(f2_ouverte)

f2.close();

}

</script>

</HEAD>

<U><B>Selectionnez votre <BR>moteur de recherche</B></U>

<INPUT TYPE=BUTTON NAME=B1

onClick='ouvrir1();B1.value="Selectionné";B2.value="Ouvrir Altavista"'

VALUE="Ouvrir Google">

<BR>

<INPUT TYPE=BUTTON NAME=B2

onClick='ouvrir2();B2.value="Selectionné";B1.value="Ouvrir Google"'

VALUE="Ouvrir Altavista">

</FORM>

</BODY></HTML>

Explications

Lors du chargement de la page html, deux variables contenues dans la fonction initialisation (Ligne 4 à 8) sont positionnées à la valeur false. Lorsque la fenêtre correspondante est ouverte, la variable prend la valeur true.

Lors du rechargement de la page principale, (reload) ou lors du chargement díune autre page html dans la page principale, líévénement onUnLoad est activé (Ligne 40) et ferme automatiquement la fenêtre fille ouverte au moyen de la fonction fermeture.

Cette fonction teste la valeur des variables initialisée au départ. Celle qui possède la valeur true indique que la fenêtre est ouverte et quíil faut donc la fermer au moyen de la méthode close (Ligne 32 à 36).

Lors de líouverture des fenêtres fille, qui se produit au moment ou líutilisateur clique sur les boutons de la page principale, les couleurs sont modifiées ainsi que les textes associés aux boutons. Les fonctions ouvrir1 et ouvrir2 sont exécutées grâce à líévénement onClick (Ligne 45 et 51).

Captures écran

d. moveBy() et moveTo()

Ces deux méthodes permettent de déplacer la fenêtre à différents endroits de líécran.

La fenêtre a une position par rapport au point díorigine de líécran à savoir (x,y) = (0,0) qui est le point haut gauche de líécran.

Il est donc possible via les deux méthodes, de déplacer la fenêtre par rapport à ce point fixe (moveTo()) ou par rapport à la position courante (moveBy()).

Ces deux méthodes prennent deux arguments qui sont les valeurs numériques x et y exprimées en pixels.

moveBy(x,y) permet un déplacement par rapport à la position courante de la fenêtre de x pixels sur líaxe des x (horizontal) et de y pixels sur líaxe des y (vertical). On parle de déplacement relatif.

Remarque

x et y peuvent posséder des valeurs négatives. Si vous déplacez la fenêtre vers la gauche, x sera négatif, si vous la déplacez vers le haut, y sera négatif.

moveTo(x,y) permet un déplacement de la fenêtre par rapport au point de coordonnées (x,y) = (0,0). Cíest le repère absolu de votre écran. On parle de déplacement absolu.

Attention

Líaxe des x est líaxe horizontal il va de gauche à droite. Les valeurs de cet axe sont donc postives.

Líaxe des y est vertical, il va de haut en bas. Les valeurs de cet axe sont donc négatives.

Attention

Le déplacement de votre fenêtre est limité par les ´ bords Ş de votre écran. Si vous donnez une valeur supérieure à la distance entre votre fenêtre et ces ´ bords Ş, le déplacement níira pas au-delà de ces ´ bords Ş. De plus, les sommets de votre fenêtre bloquent en position (x,y) = (0,0). Par contre vous pouvez la déplacer en indiquant des coordonnées négatives en x et y ou en coordonnées non définies (Supérieures à la taille maximale de votre écran). En clair le coin haut-gauche de la fenêtre, ne peut se déplacer de plus de pixels que níen possède votre écran moins la taille de votre fenêtre.

déplacement_max = taille_max_écran ń taille_fenêtre.

Exemple

Cet exemple propose le déplacement de la fenêtre selon les 2 méthodes de x et y pixels.

x et y sont saisis par líutilisateur. Deux possibilités lui sont proposées.

Un mouvement absolu au moyen de la fonction mouvement_moveTo() (Ligne 16) ou un mouvement relatif au moyen de la fonction mouvement_moveBy() (Ligne 11).

Code

xDepart=window.screenX;

yDepart=window.screenY;

function initialisation()

{

document.formulaire.x.value = window.screenX;

document.formulaire.y.value = window.screenY;

}

function mouvement_moveBy()

{

window.moveBy(document.formulaire.x.value,document.formulaire.y.value);

}

function mouvement_moveTo()

{

window.moveTo(document.formulaire.x.value,document.formulaire.y.value);

}

</script>

</HEAD>

document.write("<U>Les valeurs de X et Y initiales sont</U> : <BR><BR>");

document.write("X : " + xDepart + "   ");

document.write("Y : " + yDepart + "<BR><BR>");

document.write("<U>Les caracteristiques de l'écran sont</U> : <BR><BR>");

document.write("width : " + window.screen.width + "   ");

document.write("height : " + window.screen.height + "<BR>");

</script>

<BR>

<U>Entrez une valeur Numerique</U>

<BR>

Déplacement en X : <INPUT TYPE=TEXT SIZE=6 NAME=x>

<BR>

Déplacement en Y : <INPUT TYPE=TEXT SIZE=6 NAME=y>

<BR>

<U>Choisissez le type de déplacement :</U>

<BR>

<INPUT TYPE=BUTTON NAME=move2

onClick='mouvement_moveTo(document.formulaire.x.value,document.formulaire.y.value)'

VALUE=moveTo>

</FORM>

</BODY></HTML>

Explications

Au moment du chargement de la page html, les valeurs initiales correspondantes aux valeurs de líécran sont insérées dans les champs de saisis de x et y. Díautres informations sont aussi affichées (Ligne 26 à 31).

Les mouvements sont associés à líévénement onClick (Ligne 46 et 50) grâce aux fonctions définies dans la partie en-tête de la page html.

Captures écran

Attention

Si vous créez une fenêtre à partir de la fenêtre initiale (window.open Ö), vous pouvez être tentés de la déplacer avec les mêmes fonctions que vues ci-dessus. Hélas vous ne pourrez pas car, il faut posséder les privilèges UniversalBrowser-Privilege.

Sans ces privilèges, vous aurez líerreur suivante dans la console javascrit :

e. print()

Cette méthode permet díimprimer la page en cours.

Il suffit díassocier cette méthode à líévénement onClick.

Vous pouvez aussi proposer líimpression díautres fenêtres dans un système de frame.

Exemple

Reprenons líexemple de frame utilisé depuis le début.

Code

<BODY>

<form>

<u>Impression de moi-meme</u><br>

<INPUT TYPE="BUTTON" NAME="b1" VALUE="Imp"

onClick='window.print()'>

<br>

<u>Impression de mon cousin</u><br>

<INPUT TYPE="BUTTON" NAME="b2" VALUE="imp"

onClick='top.menuBas.contenuBasCentre.print()'>

</script>

</BODY>

</HTML>

Explications

La méthode print est utilisée pour imprimer la fenêtre courante, celle qui contient les boutons sur lesquels líutilisateur doit appuyer en ligne 5.

En ligne 9 cíest líimpression de la fenêtre du bas qui sera imprimée.

Ces deux actions sont associées à líévénement onClick.

Captures écran

f. resizeBy() et resizeTo()

Ces deux méthodes permettent de redimensionner la fenêtre courante.

Elles nécessitent deux arguments x et y. Ces arguments peuvent être des valeurs positives ou négatives.

Le coin haut gauche de votre écran correspond au point de coordonnées (x,y)=(0,0).

resizeBy(x,y) permet de redimensionner la fenêtre en ajoutant (valeur positive) ou en enlevant (valeur négative) x et y pixels à la valeur x et y initiale.

resizeTo(x,y) permet de redimensionner la fenêtre en prenant comme nouvelle valeur de x et y celles indiquées comme argument de la méthode.

Remarque

La fenêtre ne peut avoir une valeur x et y inférieure à 100 pixels sur 100 pixels ou plus précisément la taille ne peut être inférieure à la taille de la fenêtre avec uniquement les menus.

Remarque

Si vous désirez utiliser ces méthodes sur des fenêtres autres que la fenêtre courante qui contient le code html, vous devez posséder les privilèges adéquats.

Exemple

Code

<HTML>

<HEAD>

xDepart = 600;

yDepart = 600;

function initialisation()

{

document.formulaire.x.value = xDepart;

document.formulaire.y.value = yDepart;

}

function mouvement_resizeBy()

{

window.resizeBy(document.formulaire.x.value,document.formulaire.y.value);

}

function mouvement_resizeTo()

{

window.resizeTo(document.formulaire.x.value,document.formulaire.y.value);

}

</script>

</HEAD>

document.write("<U>Les valeurs initiales sont</U> : <BR><BR>");

document.write("largeur : " + xDepart + "   ");

document.write("hauteur : " + yDepart + "<BR><BR>");

document.write("<U>Les caracteristiques de l'écran sont</U> : <BR><BR>");

document.write("width : " + window.screen.width + "   ");

document.write("height : " + window.screen.height + "<BR>");

</script>

<BR>

<U>Entrez une valeur Numerique</U>

<BR>

Redimensionnement en X : <INPUT TYPE=TEXT SIZE=6 NAME=x>

<BR>

Redimensionnement en Y : <INPUT TYPE=TEXT SIZE=6 NAME=y>

<BR>

<U>Choisissez le type de Redimensionnement :</U>

<BR>

<INPUT TYPE=BUTTON NAME=redim1 onClick='

mouvement_resizeBy(document.formulaire.x.value,document.formulaire.y.value);'

VALUE=resizeBy>

<INPUT TYPE=BUTTON NAME=redim2 onClick='

mouvement_resizeTo(document.formulaire.x.value,document.formulaire.y.value);' VALUE=resizeTo>

</FORM>

</BODY>

</HTML>

Explications

La fonction initialisation (Ligne 7) est chargée en même temps que la page html au moyen de líévénement onLoad inséré dans la balise body (Ligne 25). Elle permet díinsérer dans les zones de saisie du formulaire les valeurs en x et y de 600 pixels (bouton Ligne 39 et 41 x et y). Cette initialisation ne redimensionne pas la taille de la fenêtre à son ouverture.

Les lignes 28 à 33 permettent díobtenir les informations sur la taille de la fenêtre courante et sur la taille de líécran.

Lorsque líutilisateur saisit les valeurs x et y dans les zones du formulaire, il a le choix entre utiliser la méthode resizeBy et resizeTo au moyen des boutons lignes 48 et 51. Lors du clic sur un de ces boutons, líévénement onClick fait appel aux fonctions mouvement_resizeBy et mouvement_resizeTo définies en ligne 13 et 18.

Les valeurs x et y passées en argument sont celles saisies dans les zones texte Ligne 39 et 41.

Captures écran

Ø Ecran de la fenêtre courante

Ø Dans le cas où les valeurs de x et y sont inférieures à 100 la fenêtre a cette aspect.

Ø Cas où vous faites appel à ces méthodes sur une autre fenêtre que celle contenant le code sans posséder les privilèges

c. Les propriétés et les événements

Les propriétés permettent lors díun événement en rapport avec la fenêtre courante de líintercepter et díeffectuer une action.

Il existe un grand nombre de propriétés liées à des événements.

Le document proposé par Mozilla les recense.

Ce document est consultable à líadresse : http://www.mozilla.org/docs/dom/domref/dom_el_ref_html

La plupart du temps, ces événements et leurs actions vont être inclus dans la balise <body>. Ceci permet de les ´ charger Ş à líinitialisation et de les activer.

Ils peuvent néanmoins être associés à díautres contenus html (a, img Ö).

Voici une liste de ces événements.

Un événement seul ne fait rien, il faut lui associer une action.

Remarque

Il est aussi possible de gérer les événements en utilisant le gestionnaire díévénements au moyen de la syntaxe document.captureEvents.

Exemple

Voyons comment il est possible de savoir que líutilisateur redimensionne la fenêtre courante et díeffectuer une action à ce moment.

Code

xDepart = "350";

yDepart = "250";

xNouveau = xDepart;

yNouveau = window.innerHeight;

window.resizeTo(xDepart,yDepart);

document.write("La fenetre a une taille de depart de : <br>" + xDepart + " sur " + yDepart + "<BR>");

document.write("La taille reelle (sans les menus) est de : <br>" + window.innerWidth + " sur " + window.innerHeight + "<BR>");

function mouvement()

{

window.xDiff = window.innerWidth - xNouveau;

window.yDiff = window.innerHeight - yNouveau;

alert('La taille actuelle est (LxH) : ' + window.innerWidth + 'x' + window.innerHeight);

if(window.yNouveau < window.innerHeight)

{

alert('Vous avez augmente la hauteur de la fenetre de -> ' + yDiff );

}

if(window.yNouveau > window.innerHeight)

{

alert('Vous avez diminue la hauteur de la fenetre de -> ' + yDiff );

}

if(window.xNouveau < window.innerWidth)

{

alert('Vous avez augmente la largeur de la fenetre de -> ' + xDiff);

}

if(window.xNouveau > window.innerWidth)

{

alert('Vous avez diminue la largeur de la fenetre de -> ' + xDiff);

}

yNouveau = window.innerHeight;

xNouveau = window.innerWidth;

}

</script>

</head>

</body></html>

Explications

Dans les calculs, la taille des menus est comptabilisée lors du premier mouvement ce qui pose un petit problème de calcul sur le premier mouvement si celui-ci níest pas assez important.

La taille de la fenêtre au départ est de 350x250. Cette taille est définie au moyen de la méthode resizeTo (Ligne 7).

Les informations sont affichées dans la fenêtre (Ligne 8 et 10).

La fonction mouvement permet díeffectuer des actions dès que la fenêtre courante est redimensionner. Cette fonction est activée dès que líévénement onresize est intercepté (Ligne 48).

A ce moment des messages díalerte apparaissent à líécran indiquant líaction effectuée par líutilisateur, la différence de taille de la fenêtre en hauteur et largeur par rapport aux valeurs précédentes ainsi que la nouvelle taille effective de la fenêtre.

Captures écran

Ø Diminution de la hauteur de la fenêtre

Ø Diminution de la hauteur et de la largeur puis augmentation de la hauteur de la fenêtre