Mon Labo Python

Apprendre à manipuler le dom en javascript après avoir débuté en python

Apprendre à manipuler le dom en javascript après avoir débuté en python

Je suis assise à ma table de cuisine, celle qui a vu passer plus de tasses de thé refroidies que de repas de famille ces derniers temps. La lueur de l'écran se reflète dans ma tasse et je fixe ce bouton sur ma page web qui refuse obstinément de changer de couleur. J'ai passé des mois à apprendre Python, à me sentir presque à l'aise avec mes scripts qui tournent sagement dans la console, mais là, face au web, je me rends compte que mes connaissances sont comme un moteur puissant qui n'aurait pas de roues.

Avant d'aller plus loin, un petit mot en toute franchise : ce carnet de bord contient quelques liens affiliés. Si vous cliquez dessus pour vous offrir une ressource, je touche une petite commission sans que cela ne vous coûte un centime de plus. Je ne partage ici que ce que j'utilise vraiment pour ne pas devenir chèvre devant mon clavier, comme la formation qui m'a sauvée quand je ne comprenais rien au JavaScript.

Mes racines dans le jardin ordonné de Python

Tout a commencé un soir de février. J'avais décidé de m'attaquer à la programmation, et Python a été mon premier refuge. J'aimais sa clarté, presque comme une recette de cuisine bien écrite. On m'avait appris que l'indentation standard Python est de 4 espaces, et pour une maniaque du rangement comme moi, c'était rassurant. Tout était à sa place. J'ai même fini par réussir à lire un fichier texte en python grâce à ma formation, une victoire qui m'avait donné l'impression d'être une véritable ingénieure, alors que je suis juste une débutante qui apprend entre la vaisselle et le dodo des petits.

J'ai utilisé la Formation au langage Python pour poser ces bases. C'était mon point de départ, un cocon où les erreurs étaient lisibles et la logique impérative : fais ceci, puis fais cela. Mais dès que j'ai voulu que mes programmes "existent" ailleurs que dans un terminal noir et blanc, j'ai dû me confronter au trio des technologies fondamentales du web. On m'a expliqué qu'il y en avait 3 : le HTML pour les murs, le CSS pour la peinture, et le JavaScript pour l'électricité et la plomberie. Et c'est là que les ennuis ont commencé.

Comparaison visuelle entre le code Python et le code JavaScript sur un écran

Le choc thermique : des 4 espaces aux accolades

Au début du printemps, j'ai ouvert mon premier fichier .js. Le premier contact a été brutal. Moi qui étais habituée à la propreté visuelle de Python, je me suis retrouvée noyée dans une mer d'accolades et de points-virgules. C'est idiot, mais on s'attache à ses petites habitudes. En Python, si je décale mal une ligne, le programme râle. En JavaScript, si j'oublie une accolade, c'est tout le château de cartes qui s'écroule sans que je comprenne toujours pourquoi.

Il m'est arrivé tellement de fois de taper machinalement un 'if' suivi de deux points en JavaScript et de pester contre l'écran quand la console affiche une erreur de syntaxe. Mon cerveau est encore câblé pour Python. C'est un peu comme essayer de parler espagnol en utilisant la grammaire allemande. Le bruit sec des touches de mon clavier qui résonne dans la cuisine silencieuse pendant que tout le monde dort est devenu le rythme de ma frustration. Je me sentais trahir mon premier amour pour un langage qui me semblait, au premier abord, bien plus désordonné.

J'ai même essayé de bidouiller avec des outils que je ne maîtrisais pas, pensant que installer une bibliothèque python avec pip sans faire d'erreur m'aiderait pour le web. Erreur de débutante : Python reste souvent côté serveur, alors que pour faire bouger mon bouton, j'avais besoin de JavaScript qui s'exécute directement dans le navigateur de celui qui regarde la page.

La découverte du DOM : quand le code touche enfin la réalité

Il y a quelques semaines, j'ai enfin compris ce qu'était le DOM (Document Object Model). Pour moi, c'était un acronyme de plus, un truc de barbu. En fait, c'est juste la structure de ma page HTML transformée en une sorte d'arbre généalogique que JavaScript peut secouer. Imaginez que votre page web est une maison. Le HTML, c'est le plan. Le DOM, c'est la maison une fois construite. Et JavaScript, c'est la main qui peut déplacer le canapé ou repeindre les volets sans avoir à tout démolir.

Le déclic est venu avec la formation JavaScript : formation 100 % pratique. Contrairement à mes lectures théoriques, là, on m'a forcée à manipuler. Le moment magique ? Quand j'ai écrit mon premier `document.getElementById('mon-bouton').style.backgroundColor = 'red';`. Ce n'était qu'une couleur qui changeait, mais pour moi, c'était comme si j'avais enfin réussi à dompter l'électricité. J'ai réalisé que je ne parlais plus à une console abstraite, mais à quelque chose que je pouvais voir et toucher du doigt.

Main d'une débutante prenant des notes sur la manipulation du DOM

Le piège de la logique Python appliquée au DOM

C'est ici que j'ai failli abandonner. En Python, j'ai appris à penser de façon très linéaire : une étape après l'autre. J'ai essayé d'appliquer cette logique au DOM en écrivant des dizaines de lignes pour dire précisément à chaque élément quoi faire à chaque seconde. C'était un enfer. Mon code devenait une pelote de laine emmêlée par un chaton surexcité. Dès que je changeais un détail, tout cassait ailleurs.

C'est là que j'ai compris mon erreur : n'essayez pas de manipuler le DOM avec une logique impérative comme en Python, car la gestion d'état déclarative est le vrai secret pour éviter des bugs complexes. En clair ? Au lieu de dire à chaque petit élément de changer de couleur un par un quand on clique, il vaut mieux définir un "état" (par exemple : "le mode nuit est activé") et laisser la page réagir globalement à cet état. C'est un changement de mentalité radical. Python m'a appris à construire des moteurs, JavaScript m'apprend à créer des écosystèmes qui réagissent aux actions de l'utilisateur.

Un dimanche après-midi pluvieux et victorieux

Il y a peu, lors d'un dimanche après-midi pluvieux, j'ai réussi à créer un petit compteur. Rien d'incroyable : un bouton plus, un bouton moins, et un chiffre qui change au milieu. Mais ce qui était différent, c'est que je n'ai pas lutté contre les accolades. J'ai accepté que JavaScript soit différent. J'ai même trouvé une certaine beauté dans la manière dont il se lie au HTML.

Je ne dis pas que je suis devenue une experte. Loin de là. Je continue de faire des erreurs bêtes, d'oublier des parenthèses et de m'emmêler les pinceaux entre les variables `let` et `const`. Mais la peur a disparu. Python m'a donné la structure mentale, la rigueur de l'indentation et la compréhension des boucles. JavaScript m'offre le visuel, l'interaction, le plaisir de voir mon travail prendre vie sous mes yeux.

Interface web simple créée par une débutante en JavaScript

Le puzzle commence enfin à s'assembler. Si vous venez de Python et que vous regardez le JavaScript avec méfiance, ne vous découragez pas. C'est normal de se sentir un peu perdue quand on change d'outil. C'est comme passer de la couture à la menuiserie : on utilise toujours ses mains, mais les règles de sécurité ne sont pas les mêmes. Si vous voulez un coup de pouce pour ne pas rester bloquée devant votre écran comme je l'ai été, je ne peux que vous conseiller de jeter un œil à la formation JavaScript pratique que j'ai suivie. Elle enlève tout le superflu pour se concentrer sur ce qui compte : faire bouger les choses.

Ce soir, la cuisine est calme, mon thé est encore chaud pour une fois, et mon compteur fonctionne. Demain, j'essaierai peut-être de faire une liste de courses interactive. Ou alors je retournerai un peu vers mes scripts Python pour ne pas oublier la douceur des 4 espaces. Après tout, qui a dit qu'on ne pouvait pas parler deux langues à la fois ?

" , et si jamais l'envie me prend de comprendre ce qui se passe encore plus loin derrière les câbles, je garde dans un coin de ma tête la formation Cisco pour plus tard, quand je serai grande dans le monde du code.

Articles connexes