Objet fenêtre JavaScript

La fenêtre JavaScript est une interface globale (type d’objet) qui est utilisée pour contrôler le cycle de vie de la fenêtre du navigateur et effectuer diverses opérations sur celle-ci.

Une variable globale fenêtre, qui représente la fenêtre actuelle du navigateur dans laquelle le code s’exécute, est disponible dans notre code JavaScript et on peut y accéder directement en utilisant le littéral window.

Elle représente une fenêtre contenant une page web qui à son tour est représentée par l’objet document. Une fenêtre peut être une nouvelle fenêtre, un nouvel onglet, un ensemble de cadres ou un cadre individuel créé avec JavaScript.

Dans le cas d’un navigateur à plusieurs onglets, un objet fenêtre représente un seul onglet, mais certaines de ses propriétés comme innerHeight, innerWidth et méthodes comme resizeTo() affecteront la fenêtre entière du navigateur.

Chaque fois que vous ouvrez une nouvelle fenêtre ou un nouvel onglet, un objet fenêtre représentant cette fenêtre/cet onglet est automatiquement créé.

Les propriétés d’un objet fenêtre sont utilisées pour récupérer les informations sur la fenêtre qui est actuellement ouverte, tandis que ses méthodes sont utilisées pour effectuer des tâches spécifiques comme l’ouverture, la maximisation, la minimisation de la fenêtre, etc.

Pour comprendre l’objet fenêtre, utilisons-le pour effectuer quelques opérations et voir comment il fonctionne.

Utilisation de l’objet fenêtre JavaScript

Utilisons l’objet fenêtre JavaScript pour créer une nouvelle fenêtre, en utilisant la méthode open(). Cette méthode crée une nouvelle fenêtre et renvoie un objet qui peut ensuite être utilisé pour gérer cette fenêtre.

Dans le code ci-dessus, nous avons utilisé l’objet fenêtre de la fenêtre existante pour créer une nouvelle fenêtre en utilisant la méthode open(). Dans la méthode open(), nous pouvons fournir l’URL à ouvrir dans la nouvelle fenêtre(nous pouvons aussi la laisser vide), le nom de la fenêtre, la largeur et la hauteur de la fenêtre à créer.

Voici la syntaxe de la méthode open() de l’objet fenêtre:

let newWindow = window.open(url, windowName, );

Nous pouvons fournir, autant de propriétés que nous voulons, tout en créant une nouvelle fenêtre.

Lorsque la méthode open() est exécutée, elle renvoie la référence de l’objet fenêtre pour la nouvelle fenêtre créée, que vous pouvez affecter à une variable, comme nous l’avons fait dans le code ci-dessus. Nous avons assigné la valeur retournée par la méthode window.open() à la variable win.

Nous avons utilisé la variable win pour accéder à la nouvelle fenêtre, comme obtenir le nom de la fenêtre, obtenir l’emplacement de la fenêtre qui a ouvert la nouvelle fenêtre, etc.

Il existe de nombreuses propriétés et méthodes pour l’objet fenêtre, que nous avons listées ci-dessous.

Dire les dimensions d’une fenêtre

Nous pouvons obtenir la hauteur et la largeur d’une fenêtre en utilisant les propriétés intégrées de l’objet fenêtre.

Nous pouvons également accéder à l’objet document en utilisant un objet fenêtre(window.document) qui nous donne accès au document HTML, donc nous pouvons ajouter un nouvel élément HTML, ou écrire n’importe quel contenu dans le document, comme nous l’avons fait dans l’exemple ci-dessus.

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

Les propriétés de l’objet fenêtre font référence aux variables créées à l’intérieur de l’objet fenêtre.

En JavaScript, toutes les données disponibles sont attachées à l’objet fenêtre en tant que propriétés.

Nous pouvons accéder aux propriétés de l’objet fenêtre comme : window.propertyname où propertyname est le nom de la propriété.

Un tableau des propriétés les plus populaires de l’objet fenêtre est donné ci-dessous :

.

Propriété	Description
closed	renvoie une valeur booléenne qui spécifie si une fenêtre a été fermée ou non
document	spécifie un objet document dans la fenêtre.
histoire	spécifie un objet historique de la fenêtre.
frames	spécifie un tableau de tous les cadres de la fenêtre actuelle
defaultStatus	spécifie le message par défaut qui doit apparaître dans la barre d’état de Window.
innerHeight	spécifie la hauteur intérieure de la zone de contenu de la fenêtre.
innerWidth	spécifie la largeur intérieure de la zone de contenu de la fenêtre.
length	spécifie le nombre de cadres contenus dans la fenêtre.
location	spécifie l’objet d’emplacement pour la fenêtre
nom	spécifie le nom de la fenêtre
top	spécifie la référence de la fenêtre la plus haute du navigateur.
self	renvoie la référence du cadre ou de la fenêtre active actuelle.
parent	renvoie le cadre ou la fenêtre parent de la fenêtre actuelle.
status	spécifie le message qui est affiché dans la barre d’état de la fenêtre lorsqu’une activité est effectuée sur la fenêtre.
screenleft	spécifie la coordonnée x de la fenêtre par rapport à l’écran du moniteur d’un utilisateur
screenTop	spécifie la coordonnée y de la fenêtre par rapport à l’écran du moniteur d’un utilisateur
screenX	Spécifie la coordonnée x de la fenêtre par rapport à l’écran du moniteur d’un utilisateur
screenY	Spécifie la coordonnée y de la fenêtre par rapport à l’écran du moniteur d’un utilisateur

Prenons un exemple pour voir quelques-unes de ces propriétés en action :

Dans l’exemple ci-dessus, nous avons créé une nouvelle fenêtre, juste pour vous familiariser avec la création de nouvelles fenêtres et aussi, pour vous faire comprendre que lorsque nous créons une nouvelle fenêtre, alors la fenêtre actuelle a un objet fenêtre différent et la nouvelle fenêtre aura un objet fenêtre séparé.

Nous avons ensuite essayé d’accéder à certaines propriétés de la nouvelle fenêtre créée.

TÂCHE : Essayez quelques autres propriétés de fenêtres dans le terrain de jeu de code ci-dessus pour pratiquer et comprendre comment les propriétés de fenêtres fonctionnent.

Méthodes de l’objet fenêtre JavaScript

Les méthodes de l’objet fenêtre se réfèrent aux fonctions créées à l’intérieur de l’objet fenêtre, qui peuvent être utilisées pour effectuer diverses actions sur la fenêtre du navigateur, comme la façon dont il affiche un message ou obtient une entrée de l’utilisateur.

Ci-après, nous avons répertorié certaines des méthodes d’objet fenêtre les plus couramment utilisées :

.

.

.

Méthode	Description
alert()	spécifie une méthode qui affiche une boîte d’alerte avec un message un bouton OK.
blur()	spécifie une méthode qui supprime le focus de la fenêtre courante.
clearInterval()	spécifie une méthode qui efface le timer, qui est défini en utilisant la méthode setInterval().
close()	spécifie une méthode qui ferme la fenêtre actuelle.
confirm()	spécifie une méthode qui affiche une boîte de dialogue avec un message et deux boutons OK et Annuler
focus()	spécifie une méthode qui met le focus sur la fenêtre courante.
open()	spécifie une méthode qui ouvre une nouvelle fenêtre de navigateur
moveTo()	spécifie une méthode qui déplace une fenêtre à une position spécifiée
moveBy()	spécifie une Méthode qui déplace une fenêtre par rapport à sa position actuelle.
prompt()	spécifie une méthode qui demande une entrée.
print()	spécifie une méthode qui envoie une commande d’impression pour imprimer le contenu de la fenêtre actuelle.
setTimeout()	spécifie une méthode qui évalue une expression après un nombre spécifié de millisecondes.
setInterval()	spécifie une méthode qui évalue une expression à des intervalles de temps spécifiés (en millisecondes)
resizeBy()	spécifie la quantité par laquelle la fenêtre sera redimensionnée
resizeTo()	utilisée pour redimensionner dynamiquement la fenêtre
scroll()	fait défiler la fenêtre à un endroit particulier du document
scrollBy()	fait défiler la fenêtre selon la valeur donnée
stop()	cette méthode arrête le chargement de la fenêtre

Prenons un exemple et voyons quelques-unes des méthodes ci-dessus en action :

Dans l’exemple ci-dessus, nous avons utilisé quelques méthodes de fenêtre, vous pouvez essayer d’autres méthodes. Dans le prochain tutoriel, nous allons apprendre l’objet History, qui est une propriété de l’objet window.