nouveaux chapitres

Author: ms-studio

22-classes.md

@@ -0,0 +1,44 @@
+---
+layout: page
+title: Classes
+permalink: /js/classes/
+---
+
+Accéder aux classes CSS
+==
+
+Voici quelques besoins courants: 
+
+- Accéder aux classes CSS d'un élément - p.ex. pour déterminer si un menu est fermé ou ouvert.
+- Attribuer une classe CSS à un élément - pour lui appliquer un style, voir une animation CSS.
+
+### Ajouter et supprimer des classes
+
+Voici comment cela se fait avec jQuery:
+
+```javascript
+if ($(".icon .bar").hasClass("active")) {
+  $(".icon .bar").removeClass("active");
+  $(".icon .bar").addClass("notActive");
+} else {
+  $(".icon .bar").removeClass("notActive");
+  $(".icon .bar").addClass("active");
+}
+```
+
+En JavaScript classique, on utilisait une méthode un peu rudimentaire pour ajouter une classe:
+
+```javascript
+el.className += ' ' + className;
+```
+
+Il existe désormais une méthode plus pratique, qui est [supportée dans la majorité des navigateurs](https://caniuse.com/#search=classList) depuis 2013: 
+
+'''javascript
+
+// ajouter une classe
+ELEMENT.classList.add("CLASS_NAME");
+
+// supprimer une classe
+ELEMENT.classList.remove("CLASS_NAME");
+```

40-arrays.md

@@ -0,0 +1,58 @@
+---
+layout: page
+title: Arrays
+permalink: /js/arrays/
+---
+
+Ce chapitre donne quelques informations sur une structure de données particulière : les données tabulaires, ou "array".
+
+Un "array", ce sont des champs de données structurés, un peu comme un tableau excel.
+
+Voici un exemple:
+
+```javascript
+var attente = [ 15, 30, 60 ];
+```
+
+On reconnait les "array" à un détail typographique: l'utilisation de crochets carrés indique qu'on manipule des array.
+
+L'utilité d'un array, c'est de pouvoir plus facilement manipuler ces données, accéder à un champ particulier, changer leur ordre...
+
+Exemple d'utilisation: le projet [Stratagèmes obliques](https://oblique-strategies.github.io/). Il s'agit d'un "jeu de cartes divinatoires". La principale fonctionalité est un tirage de cartes qui puise dans un ensemble de phrases, accompagnée chacune d'une illustration.
+
+On souhaite que le tirage soit aléatoire, mais que la phrase et l'illustration concordent.
+
+On a donc choisi de créer un "array" à deux colonnes, suivant ce modèle:
+
+```
+var cards = [
+  ["NaMi_1.jpg","Honore ton erreur comme une intention cachée"],
+  ["NaMi_3.jpg","Cascades"],
+  ["NaMi_5.jpg","J'aime les ordinateurs, surtout Atari"],
+  ["NaMi_7.jpg","Repousse tes limites"],
+  ["NaMi_9.jpg","Tape avec ta tête sur ton clavier"]
+  // etc.
+];
+```
+
+Au chargement du site, cet array est mis dans un ordre aléatoire.
+
+## Ordre aléatoire
+
+Voici une fonction pratique, qui permet de mettre un array dans un ordre aléatoire:
+
+```javascript
+function shuffle(a) {
+  for (let i = a.length; i; i--) {
+    let j = Math.floor(Math.random() * i);
+    [a[i - 1], a[j]] = [a[j], a[i - 1]];
+  }
+}
+```
+
+On peut l'appliquer sur un array de cette façon:
+
+```javascript
+shuffle(array);
+```
+

57-urls.md

@@ -0,0 +1,25 @@
+---
+layout: page
+title: URLs
+permalink: /js/urls/
+---
+
+Interagir avec des URLs.
+
+Recharger la page courante: `location.reload();`
+
+Redireger vers une page:
+
+window.location.href="https://oblique-strategies.github.io/";
+
+### Tester une variable URL
+
+```javascript
+var modeDemo = window.location.hash;
+
+if ( modeDemo == "#demo" ) {
+
+	// Faire quelque chose
+
+} 
+```