Fiche DOM HTML : objet window

Objet de la fiche

État de la fiche

Plan de la fiche

• | Avant-propos |
• | L'objet Window et ses méthodes |
• | Déplacements |
• | Dimensions |
• | Position et taille |
• | Glissements |
• | Boites de dialogue |
• | Minuteries |

Avant propos

Rappelons la structuration du contenu d'une web après son chargement  sous forme d'un arbre, dont l'objet window constitue la racine de la fenêtre courante.

Window en tant qu'objet possède des méthodes propre à lui même, méthodes que nous allons détailler ci-dessous.

L'objet Window et ses méthodes

>

Note⁽¹⁾: Cette partie fait l'objet d'une fiche particulière sur les pop-up

Déplacement moveTo(x,y) et moveBy(x,y)

Ces méthodes permettent  de déplacer horizontalement ou verticalement une fenêtre sur l'écran .

Les méthodes sont référencées par rapport à l'objet window => window .methodes.

window.moveTo(x,y) : déplace à

On utilise moveTo(x,y) pour déplacer une fenêtre vers un point de coordonnées connues.

moveTo(x,y) accepte comme paramètres :
- x (uniquement positif) , position horizontale en pixel.
- y (uniquement positif), position verticale en pixel.
x,y sont les coordonnées sur lesquelles le coin haut gauche de la fenêtre va directement se positionner  lors de l'exécution de la propriété moveTo(x,y) .

Limites de déplacement 
soit Zx = largeur écran - largeur de la fenêtre  et Zy = hauteur écran - hauteur de la fenêtre
alors        0 < x < = Zx   et    0 <y < = Zy
Pour toutes valeurs de  x > Zx  la fenêtre est en butée sur la partie droite de l'écran.
Pour toutes valeurs de  y > Zy  la fenêtre est en butée sur la partie basse de l'écran.

window.moveBy(x,y) : déplace de

On utilise moveBy(x,y) pour déplacer une fenêtre d'une certaine valeur par rapport à sa position d'origine.

moveBy(x,y) javascript accepte comme paramètres :
- x, valeur entière positive ou négative en pixel.
- y, valeur entière positive ou négative en pixel.
x, y sont le nombre de pixels dont va se déplacer le coin haut gauche de la fenêtre.  On ne connaît pas les coordonnées finales mais on connaît le déplacement que l'on désire appliquer.

Exemple

Dimensionnement resizeTo(x,y) et resizeBy(x,y)

Ces méthodes permettent  de redimensionner  une fenêtre sur l'écran .

Les méthodes sont référencées par rapport à l'objet window => window .méthode.

window.resizeTo(x,y) :  redimensionne à.

La méthode resizeTo(x,y) javascript accepte comme paramètres :
- x, valeur de type Number positive ou négative en pixel.
- y, valeur de type Number positive ou négative en pixel.
x, y sont les nouvelles coordonnées du point  bas droit de la nouvelle fenêtre.

window.resizeBy(x,y) :  redimensionne de.

La méthode resizeBy(x,y) javascript accepte comme paramètres :
- x, valeur entière positive ou négative en pixel.
- y, valeur entière positive ou négative en pixel.
x,y sont le nombre de pixels qui vont être rajoutés à la taille actuelle de la fenêtre.

Exemple avec resizeBy(x,y)

Positions et Tailles  de la fenêtre Web

Ces méthodes permettent  de connaître les positions et tailles d' une fenêtre Web.

Suivant les navigateurs et les DOCTYPE utilisés,  les propriétés sont référencées :

• soit par rapport à l'objet window  : window.propriétés  (en jaune dans le tableau) pour les navigateurs différents de IE,
• soit  par rapport à l'objet window.document.documentElement :
  window.document.documentElement.propriétés (en vert dans le tableau) pour IE uniquement.

Propriétés

Propriétés applicables sur tous les navigateurs sauf  Internet Explorer (IE).

Les propriétés ou les méthodes suivantes sont référencées par rapport à l'objet window => window .propriétés ou window .méthode

Position de la fenêtre :

Propriétés window.screenX,  window.screenY

• screenX donne la position horizontale du coin haut gauche de la fenêtre web par rapport au coin haut-gauche de l'écran.
• screenY donne la position verticale du coin haut gauche de la fenêtre web par rapport au coin haut-gauche de l'écran.

Hauteur / largeur totale et utile :

Propriétés window.innerHeight, window.innerWidth, window.outerHeight et window.outerWidth

• innerHeight et innerWidth donnent respectivement la hauteur et la largeur utiles de la fenêtre Web (hors cadre et barres de menus).
• outerHeight et outerWidth donnent respectivement la hauteur et la largeur totale de la fenêtre .

Valeurs des déplacements horizontaux et verticaux :

Propriétés window.pageXOffset et window.pageYOffset

pageXOffset et pageYOffset donnent le déplacement horizontal et vertical dus à l'utilisation des scrollbars (ou toute autre méthode ayant activé le déplacement de la fenêtre) . Par exemple si le contenu de la page web ne rentre pas complètement dans l'écran, on peut néanmoins consulter le contenu en utilisant les barres d'ascenseurs ou la roulette de la souris. C'est la mesure de la distance entre le haut de l' élément et le point le plus haut de son contenu visible (voir le complément d'information du mécanisme pageYoffset ou scrollTop ci dessous).

Propriétés applicables avec  Internet Explorer (IE).

Les  méthodes suivantes sont référencées par rapport à l'objet document lui même objet  de window :
window.document.documentElement .méthodes

Position de la fenêtre :

Propriétés

• window.document.documentElement.screenLeft, 
• window.document.documentElement.screenTop

screenLeft donne la position horizontale du coin haut gauche de la fenêtre web par rapport au coin haut-gauche de l'écran.
screenTop donne la position verticale du coin haut gauche de la fenêtre web par rapport au coin haut-gauche de du début du contenu de la page Web.

Hauteur / largeur totale et utile :

Propriétés

• window.document.documentElement.clientHeight,
• window.document.documentElement.clientWidth,
• window.document.documentElement.scroolHeight,
• window.document.documentElement.scroolWidth

clientHeight donne la hauteur utile de la page Web (hors cadre et barres de menus et barre ascenseur).
clientWidth donne   la largeur utile de la fenêtre Web hors barre ascenseur)
scrollHeight donne la hauteur réelle du contenu de la page Web
scrollWidth donne  la largeur totale de la fenêtre (hors ascenseur).

Valeurs des déplacements horizontaux et verticaux

Propriétés window.scrollTop, window.scrollLeft

scrollTop et scrollLeft donnent le déplacement horizontal et vertical dus à l'utilisation des scrollbars (ou toute autre méthode ayant activé le déplacement de la fenêtre) . Par exemple si le contenu de la page web ne rentre pas complètement dans l'écran, on peut néanmoins consulter le contenu en utilisant les barres d'ascenseurs ou la roulette de la souris. C'est la mesure de la distance entre le haut de l' élément et le point le plus haut de son contenu visible.
Lorsqu'un élément ne génère pas de barre de défilement vertical, sa valeur scrollTop vaut 0.

Complément d'information sur le mécanisme pageYoffset ou scrollTop

Exemple complet sur la géométrie des fenêtres

Glissement scrollBy(x,y) et scrollTo(x,y)

Les méthodes sont référencées par rapport à l'objet window => window .methodes.

window.scrollBy(X,Y)

permet d'activer l'ascenseur horizontal de x pixels et l'ascenseur vertical de y pixels.
La méthode scrollBy(x,y) accepte comme paramètres :
- x, entier positif ou négatif en pixel.
- y, entier positif ou négatif en pixel.

window.scrollTo(x,y)

Fixe une position aux ascenseurs
La méthode scrollTo(x,y) accepte comme paramètres :
- x, entier positif en pixel.
- y, entier positif en pixel.

Exemple

Faites glisser le contenu de la fenêtre en utilisant les boutons : les méthodes window.scrollBy(0,10) , window.scrollBy(10,0) et window.scrollTo(0,0) sont utilisées.

Les boîtes de dialogue avec les méthodes alert(), confirm() et prompt()

Généralités

L'objet window possède des méthodes relatives à l'ouverture et à la fermeture des fenêtres de dialogue.

Une boîte de dialogue est une fenêtre qui s'affiche au premier plan suite à un événement, et qui permet

• Soit d'avertir l'utilisateur
• Soit le confronter à un choix
• Soit lui demander de compléter un champ pour récupérer une information

Ce type de boîte est à utiliser avec parcimonie car elle oblige une action de la part de l'utilisateur, et est à terme très énervante... Les boîtes de dialogues sont toutefois un moyen simple de débugger (repérer les erreurs), en affichant à un point donné une fenêtre contenant la valeur d'une variable.

La boite alert()

Cette méthode permet d'afficher dans une boîte un bouton OK avec le texte qu'on lui passe en paramètre. Syntaxes : "alert(nom_de_la_variable); , alert('Chaîne de caractères'); alert('Chaîne de caractères' + nom_de_la_variable);"

Points particulier du code :  ' \nS\'il vous plait vous pouvez....

• le symbole \n(comme chaine de caractères) permet d'introduire un retour à la ligne.
• Si on utilise des caractères pouvant être confondus avec des caractères de commande, comme ici l'apostrophe simple dans la chaine S'il vous ...il faut mettre le caractère \ devant pour signaler au logiciel que le caractère qui suit n'est pas un caractère de commande mais du texte :S\'il vous ...

La boite confirm()

Cette méthode  est similaire à la méthode alert(), mais elle permet un choix entre "OK" et "Annuler". Lorsque l'utilisateur appuie sur "OK" la méthode renvoie la valeur true. Elle renvoie false dans le cas contraire...

Syntaxes : confirm(nom_de_la_variable); , confirm('Chaîne de caractères'); confirm('Chaîne de caractères' + nom_de_la_variable);

Points particulier du code :

• Mêmes remarques que pour la méthode alert().
• if (reponse) est équivalent à  if (reponse == true). if (!reponse) est équivalent à  if (reponse == false)

La boite prompt()

Cette méthode fournit un moyen simple de récupérer une information provenant de l'utilisateur. La méthode prompt()requiert deux arguments ;:

• le texte d'invite
• la chaîne de caractères par défaut dans le champ de saisie

L'appui sur OK retourne soit le texte saisi par l'internaute, soit null si aucun texte n'a été saisi. L'appui sur Annuler retourne null.

Syntaxes : prompt (chaîne de caractère ou nom de variable pour le texte de l'invite, chaine de caractère ou nom de variable pour le texte par défaut).

Points particulier du code :

• Mêmes remarques que pour la méthode alert().
• La réponse ne sera validée que si la réponse est différente de null, et si la réponse est différente de 'Texte par défaut' et si la réponse est différente d'une chaine vide '' : if ((reponse != null) && (reponse != 'Texte par défaut') && (reponse != '')).

Les minuteries avec les fonctions setTimeout() et clearTimeout()

setTimeout()

La fonction setTimeout() permet de programmer un « minuteur » afin de retarder une action. Il s'agit de faire attendre le visiteur x secondes avant de déclencher quelque chose sur la page web. L'évènement est unique : une fois le délai de x secondes atteint l'évènement est déclenché et point final, plus rien ne se déclenchera  par la suite sauf réactivation par le programme ou suite à l'appui sur un bouton.
clearTimeout() est associée à setTimeout() pour annuler une minuterie en cours.

Syntaxes :

• var TimeoutID = setTimeout(expression, ms);
• clearTimeout(TimeoutID);

• expression : c'est une chaîne de caractères contenant la formule de calcul ou le nom de la fonction appelée à l'issue du délai. Cette action n’est exécutée qu’une seule fois.
• ms : est une valeur numérique entière, exprimée en millisecondes.
• TimeoutID est une variable utilisateur initialisée lors de la création du Timeout. L'identificateur renvoyé est une valeur numérique qui identifie précisément le compteur : cette information  est utilisée  pour annuler une "minuterie" en cours avec la méthode "clearTimeout()". L'identificateur n'évolue pas en fonction de l'état de la "minuterie" (en cours ou terminée) et c'est au concepteur du script à gérer cet indicateur (voir l'exemple).

setInterval()

La fonction setInterval() permet d'effectuer une opération à intervalle régulier.  En fait c'est un setTimeout() cyclique.
La syntaxe est identique à celle de setTimeout().

clearInterval() est associé à setInterval() pour annuler un intervalle en cours.