JS et html

Le Javascript (JS) est utilisé à l'intérieur d'une page html pour en manipuler le contenu.

Le navigateur reçoit la page html. Cette page fait référence à un contenu JS.
Le contenu JS est éventuellement exécuté de qui a un effet sur la page.
Quand on agit sur la page – clic, mouvements du curseur de souris… – le navigateur le signal au script JS qui, s'il a été programmé pour, réagit.

Donc nous devons envisager le JS intégré dans une page html ou dans un fichier joint à une page html.

J'utilise JsFiddle pour visualiser les résultats. JsFiddle propose une interface montrant simultanément les contenus html, css et javascript, ainsi que la page web résultante. On peut ainsi simuler et visualiser l'effet d'un changement dans l'un ou l'autre fichier.

JS dans une balise html

C'est le premier niveau que vous pouvez visualiser dans JsFiddle.

Vous pouvez voir un ensemble formé de deux fichiers :

la page html,
le fichier de styles css.

Le CSS n'a pas beaucoup d'importance ici. Concentrons-nous sur le html.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS dans les balises</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p>Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.</p>
    <div class="carre rouge" onclick="alert('Interdiction d\'appuyer sur le bouton rouge !');"></div>
    <div class="carre vert"></div>
    <div class="carre bleu"></div>
    <p><b>Remarque :</b> ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.</p>
  </body>
</html>

En ligne 10, on crée le bloc <div> pour le carré rouge. Ce bloc a un attribut onclick qui dit ce qu'il faut faire si l'élément est cliqué. onclick est associé à un code JS.

Si on clique l'élément, le code JS est exécuté.

Problème : On peut pas écrire beaucoup de JS de cette façon. Et puis ce n'est pas une bonne idée de mélanger le contenu et la forme. Si on fait cela, on aura un gros fichier avec, tout mélangé, des morceaux de textes correspondant à ce que l'on voulait afficher dans la page et des morceaux de code JS. N'oubliez pas que dans un site web, la personne qui écrit le contenu des pages – les articles d'un journal par exemple – n'est pas la même que celle qui écrit les morceaux de code JS pour rendre le site plus agréable à l’œil.

Javascript dans un bloc à part

On a la possibilité d'écrire le code nécessaire dans un bloc à part ce qui constituera une première séparation entre le code et le contenu de la page. Pour cela, je vous donne l'exemple d'une fonction qui compte le nombre de clics sur le carré rouge et l'affiche en console.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS dans le head</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script language="javascript">
      let nombreClicks = 0;
      function addMessage(){
          nombreClicks++;
          console.log(nombreClicks);
      }
    </script>
  </head>
  <body>
    <p>Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.</p>
    <div class="carre rouge" onclick='addMessage();'></div>
    <div class="carre vert"></div>
    <div class="carre bleu"></div>
    <p><b>Remarque :</b> ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.</p>
  </body>
</html>

Voir dans JsFiddle.

Remarquez, lignes 7 à 13, l'apparition d'un bloc <script> contenant un code JS qui définit une fonction addMessage. Cette fonction est utilisée pour la propriété onclick du carré rouge, en ligne 17.

Script dans un fichier à part

Au lieu placer le code JS dans la balise <script>, on le place dans un fichier à part :

// fichier script.js
let nombreClicks = 0;
function addMessage(){
  nombreClicks++;
  console.log(nombreClicks);
}

Et le html devient :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS dans le head</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script language="javascript" src="script.js"></script>
  </head>
  <body>
    <p>Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.</p>
    <div class="carre rouge" onclick='addMessage();'></div>
    <div class="carre vert"></div>
    <div class="carre bleu"></div>
    <p><b>Remarque :</b> ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.</p>
  </body>
</html>

Voir dans JsFiddle.

Le bloc <script> a été remplacé, en ligne 7, par une simple référence au fichier script.js.
Le fichier script.js contient le code JS nécéssaire.

Supprimer tout script du html

Nous ne sommes pas encore pleinement satisfaits : nous sommes encore obligés de laisser un élément de JS auprès de la balise <div> en ligne 11. Nous souhaitons épurer presque entièrement le html de tout script.

Pour l'instant, pour dire que le carré rouge réagissait au clic, nous l'écrivions au moment de créer le carré rouge dans le html. Puisque nous ne souhaitons plus faire cela, voici une nouvelle approche :

dans un premier temps, le carré rouge est créé sans aucun JS. Il est donc insensible au clic ;
dans un script JS qui doit s'exécuter après la création du carré rouge, on demande à mettre la main sur ce carré afin de le faire réagir aux clics.
Pour cela, JS doit être en mesure d'atteindre les éléments constituant la page.

La structure en mémoire qui représente la page est appelée le DOM – Document Object Model. Le DOM est constitué en forme d'arbre. On peut parcourir les différents éléments de la page en descendant une arborescence. Si on veut atteindre directement un élément de la page, il est possible de le doter d'un identifiant.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS dans le head</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p>Cette page ne contient que 3 carrés. On veut qu'il se passe quelque chose quand on appuie sur un des carrés. Dans le code html vous pouvez constater que le carré rouge est associé à une commande en Javascript. Il suffit d'ajouter la même commande pour les 2 autres.</p>
    <div class="carre rouge" id="rouge"></div>
    <div class="carre vert"></div>
    <div class="carre bleu"></div>
    <p><b>Remarque :</b> ce sont les styles définis dans le fichier CSS qui nous permettent d'afficher ainsi ces carrés.</p>
  </body>
  <script language="javascript" src="script.js"></script>
</html>

Maintenant le script est déclaré à la fin, en ligne 15.
En ligne 10, il n'y a plus de JS. En revanche, on a ajouté un identifiant id = "rouge" au bloc qui nous intéresse.

// fichier script.js
let nombreClicks = 0;
function addMessage(){
  nombreClicks++;
  console.log(nombreClicks);
}

noeud = document.getElementById("rouge");
noeud.addEventListener("click", addMessage);

En ligne 8, document désigne la racine du DOM. getElementById permet d'atteindre l'élément du DOM désigné par l'id demandé.
En ligne 9, on attache un événement clic au bloc désigné par noeud.

Voir dans JsFiddle.