Previous	Table of Contents	Next
JavaScript Math Object		JavaScript Document Object

Purchase and download the full PDF version of this JavaScript eBook for only $8.99

L’objet fenêtre JavaScript se trouve en haut de la hiérarchie des objets JavaScript et représente la fenêtre du navigateur (ou les fenêtres si vous avez plus d’une fenêtre de navigateur ouverte à la fois). Jusqu’à ce chapitre, nous nous sommes concentrés sur les internes et la syntaxe de JavaScript. Dans ce chapitre, nous allons commencer à faire bouger les choses à l’écran (ce qui, après tout, est l’un des objectifs principaux de JavaScript). L’objet fenêtre permet aux développeurs d’effectuer des tâches telles que l’ouverture et la fermeture des fenêtres du navigateur, l’affichage des boîtes de dialogue d’alerte et d’invite et la configuration des délais d’attente (en spécifiant une action à effectuer après une période de temps spécifiée). Bien que les délais d’attente soient une caractéristique de l’objet window, nous les couvrirons dans le chapitre Délais d’attente JavaScript, plutôt que dans ce chapitre.

Référençant l’Objet fenêtre JavaScript

Comme couvert dans les Bases des objets JavaScript, il est généralement nécessaire d’utiliser la notation par points lors de l’accès aux propriétés ou méthodes d’un objet. Par exemple, le fragment de script suivant accède à la méthode write() de l’objet document :

document.write("Hello");

L’objet window est l’objet de niveau supérieur de la hiérarchie d’objets. En tant que tel, chaque fois qu’une méthode ou une propriété d’objet est référencée dans un script sans le nom d’objet et le préfixe de point, elle est supposée par JavaScript être un membre de l’objet window. Cela signifie, par exemple, que lors de l’appel de la méthode window alert() pour afficher une boîte de dialogue d’alerte, la fenêtre. le préfixe n’est pas obligatoire. Par conséquent, les appels de méthode suivants réalisent la même chose:

window.alert();alert()

Propriétés de l’objet fenêtre JavaScript

L’objet fenêtre JavaScript contient un certain nombre de propriétés qui peuvent être inspectées et utilisées dans un script : fenêtre

• .fermée – Utilisée lors de la gestion de plusieurs fenêtres, cette propriété indique si une fenêtre a été fermée ou non.

• fenêtre.defaultstatus / fenêtre.status – defaultstatus spécifie le message par défaut affiché dans la barre d’état du navigateur. status spécifie un message temporaire à afficher dans la barre d’état du navigateur à la place du message par défaut. Désactivé dans de nombreux navigateurs.

• fenêtre.frames – Si la fenêtre contient des frames, ce tableau contient le tableau d’objets frame (voir les détails des tableaux JavaScript sur l’accès aux tableaux).

• window.name – Les fenêtres ouvertes par un script doivent recevoir un nom. Cette propriété contient le nom de l’objet fenêtre correspondant.

• fenêtre.ouvreur – Lorsqu’une fenêtre a été ouverte dans un script contenu dans une autre fenêtre, cette propriété de la fenêtre enfant contient une fenêtre de référence qui l’a ouverte.

• fenêtre.parent – Lorsque vous travaillez avec des cadres dans une fenêtre, cette propriété contient une référence à l’objet fenêtre qui contient le cadre.

• fenêtre.écran – Un objet qui contient des informations sur l’écran sur lequel la fenêtre est affichée (les propriétés contenues dans cet objet incluent la hauteur, la largeur, la hauteur disponible, la largeur disponible et la profondeur de couleur).

• fenêtre.self – Une référence à la fenêtre en cours.

• fenêtre.top – Une référence à la fenêtre de niveau supérieur lorsque vous travaillez avec des cadres.

Ouverture des fenêtres du navigateur à l’aide de JavaScript

Une nouvelle fenêtre du navigateur peut être ouverte à partir d’un script JavaScript à l’aide de la méthode open() de l’objet window. La syntaxe pour ouvrir une nouvelle fenêtre est la suivante:

newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");

Ce qui suit fournit une explication des arguments transmis à la méthode open():

• URL – Spécifie l’URL de la page Web à charger dans la nouvelle fenêtre. Si aucune URL n’est spécifiée, une fenêtre vide est chargée.

• WindowName – Spécifie le nom de la fenêtre et est utilisé pour faire référence à la fenêtre.

• caractéristiques – Une liste de fonctionnalités séparées par des virgules qui vous permettent de personnaliser l’apparence de la fenêtre. Les options sont:

barre d’outils

Paramètre	Explication
largeur	Spécifie la largeur initiale du client du navigateur (voir innerWidth pour la taille de la zone de contenu)
height	Spécifie la hauteur initiale de la fenêtre du client du navigateur (voir innerHeight pour la taille de la zone de contenu)
innerWidth	Spécifie la largeur initiale de la zone de contenu de la fenêtre
innerHeight	Spécifie la hauteur initiale du contenu de la fenêtre zone
outerWidth	Spécifie la largeur initiale de la fenêtre du navigateur
outerHeight	Spécifie la hauteur initiale de la fenêtre du navigateur
Spécifie si la fenêtre doit contenir la barre d’outils du navigateur ou non
status	Spécifie si la fenêtre doit contenir la barre barre d’état du navigateur ou non
dépendante	Spécifie si la fenêtre doit se fermer à l’unisson avec sa fenêtre parente
barre de menus	Spécifie si la fenêtre doit se fermer contient la barre de menu du navigateur
emplacement	Spécifie si la fenêtre doit contenir la zone emplacement/URL du navigateur
barres de défilement	Masque/Affiche les barres de défilement horizontales/verticales du navigateur
redimensionnable	Spécifie si l’utilisateur a le droit de redimensionner la fenêtre une fois qu’elle apparaît.
répertoires	Spécifie si la fenêtre doit contenir la barre d’outils personnelle du navigateur.
copyHistory	Spécifie si la nouvelle fenêtre doit contenir une copie de l’historique des URL de la fenêtre d’appel
left	Spécifie le nombre de pixels du côté gauche de l’écran vers la nouvelle fenêtre
top	Spécifie le nombre de pixels du haut de l’écran vers la nouvelle fenêtre
alwaysLowered	Crée une nouvelle fenêtre qui est toujours positionnée sous les autres fenêtres du navigateur. Souvent utilisé pour ces publicités pop-under ennuyeuses.
alwaysRaised	Crée une nouvelle fenêtre qui est toujours positionnée au-dessus des autres fenêtres du navigateur à l’écran.
z-lock	Verrouille le niveau auquel le navigateur apparaît par rapport aux autres fenêtres du navigateur.

Les caractéristiques de hauteur, de largeur et de position sont définies à l’aide de chiffres. Les options de fonctionnalité restantes peuvent être définies à l’aide de valeurs true ou false (également oui, non et 1 et 0 peuvent être utilisés à la place de true et false). Un attribut absent est considéré comme faux. L’exemple suivant crée une nouvelle fenêtre avec une barre de menus, une dimension spécifique et aucune barre d’outils :

newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");

Fermeture des fenêtres du navigateur à l’aide de JavaScript

Une fenêtre peut être fermée à l’aide de la méthode close() de l’objet window. Le nom de la fenêtre (spécifié dans la méthode open()) doit être référencé lors d’une fermeture afin que vous soyez certain de fermer la fenêtre correcte. Par exemple, le code suivant crée une nouvelle fenêtre et crée un bouton-poussoir qui, lorsqu’il est cliqué, ferme la nouvelle fenêtre:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Close Window" onclick="newWindowObj.close()" /></form>

Il est également possible de fermer la fenêtre qui a ouvert la fenêtre en cours en utilisant la propriété opener de l’objet fenêtre en cours:

window.opener.close()

Cela fermera la fenêtre qui a ouvert la fenêtre dans laquelle le script ci-dessus est exécuté.

Déplacement et redimensionnement des fenêtres

Une fenêtre peut être déplacée vers des coordonnées spécifiques à l’écran en utilisant la méthode MoveTo() de l’objet window qui prend les coordonnées x et y comme arguments. L’exemple suivant déplace une nouvelle fenêtre à l’emplacement 100, 200 sur l’écran lorsque le bouton « Déplacer la fenêtre » est enfoncé:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>

En plus de déplacer une fenêtre vers un nouvel emplacement spécifique, il est également possible de déplacer une fenêtre par rapport à son emplacement actuel sur l’écran en utilisant la méthode moveBy() de l’objet fenêtre JavaScript. Encore une fois, la méthode prend des valeurs x et y qui sont ajoutées aux coordonnées x et y actuelles de la fenêtre spécifiée. Des valeurs négatives peuvent être utilisées pour changer la direction du mouvement:

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");</script><form action="null"> <input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" /></form>

Les méthodes window resizeTo() et resizeBy() fonctionnent de la même manière en ce qu’elles vous permettent de changer la taille d’une fenêtre soit à une taille spécifique, soit à une nouvelle taille par rapport à la taille actuelle.

Modification de la mise au point de la fenêtre

Lorsqu’une fenêtre est la fenêtre actuellement sélectionnée sur l’écran, on dit qu’elle a la mise au point. En règle générale, cliquer avec le pointeur de la souris dans une fenêtre donne à cette fenêtre le focus. Avec JavaScript, il est possible de modifier par programme le focus d’une fenêtre en utilisant les méthodes focus() et blur(). L’exemple suivant affiche une nouvelle fenêtre, la brouille pour que la fenêtre qui s’ouvre ait toujours le focus et fournit un bouton pour basculer le focus sur la nouvelle fenêtre :

<script language="JavaScript" type="text/javascript">newWindowObj = window.open ("", "MyWindow");newWindowObj.blur();</script><form action="null"> <input type="button" value="Focus New Window" onclick="newWindowObj.focus()" /></form>

Affichage des boîtes de dialogue de boîte de message

L’objet fenêtre JavaScript fournit des méthodes pour afficher trois types de boîtes de dialogue de message, les boîtes de dialogue d’alerte, de confirmation et d’invite :

• alerte – destiné à afficher un message à l’utilisateur. Il contient une zone de message où le message d’alerte doit être affiché et un bouton « OK » sur lequel l’utilisateur peut cliquer pour fermer la boîte de dialogue. La méthode alert() prend un seul argument représentant le message à afficher dans la boîte de dialogue. Le fragment de page Web suivant affiche une boîte de dialogue d’alerte avec le message « Vous n’avez pas de mot de passe valide » lorsque vous cliquez sur le bouton « Afficher l’alerte »:

<form action="null"> <input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" /></form>

• confirmation – utilisée lorsqu’une réponse oui ou non doit être obtenue de l’utilisateur. Ce type de dialogue s’affiche avec un message et des boutons « OK » et « Annuler ». La méthode confirm() prend le message à afficher pour l’utilisateur comme argument et renvoie true ou false selon que l’utilisateur a appuyé sur « OK » ou « Cancel » :

<script language="JavaScript" type="text/javascript">function showConfirmation(){ var result = confirm("Would you like to continue?"); if (result) document.write("Continue"); else document.write("Do not continue");}</script><form action="null"> <input type="button" value="Show Confirmation" onclick="showConfirmation()" /></form>

• prompt – conçu pour permettre à l’utilisateur d’obtenir des informations. La boîte de dialogue se compose d’un message à l’utilisateur, d’un champ de saisie de texte pour la saisie des données et des boutons OK et Annuler. La méthode prompt() prend le message à afficher comme argument et renvoie la valeur saisie par l’utilisateur:

<script language="JavaScript" type="text/javascript">function showPrompt(){ var userInput = prompt("Please enter your name:"); document.write("Hello, " + userInput);}</script><form action="null"> <input type="button" value="Show Prompt" onclick="showPrompt()" /></form>

Achetez et téléchargez la version PDF complète de cet eBook JavaScript pour seulement 8 $.99

Previous	Table of Contents	Next
JavaScript Math Object		JavaScript Document Object