Comment je suis devenu développeur en un mois : leçon n°2, créer un mini-jeu
CARNET DE BORD (2/4). Peut-on en un mois percer les mystères du code ? À l'heure où les développeurs Web sont de plus en plus convoités, l'Etudiant tente l'expérience. Durant quatre semaines, notre journaliste va suivre les cours de langage Javascript du site Openclassrooms. Certifiés, ces cours doivent conférer les mêmes compétences qu'un développeur pro...
Internet a sa propre loi : "Programmez ou soyez programmé". Mais est-il si facile d'entrer dans la catégorie des "codeurs" ? C'est le défi que l'on s'est lancé à l'Etudiant durant un mois. La semaine dernière, on apprenait, à raison de deux heures par jour, les rudiments du Javascript. Un langage omniprésent sur le Web, responsable de la plupart de nos applis.
Que l'on soit novice ou expert, il y a toujours des moments où ce dialecte paraît très alambiqué. Les scripts s'imbriquent à n'en plus finir. Comme si, pour comparer, on ouvrait à l'oral une série de parenthèses que l'on ne refermerait que plusieurs minutes plus tard.
Mais heureux ceux qui détestent les instructions trop longues. Lors de cette deuxième semaine de code, on a découvert qu'il existait des raccourcis. Des artisans du Javascript ont développé une bibliothèque (un kit de codes prêt à l'emploi) pour en alléger l'écriture. Elle s'appelle jQuery.
Un exemple de code JavaScript. © Openclassrooms
Jour 8 : le jQuery, le choc des simplifications
Rembobinons un peu. La semaine dernière, on remettait notre copie à Stéphane, notre mentor. Il fallait coder un générateur de citations aléatoires. C'était le premier projet d'un parcours de "développeur front-end", qui en compte cinq au total pour décrocher le sésame : un certificat de réussite.
24 heures plus tard, le verdict de Stéphane tombe :
Ouf ! Il est temps d'embrayer sur le projet suivant. Il est cette fois d'une toute autre ampleur. Le défi consiste à forger de A à Z un jeu de plateau en 2D où des personnages, armés jusqu'aux dents, se déplacent de case en case et bataillent sans merci. 130 heures de réalisation en théorie. Alléchant. Mais comment faire ça ? Avec jQuery.
Cette bibliothèque formidable vise à "modifier l'agencement de la page sur laquelle vous travaillez" prévient en accroche l'auteur du cours, un "dinosaure" du code qui a utilisé le jQuery dans ses premières versions (c'est-à-dire dès 2006).
Autrement dit, le jQuery agit en direct sur les éléments d'une page Web. Il les modifie, les duplique, les éradique, les anime, les ventile... Suivant ce que l'internaute y fait : un clic, une pression sur une touche. Si les lignes que vous lisez en ce moment étaient affectées par du jQuery, elles pourraient disparaître en un instant, passer du rouge au vert, ou être traduites en chinois. Sans que vous ayez besoin d'actualiser la page.
On obtient des choses comme cela. Heureusement que c'est censé simplifier...
Jour 9 : on est ravi, vraiment
Pour saisir toute la puissance de jQuery qu'on va explorer ici, il faut rappeler quelques rudiments. Chaque page Web contient une flopée d'éléments : des images (qui s'écrivent "img" en HTML), des tableaux ("table"), des paragraphes ("p"), des formulaires ("form") avec des boutons ("button"). Chacun peut être assorti à des caractéristiques qui vont définir son apparence : sa taille, sa couleur de fond, sa position dans la page, etc.
Dans l'ADN du Javascript (et son excroissance, le jQuery), des bases servent à sélectionner tous ces éléments, un à un ou plusieurs en même temps, pour leur appliquer des actions. Nous reviendrons sur ces actions plus loin. Pour l'heure, comment sélectionner – par exemple – la première image de la page ? Toutes les lignes paires d'un tableau ? Les cases qui n'ont pas été cochées par un internaute ? Des tonnes d'instructions – table:first, img:last, .grandBloc:eq(2), etc. – ont été usinées à cette fin.
De prime abord, la lecture de cette tranche du cours est déconcertante. On note sur notre cahier un fatras interminable de méthodes et de codes spécifiques à chaque type d'éléments d'une page Web, et dont l'usage immédiat n'est pas évident. On lit, on relit, on rature, on est ravi d'apprendre qu'une instruction comme $(':radio').val(['H']) permet de cocher une case identifiée par la lettre H...
Jour 10 : pire que le Code pénal
Zut, les choses se compliquent : il faut manipuler le design des pages Web. On a là des marges internes, des bordures, des espacements, des positions dans l'espace (à la manière des axes X et Y sur un graphe)...
À cela, s'ajoutent d'autres réjouissances : les codes qui permettent de modifier l'apparence des éléments : attr, removeAttr, addClass, removeClass... Ce n'est pas que le cours est difficile, c'est que le nombre d'instructions, à l'instar des articles du Code pénal, s'aligne sur des kilomètres. On n'est pas forcément obligé de les mémoriser. Mais il s'agit de savoir qu'elles existent, en cas de besoin plus tard.
Viennent ensuite les méthodes (des actions, en gros) qui permettent de remplacer, d'ajouter, de déplacer ou de dupliquer des sélections sur une page. La méthode "wrap" (qui entoure un élement avec des balises HTML) donne envie d'aller dévaliser une chaîne de fast-food ! Le reste est un peu confus au départ. On imbrique des méthodes, des boucles, des appels de fonctions... Et on bâtit des formulaires qui se mettent à jour en temps réel.
En machine : navigateur :
Traduit par le navigateur :
Jour 11 : c'est laid, on assume
Pour tester cette culture langagière acquise à la force du cortex, le cours propose un petit travail pratique. Confectionner un QCM (par exemple sur le jQuery) qui affiche les corrections au survol d'un texte par le pointeur de la souris. En machine, les choses vont assez vite à faire. À la surface, c'est laid et mal fichu.
Il reste même du temps pour se casser les dents sur l'activité qui clôt le chapitre. Il faut concevoir un générateur de formulaires (comme ceux que vous remplissez en ligne). Petit problème : cela fait appel à des notions de Javascript jamais abordées jusque-là. À l'exception de ce couac, tout va bien.
Jour 12 : une tête de chat qui bouge
Une fois qu'on maîtrise les techniques pour réagir aux clics des internautes, les choses deviennent plus drôles (et donc pédagogiques). Ci-dessous, on code une tête de chat qui change de position après qu'on a cliqué dessus :
Les chapitres suivants injectent des notions bien utiles : animer des éléments, les faire disparaître, puis réapparaître, en ayant une emprise sur le temps d'animation. Chouette.
En prévision de la séance de "mentoring" du lendemain avec Stéphane, on se prend à noter des questions qui nous taraudent. Mais dont, sincèrement, on ignorait qu'elles seraient susceptibles de nous tourmenter quelques jours plus tôt. Du type : "Pour désactiver une méthode de gestion événementielle, vaut-il mieux passer par une fonction de traitement intermédiaire ou par un namespace pour éviter les interférences avec les plugins ?".
Jour 13 : l'heure du mentorat
Séance matinale avec Stéphane. On discute du projet, le jeu de plateau. "Il faut se mettre un peu la pression, sans exploser non plus", assure-t-il. Il soulève les difficultés. "Il y a des cases interdites qu'il faut placer, beaucoup de cas particuliers, la gestion de la proximité de l'ennemi... Mais la difficulté essentielle de ce projet, c'est l'algorithmique." Voilà qui promet...
