Table des matières

Accueil JavaScript

Où intégrer le code JavaScript ?

[Mise à jour le 19/6/2021]

1. Dans une page HTML

<note>Le code JavaScript s'intègre au sein d'une page HTML avec les balises <script> et </script>. La balise <script> attend l'attribut type=“text/javascript”.</note>

Exemple : Hello World

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>
 
<body>
    <p id="hw"></p>
    <noscript>Le navigateur n'est pas configuré pour exécuter le JavaScript !</noscript>
    <script type="text/javascript">
        document.getElementById("hw").innerHTML="Hello World";
    </script>
</body>
 
</html>

<note important>Le code HTML placé entre les balises <noscript> et </noscript> est optionnel. Il s'affiche uniquement pour un navigateur non configuré pour exécuter le JavaScript.</note>

2. Dans un tag HTML

<note>Le JavaScript s'intègre également directement dans les balises HTML, le plus souvent dans les attributs dédiés à la gestion des évènements.</note>

Exemple 1 : on compte les clics sur un bouton !

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Compteur de clics</title>
</head>
 
<body>
    <button onclick="var compteur = 0; compteur = compteur + 1; console.log(compteur);">Cliquez-moi</button>
</body>
 
</html>

Exemple 2 : le compteur de l'exemple précédent est placé dans une fonction.

*.js
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Compteur de clics</title>
</head>
 
<body>
    Compteur : <span id="resultat">0</span>
    <br>
    <button onclick="compteur()">Cliquez-moi</button>
</body>
 
<script type="text/javascript">
    var cmpt = 0;
    function compteur() {
        cmpt += 1;
        document.getElementById("resultat").innerHTML = cmpt;
    }
</script>
 
</html>

3. Dans un fichier externe

<note>L'intégration de JavaScript dans un fichier externe est la méthode la plus utilisée.</note>

Exemple : la fonction compteur est placée dans un fichier script.js

*.js
var cmpt = 0;
function compteur() {
    cmpt = cmpt + 1;
    document.getElementById("resultat").innerHTML = cmpt;
}

Cette fonction est intégrée au code HTML avec l'attribut src de la balise <script>.

*.html
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>Compteur de clics</title>
</head>
 
<body>
    Compteur : <span id="resultat">0</span>
    <br>
    <button onclick="compteur()">Cliquez-moi</button>
</body>
 
<script type="text/javascript" src="scripts/script.js"></script>
 
</html>

<note tip>L'utilisation de l'extension .js n'est qu'une convention, non obligatoire. Elle permet cependant de forcer l'éditeur de code à appliquer la coloration syntaxique dédiée au JavaScript. </note>