Vous travaillez toujours sur le projet de site web de Robbie Lens. Cette fois-ci vous êtes sur une nouvelle page, celle du portfolio. Elle est constituée d’une grille qui contient des photos de paysages et de portraits. Vous avez tenté de rajouter toutes ces images une par une dans votre code HTML, mais c’est long… Alors vous essayez de le faire de manière dynamique avec du JavaScript et des boucles for. Seulement voilà, vous lancez votre code et aucune image n'apparaît :
Étape 1 : posez-vous des questions pour analyser la situation
Comment savez-vous que vous avez une erreur ?
Il semblerait ici que ce ne soit pas le comportement que vous attendiez.
Votre page s’affiche, la structure faite en HTML est bien présente, mais pas ce que vous avez fait en JavaScript.
C’est ça aussi, du code propre.
Étape 2 : procédez par élimination en relisant votre code
Commencez toujours par relire le code. La plupart de vos erreurs seront des erreurs d’inattention, que vous ayez 1 mois ou 10 ans d’expérience. Les bonnes pratiques vous permettront de mieux anticiper et d’aller plus vite dans votre recherche.
Vous ne trouvez rien dans le code. Il n'y a pas d’erreur de syntaxe à l’horizon, donc vous allez voir dans la console.
Et là, il y a un log d’erreur ! C’est un super indice, ça !
Étape 3 : prenez du recul
Fermez votre ordinateur un instant. Je vais vous laisser réaliser cette étape par vous-même.
Prenez votre canard en plastique (ou un autre objet) et parlez-lui à voix haute. Imaginez que c'est un enfant, et essayez d'expliquer le plus simplement possible ce que vous venez de faire pour vérifier que vous avez bien compris où vous en êtes. Cela vous aidera à structurer votre pensée.
Allez-y : prêtez-vous à l'exercice et je vous récupère à l'étape 4.
Toujours rien ? Passons à l'étape 4 !
Étape 4 : utilisez les ressources disponibles
Essayons de comprendre ensemble cette erreur.
Premièrement, elle nous indique des lignes et un nom de fichier. Commencez par aller voir à cet endroit du projet si vous n’auriez pas omis quelque chose.
La ligne 53 est là où il y a vraiment le problème, dans la fonction createImage .
Puis la ligne 62 indique où l'on appelle createImage dans la fonction createPaysage .
Enfin, la ligne 73 est là où l’on appelle createPaysage .
Cela nous permet de retracer l'exécution du code.
Mais c’est appendChild ligne 53 qui semble poser problème.
Pensez aussi à regarder sur les lignes en amont et en aval, il arrive que l’indication soit sur une ligne, mais le problème avant ou après.
Bon… Vous ne trouvez rien ou vous n’êtes pas sûr de comprendre ?
Ce n’est pas grave, internet aura probablement la solution !
Mais comment fait-on une bonne recherche internet ?
Favorisez Google comme moteur de recherche, car c’est celui qui recense le plus de résultats.
Utilisez des mots-clés. Un moteur de recherche utilise les termes et les verbes les plus présents dans les résultats. Pas besoin donc de faire de longues phrases !
Privilégiez l’anglais, car c’est la langue universelle en développement ; vous aurez donc forcément plus de solutions.
N’oubliez pas de préciser le langage ou la technologie que vous utilisez. Plus vous serez précis, plus les résultats le seront.
N’utilisez pas des mots ou des noms propres à votre projet. Google ne connaît pas le nom de votre fichier ni celui de votre fonction.
Pour ce qui est des résultats de votre recherche, même si l'expérience vous aidera à avoir votre liste de sites de référence, voici quelques conseils :
Vérifiez toujours la date de publication de ce que vous lisez.
Privilégiez les sites officiels des technologies, et surtout leur documentation. Un terme souvent utilisé sur les forums : “RTFM” (Read the freaking manual).
Ne passez pas trop de temps sur une même ressource. Si vous n’avez pas trouvé la réponse, c’est qu’elle n’est pas là.
Dépilez dans le sens des propositions de Google. Il vous propose ce qu’il y a de plus pertinent en premier.
Si vous arrivez sur la deuxième ou troisième page de résultats, c’est que votre recherche n’est probablement pas bonne et qu’il faut la revoir.
Notre recherche ici sera :
“Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. JavaScript”.
En fait on copie-colle le message d'erreur tel quel et on précise ensuite le langage de programmation en question, en l'occurrence ici JavaScript. Ce qui nous permet d'avoir des résultats plus précis.
Explorons ensemble un lien Stack Overflow qui nous dit :
Nous vérifions qu’il s’agit de la même erreur, puis nous regardons les réponses apportées. La première est celle-ci :
Pour savoir si une réponse est intéressante, il faut regarder le nombre de votes positifs. Ici on en a 331, c'est bon signe.
Bref, vous utilisez la fonction appendChild . Vous lui donnez en paramètre une chaîne de caractères, et cela ne semble pas lui convenir.
Le terme ‘node’ désigne un élément. N'hésitez pas à faire une recherche internet si vous ne comprenez pas un terme, c’est comme ça qu’on continue à apprendre !
Cherchons sur Google : ‘document create text javascript’. Bingo !
Les exemples sur le site W3schools sont plus que parlants ! Nous avons besoin de createTextNode() :
Vous avez trouvé le problème, vous pouvez donc passer directement à l'étape 5 !
Étape 5 : résolvez le problème
Maintenant que vous avez une solution à votre erreur d'exécution, il n’y a plus qu'à la tester !
Modifiez "Voir la photo" en document.createTextNode("Voir la photo") .
Lancez la page web… Tada !
Bien sûr, vous avez peut-être pu trouver d’autres solutions qui auraient fonctionné. Il y a rarement une seule façon de faire du code !
En tout cas, les images sont là, il n’y a plus d’erreurs dans la console.
Vous pouvez même inspecter votre code dans l’onglet 'Éléments’ afin de vérifier que c’est bien le code HTML que vous souhaitez en résultat.
Testez le reste des fonctionnalités pour être sûr, et vous pouvez faire un commit sur Git !
Appuyez-vous sur l’IA
Pour cette erreur, vous pouvez obtenir de l'aide de la part d'outils d'intelligence artificielle comme ChatGPT. Avec les conseils du chapitre précédent, préparez un exemple et allez sur ChatGPT pour le tester. Si vous avez oublié les conseils, ne vous inquiétez pas ! Voici les éléments clés :
Faites un rappel du contexte
Détaillez l'erreur obtenue
Partagez le code concerné par le bug
Posez votre question
Voyons ce que l’on aurait pu demander :
Rappel du contexte : « Je souhaite parcourir un tableau d’images en Javascript pour les afficher dans ma page. »
Détail de l’erreur obtenue : «Cependant, mes images ne s’affichent pas. De plus, j’ai l’erreur “Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.” dans la console, correspondant à la ligne “div.appendChild(content)”. »
Code concerné par le bug : « Voici la fonction en question : » (insertion du code de la fonction createImage)
Question : « Comment corriger ce problème ? »
Ainsi, notre prompt serait :
Ce à quoi ChatGPT répond :
ChatGPT a donc très bien cerné le problème, a su nous l’expliquer et à nous donner le code corrigé.
En résumé
La console nous permet de lire les erreurs d'exécution, quel que soit le langage.
Pour faire une bonne recherche internet, il faut utiliser les bons mots-clés, la bonne langue, et vérifier ses sources.
La documentation officielle et le site Stack Overflow sont souvent les meilleurs alliés des recherches web.
Le code propre, c’est aussi bien découper son code en fonctions, si le langage le permet.
Vous en voulez encore ? Alors on continue avec une dernière erreur, qui, vous vous en douterez, sera de type logique.
