L'objet window: le parent de tous les objets de la page

Nous avons déjà vu dans la partie qui traite les objets, que si on remonte la hiérarchie de ceux-ci en commençant par les objets élémentaires de la page (champs de formulaire, images...), alors on arrive jusqu'au parent absolu de tous ces objets qui est l'objet window.

Vous vous souvenez certainement de la façon avec laquelle on peut appeler une zone de texte en passant par la hiérarchie. Si on suppose que nous disposons d'un formulaire du nom de fo qui contient une zone de texte nommée login, alors le nom complet de l'objet zone de texte vu par Javascript est:

window.document.fo.login

Nous avons aussi fait abstraction de l'objet window, afin de réduire la syntaxe, car le navigateur sait qu'il est là. Le nom complet de la zone de texte devient donc:

document.fo.login

Cependant, ce qui nous intéresse dans cette partie c'est l'objet window lui même, car en plus de passer à travers lui pour accéder à ses sous-objets, il dispose, lui même, d'une panoplie d’attributs et méthodes qui permettent de réaliser des prouesses.

Attributs et méthodes de l'objet window

Comme d'habitude, nous allons voir les attributs et méthodes les plus utiles qui vont avec l'objet window.

Redirection: attribut location

Le fait que les liens hypertextes représentent le moyen le plus évident pour rediriger le navigateur vers une autre page relève de l’unanimité. Or, pour changer de page, il faut absolument que l'internaute clique sur le lien. Mais imaginons un instant qu'on veut rediriger le navigateur vers une nouvelle page sans cliquer sur aucun lien (suite à un événement ou un traitement spécial par exemple). Il nous faut donc une autre solution.

En Javascript l'attribut location permet de rediriger le navigateur vers la page dont le nom lui est affecté en tant que chaîne de caractères. Pour faire simple, imaginons que nous voulons allez vers la page nommée "contact.html" via Javascript. Le code ressemblera à ceci:
On peut prévoir ce bout de code dans une fonction à exécuter suite à un événement par exemple.

Ecrire dans la barre d'état: attribut status

La barre d'état est la petite barre qui se trouve (d'une manière permanente ou temporaire) en bas du navigateur et qui affiche souvent des informations comme la cible d'un lien hypertexte survolé ou l'état de chargement des éléments de la page.

Javascript permet de personnaliser le message à afficher sur la barre d'état grâce à l'attribut status. Le message souhaité lui est affecté en tant que chaîne de caractères.

Exemple:

Méthodes de boites de dialogue: alert(), confirm() et prompt()

Vous avez sûrement reconnu la méthode alert(). Jusqu'ici c'est elle qui nous permet d'afficher des messages sur une boite de dialogue. Sa syntaxe complète est window.alert() mais on préfère ne pas déclarer window puisque le navigateur est conscient de sa présence.

Il n'y a pas que alert() qui affiche les messages dans une boite de dialogue, mais il y a aussi confirm() et prompt(). Avant de parler de la différence entre les trois, j'aimerais attirer votre attention à un point important: Les méthodes de boites de dialogue figent le navigateur. En effet, le fait d'afficher un message dans une boite de dialogue n'est qu'une tâche complémentaires de ces méthodes. Leur rôle principal c'est de figer le navigateur et l'empêcher de poursuivre l’exécution du reste du code (que ce soit HTML, CSS ou Javascript lui même). Cependant, il faut dire à l'internaute pourquoi son navigateur est figé. C'est à cela que sert le message affiché.

Le navigateur sera de nouveau libéré si le client clique sur le bouton (ou les boutons) qui se présente sur la boite de dialogue.

Examinons maintenant ces trois méthodes:

• alert(): Cette méthode permet d'afficher un message dans une boite de dialogue en figeant le navigateur. Elle affiche aussi un bouton "OK". En cliquant dessus, la boite disparaît et le navigateur est libéré.
• confirm(): Cette méthode permet d'afficher un message dans une boite de dialogue menue de deux boutons: "OK" et "Annuler". En cliquant sur "OK", la méthode confirm() retourne la valeur booléenne true. Le bouton "Annuler" retourne false. Cette méthode sert principalement à faire confirmer une action par le visiteur.
• prompt(): La méthode prompt() permet d'afficher un message dans une boite de dialogue. Cette boite contient aussi une zone de texte et deux bouton "Ok" et "Annuler". Si on clique sur "OK" la chaîne de caractères saisie dans la zone de texte est retournée par la méthode. En cliquant sur "Annuler" la valeur "null" (qui signifie "variable vide") est retournée. La méthode prompt() peut accueillir deux paramètres. Le premier est affiché dans la boite de dialogue et le deuxième constitue le texte par défaut de la zone de texte.

Exemple:
Ce qui donne le résultat suivant:

Pop-Up: méthodes open() et close()

Les pop-up sont des fenêtres qui s'ouvrent indépendamment de la fenêtre principale. Elle contiennent généralement de la publicité ou des informations complémentaires à la page principale. De nombreux navigateurs ont tendance à bloquer l'ouverture par défaut des pop-up car, parfois, leur ouverture intempestive importune l'internaute.

Pour ouvrir une fenêtre on utilise la méthode open() et pour les fermer, en plus du bouton de fermeture de la fenêtre par défaut, on peut faire appel à la méthode close().

La méthode open(URL, Nom de la fenêtre, Options) reçoit trois paramètres:

• URL: Il s'agit du chemin de la page à ouvrir dans la fenêtre. Il peut être absolu ou relatif.
• Nom de la fenêtre: Il s'agit d'un nom optionnel que l'on donne à la fenêtre. Il est utile quand plusieurs fenêtres sont ouvertes. S'ils disposent de noms différents, alors on se retrouvera avec autant de fenêtre que d'appels. S'ils ont le même nom, alors un nouvelle fenêtre ouverte écrase l'ancienne.
• Options: Les options permettent de personnaliser l’apparence de la fenêtre. Les options possibles sont:
  
  • width: spécifie la largeur de la fenêtre en pixel (l'unité n'est pas spécifiée).
  • height: hauteur de la fenêtre.
  • location: peut avoir yes ou no pour autoriser ou non l’apparition de la barre d'adresse.
  • resizable: peut avoir yes ou no pour autoriser ou non le redimensionnement de la fenêtre./li>
    
  • menubar: peut avoir yes ou no pour autoriser ou non l’apparition du menu du haut de la fenêtre.
  • scrollbar: peut avoir yes ou no pour autoriser ou non l’apparition des barres de défilement
  • toolbar: peut avoir yes ou no pour autoriser ou non l'affichage de la barre d'outils.
  • status: peut avoir yes ou no pour autoriser ou non l’apparition de la barre d'état.
  
  Les options doivent être séparées d'une virgule (sans espaces). Selon le navigateur, toute option non déclarée reçoit implicitement la valeur no.
  

Exemple:
Ce qui donne:

Temporisateur: méthodes setTimeout() et clearTimeout()

Il faut dire que la méthode setTimeout() est largement utilisée en Javascript. Personnellement je l'utilise beaucoup, surtout pour les animations et les effets.

La méthode setTimeout() permet de retarder l’exécution d'un bout de code (ou une fonction). Elle est déclarée comme ceci:
Dans ce cas, la fonction ou les instructions passées en premier paramètre s’exécuteront après l'écoulement de la durée spécifiée en deuxième paramètres. La durée est représentée par un entier qui signifient le nombre de millisecondes qu'il faut attendre avant l’exécution du code.

Selon le besoin, on peut prévoir un identifiant du temporisateur( t dans ce cas).

Exemple:
Ce qui donne:
Dans ce cas, si on clique sur le bouton "Actionner", on appelle la fonction "g()". Cette fonction appellera la fonction "f()" après une durée d'attente de 2000ms (2s). Dans ce cas nous n'avons pas récupéré l'identifiant du temporisateur car nous n'en avons pas besoin.

Supposons maintenant que nous avons prévu un bouton qui annule le temporisateur avant l'écoulement de la durée d'attente fixée. Il suffit de faire appel à la méthode clearTimeout() en lui passant comme paramètre l'identifiant du temporisateur setTimeout() que l'on souhaite arrêter.

Exemple: compteur à rebours

On souhaite créer un compteur à rebours qui commence de 10 et se décrémente de 1 au bout de chaque seconde jusqu'à ce qu'il atteigne la valeur zéro. On peut afficher ensuite ce qu'on veut comme message.

Comme d'habitude, nous afficherons le compteurs dans une zone de texte.

Voici ma version de code:
Ce qui donne:
Voilà un exemple d'une fonction récursive (qui s'appelle par elle même). Le premier appel est fait suite au clic sur le bouton "Commencer", après le rappel est fait à chaque fois la fonction est exécutée, sauf que la prochaine exécution sera retardée d'une seconde.

Comme d'habitude, la fonction init() est là pour exécuter certaines opérations au chargement de la page. Dans ce cas, elle affiche la valeur de la variable i dans la zone de texte.

Il suffit de changer la valeur 10 qu'on a affecté à la variable i par ce que vous voulez (à condition qu'elle soit supérieure à 0) pour modifier le compteur à rebours.

L'objet window en vidéo