Je clique sur ce bouton gris pour la dixième fois, et strictement rien ne se passe. Pas un son, pas un changement de couleur, pas la moindre petite erreur réconfortante dans la console. Deux ans que je bricole avec le code dans mon coin, et je croyais avoir déjà vu toutes les variantes possibles du silence numérique. Apprendre à coder, dans mon cas, ça a surtout voulu dire apprendre à fixer un écran qui refuse de réagir. Ce soir pourtant, l'enjeu est différent : il ne s'agit plus d'un script qui tourne dans un terminal noir que je suis la seule à regarder, mais d'une vraie page, avec un vrai bouton, censée devenir interactive pour quelqu'un d'autre que moi. Le script en question calcule le prix des légumes, celui que j'avais écrit après une virée aux Halles Saint-Joseph où je me demandais pourquoi les tarifs changeaient autant d'un étal à l'autre, et il tourne très bien dans mon terminal, sauf que personne d'autre que moi n'ira jamais l'ouvrir là. Pour ça, il va falloir que je mette enfin les mains dans le DOM, cette chose qui me semblait jusqu'ici réservée aux gens qui savent vraiment ce qu'ils font en JavaScript.
Pourquoi un bouton reste-t-il muet sans JavaScript ?
On m'avait expliqué qu'un site web s'appuie sur trois couches, et que ça ressemble à une maison qu'on construit petit à petit : d'abord les murs, en HTML, puis la peinture et la décoration, en CSS, et enfin l'électricité, en JavaScript. Sans courant, la maison a beau être jolie sur le plan, aucune lumière ne s'allume quand on actionne l'interrupteur. Mon bouton, pour l'instant, c'est exactement ça : un joli rectangle gris, mais mort à l'intérieur.
Le DOM, c'est la façon dont l'ordinateur regarde ma page HTML pour pouvoir la modifier en direct, sans recharger quoi que ce soit. Le mot sonnait comme un titre ronflant la première fois que je l'ai lu, mais c'est en réalité assez simple : c'est le pont entre mon bouton inerte et le code qui attend, immobile, de s'exécuter.
Avant, en Python, j'avais essayé de bricoler quelque chose d'un peu semblable pendant un été plus calme, une petite fenêtre qui s'ouvre, un bouton qui réagit. L'attirail nécessaire était tellement lourd pour un résultat aussi modeste que j'avais fini par laisser tomber. Ici, dans le navigateur, tout se passe à vue, ce qui est à la fois plus gratifiant et plus terrifiant : la moindre erreur de syntaxe, et plus rien ne bouge du tout.
Donner un nom à mon bouton
Dans mon fichier HTML, la première étape a été la plus facile : écrire la balise standard button et lui donner un identifiant, un petit 'id' unique, comme une adresse postale, pour que mon JavaScript puisse le repérer au milieu de tous les autres éléments de la page.
Le bouton est apparu, un petit rectangle gris planté au milieu d'une page blanche, et j'ai cliqué dessus. Une fois, dix fois, cent fois. Rien. Cette sensation de silence a quelque chose d'assez déstabilisant : on dirait donner un ordre à quelqu'un qui ne vous a pas encore entendu.
La frustration du bouton muet
La console de mon navigateur, que j'ai appris à ouvrir avec la touche F12 (mon nouveau meilleur ami et pire ennemi), affichait un 'Uncaught TypeError' qui ne voulait absolument rien dire pour moi. Je me suis redressée d'un coup sur ma chaise, qui a craqué sous le mouvement, pour relire le message une troisième fois, sans rien comprendre de plus. J'ai vérifié mes virgules, mes parenthèses, mes points-virgules, avec l'impression d'être une détective privée à la recherche d'une preuve invisible.
Une voisine qui s'est mise à l'apiculture sur son balcon ce printemps m'avait pourtant juré qu'il fallait se lancer tout de suite sur un vrai projet pour ne pas perdre la motivation. J'ai suivi son conseil à la lettre et voulu construire, dès les premiers jours, un site avec plusieurs pages, un formulaire et une animation que je ne savais même pas nommer, et je me suis noyée en une seule soirée avant de tout laisser de côté pendant un moment. C'est en repensant à un article sur apprendre le javascript pour débutant quand on vient du monde python que j'ai compris que je cherchais à appliquer une logique de terminal à une page qui, elle, vit au rythme du clic de l'utilisateur.
Le problème, c'est que j'essayais de forcer ce bouton à m'écouter sans lui avoir donné la bonne consigne. En JavaScript, impossible de simplement lui dire 'fais un truc'. Il faut d'abord aller le chercher dans la page, puis lui demander de rester attentif à un événement précis, comme un clic.
Le piège du onclick
Sur de vieux forums, j'avais vu qu'on pouvait glisser un attribut onclick directement dans le HTML, du genre . Ça semblait d'une simplicité folle, et à ma grande surprise, ça a fonctionné tout de suite. J'étais aux anges, jusqu'à ce qu'une petite voix, celle des tutoriels sérieux que je suis, me rappelle que c'était une mauvaise habitude à ne pas garder.
C'est un peu comme visser la poignée du robinet directement sur le tuyau pour réparer une fuite : ça dépanne sur l'instant, mais le jour où il faut changer la poignée, c'est tout le mur qu'on doit rouvrir. Mieux vaut séparer la structure, le tuyau, de la logique, le robinet. C'est pour ça qu'on privilégie l'écouteur d'événement addEventListener : plus propre, plus durable, et ça évite de transformer son HTML en un fil électrique qui part dans tous les sens.
Et si j'écoutais le bon événement ?
Le JavaScript, je ne m'y suis frottée que depuis six semaines, ce qui explique sans doute pourquoi cette histoire d'écouteur d'événement m'a pris autant de temps à rentrer. La fonction addEventListener demande deux arguments : le type d'événement attendu, ici un clic, et ce qu'on veut faire quand il arrive, une fonction.
Voici ce que j'ai fini par écrire dans mon fichier .js : const leBouton = document.getElementById('monBouton');leBouton.addEventListener('click', function() { alert('Ça marche !'); });
Quand j'ai rafraîchi ma page et cliqué, une petite fenêtre d'alerte a surgi en haut de l'écran, et j'ai presque sursauté de surprise. Ce n'est qu'un bouton gris qui affiche trois mots, mais c'est la première fois que mon code sortait de son terminal pour devenir quelque chose de concret, que quelqu'un d'autre pourrait un jour toucher du doigt.
Penser en événements, pas en lignes
Ce qui m'a aidée à comprendre, c'est d'imaginer le bouton comme un enfant qui attend qu'on lui tende la main avant de traverser. Il ne bouge pas tout seul, il patiente. L'addEventListener, c'est la consigne qu'on se donne à soi-même : si la main se lève, alors on traverse, sinon on ne fait rien.
Chaque menu qui se déroule, chaque image qui s'agrandit, chaque formulaire qui se valide, tout cela repose sur ces mêmes écouteurs qui patientent dans l'ombre du navigateur. C'est une manière de penser très différente de Python, où le code que j'écrivais filait du haut vers le bas puis s'arrêtait, alors qu'ici, il reste éveillé, à l'affût.
Ça me rappelle tout le chemin déjà parcouru avec Python avant d'en arriver là. L'installation de Python elle-même, qui avait pris des airs de mission commando les tout premiers jours. Les variables, qui ont fini par avoir un sens pour moi bien après que j'ai cru les avoir comprises. Les boucles for qui refusaient d'avancer comme je voulais, les parenthèses de mes premières fonctions qui ne savaient jamais où s'arrêter, les listes dont je mélangeais sans cesse les index, les dictionnaires que j'ai longtemps pris pour des listes déguisées. L'indentation, qui m'a valu plus d'erreurs bêtes que je ne veux l'admettre, les chaînes de caractères où je ne savais jamais où placer les guillemets, les conversions entre texte et nombre qui me rendaient chèvre, and et or que je confondais allègrement les premiers temps. Le jour où j'ai enfin saisi à quoi servait d'importer un module plutôt que de tout réécrire à la main, pip, que j'ai longtemps pris pour une commande magique, la fonction input, qui m'a permis de parler à mes propres scripts pour la première fois, mes if/else qui ressemblaient à des listes de courses mal rangées, le try/except que j'ai mis un temps fou à apprivoiser, cette histoire de portée des variables qui m'a fait douter de tout ce que je croyais savoir, la première fois que j'ai réussi à lire un fichier texte sans tout faire planter, et mes méthodes de débogage, qui consistaient surtout à fixer l'écran en espérant un miracle. Sans oublier tous ces messages d'erreur qui me semblaient écrits dans une langue étrangère, et cette question jamais vraiment tranchée de continuer en Python ou de me jeter tout de suite dans le grand bain du JavaScript.
Mes conseils de débutante, pris sur le vif
Si vous galérez comme moi ce soir-là, sachez que c'est normal : la programmation web multiplie les pièces mobiles qui doivent s'emboîter. De mes heures de bataille, j'ai surtout retenu qu'il fallait vérifier que le fichier JavaScript est bien relié au fichier HTML, une vérification toute bête sur laquelle j'ai déjà perdu plus de temps que je n'ose l'avouer. J'ai aussi appris à semer des console.log('Je suis ici !') un peu partout, histoire de voir si le code atteint vraiment l'endroit où je crois qu'il va. Et surtout, à ne pas me laisser impressionner par des mots comme 'méthode' ou 'callback' : ce sont juste des recettes qu'on suit dans un certain ordre, rien de plus mystérieux qu'une liste d'étapes pour un plat qu'on n'a jamais cuisiné.
J'ai aussi compris qu'il valait mieux bien apprendre les bases du javascript pour créer des sites web interactifs avant de vouloir faire des choses trop ambitieuses. Vouloir courir avant de savoir marcher, c'est exactement ce qui m'avait fait abandonner mon site à pages multiples quelques semaines plus tôt, et c'est souvent là qu'on se décourage pour de bon.
Ce soir, je vais me coucher avec l'impression d'avoir gagné un petit bout de terrain. Demain, j'essaierai de faire changer la couleur du texte au clic, ou peut-être de faire disparaître le bouton, juste pour le plaisir de le faire revenir. La route est encore longue, et la moitié des messages d'erreur que je reçois reste incompréhensible, mais au moins, ce bouton et moi, on commence à se comprendre un peu.
Pas plus tard que la semaine dernière, une collègue m'a demandé de l'aide sur une formule Excel qui refusait de donner le bon résultat, et je me suis surprise à lui expliquer, étape par étape, où regarder : une condition qui ne couvrait pas tous les cas, une référence qui ne pointait pas là où il fallait. C'est peut-être ça, la vraie victoire de ces derniers mois : pas tellement le bouton qui clique enfin, mais cette façon de voir une logique cachée derrière des choses qui, avant, me semblaient juste 'marcher' ou 'ne pas marcher'.
Et vous, c'était quoi, votre premier moment où vous avez eu l'impression que l'ordinateur vous écoutait enfin ?