1
0
Преглед на файлове

Corrections et résumé section 2

Benoît Hubert преди 7 години
родител
ревизия
52d8a063ca

react-tuto/src/markdown/2. L'API DOM/23. Quelques précautions.md → react-tuto/restes section 2/23. Quelques précautions.md


react-tuto/src/markdown/2. L'API DOM/25. Manipuler les styles.md → react-tuto/restes section 2/25. Manipuler les styles.md


react-tuto/src/markdown/2. L'API DOM/26. Exercice.md → react-tuto/restes section 2/26. Exercice.md


react-tuto/src/markdown/2. L'API DOM/zz.md → react-tuto/restes section 2/zz.md


+ 0 - 21
react-tuto/src/markdown/2. L'API DOM/11. HTML avec map et join.md

@@ -1,21 +0,0 @@
-On peut utiliser `map()` et `join()` pour construire une chaîne de façon
-plus élégante qu'au point n°9 :
-
-```html
-<ul id="ingredients"></ul>
-<script>
-var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
-var listeHtml = ingredients.map(
-  function(ingredient) {
-    return '<li>' + ingredient + '</li>';
-  }
-).join('');
-var listeElem = document.getElementById('ingredients');
-listeElem.innerHTML = listeHtml;
-</script>
-```
-
-Ici on a utilisé `Array.map()` pour créer la chaîne d'un item de liste, à partir du texte
-de l'item (un ingrédient). Remarque que j'ai passé une fonction <em>directement</em> en paramètre,
-sans la déclarer auparavant, et sans la nommer : cette utilisation d'une **fonction anonyme**
-est très courante en JS.

react-tuto/src/markdown/2. L'API DOM/01. Introduction : le document.md → react-tuto/src/markdown/2. Manipuler le HTML/01. API DOM - Introduction.md


react-tuto/src/markdown/2. L'API DOM/02. Eléments et noeuds texte.md → react-tuto/src/markdown/2. Manipuler le HTML/02. Eléments et noeuds texte.md


react-tuto/src/markdown/2. L'API DOM/03. Trouver un élément.md → react-tuto/src/markdown/2. Manipuler le HTML/03. Trouver un élément.md


react-tuto/src/markdown/2. L'API DOM/04. Trouver plusieurs éléments.md → react-tuto/src/markdown/2. Manipuler le HTML/04. Trouver plusieurs éléments.md


react-tuto/src/markdown/2. L'API DOM/05. Ajouter un élément.md → react-tuto/src/markdown/2. Manipuler le HTML/05. Ajouter un élément.md


react-tuto/src/markdown/2. L'API DOM/06. Ajouter un élément - exercice.md → react-tuto/src/markdown/2. Manipuler le HTML/06. Ajouter un élément - exercice.md


react-tuto/src/markdown/2. L'API DOM/07. Ajouter un élément - solution.md → react-tuto/src/markdown/2. Manipuler le HTML/07. Ajouter un élément - solution.md


react-tuto/src/markdown/2. L'API DOM/08. Modifier un élément.md → react-tuto/src/markdown/2. Manipuler le HTML/08. Modifier un élément.md


react-tuto/src/markdown/2. L'API DOM/09. Construire du HTML.md → react-tuto/src/markdown/2. Manipuler le HTML/09. Construire du HTML.md


react-tuto/src/markdown/2. L'API DOM/10. split, join, map.md → react-tuto/src/markdown/2. Manipuler le HTML/10. split, join, map.md


+ 28 - 0
react-tuto/src/markdown/2. Manipuler le HTML/11. HTML avec map et join.md

@@ -0,0 +1,28 @@
+On peut utiliser `map()` et `join()` pour construire une chaîne de façon
+plus élégante qu'au point n°9. On combine cela avec la création d'un élément
+vue au point n°5 :
+
+```html
+<script>
+// Crée une liste ul et l'ajoute au body
+var listeIngredients = document.createElement('ul');
+document.body.appendChild(listeIngredients);
+// Crée les futurs items de la liste et les assemble
+var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
+var listeHtml = ingredients.map(
+  function(ingredient) {
+    return '<li>' + ingredient + '</li>';
+  }
+).join('');
+// Injecte le résultat dans la liste
+listeIngredients.innerHTML = listeHtml;
+</script>
+```
+
+Ici on a utilisé `Array.map()` pour créer, à partir de chaque ingrédient, un item de liste.
+Remarque qu'on a passé une fonction <em>directement</em> en paramètre,
+sans la déclarer auparavant, et sans la nommer : cette utilisation d'une **fonction anonyme**
+est très courante en JS.
+
+On a ensuite assemblé ces items séparés en utilisant `join()` avec une chaîne vide en argument,
+ce qui revient à "coller" tous les items les uns à la suite des autres dans une chaîne.

+ 10 - 0
react-tuto/src/markdown/2. Manipuler le HTML/12. Résumé.md

@@ -0,0 +1,10 @@
+Une deuxième section de terminée ! Un petit rappel de ce qu'on a vu :
+
+* Examiner l'objet `document` dans la console, et à partir de là, parcourir
+  l'arbre du DOM
+* Trouver un élément avec `getElementById()`, ou plusieurs avec `getElementsByTagName()`
+  et `getElementsByClass()`
+* Construire des éléments en partant de rien, avec `createElement()`, `createTextNode()`
+et `appendChild()`
+* Modifier le contenu HTML d'un élément
+* Construire un élément et lui assigner un contenu HTML en utilisant `Array.map()` et `Array.join()`