La Balise Script

Présentation

La balise "script" est utilisée pour incorporer du code JavaScript dans une page web HTML. Elle permet d'ajouter des fonctionnalités interactives, de manipuler le DOM (Document Object Model) et de réagir aux événements du navigateur.

Où Placer la Balise Script ?

La balise "script" peut être placée à différents endroits dans le code HTML, en fonction de ses besoins. Voici quelques emplacements courants :

Dans l'en-tête (la balise "head") : Placer la balise "script" dans l'en-tête de la page permet de charger le script au début du chargement de la page. Cela peut être utile pour des scripts critiques qui doivent être exécutés avant que la page ne soit rendue.


                        <head>
                            <meta charset="UTF-8">
                            <meta name="viewport" content="width=device-width, initial-scale=1.0">
                            <title>Document</title>
                            <script></script>
                        </head>

À la fin du corps (la balise "body") : Placer la balise "script" à la fin du corps de la page permet de charger le script après que le contenu principal de la page a été affiché. Cela peut améliorer la vitesse de chargement initial de la page.


                            <body>
                                ...
                                ...
                                <script></script>
                            </body>

Où Écire son Script ?

Pour écrire du code JavaScript, vous pouvez utiliser la balise "script" directement dans le fichier HTML ou créer un fichier JavaScript externe avec une extension .js :

Écrire le script entre balises "script" :


                            <script>
                                // Votre code JavaScript ici
                            </script>

Écrire le script dans un fichier externe :


                            <script src="./js/mon_script.js"></script>

Priorité d'Exécution des Scripts

Lorsque vous incluez une balise "script" sans les attributs async ou defer, le navigateur bloque le rendu de la page web pendant le téléchargement et l'exécution du script. Cela signifie que le script est exécuté immédiatement, ce qui peut entraîner un ralentissement de la vitesse de chargement de la page :
```
                            <script src="./js/mon_script.js"></script>
                        
```
L'attribut async signifie que le script est téléchargé en parallèle avec le chargement de la page, et l'exécution du script commence dès qu'il est disponible. Cela n'interrompt pas le rendu de la page, mais cela signifie que l'ordre d'exécution des scripts peut être aléatoire :
```
                            <script src="./js/mon_script.js" async></script>
                        
```
L'attribut defer signifie que le script est téléchargé en arrière-plan pendant que la page se charge, mais son exécution est retardée jusqu'à ce que la page soit complètement chargée. Les scripts defer sont exécutés dans l'ordre dans lequel ils apparaissent dans le HTML :
```
                            <script src="./js/mon_script.js" defer></script>
                        
```