À l’aide de HTML <script>, vous indiquez l’uti­li­sa­tion de scripts dans vos documents HTML. En plus de l’in­té­gra­tion directe de code Ja­vaS­cript, il est également possible de faire référence à des scripts externes. Il existe dif­fé­rents attributs op­tion­nels tels que async ou defer qui régissent l’uti­li­sa­tion des scripts utilisés.

Qu’est-ce que le tag HTML <script> et à quoi sert-il ?

La balise HTML <script> (ou tag HTML en anglais) sert à intégrer des scripts côté client dans des pages Web ou des documents HTML. Dans les balises d’ouverture et de fermeture <script>, vous pouvez soit donner des ins­truc­tions de script directes, soit faire référence à un fichier de script externe à l’aide de l’attribut src. Depuis HTML5, Ja­vaS­cript est devenu le langage de script par défaut ; dans les versions HTML an­té­rieures, une in­di­ca­tion sup­plé­men­taire du langage de script était né­ces­saire.

Les uti­li­sa­tions typiques de HTML <script> ou de Ja­vaS­cript sont gé­né­ra­le­ment la va­li­da­tion des entrées de for­mu­laires, la ma­ni­pu­la­tion d’images et les mo­di­fi­ca­tions dy­na­miques du contenu d’un site Web.

Hé­ber­ge­ment Web
Hé­ber­ge­ment Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'éco­no­mie
  • Haute dis­po­ni­bi­lité >99,99 %
  • Seulement chez IONOS : jusqu'à 500 Go inclus

Tag HTML <script> : syntaxe et exemple de code

La syntaxe de l’élément <script> est re­la­ti­ve­ment simple : une balise d’in­tro­duc­tion <script> marque le début du script, une balise de fermeture </script> marque la fin du script.

<script>Code JavaScript ou référence à un script externe</script>
html

Si vous écrivez le code Ja­vaS­cript di­rec­te­ment dans l’élément, vous n’avez pas besoin d’autres pa­ra­mètres. Si vous faites référence à un script externe, vous devez également insérer l’attribut HTML src (pour l’anglais source). La syntaxe pour HTML <script> prend alors la forme suivante :

<script src="skript.js"></script>
html

Exemple d’in­té­gra­tion directe de Ja­vaS­cript

Nous il­lus­trons la syntaxe et le fonc­tion­ne­ment de l’in­té­gra­tion directe de Ja­vaS­cript avec la balise HTML <script> par un exemple simple. Dans la section <body>, nous plaçons un bouton avec l’attribut id="monbouton". Ensuite, nous intégrons du code Ja­vaS­cript pour qu’une boîte de dialogue affiche le message « Vous avez cliqué sur le bouton ! » dès qu’un uti­li­sa­teur clique sur le bouton.

<body>
    <h1>Exemple de bouton JavaScript : Intégration directe</h1>
    <button id="monbouton">Cliquez ici !</button>
    <script>
        document.getElementById('monbouton').addEventListener('click', function() {
            alert('Vous avez cliqué sur le bouton !')
        });
    </script>
</body>
html
Conseil

Il est re­com­mandé d’inclure un texte al­ter­na­tif qui sera affiché si le script ne peut pas être exécuté, par exemple, si un uti­li­sa­teur a désactivé Ja­vaS­cript. Pour cela, vous pouvez utiliser l’élément <noscript>, entouré de ses balises d’ouverture et de fermeture.

Exemple d’in­té­gra­tion d’un script externe

Nous trans­po­sons cet exemple à la pos­si­bi­lité al­ter­na­tive d’intégrer le code Ja­vaS­cript en tant que script externe. Le code du bouton cliquable, qui affiche le message « Vous avez cliqué sur le bouton ! » après un clic, est en­re­gis­tré dans un nouveau fichier nommé script.js :

// script.js
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('monbouton').addEventListener('click', function() {
        alert('Vous avez cliqué sur le bouton !')
    });
});
ja­vas­cript

Dans la deuxième étape, nous intégrons le script dans un document HTML qui se trouve dans le même ré­per­toire que le script :

<body>
    <h1>Exemple de bouton JavaScript : Intégration via un renvoi</h1>
    <button id="monbouton">Cliquez ici !</button>
    <script src="script.js"></script>
</body>
</html>
html

Quels sont les attributs du tag HTML <script> ?

La balise HTML <script> peut être combinée avec plusieurs attributs im­por­tants, parmi lesquels :

  • async : cet attribut permet de té­lé­char­ger et d’exécuter un script externe en parallèle avec l’in­ter­pré­ta­tion du code de la page, dès qu’il est dis­po­nible, même si la page n’est pas encore en­tiè­re­ment chargée.
  • crossorigin : utilisez cet attribut pour définir le mode de requête HTTP pour le script lors de l’uti­li­sa­tion de CORS.
  • defer : si cet attribut est présent, un script externe est té­lé­chargé pa­ral­lè­le­ment à l’in­ter­pré­ta­tion du code de la page, mais il ne sera exécuté qu’une fois que la page entière aura été com­plè­te­ment chargée.
  • integrity : pour renforcer la sécurité, vous pouvez ajouter l’attribut integrity à la balise HTML <script>. Il permet aux na­vi­ga­teurs de vérifier que le script appelé n’a pas été modifié, ga­ran­tis­sant que le code ne soit pas chargé si le fichier source a été manipulé.
  • nomodule : cet attribut empêche l’exécution des scripts dans les na­vi­ga­teurs qui sup­por­tent les modules ES2015.
  • referrerpolicy : utilisez cet attribut pour spécifier quelles in­for­ma­tions de référent doivent être envoyées lors de l’appel d’un script. Les valeurs possibles incluent no-referrer (pas d’in­for­ma­tion de référent) et strict-origin (seul le domaine d’origine est envoyé).
  • src : cet attribut spécifie l’URL d’un script externe.
  • type : bien que désormais optionnel, cet attribut permet de spécifier le type de contenu de l’élément <script>. Outre les scripts clas­siques, il peut être utilisé pour les modules EC­MAS­cript (module) ou pour les cartes d’im­por­ta­tion (importmap) contenant des règles d’im­por­ta­tion de modules EC­MAS­cript.
Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée
Aller au menu principal