JavaScript – Intégration de JavaScript de façon inline ou externe

LEÇON

 

Un peu comme les instructions CSS, le code en Javascript peut être intégré directement dans le document HTML, ou inclus depuis un fichier externe.

 

Javascript intégré (inline Javascript)

Le code en JavaScript est présent dans le fichier HTML en tant que contenu de la balise <script> :

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display none</title>

<script type="text/javascript" language="JavaScript"><!--
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

    </head>
    <body>
        <h1>FAQ</h1>
        <h3><a href="javascript:ReverseDisplay('q1')">Quelle est la réponse à la grande question sur la vie, l'univers et le reste ?</a></h3>
        <div id="q1" style="display:none;"><p>42.</p></div>
        <h3><a href="javascript:ReverseDisplay('q2')">Quelle est la question ?</a></h3>
        <div id="q2" style="display:none;"><p>Quel est le produit de six par neuf ?</p></div>
    </body>
</html>

 

 

Javascript dans un fichier externe

Le code en JavaScript est présent dans un fichier à part (on utilise extension .js) et ce fichier est inclus dans le HTML via la balise <script>.

 

test.js

function ReverseDisplay(d)
{
  if(document.getElementById(d).style.display == "none")
  {
    document.getElementById(d).style.display = "block";
  }
  else {
    document.getElementById(d).style.display = "none";
  }
}

 

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Display none</title>
        <script type="text/javascript" language="JavaScript" src="test.js"></script>
    </head>
    <body>
        <h1>FAQ</h1>
        <h3><a href="javascript:ReverseDisplay('q1')">Quelle est la réponse à la grande question sur la vie, l'univers et le reste ?</a></h3>
        <div id="q1" style="display:none;"><p>42.</p></div>
        <h3><a href="javascript:ReverseDisplay('q2')">Quelle est la question ?</a></h3>
        <div id="q2" style="display:none;"><p>Quel est le produit de six par neuf ?</p></div>
    </body>
</html>

 

Remarque :

  • les règles de chemin relatif dans l'attribut src de la balise script sont identiques à celles pour les images (attribut src dans la balise img) ou pour l'inclusion des fichiers CSS externes (attribut href dans la balise link)

 

 


 

EXERCICES


  1. Recréer les 2 fichiers du 2ème exemple ci-dessus et ouvrir la page web dans un navigateur. Remarquer que le code en JavaScript est toujours accessible via le code source de la page !