LP
IMApp

Scripts
Clients

Leçon 03

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).