La balise <script> est essentielle en HTML pour intégrer ou lier des scripts JavaScript à une page web. Elle permet d'ajouter des fonctionnalités interactives ou dynamiques à un site.
Les scripts inclus via cette balise peuvent être directement intégrés dans le code HTML ou liés à un fichier JavaScript externe, comme nous allons le voir. 😉
Structure et syntaxe de la balise <script>
Structure et syntaxe de base
La balise <script> est une balise conteneur. Elle est utilisée avec :
- Une balise d'ouverture
<script>; - Une balise de fermeture
</script>.
Elle peut contenir du code JavaScript directement ou référencer un fichier externe via l'attribut src.
Voici sa structure générale :
<script src="[URL du fichier JavaScript]"></script>
Exemples d'utilisation
Intégrer un script JavaScript externe
Pour intégrer un script JavaScript externe, il suffit d'utiliser l'attribut src en précisant l'URL :
<script src="script.js"></script>
Intégrer un script directement
Il est également possible de d'intégrer directement du code JavaScript à l'intérieur de la même, sans fichier externe :
<script>
console.log('Bienvenue sur notre site !');
</script>
Attributs de la balise <script>
| Attribut | Description | Exemple |
|---|---|---|
src | Spécifie le chemin d'un fichier JavaScript externe. | <script src="script.js"></script> |
type | Définit le type MIME du script. Par défaut, c'est text/javascript. | <script type="module"></script> |
async | Charge le script en parallèle et l’exécute immédiatement une fois chargé. | <script src="script.js" async></script> |
defer | Diffère l'exécution du script jusqu'à ce que le DOM soit complètement chargé. | <script src="script.js" defer></script> |
crossorigin | Gère les requêtes inter-domaines. Valeurs : anonymous, use-credentials. | <script src="script.js" crossorigin="anonymous"></script> |
integrity | Permet de vérifier l’intégrité d’un script avec une signature cryptographique. |
Compatibilité des navigateurs
| Navigateur | Compatibilité avec <script> | Support des modules ES (type="module") |
|---|---|---|
| Chrome | Oui | Oui (à partir de Chrome 61) |
| Firefox | Oui | Oui (à partir de Firefox 60) |
| Safari | Oui | Oui (à partir de Safari 10.1) |
| Edge | Oui | Oui (à partir de Edge 16) |
| Internet Explorer | Oui | Non |