TOC

Comment ajouter du JavaScript au HTML

introduction

JavaScript, également abrégé en JS, est un langage de programmation utilisé dans le développement Web. En tant que technologie de base du Web aux côtés du HTML et du CSS, JavaScript est utilisé pour rendre les pages Web interactives et pour créer des applications Web. Les navigateurs Web modernes, qui respectent les normes d'affichage communes, prennent en charge JavaScript via des moteurs intégrés sans qu'il soit nécessaire de recourir à des plug-ins supplémentaires.

Lorsque vous travaillez avec des fichiers sur le Web, JavaScript doit être chargé et exécuté en même temps que le balisage HTML. Cela peut être fait soit en ligne dans un document HTML, soit dans un fichier séparé que le navigateur téléchargera à côté du document HTML.

Ce didacticiel explique comment incorporer du JavaScript dans vos fichiers Web, à la fois en ligne dans un document HTML et en tant que fichier séparé.

Ajout de JavaScript dans un document HTML

Vous pouvez ajouter du code JavaScript dans un document HTML en utilisant la balise HTML dédiée<script> qui entoure le code JavaScript.

La balise<script> peut être placée dans la section<head> de votre HTML, dans la section<body>, ou après la balise de fermeture</body>, selon le moment où vous voulez que JavaScript charge.

Généralement, le code JavaScript peut aller à l'intérieur de la section du document<head> afin de les garder contenus et hors du contenu principal de votre document HTML.

Cependant, si votre script doit s'exécuter à un certain point dans la mise en page d'une page - comme lorsque vous utilisezdocument.write pour générer du contenu - vous devez le placer à l'endroit où il doit être appelé, généralement dans les<body> section.

Prenons le document HTML vierge suivant avec un titre de navigateur deToday's Date:

index.html





    
    
    Today's Date

Pour le moment, ce fichier ne contient que du balisage HTML. Disons que nous aimerions ajouter le code JavaScript suivant au document: 

let d = new Date();
alert("Today's date is " + d);

Cela permettra à la page Web d'afficher une alerte avec la date du jour, quel que soit le moment où l'utilisateur charge le site.

Pour ce faire, nous allons ajouter une balise<script> avec du code JavaScript dans le fichier HTML.

Pour commencer, nous allons ajouter le code JavaScript entre les balises<head>, signalant au navigateur d'exécuter le script JavaScript avant de le charger dans le reste de la page. Nous pouvons ajouter le JavaScript sous les balises<title>, par exemple, comme indiqué ci-dessous:

index.html





    
    
    Today's Date

Une fois la page chargée, vous recevrez une alerte qui ressemblera à ceci:

JavaScript Alert Example

Vous pouvez également essayer de placer le script à l'intérieur ou à l'extérieur des balises<body> et recharger la page. Comme il ne s'agit pas d'un document HTML robuste, vous ne remarquerez probablement aucune différence dans le chargement de la page.

Si nous modifions ce qui est affiché dans le corps du HTML, nous aurions besoin de l'implémenter après la section<head> pour qu'elle s'affiche sur la page, comme dans l'exemple ci-dessous:

index.html





    
    
    Today's Date

La sortie du document HTML ci-dessus chargé via un navigateur Web ressemblerait à ce qui suit:

JavaScript Date Example

Les scripts qui sont petits ou qui ne fonctionnent que sur une seule page peuvent fonctionner correctement dans un fichier HTML, mais pour les scripts plus volumineux ou qui seront utilisés sur plusieurs pages, ce n'est pas une solution très efficace car l'inclure peut devenir lourd ou difficile à lire et comprend. Dans la section suivante, nous verrons comment gérer un fichier JavaScript séparé dans votre document HTML.

Travailler avec un fichier JavaScript séparé

Afin de prendre en charge des scripts ou des scripts plus volumineux qui seront utilisés sur plusieurs pages, le code JavaScript réside généralement dans un ou plusieurs fichiersjs référencés dans des documents HTML, de la même manière que les actifs externes tels que CSS sont référencés.

L'utilisation d'un fichier JavaScript distinct présente les avantages suivants:

  • Séparer le balisage HTML et le code JavaScript pour les rendre plus simples

  • La séparation des fichiers facilite la maintenance

  • Lorsque les fichiers JavaScript sont mis en cache, les pages se chargent plus rapidement.

Pour montrer comment connecter un document JavaScript à un document HTML, créons un petit projet Web. Il sera composé descript.js dans le répertoirejs/, destyle.css dans le répertoirecss/ et d'unindex.html principal à la racine du projet. 

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

Nous pouvons commencer avec notre modèle HTML précédent de la section ci-dessus:

index.html





    
    
    Today's Date

Maintenant, déplaçons notre code JavaScript qui affichera la date sous forme d'en-tête<h1> vers le fichierscript.js:

script.js

let d = new Date();
document.body.innerHTML = "
Today's date is " + d + "
"

Nous pouvons ajouter une référence à ce script à ou en dessous de la section<body>, avec la ligne de code suivante:

La balise<script> pointe vers le fichierscript.js dans le répertoirejs/ de notre projet Web.

Regardons cette ligne dans le contexte de notre fichier HTML, dans ce cas, sous la section<body>:

index.html





    
    
    Today's Date

Enfin, modifions également le fichierstyle.css en ajoutant une couleur et un style d’arrière-plan à l’en-tête<h1>:

style.css

body {
    background-color: #0080ff;
}

h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

Nous pouvons référencer ce fichier CSS dans la section<head> de notre document HTML:

index.html





    
    
    Today's Date

Maintenant, avec le JavaScript et le CSS en place, nous pouvons charger la pageindex.html dans le navigateur Web de notre choix. Nous devrions voir une page qui ressemble à la suivante:

JavaScript Date with CSS Example

Maintenant que nous avons placé le code JavaScript dans un fichier, nous pouvons l'appeler de la même manière à partir de pages Web supplémentaires et les mettre à jour tous à un emplacement unique.

Conclusion

Ce didacticiel explique comment incorporer JavaScript dans vos fichiers Web, à la fois en ligne dans un document HTML et en tant que fichier.js distinct.

De là, vous pouvez apprendre à travailler avec lesJavaScript Developer Console ethow to write comments in JavaScript.

Related