Chargement...

Où placer JavaScript

Vous savez déjà que JavaScript ajoute du comportement. La question suivante est pratique : où placer le code pour que le navigateur le trouve, et pour que les éléments à modifier existent déjà ?

Où faut-il placer JavaScript dans une page HTML ?

Placez JavaScript dans un élément <script> — soit en ligne entre les balises, soit externe avec src vers un fichier .js. Pour le travail quotidien débutant qui touche la page, mettez le script juste avant </body> pour que le HTML au-dessus soit prêt. Quand le code grandit, déplacez-le vers un fichier externe en gardant la même habitude en fin de body (vous verrez defer plus tard).

Trois emplacements en un coup d’œil

📊 Où peut vivre JavaScript

Choix Où il se trouve Meilleur usage débutant
En ligne dans le head <script> dans <head> Mini configuration seulement ; risqué si les éléments n’existent pas encore
En ligne en fin de body <script> juste avant </body> Défaut pour les démos courtes qui changent un titre ou un texte
Fichier .js externe <script src="app.js"> (souvent fin de body) Défaut quand la logique grossit ou que vous réutilisez le fichier

Script dans le head (à connaître, à utiliser avec prudence)

Un script dans le head s’exécute tôt, pendant que le navigateur lit encore le document. Cela peut retarder le contenu visible. Si votre code cherche tout de suite un élément avec getElementById, il peut ne pas exister encore — résultat null ou erreur.

Script dans le head

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Head</title>
<script>
console.log("Head script ran early");
</script>
</head>
<body>
<h1>Content comes after the head script</h1>
</body>
</html>

Quand un script dans le head convient

  • Journaliser un message ou fixer une valeur simple sans DOM
  • Charger une bibliothèque avec des attributs modernes (defer / async viendront plus tard)
  • Ce n’est pas votre défaut pour les démos « change ce paragraphe » de ce cours

Script en fin de body (défaut débutant)

Mettez d’abord le balisage dont les visiteurs ont besoin. Puis exécutez le script. Les éléments avec id au-dessus du script sont déjà dans le document quand les instructions tournent.

Script en fin de body

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — Body End</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<p>HTML arrives first; then the script updates the heading.</p>
<script>
document.getElementById("title").textContent =
"Ready — script ran at the end of body";
</script>
</body>
</html>

Pourquoi cette habitude aide

  • Le titre et le paragraphe peuvent s’afficher avant la fin du travail du script
  • getElementById("title") trouve un nœud réel
  • Les démos courtes restent dans un seul fichier pendant que vous apprenez le langage
  • Plus tard vous déplacez les mêmes instructions vers un fichier externe sans changer l’idée

Fichier JavaScript externe (défaut projet)

Gardez la structure en HTML et la logique dans app.js. Pointez le fichier avec src. Les chemins sont relatifs au HTML sauf dossier indiqué.

HTML qui charge app.js

html 
<!DOCTYPE html>
<html>
<head>
<title>Where To — External</title>
</head>
<body>
<h1 id="title">Loading…</h1>
<script src="app.js"></script>
</body>
</html>

app.js externe

javascript 
document.getElementById("title").textContent =
"Loaded from app.js";

Pourquoi l’externe gagne en grandissant

  • Un .js peut servir plusieurs pages
  • Les éditeurs colorent mieux JavaScript dans son propre fichier
  • Vous évitez d’énormes blocs <script> dans le balisage
  • Un mauvais chemin src échoue en silence — vérifiez Console et Network si rien ne tourne

L’ordre compte

Le navigateur lit de haut en bas. Un script s’exécute quand l’analyseur l’atteint (sauf attributs avancés plus tard). Si la ligne 1 a besoin de #title, cet élément doit apparaître au-dessus du script dans le HTML, ou vous attendez la fin du document. La fin de body est la façon simple d’obtenir cet ordre.

Essayez vous-même

  1. Créez where.html avec l’exemple de fin de body. Ouvrez-le et confirmez la mise à jour du titre.
  2. Changez la chaîne textContent, enregistrez et actualisez.
  3. Créez app.js avec le JavaScript de l’exemple externe. Dans where.html, chargez seulement <script src="app.js"></script> avant </body>.
  4. Renommez temporairement app.js ou cassez le chemin src, actualisez et regardez la Console — puis corrigez le chemin.
  5. Optionnel : déplacez le même script dans le head (sans defer) et voyez que getElementById peut échouer ; remettez-le en fin de body.

Erreurs fréquentes

  • Mettre dans le head un script qui met à jour le DOM pour que getElementById tourne avant l’existence de l’élément
  • Lier <script src="app.js"> avec une faute de frappe ou un mauvais dossier — la page a l’air correcte mais rien ne tourne
  • Laisser des centaines de lignes en ligne dans chaque HTML au lieu d’un .js partagé
  • Confondre cette leçon avec le branchement CSS : les styles utilisent <link> / <style> ; le comportement utilise <script>

Résumé

  • JavaScript vit dans un <script> — en ligne ou via src vers un fichier .js
  • La fin de body est le défaut accueillant quand le code touche des éléments de page
  • Les scripts du head tournent tôt ; évitez d’y mettre à jour le DOM avant de connaître les attributs de chargement
  • Les fichiers externes sont le défaut projet quand les démos grandissent
  • L’ordre du script suit celui du document sauf options avancées plus tard
  • Entraînez-vous en séparant une démo en ligne qui marche en HTML + app.js

🧠 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

❓
6
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 2 de 4
Javascript Tutoriel