WEBVTT

00:00:01.500 --> 00:00:03.684
Les formulaires sont une composante importante

00:00:03.744 --> 00:00:06.604
lorsque tu veux recevoir de l'information de l'utilisatrice

00:00:06.604 --> 00:00:07.842
ou de l'utilisateur.

00:00:09.524 --> 00:00:12.043
Dans ce tutoriel tu vas reproduire un programme

00:00:12.103 --> 00:00:14.292
qui demande le nom et l'âge d'une personne.

00:00:14.292 --> 00:00:17.956
Et par la suite, il affiche l'information sur la page.

00:00:19.258 --> 00:00:21.758
Je commence avec la structure de base d'une page HTML.

00:00:22.508 --> 00:00:24.358
Dans la section body j'écris :

00:00:24.358 --> 00:00:49.045
Nom : suivi de la balise <input type="text" id="txtNom" value="">

00:00:50.471 --> 00:00:53.412
Input est une balise qui permet de recevoir de l'information 

00:00:53.472 --> 00:00:55.861
de l’utilisatrice ou de l'utilisateur.

00:00:56.650 --> 00:00:58.984
Il existe plusieurs types de balises input,

00:00:58.984 --> 00:01:03.172
mais celui qui permet de recevoir du texte du clavier est le type text.

00:01:04.532 --> 00:01:08.020
Je précise à l’aide de id="txtNom"

00:01:08.496 --> 00:01:10.764
car mon code devra aller chercher le nom de la personne.

00:01:12.283 --> 00:01:15.459
Je spécifie également le texte à l'intérieur de la boîte de texte 

00:01:15.519 --> 00:01:16.890
avec l'attribut value.

00:01:19.667 --> 00:01:22.879
J'applique un saut de ligne avec la balise <br>.

00:01:23.593 --> 00:01:25.485
Ensuite, je fais la même chose

00:01:25.545 --> 00:01:28.511
pour la boite de texte qui va contenir l'âge de la personne :

00:01:28.511 --> 00:01:54.674
Âge: <input type="text" id="txtAge" value=""><br>

00:01:56.333 --> 00:01:58.768
Il me faut également un bouton pour afficher le message.

00:02:00.333 --> 00:02:02.023
J'ajoute le code du bouton

00:02:02.023 --> 00:02:04.440
ainsi que le texte qui devra afficher sur le bouton :

00:02:04.440 --> 00:02:23.018
<button id="btnAffiche">Affiche</button>.

00:02:23.018 --> 00:02:28.462
J'enregistre et, à l’intérieur du navigateur Internet,

00:02:28.462 --> 00:02:30.059
je vérifie le résultat. 

00:02:30.119 --> 00:02:34.283
Je vais apporter de simples changements au niveau du code CSS.

00:02:36.798 --> 00:02:39.915
Je copie mon code CSS à l'intérieur de la section head.

00:02:41.667 --> 00:02:43.347
Si tu remarques le sélecteur body,

00:02:43.347 --> 00:02:46.911
je change la taille du texte pour 1.5em

00:02:46.971 --> 00:02:51.357
ce qui correspond à 1.5 fois la taille par défaut du navigateur.

00:02:52.000 --> 00:02:54.028
J'applique aussi une police sans-serif.

00:02:55.834 --> 00:02:58.024
Pour les balises <input> et <button>,

00:02:58.024 --> 00:03:01.948
je modifie la taille et la marge à 5 pixels.

00:03:02.832 --> 00:03:04.886
Il ne faut pas que j'oublie un emplacement sur ma page

00:03:04.946 --> 00:03:06.584
pour afficher mon message.

00:03:07.723 --> 00:03:22.205
À la fin de ma page, j’ajoute <div id="divAffiche"></div>

00:03:23.333 --> 00:03:24.513
J'ai maintenant une page

00:03:24.573 --> 00:03:28.512
qui me permet d'entrer le nom et l'âge d’une personne.

00:03:28.512 --> 00:03:33.203
Cependant, il n’y a aucune action reliée à mon bouton.

00:03:34.919 --> 00:03:38.123
Je retourne à Brackets, et à l'intérieur de ma balise bouton 

00:03:38.123 --> 00:03:48.587
j'ajoute : onclick="affiche()"

00:03:50.193 --> 00:03:51.532
À la fin de mon code,

00:03:51.532 --> 00:03:53.237
j’ajoute les balises script

00:03:53.297 --> 00:03:57.925
à l’intérieur desquels j’ajoute une fonction

00:03:57.985 --> 00:04:02.898
que je nomme affiche avec les parenthèses

00:04:02.958 --> 00:04:06.180
et les accolades d’ouverture et de fermeture.

00:04:07.642 --> 00:04:10.346
Lorsque l'utilisatrice ou l'utilisateur clique sur le bouton,

00:04:10.346 --> 00:04:12.541
JavaScript va exécuter le code

00:04:12.601 --> 00:04:15.289
qui se trouve à l’intérieur de la fonction affiche.

00:04:18.400 --> 00:04:21.589
Il y a 3 étapes importantes que la fonction affiche doit accomplir.

00:04:22.578 --> 00:04:30.306
La première, c’est de chercher les données dans les boîtes de texte.

00:04:36.247 --> 00:04:44.678
Je dois ensuite construire le message et finalement,

00:04:44.678 --> 00:04:53.113
je dois afficher le message à l’intérieur du navigateur Internet.

00:04:53.477 --> 00:04:56.916
Pour retrouver le contenu de la boîte de texte txtNom

00:04:56.916 --> 00:05:00.610
 j'écris, dans la section Chercher les données :

00:05:00.610 --> 00:05:24.606
var nom= document.getElementById("txtNom").value; 

00:05:25.834 --> 00:05:29.265
getElementById fait référence à la boîte de texte

00:05:29.325 --> 00:05:32.023
et .value fait référence, lui,

00:05:32.023 --> 00:05:34.214
à la valeur contenue dans la boîte de texte.

00:05:34.274 --> 00:05:37.159
Le tout est copié dans la variable nom.

00:05:38.305 --> 00:05:42.317
Je vais faire la même chose pour la boîte de texte txtAge :

00:05:43.069 --> 00:06:01.420
var age= document.getElementById("txtAge").value; 

00:06:01.990 --> 00:06:05.740
et je vais aussi faire une variable pour la balise div :

00:06:06.240 --> 00:06:22.892
var affiche= document.getElementById("divAffiche");

00:06:26.556 --> 00:06:31.555
Je vais maintenant construire mon message en me faisant une variable:

00:06:31.555 --> 00:06:37.477
var message = et ensuite en utilisant l'opérateur d'addition j'écris mon message,

00:06:37.477 --> 00:07:22.053
"Bonjour, mon nom est " + nom +  " et j'ai " + age + " ans.";

00:07:24.511 --> 00:07:29.651
Pour afficher le message il suffit d'ajouter :

00:07:29.651 --> 00:07:42.022
affiche.innerHTML = message;

00:07:44.759 --> 00:07:48.776
J'enregistre et je regarde à l’intérieur de mon navigateur Internet

00:07:48.776 --> 00:07:51.046
pour voir si mon programme fonctionne correctement.

00:07:58.349 --> 00:08:00.208
Si tu as remarqué au début de mon exemple,

00:08:00.208 --> 00:08:02.403
j'avais un bouton pour effacer le contenu.

00:08:04.826 --> 00:08:07.826
Donc en boni, je vais te montrer rapidement comment procéder.

00:08:10.195 --> 00:08:14.201
Je retourne à l’intérieur de Brackets et juste avant mon code,

00:08:14.201 --> 00:08:17.392
je vais ajouter un bouton effacer. 

00:08:23.303 --> 00:08:27.803
Remarque le style display est égal à none, donc aucun.

00:08:27.803 --> 00:08:30.741
Cela signifie que le bouton n'est pas visible au début.

00:08:30.741 --> 00:08:33.306
Ce bouton doit être visible seulement

00:08:33.366 --> 00:08:35.563
lorsque tu appuies sur le bouton Affiche.

00:08:37.500 --> 00:08:42.690
Je déplace mon curseur à la fin de la fonction affiche

00:08:42.750 --> 00:08:44.561
et je copie le code suivant :

00:08:44.561 --> 00:08:48.339
boutonEfface.style.display= "block";

00:08:48.339 --> 00:08:51.794
Je peux modifier le style d'une balise avec le style,

00:08:51.794 --> 00:08:54.237
suivi des éléments que je veux modifier,

00:08:54.267 --> 00:08:58.925
dans ce cas, display, passe donc de none à block.

00:09:01.333 --> 00:09:03.021
Lorsque je clique sur le bouton Efface

00:09:03.021 --> 00:09:06.090
je veux exécuter une fonction qui s’appelle efface

00:09:06.150 --> 00:09:08.864
que j'ajoute à l'instant.

00:09:10.444 --> 00:09:13.487
Je replace également la structure.

00:09:17.586 --> 00:09:23.207
La première partie du code efface le message en utilisant inner.HTML.

00:09:25.200 --> 00:09:28.890
Dans la deuxième section, je n'ai plus besoin du bouton efface,

00:09:28.890 --> 00:09:32.769
donc je remplace le style display à none.

00:09:35.976 --> 00:09:38.268
Ne t'inquiète pas si tu ne comprends pas tout du premier coup.

00:09:38.268 --> 00:09:40.961
À force de regarder plusieurs exemples, en Javascript, 

00:09:41.021 --> 00:09:43.146
tu vas finir par te retrouver.