Aller au contenu principal

Le JavaScript

Le JavaScript est le langage de programmation au coeur des interactions des pages web. Le JavaScript, à travers le DOM, va permettre la modification :

  • De la structure (ajouter ou supprimer des éléments) ;
  • Du contenu (texte ou attributs) ;
  • Du style (CSS) des éléments.

DOM​

DOM (Document Object Model) est une interface de programmation qui permet aux scripts comme JavaScript d’interagir avec le contenu HTML/CSS d’une page web.
Il représente la structure de la page web de façon hiérarchique, où chaque élément HTML peut contenir d'autres éléments HTML.

Exemple d'un DOM simplifié :

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple DOM</title>
  </head>
  <body>
    <h1 id="titre">Bienvenue</h1>
    <p class="description">Ceci est une description.</p>
  </body>
</html>

Récupérer des éléments​

Pour manipuler la structure et les éléments de la page, le JavaSCript permet de récupérer des éléments grâce à des fonctions spécifiques.

document.getElementById​

Cette méthode sélectionne un élément en fonction de son attribut id :

var titre = document.getElementById("titre");
console.log(titre.textContent); // Affiche : Bienvenue

document.getElementsByClassName​

Cette méthode retourne une collection d'éléments ayant une certaine classe :

var descriptions = document.getElementsByClassName("description");
console.log(descriptions[0].textContent); // Affiche : Ceci est une description.

document.getElementsByTagName​

Cette méthode retourne une collection d'éléments avec un certain nom de balise (tag) :

var paragraphs = document.getElementsByTagName("p");
console.log(paragraphs[0].textContent); // Affiche : Ceci est une description.

Alternative moderne : querySelector et querySelectorAll​

Ces méthodes permettent une sélection plus flexible avec des sélecteurs CSS :

var titre = document.querySelector("#titre"); // Par ID
var description = document.querySelector(".description"); // Par classe
var allParagraphs = document.querySelectorAll("p"); // Tous les <p>

Événements​

Les événements sont des interactions utilisateur, ou des actions système, qui peuvent être écoutés par JavaScript (clic, survol, saisie, etc.).
Ils permettent de rendre une page interactive.

Sur les balises​

Chaque élément d'une page web peut disposer d'un attribut correspondant à un type d'événement, exécutant ainsi du code, des fonctions ... Nous utiliserons principalement ces événements :

  • onchange : pour un élément qui change ;
  • onclick : lors d'un clic sur un élément ;
  • onmouseover : lors du survol de la souris sur un élément ;
  • onmouseout : lorsque la souris sort d'un élément ;
  • onkeydown : lors de l'appui sur une touche ;
  • onload : lors du chargement de la page.

Exemple d'utilisation 1 :

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple DOM</title>
  </head>
  <body>
    <h1 id="titre" onclick="console.log('test')">Bienvenue</h1>
    <p class="description">Ceci est une description.</p>
  </body>
</html>

Ici, lors d'un clic sur le titre de niveau h1, un événement est exécuté, et va afficher dans la console du navigateur "test".

Exemple d'utilisation 2 :

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple DOM</title>
  </head>
  <body>
    <h1 id="titre" onclick="fonction1()">Bienvenue</h1>
    <p class="description">Ceci est une description.</p>
    <script>
        function fonction1(){
            var titre = document.getElementById('titre');
            titre.style.color = 'red';
        }
    </script>
  </body>
</html>

Ici, lors d'un clic sur le titre de niveau h1, on exécute la fonction fonction1(). Dans la balise script, la fonction va :

  • Récupérer la balise dont l'identifiant est titre ;
  • Changer la couleur de cette balise en rouge.

Écoute d'événements​

La méthode addEventListener attache un gestionnaire d'événements à un élément, autrement dit : on crée une écoute d'événement sur une balise : Fichier HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Exemple DOM</title>
  </head>
  <body>
    <h1 id="titre">Bienvenue</h1>
    <p class="description">Ceci est une description.</p>
    <script src="./script.js"></script>
  </body>
</html>

Fichier JS

var titre = document.getElementById('titre');
titre.addEventListener('click', ()=>{
    titre.style.color = 'red';
});

Ici, il existe une séparation entre le fichier HTML et le fichier JS. Le fichier JS contient l'ensemble des événéments à ajouter sur les différents éléments de la page.
Comme pour le CSS, l'avantage de ce procédé est de pouvoir réutiliser le code sur différentes pages.

Dans le fichier JS, on récupère la balise titre par son identifiant, puis on lui ajoute une écoute d'événement de type click. Dans les accolades, on écrit ainsi ce que l'on souhaite effectuer comme modification.