SELFHTML/Aides à la navigation JavaScript/DOM Référence objet| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
 |
window |
|
Propriétés:
Méthodes:
Sous-objets: |
 | |
L'objet window (Fenêtre) est l'objet le plus élevé dans la famille des objets pour tout ce qui est affiché dans la fenêtre du navigateur. Par l'intermédiaire de l'objet window vous pouvez questionner et contrôler la fenêtre du document. De plus, vous pouvez définir de nouvelles fenêtres et en spécifier librement les propriétés.
Vous pouvez adresser la fenêtre d'affichage principale disponible du navigateur WWW par les objets window ou self. Les propriétés et méthodes de l'objet window peuvent être appliquées aux objets window et self.
<html><head><title>Test</title> <script type="text/javascript"> <!-- window.defaultStatus = "Ma page d'accueil"; //--> </script> </head><body> </body></html> |
L'exemple affiche en permanence dans la barre d'état de la fenêtre d'affichage actuelle la valeur "Ma page d'accueil". Pour cela la propriété de fenêtre defaultStatus a été appelée.
window ou self peuvent aussi être omis. Ainsi window.moveTo(200,100) a le même effet que moveTo(200,100).Pour la clarté il est pourtant préférable de mentionner le nom prédéfini de l'objet.
.
Même des fenêtres cadres dans un jeu de cadres représentent du point de vue de JavaScript des fenêtres distinctes. Lisez aussi à ce sujet la partie traitant de l'objet 
frames.
Vous pouvez non seulement adresser des fenêtres disponibles avec JavaScript, mais aussi créer de nouvelles fenêtres et adresser celles ci sous des noms de variables.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function nouvellefenetre() {
mafenetre =
window.open("fichier2.htm", "secondefenetre", "width=300,height=200,scrollbars");
mafenetre.focus();
}
//-->
</script>
</head><body>
<a href="javascript:nouvellefenetre()">nouvelle fenêtre</a>
</body></html>
|
Le fichier exemple contient un lien. En cliquant ce lien, la fonction JavaScript nouvellefenetre() est appelée. Cette fonction ouvre une nouvelle petite fenêtre du navigateur et y affiche le fichier fichier2.htm. Les détails pour ouvrir des nouvelles fenêtres seront décrits avec la méthode open(). Une telle fenêtre peut être adressée après sa création sous le nom avec lequel l'instance de fenêtre est sauvegardée. Dans l'exemple, c'est le nom de variable mafenetre. Toutes les propriétés et méthodes de l'objet window peuvent être appliquées sur ce nom.
<a href="javascript:mafenetre.close()">fermer la fenêtre</a> |
Dans l'exemple, la fenêtre qui avait été ouverte avant est refermée en cliquant sur le lien. La méthode appropriée pour ceci est la méthode close(). La fenêtre est adressée ici par son nom d'instance, dans l'exemple donc le nom de variable mafenetre, avec lequel elle avait été créée auparavant.
Pour la variable mafenetre il s'agit d'une variable globale. Celle-ci a été créée par une déclaration de variable sans le mot-clé var. La déclaration en tant que variable globale vous permet d'adresser également cette fenêtre hors de la fonction qui l'a créée.
Exactement de la même façon que vous pouvez accéder de la fenêtre principale à la seconde fenêtre créée avec open(), vous pouvez à partir de cette seconde fenêtre accéder à la fenêtre principale. À cet effet, il existe l'objet fenêtre opener. Grâce à lui, est adressée la fenêtre à partir de laquelle la fenêtre actuelle a été ouverte. Par l'objet opener vous pouvez adresser toutes les propriétés et méthodes de la fenêtre d'origine.
<a href="javascript:opener.close()">fermer la fenêtre principale</a> |
Notez derrière opener un point suivi de la méthode ou propriété désirée.
 |
closedSauvegarde si une fenêtre, qui par exemple a été ouverte récemment avec open(), a été entre temps fermée. Si la valeur est true, la fenêtre a été fermée. Approprié pour vérifier l'existence d'une fenêtre avant que ne suivent des instructions pour la modifier.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var InfoWin = window.open("fichier1.htm", "secondefenetre");
function CheckOpen() {
if(InfoWin.closed == true) alert("La fenêtre a été fermée");
else alert("La fenêtre est encore ouverte");
}
//-->
</script>
</head><body>
<a href="javascript:CheckOpen()">La fenêtre est-elle fermée?</a>
</body></html>
|
L'exemple charge à la lecture une deuxième fenêtre avec le fichier fichier1.htm. En cliquant sur le lien, une fonction CheckOpen() est appelée et renseigne si l'autre fenêtre est encore ouverte ou non.
|
|
defaultStatusSauvegarde le contenu de la barre d'état qui est affiché aussi longtemps qu'aucun événement particulier n'intervient (par exemple passer sur un lien avec la souris).
<html><head><title>Test</title> <script type="text/javascript"> <!-- window.defaultStatus = "Page d'accueil de Serge"; //--> </script> </head><body> <p>Regardez la ligne d'état</p> </body></html> |
L'exemple inscrit à la lecture du fichier l'affichage normal dans la barre d'état avec la valeur Page d'accueil de Serge.
|
|
innerHeightSauvegarde la hauteur du passage d'affichage d'une fenêtre. Très bien approprié pour servir en relation avec le positionnement absolu d'éléments.
<html><head><title>Test</title> <script type="text/javascript"> <!-- window.innerHeight = 300; //--> </script> </head><body> </body></html> |
L'exemple fixe, lors de la lecture du fichier, une hauteur de 300 pixels pour le domaine d'affichage de la fenêtre.
Veillez quand vous fixez une nouvelle hauteur de la fenêtre d'affichage à la taille de l'écran. Vous pouvez rechercher celle-ci grâce à l'objet Screen. Veillez également à ce que le domaine d'affichage d'une fenêtre doit être un peu plus petit que la fenêtre elle-même étant donné que la fenêtre en règle générale contient encore des éléments comme la barre de titre, la barre de menus etc... La hauteur absolue d'une fenêtre peut être lue ou fixée avec outerHeight.
Avec Opera 5.12 vous ne pouvez que lire la propriété innerHeight sans la modifier.
Dans l'Explorer Internet MS, vous pouvez déterminer approximativement la hauteur intérieure de la fenêtre avec document.body.offsetHeight. À cet instant, il faut cependant que l'élément Body soit déjà disponible, c'est à dire qu'il est avisé de rechercher cette propriété en relation avec le gestionnaire d'événement onLoad.
|
|
innerWidthSauvegarde la largeur du domaine d'affichage d'une fenêtre. Très bien approprié pour servir en relation avec le positionnement absolu d'éléments.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function fixerlargeur() {
window.innerWidth = document.saisie.champ.value;
}
//-->
</script>
</head><body>
<form name="saisie" action="">
<input type="text" name="champ">
<input type="button" value="Test" onClick="fixerlargeur()">
</form>
</body></html>
|
L'exemple permet d'entrer une valeur dans un champ de saisie. En cliquant sur un bouton défini, la fonction fixerlargeur() est appelée, qui fixe la largeur de fenêtre avec la valeur entrée.
Veillez quand vous fixez une nouvelle largeur de la fenêtre d'affichage à la taille de l'écran. Vous pouvez rechercher celle-ci grâce à l'objet Screen. Veillez également à ce que le domaine d'affichage d'une fenêtre doit être un peu plus petit que la fenêtre elle-même étant donné que la fenêtre en règle générale contient encore des éléments comme la barre de titre, la barre de menus etc... La largeur absolue d'une fenêtre peut être lue ou fixée avec outerWidth.
Avec Opera 5.12 vous ne pouvez que lire la propriété innerWidth sans la modifier.
Dans l'Explorer Internet MS, vous pouvez déterminer approximativement la largeur intérieure de la fenêtre avec document.body.offsetWidth. À cet instant, il faut cependant que l'élément Body soit déjà disponible, c'est à dire qu'il est avisé de rechercher cette propriété en relation avec le gestionnaire d'événement onLoad.
|
|
locationbarSauvegarde si une fenêtre a sa propre ligne d'adresse URL; représente elle-même un objet avec la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a une ligne d'adresse et la valeur false, si elle n'en a pas.
<html><head><title>Test</title>
<script type=quot;text/javascript">
<!--
petitefenetre = window.open("fichier.htm", "secondefenetre", "width=300,height=200");
function ligne_adresse() {
if(petitefenetre.locationbar && petitefenetre.locationbar.visible == false) {
petitefenetre.close();
nouvellefenetre = window.open("fichier.htm", "secondefenetre", "width=300,height=200,location");
nouvellefenetre.focus();
}
}
//-->
</script>
</head><body>
<a href="javascript:ligne_adresse()">Ligne d'adresse?</a>
</body></html>
|
L'exemple ouvre d'abord une fenêtre sans barre d'adresse. En cliquant sur le lien, la fonction ligne_adresse() est appelée. Cette fonction vérifie si le navigateur connaît l'objet locationbar et si la fenêtre n'en est pas munie. Si elle n'en a pas, elle est fermée. En lieu et place est ouverte une nouvelle fenêtre avec les mêmes valeurs que l'ancienne mais avec en plus la mention location. Pour plus de détails à ce sujet voir open().
|
|
menubarSauvegarde si une fenêtre a sa propre barre de menus avec les commandes de menu du navigateur. Représente elle-même un objet avec la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a une barre de menus et la valeur false,si elle n'en a pas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function remarque() {
if(window.menubar && window.menubar.visible == true)
alert("Pour éditer cette page choisir la commande modifier la page, du menu fichier");
}
//-->
</script>
</head><body>
<a href="javascript:remarque()">éditer cette page</a>
</body></html>
|
L'exemple contient un lien qui propose à l'utilisateur d'éditer la page affichée. S'il clique sur le lien, une fonction remarque() est appelée. Celle-ci vérifie si pour la fenêtre actuelle une barre de menus est disponible. Si oui, une remarque apparaît avec alert() pour dire à l'utilisateur ce qu'il doit faire pour éditer la page.
|
|
nameSauvegarde le nom de la fenêtre. Pour Netscape 2.0 lecture seule, pour les versions ultérieures peut être aussi modifié.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
fenetre = window.open("fichier.htm","petitefenetre","width=200,height=200");
function nomfenetre() {
alert("Nom de la petite fenêtre: " + fenetre.name);
nouvelle = prompt("Attribuez un nouveau nom de fenêtre ","Nom");
fenetre.name = nouvelle;
alert("Le nom de fenêtre est maintenant: " + fenetre.name);
}
//-->
</script>
</head><body>
<a href="javascript:nomfenetre()">Nom de la fenêtre</a>
</body></html>
|
L'exemple charge à la lecture du fichier une deuxième petite fenêtre. Le nom de cette fenêtre est petitefenetre. Faîtes attention que la propriété name se rapporte à ce nom et non pas au nom de la variable, dans laquelle est sauvegardée l'instance de la fenêtre (dans l'exemple la variable fenetre). En cliquant sur le lien, la fonction nomfenetre() est appelée. Elle indique d'abord à l'utilisateur, grâce à alert() le nom actuel de fenêtre de la petite fenêtre. Ensuite, l'utilisateur peut affecter un nouveau nom. Enfin, le nouveau nom est affiché.
Un nom de fenêtre fixé avec JavaScript reste conservé aussi longtemps que la fenêtre est ouverte ou bien jusqu'à ce qu'il soit à nouveau modifié. Pour cette raison, vouw pouvez utiliser le nom de fenêtre pour sauvegarder des contenus de variables, par exemple pour transmettre des variables d'un fichier à un fichier appelé plus tard. Veillez cependant en le faisant que le nom de fenêtre dans beaucoup de navigateurs peut contenir en fin de compte des lettres, chiffres et tirets de soulignement. Les caractères spéciaux et avec accent ne sont par contre pas permis. Une exception est constituée par Opera 5. Ici, un nom de fenêtre fixé avec JavaScript est valable aussi longtemps que le document qui l'a modifié est chargé dans cette fenêtre.
Lisez à ce sujet dans l'offre en ligne de SELFHTML actuel l'article spécialisé 
Passation de valeurs JavaScript entre différents documents HTML de Hatto von Hatzfeld.
|
|
outerHeightSauvegarde la hauteur globale d'une fenêtre y compris la barre de titre, la barre de menus, la barre d'état etc...
<html><head><title>Test</title>
<script type="text/javascript">
<!--
alert("Hauteur globale de cette fenêtre: " + window.outerHeight + " pixels");
window.outerHeight = 300;
alert("Hauteur globale maintenant: " + window.outerHeight + " pixels");
//-->
</script>
</head><body>
</body></html>
|
L'exemple commence par donner à la lecture la hauteur de la fenêtre actuelle. Puis il fixe la nouvelle hauteur à 300 pixels. Enfin, la nouvelle hauteur de fenêtre est donnée avec alert() à nouveau pour contrôle.
Avec Opera 5.12 vous ne pouvez que lire la propriété outerHeight sans la modifier.
|
|
outerWidthSauvegarde la largeur globale de la fenêtre y compris les bords de fenêtre.
<html><head><title>Test</title> <script type="text/javascript"> <!-- if(window.outerWidth > 640) window.outerHeight = 640; //--> </script> </head><body> </body></html> |
L'exemple vérifie à la lecture du fichier si la largeur de la fenêtre actuelle est supérieure à 640 pixels. Si c'est le cas, la largeur est fixée à 640 pixels.
Avec Opera 5.12 vous ne pouvez que lire la propriété outerWidth sans la modifier.
|
|
pageXOffsetSauvegarde la position horizontale actuelle dans la page mesurée à partir du bord gauche. Ainsi il est possible de rechercher combien l'utilisateur a déjà fait défiler l'écran vers la droite. Approprié en relation avec l'utilisation de scrollBy() ou bien scrollTo().
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Set0() {
if(parent.frames[1].pageXOffset > 0)
parent.frames[1].scrollTo(0,parent.frames[1].pageYOffset);
}
//-->
</script>
</head><body>
<a href="javascript:Set0()">vers la gauche</a>
</body></html>
|
Dans l'exemple est supposée l'existence d'une autre fenêtre cadre qui a un contenu trop large, de sorte que l'utilisateur doit faire défiler l'écran vers la droite pour tout voir. Avec un lien noté dans le fichier actuel, il est possible de faire défiler à nouveau l'écran vers la gauche dans l'autre fenêtre cadre. Pour cela la position actuelle de défilement de la propriété pageXOffset est vérifiée. Si elle est supérieure à 0, Cela signifie que l'utilisateur a fait défiler l'écran vers la droite. Dans ce cas là la méthode scrollTo() est appelée, pour faire défiler à nouveau tout à fait à gauche. La position verticale demeure inchangée, étant donné que la propriété pageYOffset est donnée comme paramètre.
Pour adresser des fenêtres cadres en JavaScript, lisez la partie sur l'objet frames.
Dans l'Explorer Internet MS à partir de la version 4 la position de défilement horizontal est sauvegardée dans la propriété document.body.scrollLeft.
|
|
pageYOffsetSauvegarde la position verticale actuelle dans la page mesurée depuis le début du documents. Il est ainsi possible de rechercher combien l'utilisateur a déjà fait défiler l'écran vers le bas. Approprié en relation avec l'utilisation de scrollBy() ou scrollTo().
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
for(var i=0;i<100;i++)
document.write("beaucoup de texte<br>");
function Position() {
alert("pageYOffset: " + window.pageYOffset + " pixels");
}
//-->
</script>
<a href="javascript:Position()">Position Y</a>
</body></html>
|
Dans l'exemple un JavaScript écrit pour la démonstration 100 fois une ligne HTML contenant le texte beaucoup de texte dans la fenêtre du document. Cela permet au navigateur de faire défiler d'autant l'écran vers le bas. À la fin est noté un lien. En le cliquant est appelée la fonction Position() Elle indique avec alert() de combien de pixels la position de défilement est-elle éloignée du début du document.
Dans l'Explorer Internet MS à partir de la version 4 la position de défilement vertical est sauvegardée dans la propriété document.body.scrollTop.
|
|
personalbarSauvegarde si une fenêtre a une propre barre "personnelle". Il s'agit, chez Netscape 4.x, de la barre située sous la barre d'adresse URL et qui permet l'accès direct aux favoris (adresses personnelles préférées). Représente elle-même un objet qui a une propriété, à savoir la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a une barre personnelle, et la valeur false, si elle n'en a pas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function PersonalCheck() {
if (window.personalbar)
if(window.personalbar.visible == false)
alert("Vous n'avez donc pas d'adresses préférées?");
else
alert("Ah vous vous servez donc de la barre de favoris!");
}
//-->
</script>
</head><body>
<a href="javascript:PersonalCheck()">test de personnalité</a>
</body></html>
|
L'exemple contient un lien. Si l'utilisateur clique sur le lien une fonction PersonalCheck() est appelée. Celle-ci vérifie si le navigateur connaît l'objet personalbar et si pour la fenêtre actuelle, une barre de favoris est disponible. Selon le résultat, une annonce "personnalisée" sera donnée à l'utilisateur avec alert() .
|
|
scrollbarsSauvegarde si une fenêtre a des barres de défilement. Représente elle-même un objet qui a une propriété, à savoir la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a des barres de défilement, et la valeur false, si elle n'en a pas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nouvellefenetre = window.open("fichier.htm", "autrefenetre","width=400,height=250");
function Test() {
if(nouvellefenetre.scrollbars && nouvellefenetre.scrollbars.visible == false)
nouvellefenetre.close(){
}
//-->
</script>
</head><body>
<a href="javascript:Test()">petit test de défilement</a>
</body></html>
|
L'exemple charge à la lecture du fichier une deuxième fenêtre plus petite, qui peut ensuite être adressée sous le nom de nouvellefenetre Le fichier contient un lien. Si l'utilisateur clique sur le lien une fonction Test() est appelée. Celle-ci vérifie si le navigateur connaît l'objet scrollbars et si pour la deuxième fenêtre des barres de défilement sont disponibles. Si ce n'est pas le cas, la fenêtre est fermée avec close().
|
|
statusbarSauvegarde si une fenêtre a sa propre barre d'état. Représente elle-même un objet qui a une propriété, à savoir la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a une barre d'état, et la valeur false, si elle n'en a pas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Statustexte(Text)
{
if(window.statusbar && window.statusbar.visible == true) window.defaultStatus = Text;
else alert(Text);
}
//-->
</script>
</head><body>
<form name="saisie" action="">
<input type="text" name="champ">
<input type="button" value="Start" onClick="Statustexte(document.saisie.champ.value)">
</form>
</body></html>
|
Dans l'exemple est défini un formulaire. L'utilisateur peut entrer un texte. En cliquant sur le bouton la fonction Statustexte() est appelée. La fonction recherche si le navigateur connaît l'objet statusbar et si la fenêtre actuelle a une barre d'état. Si oui le texte entré dans le champ de saisie sera fixé comme texte standard de la barre d'état. Sinon le texte entré est simplement affiché avec alert().
|
|
statusSauvegarde ou fixe le contenu actuel de la barre d'état.
<html><head><title>Test</title> </head><body> <a href="fichier.htm" onmouseover="status='Ceci est un lien';return true;">Lien</a> </body></html> |
L'exemple montre un lien. En passant avec la souris sur le texte du lien apparaît dans la barre d'état le texte : Ceci est un lien. L'instruction return true à la fin est importante pour ce genre de constructions .
|
|
toolbarSauvegarde si une fenêtre a sa propre barre d'outils (avec les boutons pour "avant", "après" etc...). Représente elle-même un objet qui a une propriété, à savoir la propriété visible (= visible). Contient pour cette propriété la valeur true, si la fenêtre a une barre d'outils, et la valeur false, si elle n'en a pas.
<html><head><title>Test</title>
</head><body>
<sgript type="text/javascript">
<!--
if(self.toolbar && self.toolbar.visible == false)
document.write("<a href='javascript:history.back()'>Page précédente<\/a>");
//-->
</script>
</body></html>
|
L'exemple contient un passage Script dans le corps de fichier. Il y sera vérifié si la fenêtre a sa propre barre d'outils. Si ce n'est pas le cas, sera écrit dans le document, avec document.write() le lien "Page précédente", qui contient une commande JavaSript (voir aussi history.back).
|
|
alert()Donne du texte dans une boite de dialogue. attend une chaîne de caractères comme paramètre.
<html><head><title>Test</title>
</head><body>
<a href="javascript:alert('La cible du lien ne peut pas encore être atteinte')">Nos succès</a>
</body></html>
|
L'exemple n'exécute pas un saut à une autre page quand le lien est cliqué mais donne à la place une boite de dialogue avec la remarque "La cible du lien ne peut pas encore être atteinte" Ainsi il est possible avec la méthode alert() de transmettre des chaînes de caractères comme dans l'exemple, mais aussi des variables. Dans ce cas, c'est le contenu de la variable qui est affiché. Vous pouvez aussi transmettre des chaînes de caractères composées, par exemple:
alert("Votre navigateur est" + navigator.userAgent)
En interne la méthode alert() transforme le paramètre transmis en une chaîne de caractères. Ainsi il peut arriver qu'une valeur puisse être sortie avec alert(), sans toutefois que des opérations de chaînes de caractères puissent être exécutées avec cette valeur, étant donné qu'exceptée la sortie avec alert() il ne s'agit pas d'une chaîne de caractères.
La valeur renvoyée par la méthode alert() est toujours undefined.
L'apparence de la fenêtre de dialogue dépend du système d'exploitation et du navigateur utilisé. Ce qui signifie que vous ne pouvez formater la boite de dialogue qu'au moyen de caractères de contrôle. Il n'y a pas d'autres possibilités de formatage.
|
|
back()Correspond pour les pages WWW normales à un cliquement sur le bouton "retour" du navigateur. Pour des cadres, c'est la dernière page visitée qui ne faisait pas partie du jeu de cadres. Ici réside la différence essentielle avec la méthode history.back!
Cette méthode n'attend aucun paramètre.
<html><head><title>Test</title> </head><body> <a href="javascript:window.back()">retour</a> </body></html> |
L'exemple réalise un lien HTML qui appelle si on le clique la dernière page qui remplissait la totalité de la fenêtre d'affichage.
|
|
blur()Rend une fenêtre inactive. Le contraire de focus(). N'attend aucun paramètre.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var nouvellefenetre = window.open("fichier.htm", "autrefenêtre","width=400,height=250");
//-->
</script>
</head><body>
<a href="javascript:nouvellefenetre.focus()">Fenêtre devant</a><br>
<a href="javascript:nouvellefenetre.blur()">Fenêtre derrière</a>
</body></html>
|
Dans l'exemple est ouverte une deuxième petite fenêtre à la lecture du fichier. Le fichier HTML lui-même contient deux liens. En cliquant sur le premier lien, la deuxième fenêtre devient active - focus(). En cliquant sur le deuxième lien elle devient inactive et, suivant la disposition des fenêtres, recouverte par la fenêtre principale - blur().
|
|
captureEvents()Surveille les événements de l'utilisateur dans la fenêtre mentionnée. Attend comme paramètre une suite d'événements que l'on veut surveiller. Les événements suivants peuvent être surveillés:
Event.ABORT Event.BLUR Event.CHANGE Event.CLICK Event.DBLCLICK Event.DRAGDROP Event.ERROR Event.FOCUS Event.KEYDOWN Event.KEYPRESS Event.KEYUP Event.LOAD Event.MOUSEDOWN Event.MOUSEMOVE Event.MOUSEOUT Event.MOUSEOVER Event.MOUSEUP Event.MOVE Event.RESET Event.RESIZE Event.SELECT Event.SUBMIT Event.UNLOAD.
Il s'agit ici d'une variante spéciale de la notation des gestionnaires d'événement sans le "on" devant, mais l'adressage à l' objet Event à la place. Ainsi par exemple Event.MOUSEOVER correspond au gestionnaire d'événement onMouseover.
Il vous est possible de surveiller plusieurs événements. Séparez les noms d'événements par des barres verticales | (touche Alt 124).
<html><head><title>Test</title>
<script type="text/javascript">
<!--
window.captureEvents(Event.KEYPRESS);
window.onkeypress = sortie;
function sortie(evenement) {
alert("Vous avez appuyé sur une touche avec la valeur " + evenement.which);
}
//-->
</script>
</head><body>
Appuyez sur une touche quelconque!
</body></html>
|
Dans l'exemple c'est l'événement KEYPRESS (touche appuyée ) qui est surveillé. Si l'utilisateur appuie sur une touche la fonction sortie() est appelée et sort grâce à alert() la valeur de la touche venant d'être appuyée. La syntaxe pour l'appel de fonction diffère de la syntaxe habituelle. Un exemple dans ce contexte avec les explications peut être trouvé dans le chapitre 
HTML dynamique dans la partie sur l' objet Event chez Netscape.
Même Netscape 6 interprète l'exemple. Pour ce navigateur, il est cependant nécessaire, après avoir confirmé la boite de dialogue, de cliquer sur la fenêtre pour lui rendre le focus.
|
|
clearInterval()Interrompt un processus sans fin commencé avec setInterval(). Attend comme paramètre la variable sauvegardée dans l'appel de setInterval().
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var actif = window.setInterval("Couleur()",1000);
var i = 0, couleur = 1;
function Couleur() {
if(couleur==1)
{ document.bgColor="yellow"; couleur=2; }
else
{ document.bgColor="aqua"; couleur=1; }
i = i + 1;
if(i >= 10)
window.clearInterval(actif);
}
//-->
</script>
</body></html>
|
Dans l'exemple est défini avec setInterval(), que la fonction Couleur() soit appelée toutes les 1000 millièmes de secondes, donc chaque seconde. L'appel est sauvegardé dans la variable actif Dans l'exemple, la fonction Couleur() modifie à chaque fois qu'elle est appelée la couleur d'arrière plan du fichier ( document.bgColor). En même temps, un compteur est incrémenté. Quand il atteint une valeur supérieure ou égale à 10, la méthode clearInterval() est appelée et interrompt le processus sans fin. Pour cela, la variable actif définie auparavant est transmise comme paramètre.
|
|
clearTimeout()Interrompt le compte à rebours commencé avec la méthode setTimeout() Attend comme paramètre la variable sauvegardée à l'appel de setTimeout().
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var i = 0;
function compter() {
i = i + 1;
actif = window.setTimeout("compter()",1000);
}
function arreter() {
window.clearTimeout(actif);
alert(i + " secondes");
}
actif = window.setTimeout("compter()",1000);
//-->
</script>
</head><body>
<form action="">
<input type="button" value="cliquer" onClick="arreter()">
</form>
</body></html>
|
L'exemple lance à la lecture du fichier un processus de comptage avec setTimeout() Tous les 1000 millièmes de secondes, donc une fois par seconde, la fonction compter() est appelée. Celle-ci incrémente la variable i. Dans le fichier est défini un bouton. Si l'utilisateur clique sur le bouton, la fonction arreter() est appelée. Cette fonction arrête le processus de comptage avec clearTimeout() et donne avec alert() le nombre de secondes comptées. À l'appel de clearTimeout() la variable globale actif définie auparavant avec setTimeout() est transmise comme paramètre .
|
|
close()Ferme une fenêtre. N'attend aucun paramètre.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var Info = window.open("fichier.htm", "secondefenetre");
//-->
</script>
</head><body>
<form action="">
<input type="button" value="="fermer la fenêtre" onClick="Info.close()">
</form>
</body></html>
|
L'exemple ouvre à la lecture du fichier une deuxième fenêtre du nom de Info. Dans le fichier est défini un bouton. Si l'utilisateur clique sur le bouton, la deuxième fenêtre est fermée.
La méthode close() entre dans le cadre du concept de sécurité de JavaScript. Cela signifie qu'une fenêtre, à partir du moment où elle possède un historique (parce que l'utilisateur y a déjà appelé plusieurs pages), ne se laisse plus fermer sans demande de confirmation de la part du navigateur. Il n'est pas possible d'empêcher cette demande.
|
|
confirm()Ouvre une boite de dialogue avec deux boutons pour "OK" et "interrompre". Judicieux pour forcer l'utilisateur à prendre une décision qui sera traitée dans la suite du programme. Attend comme paramètre un texte interrogatif pour la décision oui/non. Renvoie comme résultat la décision de l'utilisateur.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
Check = confirm("Voulez vous vraiment voir cette page?");
if(Check == false) history.back();
//-->
</script>
</head><body>
</body></html>
|
Dans l'exemple, la question est posée à l'utilisateur à la lecture du fichier s'il veut vraiment voir la page. La valeur renvoyée par confirm() est sauvegardée dans la variable Check. Si l'utilisateur clique sur "OK" la variable Check contient la valeur true. Rien d'autre ne se passe et la page est chargée. S'il choisit "interrompre", la variable Check reçoit la valeur false. C'est pour ce cas de figure que l'instruction history.back() est notée et reconduit l'utilisateur à la page de laquelle il vient.
L'apparence de la fenêtre de dialogue dépend du système d'exploitation et du navigateur utilisé. Ce qui signifie que vous ne pouvez formater la boite de dialogue qu'au moyen de caractères de contrôle. Il n'y a pas d'autres possibilités de formatage.
|
|
disableExternalCapture()Interdit aux autres fenêtres de surveiller des événements de la fenêtre actuelle. Conçu avant tout comme protection au cas où des pages étrangères chargeaient vos propres pages dans un jeu de cadres.
<html><head><title>Test</title> <script type="text/javascript"> <!-- disableExternalCapture(); //--> </script> </head><body> </body></html> |
L'exemple lance la commande disableExternalCapture(). à la lecture du fichier. Ainsi des pages etrangères ne peuvent surveiller les événements de l'utilisateur dans ce fichier au cas où il est chargé dans un jeu de cadres étranger.
|
|
enableExternalCapture()Autorise aux autres fenêtres la surveillance des événements de la fenêtre actuelle. Ainsi il est possible à partir d'autres fenêtres d'un jeu de cadres de surveiller les événements de l'utilisateur de la fenêtre actuelle.
<html><head><title>Test</title> <script language="JavaScript" type="text/javascript"> <!-- enableExternalCapture(); //--> </script> </head><body> </body></html> |
À la lecture l'exemple lance la commande enableExternalCapture(). Ainsi il est possible à des pages étrangères de surveiller les événements de l'utilisateur dans ce fichier au cas où il fait partie d'un jeu de cadres.
|
|
find()Recherche dans le contenu d'une fenêtre un texte. Correspond à la fonctionnalité de la commande "rechercher" du menu. La recherche ne s'effectue que dans la page actuelle.
attend les paramètres suivants:
1. Text = texte, après lequel il faut chercher.
2. respecter la casse = donner true pour oui et false pour non.
3. sens de la recherche vers l'arrière = donner true pour oui ou false pour non.
Les deux derniers paramètres sont facultatifs.
<html><head><title>Test</title> </head><body> <form action=""> <input type="text" name="objet_recherche"> <input type="button" value="recherche" onClick="find(this.form.objet_recherche.value,false,false)"> <p>Entrez le terme recherché.</p> </form> </body></html> |
Dans l'exemple se trouve au début du fichier un formulaire avec un champ de saisie pour entrer le texte recherché. Le formulaire contient en outre un bouton. En cliquant celui-ci, le texte entré par l'utilisateur dans le champ de saisie est recherché dans le reste du fichier.
Netscape 6.1 n'interprète pas cette méthode (n'interprète plus).
|
|
focus()Rend une fenêtre active. Approprié pour l'utilisation d'une deuxième fenêtre mais aussi pour des fenêtres cadres. N'attend aucun paramètre.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function liencadre(cible)
{
parent.frames[1].location.href = cible;
parent.frames[1].focus();
}
//-->
</script>
</head><body>
<a href="javascript:liencadre('../location.htm')">Nouvelle page</a>
</body></html>
|
L'exemple suppose que le fichier actuel fait partie d'un jeu de cadres. Le fichier contient un lien dont la cible doit être affichée dans une autre fenêtre cadre. En cliquant, non seulement la cible du lien sera chargée dans l'autre fenêtre, mais encore elle deviendra par la même occasion la fenêtre active. Ainsi l'utilisateur par exemple peut tout de suite y faire défiler l'écran. Pour cela une fonction liencadre() est appelée quand l'utilisateur clique sur le lien. Cette fonction charge dans la première commande la cible transmise comme paramètre dans l'autre cadre ( location.href), et dans la deuxième commande rend la fenêtre cadre cible active avec focus().
Pour adresser les fenêtres cadres en JavaScript lisez la partie sur l'objet frames.
|
|
forward()Correspond pour les pages WWW normales au cliquement sur le bouton "page suivante" du navigateur. Pour les cadres cependant, c'est la première page visitée mais qui ne fait pas partie du jeu de cadres qui est appelée. Pour les cadres diffère donc de history.forward()! N'attend aucun paramètre.
<html><head><title>Test</title> </head><body> <a href="javascript:window.forward()">page suivante</a> </body></html> |
L'exemple réalise un lien HTML qui s'il est cliqué appelle une page remplissant toute la fenêtre d'affichage, et qui est la suivante dans l'historique.
|
|
handleEvent()Transmet un événement à un élément qui est en mesure de réagir à cet événement.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function clickHandler(evenement)
{ window.document.links[0].handleEvent(evenement); }
window.captureEvents(Event.CLICK);
window.onClick = clickHandler;
//-->
</script>
</head><body>
<a href="fichier.htm" onClick="location.href='fichier.htm'">Lien</a>
</body></html>
|
L'exemple contient un lien, qui lorsqu'on le clique, appelle tout à fait normalement par la mention href, le fichier fichier.htm L'exemple est cependant conçu telle façon que le fichier fichier.htm est appelé dés que l'utilisateur clique où que ce soit dans la fenêtre du navigateur. Pour ceci, à la lecture du fichier, l'événement cliquement de souris est surveillé avec la méthode captureEvents() Si cet événement se produit, la fonction ClickHandler() est appelée. Celle-ci transmet l'événement avec handleEvent() au premier lien défini dans le document (document.links[0]). Dans le lien correspondant est noté pour cela un gestionnaire d'événement onClick=. Celui-ci est en mesure de traiter l'événement transmis. Comme commande avec location.href le même fichier est appelé, comme en cliquant sur le lien lui-même.
Netscape 6.1 n'interprète pas cette méthode (n'interprète plus).
|
|
home()Correspond à un cliquement sur le bouton "page d'accueil" dans le navigateur.
<html><head><title>Test</title> </head><body> <a href="javascript:home()">Au bercail</a> </body></html> |
L'exemple définit un lien qui lorsqu'il est cliqué appelle la page définie par l'utilisateur comme page d'accueil de départ.
|
|
moveBy()Déplace une fenêtre d'autant de pixels que mentionnés. Attend les paramètres suivants:
1. valeur x = de combien de pixels la fenêtre doit être déplacée vers la gauche / la droite. Les valeurs négatives déplacent vers la gauche, les valeurs positives vers la droite.
2. valeur y = de combien de pixels la fenêtre doit être déplacée vers le haut / le bas. Les valeurs négatives déplacent vers le haut, les valeurs positives vers le bas.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
fenetre = window.open("fichier.htm","secondefenetre","width=200,height=200");
function bouge() {
fenetre.moveBy(200,100);
fenetre.focus();
}
//-->
</script>
</head><body>
<a href="javascript:bouge()">Bouger la fenêtre</a>
</body></html>
|
L'exemple charge à la lecture du fichier une petite fenêtre supplémentaire avec un autre fichier. La fenêtre principale contient un lien. En cliquant sur ce lien la fonction bouge() est appelée, elle déplace la petite fenêtre de 200 pixels vers la droite et de 100 pixels vers le bas.
|
|
moveTo()Déplace une fenêtre à la position mentionnée. Attend les paramètres suivants:
1. valeur x = valeur de gauche pour le nouveau coin supérieur gauche de la fenêtre.
2. valeur y = valeur du haut pour le nouveau coin supérieur gauche de la fenêtre.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
fenetre = window.open("fichier.htm","secondefenetre","width=200,height=200");
function bouge() {
fenetre.moveTo(screen.width-200,screen.height-200);
fenetre.focus();
}
//-->
</script>
</head><body>
<a href="javascript:bouge()">bouger la fenêtre</a>
</body></html>
|
L'exemple charge à la lecture du fichier une petite fenêtre supplémentaire avec un autre fichier. La deuxième fenêtre a une largeur et une hauteur de 200 pixels. La fenêtre principale contient un lien. En cliquant sur ce lien la fonction bouge() est appelée, elle déplace la petite fenêtre dans le coin en bas à droite de l'écran. Les mentions en pixels pour le nouveau coin en haut et à gauche de la fenêtre sont acquises à l'aide de l'objet screen qui donne la largeur de l'écran avec screen.width et la hauteur de l'écran avec screen.height .
|
|
open()Ouvre une nouvelle fenêtre. Attend au moins deux paramètres, le troisième est facultatif:
1. URI = adresse cible d'un fichier qui doit être chargé dans la nouvelle fenêtre. Si le fichier se trouve dans le même répertoire, le nom de fichier suffit. Autrement, il faut mentionner le nom de chemin relatif ou l'adresse http absolue. Pour Netscape cela peut être une chaîne de caractères vide (ouvre une fenêtre vide), ce qui conduit pour l'Explorer Internet MS 4 et Opera 5.12 à un message d'erreur.
À la place de l'URI, vous pouvez aussi mentionner about:blank pour charger un fichier vide dans la fenêtre. Opera 5.12 n'interprète cependant pas encore cette instruction.
2. nom de fenêtre = un nom qui ne doit comprendre que des lettres des chiffres et des tirets de soulignement. Sous ce nom, des liens peuvent par exemple charger leur cible avec <a href="cible.htm" target="nomdelafenetre"> dans la fenêtre créée.
des noms de fenêtres valides sont aussi _blank,_parent,_self et _top. Opera 5.12 ouvre cependant dans chaque cas le fichier dans la même fenêtre. Netscape 6.x n'interprète pas la mention _parent.
3. (facultatif) mentions sur l'apparence de la fenêtre = une chaîne de caractères dans laquelle vous pouvez fixer la taille et les propriétés de la fenêtre. Plusieurs mentions doivent être séparées par des virgules. Les mentions suivantes sont possibles:
|
<html><head><title>Test</title>
<script type="text/javascript">
<!--
F1 = window.open("fichier.htm","fenetre1","width=310,height=400,left=0,top=0");
F2 = window.open("fichier.htm","fenetre2","width=310,height=400,left=320,top=0");
self.focus();
self.close();
//-->
</script>
</head><body>
</body></html>
|
L'exemple ouvre à la lecture du fichier deux autres fenêtres de façon à ce qu'elles soient placées à côté l'une de l'autre. Après quoi, la fenêtre principale se ferme elle-même. Supposons que dans fichier.htm (chargé dans la première fenêtre) il y ait un lien dont la cible doive être affichée dans la deuxième fenêtre. Pour cela, vous pourriez noter:
<a href="fichier.htm" target="fenetre2">Texte du lien</a>
Ici, la mention target= est importante. Il vous faut y mentionner le nom de la fenêtre que vous avez affecté lors de la définition de la fenêtre cible - dans l'exemple "fenetre2".
La plupart des navigateurs n'acceptent pas de hauteur ou largeur de fenêtre inférieure à 100px. Selon le système d'exploitation et le navigateur un message d'erreur est sorti pour les fenêtres plus petites (accès refusé) ou bien les valeurs minimales respectives sont employées.
|
|
print()Imprime le contenu d'une page. Correspond à la commande imprimer du menu du navigateur. N'attend pas de paramètres.
<html><head><title>Test</title> </head><body> <a href="javascript:window.print()">Imprimer cette page</a> </body></html> |
L'exemple définit un lien à l'aide duquel l'utilisateur peut imprimer la page.
L'Explorer Internet MS 5 sous Macintosh et Opera 5.12 n'interprètent pas cette méthode.
Pour l'Explorer Internet MS 4.x, il y a une solution de rechange (Workaround) pour lancer une impression avec JavaScript. Pour cela, il faut incorporer un contrôle ActiveX. Le code JavaScript a alors cette apparence (exemple):
if(document.all && navigator.appVersion.substring(22,23)==4) {
self.focus();
var OLECMDID_PRINT = 6;
var OLECMDEXECOPT_DONTPROMPTUSER = 2;
var OLECMDEXECOPT_PROMPTUSER = 1;
var WebBrowser = '<object id="WebBrowser1" width="0" height="0" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
document.body.insertAdjacentHTML('beforeEnd',WebBrowser);
WebBrowser1.ExecWB(OLECMDID_PRINT,OLECMDEXECOPT_DONTPROMPTUSER);
WebBrowser1.outerHTML = ''; }
}
|
|
prompt()Montre une boite de dialogue avec un champ de saisie, un bouton "OK" et un bouton "interrompre". L'utilisateur peut entrer quelque chose dans le champ de saisie. La méthode prompt() renvoie la valeur entrée. Ainsi, il est possible de traiter dans un Script les entrées de l'utilisateur.
Attend deux paramètres:
1. texte d'invite = Texte décrivant ce que l'utilisateur doit entrer.
2. occupation du champ par défaut = Texte occupant le champ de saisie par défaut. Si vous désirez que le champ de saisie soit vide, alors transmettez une chaîne de caractères vide "".
<html><head><title>Test</title>
<script type="text/javascript">
<!--
Check = prompt("Entrez votre mot de passe pour cette page","");
if(Check != "cocorico") history.back();
else alert("Vous avez accès");
//-->
</script>
</head><body>
</body></html>
|
L'exemple propose avant l'affichage du fichier HTML une boite de dialogue avec prompt() à l'écran. L'utilisateur doit y entrer un mot de passe. L'entrée est sauvegardée dans la variable Check. Si la valeur de cette variable, à la fermeture de la boite de dialogue, est différente de "cocorico" l'utilisateur sera renvoyé avec history.back() à la page d'où il vient. Si le mot entré correspond, il reçoit avec alert() l'annonce qu'il a accès et la page va être chargée.
|
|
releaseEvents()Met fin à la surveillance des événements utilisateur. Contraire de captureEvents(). Attend comme paramètres une suite d'événements qui ne doivent plus être surveillés. La syntaxe est la même que pour captureEvents().
<html><head><title>Test</title>
<script type="text/javascript">
<!--
var i = 0;
window.captureEvents(Event.KEYPRESS);
window.onkeypress = sortie;
function sortie(evenement)
{
alert("Vous avez appuyé une touche avec la valeur " + evenement.which );
i = i + 1;
if(i > 2)
window.releaseEvents(Event.KEYPRESS);
}
//-->
</script>
</head><body>
Appuyez 3 fois sur une touche quelconque!
</body></html>
|
Dans l'exemple l'événement KEYPRESS (touche appuyée) est surveillé. Si l'utilisateur appuie sur une touche la fonction sortie() est appelée et renseigne avec alert() quelle touche a été appuyée. Ensuite la fonction relance la surveillance du même événement et s'appelle elle-même à l'apparition de l'événement, aussi longtemps cependant que le compteur i est plus petit que 3. Après quoi, la surveillance des événements clavier se termine avec la méthode releaseEvents(Event.KEYPRESS).
Vous trouverez un exemple lié à ce contexte et des explications sur le sujet dans le chapitre HTML dynamique dans la partie traitant de l' objet Event chez Netscape..
Netscape 6 n'interprète pas cette méthode (n'interprète plus).
|
|
resizeBy()Modifie la taille d'une fenêtre en bas et à droite du nombre de pixels indiqué. Attend les paramètres suivants:
1. valeur x = nombre de pixels pour agrandir/réduire la fenêtre par la droite. Les valeurs négatives réduisent, les valeurs positives agrandissent.
2. valeur y = nombre de pixels pour agrandir/réduire la fenêtre par le bas. Les valeurs négatives réduisent, les valeurs positives agrandissent.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function petit() { window.resizeBy(-10,-10); }
//-->
</script>
</head><body>
<a href="javascript:petit()">Réduis</a>
</body></html>
|
L'exemple contient un lien. En cliquant sur le lien, la fonction petit() est appelée. Cette fonction réduit la fenêtre de l'exemple de 10 pixels dans la largeur et la hauteur.
|
|
resizeTo()Modifie la taille d'une fenêtre de manière absolue. Attend les paramètres suivants:
1. valeur x = = nouvelle largeur de la fenêtre.
2. valeur y = nouvelle hauteur de la fenêtre.
<html><head><title>Test</title> </head><body onLoad="window.resizeTo(580,420)"> </body></html> |
L'exemple fixe à la lecture du fichier la taille de la fenêtre à une largeur de 580 pixels et une hauteur de 420 pixels.
|
|
routeEvent()Transmet un événement utilisateur à l'élément parent le plus élevé dans la hiérarchie, donc à l'objet window. À partir de là, l'événement est transmis toujours plus bas dans la hiérarchie jusqu'à ce que soit trouvé un gestionnaire d'événement qui traite l'événement.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Clique1() {
alert("Vous avez cliqué sur le bouton");
}
function Clique2(evenement)
{
alert("Vous avez cliqué dans la fenêtre");
window.routeEvent(evenement);
}
window.captureEvents(Event.CLICK);
window.onClick = Clique2;
//-->
</script>
</head><body>
<form action="">
<input type="button" value="Button" onClick="Clique1()">
</form>
</body></html>
|
L'exemple contient un bouton qui s'il est cliqué appelle la fonction Click1(). Cette fonction fait savoir pour contrôle avec alert() que le bouton a été cliqué. Dans l'exemple, cependant, le cliquement de souris est surveillé dès la lecture du fichier grâce à la méthode captureEvents(). Si l'événement se produit, la fonction Click2() est appelée. Celle-ci fait savoir pour contrôle qu'on a cliqué dans la fenêtre. Puis elle transmet avec routeEvent() l'événement à la hiérarchie objet. Si le cliquement se fait sur un autre objet qui surveille de la même façon l'événement onClick, l'action correspondante sera exécutée de la même façon. Dans l'exemple, cela a pour suite que l'utilisateur en cliquant sur le bouton reçoit deux avis, à savoir d'abord celui faisant savoir qu'il a été cliqué dans la fenêtre et ensuite celui comme quoi il a été cliqué sur le bouton. Sans la méthode routeEvent(), il ne recevrait pas du tout le deuxième avis, étant donné que l'événement onClick aurait été capté avant..
Netscape 6 n'interprète pas cette méthode (n'interprète plus).
|
|
scrollBy()Fait défiler une page automatiquement vers le haut ou le bas, la gauche ou la droite du nombre de pixels mentionné. Attend les paramètres suivants:
1. valeur x = Nombre de pixels pour le défilement vers la gauche ou vers la droite. Les valeurs négatives défilent vers la gauche, les positives vers la droite.
2. valeur y = Nombre de pixels pour le défilement vers le haut ou vers le bas. Les valeurs négatives défilent vers le haut, les positives vers le bas.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
for(var i=1; i<=100; i++)
document.write("<br>ligne " + i);
function vershaut() {
var y=0;
if (window.pageYOffset) y = window.pageYOffset;
else if (document.body && document.body.scrollTop) y=document.body.scrollTop;
while(y > 0) {
setTimeout("window.scrollBy(0,-10)",10);
y = y - 10;
}
}
//-->
</script>
<a href="javascript:vershaut()">faire défiler vers le haut</a>
</body></html>
|
L'exemple écrit pour la démonstration, grâce à une boucle avec document.write() 100 lignes dans le fichier. En dessous est noté un lien HTML. Pour atteindre ce lien, l'utilisateur doit d'abord faire défiler l'écran vers le bas à cause des 100 lignes qui ont été écrites. S'il clique sur le lien, le défilement se fait automatiquement, lentement vers le haut. Pour cela est appelée la fonction vershaut() Cette fonction recherche d'abord avec pageYOffset ou bien avec document.body.offsetTop pour l'Explorer Internet MS, la position verticale dans la page. Ensuite le défilement se fait dans une boucle while aussi longtemps vers le haut que la position de défilement atteigne 0.
Pour cela, la valeur de y est modifiée dans l'exemple à chaque fois de 10 pixels. Ainsi la page défilera t-elle à chaque boucle de 10 pixels vers le haut. Dans cet exemple, l'effet de décalage dans le défilement vient de ce que les commandes de défilement sont incorporées dans la méthode setTimeout().
|
|
scrollTo()Défile jusqu'à une position déterminée. Attend les paramètres suivants:
1. valeur x = valeur de gauche pour la position du coin supérieur gauche de la fenêtre d'affichage.
2. valeur y = valeur du haut pour la position du coin supérieur gauche de la fenêtre d'affichage.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
function Pos100() { window.scrollTo(100,100) }
var ligne = "<nobr>ligne";
for(var i=1; i<=100; i++)
{
ligne = ligne + " ligne";
document.write("<br>ligne " + ligne);
}
document.write("<a href='javascript:Pos100()'> Test<\/a><\/nobr>");
//-->
</script>
</body></html>
|
L'exemple écrit pour la démonstration, grâce à une boucle avec document.write() 100 lignes de plus en plus longues dans le fichier. Tout à la fin est noté un lien. Pour atteindre ce lien, l'utilisateur doit d'abord faire défiler l'écran vers le bas et vers la droite. S'il clique sur le lien, la fonction Pos100() est appelée. Cette fonction fixe à nouveau la position de défilement à savoir à 100 pixels depuis la gauche et 100 pixels depuis le haut par rapport au début du document.
|
|
setInterval()Exécute une instruction ou appelle une fonction dans un processus sans fin dans un rythme fixé jusqu'à ce que le processus soit terminé avec clearInterval() Attend deux paramètres:
1. Code = Une instruction JavaScript qui doit être répétée. Le plus souvent un appel de fonction.
2. Pause = Valeur en millièmes de secondes jusqu'à la prochaine exécution.
<html><head><title>Test</title>
</head><body>
<script type="text/javascript">
<!--
var actif = window.setInterval("Couleur()",1000);
var i = 0, couleur = 1;
function Couleur() {
if(couleur==1)
{ document.bgColor="yellow"; couleur=2; }
else
{ document.bgColor="aqua"; couleur=1; }
i = i + 1;
if(i >= 10)
window.clearInterval(actif);
}
//-->
</script>
</body></html>
|
Dans l'exemple est défini avec setInterval(), que la fonction Couleur() soit appelée toutes les 1000 millièmes de secondes, donc chaque seconde. Il est important de sauvegarder l'appel dans une variable, dans l'exemple la variable actif. Cette variable est nécessaire à la méthode clearInterval() pour mettre fin au processus. Dans l'exemple, la fonction Couleur() modifie à chaque fois qu'elle est appelée la couleur d'arrière plan du fichier ( document.bgColor). En même temps, un compteur est incrémenté. Quand il atteint une valeur supérieure ou égale à 10, la méthode clearInterval() est appelée et interrompt le processus sans fin. Pour cela, la variable actif définie auparavant est transmise comme paramètre.
|
|
setTimeout()Exécute une instruction après un certain délai. Attend deux paramètres:
1. Code = Une instruction JavaScript qui doit être répétée. Le plus souvent un appel de fonction.
2. Pause = Valeur en millièmes de seconde jusqu'à l'exécution.
<html><head><title>Test</title>
<script type="text/javascript">
<!--
function remarque() {
var x = confirm("Vous êtes maintenant déjà depuis 1 minute sur cette page... Continuer?");
if(x == false) top.close();
}
window.setTimeout("remarque()",60000);
//-->
</script>
</head><body>
</body></html>
|
L'exemple appelle au bout de 60000 millièmes de seconde, donc après 1 minute une fonction remarque() si tant est que l'utilisateur est encore toujours sur cette page après ce laps de temps. La fonction lui demande avec la méthode confirm() s'il désire rester encore plus longtemps sur la page. Si non, la fenêtre principale est fermée. Pour cela est fait appel à la commande top.close(),qui utilise la méthode close() sur l'instance de fenêtre la plus élevée du navigateur.
Les appels de fonction couplés à setTimeout() peuvent également contenir des paramètres. Tenez compte alors que les variables locales ne sont ensuite plus disponibles. Une transmission des valeurs en reliant des chaînes de caractères est cependant toujours possible.
|
|
stop()Correspond à un cliquement sur le bouton "Stop" du navigateur. Le chargement d'une page en est interrompu.
<html><head><title>Test</title> </head><body> Cette page a une taille de 300 kilooctets :<br> <a href="javascript:stop()">interrompre</a> </body></html> |
L'exemple définit un lien qui si on le clique, interrompt le chargement d'une page.
|
| |
 |
frames
|
 |
Remarques sur la référence objet JavaScript
|
| SELFHTML/Aides à la navigation JavaScript/DOM Référence objet |
© 2001 Stefan Münz / © 2002 Traduction 
Serge François, 13405@free.fr selfhtml@fr.selfhtml.org
