Leçon 03 : Formes conditionnelles
Contenu :
Cette leçon introduit les structures de contrôle conditionnelles if et switch. La leçon introduit également deux nouveaux types de donnée, le type booléen et le type Date.
Objectifs :
Maîtriser les concepts de code conditionnel, d'expression booléennes et de test. Savoir écrire des codes simples utilisant les structures de contrôle if et switch. Savoir utiliser le type Date.
La forme if
La forme if est une structure de contrôle qui peut modifier le déroulement
linéaire d'un programme et permettre d'exécuter des portions de code de manière conditionelle. Soit la
phrase/situation réelle suivante :
S'il pleut, je prends mon parapluie, sinon, je prends mes lunettes de soleil !
voici sont équivalent en JavaScript :
var temps = prompt( "Pluie ou soleil ?", "soleil" );
if ( temps == "pluie" ) {
alert( "Je prends mon parapluie" );
}
else {
alert( "Je prends mes lunettes de soleil" );
}
Dans cet exemple, l'utilisateur est sensé saisir le mot pluie ou le mot soleil, et le code
affiche le message adéquat. L'instruction if commence avec le mot-clef if
immédiatement suivi d'un test. Un test est une expression booléenne (une peu comme une
expression arithmétique) qui délivre seulement deux valeurs possibles, true (vrai) ou
false (faux). Dans l'exemple précédent, le test est construit à l'aide de l'opérateur
== qui teste l'égalité de deux expressions. On teste ici si le contenu de
la variable temps est égal à la chaîne de caractères "pluie". Si c'est le cas (donc si la
valeur de l'expression booléenne est true), seul le code placé dans le bloc juste suivant
est exécuté, sinon (donc si la valeur de l'expression booléenne est false), seul le code
placé dans le bloc suivant le mot-clef else est exécuté.
Une erreur très classique et très fréquente consiste à utiliser l'affectation =
à la place de ==, l'opérateur de comparaison. Malheureusement, JavaScript ne vous
préviendra pas si vous faites cette erreur et vous passerez pas mal de temps à détecter le problème !
La fonction confirm
Remarquez que dans l'exemple précédent, si l'utilisateur saisit n'importe qu'elle chaîne de caractères différente de
"pluie", le code prend la branche "else" du if. Dans ce genre de
situation, on peut utiliser la fonction confirm. Cette fonction ouvre une fenêtre avec un
message à la manière de la fonction alert, mais l'utilisateur a maintenant
deux boutons sur lesquels cliquer : le bouton OK ou le bouton Cancel. Si
le bouton OK est cliqué, la fonction retourne la valeur true, sinon elle
retourne la valeur false. En utilisant cette fonction, le code précédent devient :
if ( confirm( "Pluie ?" ) ) {
alert( "Je prends mon parapluie" );
}
else {
alert( "Je prends mes lunettes de soleil" );
}
Notez que dans ce nouvel exemple, on utilise directement la fonction en place du test, ce qui ne pose pas de
problème pusique l'appel d'une fonction qui délivre une valeur est bien une expression. On pourrait
cependant développer ce code et ajouter une étape en utilisant une variable :
var reponse = confirm( "Pluie ?" );
if ( reponse ) {
alert( "Je prends mon parapluie" );
}
else {
alert( "Je prends mes lunettes de soleil" );
}
Exercice 1
Reprenez l'exercice 6 de la leçon 2, en ajoutant la fonctionnalité suivante : après avoir saisi les prénom et nom
de l'utilisateur, le programme demande le sexe (homme ou femme) à l'utilisateur, et affiche le message en
conséquence (le message commencera alors par "Bonjour Monsieur ..." ou bien
"Bonjour Madame ...").
Structures emboitées
Il est possible de combiner toutes les structures de contrôle entr'elles et autant de fois qu'on veut. Par exemple,
on peut mettre une nouvelle forme if dans la partie then et/ou
else d'une forme if. Par exemple, la nouvelle situation phrase/situation réelle
suivante :
S'il pleut, alors, s'il vente alors je prends mon K-way sinon je prends mon parapluie, sinon je prends mes lunettes
de soleil !
peut être transcrite en JavaScript de la façon suivante :
if ( confirm( "Pluie ?" ) ) {
if ( confirm( "Vent ?" ) ) {
alert( "Je prends mon K-way" );
}
else {
alert( "Je prends mon parapluie" );
}
}
else {
alert( "Je prends mes lunettes de soleil" );
}
Le code précédent est correctement indenté pour faciliter sa lecture. Cette indentation rend
compte de la structure imbriquée des deux formes if. Cependant, cette indentation est
ignorée par JavaScript pour qui seuls comptent les blocs délimités par les accolades (les caractères
{ }). Bien indenter son code est absolument fondamental si vous voulez réussir à
écrire des codes complexes dans un temps raisonnable !
Exercice 2
Reprenez l'exercice 1 de cette leçon, cette fois en distinguant les dames et les demoiselles : dans le cas où
l'utilisateur est une femme, le programme lui demande si elle est mariée, et affiche le message en conséquence
(le message commencera alors par "Bonjour Monsieur ..." ou bien par
"Bonjour Madame ..." ou par "Bonjour Mademoiselle ...").
Les opérateurs logiques
On dispose en JavaScript de tous les opérateurs de comparaisons numériques (==, <,
<=, >, >=), mais aussi de fonctions à valeurs booléennes comme
par exemple la fonction isNaN. Cette fonction teste son paramètre et retourne
true si celui-ci n'est pas un nombre valide (isNaN est
l'acronyme de is-Not-a-Number). On peut fabriquer des expressions booléennes complexes en utilsant les
connecteurs booléens && ("et"), || ("ou") et ! ("non") :
var pluie = confirm( "Pluie ?" );
var vent = confirm( "Vent ?" );
var temperature = prompt( "Température ?","" );
if ( isNaN( temperature ) )
alert( "La température n'est pas valide !" );
else {
if ( pluie && vent )
alert( "Je prends mon ciré" );
if ( Number( temperature ) < 10 )
alert( "Je prends mon pull" );
}
Dans le code précédent, remarquez que nous avons omis les accolades (les caractères { }) pour les
blocs then des trois formes if utilisées car ces blocs ne sont constitués
que d'une seule instruction.
Exercice 3
Ecrivez un programme qui demande à l'utilisateur son prénom (X dans la suite), puis son âge. Si l'utilisateur a moins de 18 ans,
le programme affiche un message du type "Désolé X, vous n'avez pas l'âge de conduire". Sinon, le programme demande
à l'utilisateur s'il possède le permis de conduire : dans l'affirmative, le programme affiche le message
"Au revoir X et bonne route", sinon il affiche le message "Désolé X, il est interdit de conduire sans permis".
On suppose que les valeurs fournies par l'utilisateur sont correctes (par exemple, lors de la saisie de l'âge, on est sûr que
la chaîne de caractères fournies représente un entier).)
Exercice 4
Ecrivez un programme qui permet de saisir 3 notes entre 0 et 20, qui calcule et affiche la moyenne obtenue
suivie de l'un des commentaires suivants :
- "très insuffisant" si la moyenne est strictement inférieure à 6
- "insuffisant" si la moyenne est supérieure ou égale à 6 et strictement inférieure à 10
- "moyen" si la moyenne est supérieure ou égale à 10 et strictement inférieure à 13
- "bien" si la moyenne est supérieure ou égale à 13 et strictement inférieure à 16
- "très bien" si la moyenne est supérieure ou égale à 16 et strictement inférieure à 19
- "excellent" si la moyenne est supérieure ou égale à 19
On suppose que les valeurs fournies par l'utilisateur sont correctes.
Exercice 5
Ecrivez un programme qui sert de répétiteur pour apprendre les tables de multiplication. A l'aide de la fonction
prompt le programme doit proposer à l'utilisateur une multiplication entre deux nombres tirés au
hasard dans l'intervalle [2,10]. Le programme affiche le message adéquat en fonction de la réponse de
l'utilisateur. Si la réponse est incorrecte, le programme affiche l'opération et sa réponse (comme par exemple
"Faux : 8 x 7 = 56 !"). Pour tirer un nombre au hasard dans un intervalle donné, vous devez étudier et utiliser
les fonctions random et floor. Ces fonctions sont définies dans une
classe JavaScript qui s'appele Math. Pour appeler une fonction définie dans cette classe, il faut
préfixer le nom de la fonction par le nom de la classe. Par exemple, pour appeler la fonction random
il faut écrire Math.random() (cette fonction ne prend aucun argument).
On suppose que les valeurs fournies par l'utilisateur sont correctes (c'est à dire sont bien des nombres).
La forme switch
La forme switch est une autre structure de contrôle. Elle permet de faire plusieurs tests
consécutifs sur la valeur d'une expression. Ce branchement conditionnel peut simplifier le test de plusieurs valeurs
possible d'une expression par rapport à des formes if imbriqués, comme par exemple dans le code
suivant :
var nationalite = prompt( "Entrez le nom d'un pays","" );
switch ( nationalite.trim().toLowerCase() ) {
case "france" : alert( "Bonjour !" ); break;
case "italie" : alert( "Buon giorno !" ); break;
case "espagne" : alert( "Buenos dia !" ); break;
case "portugal" : alert( "Bom dia !" ); break;
case "allemagne": alert( "Guten morgen !" ); break;
default: alert( "Désolé, on ne parle pas cette langue" );
}
alert( "A bientôt" );
Chaque cas déclaré par le mot-clef case définit une branche qu'on emprunte quand la valeur de l'expression
est égale à la valeur qui suit le case en question. Après le caractère ':' on peut placer
autant d'instructions que nécessaire. L'instruction break termine une branche et également l'exécution du
switch. On le place donc généralement à la fin d'une branche. Le mot-clef default
peut optionnellement définir une branche par défaut : c'est la dernière branche que l'on empruntera si tous les tests
précédents ont échoués.
Une erreur très classique consiste à oublié une ou plusieurs instructions break. Dans ce cas, les branches
suivant la branche empruntée seront également exécutées. L'absence de break n'est pas une erreur en soi, et dans
certain cas, cette absence est volontaire. JavaScript ne signalera donc pas l'absence de l'instruction break
et si c'est un oubli de votre part, vous passerez sans doute un peu de temps avant de découvrir l'erreur !
Exercice 6
Cette exercice a pour but d'expérimenter l'instruction switch et également de découvrir le type
Date. Le type Date permet de manipuler des dates. En
particulier, l'expression new Date() retourne un objet de type Date qui contient la
date de l'instant ou l'expression a été évaluée par JavaScript. A l'aide de deux instructions switch,
écrivez un programme qui affiche la date courante en français (par exemple "lundi 7 septembre 2015").
Exercice 7
Cette exercice a pour but d'explorer un peu plus avant le type Date. Dans l'exercice précédent,
vous avez utilisé l'expression new Date() pour récupérer un objet de type Date contenant
la date courante. Remarquez que le constructeur Date peut prendre en paramètre une chaîne de caractères
représentant une date au format ISO 8601 (par exemple "2015-09-07"). Dans ce cas, l'objet de type
Date retourné contiendra cette date. En vous inspirant de l'exercice précédent, écrivez un programme
qui demande à l'utilisateur de saisir une date sous la forme d'une chaine de caractères au format ISO 8601 et qui
affiche le jour de la semaine en français correspondant à cette date. Par exemple, si la date saisie par l'utilisateur est
"2015-09-07", le programme doit afficher "lundi 7 septembre 2015".
On suppose que les valeurs fournies par l'utilisateur sont correctes (c'est à dire des chaînes de caractères représentant des
dates valides au format ISO 8601).