À l’aide de HTML <script>, vous indiquez l’utilisation de scripts dans vos documents HTML. En plus de l’intégration directe de code JavaScript, il est également possible de faire référence à des scripts externes. Il existe différents attributs optionnels tels que async ou defer qui régissent l’utilisation 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 instructions de script directes, soit faire référence à un fichier de script externe à l’aide de l’attribut src. Depuis HTML5, JavaScript est devenu le langage de script par défaut ; dans les versions HTML antérieures, une indication supplémentaire du langage de script était nécessaire.

Les utilisations typiques de HTML <script> ou de JavaScript sont généralement la validation des entrées de formulaires, la manipulation d’images et les modifications dynamiques du contenu d’un site Web.

Hébergement Web
Hébergement Web de pointe au meilleur prix
  • 3x plus rapide, 60 % d'économie
  • Haute disponibilité >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 relativement simple : une balise d’introduction <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 JavaScript directement dans l’élément, vous n’avez pas besoin d’autres paramè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’intégration directe de JavaScript

Nous illustrons la syntaxe et le fonctionnement de l’intégration directe de JavaScript 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 JavaScript pour qu’une boîte de dialogue affiche le message « Vous avez cliqué sur le bouton ! » dès qu’un utilisateur 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 recommandé d’inclure un texte alternatif qui sera affiché si le script ne peut pas être exécuté, par exemple, si un utilisateur a désactivé JavaScript. Pour cela, vous pouvez utiliser l’élément <noscript>, entouré de ses balises d’ouverture et de fermeture.

Exemple d’intégration d’un script externe

Nous transposons cet exemple à la possibilité alternative d’intégrer le code JavaScript 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 enregistré 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 !')
    });
});
javascript

Dans la deuxième étape, nous intégrons le script dans un document HTML qui se trouve dans le même répertoire 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 importants, parmi lesquels :

  • async : cet attribut permet de télécharger et d’exécuter un script externe en parallèle avec l’interprétation du code de la page, dès qu’il est disponible, même si la page n’est pas encore entièrement chargée.
  • crossorigin : utilisez cet attribut pour définir le mode de requête HTTP pour le script lors de l’utilisation de CORS.
  • defer : si cet attribut est présent, un script externe est téléchargé parallèlement à l’interprétation du code de la page, mais il ne sera exécuté qu’une fois que la page entière aura été complètement chargée.
  • integrity : pour renforcer la sécurité, vous pouvez ajouter l’attribut integrity à la balise HTML <script>. Il permet aux navigateurs de vérifier que le script appelé n’a pas été modifié, garantissant 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 navigateurs qui supportent les modules ES2015.
  • referrerpolicy : utilisez cet attribut pour spécifier quelles informations de référent doivent être envoyées lors de l’appel d’un script. Les valeurs possibles incluent no-referrer (pas d’information 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 classiques, il peut être utilisé pour les modules ECMAScript (module) ou pour les cartes d’importation (importmap) contenant des règles d’importation de modules ECMAScript.
Nom de domaine
Votre domaine en un clic
  • 1 certificat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une configuration DNS simplifiée
Cet article vous a-t-il été utile ?
Aller au menu principal