Lier le fichier JavaScript au fichier HTML

Sushant Poudel 12 octobre 2023
  1. Utilisez la balise <script> et l’attribut src pour lier un JavaScript externe à HTML
  2. Utilisez la balise <script> pour lier un JavaScript interne au HTML
Lier le fichier JavaScript au fichier HTML

Cet article présente deux méthodes pour lier un fichier JavaScript à un fichier HTML. Dans le premier processus, nous allons créer un fichier JavaScript et lier les fichiers en externe. Dans le deuxième processus, nous insérons du code JavaScript dans un document HTML.

Utilisez la balise <script> et l’attribut src pour lier un JavaScript externe à HTML

Nous utilisons l’attribut src dans la balise <script> pour lier le fichier JavaScript au fichier HTML dans cette méthode. L’attribut src permet de spécifier l’URL ou l’emplacement du fichier externe. Si nous souhaitons utiliser le même JavaScript sur plusieurs pages d’un site Web, nous devons créer un fichier JavaScript externe au lieu d’écrire le même temps et encore. Nous écrivons le <script> à l’intérieur de la balise <head> en HTML. Après avoir enregistré le fichier de script avec une extension .js, nous nous y référons à l’aide de l’attribut src dans la balise <script>.

Par exemple, créez deux fichiers, un fichier HTML et un fichier JavaScript. Écrivez du JavaScript dans le fichier JS et du HTML dans le fichier HTML. N’oubliez pas d’utiliser les extensions .html et .js après avoir nommé respectivement les deux fichiers lors de leur enregistrement. Placez ces deux fichiers dans le même dossier. Écrivez le nom du fichier JavaScript dans l’attribut src de la balise <script> du fichier HTML. Par exemple, si votre nom de fichier est hello.js , écrivez <script src="hello.js"> </script>.

L’exemple ci-dessous illustre une méthode pour lier un fichier JavaScript à un fichier HTML. Nous avons écrit This is HTML dans le fichier HTML et This is written from JavaScript dans le fichier JavaScript. Comme nous pouvons le voir dans les deux textes de la section de sortie ci-dessous, cela prouve que JavaScript est lié au HTML.

Exemple de code :

<html>
 <head>
 <script src="hello.js"> </script>
 </head>
 
 <body>
 <p> This is HTML</p>
 </body>

</html>
document.write('This is written from JavaScript');

Production:

Utilisez la balise <script> pour lier un JavaScript interne au HTML

Contrairement à la première méthode, nous ajoutons le code de JavaScript dans le fichier HTML à l’aide de la balise <script>. La balise <script> est utilisée pour ajouter un script côté client. Nous pouvons écrire le JavaScript en interne à l’intérieur de la balise <script> dans un fichier HTML. Lorsque nous exécutons le fichier HTML, nous verrons le JavaScript chargé.

Par exemple, écrivez le texte This is HTML dans la balise <p> en HTML. Ensuite, ouvrez la balise <script> et tapez le message This is written from JavaScript en utilisant document.write. Ensuite, fermez la balise de script.

Nous pouvons voir que les deux textes écrits en HTML et en JavaScript sont affichés dans la sortie ci-dessous. Cela prouve que le HTML et le JavaScript ont été liés.

Exemple:

<html>
    <head>
    </head>
    <body>
        <p> This is HTML </p>
    </body>
    <script>
        document.write("This is written from JavaScript");
    </script>
</html>

Production:

Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn