Le langage client JavaScript

Objectifs

  • Comprendre comme une page web réagit aux événements ;

  • Comprendre le concept de communication asynchrone.

Mise en situation

Aujourd'hui les pages web sont souvent utilisées pour interagir avec les utilisateurs. Par exemple en consultant un blog, on sera amené à trier les articles, faire une recherche, ou encore afficher une image en plein écran.

HTML et CSS sont des langages déclaratifs assez simples qui n'ont pas prévu tous les types de présentation, et encore moins d'interaction.

Aussi il est nécessaire de mobiliser un langage de programmation complet, au sein même du navigateur, pour pouvoir faire tout ce qui n'est pas prévu. Il s'agit du JavaScript.

JavaScript permet par exemple de changer l'ordre d'un résultat de recherche, en le triant par date ou par pertinence.

DéfinitionJavaScript

Un troisième langage vient compléter HTML et CSS pour permettre la programmation des interactions avec l'utilisateur : JavaScript.

JavaScript est un langage de programmation exécuté directement par le navigateur web (côté client).

ExempleHello World

Le code suivant crée un titre interactif, qui affiche le texte « Hello World » dans une fenêtre pop-up lors d'un clic.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
  </head>
7
  <body>
8
    <h1><em style="cursor: pointer" onclick="handleClick()">Cliquer</em> pour dire bonjour</h1>
9
    <script>
10
      function handleClick(){
11
        alert("Hello World");
12
      }
13
    </script>
14
  </body>
15
</html>

On peut intégrer du code JavaScript à une page de deux manières, grâce à la balise <script> :

  • Soit en l'écrivant directement entre les balises.

  • Soit en l'important depuis un fichier, dont l'extension est généralement .js.

ExempleHello World v2

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
  </head>
7
  <body>
8
    <h1><em style="cursor: pointer" onclick="handleClick()">Clique</em> pour dire bonjour</h1>
9
    <script src="script.js"></script>
10
  </body>
11
</html>
1
function handleClick(){
2
    alert("Hello World");
3
}

FondamentalÉvénements

Le premier intérêt du JavaScript dans une page HTML est la gestion des événements : clic, survol du curseur, déroulement de la page, écriture dans un champ, raccourcis clavier, etc.

Ces actions de l'utilisateur sont des événements auxquels il est possible d'associer des actions.

ExempleÉvénements

Ce code gère deux événements : le clic de la souris sur le paragraphe et l'appui d'une touche sur le clavier. Pour chacun de ces événements, un message différent est affiché.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Exercice</title>
6
  </head>
7
  <body onkeypress="handleKey()">
8
    <p onmouseover="handleMouse()">
9
      Je souhaite interagir avec toi.
10
    <p>
11
    <script src="script.js"></script>
12
  </body>
13
</html>
1
function handleMouse(){
2
    alert("Je suis là...");
3
}
4
function handleKey(){
5
    alert("Hey ! pas avec le clavier !");
6
}

MéthodeManipuler la page HTML avec le DOM

Avec JavaScript, la structure de la page est représentée par un arbre appelé DOM (pour Document Object Model), qui décrit la hiérarchie des balises au sein du document.

Représentation d'un document HTML sous forme d'arbreInformations[1]

JavaScript fournit des utilitaires pour manipuler les éléments du DOM. Par exemple, la méthode document.getElementsByTagName("h1") renvoie l'ensemble des titres de type <h1>, que l'on peut lire ou modifier.

ExempleManipulation d'éléments avec JavaScript

Le code suivant opère deux traitement sur les éléments de titre <h1> initialement présents dans la page.

  • Le premier traitement change la couleur du premier titre et le centre.

  • Le deuxième traitement supprime le deuxième titre.

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>Transformation</title>
6
  </head>
7
  <body>
8
    <h1>Phrase mise en couleur avec du javascript</h1>
9
    <h1>Phrase inutile</h1>
10
    <script>
11
      // récupère la première balise h1 de la page
12
      const h1a = document.getElementsByTagName("h1")[0];             
13
      h1a.style.color = "red"; 
14
      h1a.style.textAlign = "center";
15
      // récupère la seconde balise h1 de la page
16
      const h1b = document.getElementsByTagName("h1")[1];             
17
      document.body.removeChild(h1b);
18
    </script>
19
  </body>
20
</html>

ComplémentRequêtes et asynchronisme

Un autre intérêt de JavaScript est de savoir effectuer des requêtes, par exemple pour récupérer et afficher les ingrédients d'une recette de cuisine sur le serveur lors du clic sur un bouton « Voir plus ».

Le concept de requête est lié avec celui d'asynchronisme : au lieu de bloquer le rendu de l'ensemble de la page en attendant que les ingrédients soient récupérés depuis le serveur, le rendu continue et l'utilisateur peut toujours interagir avec la page.

Lorsque la requête termine, une action définie à l'avance appelée callback est déclenchée.

On retrouve le concept d'événement : une requête qui termine est un événement au même titre que l'appui d'une touche sur le clavier.

ComplémentFrameworks JavaScript

Les applications web sont aujourd'hui souvent développées à l'aide de frameworks, ou cadriciels. Ils mettent à disposition un ensemble d'outils et de ressources accélérant le développement web.

On pourra citer :

  • Vue.js

  • React

  • Angular

À retenir

Le JavaScript permet de modifier des éléments d'une page web et de réagir à des événements, tels que le clic sur un bouton ou la réception de données demandées au serveur.

Stéphane Crozat, Jinane Ben Salem, Quentin Duchemin Paternité - Partage des Conditions Initiales à l'Identique