COURS JavaScript


Accueil | Eléments de base du langage JavaScript : Les tests

Les tests


Généralités

Un test, en informatique, c'est ce que l'on appelle communément, "faire un choix". Dans la vie de tous les jours, nous faisons constamment des choix. Et ces choix, nous les faisons en fonction de quelque chose. Même si nous n'y pensons pas toujours, parce que nos prises de décisions sont souvent très complexes et tiennent compte de beaucoup de facteurs.

Avec un ordinateur, la question est beaucoup plus simple. Il ne connaît pas de nuance. Ou bien quelque chose est vrai, ou bien c'est faux. Ce qui nous simplifie beaucoup la vie en fait. Nous n'avons pas trente six solutions. C'est blanc ou ça n'est pas blanc. Et si ça n'est pas blanc, ça peut être tout ce que l'on veut, sauf blanc. C'est là que se situe la différence avec nous. Nous, nous pouvons dire que le contraire de blanc, c'est noir par exemple. Et nous dire si c'est blanc, alors je fais ça, si c'est noir, je fais autre chose. Ce qui nous laisse la possibilité de faire encore d'autres choses si c'était vert ou bleu ou violet ou je ne sais quoi. Et nous prenons notre décision sans presque y penser. Nous opérons des tests multiples dans notre tête à la vitesse de l'éclair, sans nous en rendre compte. Alors qu'en réalité, si nous prenions la peine de décomposer notre raisonnement, nous nous apercevrions que nous opérons des choix simples, un choix à la fois. C'est exactement ce qu'est capable de faire un ordinateur. En fait, il est bien incapable de faire autre chose. Et c'est tant mieux, car ainsi, nous allons pouvoir le programmer pour faire des choix simples en suivant pas à pas chaque décision prise en fonction de la véracité de telle ou telle assertion.
   


Principe

Comme nous venons de le dire, le "test" en informatique, portera sur l'examen d'une situation simple (même si par la suite nous verrons que nous pouvons la compliquer à loisir). En fait, dans un langage comme JavaScript (ou un autre), nous testerons la véracité d'une assertion. Le choix se résumera à la chose suivante :

Si une situation est VRAIE ("true" en anglais) ALORS nous ferons quelque chose, SINON (si elle n'est pas vraie, donc fausse ce qui se dit "false" en anglais) nous ferons autre chose. Il n'y a pas d'autre alternative. VRAI ou FAUX. Ce sont les deux seuls états que l'ordinateur est capable de reconnaître. Et rien d'autre. Cette "situation" réputée vraie ou fausse, s'appelle une "condition" en langage d'informaticien. Ce qui nous amène à voir dans la littérature informatique, la description des tests sous la forme :

Si (condition) alors action1, sinon, action2.

Chaque langage informatique a sa propre syntaxe (manière de l'écrire). En JavaScript, il y a plusieurs manières de l'écrire. Nous en étudierons une, la plus simple, puis, dans les exemples plus compliqués, nous verrons la deuxième manière (moins utilisée sauf par les habitués du langage C++). Les plus chevronnés d'entre vous peuvent directement cliquer sur les liens vers les conditions et la syntaxe s'ils le désirent.

Pour nous, nous avons déjà vu que dans un ordinateur, tout se résume à des valeurs contenues dans des zones de mémoire appelées des "variables". Ce qui revient à dire que nous testerons le contenu de ces fameuses variables. Comme de plus, en JavaScript, les composantes d'une page Internet sont des objets, et que ces objets possèdent des propriétés, qui elles mêmes ont des valeurs, nous pourrons aussi tester les valeurs des propriétés des objets d'une page HTML.

La partie la plus importante du test, est bien entendu la "condition" dont la véracité fera que l'ordinateur (votre programme en fait) effectuera telle ou telle action. Dans la suite, nous utiliserons une syntaxe non abrégée, qui, si elle fera sourire les puristes confirmés, aura au moins l'avantage d'être plus facilement lisible et donc plus facilement maîtrisable. Je rappelle au passage, qu'un bon programme est non seulement un programme qui "tourne", mais aussi un programme facilement lisible par n'importe qui qui ne l'a pas écrit lui même. Les "siouxeries", sont donc à proscrire.

   
 
 


La syntaxe

La syntaxe (nous l'avons déjà vu) st la manière dont on doit écrire une instruction pour qu'elle soit compréhensible par l'interpréteur JavaScript inclus dans le navigateur qui lit la page HTML contenant le code JavaScript. Nous savons aussi que cette syntaxe est lourde et pesante, dans ce sens qu'il faut absolument penser à tout, ne rien oublier, ni point, ni virgule, ni espace, ni majuscule ni minuscule etc. sans quoi, l'interpréteur se "plante" et votre programme aussi. Nous prendrons donc bien garde à écrire les tests très exactement comme il faut sous peine d'avoir de graves désillusions à l'exécution de notre code. D'une manière générale, on peut distinguer deux grandes forme de tests. La première forme, celle où on fait quelque chose si une condition est vraie, sans dire quoi faire si elle était fausse, et la deuxième forme, celle ou on dit quoi faire dans les deux cas, vraie ou fausse.

Première forme : Le test simple

Dans cette forme, nous allons demander au programme de voir si une condition est vraie, et nous allons lui dire quoi faire si c'est le cas. Sans lui dire quoi faire dans le cas où la condition est fausse. Dans le cas où la condition est fausse, il ne fera tout simplement rien, puisque nous ne lui disons rien. Il est heureusement incapable d'inventer quoi que ce soit, et c'est une bonne chose.

Elle s'écrit de la manière suivante :

if (condition) { // (1)
Action1; // (2)
Action2;

.......
}  // (3)

(1) if, en anglais, signifie "Si". Dans la plupart des langages informatiques, les tests commencent par "if". Suivit tout de suite par la (ou les, nous verrons ça plus tard) condition entre parenthèses qui doit être vraie pour que les Actions soient exécutées. N'oubliez surtout pas l'accolade ouvrante { qui détermine le début de la liste des actions à exécuter si la condition est vraie. Ecrire : if (condition) { revient à dire au navigateur : Si la condition entre parenthèse est vraie, alors tu vas faire tout ce que je te demande de faire dans les "Actions" (je rappelle que les // qui suivent, sont là pour marquer un commentaire, et ne sont pas du tout obligatoires). Ne pas oublier non plus les parenthèses pour encadrer la condition.

(2) Ici, nous écrirons la ou les actions à mener à bien dans le cas où la condition sera vraie. Ces actions peuvent être n'importe quelle instruction JavaScript, ou plus généralement l'appel à une fonction JavaScript que nous aurons écrite. Fonction qui, je le rappelle aussi, peut comporter une suite très grande d'instructions JavaScript avec ou non des tests à l'intérieur de la fonction. C'est ce qui fait toute la puissance du langage JavaScript.

(3) TRES IMPORTANT, ne pas oublier l'accolade fermante } qui marque la fin de la liste des actions à mener à bien si la condition est vraie. Sans cette accolade fermante, l'interpréteur attendrait encore des instructions et ne serait pas capable de terminer le test. Bon nombre d'erreurs de programmation dans les tests, provient de l'oublie de cette fichue accolade fermante. C'est empoisonnant, je sais, mais c'est comme ça.

Dans cette forme d'écriture des tests, les actions sont exécutées seulement si la condition est vraie, et il ne se passe strictement rien dans le cas contraire, c'est-à-dire si la condition n'est pas vraie (fausse). Le programme reprend simplement l'exécution des instructions qui suivent l'accolade fermante } après la fin du test, s'il y en a. C'est bien pratique, car cela allège l'écriture des tests. Il arrive bien souvent que nous voulions faire quelque chose si une condition est vraie, mais rien de particulier dans le cas contraire. C'est alors cette forme d'écriture que nous utiliserons.

Deuxième forme : Test entier

Dans sa deuxième forme, nous allons faire le même test, mais en plus, nous allons dire quoi faire au programme dans le cas où la condition serait fausse. Si bien que dans les deux cas, il saura quoi faire.

Cette forme s'écrit de la manière suivante :

if (condition) { // (4)
Action1; // (5)
Action2;
.......
} else { // (6)
Action3; // (7)
Action4;
...........
}  // (8)

(4) Ici, nous retrouvons exactement la même chose que dans la première forme. Le début du test est semblable. Ne pas oublier l'accolade ouvrante {.

(5) De même, ici, nous avons la même chose que dans la première forme. Rien ne change, puisque c'est toujours ce que le programme devra faire si la condition est vraie?

(6) Par contre, c'est ici que ça change. Au lieu de s'arrêter, nous disons quoi faire si la condition n'est pas vraie (on dit aussi pas "respectée"). La syntaxe signifie littéralement : } pour dire "fin de la liste des choses à faire si la condition est vraie", else pour dire "SiNon", et { pour dire : "début des choses à faire si la condition n'est pas vraie".

(7) Comme dans le cas de la condition vraie, nous disons au programme quoi faire en listant une suite d'instruction JavaScript, ou l'appel d'une fonction que nous aurons écrite dans ce but. Ce sont ces instructions, ou ces appels à des fonctions qui seront exécutées par le programme si la condition du test n'est pas vraie.

(8) Ne pas oublier la fameuse accolade fermante qui marque la fin du test.

Nous utiliserons cette deuxième forme d'écriture de test, seulement si nous désirons que le programme fasse quelque chose de bien précis dans les deux cas. Aussi bien lorsque la condition est vraie que si elle est fausse. Nous verrons plus tard, que nous pouvons recommencer à tester une autre condition dans le cas où la première n'est pas vraie. C'est ce que l'on appelle les "if imbriqués". Mais c'est une forme d'écriture que je ne recommande pas aux débutants, car pour s'y retrouver, il faut un minimum d'expérience, surtout si les conditions sont complexes.



Les conditions 

Il existe plusieurs formes de conditions. Les conditions simples, et les conditions complexes. En fait, il n'y a qu'une seule sorte de condition à la base, mais comme on peut les mélanger dans tous les sens, on en arrive inévitablement à quelque chose de très complexe assez rapidement. Mon conseil, est de décomposer autant que faire se peut une condition complexe en autant de conditions simples. Il existe aussi plusieurs manière de les écrire, mais nous nous en tiendrons à la plus simple, la plus lisible par tous et toutes, toujours dans le but de rendre le programme facilement modifiable et lisible.

Comme je l'ai déjà dit, une condition ne peut être que vraie ou fausse (non vraie serait plus approprié). Et comme nous le savons déjà, nous ne pourrons effectuer des tests que sur des valeurs de propriétés d'objets, ou sur le contenu de variables. Ce qui nous amène à repérer plusieurs forme de conditions, que nous connaissons déjà intuitivement, mais que nous devrons détailler à l'intérieur d'un programme informatique.
Pour se faire, nous utiliserons ce qui est pompeusement appelé des "Opérateurs". Un bien grand mot pour dire que nous allons comparer deux choses entre elles. Car en fait, une condition, n'est jamais que le résultat de la comparaison de deux valeurs entre elles. Et si l'on y réfléchit bien, nous ne pouvons trouver que 6 manières de comparer deux choses. Elles peuvent être :

Sachant que les opérateurs "supérieur ou égal" et "inférieur ou égal" ne sont en fait que la combinaison des opérateurs "supérieur", "inférieur", et "égal". Ce qui fait qu'en réalité, il n'y a à la base que 4 opérateurs fondamentaux. Comme nous apprendrons aussi que "différent" est la combinaison de "non égal" (combinaison de l'opérateur "égal" et de l'opérateur logique "non"), nous nous retrouvons en face de seulement 3 opérateurs de base, plus trois opérateurs logiques que nous verrons par la suite (les opérateurs logiques, appelés aussi "Booléens" : "NON", "ET", et "OU"). Nous allons passer en revue les six opérateurs de comparaison proposés par JavaScript, et les trois opérateurs logiques qui nous permettrons de combiner les opérateurs de base entre eux.

Pour simplifier les choses, nous nous en tiendrons à la comparaison des valeurs contenues dans deux variables que nous appellerons Variable1 et Variable2 . Je sais, ça ne fait pas preuve de beaucoup d'imagination, mais c'est encore ce qui reste le plus simple et le plus généralisable. :-). Nous donnerons à ces variables des contenus en terme de valeur par les instructions correspondantes avant d'effectuer les tests dans les explications qui vont suivre.

Les opérateurs de comparaison

Egal (s'écrit ==)

L'opérateur égal, sert à définir si le contenu de deux variables ou la valeur de deux propriétés d'objets JavaScript sont parfaitement égaux entre eux. La syntaxe est : == (deux signes = l'un après l'autre)

Si nous écrivons le programme suivant :

Variable1 = 10;
Variable2 = 10;

if (Variable1 == Variable2) { // teste si la condition est vraie :
alert("Le contenu des variable est bien égal"); // message si condition vraie

} else { // si non, si c'est faux


alert("Le contenu des variables n'est pas égal"); // message si condition fausse
}  

Nous obtiendrons le message disant que le contenu est bien égal. Si vous ne me croyez pas, cliquez ICI. Bon, en réalité, j'ai écrit un autre appel JavaScript rien que pour ça. Mais croyez moi, ça marche :-).
Par contre, si nous avions eu :

Variable1 = 10;
Variable2 = 20;

Nous aurions eu le message disant que les deux valeurs n'étaient pas égales. En fait, la condition testée par l'opérateur égal : Variable1 == Variable2 est vraie si et seulement si les deux variables contiennent exactement la même chose. Dans le cas contraire, la condition est fausse, et ce sont les instructions de la partie } else { qui sont exécutées. Quel que soit le contenu des deux variables du moment que ce n'est pas l'égalité parfaite.

Différent de (s'écrit !=)

L'opérateur "différent de" s'écrit en utilisant le point d'exclamation suivi du signe égal (!=) et peut aussi se lire "non égal à". Ce qui est bien la même chose que "différent de", convenons-en. Par exemple :

Variable1 = 10;
Variable2 = 20;

if (Variable1 != Variable2) { // teste si la condition est vraie :
alert("Le contenu des variable est bien différent"); // message si condition vraie

} else { // si non, si c'est faux


alert("Le contenu des variables n'est pas différent"); // message si condition fausse
}  

Comme le contenu des deux variables est bien différent, la condition est vraie, et nous aurons le message disant que le contenu des variables est bien différent.

Supérieur à (s'écrit >)

L'opérateur supérieur à, s'écrit en utilisant le signe > qui veut dire "plus grand que". Par exemple :

Variable1 = 20;
Variable2 = 10;

if (Variable1 > Variable2) { // teste si la condition est vraie :
alert("Variable1 est plus grand que Variable2"); // message si condition vraie

} else { // si non, si c'est faux


alert("Variable1 n'est pas plus grand que Variable2"); // message si condition fausse
}  

La condition sera vraie seulement si la première variable possède une valeur strictement supérieure à celle de la deuxième. Si le contenu des deux variables est égal, la condition sera fausse.

Inférieur à (s'écrit <)

L'opérateur "inférieur à", s'écrit en utilisant le signe < qui veut dire "plus petit que". Par exemple :

Variable1 = 10;
Variable2 = 20;

if (Variable1 < Variable2) { // teste si la condition est vraie :
alert("Variable1 est plus grand que Variable2"); // message si condition vraie

} else { // si non, si c'est faux


alert("Variable1 n'est pas plus grand que Variable2"); // message si condition fausse
}  

La condition sera vraie seulement si la première variable possède une valeur strictement inférieure à celle de la deuxième. Si le contenu des deux variables est égal, la condition sera fausse. Comme dans le cas de "supérieure à".

Supérieur ou égal à (s'écrit >=)

L'opérateur "supérieur ou égal à", s'écrit en utilisant le signe > qui veut dire "plus grand que", suivi du signe = (égal). Par exemple :

Variable1 = 10;
Variable2 = 10;

if (Variable1 >= Variable2) { // teste si la condition est vraie :
alert("Variable1 est plus grand ou égal à Variable2"); // message si condition vraie

} else { // si non, si c'est faux


alert("Variable1 n'est pas plus grand ou égal à Variable2"); // message si condition fausse
}  

La condition sera vraie non seulement si la première variable possède une valeur supérieure à celle de la deuxième, mais aussi si les deux variables sont égales entre elles. Nous sommes en présence de l'utilisation du OU logique dans l'expression "supérieure OU égal à", ce que nous verrons plus bas dans cette page.

Inférieur ou égal à (s'écrit <=)

L'opérateur "inférieur ou égal à", s'écrit en utilisant le signe < qui veut dire "plus petit que", suivi du signe = (égal). Par exemple :

Variable1 = 10;
Variable2 = 10;

if (Variable1 >= Variable2) { // teste si la condition est vraie :
alert("Variable1 est plus grand ou égal à Variable2"); // message si condition vraie

} else { // si non, si c'est faux


alert("Variable1 n'est pas plus grand ou égal à Variable2"); // message si condition fausse
}  

La condition sera vraie non seulement si la première variable possède une valeur inférieure à celle de la deuxième, mais aussi si les deux variables sont égales entre elles. Nous sommes en présence de l'utilisation du OU logique dans l'expression "inférieure OU égal à", ce que nous verrons plus bas dans cette page.

Les opérateurs logiques (ou Booléens)

Les opérateurs logiques encore appelés opérateurs Booléens, servent à jouer avec la logique Booléenne justement. Nous en avons eu un exemple dans le cas de "différent de" (que l'on écrit "non égal") et de "supérieur OU égal à". Ils vont servir à combiner les conditions entre elles lorsque cela s'avérera nécessaire. Mais attention, la manipulation des opérateurs logiques peut être parfois une source d'erreur difficile à trouver si l'on est pas bien habitué à leur maniement.

Le NON logique (s'écrit !)

Celui-ci, nous l'avons déjà rencontré dans la condition "différent de" qui s'écrit en fait "non égal à" en utilisant le signe ! (point d'exclamation) devant le signe = (égal). C'est la négation logique, c'est-à-dire le "non quelque chose". Tout ce qui n'est pas ce quelque chose N'importe quoi, mais surtout pas le quelque chose en question. Nous le verrons souvent employé lorsque l'on veut tester la non existence d'une valeur ou d'une propriété.

Par exemple : "égal à" s'écrit = et "non égal" à s'écrira !=

En fait, il serait plus exact de dire que l'opérateur "non" (souvent dit NOT en anglais) teste si une condition renvoi la valeur logique "False" (faux). En clair, si = est vrai, donc renvoie la valeur "true" (vrai en anglais), != (non égal) renverra la valeur vrai seulement si = est faux. Comme vous le voyez, ça n'est pas aussi simple que ça en a l'air. Mais avec un peu d'habitude, on s'y fait très bien. Par exemple

(10 == 10) // possède la valeur logique "true" (vrai) car c'est vrai
(10 != 10)
// possède la valeur logique "false" (faux) car c'est faux.

On verra que ce genre d'expression est souvent utilisée pour tester l'existence d'un objet dans un document.

Le ET logique (s'écrit &&)

Le "ET" logique, sert à tester la véracité de deux assertions en même temps. Pour que le test retourne la valeur "vrai" (soit vrai en fait), il faut que les deux assertions soient vraies. Si l'une d'elles est fausse, le teste renverra la valeur "faux" (false en anglais). Par exemple :

Variable1 = 10;
Variable2 = 10;
Variable3
= 20;
Variable4 = 20;

if ((Variable1 == Variable2) && (Variable3 == Variable4)){ // teste si la condition est vraie :
alert("Les deux assertions sont vraies"); // message si condition vraie

} else { // si non, si c'est faux


alert("L'une des deux assertions est fausse, ou les deux"); // message si condition fausse
}  

Dans ce cas, si l'une des propositions (assertions) est fausse, ou si les deux sont fausses, le test est faux. Pour qu'il soit juste, les deux doivent être vraies. Remarquez que chaque assertion (on dit aussi les "opérandes") sont placées chacune entre parenthèses. Ce n'est pas une obligation, et ça aurait très bien marché sans ça. Mais lors de l'écriture de propositions complexes, certaines prennent le pas sur d'autres (on dit qu'elles ont des ordres de "préséance"), surtout si dedans, il y a des signes mathématiques comme par exemple :

if ((Variable1 * 2) >= (Variable3 / 2) && (Variable2 * 2) >= (Variable4 / 2)) { // (ce qui est vrai !!)

Car on peut mélanger toutes les variables et tous les opérateurs autant de fois que l'on veut pour faire des tests très complexes. Le signe "*" signifie "Multiplié par" et le signe "/" signifie "Divisé par". De même que "+" veut dire "Plus" et "-" veut dire "Moins". Ces quatre derniers signes étant ce que l'on appelle des opérateurs mathématiques. C'est-à-dire capable d'effectuer des opérations mathématiques. Mais je déconseille fortement d'utiliser des tests trop complexes, car à la fin, on ne sait plus quand il est vrai ou faux. Mieux vaut décomposer en autant de variables que nécessaire et tester les variables simples.

Le OU logique (s'écrit ||)

Le signe "|" (barre verticale) s'obtient en maintenant la touche "Alt Gr" enfoncée, et en appuyant sur la touche "6" en haut du clavier (pas dans le pavé numérique surtout).
Le "OU" logique, permet lui aussi de combiner plusieurs propositions, mais à l'inverse du "ET" logique, il renverra la valeur "vrai" si au moins l'une des propositions est vraie. Pour que le teste soit vrai, il faut et il suffit qu'au moins une seule des propositions soit vraie. Et rien qu'une suffit à rendre le test vrai. Quelque soit le nombre de propositions que l'on aligne dans le test. Par exemple :

Variable1 = 10;
Variable2 = 10;
Variable3
= 20;
Variable4 = 30;

if ((Variable1 == Variable2) || (Variable3 == Variable4)){ // teste si la condition est vraie :
alert("L'une des deux assertions au moins est vraie"); // message si condition vraie

} else { // si non, si c'est faux


alert("Aucune assertion n'est vraie. Elles sont fausses toutes les deux"); // message si condition fausse
}  

Pour que le test soit vrai, il suffit que seulement une assertion soit vraie. Le test ne sera faux dans son ensemble, que si TOUTES les assertions sont fausses.
 



Ce cours est enseigné par Philippe Médan 
dans le cadre de la formation des professionnels de l'INTERNET.
au CREFAC , 14 rue Scandicci, 93000 Pantin. Tél. : 01 48 46 51 99
au GITA-GRETA , Lycée Technologique Diderot 61, rue David D'Angers 75019 Paris Tél. : 01 40 40 36 27
au CESI à l'Ecole des ingénieurs, 116 Av Aristide Briand, BP 57, 92224 Bagneux CEDEX Tél. : 01 45 36 70 00
au CFA-AFIA Centre de Formation par l'Apprentissage spécialisé en Informatique DUT Licence MIAGE,
PUIO - Bâtiment 640 - Plateau du Moulon - 91405 Orsay Tél. : 01 69 15 35 19.

© Philippe Médan 1999-2007. Tous droits de reproduction réservés pour tous pays.