Ajout section 3 - styles et classes

react-tuto/restes section 2/25. Manipuler les styles.md

@@ -1,4 +1,10 @@
-On continue sur l'exemple précédent. À la fin du script, ajoute :
+<blockquote>
+On peut manipuler les styles d'un élément, en affectant des valeurs aux clés
+de sa propriété <code>style</code>. Ces clés sont tout simplement les noms des propriétés CSS
+disponibles.
+</blockquote>
+
+Reprends l'exemple du point n°11 de la section 2. &Agrave; la fin du script, ajoute :
 ```javascript
 var items = document.getElementsByTagName('li');
 for(var i = 0 ; i < items.length ; i++) {

react-tuto/src/markdown/3. Styles et classes/02. Traitement différencié.md

@@ -0,0 +1,35 @@
+L'exemple précédent montrait l'application systématique d'un style à tous les éléments
+d'une liste.
+
+<blockquote>
+Il est parfois intéressant d'appliquer un traitement différent, en fonction d'un certain
+critère.
+</blockquote>
+
+Admettons que je sois végane, et que je veuille afficher les ingrédients avec un code
+couleur pour indiquer s'ils sont compatibles, ou pas, avec un régime végétalien.
+
+Toujours avec l'exemple du point 2.11, remplace le code du point précédent par celui-ci :
+```javascript
+var produitsAnimaux = ['Oeufs', 'Beurre'];
+function isItVegan(ingredient) {
+  return produitsAnimaux.indexOf(ingredient) === -1;
+}
+
+var items = document.getElementsByTagName('li');
+for(var i = 0 ; i < items.length ; i++) {
+  var ingredient = ingredients[i];
+  if(isItVegan(ingredient)) {
+    items[i].style.color = 'green';
+  }
+  else {
+    items[i].style.color = 'red';
+    items[i].style['font-weight'] = 'bold';
+  }
+}
+```
+
+On a ici introduit la fonction `Array.indexOf()`. Elle permet de savoir la position
+d'un élément dans un tableau. Si l'élément ne s'y trouve pas, elle renvoie `-1`.
+`isItVegan()` cherche l'ingrédient passé en paramètre dans le tableau `produitsAnimaux`.
+S'il n'y est pas, c'est végane !

react-tuto/src/markdown/3. Styles et classes/03. Manipuler les classes.md

@@ -0,0 +1,33 @@
+On aurait pu faire la même chose que dans l'exemple précédent, en utilisant des classes CSS.
+
+<blockquote>La propriété <code>className</code> d'un élément contient la classe
+(ou les classes séparées par des espaces) de celui-ci.
+
+Dans l'en-tête (`head`) du HTML, ajoute ceci :
+```html
+<style>
+.ok-vegane { color: green; }
+.pas-vegane { color: red; font-weight: bold; }
+</style>
+```
+Remplace **juste la boucle for** de la section précédente par celle-ci :
+```javascript
+for(var i = 0 ; i < items.length ; i++) {
+  var ingredient = ingredients[i];
+  items[i].className = isItVegan(ingredient) ?
+    'ok-vegane' : 'pas-vegane';
+}
+```
+Note l'utilisation de l'opérateur ternaire, qui ne doit pas t'être inconnu puisqu'il
+a la même syntaxe en Java :
+```javascript
+valeur = condition ? valeurSiVrai : valeurSiFaux;
+```
+
+Tiens, une question : précédemment, on a manipulé les styles avec la propriété `style` de l'élément,
+ce qui est cohérent avec l'attribut `style` sur une balise. Pourquoi donc est-ce `className` ici, plutôt que `class`
+comme on aurait pu s'y attendre ?
+
+La réponse est simple : le mot-clé `class` est un mot réservé en JavaScript ! &Agrave; vrai dire,
+il n'était pas utilisé jusqu'à ES5, la version précédente du langage. Mais comme on l'a déjà dit, ES6, qui commence à être
+bien supporté par les navigateurs, permet de déclarer des classes (au sens programmation objet) avec `class`.