Scripts HTML
En HTML, un script est un petit programme intégré qui peut ajouter de l'interactivité à votre site. Apprenez à ajouter et déclencher des scripts avec W3Docs.
Un script est un petit morceau de code intégré dans les pages web pour les rendre dynamiques et interactives. Par exemple, avec des scripts, vous pouvez créer un message dans une boîte contextuelle, un menu déroulant ou valider un formulaire avant sa soumission. JavaScript est le langage de script le plus couramment utilisé sur les sites web.
Cette page explique comment ajouter JavaScript à un document HTML, où placer l'élément <script>, comment contrôler son exécution avec defer et async, et comment prévoir une alternative pour les utilisateurs sans JavaScript. Pour la liste complète des attributs de <script>, consultez la référence de la balise <script> dédiée.
Comment ajouter des scripts
L'élément <script> contient soit du code en ligne, soit une référence à un fichier externe. Il existe deux façons de l'utiliser :
1. Script en ligne — écrire le code directement entre les balises ouvrante et fermante :
<script>
document.body.style.backgroundColor = "lightyellow";
</script>2. Script externe — pointer l'attribut src vers un fichier .js. L'élément doit être vide (aucun code entre les balises) :
<script src="scripts.js"></script>Si vous avez besoin du même code sur plusieurs pages web, placez-le dans un fichier .js séparé et référencez-le avec src. Les fichiers externes sont mis en cache par le navigateur, gardent votre HTML propre et vous permettent de réutiliser un seul script sur l'ensemble du site.
Les scripts sont souvent placés dans le <head> ou juste avant la balise fermante </body>, mais un <script> peut apparaître n'importe où dans le document. L'emplacement est important en raison de la façon dont le navigateur analyse la page — voir Où placer un script ci-dessous.
Exemple de manipulation du DOM en ligne
Un script en ligne peut lire et modifier la page via le DOM. L'exemple ci-dessous trouve un paragraphe par son id et réécrit son texte lorsque le script s'exécute :
Script en ligne — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Inline script example</title>
</head>
<body>
<p id="message">Original text.</p>
<script>
document.getElementById("message").textContent = "Changed by JavaScript!";
</script>
</body>
</html>Comme le <script> se trouve après le <p>, l'élément existe déjà dans le DOM lorsque le script s'exécute, donc getElementById le trouve. Si le script s'exécutait avant l'élément, il obtiendrait null.
Remarque : En HTML5, l'attribut type est facultatif (sa valeur par défaut est text/javascript) et est considéré comme obsolète pour les scripts JavaScript.
defer et async
Lorsqu'un script se trouve dans le <head>, le navigateur arrête normalement l'analyse du HTML, télécharge le script, l'exécute, puis continue. Avec des scripts volumineux, cela bloque le rendu et ralentit la page. Les attributs defer et async (qui s'appliquent uniquement aux scripts externes avec un src) corrigent ce problème en téléchargeant le script en parallèle avec l'analyse HTML — ils diffèrent dans le moment où le script s'exécute.
| Attribut | Téléchargement | Moment d'exécution | Respecte l'ordre source ? |
|---|---|---|---|
| (aucun) | Bloque l'analyse pendant le téléchargement | Immédiatement, bloquant l'analyse | Oui |
defer | En parallèle avec l'analyse | Après l'analyse complète du HTML, juste avant DOMContentLoaded | Oui |
async | En parallèle avec l'analyse | Dès que le téléchargement est terminé, en interrompant l'analyse à ce moment | Non — celui qui se charge en premier s'exécute en premier |
<head>
<!-- Runs in order, after the whole page is parsed -->
<script src="library.js" defer></script>
<script src="app.js" defer></script>
<!-- Runs as soon as it loads, order not guaranteed -->
<script src="analytics.js" async></script>
</head>Utilisez defer pour les scripts qui dépendent du DOM ou les uns des autres (la plupart du code d'application). Utilisez async pour les scripts indépendants qui ne reposent sur rien d'autre, comme les outils d'analyse ou les balises publicitaires.
Où placer un script
L'endroit où vous placez un <script> détermine si les éléments de la page existent au moment de son exécution.
Un script placé juste avant la balise fermante </body> s'exécute après que tout le HTML au-dessus a été analysé, ce qui lui permet d'accéder en toute sécurité à n'importe quel élément de la page :
<body>
<h1 id="title">Loading…</h1>
<!-- The <h1> already exists, so this works -->
<script>
document.getElementById("title").textContent = "Ready!";
</script>
</body>Le même effet peut être obtenu en plaçant le script dans le <head> avec defer, car les scripts différés attendent la fin de l'analyse :
<head>
<script src="app.js" defer></script>
</head>
<body>
<h1 id="title">Loading…</h1>
</body>Un simple <script> dans le <head> (sans defer) s'exécute avant que le body soit analysé, donc document.getElementById("title") retournerait null.
type="module"
Définissez type="module" pour charger le script comme un module JavaScript. Les modules peuvent utiliser import et export pour partager du code entre fichiers, s'exécutent automatiquement en mode strict et sont différés par défaut (ils s'exécutent après l'analyse du HTML, même sans l'attribut defer) :
<script type="module">
import { greet } from "./utils.js";
greet("World");
</script>Comment déclencher des scripts
Vous pouvez choisir de faire s'exécuter un script automatiquement (dès le chargement de la page) ou après qu'un utilisateur ait effectué une action (comme survoler ou cliquer sur un lien). Si vous voulez que le script s'exécute lorsque l'utilisateur effectue une action (appelée un événement), vous devez utiliser des gestionnaires d'événements pour indiquer au navigateur quel événement est responsable du déclenchement du script.
Les gestionnaires d'événements peuvent être spécifiés comme attributs dans les balises HTML, ou attachés via JavaScript à l'aide de méthodes telles que addEventListener.
Exemple de la balise HTML <script> avec un gestionnaire d'événements :
Exemple de gestionnaire d'événements — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Event Handler Example</title>
</head>
<body>
<span id="trigger">
Bring your mouse here to see an alert
</span>
<script>
function myAlert() {
alert("I am an event handler....");
}
document.getElementById('trigger').addEventListener('mouseover', myAlert);
</script>
</body>
</html>L'élément <noscript>
Bien que de nombreux navigateurs modernes prennent en charge JavaScript, certains navigateurs plus anciens ne peuvent pas exécuter du code JavaScript, et les utilisateurs peuvent également avoir désactivé JavaScript dans leur navigateur. Pour fournir des informations alternatives aux navigateurs non-JavaScript ou aux navigateurs avec JavaScript désactivé, utilisez la balise <noscript>. Le contenu de cette balise est affiché à l'utilisateur uniquement lorsque JavaScript est désactivé ou que le navigateur ne prend pas en charge JavaScript.
Exemple de la balise HTML <noscript> :
Mon premier exemple JavaScript ! — Scripts HTML — W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p id="output"></p>
<script>
document.getElementById('output').textContent = "My first JavaScript example!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>If JavaScript is disabled or the browser doesn't support it, the content inside the noscript element is shown instead.</p>
</body>
</html>Ici, le <p id="output"> est déclaré avant le <script>, donc le paragraphe existe déjà dans le DOM lorsque le script s'exécute et getElementById peut le trouver. Lorsque JavaScript est activé, l'utilisateur voit « My first JavaScript example! » ; lorsqu'il est désactivé, le navigateur ignore le script et affiche le message <noscript>.
Voir aussi
- Balise HTML
<script>— référence complète des attributs (src,type,defer,async, et plus encore). - Balise HTML
<noscript>— contenu de remplacement pour les utilisateurs sans JavaScript. - Événements JavaScript — réagir aux clics, survols et autres actions de l'utilisateur.