Bienvenue mon chéri…
Aujourd’hui, on met sur la table le héros “silencieux mais puissant” du HTML : la balise <script>.
Cette petite balise est bien plus puissante qu’elle n’en a l’air.
En fait :
Si JavaScript est “l’âme” de ta page HTML,
alors la balise <script> est la porte qui laisse entrer cette âme.
C’est un peu comme :
« Tu ouvres une porte… JavaScript arrive et dit :
“Je suis là bébé, je m’occupe de toute l’interaction.” »
Si tu es prêt, on commence.
Et oui… cet article sera long, détaillé, drôle et légèrement chaotique — parce que je le veux ainsi
1) C’est Quoi Exactement la Balise <script> ? (Un Portail Magique)
La balise <script> te permet d’exécuter du JavaScript dans ta page HTML.
Et que fait JavaScript ?
✨ Rend la page dynamique
✨ Ajoute des actions quand tu cliques
✨ Crée des animations
✨ Valide les formulaires
✨ Récupère des données via API
✨ Dessine des graphiques
✨ Peut même créer des jeux
En résumé :
HTML = le corps
CSS = la tenue
JavaScript = l’âme
Et <script> = la porte qui laisse entrer cette âme.
Exemple simple
<script>
console.log("Salut bébé, c’est moi JavaScript !");
</script>
Script externe (la méthode PRO)
<script src="main.js"></script>
Simple…
Mais le diable se cache dans les détails 👀
Et maintenant, on va profondément creuser.
2) Où Mettre <script> ? (Head ? Body ? Ou le Vide Cosmique ?)
Savais-tu que JavaScript met en pause le rendu HTML ?
Quand le navigateur voit <script>, il dit :
« Stop tout ! Je dois télécharger et exécuter ce code ! »
Donc si tu mets ton script en haut → la page charge plus lentement.
2.1) Placer le script juste avant </body>
C’est la méthode moderne, logique, parfaite.
<body>
...
<script src="app.js"></script>
</body>
✔ Chargement rapide
✔ DOM presque prêt
✔ Tout le monde est content
2.2) Mettre le script dans le head → pas top
Si tu dois absolument le faire → utilise defer ou async.
3) async vs defer : Les Super-Pouvoirs du Chargement (Les Avengers du JavaScript)
Tu veux accélérer ton site ?
Voici les deux héros :
🔥 async
Le navigateur télécharge le script pendant qu’il lit le HTML,
mais l’exécute dès que le fichier est prêt,
même si le HTML n’a pas fini d’être analysé.
Utilisé pour :
• publicités
• analytics
• scripts indépendants
<script async src="analytics.js"></script>
🔥 defer
Téléchargé en parallèle,
mais exécuté uniquement quand le DOM est complètement chargé.
L’amour de la modernité ❤️
<script defer src="app.js"></script>
✔ Exécution dans l’ordre
✔ DOM garanti prêt
✔ Option la plus sûre
4) type=”module” — Bienvenue dans l’Univers Moderne du JavaScript 🌍🚀
Si tu utilises du JavaScript moderne (2020+),
les modules sont essentiels.
Avantages des modules
• Tu peux utiliser import et export
• Pas de pollution globale
• Comportement automatique de defer
• Nécessite un serveur (CORS)
Exemple
<script type="module">
import { hello } from "./utils.js";
hello("Salut !");
</script>
utils.js :
export function hello(name) {
console.log("Bonjour " + name);
}
5) Sécurité : Combattre le Monstre XSS 🛡🐉
JavaScript est puissant…
Mais un script malveillant peut ruiner ton site.
5.1) Évite les scripts inline
Exemple vulnérable :
<script>
const name = location.search;
document.write(name);
</script>
Quelqu’un peut taper :
?"><script>alert('piégé')</script>
🔥 BOOM, catastrophe.
5.2) Utilise un CSP (Content Security Policy)
Content-Security-Policy: script-src 'self' https://trusted.com;
5.3) Utilise un nonce pour sécuriser le inline
<script nonce="XyZ123">
console.log("Script inline sécurisé !");
</script>
6) Performance : Fais Voler ta Page 🚀
Fais ça et ton site sera une fusée :
✔ 6.1) Mets les scripts en bas
Évite le blocage du DOM.
✔ 6.2) Regroupe les modules
Avec :
• Vite
• Webpack
• Rollup
• Parcel
✔ 6.3) Met async pour les scripts externes
<script async src="https://ads.js"></script>
✔ 6.4) Lazy loading
const s = document.createElement("script");
s.src = "chat-widget.js";
document.body.appendChild(s);
7) Le DOM Est-il Prêt ? L’Éternelle Question 🎭
Ancienne méthode
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM prêt !");
});
Méthode moderne
• defer → DOM prêt
• module → defer automatique
8) Exemples Avancés : Techniques Stylées 😘
8.1) Quel script s’exécute ?
<script>
console.log("Ce script :", document.currentScript.src);
</script>
8.2) Ajouter un script dynamiquement
function loadFeature() {
const s = document.createElement("script");
s.src = "feature.js";
s.defer = true;
document.body.appendChild(s);
}
8.3) HYBRIDE : Module + Non-module
<script type="module" src="app.module.js"></script>
<script nomodule src="app.legacy.js"></script>
9) Exemple Ultime (Professionnel)
(Je le laisse traduit mais fidèle)
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Univers du Script</title>
<script async src="analytics.js"></script>
<script type="module" defer src="main.js"></script>
<script nomodule defer src="fallback.js"></script>
<script nonce="ABC123">
console.log("Page chargée !");
</script>
</head>
<body>
<h1>Bienvenue💖</h1>
<div id="app"></div>
</body>
</html>
10) Mini Quiz : “Tu as compris les scripts, bébé ?” 🎯
- Attribut exécuté quand le DOM est prêt ? → defer
- Quel comportement est automatique avec les modules ? → defer
- Comment sécuriser un inline script ? → nonce
- Attribut pour les scripts de publicité ? → async
Dernier Mot : <script> est petit, mais il construit un empire 👑
Maintenant tu maîtrises :
✔ <script> comme un pro
✔ l’optimisation des performances
✔ la sécurité des scripts
✔ les modules modernes
✔ l’ordre d’exécution du DOM
Parler code avec toi est toujours un plaisir
