▼
8. Fenêtres
▼
- Barre d'état
- Modifier les couleurs
-
Changer
titre de page - Afficher informations
- Ouvrir nouvelle fenêtre
- Communication fenêtres
- Imprimer fenêtre
- Redimensionner fenêtre
- Déplacer / fermer
- Boîtes de messages
Barre d'état
La barre d'état du navigateur est la zone au bas de la fenêtre, en dessous du document. Cette zone sert à afficher des informations pour l'usager comme l'adresse correspondant au lien sur lequel la souris se trouve. La propriété window.status sert à définir le texte affiché dans la barre d'état. Il suffit pour cela de lui affecter une string (qui peut contenir des instructions JavaScript).
Exemple :
window.status="Voici la page où on change les status! ";
Si le texte que vous demandez d'afficher est plus long que la fenêtre du navigateur, il sera tronqué tout en affichant le plus de texte possible. Il est possible d'utiliser la propriété window.defaultStatus pour indiquer le texte par défaut lorsque aucun évènement n'est enclenché. Ceci est pratique lorsqu'on a plusieurs évènements sur la page qui modifient le texte du status. Ainsi, lorsqu'aucun n'est en cours il y a tout de même un texte "lucide".
*~* Parfois defaultStatus fonctionne mieux sous Netscape que status tout court. *~*
Couleur d'arrière-plan
En HTML, la couleur d'arrière-plan est modifiable grâce à
l'attribut bgcolor présent dans la balise <body>. JavaScript
vous offre l'opportunité de modifier dynamiquement cette couleur. La
propriété document.bgColor contient la valeur actuelle
de l'arrière-plan. Ainsi, si on affecte une nouvelle valeur à
cette propriété, la couleur d'arrière-plan s'en trouve
modifiée.
Les valeurs de couleurs sont soient des noms de couleur en anglais connus et que JavaScript arrive à identifier automatiquement tels que red, blue, orange, black, white, etc. ou des nombres hexadécimaux indiquant la valeur RVB (RGB) de la couleur. Les valeurs RVB sont composées d'un signe dièse (#) suivi de la valeur hexadécimale de rouge, vert et bleu allant de 00 à FF chacun. Ainsi, le vert vaut #00FF00.
Voici un script très utile pour trouver rapidement le code hexadécimal voulu. (provient de The JavaScript Source)
JavaScript est sensible à la casse ce qui signifie qu'il faut faire attention de bien mettre un C majuscule lorsqu'on fait appel à la propriété bgColor.
Exemple :
<form name="couleur">
<input type="button" onClick="document.bgColor='#D671FF'" value="Arrière-plan violet">
</form>
Couleur du texte
De la même manière il est possible de changer la couleur du
texte de la page grâce à la propriété document.fgColor
. La couleur d'un lien est définie par document.linkColor,
la couleur du lien suivit est document.vlinkColor et la couleur du
lien chargé est document.alinkColor.
Le titre d'une page apparaît dans la barre de titre de la fenêtre active. Ce titre est défini par la balise <title>, qui se trouve dans la partie d'entête d'une page. JavaScript comprend une propriété qui permet de modifier le titre, document.title.
Ainsi, il est possible de modifier d'une manière dynamique le nom d'une page. Ceci est rarement utile, mais les maniaques de la personnification de page pourront s'en servir jumelé avec des cookies ou des boîtes à champs de texte.
Le titre de document est différent du nom de la fenêtre. Le titre s'affiche dans la barre de titre du navigateur alors que le nom de fenêtre ne sert qu'à l'identifier en Javascript. Ce dernier n'est pas affiché dans le navigateur et sert au code interne.
Afficher les informations de la page
Date de mise à jour
Il est primordial de toujours mettre sur la page d'accueil d'un site
Web
la date de sa dernière modification. La plupart des usagers la remarquent
et se fient à cette date pour juger de la véracité du
site. En effet, un site de nouvelles sur le sport qui n'aurait pas été
mis à jour depuis plusieurs mois risque de ne pas être d'un très
grand intérêt... Ainsi, la présence d'une date de dernière
modification est un gage de qualité.
La propriété document.lastModified affiche la date à laquelle le document a été modifié pour la dernière fois. Le format est le mois, le jour, l'année et l'heure. Plus loin, la manipulation de l'objet date sera traité.
Exemple :
document.write("lastModified : " + document.lastModified + "<br>");
Adresse URL
La propriété document.URL contient une string représentant
l'URL de la page en cours. Il peut être utile de l'afficher, surtout
lorsqu'on offre une version imprimable de la page. Il est à noter
qu'elle est en lecture et donc non-modifiable.
Adresse URL de la page qui a référé
Une autre propriété disponible est document.referrer
qui affiche l'URL du document contenant le lien qui a mené à
la page en cours. Ceci diffère de l'historique qui lui contient la
page visitée précédente.
Cette propriété n'est pas stable sous Internet Explorer et qu'autres navigateurs. Selon la configuration du navigateur, il est possible qu'elle n'affiche rien ou bien l'URL en cours plutôt que l'URL d'origine.
La méthode window.open() permet d'ouvrir de nouvelles fenêtres. Cette méthode accepte trois paramètres à la manière suivante : window.open("URL", "nom", "features"); . Le premier est l'URL de destination de la nouvelle fenêtre, le deuxième est le nom de cette nouvelle fenêtre et le troisième est en fait un ensemble de paramètres définissant les caractéristique de la nouvelle fenêtre.
Le nom est la variable qui sert à identifier
cette fenêtre et ses contrôles. Si on ouvre une autre fenêtre
avec le même nom, la première sera changée tout simplement.
Il faut donc penser à si c'est ce qu'on désire.
Sinon on doit donner des noms différents à nos fenêtres.
Le troisième paramètre est optionnel.
L'ensemble des caractéristiques qu'il est possible de détailler pour la fenêtre sont les suivantes :
Les features
Si on spécifie une feature dans le troisième
paramètre, seulement celle-là sera visible. Pour spécifier
que vous voulez que votre fenêtre ait certaines features il faut les
lister avec une liste séparée par des virgules.
Exemple :
window.open("URL", "nom_page", "location,menubar");
Vous allez obtenir une fenêtre avec juste la boîte d'adresse et un menu. Il ne faut pas mettre d'espaces, ce n'est pas pris en charge par certains navigateurs.
| menubar | Barre de menu qui contient File, Edit, etc. |
| status | La barre au bas de la fenêtre |
| scrollbars | Fait apparaître la scrollbar si nécessaire |
| resizable | Permet de changer la grosseur de la fenêtre |
| width | Largeur en pixels |
| height | Hauteur en pixels |
| toolbar | Barre du navigateur, avec précédent, home, etc. |
| location | Place où on écrit les adresses URL |
| directories | Barres spéciales des navigateurs (peu utilisé) |
| copyhistory | Copier ou non la l'historique du navigateur dans la fenêtre |
Il est aussi possible de positionner l'endroit où la fenêtre apparaîtra sur l'écran de l'usager.
| screenX= | Donne la position de la fenêtre en pixels à partir de la gauche de l'écran sous Netscape 4+ |
| screenY= | Donne la position de la fenêtre en pixels à partir du haut de l'écran sous Netscape 4+ |
| left= | Donne la position de la fenêtre en pixels à partir de la gauche de l'écran sous IE 4+ |
| top= | Donne la position de la fenêtre en pixels à partir du haut de l'écran sous IE 4+ |
Exemple :
window.open('URL','nom','width=400,height=200,screenX=0,screenY=100,left=0,top=100')
Communication entre les fenêtres
Window possède deux propriétés qu'il est intéressant d'utiliser en particulier lorsqu'on décide de mettre sur son site des petites fenêtres de publicité.
focus() permet de faire apparaître une
fenêtre par-dessus les autres et bien sûr d'avoir le focus.
blur() fait en sorte de passer la fenêtre
sous les autres et sans qu'elle ait de focus. Ainsi elle est moins facile
à 'voir'.
Puisque ça ne fait pas de sens de faire un focus() ou un blur() sur la fenêtre par défaut, il faut apprendre à le faire sur les autres fenêtres. Pour communiquer en JavaScript avec une autre fenêtre, il faut y avoir une référence et pour se faire, il faut l'affecter à une variable dès sa déclaration.
Exemple :
<script language="javascript">
var nouvelle= window.open("maPage.html","nom","width=200,height=200");
</script>
<input type="button" onClick="nouvelle.blur()" value="Mettre en blur">
De plus, en JavaScript, les objets peuvent avoir
des objets qui ont des objets, etc... ainsi on peut faire : window.document.image.src
....
Parfois on souhaite écrire dans une fenêtre à partir
de sa fenêtre d'origine. L'important est de premièrement bien
accorder à chaque fenêtre un nom distinct dès sa déclaration
grâce à la propriété window.name. Ainsi,
si on effectue un document.write(), le texte précisé
s'inscrit dans la page en cours alors que si nous avons créé
une fenêtre appelée "maFenetre" et qu'on inscrit le code
maFenetre.write(), c'est dans cette fenêtre que le texte s'inscrira.
La propriété window.opener donne le nom de la fenêtre
d'origine de la fenêtre en cours ou demandée.
La fenêtre en cours peut aussi toujours être référée
par la propriété window.self.
Imprimer le contenu d'une fenêtre
Tous les navigateurs possède un icône ou une option de menu
permettant au visiteur d'imprimer le contenu de la page Web en cours. JavaScript
permet au webmestre de maîtriser aussi cette fonction à l'intérieur
même de son site. La méthode réalisant l'ordre d'impression
est window.print(). Cette méthode ouvre la boîte
de dialogue Imprimer du système d'exploitation de l'usager ou de son
logiciel d'impression. Cette boîte lui demande de choisir l'imprimante,
le nombre de copies, le choix du papier ainsi que toutes les autres options
d'impression.
Si aucune imprimante n'est configurer sur le système de l'usager,
la méthode window.print() est simplement ignorée.
Il ne faut pas oublier lorsqu'on énumère les fonctionnalités
qu'on souhaite donner à une nouvelle fenêtre via la méthode
window.open(), qu'il est possible de masquer la barre d'outils et de menu
, rendant ainsi impossible toute impression par le navigateur du visiteur.
Il est alors nécessaire de fournir un moyen d'imprimer le contenu
de la fenêtre directement dans son code.
Exemple :
<input type="button" value="Imprimer cette page" onClick="window.print()";/>
Redimensionner une fenêtre
L'objet window comporte des méthodes semblables aux méthodes
de déplacement move, mais qui agissent sur les dimension
de la fenêtre active.
La méthode window.resizeTo() demande deux paramètres,
le premier étant la largeur et le second la hauteur, tout deux en
pixels de la fenêtre en cours.
Exemple :
<input type="button" value= "Redimensionner" onClick="window.resizeTo(400, 650)"/>
Augmenter ou réduire la grosseur d'une fenêtre
La méthode window.resizeBy() permet d'augmenter du nombre
de pixels voulus la largeur et la hauteur d'une fenêtre.
Exemple :
<input type="button" value="Augmenter" onClick="window.resizeBy(50, 50)"/>
Évidemment, vous l'aurez sûrement songé, si vous donnez
à la méthode resizeBy() des paramètres négatifs,
l'action aura comme effet de réduire la taille de la fenêtre
du nombre de pixels négatifs indiqués.
Défilement du contenu de la page
D'autres méthodes semblablent existent afin de contrôler
les modes défilement du contenu d'une page. Les méthodes
window.scrollTo() et window.scrollBy(), permettent de définir
des défilements loufoques comme de défiler de tant de pixel
par la droite et de tant de pixels vers le bas.
Il est ainsi possible de créer des boutons qui permettent de faire
défiler le contenu de la page ou d'un cadre (frame).
Déplacer et fermer une fenêtre
Déplacer une fenêtre
Il est souvent intéressant de connaître les commandes qui permettent
de déplacer et positionner les fenêtres afin de créer
des pages d'un graphisme constant et sobre. La méthode window.moveTo()
demande deux paramètres indiquant en pixels la distance horizontale
puis verticale à partir du coin supérieur gauche de l'écran
où débutera le coin supérieur gauche de la fenêtre.
Exemple :
<input type="button" value="Repositionner" onClick="window.moveTo(200,200);/>
Effectivement, il existe la méthode window.moveBy() qui elle
accepte les deux paramètres qui indiquent de combien de pixels doit
se déplacer la fenêtre.
Les nombres positifs indiquent la droite et le bas alors que les négatives
indiquent la gauche et le haut.
Fermer une fenêtre
Il est toujours possible pour un usager de fermer une fenêtre
en cliquant sur le X du coin supérieur droit, ou du menu contextuel
de la barre des tâches, mais JavaScript permet aussi aux webmestres
de coder une manière personnelle de fermer une page. Afin de fermer
la fenêtre active, il suffit d'utiliser la méthode window.close()
. Si la fenêtre qu'on demande de fermer est celle d'origine du navigateur,
un message de confirmation sera affiché, ce qui n'est pas le cas pour
les fenêtres créées via l'instruction window.open() .
Les boîtes de messages ( alertes, invites et confirmation)
Les alertes
L'interaction avec le visiteur de notre site est parfois utile pour lui
promulguer des informations nécessaires dont il doit absolument être
informé. L'objet window contient des méthodes qui affichent
des boîtes de dialogues afin de répondre à de tels besoins.
JavaScript possède trois types différents de boîtes de
dialogue nommées alertes, invite et confirmation.
La boîte de dialogue la plus simple est l'alerte. Cette boîte permet d'afficher une string voulue qui apparaît aussi avec un triangle d'avertissement ( ! ) et un bouton OK pour la fermer. La syntaxe d'une alerte est bien simple, il s'agit d'envoyer à la méthode window.alert() la string voulue en paramètre.
Exemple :
<input type="button" value="Afficher une alerte" onClick="alert('Voici ma string mise entre apostrophes ! ');"/>
Plusieurs webmestres utilisent les alertes à des fins de débugage.
Les invites ou boîtes de saisie
Les alertes sont suffisantes afin de faire remarquer un message au visiteur..
mais lorsqu'on souhaite obtenir de lui une réponse à une question,
il faut lui fournir un champ de saisie à l'aide d'une boîte de
style invite. La boîte de saisie contient un bouton OK ainsi qu'un bouton
Annuler et bien sûr un champ de texte.
La méthode utilisée est le prompt() qui accepte
deux paramètres. Le premier est le texte affiché dans la boîte
et le second sert à définir une réponse par défaut.
Lorsque l'usager clique sur le bouton OK, le texte entrée dans la
boîte de saisie est retourné au script ce qui permet de conserver
cette réponse dans une variable. (Si l'usager clique sur Annuler,
la valeur null est retournée au script.)
Exemple :
var reponse= prompt("Quel jour sommes-nous? ", "");
Avec une réponse par défaut :
var reponse= prompt("Quel jour sommes-nous ? " , "Lundi");
Les boîtes de confirmation
Parfois, les questions qu'on désire poser à l'usager sont
d'un type "confirmation", ce qui veut dire qu'on veut simplement lui demander
si oui ou non il désire continuer une action entreprise. Cette
boîte contient des boutons OK et Annuler servant évidemment
à répondre à la question. Pour créer une telle
boîte, il faut utiliser la méthode confirm() de l'objet
window. Un seul paramètre est requis; le texte de la question.
La vraie utilité de cela est de garder sa valeur de retour true ou false dans une variable pour récupérer le choix de l'usager. Ainsi, on peut valider les actions choisies par l'usager. La meilleure utilité est pour confirmer un choix dans une fonction de validation.
Exemple :
function ValiderEffacer()
{
var choix= confirm("Voulez-vous vraiment effacer les champs?");
if (choix)
Effacer();
}