Introduction to JavaScript
Chapitre 6
On crée trois cadres, dont le premier est utilisé par le bouton.
La première page HTML est simplement utile pour créer les cadres et leur
donner un nom. Ceci n'est guère nouveau pour ceux qui ont lu le chapitre 3
où nous utilisions cette technique pour travailler avec les cadres.
De toute manière je vais vous montrer. (Je ne sais pas si ça vous arrive, mais chaque fois
que l'auteur d'un livre informatique refuse d'imprimer quelque chose qu'il juge si simple, ce qui est mon cas,
s'en repent toujours. Mais poursuivons:)
floadtwo.php est chargée dans le premier cadre, celui avec le bouton.
La fonction loadtwo() est appelée lorsque l'on presse le bouton. Deux chaînes
sont transmises à celle-ci. Si vous jetez un oeil à la fonction loadtwo()
vous verrez que le second cadre fr2 charge la page adressée par la
première chaîne. Si vous avez plusieurs boutons ouvrant différentes
pages vous pouvez réutiliser cette fonction. Il vous suffit de transmettre
les URLs (adresses) de ces pages.
Bien sûr, vous devez ajouter ceci à chacun des documents chargés dans
le second cadre.
Un autre problème fréquent réside dans le chargement de nouvelles pages dans une
nouvelle fenêtre. La fenêtre devra surgir quand l'utilisateur clickera sur un lien.
Il vous suffit d'ajouter la propriété target dans votre balise . Voici ce que cela donne:
Etudions maintenant les différents opérateurs que vous serez susceptible d'utiliser.
Les opérateurs constituent une méthode puissante pour raccourcir et améliorer vos scripts.
Par exemple, vous voulez savoir si une variable x est supérieur à 3 mais inférieur à 10.
Vous devrez l'écrire de cette façon:
La fonction doanything() est appelée seulement si x>3 and x<10.
Il existe une méthode bien plus courte pour faire la même chose:
Pour vérifier qu'une variable n'est pas égale à une certaine valeur, ceci devient
un peu compliqué sans les opérateurs. Heureusement qu'un simple != fait l'affaire.
Il existe bien d'autres opérateurs intéressants qui peuvent rendre vos programmes plus
efficaces. Pour cela je vous renvoi à la documentation de Netscape pour avoir une vue d'ensemble
de tous les opérateurs utilisables dans JavaScript.
J'ai reçu pas mal de courrier me questionnant sur la façon de charger deux
pages d'un click de souris. Il existe trois solutions à ce problème.
La première consiste à créer un bouton appelant une fonction lorsqu'on l'actionne.
Cette fonction charge deux pages dans différents cadres ou bien ouvre une nouvelle
fenêtre. Ceci n'est pas trop difficile si vous jetez un oeil aux exemples des autres chapitres
de cette introduction. Tout les éléments nécessaires ont déjà été utilisés.
fframes2.php
<HTML>
<HEAD>
<title>Frames</title>
</HEAD>
<FRAMESET COLS="295,*">
<FRAMESET ROWS="100%,*">
<FRAME SRC="floadtwo.php" NAME="fr1">
</FRAMESET>
<FRAMESET ROWS="75%,25%">
<FRAME SRC="fcell.php" NAME="fr2">
<FRAME SRC="fcell.php" NAME="fr3">
</FRAMESET>
</FRAMESET>
</HTML>
Floadtwo.php
<HTML>
<HEAD>
<script language="JavaScript">
<!-- Masque
function loadtwo(page2, page3) {
parent.fr2.location.href=page2;
parent.fr3.location.href=page3;
}
// -->
</script>
</HEAD>
<BODY>
<FORM NAME="buttons">
<INPUT TYPE="button" VALUE="2 l'une sur l'autre" onClick="loadtwo('ffrtest1.php','ffrtest2.php')">
</FORM>
</BODY>
</HTML>
La seconde technique se sert des hyperliens. Certains exemples circulants
sur Internet sont calqués sur le modèle suivant:
<a href="votreLien.php onCLick="votreFonction()">
Cette technique semble ne pas fonctionner sur toutes les plate-formes, alors ne l'utilisez pas.
Je ne suis d'ailleurs pas sûr qu'elle soit sensée fonctionner, mais ne nous inquiétons pas
puisqu'il existe un autre moyen d'implémenter ceci. En effet on peut appeler une fonction JavaScript de la manière suivante:
<a href="javascript:maFonction()">Mon Lien</a>
Ceci est vraiment simple et semble fonctionner sur tous les navigateurs. Il vous suffit
d'écrire javascript: suivi du nom de la fonction-lien.
Si vous appelez la fonction 'loadtwo()' de l'exemple précédant vous pouvez mettre à
jour deux cadres d'un seul click sur un hyperlien.
La troisième technique pour charger deux pages d'un seul click peut être
de combiner les appel avec des boutons ou des hyperliens classiques.
Ce que l'on peut faire avec la deuxième méthode, celle-ci le fait de manière plus
appropriée dans certains cas. On commence par chargée une page dans l'un des cadres grâce
à l'instruction suivante:
<a href="getfr2.php" target"fr2">Clickez ICI!</a>
Cela n'est pas nouveau. Maintenant on ajoute une propriété onLoad
au fichier chargé. Le fichier getfr2.php peut ressembler à cela:
<HTML>
<BODY onLoad="parent.fr3.location.href='getfr3.php'; return true;">
bla bla bla
</body>
</html>
<a href="goanywhere.php" target="Resource Window">Go!</a>
if (x>3)
if (x<10)
doanything();
if (x>3 && x<10) doanything();
Le && est appelé opérateur ET (AND). Il existe aussi l'opérateur OU (OR),
que vous pouvez utiliser pour contrôler si une variable x est égale à 5
ou si une autre y vaut 17:
if (x==5 || y==17) doanything();
La fonction doanything est appelée quand x==5 or y==17. Bien entendu
elle est aussi appelée si les deux comparaisons sont true.
Les comparaisons s'effectuent via l'opérateur JavaScript == (il y a aussi
<,>,<= and >=). Si vous connaissez C/C++, ils vous sont familiers.
Un simple = sert à affecter une valeur à une variable. (Attention! Ne pas faire de confusion
avec le Pascal où l'on assigne une valeur avec := et on compare avec un simple =)
Par exemple: x != 17.