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 exemple.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 !')"/>

Modifiez votre fichier exemple.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 !");

Modifiez votre fichier exemple.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="exemple.js"></script>
10
  </body>
11
</html>

Ajoutez un fichier exemple.js :

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

  • Ouvrez le fichier html dans un navigateur.

  • Ouvrez la console.

Le nom du fichier JavaScript ne doit pas forcément être le même que celui du fichier HTML.

Un fichier HTML peut faire appel à plusieurs fichiers JavaScript.