Aller au contenu

Introduction au Javascript : balise <script>

Rappel vu à la semaine 1 du cours :

Les langages web vus dans le cours d'Interfaces web sont la base du monde du développement web :

Ces langages sont:

  • Le HTML, pour définir le contenu (titre, paragraphe, image, etc.)
  • Le CSS, pour définir l'apparence (couleurs, mise en page, tailles, etc.)
  • Le Javascript, pour définir des actions / interactions et du dynamisme (animation, calculs, réactivité, etc.)

Différence entre langages

🔗 Lier un fichier JavaScript au HTML

  • La balise <script> permet d’intégrer ou de référencer un script.

  • La bonne pratique est de placer le script à la fin du <body>

  • On recommande aussi d’utiliser les attributs async ou defer pour contrôler le moment d’exécution

  • L'attribut src permet d'indiquer où se trouve le script à lier

Exemple recommandé :

<!-- Tout le contenu HTML avant -->
        <script src="scripts/monScript.js" defer></script>
    </body>
</html>

⚠️ 👉 En 2025, on privilégie les fichiers externes .js pour séparer contenu (HTML), style (CSS) et logique (JS).

async ou defer

En plus de placer la balise script au bas du HTML, il existe deux attributs à utiliser dans la balise pour s'assurer du bon fonctionnement de notre site qui utilise des scripts :

  • Async : chargement asynchrone, exécution immédiate
  • Defer : chargement asynchrone, exécution différée

Script

Ainsi, la différence se trouve au moment où le script est exécuté.

  • Si le script peut s'exécuter de façon indépendante, alors async est recommandé

  • Sinon, l'option defer est préconisée pour les cas où :

    • le script nécessite l'accès aux éléments de la page
    • on appelle plusieurs scripts et ils doivent s'exécuter dans l'ordre

Comment l'écrire :

<script src="scripts/monScript.js" async>

Ou encore :

<script src="scripts/monScript.js" defer>