GoupillWiki

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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.

<WRAP tip>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.</WRAP>

===== JS dans une balise html =====

C'est le premier niveau que vous pouvez visualiser dans [[https://jsfiddle.net/gromax/ce1tywpo/4/|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.

<code html linenums>
<!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>
</code>

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é.

<WRAP box>**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.</WRAP>

===== 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.

<code html linenums>
<!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>
</code>

Voir dans [[https://jsfiddle.net/gromax/knsf9ed8/12/|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 :

<code javascript linenums>
// fichier script.js
let nombreClicks = 0;
function addMessage(){
  nombreClicks++;
  console.log(nombreClicks);
}
</code>

Et le html devient :

<code html linenums>
<!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>
</code>

Voir dans [[https://jsfiddle.net/gromax/s9nq2maL/4/|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.

<WRAP info>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.</WRAP>

<code html linenums>
<!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>
</code>

  * 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.

<code javascript linenums>
// fichier script.js
let nombreClicks = 0;
function addMessage(){
  nombreClicks++;
  console.log(nombreClicks);
}

noeud = document.getElementById("rouge");
noeud.addEventListener("click", addMessage);
</code>

  * 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 [[https://jsfiddle.net/gromax/690sum8f/3/|JsFiddle]].