Chapitre 5 Les Conditions et les Formulaires
5.1 L'expression if
Dans sa formulation la plus simple, l'expression if
se présente comme suit
if (condition vraie) {
une
ou plusieurs instructions;
}
Ainsi, si la condition est
vérifiée, les instructions s'exécutent. Si elle ne l'est
pas, les instructions ne s'exécutent pas et le programme passe à
la commande suivant l'accolade de fermeture. De façon un peu plus
évoluée, il y a l'expression if...else :
if (condition vraie) {
instructions1;
}
else {
instruction2;
}
Si la condition est
vérifiée (true), le bloc d'instructions 1 s'exécute. Si
elle ne l'est pas (false), le bloc d'instructions 2 s'exécute.
Grâce aux opérateurs logiques "et" et "ou", l'expression de test
pourra tester une association de conditions. Ainsi if ((condition1) &&
(condition2)), testera si la condition 1 et la condition 2 est
réalisée. Et if ((condition1) || (condition2)), testera si une au
moins des conditions est vérifiée.
5.2 L'expression for
L'expression for permet
d'exécuter un bloc d'instructions un certain nombre de fois en fonction
de la réalisation d'un certain critère. Sa syntaxe est :
for (valeur initiale ;
condition ; progression) {
instructions;
}
Par exemple :
for (i=0, i<10, i++) {
document.write("Ligne : " + i +"<BR>")
}
5.3 L'expression While
L'instruction while permet d'exécuter une
(des) instruction(s) un certain nombre de fois.
while (condition vraie){
continuer à faire quelque chose
}
Aussi longtemps que la condition est
vérifiée, Javascript continue à exécuter les
instructions entre les accolades. Une fois que la condition n'est plus
vérifiée, la boucle est interrompue et on continue le script.
Attention ! Avec ce système de boucle, si la condition est toujours
vérifiée, on fait boucler indéfiniment l'instruction, ce
qui fait planter le browser !
5.4 Les expressions Break et Continue
L'instruction break permet
d'interrompre prématurément une boucle for ou while. Par exemple
:
compt=1;
while
(compt<5) {
if (compt == 4)
break;
document.write ("ligne : " +
compt + "<BR>");
compt++;
}
document.write("fin de la
boucle");
Lorsque le compteur vaut 4, on sort
de la boucle et "fin de boucle" est affiché.
L'instruction continue permet de
sauter une instruction dans une boucle for ou while et de continuer ensuite le
bouclage sans sortir de celui-ci comme le fait break.
compt=1;
while
(compt<5) {
if (compt == 3){
compt++
continue;}
document.write ("ligne : " + compt + "<BR>");
compt++;
}
document.write("fin de la boucle");
Ici, la boucle démarre.
Lorsque le compteur vaut 3, par l'instruction continue, on saute l'instruction
document.write (ligne : 3 n'est pas affichée) et on continue la boucle.
Notons qu'on a dû ajouter compt++ avant continue; pour éviter un
bouclage infini et un plantage du navigateur (compt restant à 3).
5.5 Déclaration d'un formulaire
Avec Javascript, les formulaires
HTML prennent une toute autre dimension. On peut accéder à chaque
élément d'un formulaire pour y aller lire ou écrire une
valeur, noter un choix auquel on pourra associer un gestionnaire
d'événement...
Un formulaire est
l'élément HTML déclaré par les balises
<FORM></FORM>. Un formulaire contient
un ou plusieurs éléments que nous appellerons des
contrôles. Ces contrôles sont notés par exemple par la
balise <INPUT TYPE= ...>.
La déclaration d'un
formulaire se fait par les balises <FORM> et </FORM>. L'attribut
NAME="..." a toute son importance pour désigner le chemin complet des
éléments. En outre, les attributs ACTION et METHOD sont
facultatifs pour autant que vous ne faites pas appel au serveur.
5.6 Le contrôle ligne de texte
La zone de texte est
l'élément d'entrée/sortie par excellence de Javascript. La
syntaxe HTML est <INPUT TYPE="text" NAME="nom" SIZE=x
MAXLENGTH=y> pour un champ de saisie d'une seule ligne, de longueur x
et de longueur maximale de y.
L'objet text possède trois
propriétés :
|
Propriété |
Description |
|
|
|
name |
indique le nom du contrôle par lequel
on pourra accéder. |
|
Defaultvalue |
indique la valeur par défaut qui sera
affichée dans la zone de texte. |
|
Value |
indique la valeur en cours de la zone de
texte. Soit celle tapée par l'utilisateur ou si celui-ci n'a rien
tapé, la valeur par défaut. |
Lire une valeur dans une zone de texte :
Voici une zone de texte. Entrez une
valeur et appuyer sur le bouton pour contrôler celle-ci.
|
Le script complet est celui-ci : |
|
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function
controle(form1) {
var test = document.form1.input.value;
alert("Vous
avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text"
NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton"
VALUE="Contrôler" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton
"contrôler", Javascript appelle la fonction controle() à laquelle
on passe le formulaire dont le nom est form1 comme argument. Cette fonction
controle() définie dans les balises <HEAD> prend sous la variable
test, la valeur de la zone de texte. Pour accéder à cette valeur,
on note le chemin complet de celle-ci. Dans cette page, il y a l'objet
formulaire appelé form1 qui contient le contrôle de texte
nommé input et qui a comme propriété
l'élément de valeur value. Ce qui donne
document.form1.input.value.
Ecrire une valeur dans une zone de texte :
Entrez une valeur quelconque dans la
zone de texte d'entrée. Appuyer sur le bouton pour afficher cette valeur
dans la zone de texte de sortie.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT
TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher"
onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output"
VALUE=""> Zone de texte de sortie
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton
"Afficher", Javascript appelle la fonction afficher() à laquelle on
passe le formulaire dont le nom est cette fois form2 comme argument. Cette
fonction afficher() définie dans les balises <HEAD> prend sous la
variable testin, la valeur de la zone de texte d'entrée. A l'instruction
suivante, on dit à Javascript que la valeur de la zone de texte output
comprise dans le formulaire nommé form2 est celle de la variable testin.
A nouveau, on a utilisé le chemin complet pour arriver à la
propriété valeur de l'objet souhaité soit en Javascript
document.form2.output.value.
5.7 Les boutons radio
Les boutons radio sont utilisés pour noter un
seul choix parmi un ensemble de propositions.
|
Propriété |
Description |
|
|
|
name |
indique le nom du contrôle. Tous les
boutons portent le même nom. |
|
index |
l'index ou le rang du bouton radio en
commençant par 0. |
|
checked |
indique l'état en cours de
l'élément radio |
|
defaultchecked |
indique l'état du bouton
sélectionné par défaut. |
|
value |
indique la valeur de l'élément
radio. |
Prenons un exemple très simple :
<HTML>
<HEAD>
<SCRIPT language="javascript">
function
choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi
la proposition " + form3.choix[0].value) };
if (form3.choix[1].checked) {
alert("Vous avez choisi la proposition " + form3.choix[1].value) };
if
(form3.choix[2].checked) { alert("Vous avez choisi la proposition " +
form3.choix[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro
1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix
numéro 2<BR>
<INPUT TYPE="radio" NAME="choix"
VALUE="3">Choix numéro 3<BR>
<INPUT
TYPE="button"NAME="but" VALUE="Quel et votre choix ?"
onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>
Dans le formulaire nommé
form3, on déclare trois boutons radio. Notez que l'on utilise le
même nom pour les trois boutons. Vient ensuite un bouton qui
déclenche la fonction choixprop(). Cette fonction teste quel bouton
radio est coché. On accède aux boutons sous forme d'indice par
rapport au nom des boutons radio soit choix[0], choix[1], choix[2]. On teste la
propriété checked du bouton par if(form3.choix[x].checked). Dans
l'affirmative, une boite d'alerte s'affiche. Ce message reprend la valeur
attachée à chaque bouton par le chemin
form3.choix[x].value.
5.8 Les boutons case à cocher
Les boutons case à cocher
sont utilisés pour noter un ou plusieurs choix parmi un ensemble de
propositions. A part cela, sa syntaxe et son usage est tout à fait
semblable aux boutons radio sauf en ce qui concerne l'attribut name.
|
Propriété |
Description |
|
|
|
name |
indique le nom du contrôle. Toutes les
cases à cocher portent un nom différent. |
|
checked |
indique l'état en cours de
l'élément case à cocher. |
|
defaultchecked |
indique l'état du bouton
sélectionné par défaut. |
|
value |
indique la valeur de l'élément
case à cocher. |
<HTML>
<HEAD>
<script language="javascript">
function reponse(form4) {
if
( (form4.check1.checked) == true && (form4.check2.checked) == true
&& (form4.check3.checked) == false && (form4.check4.checked) ==
true)
{ alert("C'est la bonne réponse! ") }
else
{alert("Désolé, continuez à chercher.")}
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1"
VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="CHECKBOX"
NAME="check2" VALUE="2">Choix numéro 2<BR>
<INPUT
TYPE="CHECKBOX" NAME="check3" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4" VALUE="4">Choix numéro
4<BR>
<INPUT TYPE="button"NAME="but" VALUE="Corriger"
onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>
Dans le formulaire nommé
form4, on déclare quatre cases à cocher. Notez que l'on utilise
un nom différent pour les quatre boutons. Vient ensuite un bouton qui
déclenche la fonction reponse(). Cette fonction teste quelles cases
à cocher sont sélectionnées. Pour avoir la bonne
réponse, il faut que les cases 1, 2 et 4 soient cochées. On
accède aux cases en utilisant chaque fois leur nom. On teste la
propriété checked du bouton par (form4.nom_de_la_case.checked).
Dans l'affirmative (&& pour et logique), une boite d'alerte s'affiche
pour la bonne réponse. Dans la négative, une autre boite d'alerte
vous invite à recommencer.
5.9 Liste de sélection
Le contrôle liste de
sélection vous permet de proposer diverses options sous la forme d'une
liste déroulante dans laquelle l'utilisateur peut cliquer pour faire son
choix. Ce choix reste alors affiché. La boite de la liste est
crée par la balise <SELECT> et les éléments de la
liste par un ou plusieurs tags <OPTION>. La balise </SELECT>
termine la liste.
|
Propriété |
Description |
|
|
|
name |
indique le nom de la liste
déroulante. |
|
length |
indique le nombre d'éléments
de la liste. S'il est indiqué dans le tag <SELECT>, tous les
éléments de la liste seront affichés. Si vous ne
l'indiquez pas un seul apparaîtra dans la boite de la liste
déroulante. |
|
selectedIndex |
indique le rang à partir de 0
de l'élément de la liste qui a été
sélectionné par l'utilisateur. |
|
defaultselected |
indique l'élément de la liste
sélectionné par défaut. C'est lui qui apparaît alors
dans la petite boite. |
<HTML>
<HEAD>
<script language="javascript"> function liste(form5) {
alert("L\'élément " + (form5.list.selectedIndex + 1)); }
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form5">
<SELECT NAME="list">
<OPTION
VALUE="1">Elément 1
<OPTION VALUE="2">Elément 2
<OPTION VALUE="3">Elément 3
</SELECT>
<INPUT
TYPE="button"NAME="b" VALUE="Quel est l'élément retenu?"
onClick="liste(form5)"> </FORM>
</BODY>
</HTML>
Dans le formulaire nommé
form5, on déclare une liste de sélection par la balise
<SELECT></SELECT>. Entre ses deux balises, on déclare les
différents éléments de la liste par autant de tags
<OPTION>. Vient ensuite un bouton qui déclenche la fonction
liste(). Cette fonction teste quelle option a été
sélectionnée. Le chemin complet de l'élément
sélectionné est form5.nomdelaliste.selectedIndex. Comme l'index
commence à 0, il ne faut pas oublier d'ajouter 1 pour retrouver le juste
rang de l'élément.
5.10 Le contrôle textarea
L'objet textarea est une zone de
texte de plusieurs lignes. La syntaxe HTML est :
<FORM>
<TEXTAREA
NAME="nom" ROWS=x COLS=y>
texte par défaut
</TEXTAREA>
</FORM>
où ROWS=x représente le nombre de
lignes et COLS=y représente le nombre de colonnes.
L'objet textarea
possède plusieurs propriétés :
|
Propriété |
Description |
|
|
|
name |
indique le nom du contrôle par lequel
on pourra accéder. |
|
defaultvalue |
indique la valeur par défaut qui sera
affichée dans la zone de texte. |
|
value |
indique la valeur en cours de la zone de
texte. Soit celle tapée par l'utilisateur ou si celui-ci n'a rien
tapé, la valeur par défaut. |
A ces propriétés, il faut ajouter
onFocus(), onBlur(), onSelect() et onChange().
En Javascript, on utilisera
\r\n pour passer à la ligne. Comme par exemple dans l'expression
document.Form.Text.value = 'Check\r\nthis\r\nout'.
5.11 Les contrôles Reset et Submit
Le contrôle Reset permet
d'annuler les modifications apportées aux contrôles d'un
formulaire et de restaurer les valeurs par défaut. La syntaxe HTML est :
<INPUT TYPE="reset" NAME="nom" VALUE
"texte"> où VALUE donne le texte du bouton. Une seule
méthode est associée au contrôle Reset, c'est la
méthode onClick(). Ce qui peut servir, par exemple, pour faire afficher
une autre valeur que celle par défaut.
Le contrôle Submit a la
tâche spécifique de transmettre toutes les informations contenues
dans le formulaire à l'URL désignée dans l'attribut ACTION
du tag <FORM>. La syntaxe HTML est : <INPUT
TYPE="submit" NAME="nom" VALUE "texte"> où VALUE donne le
texte du bouton. Une seule méthode est associée au contrôle
Submit, c'est la méthode onClick().
5.12 Le contrôle Hidden
Le contrôle Hidden permet
d'entrer dans le script des éléments (généralement
des données) qui n'apparaîtront pas à l'écran. Ces
éléments sont donc cachés. D'où son nom. la syntaxe
HTML est : <INPUT TYPE="hidden" NAME="nom" VALUE "les
données cachées"> |
