Implantation

HTML5et JavaScript

Le langage JavaScript peut être intégré aux pages HTML de différentes façons :

  • dans la balise <script>

  • dans les attributs événementiels

  • dans des fichiers externes.

MéthodeBalise <script>

Les lignes de JavaScript peuvent être intégrées à l'intérieur d'une page écrite en HTML.

Le code JavaScript doit être encadré par la balise <script>

1
<html>
2
 ...
3
 <script>
4
  window.console.log("coucou !");
5
 </script>
6
 ...
7
</html>

Ajoutez un fichier interne.html sur votre éditeur de code et tapez le code suivant :

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8"/>
5
    <title>Exemple</title>
6
  </head>
7
  <body>
8
    <h1>Test JS dans balise script</h1>
9
    <script>
10
      window.console.log("ça fonctionne dans la balise script");
11
    </script>
12
  </body>
13
</html>

  • Ouvrez le fichier dans un navigateur.

  • Ouvrez la console.

MéthodeAttributs événementiels

Le code peut aussi se trouver à l'intérieur des balises dans un attribut événementiel.

1
<img alt="image" id="image" src="images/image.gif" onclick="window.console.log('coucou !')"/>

Ajoutez un fichier attribut.html :

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8"/>
5
    <title>Exemple</title>
6
  </head>
7
  <body>
8
    <h1 onclick="window.console.log('ça fonctionne dans un attribut événementiel')">
9
      Test JS dans un attribut événementiel
10
    </h1>
11
  </body>
12
</html>

  • Ouvrez le fichier dans un navigateur.

  • Ouvrez la console.

  • Cliquez sur le titre.

MéthodeFichier externe

Pour une meilleure lisibilité, de la même manière que les feuilles de styles, il est recommandé de placer le code JavaScript dans un fichier externe.

Il suffit de préciser le chemin dans la balise script.

1
<script src="js/exemple.js"></script>

avec le fichier js/exemple.js :

1
window.console.log("coucou !");

Ajoutez le fichier externe.html :

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8"/>
5
    <title>Exemple</title>
6
  </head>
7
  <body>
8
    <h1>Test JS dans fichier externe</h1>
9
    <script src="code.js"></script>
10
  </body>
11
</html>

Ajoutez un fichier code.js :

1
window.console.log('ça fonctionne dans un fichier externe');

  • Ouvrez le fichier html dans un navigateur.

  • Ouvrez la console.

Un fichier HTML peut faire appel à plusieurs fichiers JavaScript à l'aide de plusieurs balises script.