Comment fonctionne l’interactivité des pages web ?

JavaScript est le langage de programmation prédominant sur le web. Il a été initialement conçu pour rendre les pages web interactives. Avec lui, on peut manipuler les éléments d’une page HTML, modifier leurs attributs, changer leur style… Des éléments peuvent être ajoutés et même supprimés à la volée. On peut aussi réagir aux actions de l’internaute comme le sont les déplacements ou les clics de souris. C’est précisément ce dernier point qui sera abordé ici.

Où sera exécuté notre code?

Les navigateurs ont ce que l’on appelle un engin pour exécuter le code JavaScript. Dans les navigateurs Firefox et Chrome, les engins pour rouler JavaScript sont respectivement Spidermonkey et V8. Pour les besoins de cet article, nous allons utiliser Google Chrome. Aussi, c’est dans V8 que notre code sera exécuté.

Préparer l’environnement de travail

Pour écrire du code JavaScript, on utilise un éditeur de texte. Habituellement, je recommande l’éditeur Visual Studio Code, qui peut être téléchargé gratuitement du site https://code.visualstudio.com/. Cependant, aujourd’hui, nous allons aller au plus simple. Pour essayer les exemples de cet article, nous allons utiliser les outils de développement de Google Chrome.

Accéder à la plateforme de développement de Google Chrome

Il existe de nombreuses façons d’accéder à la plateforme de développement de Chrome. Créez un fichier vide portant l’extension .html avec Notepad++. Ouvrez ce fichier avec Google Chrome. Placez la souris sur la page vierge que vous venez d’ouvrir. Faites un clic droit et sélectionnez l’élément Inspecter dans le menu déroulant qui apparaît. Voilà. Vous êtes dans la plateforme de développement de Google Chrome.

Outils de développement de Google, pour tester l'interactivité des pages web
Outils de développement de Google, pour tester l’interactivité des pages web.

Dans l’onglet Elements se trouve le code HTML de votre page. Dans l’onglet Console, vous pouvez taper des commandes JavaScript. En cas d’erreur, le navigateur vous affiche un message dans Console également.

Le modèle de page DOM

Lorsqu’une page HTML est chargée, le navigateur crée un modèle de la page. Ce modèle, appelé DOM, pour Document Object Model, permet de manipuler les éléments de la page. La page web au complet est représentée par l’objet document. Les éléments de la page (c’est-à-dire, les boutons, les paragraphes, les listes, les titres…) sont eux aussi définis comme des objets et peuvent être accédés au moyen de la méthode getElementById.

Ajout d’un élément dans la page

Tous les objets de la page ont des propriétés qui les caractérisent et des méthodes (des actions) qui agissent sur eux.

Prenons comme exemple cet élément HTML.

<input id=”monBouton” type=”button” text=”clique sur moi” value=”clique sur moi”>

Il s’agit d’un élément de type bouton portant le texte clique sur moi et identifié par l’identifiant monBouton.

Outils de développement de Google, pour tester l'interactivité des pages web

Les attributs HTML sont en correspondance un pour un avec les propriétés de les objets qui les représente.

Aussi, notre bouton, qui est identifié par monBouton et qui porte le texte clique sur moi possède les propriétés id, text et type. On peut le manipuler à l’aide de la méthode getElementById et de l’identifiant monBouton comme suit :

document.getElementById(‘monBouton’)

Comme son nom l’indique, la méthode getElementById renvoie l’élément dont l’identifiant lui a été spécifié en paramètres.

Exécuter une fonction en réponse à un événement

Lorsque l’internaute clique sur un élément de la page, l’événement onclick se produit. JavaScript permet d’exécuter une action (c’est-à-dire, une fonction) en réponse à cet événement. Nous allons voir trois façons d’associer une action à l’événement onclick : l’ajout de l’interactivité directement dans la balise HTML, ajout de l’interactivité par assignation directe et l’ajout de l’interactivité par la méthode addEventListener.

Ajout de l’interactivité directement dans la balise HTML

On peut ajouter de l’interactivité à une page en assignant une fonction à l’attribut onclick de ses éléments. La fonction à exécuter peut être spécifiée directement dans la balise HTML. Prenons le cas de notre bouton.

<input id=”monBouton” type=”button”  text=”clique sur moi” value=”clique sur moi” onclick=” alert(‘On a cliqué sur moi’)” >

La propriété onclick va permettre de lancer une alerte quand notre bouton sera cliqué.

Ajout de l’interactivité par assignation directe

L’assignation d’une fonction à onclick peut s’effectuer à l’aide de JavaScript. Prenons le cas de notre bouton.

document.getElementById(‘monBouton’).onclick=function(){alert(‘On a encore cliqué sur moi!’);}

Pour accéder à notre bouton, il faut commencer par accéder à l’objet document qui représente la page dans laquelle il se trouve. On accède ensuite à l’objet qui représente le bouton lui-même au moyen de la méthode getElementById et de l’identifiant monBouton. On est à ce moment-là en mesure d’assigner une fonction à sa propriété onclick. La fonction anonyme va être exécutée en réponse à un clic de souris sur le bouton.

Ajout de l’interactivité par la méthode addEventListener

L’interactivité peut être ajoutée grâce à la méthode addEventListener. Cette méthode attache la fonction spécifiée en paramètres à l’événement spécifié en paramètres. La fonction sera exécutée dès le déclenchement de l’évènement.

document.getElementById(‘monBouton’).addEventListener(‘click’, function(){alert(‘SVP, arrêtez!’);})

La méthode addEventListener est parfois appelée fonction d’écoute ou gestionnaire d’événements.

Autres événements possibles pour notre bouton

L’événement onclick n’est pas le seul événement possible pour notre bouton. Voici quelques exemples d’événements qui pourraient concerner notre bouton :

  • onclick : l’utilisateur clique sur le bouton.
  • onmouseover : l’utilisateur déplace la souris sur le bouton.
  • onmouseout : l’utilisateur déplace la souris hors de portée du bouton.

Conclusion

Le but de cet article était de montrer un peu comment fonctionne l’interactivité des pages web. Si vous désirez lire d’autres articles de la sorte, laissez-moi un message dans les commentaires ou sur le forum de ce site. Je vous invite aussi à vous abonner à ce site et à partager l’article.

Merci pour votre lecture?; merci pour votre temps.

(4)

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.