Journal des phases

Bonjour et bienvenue sur mon blog ! J'apprends Javascript, HTML et d'autres compétences pour apprendre le développement de logiciels full stack, et je documenterai ici certaines de mes expériences afin de faire le point sur mes connaissances jusqu'à présent et de partager également certaines leçons que j'ai apprises en cours de route. avec d'autres nouveaux codeurs.

Cet article discutera de certaines erreurs que j'ai commises jusqu'à présent lors de l'apprentissage de Javascript, en particulier lors de la réalisation de mon premier grand projet. Mon projet prend des informations sur les produits de maquillage à partir d'une API et les met sur une page Web de manière organisée et visuellement agréable.

Erreur n°1 : Ne pas automatiser autant que possible
L'API à partir de laquelle mon projet obtient des informations est un grand tableau, donc la façon dont j'ai finalement décidé de structurer mon projet était d'utiliser la méthode forEach sur le tableau renvoyé par mon API et de créer dynamiquement un nouvel élément HTML div pour chaque élément de le Array pour chaque produit de maquillage. Vous pouvez voir cette structure à partir de la ligne 10 de la capture d'écran ci-dessous.

Description de l'image

Au départ, cependant, j'ai essayé d'attribuer chaque élément du tableau de mon API à des éléments HTML div que j'avais déjà créés dans le fichier HTML de mon projet. Cette méthode s'est avérée très difficile car au lieu de créer de nouveaux éléments HTML basés sur les informations de l'API, j'ai dû créer manuellement des div dont je savais qu'ils correspondraient aux éléments du tableau API, une stratégie qui prenait du temps et était plus sujette aux erreurs. De plus, mon idée initiale n'aurait pas fonctionné si les éléments de l'API Array avaient changé, ce qui aurait rendu mon projet beaucoup moins polyvalent. Bien que ma méthode non dynamique de création d'éléments HTML div n'ait pas été le bon choix pour mon projet pour les raisons évoquées, je pense que j'ai quand même appris de précieuses leçons en essayant mon projet de cette manière, donc les autres erreurs que je partagerai dans ce message proviendra de ce code.

Erreur n°2 : erreur d'identité
Si quelque chose ne fonctionne pas, une bonne chose à vérifier est si l’aspect de votre code que vous modifiez est celui que vous pensez. Vous obtenez peut-être une erreur parce que vous essayez d’utiliser une méthode qui n’est pas applicable. Deux outils utiles pour ce type de dépannage sont console.log() et typeOf().
J'ai utilisé les deux lorsque mon code initial pour mon projet ne fonctionnait pas comme prévu. Lorsque vous utilisez console.log() et des boucles for en même temps, il peut être utile d'en mettre une à l'intérieur de la boucle for et une autre à l'extérieur de la boucle for, afin que vous puissiez voir exactement où votre code s'arrête.
Vous pouvez voir comment j'ai fait cela dans la capture d'écran ci-dessous.

Description de l'image

Plus tard, j'ai aussi fait console.log(typeOf(thisDiv)) afin de voir si thisDiv était un objet. Rétrospectivement, la capture d'écran ci-dessus n'a probablement pas fonctionné car product.id était très probablement un nombre, alors que thisDiv était en effet un objet. Mais malgré cette erreur, console.log() et typeOf() étaient de bons outils pour m'ancrer et déterminer mes prochaines étapes.

Erreur n°3 : Oublier quelque chose n'existe peut-être pas
Parfois, le code peut se briser non pas parce que vous essayez de changer quelque chose qui est différent de ce que vous pensez, mais parce que vous essayez de changer quelque chose qui n'existe pas. En travaillant sur ma méthode initiale pour mon projet, une fois que j'étais sûr que thisDiv était un objet, je ne comprenais pas pourquoi thisDiv.id n'était pas reconnu, car cette syntaxe est un moyen valide d'obtenir une valeur d'objet selon W3schools ( https://www.w3schools.com/js/js_objects.asp). J'ai décidé de changer la ligne 14 en "console.log(Object.keys(thisDiv))" afin de pouvoir obtenir le bon moyen d'obtenir l'identifiant de thisDiv afin de pouvoir corriger mon instruction if qui commence à la ligne 15 et comparer le clé d'identification de thisDiv vers product.id.

Description de l'image

J'ai eu l'erreur suivante à cause de ce changement :

Non capturé (promis) TypeError : impossible de convertir un élément défini ou nul en objet
à Function.keys ()
à index.js : 14:32
à Array.forEach ()
à displayProdName (index.js:11:10)
à index.js :6:21
Dans mon travail en Python, j'ai constaté que parfois, si le premier élément d'une boucle for n'existe pas ou n'a pas les caractéristiques nécessaires pour exécuter les instructions de la boucle for, le code sera interrompu et aucune itération de la boucle for se produira. Je pensais qu'un problème similaire pourrait se produire dans ma boucle Javascript for pour ce projet, car pour i=0, la première itération de ma boucle for à la ligne 12, document.getElementById(0) n'existait pas, donc thisDiv n'existait pas. t existe pour la première itération de i. Ainsi, le console.log(Object.keys(thisDiv)) n'a pas fonctionné, car thisDiv n'était pas un objet, donc il n'avait aucune clé. Ainsi, se rappeler que parfois certains aspects de votre code peuvent ne pas exister peut vous faire gagner beaucoup de temps lors du codage.

Ces trois leçons font partie des nombreuses leçons que j’ai apprises en commençant mon voyage vers Javascript. J'espère que cette lecture vous a été utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!