WEBVTT

00:00:01.463 --> 00:00:02.969
Tu vas, dans ce tutoriel,

00:00:02.969 --> 00:00:06.100
utiliser une structure de conditions de type else if.

00:00:06.544 --> 00:00:10.044
Cette structure te permet de réagir de plusieurs façons différentes 

00:00:10.044 --> 00:00:11.733
selon une situation donnée. 

00:00:13.341 --> 00:00:15.091
L’exemple que tu vas reproduire

00:00:15.151 --> 00:00:17.575
consiste à demander une note en niveau

00:00:17.575 --> 00:00:19.220
en utilisant la boîte d’options.

00:00:19.930 --> 00:00:23.411
Par la suite, le programme doit afficher sa note en pourcentage.

00:00:24.677 --> 00:00:27.785
Premièrement, il faut chercher la valeur que l’utilisatrice

00:00:27.785 --> 00:00:30.454
ou l’utilisateur a entré dans la boîte d’options.

00:00:30.911 --> 00:00:35.013
Ensuite, il faut afficher la note en pourcentage selon le barème suivant.

00:00:38.609 --> 00:00:40.005
Ouvre la page Web de cet exemple 

00:00:40.005 --> 00:00:43.947
et familiarise-toi avec le code HTML et CSS.

00:00:44.131 --> 00:00:46.868
Il est très semblable à ceux des exemples précédents. 

00:00:49.775 --> 00:00:51.205
Notre programme doit réagir

00:00:51.265 --> 00:00:53.793
lorsque quelqu’un appuie sur le bouton affiche.

00:00:53.973 --> 00:00:57.680
Tu l’as peut-être deviné, mais à l’intérieur du bouton, j’ajoute :

00:00:57.680 --> 00:01:08.029
onclick="afficheNote()".

00:01:09.337 --> 00:01:10.517
Au bas de la page,

00:01:10.517 --> 00:01:12.805
j’ajoute la balise ‹script›

00:01:17.477 --> 00:01:20.472
et je place également la définition de ma fonction :

00:01:20.472 --> 00:01:26.659
Function afficheNote( ){ }

00:01:27.956 --> 00:01:29.085
 À l’intérieur,

00:01:29.145 --> 00:01:32.325
j’ajoute les différents commentaires dont j’aurai besoin :

00:01:35.000 --> 00:01:37.263
La note se retrouve à l’intérieur d’une boîte d’options.

00:01:38.908 --> 00:01:41.806
Pour la retrouver, je dois utiliser la propriété value.

00:01:41.806 --> 00:01:43.321
Donc j’écris :

00:01:43.321 --> 00:01:56.593
var niveau= document.getElementById("niveau")

00:01:58.154 --> 00:02:00.834
À la fin pour aller chercher la valeur qu’elle contient,

00:02:00.834 --> 00:02:02.306
j’écris : .value;

00:02:04.154 --> 00:02:07.826
Je vais également retrouver la boite dans laquelle le message s’affiche :

00:02:07.826 --> 00:02:22.163
var message= document.getElementById("message");

00:02:28.867 --> 00:02:30.063
Pour afficher le message,

00:02:30.063 --> 00:02:32.377
ma structure de condition est un peu plus complexe

00:02:32.437 --> 00:02:34.375
car il y a plusieurs possibilités,

00:02:34.375 --> 00:02:36.966
mais il s’agit exactement du même raisonnement

00:02:37.026 --> 00:02:39.709
que l’on retrouve dans n’importe quel type de condition.

00:02:39.709 --> 00:02:40.966
Donc, je commence par :

00:02:40.966 --> 00:02:48.503
if(niveau=="4") {

00:02:48.503 --> 00:03:07.958
        message.innerHTML = "Ta note en pourcentage est 100%"; }

00:03:15.127 --> 00:03:19.490
Pour le prochain élément, si le niveau n’est pas égal à 4,

00:03:19.490 --> 00:03:24.763
je vais vérifier voir, est-ce que le niveau est égal à 3.

00:03:27.364 --> 00:03:32.863
Et j’ajoute le message, avec innerHTML encore une fois : 

00:03:33.363 --> 00:03:35.747
if( niveau== ‘3 ‘) {

00:03:35.747 --> 00:03:45.276
        message.innerHTML = "Ta note en pourcentage est 75%"; }

00:03:49.430 --> 00:03:52.850
Et ensuite je vais procéder de la même façon pour les autres niveaux.

00:03:54.694 --> 00:03:58.071
Tu peux utiliser les fonctions copier/ coller,

00:03:58.071 --> 00:04:01.258
cependant assure-toi de bien relire ton code,

00:04:02.386 --> 00:04:03.570
car une seule petite erreur 

00:04:03.570 --> 00:04:05.775
peut faire complètement dérailler ton code. 

00:04:05.775 --> 00:04:10.583
Et j’ajuste le pourcentage en fonction de chacun des niveaux.

00:04:15.579 --> 00:04:20.128
Je termine avec le code qui me permet d’afficher le message

00:04:20.128 --> 00:04:23.328
ou d’afficher la page dans lequel se trouve mon message.

00:04:24.462 --> 00:04:25.449
Je vais seulement copier le code

00:04:25.449 --> 00:04:28.482
car c’est un code qu’on a vu assez souvent dans les derniers exemples.

00:04:29.680 --> 00:04:31.430
J’ai terminé mon programme.

00:04:31.430 --> 00:04:34.535
Il suffit simplement d’enregistrer et de voir le résultat.

00:04:38.180 --> 00:04:39.519
Lorsque tu testes ton programme,

00:04:39.519 --> 00:04:41.767
il faut t’assurer que toutes les sections

00:04:41.934 --> 00:04:45.383
de la structure de conditions ont été exécutées au moins une fois.

00:04:45.830 --> 00:04:49.791
Dans ce cas-ci, il faut vérifier tous les choix possibles de niveau,

00:04:49.791 --> 00:04:54.332
de 4 jusqu’à R, et vérifier que le message est correct.

00:04:57.166 --> 00:04:59.846
Comme exercice, tu peux modifier ce programme

00:04:59.846 --> 00:05:02.726
et ajouter un bouton retour à la première page.