WEBVTT

00:00:01.543 --> 00:00:02.384
Les conditions

00:00:02.384 --> 00:00:05.247
permettent au programme de réagir selon différentes situations.

00:00:05.247 --> 00:00:07.792
Fait juste penser aux véhicules intelligents

00:00:07.852 --> 00:00:09.515
qui freinent automatiquement.

00:00:10.210 --> 00:00:12.986
À l'intérieur du programme contenu dans l'ordinateur de l'auto,

00:00:12.986 --> 00:00:14.646
il y a un bout de code qui dit :

00:00:14.706 --> 00:00:18.890
"S’il y a un obstacle en avant du véhicule, actionne les freins".

00:00:21.236 --> 00:00:24.121
Dans ce tutoriel, tu vas utiliser la commande if 

00:00:24.181 --> 00:00:25.117
pour afficher un message 

00:00:25.117 --> 00:00:27.041
si une personne est trop jeune pour conduire.

00:00:30.333 --> 00:00:33.280
L'interface utilisateur se compose de 2 feuilles

00:00:33.340 --> 00:00:34.780
placées l'une par-dessus l'autre.

00:00:35.526 --> 00:00:39.015
Naturellement, seulement l'une des 2 est visible à la fois.

00:00:39.765 --> 00:00:45.265
J'utilise CSS et display:none, display:block,

00:00:45.265 --> 00:00:47.736
pour afficher l'une ou l'autre des fenêtres.

00:00:49.000 --> 00:00:53.445
La première affiche la question et la seconde le message.

00:00:54.469 --> 00:00:55.399
Par défaut,

00:00:55.459 --> 00:00:58.439
 le message indique que la personne est trop jeune pour conduire,

00:00:58.439 --> 00:01:00.755
donc le programme doit changer le message

00:01:00.755 --> 00:01:04.026
seulement si son âge est plus grand ou égal à 16.

00:01:05.849 --> 00:01:08.270
Ouvre le fichier de HTML pour cet exercice.

00:01:08.575 --> 00:01:10.820
Observe le contenu de la section body.

00:01:12.333 --> 00:01:14.774
J'ai un élément div pour chacune de mes pages,

00:01:15.383 --> 00:01:20.151
Pour la page questionAge, j'ai également deux autres blocs:

00:01:20.151 --> 00:01:25.594
l'un pour contenir l'énoncé de la question et l'autre pour la réponse.

00:01:26.283 --> 00:01:30.685
Sur l'autre feuille, il y a un seul bloc pour afficher le message.

00:01:31.734 --> 00:01:34.006
Observe également les style CSS 

00:01:34.006 --> 00:01:36.474
appliqués directement à l'intérieur des balises 

00:01:36.474 --> 00:01:40.689
pour soit afficher la page ou la cacher.

00:01:42.404 --> 00:01:46.400
Du côté du CSS, le sélecteur body contient certains éléments 

00:01:46.460 --> 00:01:48.362
pour changer l'apparence du texte.

00:01:49.667 --> 00:01:51.851
Il y a une définition pour la classe page

00:01:51.911 --> 00:01:54.046
pour ajuster les dimensions de la page.

00:01:54.500 --> 00:01:58.687
Cette classe est affectée à la question et à la réponse 

00:01:58.747 --> 00:02:01.132
car elles doivent avoir les mêmes dimensions.

00:02:01.132 --> 00:02:03.866
Il y a aussi une définition pour les blocs.

00:02:04.116 --> 00:02:08.605
Ici il y a seulement la marge qui est ajustée à 15px.

00:02:09.541 --> 00:02:13.647
Assure-toi de bien maîtriser le code CSS et HTML de cet exemple

00:02:13.677 --> 00:02:15.118
avant de continuer.

00:02:16.804 --> 00:02:18.243
Un algorithme est en quelque sorte,

00:02:18.243 --> 00:02:20.813
les étapes qu’un programme doit accomplir.

00:02:22.500 --> 00:02:25.339
Dans l'ordre, pour ce programme, il faut premièrement

00:02:25.339 --> 00:02:28.878
aller chercher le contenu de l’âge dans la boîte de texte.

00:02:30.333 --> 00:02:31.779
Ensuite, pour la deuxième étape,

00:02:31.839 --> 00:02:36.279
il faut vérifier si l'âge est plus grand ou égal à 16 ans,

00:02:36.279 --> 00:02:39.245
alors il faut afficher un message.

00:02:40.500 --> 00:02:41.934
Finalement la troisième étape

00:02:41.934 --> 00:02:44.872
consiste à afficher la page qui contient le message. 

00:02:44.872 --> 00:02:47.917
Je passe maintenant à Brackets pour commencer à écrire le code.

00:02:48.918 --> 00:02:51.690
Dans le bouton Réponse, je vais ajouter :

00:02:51.690 --> 00:03:02.383
onclick="peutConduire()"

00:03:03.834 --> 00:03:05.784
Lorsque l'utilisatrice ou l'utilisateur

00:03:05.844 --> 00:03:07.438
appuie sur le bouton Réponse,

00:03:07.438 --> 00:03:11.678
alors JavaScript va exécuter le code à l'intérieur de la fonction.

00:03:12.263 --> 00:03:15.763
Il faut donc maintenant créer une fonction qui s’appelle peutConduire.

00:03:17.695 --> 00:03:19.277
En bas de la page,

00:03:19.277 --> 00:03:24.109
j'insère une balise script d’ouverture et de fermeture,

00:03:24.219 --> 00:03:36.964
dans laquelle j'ajoute une fonction qui s’apelle peutConduire()

00:03:37.908 --> 00:03:39.511
À l’intérieur, je vais placer les commentaires,

00:03:39.511 --> 00:03:42.731
qui correspondent aux 3 étapes de mon programme.

00:03:42.731 --> 00:03:53.595
         // Cherche l'âge dans la boîte de texte

00:03:58.994 --> 00:04:03.494
         // Affiche le message selon l’âge 

00:04:10.494 --> 00:04:19.744
         // Affiche la page contenant la réponse

00:04:21.555 --> 00:04:22.590
Pour la première étape,

00:04:22.590 --> 00:04:29.276
l'âge est contenu dans une boîte de texte dont le id est égal à txtAge.

00:04:30.834 --> 00:04:32.777
Pour retrouver cette information, j'ajoute

00:04:32.777 --> 00:04:57.463
         var age= document.getElementById("txtAge").value;

00:04:59.019 --> 00:05:00.949
Je vais aussi aller chercher le bloc

00:05:00.949 --> 00:05:02.887
dans lequel le message doit s'afficher

00:05:02.887 --> 00:05:10.479
          var solutionConduire= 

00:05:10.539 --> 00:05:28.854
= document.getElementById("solutionConduire");

00:05:30.914 --> 00:05:35.416
Une condition en JavaScript commence par if, suivi de parenthèses.

00:05:36.500 --> 00:05:39.778
Dans ces parenthèses, il y a une condition,

00:05:39.778 --> 00:05:43.716
si la condition est vraie, JavaScript va exécuter le code

00:05:43.716 --> 00:05:45.743
se trouvant à l'intérieur des 2 accolades.

00:05:47.410 --> 00:05:51.558
Inversement, si la condition est fausse, ce code n'est pas exécuté.

00:05:53.832 --> 00:05:54.888
Pour la 2e étape,

00:05:54.888 --> 00:05:58.758
je dois changer le message seulement si l'âge est plus grand que 16.

00:05:59.667 --> 00:06:02.310
Je commence alors par écrire la structure de base 

00:06:02.310 --> 00:06:08.803
d'une condition if() { }.

00:06:09.706 --> 00:06:14.207
La condition est age>=16

00:06:15.421 --> 00:06:18.337
Et à l'intérieur du if, je dois changer le message 

00:06:18.337 --> 00:06:43.154
solutionConduire.innerHTML = "Tu as l'âge pour conduire."; 

00:06:43.472 --> 00:06:45.781
Il ne me reste maintenant qu'à afficher les pages

00:06:45.841 --> 00:06:47.779
dans lesquelles se trouve le message.

00:06:50.289 --> 00:06:52.089
Je commence par deux variables,

00:06:52.089 --> 00:06:54.467
pour contenir les deux pages

00:06:54.527 --> 00:06:56.700
dans lesquelles se trouvent les messages, donc :

00:06:56.730 --> 00:07:14.906
 var questionAge= document.getElementById("questionAge");

00:07:14.906 --> 00:07:32.338
 var solutionAge= document.getElementById("solutionAge");

00:07:36.469 --> 00:07:40.219
et ensuite je change la propriété display de ces 2 éléments

00:07:43.039 --> 00:07:54.620
 questionAge.style.display= "none";

00:07:55.871 --> 00:08:08.371
 solutionAge.style.display= "block";

00:08:11.611 --> 00:08:12.551
J'enregistre 

00:08:12.611 --> 00:08:14.803
et je regarde le résultat dans un navigateur Internet.

00:08:16.000 --> 00:08:18.192
Quelles sont les âges que je peux entrer

00:08:18.192 --> 00:08:21.215
pour bien vérifier que mon programme fonctionne correctement.

00:08:22.184 --> 00:08:25.497
Une bonne technique consiste à utiliser des valeurs aux limites.

00:08:26.433 --> 00:08:33.194
Par exemple ici, je peux tester mon programme avec 15 ans,

00:08:33.194 --> 00:08:36.381
qui est à la limite supérieure pour une personne qui ne peut pas conduire.

00:08:38.500 --> 00:08:43.068
Et ensuite, je peux le tester avec 16 ans,

00:08:43.068 --> 00:08:45.930
qui l'âge le plus jeune pour pouvoir conduire.

00:08:45.930 --> 00:08:48.645
Si le programme réagit correctement,

00:08:48.645 --> 00:08:51.834
il y a de bonnes chances qu'il ne contienne pas d'erreur.