Script en HTML

Dernière mise à jour : 16/02/2022

Dans ce tutoriel, vous apprendrez à inclure JavaScript dans un document HTML.

Travailler avec le script côté client

Les scripts côté client font référence au type de programmes informatiques exécutés par le navigateur Web de l'utilisateur. JavaScript (JS) est le langage de script côté client le plus populaire sur le Web.

La balise <script> est utilisé pour intégrer ou référencer JavaScript dans un document HTML afin d'ajouter de l'interactivité aux pages Web et d'offrir une expérience utilisateur nettement meilleure.

Certaines des utilisations les plus courantes de JavaScript sont la validation de formulaire, la génération de messages d'alerte, la création d'une galerie d'images, l'affichage du contenu masqué, la manipulation DOM, etc.

Ajout de JavaScript aux pages HTML

JavaScript peut être intégré directement dans la page HTML ou placé dans un fichier de script externe et référencé dans la page HTML. Les deux méthodes utilisent l'élément <script>.

Intégration de JavaScript

Pour intégrer JavaScript dans un fichier HTML, ajoutez simplement le code en tant que contenu d'une balise <script>.

Le JavaScript dans l'exemple suivant écrit une chaîne de texte dans une page Web.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Intégration de JavaScript</title>
</head>
<body>
    <div id="hello"></div>
    <script>
        document.getElementById("hello").innerHTML = "Hello World!";
    </script>
</body>
</html>

Conseil : Idéalement, les éléments de script doivent être placés au bas de la page, avant la balise de fermeture du body, c'est-à-dire </body>, car lorsque le navigateur rencontre un script, il interrompt le rendu du reste de la page jusqu'à ce qu'il analyse le script qui peut avoir un impact significatif sur les performances de votre site.

Appel d'un fichier JavaScript externe

Vous pouvez également placer votre code JavaScript dans un fichier séparé (avec une extension .js) et appeler ce fichier dans votre document HTML via l'attribut src de la balise <script>.

Ceci est utile si vous souhaitez que le même script soit disponible pour plusieurs documents. Cela vous évite de répéter la même tâche encore et encore et rend votre site Web beaucoup plus facile à entretenir.

L'exemple suivant montre comment lier un fichier JS externe en HTML.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>fichier JavaScript externe</title>
</head>
<body>
    <div id="hello"></div>
    <script src="hello.js"></script>
</body>
</html>

Remarque : Lorsque l'attribut src est spécifié, l'élément <script> doit être vide. Cela signifie simplement que vous ne pouvez pas utiliser le même élément <script> à la fois pour intégrer le JavaScript et pour créer un lien vers un fichier JavaScript externe dans un document HTML.

Conseil : les fichiers JavaScript sont des fichiers texte normaux avec une extension .js, telle que "hello.js". De plus, le fichier JavaScript externe ne contient que des instructions JavaScript ; il ne contient pas l'élément <script>...</script> comme le JavaScript intégré.

L'élément HTML noscript

L'élément <noscript> est utilisé pour fournir un contenu alternatif aux utilisateurs qui ont désactivé JavaScript dans leur navigateur ou qui ont un navigateur qui ne prend pas en charge les scripts côté client.

Cet élément peut contenir n'importe quel élément HTML, à l'exception de <script>, qui peut être inclus dans l'élément <body> d'une page HTML normale. Voyons un exemple :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>L'élément HTML noscript</title>
</head>
<body>
    <div id="hello"></div>
    <script>
        document.getElementById("hello").innerHTML = "Hello World!";
    </script>
    <noscript>
        <p>Oops! Ce site fonctionne avec Javascript activé dans le navigateur</p>
    </noscript>
</body>
</html>

Remarque : Le contenu de l'élément noscript ne s'affichera que si le navigateur de l'utilisateur ne prend pas en charge les scripts ou si les scripts sont désactivés dans le navigateur.

Importance de la balise meta sur les moteurs de recherche Caractères spéciaux et entités HTML

Suivez nous

Table de matières

Les bases

HTML Avancé

Fonctionnalités HTML5

Table de matière