Salut, Mes premières difficultés en Javascript

Après un premier article d’introduction la semaine dernière concernant mes formations , je vais commencer à parler de mes premières difficultés en Javascript.

J’ai passé une semaine complète à travailler avec Javascript et j’ai eu quelques soucis pour manipuler correctement certains aspects de ce langage.

J’ai commencé à triturer les éléments du DOM, donc à pouvoir modifier une page HTML/CSS avec du Javascript et j’ai compris d’un seul coup pas mal de chose. Je ne rentrerai pas dans le détail du DOM dans cet article, mais ça viendra assez vite.

Je n’ai pas encore terminé la formation d’Anthony Welc, j’en suis à 89%, j’ai préféré laisser passer 2-3 jours et renforcer ce que j’avais appris en refaisant les premiers exercices sur la partie du DOM en essayant d’aller plus loin. Je parlerai certainement de ça plus tard.

Des exercices entiers à manipuler des chiffres et des strings

Lorsque j’ai commencé à m’intéresser à Javascript, et à essayer de lire et de comprendre du code, je voyais des suites ininterrompu de variables et d’instructions qui permettaient de créer des effets particuliers et assez cool sur une page web. A ce stade, je ne comprenais pas tout, mais bon pour avoir fait un peu d’anglais, j’en ai déduit que ça devait servir à faire des conditions…

Une fois le nez dedans, je me suis retrouvé à faire des exercices entiers à manipuler des nombres, des chaînes de caractères, des booléens, mais au bout de ces exercices, rien de très excitant d’un point de vue des effets dynamiques… Je savais que cela était utile,   j’avais hâte de pouvoir moi aussi coder mes propres animations, mais jusque là rien de super excitant.

J’ai eu la sensation d’un retour au lycée. Les booléens m’ont rappelé mes cours de techno où on travaillait avec des opérateurs logiques (et/ou/non, etc…), et la manipulations des boucles  m’ont rappelé le désagréable souvenir des suites en math, en beaucoup moins ennuyeux tout de même. Je suis presque certain que si à l’époque on nous avait expliqué que de près ou de loin, les suites avait un rapport avec la programmation, j’aurais peut-être eu un peu plus envi de m’y intéresser… bref c’est pas le sujet.

Les débuts d’apprentissage de la programmation m’ont permis de vraiment me dérouiller le cerveau. Dix ans que je travaille dans le bâtiment à faire quasiment les mêmes tâches, la tête dans le guidon, à penser de la même façon tous les jours, ça rends un peu débile. J’imagine d’ailleurs que si toi aussi tu envisages une reconversion professionnelle, c’est un sentiment que tu as sûrement éprouvé. J’avais vraiment le sentiment de ne plus progresser, voir même régresser, et de ne plus être capable de réfléchir. Pour cela, une bonne remise en question et un grand virage m’ont fait le plus grand bien, mais je m’écarte du sujet.

Réflechir avant d’écrire

Les premiers exercices que j’ai eu à réaliser sont assez simple finalement puisqu’ils ne vont pas plus loin que la leçon précédente. Ils sont juste là pour te faire manipuler du code, et te roder à la syntaxe. J’imagine d’ailleurs que c’est pareil pour tous les langages, pas seulement Javascript, et c’est évidemment un passage important.

En revanche, plus tu avances et plus les possibilités de résoudre un problème s’ouvrent et plus il faut bien connaître les outils que tu as appris, et te faire le déroulé du programme que tu dois écrire dans ta tête ou sur une feuille. Comme je le disais dans mon article précédent (Mes débuts en Javascript), j’ai encore des progrès à faire de ce coté là… C’est d’ailleurs ce qui m’a posé problème dans l’exercice 46 de la formation d’Anthony Welc.

L’exercice 46: mélanger un array

Pour beaucoup, cet exercice peut être simple, et ne comprendront certainement pas pourquoi je n’y suis pas arrivé rapidement. Sentiment que je partage, puisque je m’en suis voulu d’être parti dans des diarrhées frénétique de code pour finalement me perdre dans un raisonnement qui n’était pas le bon.

Rappel de l’exercice: Il fallait faire une fonction qui permettait de permuter les éléments d’un array de manière aléatoire.

function melange(arr){

// Ici le code qui permet de mélanger les nombres dans le tableau

}
console.log(melange([1, 2, 3, 4, 5, 6]));

Je me suis donc perdu pendant 3 jours à essayer de résoudre ce problème avec une boucle for, et des conditions, etc, bref tout l’arsenal complet, pas d’erreur dans la console, mais pas le résultat voulu.

Mon erreur est principalement venue d’un léger détail que j’ai oublié:

le signe = ne veut justement pas dire « égal » mais « j’assigne telle valeur à telle variable ».

La différence est juste énorme, et je m’en suis pas mal voulu…

J’ai donc passé beaucoup de temps à manipuler tout un tas de code que je n’ai pas gardé d’ailleurs, mais en gros voilà ce que je faisais:

  • je créais le premier nombre aléatoire  Math.floor(Math.random * etc…),
  • ensuite je créais une boucle for qui me permettais de générer un nombre aléatoire à chaque tour, en le comparant au précédent, sauf qu’une fois arrivé au troisième nombre, il ne se comparait plus au premier… et souvent le premier nombre ressortait…
  • j’ai donc essayé de créer une fonction qui ne fonctionnait pas correctement, qui avait pour but de comparer le nombre créé à chaque nouvelle itération aux nombres du nouveau tableau que je stockais dans une variable tampon… sans succès…

Ensuite je me suis dis qu’il ne fallait pas créer de nombre, mais réutiliser ceux qui existaient déjà, et qu’il me suffirait de modifier leur index dans le tableau. Après de nombreux bricolage avec indexOf(), j’ai abandonné cette solution.

Au bout de 3 jours de recherches quasi complet à écrire beaucoup pour pas grand chose, je me suis résigné à faire des recherches sur internet pour trouver une explication, un raisonnement mais pas la solution. Je suis finalement tombé sur une explication d’un algorithme de mathématique dont j’ai oublié le nom qui m’a orienté sur la bonne solution.

Je ne donnerais pas la solution dans cet article, car si tu es dans mon cas et que tu suis la formation d’Anthony Welc, tu as sûrement envi d’y arriver tout seul  donc je ne vais pas ruiner ta réflexion et tes tests. Mais n’oublie surtout pas que le signe égal te permet d’assigner une valeur et non de déclarer une égalité… Ma plus grande erreur a été à cet endroit précis…j’en dit pas plus.

La bonne vieille méthode

Une fois la solution trouvée, le navigateur mélange les nombres dans le tableau, on rafraîchit la pages et ça se remélange, bref tout va bien dans le meilleur des mondes. MAIS, il y avait un truc quand même un truc qui me dérangeait un peu, quelque chose qui m’échappait, sans pouvoir mettre un nom dessus. Donc j’ai pris mon crayon et une feuille et j’ai déroulé le code pour chaque tour en écrivant toutes les assignations, et en prenant les valeurs de Math.random que me donnais la console. Et là c’est bon j’ai bien compris, et même à la main ça fonctionne très bien! Il y a des moments où ça fait peur mais au final ça marche! C’est en faisant cet exercice là, de le refaire à la main après coup que j’ai bien vu le fonctionnement.

« Ok mais tu dis qu’il faut écrire avant de coder et là t’as fait l’inverse… ».

C’est vrai, c’est l’explication de l’algo que j’ai trouvé qui m’a mis tout de suite dans la bonne direction et le naturel est revenu au galop… J’aurais aussi pu me dire bon ok ça marche on passe à la suite… mais j’avais besoin de me poser un peu sur le problème et de reprendre le fonctionnement du code que je venais d’écrire avec la bonne vieille méthode papier-crayon.

De toute façon si ça ne marche pas à la main mais que ça fonctionne dans le navigateur… c’est bien qu’il y a un problème…

Si tu as du mal à faire cet exercice, je peux t’envoyer les tests que j’ai fait à la main pour bien comprendre où passent les données, et comment elles s’échangent. Encore une fois je ne le mets pas dans cet article pour ceux qui veulent travailler l’exercice seul.

Pour l’avis d’expert, ou des questions, contactez Antho via Udemy!

C’est tout pour cet article,

Je ferais un second article dans la semaine qui parlera d’ES6, et pourquoi en tant que débutant je m’y mets tout de suite.

D’ici là, amuse toi bien avec l’exercice 46!

A bientôt,

Guillaume