Comment utiliser JavaScript pour rendre une page web interactive

Avant de commencer, assurez-vous d’avoir complété les sections précédentes, en particulier 1. Premiers pas 🧑‍🎓, 2. Aller plus loin 🚀, ainsi que les leçons sur le HTML et le CSS.

JavaScript a été créé en 1995 par Brendan Eich. Depuis, le langage a évolué, mais il continue d’alimenter le web. Ce n’est qu’en 2012 que TypeScript est apparu, ajoutant des fonctionnalités comme les types à JavaScript. TypeScript est appelé un superset de JavaScript.

Cependant, les navigateurs exécutent toujours du JavaScript. Ils ne comprennent pas TypeScript. C’est pourquoi les outils modernes de développement web transpilent le TypeScript en JavaScript.

Dans cette leçon, nous n’utiliserons aucun outil. Nous exécuterons le code JavaScript directement dans le navigateur. Ne vous inquiétez pas : maintenant que vous connaissez TypeScript, JavaScript sera un jeu d’enfant. C’est la même chose, juste sans les types !

Vous voulez être prévenu quand de nouvelles leçons sont publiées ? Abonnez-vous à l'infolettre ✉️ et donnez une ⭐ au cours sur GitHub pour me garder motivé ! Cliquez ici pour me contacter.

Configuration

Nous n’avons rien de nouveau à installer, mais nous allons travailler avec le code de la leçon précédente.

Ouvrez un dossier vide dans VS Code. Téléchargez cette image depuis mon Google Drive et placez-la dans votre projet. Ensuite, copiez et collez le code ci-dessous dans un nouveau fichier index.html.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Alma Mater</title>
    <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
</head>
<body>
    <h1>My Alma Mater: UQAM</h1>
    <p>I earned my bachelor's degree in journalism at Université du Québec à Montréal (UQAM).</p>
    <img src="university.jpg" alt="UQAM campus with Montreal’s downtown skyline in the background."/>
    <p>The picture above comes from Wikimedia. You can find it <a href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg">here</a> along with its license.</p>
    <p>Montreal is a wonderful city. You should visit it!</p>
</body>
</html>

Une capture d’écran montrant la console du navigateur et VS Code avec du code.

Créer un fichier `.js`

Bien que vous puissiez écrire du JavaScript directement dans le fichier HTML à l’aide des balises <script> et </script>, il est généralement préférable d’isoler votre JavaScript dans un ou plusieurs fichiers .js. Cela rendra votre code plus facile à maintenir sur le long terme.

Créons un nouveau fichier appelé main.js avec un simple console.log à l’intérieur.

main.js

console.log("Hi!");

Pour exécuter ce code sur votre page web, vous devez l’importer dans votre fichier HTML. Ci-dessous, nous utilisons l’attribut defer afin que notre code JavaScript soit exécuté une fois que toute la page est prête. C’est important si vous voulez modifier ou interagir avec le contenu de la page, comme nous allons le faire ici. Si votre script s’exécute trop tôt, avant que les éléments n’aient été créés par le navigateur, vous obtiendrez une erreur.

Cependant, il arrive que vous n’ayez pas besoin des éléments de la page. Si vous souhaitez que votre script s’exécute dès que possible, vous pouvez utiliser l’attribut async à la place de defer.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Alma Mater</title>
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <script src="main.js" defer></script>
    </head>
    <body>
        <h1>My Alma Mater: UQAM</h1>
        <p>
            I earned my bachelor's degree in journalism at Université du Québec
            à Montréal (UQAM).
        </p>
        <img
            src="university.jpg"
            alt="UQAM campus with Montreal’s downtown skyline in the background."
        />
        <p>
            The picture above comes from Wikimedia. You can find it <a
                href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg"
            >here</a> along with its license.
        </p>
        <p>
            Montreal is a wonderful city. You should visit it!
        </p>
    </body>
</html>

Pour vérifier si notre code s’exécute sur la page, nous pouvons la rafraîchir et consulter la console.

Lorsque nous exécutions du TypeScript avec Deno, console.log affichait les informations dans le terminal. Mais maintenant que nous travaillons sur une page web, ces informations s’affichent dans la console du navigateur.

Vous devriez voir Hi! dans la console, ce qui indique que notre code s’exécute à chaque chargement de la page !

Une capture d’écran montrant la console du navigateur et VS Code avec du code.

Event listeners

Lorsque vous voulez que l’utilisateur interagisse avec votre page, vous devez d’abord sélectionner l’élément concerné, puis ajouter un ou plusieurs event listeners. Pour sélectionner des éléments, vous pouvez utiliser des sélecteurs comme en CSS.

Pour un exemple concret, créons un bouton cliquable qui change la couleur du body. Dans index.html, nous ajoutons le bouton avec l’id change-background.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Alma Mater</title>
        <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
        <script src="main.js" defer></script>
    </head>
    <body>
        <h1>My Alma Mater: UQAM</h1>
        <p>
            I earned my bachelor's degree in journalism at Université du Québec
            à Montréal (UQAM).
        </p>
        <img
            src="university.jpg"
            alt="UQAM campus with Montreal’s downtown skyline in the background."
        />
        <p>
            The picture above comes from Wikimedia. You can find it <a
                href="https://commons.wikimedia.org/wiki/File:UQAM-Judith-Jasmin.jpg"
            >here</a> along with its license.
        </p>
        <p>
            Montreal is a wonderful city. You should visit it!
        </p>
        <button id="change-background">
            Click me to change the background color!
        </button>
    </body>
</html>

Mettons maintenant à jour main.js :

Tout d’abord, nous créons une liste de randomColors (lignes 1 à 12).
Ensuite, nous sélectionnons notre bouton avec document.querySelector et le sélecteur #change-background (ligne 14). Ici, nous voulons sélectionner un seul bouton, mais pour sélectionner plusieurs éléments, vous pouvez utiliser querySelectorAll.
Nous ajoutons un event listener de type clic à notre button avec addEventListener("click", ...) (ligne 16).
Le deuxième argument de addEventListener est une fonction déclenchée lorsque l’utilisateur interagit avec l’élément. Ici, nous choisissons une couleur au hasard et l’appliquons en arrière-plan du body de la page (lignes 17 à 20).

Lorsque la page se charge, notre code cherche le bouton, puis attend que l’utilisateur interagisse avec lui.

main.js

const randomColors = [
    "red",
    "blue",
    "green",
    "yellow",
    "pink",
    "purple",
    "orange",
    "brown",
    "gray",
    "white",
];
 
const button = document.querySelector("#change-background");
 
button.addEventListener("click", () => {
    const randomIndex = Math.floor(Math.random() * randomColors.length);
    const randomColor = randomColors[randomIndex];
 
    document.body.style.backgroundColor = randomColor;
});

Une capture d’écran montrant du code avec des écouteurs d’événements dans VS Code.

💡

En lisant d’autres tutoriels en ligne, vous entendrez peut-être parler du DOM (Document Object Model). C’est la représentation JavaScript du HTML. Lorsque vous sélectionnez un élément HTML en JavaScript, vous le sélectionnez à partir du DOM.

Il existe de nombreux types d’événements, et vous pouvez aussi les supprimer avec la méthode removeEventListener. Cependant, assurez-vous d’utiliser une fonction nommée plutôt qu’une fonction fléchée comme ci-dessus ; sinon, cela ne fonctionnera pas.

Conclusion

Félicitations ! Vous venez de rendre votre page interactive ! Bien sûr, l’interaction ici est assez simple, mais les mêmes principes peuvent être appliqués à des visualisations de données interactives plus complexes : lorsque l’utilisateur interagit avec la page, vous mettez à jour ce qui est affiché.

Vous pouvez aussi utiliser fetch pour récupérer différents fichiers de données et créer divers graphiques selon les choix de l’utilisateur. Ou encore, vous pouvez récupérer des données fraîches toutes les 15 secondes avec setInterval et redessiner les graphiques, comme nous le faisons pour les tableaux de bord électoraux. D’ailleurs, fetch fonctionne de la même manière dans Deno que dans le navigateur. 😊

Il existe aussi des API plus spécialisées, comme l’API Intersection Observer, qui permet de surveiller la progression du défilement de l’utilisateur et de déclencher des animations — comme nous le faisons dans des projets de scrolly-telling tels que celui-ci. (Je sais que le mot “API” peut prêter à confusion ici, car jusqu’à présent nous avons surtout utilisé des API pour récupérer des données, mais une API peut être n’importe quoi — pas seulement pour les données. Celle-ci ressemble davantage à une fonction.)

J’ai volontairement gardé cette leçon très simple, puisque c’est votre première fois à coder du JavaScript pour le web, et nous sommes assez limités puisque nous n’avons pas lancé de serveur local. Mais je pense que vous êtes maintenant prêt pour la suite !

Vous avez aimé ? Vous voulez être prévenu quand de nouvelles leçons sont publiées ? Abonnez-vous à l'infolettre ✉️ et donnez une ⭐ au cours sur GitHub pour me garder motivé ! Contactez-moi si vous avez des questions.

CSS Svelte

Comment utiliser JavaScript pour rendre une page web interactive

Configuration

Créer un fichier .js

Event listeners

Conclusion

Créer un fichier `.js`