L'Atelier du Web

Intégrer JS à ton site

Guides prérequis

Jusqu’à présent, tu as écrit du code JavaScript dans des exercices interactifs. Maintenant, voyons comment intégrer JavaScript à tes propres pages web.

La balise <script>

Pour écrire du JavaScript au sein d’un fichier HTML, tu peux l’englober dans une balise <script>.

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <button id="my-button">Clique ici</button>


    <script>
      const button = document.getElementById("my-button")
      button.addEventListener("click", () => {
        alert("Tu as cliqué !")
      })
    </script>
  </body>
</html>

Dans cet exemple, la balise <script> est placée juste avant la fermeture de </body>. Cette position est importante : le script s’exécute après que le HTML soit chargé, ce qui permet d’accéder aux éléments de la page.

JavaScript externe

Pour garder ton code organisé, tu peux créer un fichier .js séparé et le charger dans ta page :

script.js
const button = document.getElementById("my-button")
button.addEventListener("click", () => {
  alert("Tu as cliqué !")
})
index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Ma page</title>
  </head>
  <body>
    <h1>Bonjour !</h1>
    <button id="my-button">Clique ici</button>


    <script src="script.js"></script>
  </body>
</html>

Cette méthode est préférable car elle sépare le contenu (HTML) de la logique (JavaScript), ce qui rend ton code plus facile à relire.

L’attribut defer

Une bonne pratique consiste à placer la balise <script> dans le <head> et d’ajouter l’attribut defer. Cela indique au navigateur de charger le script en arrière-plan, sans bloquer le rendu de la page, et de l’exécuter seulement une fois que tout le HTML est prêt.

index.html
<!DOCTYPE html>
<html>
  <head>
    <script src="script.js" defer></script>
    <title>Ma page</title>
  </head>
  <body>
    <h1>Bonjour !</h1>
    <button id="my-button">Clique ici</button>
  </body>
</html>

Pour aller plus loin

Félicitations ! Tu as maintenant les bases pour créer des sites interactifs avec JavaScript. Voici quelques pistes pour continuer ton apprentissage :

  • Frameworks JavaScript : Vue.js, React ou Svelte pour créer des applications web complexes
  • TypeScript : une version améliorée de JavaScript avec des types pour éviter les erreurs
  • Node.js : pour utiliser JavaScript côté serveur

Au fait, un dernier truc ! Lorsque tu souhaites donner un surnom à JavaScript, évite de l’appeler « Java » et dis plutôt « JS ». En effet, Java est le nom d’un langage de programmation qui est complètement différent de JavaScript, alors cela porterait à confusion ! 😊

Bonjour ! Je suis un assistant IA qui peut te donner des conseils pour réussir les exercices et améliorer ton code. Utilise le bouton « J'ai besoin d'aide » pour m'appeler !