Chargement...

JavaScript en HTML

Avant, l’accessibilité rendait la page utilisable par la structure. JavaScript ajoute du comportement sur ce HTML : clic, mise à jour de texte, serveur. Cette leçon reste côté HTML : comment la page charge des scripts avec <script>, pas un cours complet du langage.

Pourquoi le chargement de script compte

Les navigateurs peignent d’abord le HTML. Les scripts peuvent retarder cela, échouer en silence sur un mauvais chemin ou cacher du contenu qui devrait être dans le balisage. Savoir où mettre <script>, quand utiliser src et ce qui appartient au HTML garde la page honnête. Les habitudes d’accessibilité restent valables.

Réponse directe

1) <script>…</script> pour un petit extrait ou <script src="app.js"></script> pour un fichier externe. 2) Préférez .js externe quand la logique grandit. 3) Beaucoup placent les scripts vers la fin de body. 4) Gardez texte et contrôles significatifs en HTML. 5) Les apps modernes peuvent utiliser type="module". 6) Ce cours ne couvre que l’intégration.

📊 Script wiring beginners use

Choice What it does Beginner tip
Inline script Code sits between script tags Fine for tiny demos; hard to reuse
External src Loads a .js file from a path Prefer as projects grow
End of body Script runs after markup above it Content can paint sooner
Behavior on HTML JS finds elements by id/selectors Elements must exist in the page
Content in HTML Text and controls stay in markup Page still makes sense if JS fails
Modules later type=module for modern apps Skip until you study JS deeply

Script en ligne avec vrai bouton

Petite page : un vrai <button> avec id, puis un <script> qui écoute le clic et change le texte. Le balisage reste accessible ; le script n’ajoute que le comportement.

Inline button click

html 
<button id="hi" type="button">Say hi</button>
<script>
document.getElementById("hi").addEventListener("click", function () {
document.getElementById("hi").textContent = "Hello!";
});
</script>

Lire la démo en ligne

  • Le bouton est du vrai HTML — utile sans JS
  • id donne un crochet stable
  • Le bloc script contient quelques lignes JS en ligne
  • addEventListener câble le comportement sans remplacer le bouton
  • Sans script, « Say hi » reste
  • Leçon précédente : structure ; ici brancher le comportement

Script externe avec src

La même idée scale mieux en fichier séparé. HTML déclare seulement le chemin ; la logique vit dans app.js. Les chemins doivent correspondre à votre dossier.

External script src

html 
<button id="hi" type="button">Say hi</button>
<script src="app.js"></script>

Lire le motif externe

  • src demande de récupérer et exécuter le fichier
  • HTML reste court ; éditez dans un .js partagé
  • Mauvais chemin = pas de chargement — vérifiez Network
  • Placez le script après le bouton ou attendez l’élément
  • Préférez cela aux énormes blocs en ligne
  • Les leçons HTML suivantes avance ; le JS profond est un autre cours

Comment charger le comportement

  • Minuscule démo : en ligne près du contrôle peut suffire
  • Réutilisable ou qui grandit : vers app.js et src
  • Texte ou navigation critique : HTML d’abord, puis JS
  • Sensation cassée : vérifiez d’abord le chemin src
  • Accessibilité : gardez button/a/labels — pas de divs cliquables
  • Étude complète du langage : boucles et frameworks dans un cours JS

Pratique — HTML charge le script

  1. Copiez la démo en ligne ; cliquez et confirmez.
  2. Déplacez le listener dans app.js, passez à src, confirmez.
  3. Cassez le chemin (wrong.js) ; le bouton reste « Say hi ».
  4. Retirez tout le script ; le HTML a encore du sens.
  5. Second bouton avec nouvel id et un autre listener.
  6. Phrase : HTML possède contenu et structure ; script charge un comportement optionnel.
  7. Prochaine leçon : court résumé HTML.

Erreurs faciles

  • Phrases critiques uniquement dans JavaScript
  • Faute ou mauvais dossier dans src
  • Énormes scripts en ligne difficiles à maintenir
  • Exécuter le script avant que l’élément existe
  • Remplacer des boutons accessibles par des divs cliquables
  • Traiter cette leçon comme un cursus JS complet
  • Oublier les habitudes d’accessibilité

Résumé

  • script charge JavaScript dans une page HTML
  • En ligne pour petites démos ; src pour .js externes en grandissant
  • Placez les scripts pour que le contenu apparaisse et reste utilisable
  • Gardez contenu réel et contrôles accessibles en HTML
  • L’accessibilité était structure ; cette leçon est câblage de comportement
  • Suite : un court résumé HTML du parcours jusqu’ici

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
5
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 58 de 68
Html Tutoriel