WEBVTT

00:00:00.500 --> 00:00:02.182
Aujourd'hui, tu verras, entre autres,

00:00:02.182 --> 00:00:05.868
comment modifier le contenu d'une page Web en utilisant JavaScript

00:00:05.868 --> 00:00:08.398
et la propriété « innerHTML ».

00:00:10.358 --> 00:00:13.108
Je commence par la structure de base d'une page HTML.

00:00:14.667 --> 00:00:17.015
Je vais insérer à l’intérieur de la section body

00:00:17.045 --> 00:00:27.190
une balise « <div id="monTexte"></div> ».

00:00:28.641 --> 00:00:30.191
Le « id » est nécessaire

00:00:30.191 --> 00:00:31.855
afin que mon code JavaScript

00:00:31.855 --> 00:00:34.299
puisse faire référence au contenu de ma page.

00:00:35.834 --> 00:00:37.245
Maintenant passons au code JavaScript.

00:00:38.000 --> 00:00:41.937
Une page HTML est lue par le navigateur du haut vers le bas.

00:00:41.937 --> 00:00:44.359
Donc, si je veux que le code JavaScript 

00:00:44.419 --> 00:00:47.058
modifie le texte contenu dans la balise « div »,

00:00:47.058 --> 00:00:51.411
il doit alors exister avant que le code soit exécuté.

00:00:52.100 --> 00:00:55.552
Une bonne pratique consiste à placer le code JavaScript

00:00:55.552 --> 00:00:56.876
à la fin de la section body,

00:00:56.876 --> 00:01:00.991
donc une fois que tous les éléments de la page HTML sont chargés,

00:01:00.991 --> 00:01:04.854
alors le code JavaScript peut s’exécuter sans erreurs.

00:01:07.274 --> 00:01:13.854
Donc, à la fin de la page, j'ajoute script d'ouverture et de fermeture.

00:01:14.550 --> 00:01:18.655
Cette fois, au lieu de placer le code directement dans la page HTML,

00:01:18.655 --> 00:01:21.270
je vais l'insérer dans un fichier externe. 

00:01:21.834 --> 00:01:32.275
Pour ce faire, j'ajoute à l'intérieur, « src="monScript.js"> ». 

00:01:34.282 --> 00:01:38.001
Maintenant, je dois créer le fichier « monScript.js » 

00:01:38.001 --> 00:01:39.716
dans lequel je vais placer mon code.

00:01:40.663 --> 00:01:44.973
Dans Brackets, je peux fractionner ma page de plusieurs façons,

00:01:44.973 --> 00:01:48.565
ce qui me permettra de voir les deux fichiers dans la même fenêtre.

00:01:51.003 --> 00:01:53.131
Je fais « Fichier » « Nouveau »

00:01:53.131 --> 00:01:56.830
et je vais l'enregistrer immédiatement 

00:01:56.830 --> 00:02:02.313
sous le nom « monScript.js »,

00:02:02.313 --> 00:02:05.758
et ce, dans le même dossier que ma page HTML.

00:02:10.170 --> 00:02:13.569
Pour spécifier le texte à modifier à l'intérieur de ma page HTML,

00:02:13.569 --> 00:02:23.262
j'utilise « document.getElementById("monTexte")» 

00:02:23.262 --> 00:02:25.732
en m'assurant de respecter les majuscules.

00:02:37.000 --> 00:02:43.436
Ensuite j’ajoute «.innerHTML » 

00:02:43.496 --> 00:02:46.623
qui spécifie le contenu de la balise <div>.

00:02:47.424 --> 00:02:56.979
Par la suite, j’ajoute « ="Bonjour le monde"; ».

00:02:58.905 --> 00:03:10.611
J'enregistre par le biais du menu « Fichier » ou en utilisant « CTRL+S ». 

00:03:11.644 --> 00:03:16.977
Je vérifie alors le contenu de ma page et le texte « Bonjour le monde » est bien affiché.

00:03:17.918 --> 00:03:21.417
En reproduisant cet exemple, si la page ne s'affiche pas correctement,

00:03:21.417 --> 00:03:24.605
n'oublie pas de vérifier la fenêtre console

00:03:24.605 --> 00:03:27.577
afin de vérifier qu’il n’y a pas d'erreurs.

00:03:29.847 --> 00:03:33.881
Tu peux également vérifier que le nom du « id » dans la page HTML

00:03:33.881 --> 00:03:37.354
est écrit de la même façon à l'intérieur de ton code JavaScript.

00:03:37.789 --> 00:03:42.911
Finalement, le nom du fichier « monScript.js » dans ton dossier

00:03:42.911 --> 00:03:46.634
et dans ta page HTML doivent être identiques.