Ajout exemple avec map&join

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

@@ -0,0 +1,55 @@
+On peut faire encore mieux ! On va pour ça introduire trois fonctions JS.
+
+La première ne va pas nous servir, mais on la donne pour avoir un peu de contexte.
+
+<blockquote>
+<code>String.split()</code> permet de <em>découper</em> une chaîne selon un <em>séparateur</em>,
+(chaîne), et produit un tableau.
+</blockquote>
+
+```javascript
+var dalton = 'Joe,William,Jack,Averell'.split(',');
+console.log(dalton); // affiche ['Joe', 'William', 'Jack', 'Averell']
+```
+Remarque que j'ai appliqué directement `split` sur la chaîne littérale, sans l'affecter
+à une variable. Une chaîne est un objet, de la "classe" String, je peux donc lui
+appliquer une méthode !
+<blockquote>
+L'inverse de <code>String.split()</code>, <code>Array.join()</code>, permet de créer une chaîne à partir d'un tableau,
+en utilisant une chaîne de caractères pour faire office de "glue" :
+</blockquote>
+
+```javascript
+var daltonLignes = dalton.join('\n');
+console.log(daltonLignes); // affiche un nom par ligne
+```
+Ici on a utilisé `'\n'` qui est le séparateur de ligne, qu'on trouve dans à peu près tous les langages !
+
+<blockquote>
+La troisième fonction, <code>Array.map()</code> applique une <em>fonction</em> sur chaque élément d'un tableau :
+</blockquote>
+
+```javascript
+// Ajoute à une chaîne de caractères
+// son nombre de caractères, entre ()
+function ajouteNbCaracteres(str) {
+  return str + ' (' + str.length + ')';
+}
+console.log(dalton.map(ajouteNbCaracteres));
+// Affiche ["Joe (3)", "William (7)", "Jack (4)", "Averell (7)"]
+```
+
+Une petite explication : c'est un exemple de programmation fonctionnelle.
+<code>Array.map()</code> prend en paramètre une <em>fonction</em> !
+
+Cette fonction peut prendre deux paramètres, le second, `index`, étant optionnel :
+
+```javascript
+function traiteUnElement(element, index) {
+  // Fait quelque chose avec element (et index)
+  // et retourne le résultat
+}
+var resultat = tableau.map(traiteUnElement);
+```
+
+Attention, là encore JS ne vérifie rien, c'est à nous d'être rigoureux !

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

@@ -0,0 +1,21 @@
+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.