Où et comment insérer du JavaScript ?

Où et comment insérer du JavaScript ?

  1. Objectif

    • Etre capable d’insérer un script JavaScript dans une page HTML
  2. Introduction

    • Pour placer des instructions JavaScript dans une page HTML, il faut utiliser la balise <script> de la manière suivante :
    • <script language="JavaScript"> 
      .....
      instructions javascript
      .....
      </script>
      
    • Il existe deux manières d’insérer du code JavaScript dans une page HTML à savoir par l’insertion dans une page HTML ou par appel de module externe
    • Bien que cette dernière méthode soit généralement recommandée, notamment pour des gros projets, parfois vous serez « obligé » d’écrire votre code JavaScript dans votre fichier HTML.

      Pour cette raison, nous allons étudier chacun de ces trois cas dans cette partie.




  3. Insertion dans une page HTML

    1. Dans l’élément head
      • Pour mettre le JavaScript entre les balises <head> il faut le placer à l’intérieur d’un élément script.
      • <!doctype html>
        <html>
        <head>
        <title>JavaScript</title>
        <script language="JavaScript">
              alert("bonjour");
        </script> 
        </head>
        <body>
        </body>
        </html>
        

        Traditionnellement il était d’usage de placer la balise <script> entre les tags <head> et , cependant il est actuellement recommandé de la placer en fin de document juste avant </body> pour ne pas bloquer le chargement de la page, et exécuter les scripts uniquement lorsque le DOM est prêt.

      • Le code s’exécute automatiquement lors du chargement de la page HTML dans le navigateur en même temps que le contenu de la page HTML s’affiche à l’écran.
    2. Dans l’élément head d’une page HTML
      • Le code JavaScript est placé dans le corps même de la page HTML, entre les balises <body> ………. Et ……… </body> et de préférence le placer à la fin de la page.
      • 
         <!doctype html>
        <html> 
        <head>
        <title>..... </title>
        </head>
        <body> 
        <script language="JavaScript">
        alert(‘bonjour’);
        </script> 
        </body>
        </html> 
        
    3. Dans une balise HTML
      • Dans une balise si le script n’est pas trop long…
      • Bonjour
        donne le lien Bonjour !

  4. Insertion par appel de module externe

    1. Dans un fichier séparé de type «.js »
      • Il est possible de mettre les instructions JavaScript dans un document séparé dont l’extension est “.js”
      • La balise <script> doit être vide, et l’url du document javascript doit être mentionnée dans l’attribut src (url absolue ou url relative)
      • Ce document “.js” ne peut contenir que du Javascript (pas de balises html, ni de balises <script>)
      • L’avantage est que le code peut être partagé par plusieurs pages html et peut bénéficier de la mise en cache du document Javascript
    2. Une adresse Web
      • On peut insérer du code JavaScript en faisant appel à un module externe se trouvant à n’importe quelle adresse (URL).
      • <script src="URL du module externe"> 
              ............ 
        </script>
        
      • Les deux balises de Javascript doivent être placés entre les Tags et dans le cas d’une exécution directe ou entre les Tags <head> et </head> de la page HTML pour une exécution différée.
      • Stocké dans un fichier sur le serveur à son adresse d’appel sous forme de TEXTE SIMPLE portant l’extension .txt ou .js
      • Simplifie la maintenance des sites faisant appel à des modules JavaScript communs à plusieurs pages HTML.
      • Inconvénient : l’appel au code externe génère une requête supplémentaire vers le serveur, et encombre le réseau



Abonnez vous à notre chaîne YouTube gratuitement