Suite les bases de JS
https://docs.google.com/document/d/1gRA9N2u6O6eozarmP1yzYjEKvsAaMEztooWzCKKkPSI/edit?usp=sharin
👩🏼🎓 Ce qu'il faut comprendre en priorité
Générer une liste HTML à partir d’un tableau JavaScript
Le résultat HTML :
<ul>
<li>Pomme</li>
<li>Poire</li>
<li>Banane</li>
</ul>
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises <ul> et </ul> sont écrites directement, car nous savons que nous voulons créer une liste.
L’insertion dynamique : ${...} permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.
La génération des éléments : fruits.map(fruit => ...) parcourt le tableau et génère un élément <li> pour chaque fruit.
La réunion des éléments : .join("") rassemble les différentes chaînes HTML en une seule, sans séparateur.
👩🏼🎓À retenir : - les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...} permet de calculer le contenu à insérer.
🚀 Ainsi, si le tableau contient davantage de fruits, la liste s’adapte automatiquement.
👩🏼🎓L’idée essentielle :
🪛On écrit les balises HTML que l’on connaît et on utilise ${...} pour générer dynamiquement les éléments <li> à partir d’un tableau JavaScript.
Explications :
La structure HTML fixe : les balises
<ul>et</ul>sont écrites directement, car nous savons que nous voulons créer une liste.L’insertion dynamique :
${...}permet d’insérer le résultat d’une expression JavaScript dans la chaîne HTML.La génération des éléments :
fruits.map(fruit => ...)parcourt le tableau et génère un élément<li>pour chaque fruit.La réunion des éléments :
.join("")rassemble les différentes chaînes HTML en une seule, sans séparateur.
- les backticks ` ` délimitent le template literal,
- le HTML fixe en définit la structure et
${...}permet de calculer le contenu à insérer.
🥷🏼Le problème des structures hétérogènes
🪛Comment afficher dans un même tableau HTML des objets dont la structure est inconnue et les attributs différents ? Faut-il prévoir manuellement une colonne pour chaque attribut possible ?
🛟La solution : parcourir dynamiquement les attributs des objets pour construire automatiquement les colonnes du tableau et afficher les données disponibles.