Le bouton reste bleu, immobile, malgré mes clics répétés. Trois lignes de JavaScript à peine, et pourtant rien ne se passe, alors qu'à côté, ma page Python, elle, tourne sans jamais broncher. Apprendre les bases du JavaScript pour rendre un site vraiment interactif, ça commence souvent par ce genre de silence frustrant, ce moment où on comprend que ce qu'on savait déjà ne suffit plus tout à fait.
Avant d'aller plus loin, un mot rapide sur la façon dont ce carnet se finance : certains liens ci-dessous sont affiliés, et si vous cliquez pour regarder une ressource, je touche une petite commission sans que le prix change pour vous. Je ne mentionne que ce que j'ai vraiment testé moi-même, rien d'autre.
Une page qui attend, une page qui réagit
Depuis que j'ai commencé avec la Formation au langage Python, j'ai pris l'habitude d'un certain ordre : on écrit un script, on l'exécute, il fait ce qu'on lui demande, point final. Une page web statique fonctionne un peu pareil : elle affiche ce qu'on lui a écrit, et rien de plus, même si on clique cent fois dessus. Ce qui change avec le JavaScript, c'est justement ça : la page cesse d'être une photo pour devenir quelque chose qui répond, qui bouge, qui réagit à ce que fait la personne en face de son écran.
Un détail m'a amusée en creusant le sujet : Brendan Eich a écrit la première version de ce langage en une dizaine de jours en 1995. Dix jours, pour un langage qui allait finir par faire tourner la moitié du web. Moi, ça m'a pris bien plus longtemps rien que pour arrêter de chercher une indentation qui n'existe pas en JavaScript. Parce que c'est bien là le premier choc : Python compte sur les espaces pour délimiter un bloc, JavaScript compte sur des accolades, et tant qu'on n'a pas intégré ça, on relit son code sans comprendre pourquoi rien ne se passe.
Les bases du JavaScript, vues avec des yeux de Python
J'ai fini par comparer les deux langages bloc par bloc, un peu comme quand on essaie de retrouver ses repères dans une cuisine qui n'est pas la sienne. Les mêmes ingrédients, rangés autrement. Pour quelqu'un qui a appris à coder après le travail à la maison, ce genre de comparaison aide à ne pas tout réapprendre de zéro. Une variable, par exemple, se déclare avec let plutôt qu'avec un simple signe égal. Le principe reste le même, seule l'étiquette change. Une condition if/else, elle, garde presque le même visage d'un langage à l'autre, ce qui m'a un peu rassurée les premiers soirs où tout le reste semblait hostile.
Là où Python me demandait d'écrire une instruction du type input() pour recevoir une réponse, dans le navigateur, c'est un événement (un clic, une frappe au clavier) qui déclenche tout, sans que j'aie besoin de lui demander explicitement quoi que ce soit. La valeur récupérée dans un champ de texte reste une chaîne de caractères, exactement comme un texte brut renvoyé par un script Python, sauf qu'ici, personne ne vérifie à ma place si elle est vide avant que je fasse quoi que ce soit avec. J'ai suivi une formation 100 % pratique pour m'aider à voir vite quelque chose bouger dans le navigateur plutôt que de rester scotchée à la théorie, et ça m'a évité de tourner en rond seule pendant des soirées entières.
Ce que le DOM ajoute par-dessus tout ça, c'est une manière de voir la page comme un arbre généalogique : pour changer la couleur d'un titre, il faut dire au script d'aller chercher précisément cet élément, puis de modifier sa propriété. Ma première tentative de tout mémoriser par cœur, sans vraiment comprendre pourquoi on parcourt cet arbre de cette façon-là, n'a mené à rien. Je recopiais des lignes qui fonctionnaient chez les autres et plantaient chez moi, jusqu'à ce que j'accepte de ralentir et de comprendre la logique plutôt que la syntaxe.
La boucle qui a fini par tourner toute seule
Le jour où j'ai voulu vérifier plusieurs champs d'un formulaire d'un coup, j'ai eu besoin d'une boucle, et la logique ressemblait beaucoup à celle que j'avais mis des soirées entières à apprivoiser côté Python. Seule l'écriture change vraiment. Cette boucle tourne sur un tableau de champs, l'équivalent d'une liste Python qui aurait changé de nom en traversant la frontière. Pour garder une trace de l'état de chacun (rempli, vide, déjà corrigé), j'ai fini par utiliser une structure clé-valeur, presque un dictionnaire Python qui parlerait avec un léger accent différent.
La première fois que j'ai écrit cette boucle sans rouvrir mes notes, elle a tourné du premier coup, et je suis restée un instant les mains suspendues au-dessus du clavier, presque suspicieuse devant un résultat aussi propre. J'ai eu envie de le raconter à Gwilherm Ségalen, un autre autodidacte croisé sur un forum un soir où je bloquais justement sur une histoire de boucle for : il m'a répondu avec son enthousiasme habituel, jamais un mot de haut, alors qu'il aurait largement pu se moquer d'une victoire aussi modeste.
Quand mon script a planté sans prévenir un peu plus tard, j'ai découvert que le try/catch existait aussi en JavaScript, comme le try/except que j'utilisais déjà côté Python sans trop y réfléchir. La chaise a craqué quand je me suis redressée pour relire le message d'erreur mot après mot, parce que la première fois, il ne m'a strictement rien dit. J'ai failli monter demander à mon voisin Gaultier Bermond, l'administrateur système du palier, mais je me suis souvenue qu'il préfère toujours que je cherche seule avant de frapper à sa porte, et il ne se prive pas de le rappeler. Alors j'ai cherché, et j'ai fini par comprendre qu'une variable déclarée à l'intérieur de ma fonction refusait obstinément d'exister en dehors. C'était une histoire de portée que j'avais déjà croisée côté Python sans jamais vraiment m'y arrêter.
Faut-il tout de suite sauter sur React, ou apprendre le JavaScript natif d'abord ?
On m'a souvent conseillé de sauter directement vers des outils plus modernes comme React ou Vue, plus rapides à mettre en place et plus recherchés sur le papier. Mais apprendre les fondations d'abord, sans ces couches supplémentaires, m'a semblé plus honnête : je préfère comprendre ce qui se passe quand je manipule le DOM directement, sélecteurs compliqués et boucles capricieuses compris, plutôt que de dépendre d'une bibliothèque que je ne saurais pas dépanner si elle change de version du jour au lendemain. Pas d'installation, pas de bibliothèque à ajouter, juste un navigateur déjà ouvert. Après les soirées passées à installer Python correctement sur mon ordinateur, ce confort m'a presque paru suspect. Je n'ai pas non plus eu besoin d'importer quoi que ce soit jusqu'ici, alors que le mot-clé import change presque tout ce qu'on peut faire une fois qu'on l'a compris côté Python. Je n'ai pas non plus touché à la lecture de fichiers dans ce contexte, alors que je commençais tout juste à m'en sortir avec ça côté Python. Pour l'instant, tout se passe dans la fenêtre du navigateur.
Si vous venez aussi de Python, apprendre à manipuler le dom en javascript après avoir débuté en python mérite un carnet à part entière, que j'ai déjà rempli de mes propres essais. Quant à savoir lequel des deux langages finira par devenir mon terrain principal, je m'en suis déjà expliquée ailleurs, et je ne vais pas rouvrir ce débat ici. Ce carnet-ci parle seulement de ce que le JavaScript apporte quand on sait déjà coder autrement.
Ce qu'un site vraiment interactif change, une fois que le bouton obéit
Hier soir, un petit formulaire a enfin changé de couleur au bon moment, sur le champ que j'avais oublié de remplir. C'est bête, dit comme ça, mais ça donne une âme à une page qui, jusque-là, se contentait d'exister. Passer autant de temps à déboguer des bêtises use les nerfs, mais la satisfaction qui suit compense largement l'heure perdue à chercher une lettre manquante dans le mot alert.
Alors, faut-il apprendre le JavaScript quand on vient de Python ? Si votre page doit simplement afficher une information fixe (un texte, une image, un menu qui ne bouge pas), le HTML et le CSS suffisent très bien, inutile de compliquer les choses. Mais dès que la page doit répondre à ce que fait la personne en face : un clic, un champ oublié, une couleur qui change au bon moment, c'est précisément là que ces quelques bases deviennent utiles, même apprises doucement, un soir à la fois. Peut-être qu'un jour je m'intéresserai à la Formation Cisco pour comprendre comment les données voyagent entre les ordinateurs, mais pour l'instant, transformer des pages statiques en petits bouts de vie interactive me suffit largement. Si vous voulez voir vos propres idées bouger dans le navigateur, la formation JavaScript pratique que j'ai suivie reste un bon point de départ pour ne pas rester seule face à l'écran.