Selaa lähdekoodia

Ajouts page 4.2

Benoît Hubert 7 vuotta sitten
vanhempi
commit
b2a0f803c1

+ 3 - 1
react-tuto/src/markdown/2. Manipuler le HTML/10. split, join, map.md

@@ -40,7 +40,9 @@ console.log(dalton.map(ajouteNbCaracteres));
 ```
 
 Une petite explication : c'est un exemple de programmation fonctionnelle.
-<code>Array.map()</code> prend en paramètre une <em>fonction</em> !
+<code>Array.map()</code> prend en paramètre une <em>fonction</em> ! Ici on a utilisé une fonction nommée, mais
+on aurait pu passer directement une fonction anonyme. Note au passage qu'on a passé la fonction en paramètre, comme on le ferait
+avec n'importe quelle variable.
 
 Cette fonction peut prendre deux paramètres, le second, `index`, étant optionnel :
 

+ 15 - 12
react-tuto/src/markdown/4. Evènements/02. Attacher des handlers.md

@@ -9,7 +9,7 @@ qu'<em>un seul</em> handler.
 <blockquote>
 La méthode <code>element.addEventListener()</code> est l'autre façon d'attacher un handler d'évènement.
 On peut attacher plusieurs handlers en l'appelant plusieurs fois.
-
+<br><br>
 Son pendant pour retirer un handler est la méthode <code>element.removeEventListener()</code>.
 </blockquote>
 
@@ -17,32 +17,35 @@ Exemple, encore avec un bouton :
 ```html
 <button id="btn3">Alerte <strong>une</strong> fois</button>
 <script>
+// Variables
 var handler1dejaSupprime = false;
 var button = document.getElementById('btn3');
-var handler1 = button.addEventListener('click', function() {
+
+// Handlers
+function handlerAlerte() {
   alert('Le bouton #btn3 a été cliqué');
-})
-var handler1dejaSupprime = false;
+}
+
 function enleveHandlerAlerte() {
   if(! handler1dejaSupprime) {
     console.log('Suppression du 1er handler');
-    button.removeEventListener('click', handler1);
+    button.removeEventListener('click', handlerAlerte);
     handler1dejaSupprime = true;
   }
   else {
     console.log('Le 1er handler a déjà été supprimé !');
   }
-
 }
-var handler2 = button.addEventListener('click', enleveHandlerAlerte);
+
+// Attache les handlers
+button.addEventListener('click', handlerAlerte);
+button.addEventListener('click', enleveHandlerAlerte);
 </script>
 ```
 
 Remarques :
-* On a utilisé deux syntaxes différentes pour attacher les handlers :
-    * Le premier a été attaché en utilisant une fonction anonyme, directement passée en paramètre.
-    * Le deuxième a été attaché en passant une fonction nommée.
-* `addEventListener()` retourne une référence au handler, ce qui est indispensable si on souhaite ensuite le retirer.
-* On se sert justement de la référence au premier handler dans le deuxième : les évènements `click` venant après le premier
+* Contrairement à l'exemple précédent, où on attachait fonction anonyme comme handler, on utilise des fonctions nommées.
+C'est indispensable si on souhaite ensuite les retirer.
+* On se sert justement de la référence au premier handler `handlerAlerte` dans le deuxième : les évènements `click` venant après le premier
 ne provoqueront plus d'alerte !
 * On utilise le booléen `handler1dejaSupprime`, pour savoir si on doit supprimer le handler : ceci afin de ne pas tenter de le retirer une deuxième fois !