Comment ajouter JavaScript à HTML
Programmation JavaScript
28.01.2026
Reading time: 7 min
Share
Dans cet article, voyons comment ajouter JavaScript à HTML. Il existe trois façons de procéder :
-
Placer le code JS dans une balise <script>
-
Connecter un fichier externe
-
Écrire le code directement dans une balise HTML à l’aide d’attributs spéciaux
Examinons chaque méthode afin de comprendre ses avantages et ses inconvénients.
Insertion du code dans la balise <script>
La manière la plus simple d’insérer du code JS dans une page HTML consiste à utiliser la balise <script>. Elle indique au navigateur que tout son contenu doit être interprété comme un script exécutable, et non comme du texte ou du code HTML.
Par exemple, ajoutons un script qui affiche la date et l’heure actuelles :
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Date and Time</title>
</head>
<body>
<script>
let date = new Date();
alert("Now " + date);
</script>
</body>
</html>
Lorsque la page se charge, une notification contenant la date et l’heure actuelles apparaît.
Vous pouvez écrire un programme entier dans la balise <script>. À titre d’exemple, créons une horloge électronique :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script>
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
</script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>
Parfait ! Vous avez utilisé JavaScript pour ajouter l’heure actuelle à un élément HTML, qui se met à jour chaque seconde.
Les commentaires expliquent en détail le fonctionnement du script. Il trouve l’élément avec id="clock" dans la balise <div> située juste sous l’en-tête. Ensuite, il récupère l’heure actuelle, l’affiche dès le chargement du document et la met à jour chaque seconde.
Cela semble pratique, mais cette approche présente quelques inconvénients. Imaginez que vous souhaitiez afficher l’heure sur toutes les pages du site. Dans ce cas, vous devrez dupliquer le contenu de la balise <script>.
Un autre problème est que plus le script est long, plus la lisibilité du code diminue. Dans l’exemple ci-dessus, il n’y a qu’une seule fonction. Mais si vous en avez 5, 10 ou 20, il est plus pratique d’utiliser l’approche suivante : connecter le code JS depuis des fichiers externes.
Connexion de fichiers externes
La balise <script> peut également être utilisée pour connecter JavaScript à partir de fichiers externes via l’attribut src. Il peut s’agir d’un fichier que vous avez créé ou d’une bibliothèque JS qui ajoute des fonctionnalités à la page.
Par exemple, déplaçons le script de l’horloge dans un fichier séparé :
# Time.js file
function displayTime() {
let element = document.getElementById("clock"); // Find element with id="clock"
let now = new Date(); // Get current time
element.innerHTML = now.toLocaleTimeString(); // Display time
setTimeout(displayTime, 1000); // Call the function every second
}
window.onload = displayTime; // Start displaying the time after the document is loaded
Nous pouvons supprimer tout le JavaScript du fichier HTML et ne laisser que la référence au fichier externe :
#File time.html
<html>
<head>
<meta charset="utf-8">
<title>Electronic Clock</title>
<script src="./time.js"></script>
</head>
<body>
<h1>Electronic Clock</h1>.
<div id="clock"></div>
</body>
</html>.
Le résultat est identique : vous avez ajouté l’heure actuelle au <div> à l’aide de JavaScript.
Cette approche présente plusieurs avantages :
-
Les fichiers HTML deviennent plus simples
-
Tout le code JS peut être regroupé dans un seul fichier
-
Si plusieurs pages utilisent le même script, il sera chargé une seule fois puis réutilisé depuis le cache du navigateur
JavaScript dans les balises HTML
Vous pouvez placer du JavaScript directement dans une balise HTML à l’aide d’attributs spéciaux comme onclick, onmouseover, onkeypress, onload, etc.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>JavaScript inside an HTML tag</title>
</head>
<body>
<button onclick="alert('Hi! This is how JS works too')">Click me</button>
<button onmouseover="alert('This works too')">Hover over me</button>
</body>
</html>.
En cliquant sur le premier bouton, une notification apparaît. En passant la souris sur le second, un autre message s’affiche.
Vous pouvez également ajouter plusieurs gestionnaires d’événements à une même balise :
<button onclick="alert('Hi! This is how JS works too')" ; onmouseover="alert('This works too')">Click me</button>
Cependant, il s’agit d’une mauvaise pratique. La plupart des développeurs préfèrent séparer le contenu et la logique. De plus, comme vous pouvez le constater, l’utilisation de gestionnaires directement dans le HTML nuit fortement à la lisibilité du code.
Où placer les scripts
Techniquement, il n’y a aucune restriction concernant l’emplacement de la balise <script>. Vous pouvez ajouter JavaScript dans le <head> ou le <body>, au début ou à la fin du document.
Cependant, les scripts sont généralement placés à la fin du corps, juste avant la balise </body>. Cela accélère le chargement de la page : les utilisateurs voient le contenu plus rapidement.
Chaque balise <script> bloque le rendu de la page jusqu’à ce que le JavaScript soit entièrement chargé et exécuté. Les fichiers externes (et parfois des bibliothèques entières) peuvent être assez lourds. Avec une connexion rapide, la pause est minime. Mais avec une mauvaise couverture réseau, l’utilisateur peut constater que le site reste vide pendant longtemps.
Vous ne devriez placer les scripts dans le <head> que si cela est absolument nécessaire. Sinon, pour de meilleures performances, il est préférable d’ajouter JavaScript à la fin du document, juste avant la balise fermante </body>.
Programmation JavaScript
28.01.2026
Reading time: 7 min
Share
Similaire
Avez-vous des questions,
des commentaires ou
des préoccupations ?
Nos professionnels sont disponibles pour vous aider à tout moment,
que vous ayez besoin d'aide ou que vous ne sachiez pas par où commencer.
que vous ayez besoin d'aide ou que vous ne sachiez pas par où commencer.
