7 years ago · 40f6cdc923
--- a/css/style.css
+++ b/css/style.css
@@ -155,7 +155,9 @@ span.breadcrumb::before {
 
				 .page blockquote {
			
 
				   border-left: 5px solid #ffb74d;
			
 
				 }
			
 
				-
			
 
				+.page img {
			
 
				+  max-width: 100%;
			
 
				+}
			
 
				 /* About page images */
			
 
				 .about img {
			
 
				   max-height: 48px;
			
--- a/img/logo-ipi.png
+++ b/img/logo-ipi.png
--- a/img/logo-python.png
+++ b/img/logo-python.png
--- a/img/tuto/python.gif
+++ b/img/tuto/python.gif
--- a/img/tuto/python3-win-install.gif
+++ b/img/tuto/python3-win-install.gif
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 
				   <head>
			
 
				     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
			
 
				     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
			
 
				-    <title>Atelier web WCS</title>
			
 
				+    <title>CGI Python / Django</title>
			
 
				 
			
 
				     <!-- CSS  -->
			
 
				     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
			
--- a/react-tuto/src/components/Navbar.js
+++ b/react-tuto/src/components/Navbar.js
@@ -6,8 +6,8 @@ class Navbar extends React.Component {
 
				     return (
			
 
				       <nav className="light-blue lighten-1" role="navigation">
			
 
				         <div className="nav-wrapper"><Link id="logo-container" to="/" className="brand-logo">
			
 
				-          <img src="img/logo-wcs.png" alt="logo WCS" />
			
 
				-          <img src="img/logo-js.png" alt="logo JS" />
			
 
				+          <img src="img/logo-ipi.png" alt="logo IPI" />
			
 
				+          <img src="img/logo-python.png" alt="logo Python" />
			
 
				         </Link>
			
 
				           <ul className="right hide-on-med-and-down">
			
 
				             <li><Link to="/a-propos">&Agrave; propos</Link></li>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,14 +0,0 @@
 
				-Ouvre le fichier `empty.html`. A part l'entête, c'est vide. &Agrave; toi de jouer !
			
 
				-
			
 
				-Commence par ajouter du contenu entre les tags `<body>` et `</body>`,
			
 
				-sous `<!-- CONTENU -->`. Un bouton par exemple :
			
 
				-```html
			
 
				-<button onclick="alert('Hi!')">Click me</button>
			
 
				-```
			
 
				-Après l'ajout, recharge cette page, puis clique le bouton pour voir.
			
 
				-
			
 
				-Cela peut déjà te donner une idée de l'utilité de JavaScript :
			
 
				-
			
 
				-<blockquote>
			
 
				-JS a été créé pour <strong>ajouter de l'interactivité</strong> aux pages web.
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,16 +0,0 @@
 
				-Le bouton ajouté précédemment permet l'affichage d'un message quand on le
			
 
				-clique, via la fonction `alert()` de JavaScript.
			
 
				-
			
 
				-Cette fonction fait partie de l'**API** offerte par le navigateur, à distinguer
			
 
				-du **langage** lui-même (tout comme **Java** dont l'API ne se confond pas avec
			
 
				-le langage).
			
 
				-
			
 
				-<blockquote>
			
 
				-  Le navigateur est <strong>un</strong> des environnements d'exécution du JS.
			
 
				-</blockquote>
			
 
				-
			
 
				-C'est le plus répandu, mais pas le seul : ainsi <a target="_blank" href="https://nodejs.org">Node.js</a>
			
 
				-permet d'écrire des serveurs web en JS. Même langage, mais des API différentes :
			
 
				-
			
 
				-* La fonction `alert()` est disponible dans le contexte du navigateur, mais pas sous Node.js.
			
 
				-* Inversement, Node.js dispose de fonctions d'accès aux fichiers, à des bases de données, mais pas JS dans le navigateur !
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,16 +0,0 @@
 
				-La fonction `alert()` est parfois utile, mais pas optimale en termes d'UX
			
 
				-(ces "popups" à fermer sont agaçantes).
			
 
				-
			
 
				-Dans le bouton créé précédemment, remplace `alert` par `console.log`, en gardant l'argument entre
			
 
				-parenthèses.
			
 
				-
			
 
				-Avant de recharger, ouvre les **outils de développement** de ton navigateur.
			
 
				-* Chrome et Opera : `Ctrl+Shift+I` sur PC ou `Cmd+Shift+I`
			
 
				-* Firefox : F12
			
 
				-
			
 
				-Cela ouvre un panneau d'outils, avec plusieurs onglets. Va sur l'onglet "Console"
			
 
				-et recharge la page : tu dois y voir s'afficher le message.
			
 
				-
			
 
				-<blockquote>
			
 
				-<code>console.log()</code> permet d'afficher non seulement des messages, mais aussi le contenu de variables.
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,24 +0,0 @@
 
				-<blockquote>
			
 
				-On <strong>déclare</strong> une variable avec <code>var</code>, quel que soit le
			
 
				-type de données (entier, chaîne de caractères...) qu'on souhaite y mettre.
			
 
				-</blockquote>
			
 
				-
			
 
				-Dans `empty.html`, ajoute ceci sous `<!-- SCRIPTS -->` et recharge :
			
 
				-```html
			
 
				-<script>
			
 
				-var prenom;
			
 
				-var dateDeNaissance = 1990;
			
 
				-var message = "Salut " + prenom + ", tu es né(e) en " + dateDeNaissance;
			
 
				-console.log(message);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-Ce script donne le résultat ci-dessous. Saurais-tu corriger ça ?
			
 
				-```
			
 
				-Salut undefined, tu es né(e) en 1990
			
 
				-```
			
 
				-<blockquote>
			
 
				-<code>undefined</code> est la valeur par défaut d'une variable à laquelle on n'a rien assigné.
			
 
				-Ce n'est <strong>pas</strong> une chaîne mais une "valeur non définie", dont la
			
 
				-<em>représentation</em> en chaîne est <code>"undefined"</code>.
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,16 +0,0 @@
 
				-Une variable doit en principe être déclarée avant d'être utilisée. Mais par défaut,
			
 
				-JS est laxiste : JS dans le navigateur permet d'affecter une valeur sans la déclarer.
			
 
				-
			
 
				-Tape directement ceci dans la console pour voir :
			
 
				-```javascript
			
 
				-a=5
			
 
				-console.log(a)
			
 
				-```
			
 
				-<blockquote>
			
 
				-Il faut <strong>absolument</strong> éviter de faire ça quand on programme "pour de vrai", et <strong>
			
 
				-toujours</strong> déclarer les variables.
			
 
				-</blockquote>
			
 
				-En effet, JS dispose d'un "mode strict", qui proteste quand on utilise une variable non déclarée.
			
 
				-Tout le monde l'utilise (ou <em>devrait</em> l'utiliser).
			
 
				-
			
 
				-On l'active en insérant `"use strict"` au début de son programme.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,21 +0,0 @@
 
				-<blockquote>
			
 
				-La syntaxe JS pour les fonctions est proche de C et Java, à ceci près que ni les
			
 
				-arguments, ni l'éventuelle valeur de retour ne sont typés.
			
 
				-</blockquote>
			
 
				-On peut <em>nommer</em> les arguments de façon adéquate, pour <em>suggérer</em> un type attendu.
			
 
				-
			
 
				-```javascript
			
 
				-function add(a, b) { return a + b; }
			
 
				-function tellMe(str) { console.log('You told me ' + str); }
			
 
				-console.log(add(345, 0.5));
			
 
				-console.log(add('toto', 31));
			
 
				-console.log(saySomething());
			
 
				-```
			
 
				-
			
 
				-La dernière ligne de code affiche deux lignes dans la console :
			
 
				-* `tellMe()` est d'abord exécutée, sans l'argument attendu. &Ccedil;a ne provoque
			
 
				-pas d'erreur : un argument non fourni a la valeur `undefined`.
			
 
				-* `tellMe()` ne renvoie rien, donc par défaut `undefined` est renvoyé.
			
 
				-
			
 
				-On voit à nouveau que `undefined` est convertie en `"undefined"` si on la concatène
			
 
				-à une chaîne.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,20 +0,0 @@
 
				-Ajoute les lignes suivantes au script précédent (avant ou après, mais toujours entre
			
 
				-`<script>` et `</script>`).
			
 
				-
			
 
				-```javascript
			
 
				-var booleen = true;
			
 
				-var chaine = 'Un tableau avec des types différents';
			
 
				-var entier = 3456;
			
 
				-var flottant = 3.14;
			
 
				-var tableau = [booleen, chaine, entier, flottant];
			
 
				-console.log(tableau);
			
 
				-```
			
 
				-<blockquote>
			
 
				-On définit un tableau par une liste d'éléments séparés par des virgules, entre crochets.
			
 
				-</blockquote>
			
 
				-
			
 
				-Les langages de script comme Python, PHP et JS permettent de mixer les types dans un tableau.
			
 
				-Laxistes, je vous dis !
			
 
				-
			
 
				-C'est un des aspects des langages dits "dynamiques". Cela donne une grande souplesse.
			
 
				-Mais ça oblige à faire (encore plus) attention à ce qu'on fait !
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,27 +0,0 @@
 
				-JavaScript permet d'utiliser des objets. Là encore, étant un langage dynamique,
			
 
				-il offre une grande souplesse pour créer et manipuler ceux-ci.
			
 
				-
			
 
				-Ajoute ceci au script :
			
 
				-```javascript
			
 
				-var personne = new Object();
			
 
				-personne.nom = "John Difool";
			
 
				-personne.afficheNom = function() {
			
 
				-  console.log("Je suis", this.nom);
			
 
				-}
			
 
				-personne.afficheNom();
			
 
				-```
			
 
				-
			
 
				-Bien que JS permette de définir des "classes" (pas exactement avec le même sens qu'en Java),
			
 
				-il permet aussi de créer des objets librement : soit avec la syntaxe ci-dessus,
			
 
				-soit avec la syntaxe littérale qu'on va voir un peu plus loin.
			
 
				-
			
 
				-Ici on a créé un objet avec deux propriétés, `nom`, une chaîne, et `afficheNom`, une fonction.
			
 
				-Note que `this` dans la fonction représente l'objet à laquelle elle est liée, comme en Java !
			
 
				-
			
 
				-On a affecté ces propriétes librement, sans que JS ne proteste.
			
 
				-
			
 
				-En Java, il aurait fallu déclarer les propriétés, avec leur type et leur visibilité, et les méthodes,
			
 
				-avec leurs argument(s) attendu(s), type retourné, et visibilité.
			
 
				-
			
 
				-Cette possibilité de manipuler les objets aussi librement est une autre caractéristique des langages
			
 
				-dynamiques... JS étant beaucoup plus laxiste que PHP ou Python. Et là encore, c'est à double tranchant !
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,33 +0,0 @@
 
				-<blockquote>
			
 
				-On peut définir des "classes" en JS. Mais elles fonctionnent un peu différemment des
			
 
				-autres langages objets !
			
 
				-</blockquote>
			
 
				-
			
 
				-```javascript
			
 
				-function Personne(nom) {
			
 
				-  this.nom = nom;
			
 
				-}
			
 
				-Personne.prototype.afficheNom = function() {
			
 
				-  console.log("Je suis", this.nom);
			
 
				-}
			
 
				-var luke = new Personne('Luke Skywalker');
			
 
				-var leia = new Personne('Leia Organa Solo');
			
 
				-luke.afficheNom();
			
 
				-leia.afficheNom();
			
 
				-```
			
 
				-
			
 
				-* Le "constructeur", qui définit la "classe", est une simple fonction !
			
 
				-* On ajoute des méthodes à la classe en les ajoutant à la propriété `prototype`
			
 
				-de la fonction/constructeur.
			
 
				-* Au passage, ça signifie qu'une fonction est aussi un objet !
			
 
				-
			
 
				-Ne te prends pas trop la tête avec ça pour l'instant ! Sache juste que "ça existe",
			
 
				-et que ça permet de créer des objets à partir d'un certain "modèle" (d'où le terme
			
 
				-de prototype).
			
 
				-
			
 
				-<blockquote>
			
 
				-En fait, ES6, le JavaScript nouvelle génération, supporte une syntaxe de déclaration de classe
			
 
				-plus proche de celles de Java, PHP, etc... Mais qui en arrière-plan, est basé
			
 
				-sur cette approche "prototypale". Il est donc utile de la connaître, d'autant que
			
 
				-beaucoup de projets restent basés sur ES5, la génération précédente de JS !
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,21 +0,0 @@
 
				-On a vu comment créer des objets avec `new` suivi d'un constructeur : soit le "constructeur" générique `Object`,
			
 
				-soit un constructeur spécifique (de notre cru, ou fourni par JS, comme `Date`).
			
 
				-
			
 
				-Mais on a souvent besoin de créer des objets plus simplement.
			
 
				-
			
 
				-<blockquote>
			
 
				-La "syntaxe littérale" permet de définir un objet directement, via des paires
			
 
				-<code>cle: valeur</code> séparées par des virgules, le tout entre accolades.
			
 
				-</blockquote>
			
 
				-
			
 
				-```javascript
			
 
				-var film = {
			
 
				-  titre: 'Inception',
			
 
				-  real: 'Christopher Nolan',
			
 
				-  annee: 2010,
			
 
				-  afficheInfos: function() {
			
 
				-    console.log(this.titre, 'réalisé par', this.real, 'sorti en', this.annee);
			
 
				-  }
			
 
				-};
			
 
				-film.afficheInfos();
			
 
				-```
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,17 +0,0 @@
 
				-JS offre des structures de contrôle. Certaines sont semblables à C et Java :
			
 
				-
			
 
				-```javascript
			
 
				-for(var i = 0 ; i < tableau.length ; i++) {
			
 
				-  console.log('Index:', i, ' => Valeur:', tableau[i]);
			
 
				-}
			
 
				-```
			
 
				-&Agrave; noter : les tableaux en JS sont <em>aussi</em> des objets, et ont une
			
 
				-propriété `length` indiquant leur nombre d'éléments.
			
 
				-
			
 
				-D'autres structures de boucles sont spécifiques à JS, comme celle-ci qui permet
			
 
				-de parcourir toutes les <em>propriétés</em> d'un <em>objet</em> :
			
 
				-```javascript
			
 
				-for(var cle in luke) {
			
 
				-  console.log('Clé:', cle, ' => Valeur:', luke[cle])
			
 
				-}
			
 
				-```
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -1,16 +0,0 @@
 
				-Tu en as terminé avec cette section ! On a juste survolé les bases, et vu certaines
			
 
				-spécificités de JS.
			
 
				-
			
 
				-Mais ça sera suffisant pour aborder l'interaction entre JS et le document HTML dans le navigateur.
			
 
				-C'est quand même la motivation d'origine de JS, comme on le disait dans le premier point !
			
 
				-
			
 
				-En résumé, JS est :
			
 
				-<blockquote>
			
 
				-<ul>
			
 
				-  <li>Dynamique</li>
			
 
				-  <li>Interprété par le navigateur sans étape de compilation</li>
			
 
				-  <li>Faiblement typé</li>
			
 
				-  <li>Très tolérant (ceci dit, accepter qu'une fonction soit appelée sans les arguments attendus peut avoir son utilité)</li>
			
 
				-  <li>Assez proche de C et Java par sa syntaxe (ex : boucles <code>for</code> sur tableaux)</li>
			
 
				-</ul>
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,11 @@
 
				+<blockquote>
			
 
				+<strong>Très important</strong>, on va utiliser <strong>Python 3</strong> et non pas Python 2.
			
 
				+</blockquote>
			
 
				+
			
 
				+En février 2018, on en est à la version 3.6.4 de Python.
			
 
				+
			
 
				+Pour la télécharger, [c'est ici](https://www.python.org/downloads/).
			
 
				+
			
 
				+Ensuite, lors de l'installation, il est **très important** de cocher "Add Python 3.6 to PATH" comme dans l'image ci-dessous :
			
 
				+
			
 
				+<img alt="python3 win install" src="img/tuto/python3-win-install.gif" />
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,5 @@
 
				+<blockquote>
			
 
				+Normalement, on a <strong>déjà installé Git ensemble.</strong>
			
 
				+</blockquote>
			
 
				+
			
 
				+Pour télécharger Git, le lien est disponible sur [la page d'accueil de Git](https://git-scm.com/).
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,23 @@
 
				+<blockquote>
			
 
				+On va maintenant installer des <strong>dépendances</strong> pour Git : <strong>Django</strong> et <strong>Selenium</strong>
			
 
				+</blockquote>
			
 
				+
			
 
				+Ici, ça se passe dans un **terminal**. Il se trouve que **Git Bash** ne s'entend pas très bien avec Python 3.6 (du moins sur Windows 7 que j'ai testé).
			
 
				+
			
 
				+On va donc utiliser le **PowerShell** fourni en standard sous Windows, que tu peux trouver :
			
 
				+- Soit dans le menu de démarrage avec "Rechercher"
			
 
				+- Soit en faisant la combinaison de touches Windows+R (pour "Run"), et en tapant dans la popup: `powershell`
			
 
				+
			
 
				+Une fois PowerShell ouvert, tape :
			
 
				+
			
 
				+    python -v
			
 
				+
			
 
				+Il est possible qu'il t'affiche des tas de choses incompréhensibles, mais du moment que dans les dernières lignes, tu vois s'afficher "Python 3.6.4", c'est bon !
			
 
				+
			
 
				+Ensuite, dans le même shell, tape :
			
 
				+
			
 
				+    pip install Django selenium
			
 
				+
			
 
				+**Normalement** ça prend un peu de temps, mais il ne devrait pas trop broncher.
			
 
				+
			
 
				+**Pour info**, pip est le "gestionnaire de packages" de Python. Il permet d'installer, via le shell, des librairies, frameworks, ou programmes, qui ne sont pas livrés avec Python en standard.
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,14 @@
 
				+Quelques explications, car tu te demandes sûrement pourquoi on installe tout ça.
			
 
				+
			
 
				+Python et Git, ça semble évident. Mais le reste ?
			
 
				+- Django est un "framework web" écrit en Python. Il permet de créer des **applications web** dans ce langage.
			
 
				+- Selenium est un outil qui permet de lancer un navigateur comme Firefox, et de le piloter par un programme. &Agrave; quoi ça sert ? Cela va nous permettre de lancer des "tests automatisés", pour vérifier que notre appli se comporte comme on l'attend.
			
 
				+- geckodriver est une "interface" entre Selenium et le navigateur **Firefox** (dont le moteur s'appelle Gecko, et que tu dois **installer** si ce n'est déjà fait).
			
 
				+
			
 
				+geckodriver peut être téléchargé sur [la page "releases" du GitHub](https://github.com/mozilla/geckodriver/releases).
			
 
				+
			
 
				+En principe tu dois télécharger la version pour Windows **64 bits**, donc [geckodriver-v0.19.1-win64.zip](https://github.com/mozilla/geckodriver/releases/download/v0.19.1/geckodriver-v0.19.1-win64.zip).
			
 
				+
			
 
				+Décompresse cette archive et tu obtiendras un fichier `geckodriver.exe`. On va le garder bien au chaud pour la suite !
			
 
				+
			
 
				+Déplace `geckodriver.exe` dans le répertoire `python-tdd`, que tu as du créer avant, et dans lequel tu as mis `python-web-tutorial` après décompression. 
			
--- a/react-tuto/src/markdown/1.
+++ b/react-tuto/src/markdown/1.
@@ -0,0 +1,9 @@
 
				+Pour terminer, deux points importants :
			
 
				+- Utilise un éditeur correct, capable de **coloration syntaxique** pour les programmes Python. Tu te rendras vite compte si ce n'est pas le cas. Parmi les bons candidats :
			
 
				+    - Atom
			
 
				+    - Brackets
			
 
				+    - Sublime Text
			
 
				+    - NotePad++
			
 
				+- Contrairement aux "malheureux" sous OS X ou Linux qui doivent utiliser `python3`, tu utiliseras tout simplement `python` pour invoquer le Python tout-puissant.
			
 
				+
			
 
				+<img alt="python" src="img/tuto/python.gif" />
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,17 +0,0 @@
 
				-<blockquote>
			
 
				-Dans le navigateur, JS dispose de l'<em>API DOM</em>, qui permet de manipuler le document HTML.
			
 
				-Le DOM ou <em>Document Object Model</em> est la représentation, sous forme d'un "arbre", du document HTML.
			
 
				-</blockquote>
			
 
				-
			
 
				-La "racine" de cet arbre est accessible à JS via la variable globale `document`.
			
 
				-Ce "noeud" racine a un "enfant" correspondant à la balise `<html>`.
			
 
				-Celui-ci, à son tour, a des noeuds enfants correspondant à `<head>` et `<body>`...
			
 
				-Et ainsi de suite.
			
 
				-
			
 
				-On va examiner cette variable. Ajoute ceci entre les balises `<script>` (tu peux supprimer le contenu ajouté précédemment) :
			
 
				-```javascript
			
 
				-console.dir(document);
			
 
				-```
			
 
				-<small>`console.dir()` car `console.log()` sous Chrome ne montre pas les <em>propriétés</em> de l'objet `document`, qui est d'un type particulier ("classe" `HTMLDocument`).</small>
			
 
				-
			
 
				-Tu dois voir s'afficher un `#document` sous Chrome, ou `HTMLDocument` sous Firefox... avec une petite flèche sur sa gauche permettant de le "déplier". Déplie donc, et... page suivante !
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,48 +0,0 @@
 
				-L'objet `document` contient de <em>nombreuses</em> propriétés, mais pour l'instant on s'occupe de :
			
 
				-<!-- * Certaines propriétés aux noms explicites, comme : `forms`, `links`, `scripts` qui
			
 
				-référencent respectivement les formulaires, liens, et scripts présents dans le document. -->
			
 
				-* `children`, pour laquelle est indiquée le type `HTMLCollection` : elle contient les <em>descendants directs</em> de `document` : ici, un seul élement, créé via la balise `<html>`.
			
 
				-* `childNodes`, similaire mais subtilement différente.
			
 
				-
			
 
				-Pour détailler cette différence, déplie `children`, puis la clé 0 sur laquelle se trouve `html`.
			
 
				-On trouve à nouveau `children` et `childNodes`, ce qui confirme la notion d'arborescence.
			
 
				-
			
 
				-Examine-les attentivement.
			
 
				-
			
 
				-Ils contiennent <em>presque</em> la même chose : les deux ont en commun `head` et `body` qui correspondent aux balises de même nom.
			
 
				-Mais `childNodes` contient, entre `head` et `body`, un noeud `text`.
			
 
				-
			
 
				-Déplie le et regarde sa propriété `data` : une chaîne de 3 caractères : le symbole du retour chariot,
			
 
				-suivi de deux espaces. Si tu regardes dans `empty.html`, ça correspond exactement à ce qui se trouve après
			
 
				-la balise fermante `</head>` et avant la balise ouvrante `<body>`. &Ccedil;a nous amène à l'explication...
			
 
				-
			
 
				-<blockquote>
			
 
				-On distingue deux types de noeuds dans l'arbre du document :
			
 
				-<ul>
			
 
				-  <li>Des <em>éléments</em>, qui correspondent aux balises.</li>
			
 
				-  <li>Des <em>noeuds texte</em>, qui sont du contenu textuel situé <em>entre deux balises</em>,
			
 
				-  ou <em>à l'intérieur</em> d'une balise.</li>
			
 
				-</ul>
			
 
				-Donc, <code>children</code> contient <em>seulement</em> les éléments enfants, alors que <code>childNodes</code> contient <em>en plus</em> les noeuds textes.
			
 
				-</blockquote>
			
 
				-
			
 
				-Remarque : certains éléments ne peuvent pas avoir de descendants ! C'est le cas par exemple de `<br>` (saut de ligne),
			
 
				-et de `<img src="" />` qui est une balise "auto-fermante".
			
 
				-
			
 
				-
			
 
				-<!-- cela à partir d'un autre exemple, que tu peux ajouter au script. -->
			
 
				-
			
 
				-<!-- ```javascript
			
 
				-console.dir(document.getElementsByTagName('html'));
			
 
				-```
			
 
				-L'objet `document`, en plus des propriétés affichées par `console.dir(document)`,
			
 
				-a aussi de nombreuses méthodes qui, elles, ne sont pas affichées.
			
 
				-
			
 
				-`getElementsByTagName()` permet de récupérer les éléments du
			
 
				-document à partir de leur nom de balise (`html`, `div`, `img`, etc.).
			
 
				-
			
 
				-Avant de déplier, on voit que `getElementsByTagName` nous a renvoyé une `HTMLCollection` :
			
 
				-le même type que la propriété `children` de `document`: un ensemble d'éléments HTML.
			
 
				-Ici on en a qu'un car n'y a qu'une balise `<html>` dans un document valide.
			
 
				-
			
 
				-Page suivante ! -->
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,80 +0,0 @@
 
				-On a vu comment parcourir l'arbre du document, en "descendant", via les propriétés `children`.
			
 
				-
			
 
				-Mais utiliser les `children` pour trouver les éléments à partir de l'objet `document`
			
 
				-ne serait pas pratique ! Remplace le contenu du `body` par illustrer ça :
			
 
				-```html
			
 
				-<p>Un paragraphe</p>
			
 
				-<script>
			
 
				-var paragraphe = document
			
 
				-  .children[0] // récupère l'élément html
			
 
				-  .children[1] // récupère le body
			
 
				-  .children[0] // récupère le paragraphe
			
 
				-console.dir(paragraphe);
			
 
				-</script>
			
 
				-```
			
 
				-Le résultat est celui attendu, mais c'est bien compliqué, de plus ça implique qu'on sache
			
 
				-précisément où se trouve le paragraphe dans le `body` ! Et si on a l'idée d'ajouter
			
 
				-un élément avant le paragraphe, ça ne marche plus !
			
 
				-
			
 
				-Heureusement, l'API DOM fournit des fonctions pour localiser des éléments dans le document.
			
 
				-Voici la plus simple :
			
 
				-```html
			
 
				-<p id="paragraphe">Star Wars VIII divise les fans !</p>
			
 
				-<script>
			
 
				-var paragraphe = document.getElementById('paragraphe');
			
 
				-console.dir(paragraphe);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-<blockquote>
			
 
				-La méthode <code>getElementById()</code> appelée sur <code>document</code> retrouve l'élément avec l'attribut <code>id</code> spécifié.
			
 
				-</blockquote>
			
 
				-
			
 
				-<!--
			
 
				-Repassons à des choses pratiques ! Ajoute ceci au fichier HTML :
			
 
				-
			
 
				-```html
			
 
				-<p id="paragraphe">Du texte, <span>encore du texte</span>, une image :
			
 
				-<img src="img/logo-js.png" /></p>
			
 
				-<script>
			
 
				-var paragraphe = document.getElementById('paragraphe');
			
 
				-console.dir(paragraphe);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-
			
 
				-
			
 
				-On vient de voir la méthode `document.getElementsByTagName()`. D'autres méthodes
			
 
				-semblables existent :
			
 
				-* `document.getElementsByClassName()` pour récupérer **les** élément**s** auxquels
			
 
				-on a donné une certaine classe CSS via l'attribut `class`.
			
 
				-* `document.getElementById()` pour récupérer **un** élément par son attribut `id`.
			
 
				-
			
 
				-Essaie ceci dans le document HTML :
			
 
				-```html
			
 
				-<p id="paragraphe">Du texte et <span>encore du texte</span></p>
			
 
				-<script>
			
 
				-var paragraphe = document.getElementById('paragraphe');
			
 
				-console.log([paragraphe]);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-Remarque : on crée un tableau avec l'élément récupéré car Chrome empêche de "déplier" un élément seul
			
 
				-(pas nécessaire sous Firefox).
			
 
				-
			
 
				-Examine ce qu'il y a sous `children`, mais également sous `childNodes`. Il y a une petite différence.
			
 
				-
			
 
				-<blockquote>
			
 
				-<ul>
			
 
				-  <li><code>children</code> contient les noeuds correspondant à des balises HTML.</li>
			
 
				-  <li><code>childNodes</code> contient les noeuds correspondant à des balises HTML <em>et</em> les noeuds de texte.</li>
			
 
				-</ul>
			
 
				-</blockquote>
			
 
				-
			
 
				-Ici, le noeud de texte situé directement sous la balise paragraphe contient
			
 
				-`"Du texte et "` (visible dans la propriété `data` si tu déplies le 1er des `childNodes`).
			
 
				-
			
 
				-Une balise peut contenir - ou pas - un ou des noeuds de texte. Une balise "auto-fermante" comme celle-ci n'en contient pas :
			
 
				-```html
			
 
				-<img src="image.jpg" alt="Une image" />
			
 
				-``` -->
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,23 +0,0 @@
 
				-`document.getElementById()` permet de trouver le seul élément de la page qui ait l'`id` spécifié.
			
 
				-
			
 
				-Deux autres fonctions similaires permettent de trouver `plusieurs` éléments d'un coup :
			
 
				-```html
			
 
				-<h4>Technos informatiques</h4>
			
 
				-<ul>
			
 
				-  <li class="langage">Java</li>
			
 
				-  <li class="langage">JavaScript</li>
			
 
				-  <li class="systeme">Linux</li>
			
 
				-  <li class="systeme">OS X</li>
			
 
				-</ul>
			
 
				-<script>
			
 
				-var technos = document.getElementsByTagName('li');
			
 
				-var langages = document.getElementsByClass('langage');
			
 
				-var systemes = document.getElementsByClass('systeme');
			
 
				-console.log(technos, langages, systemes);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-<blockquote>
			
 
				-Les méthode <code>getElementsByTagName()</code> et <code>getElementsByClass()</code> permettent
			
 
				-de trouver plusieurs éléments, par leur nom de balise et par leur attribut <code>class</code> respectivement.
			
 
				-</blockquote>
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,31 +0,0 @@
 
				-La méthode `document.createElement()` crée un élément, dont le type est indiqué par un nom de balise passé en argument (`div`, `p`, etc.).
			
 
				-
			
 
				-Cet exemple est adapté de la [doc de cette fonction](https://developer.mozilla.org/fr/docs/Web/API/Document/createElement).
			
 
				-
			
 
				-```javascript
			
 
				-function ajouteDiv(texte) {
			
 
				-  var nouveauDiv = document.createElement("div");
			
 
				-  var nouveauContenu = document.createTextNode(texte);
			
 
				-  nouveauDiv.appendChild(nouveauContenu);
			
 
				-
			
 
				-  var body = document.body;
			
 
				-  body.appendChild(nouveauDiv);
			
 
				-}
			
 
				-ajouteDiv('Hello World!');
			
 
				-ajouteDiv('JavaScript rocks!');
			
 
				-```
			
 
				-On a encapsulé le code dans une fonction qui prend en argument un morceau de texte qu'on souhaite insérer.
			
 
				-
			
 
				-La première ligne crée un `div` via `document.createElement()`. Mais elle est vide !
			
 
				-
			
 
				-On crée donc un noeud de texte grâce à `document.createTextNode()`. Mais le noeud ainsi créé n'est associé à rien.
			
 
				-
			
 
				-Pour l'ajouter au div, on utilise `element.appendChild()` qui ajoute un noeud passé en argument (un noeud texte **ou** un élément), à
			
 
				-l'`element` sur lequel elle est appelée. Note bien qu'aux fonctions vues jusqu'ici, cette méthode est appelée sur un **élément**, et non pas sur l'objet `document`.
			
 
				-
			
 
				-La quatrième ligne récupère la propriété `body` du document, ce qui constitue un raccourci plus pratique que ceci :
			
 
				-```javascript
			
 
				-var body = document.getElementsByTagName("body")[0];
			
 
				-```
			
 
				-
			
 
				-Enfin, la cinquième ligne utilise encore `element.appendChild()`, cette fois pour ajouter le `div` au `body`. C'est à ce moment-là seulement qu'il devient visible !
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,14 +0,0 @@
 
				-On voudrait améliorer notre fonction de création d'un élément, pour la rendre un peu plus générique. &Ccedil;a va être à toi de jouer !
			
 
				-
			
 
				-Voici la "spec" :
			
 
				-
			
 
				-* Au lieu d'ajouter le nouvel élément au `body`, on veut permettre de l'ajouter à un élément dont on spécifie l'id.
			
 
				-* On veut permettre de créer autre chose qu'un `div`.
			
 
				-
			
 
				-Comment faire ? Quelques indices :
			
 
				-* Tu peux reprendre une bonne partie du code de l'exemple précédent, et l'adapter.
			
 
				-* Tu vas devoir ajouter deux arguments à la fonction.
			
 
				-* Tu vas devoir te servir de `getElementById()` vue dans la page n°3.
			
 
				-
			
 
				-Prend un peu de temps pour y réfléchir (pas trop non plus !)... Ensuite une solution possible
			
 
				-est donnée à la page suivante.
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,35 +0,0 @@
 
				-Voici une solution possible.
			
 
				-* On a remplacé le `"div"` hardcodé par une variable, qui est passée en argument.
			
 
				-* Au lieu d'aller chercher le `body`, on récupère l'élément ciblé via son `id`.
			
 
				-
			
 
				-```html
			
 
				-<h4>La recette du quatre-quarts</h4>
			
 
				-<ul id="ingredients"></ul>
			
 
				-<h4>Article de fond sur Toulouse</h4>
			
 
				-<div id="article"></div>
			
 
				-
			
 
				-<script>
			
 
				-function ajouteElement(idCible, balise, texte) {
			
 
				-  var nouvelElem = document.createElement(balise);
			
 
				-  var nouveauContenu = document.createTextNode(texte);
			
 
				-  nouvelElem.appendChild(nouveauContenu);
			
 
				-
			
 
				-  var elementCible = document.getElementById(idCible);
			
 
				-  elementCible.appendChild(nouvelElem);
			
 
				-}
			
 
				-// Utilisation de la nouvelle fonction avec différents paramètres
			
 
				-var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
			
 
				-for(var i = 0 ; i < ingredients.length ; i++) {
			
 
				-  ajouteElement('ingredients', 'li', ingredients[i]);
			
 
				-}
			
 
				-var paragraphes = [
			
 
				-  'Toulouse est la 4ème ville de France.',
			
 
				-  'On y dit CHOCOLATINE et pas "pain au chocolat".'
			
 
				-];
			
 
				-// Note que dans cette boucle on ne DOIT PAS re-déclarer i,
			
 
				-// car elle a déjà déclarée avant
			
 
				-for(i = 0 ; i < paragraphes.length ; i++) {
			
 
				-  ajouteElement('article', 'p', paragraphes[i]);
			
 
				-}
			
 
				-</script>
			
 
				-```
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,26 +0,0 @@
 
				-Après avoir vu comment **ajouter** du contenu à la page, voyons comment **modifier**
			
 
				-du contenu existant.
			
 
				-
			
 
				-```html
			
 
				-<p id="polemique">Star Wars VIII est le <strong>meilleur Star Wars</strong> !</p>
			
 
				-<script>
			
 
				-var paragraphe = document.getElementById('polemique');
			
 
				-paragraphe.innerHTML = 'Star Wars VIII... Mouais, <em>bof bof</em> !';
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-<blockquote>
			
 
				-Chaque <em>élément</em> du document a une propriété <code>innerHTML</code>,
			
 
				-qui renferme son contenu HTML.
			
 
				-</blockquote>
			
 
				-
			
 
				-Première remarque, cette propriété ne concerne donc pas les noeuds texte.
			
 
				-
			
 
				-Deuxième remarque, comme son nom semble l'indiquer, on peut mettre un mélange de texte et de balises dans cette propriété. Cela a des implications <em>très</em> intéressantes,
			
 
				-concernant la création de contenu HTML.
			
 
				-
			
 
				-Imagine la tâche que représenterait la création d'une interface complexe, de façon dynamique,
			
 
				-en utilisant uniquement des `createElement()`, `createTextNode()` et `appendChild()`...
			
 
				-Même en améliorant la fonction de création de contenu de l'exercice, on ne serait pas sorti de l'auberge !
			
 
				-
			
 
				-C'est probablement une meilleure idée d'assigner directement une chaîne de contenu HTML à `innerHTML`, comme on va le faire à l'étape suivante.
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,18 +0,0 @@
 
				-Voici une autre façon de construire notre liste d'ingrédients du quatre-quarts,
			
 
				-basées sur l'utilisation de `innerHTML`.
			
 
				-
			
 
				-* On part d'une chaîne vide (`listeHtml`), qu'on va remplir en utilisant une boucle.
			
 
				-* On remplace le contenu existant (vide ici) par cette nouvelle chaîne.
			
 
				-
			
 
				-```html
			
 
				-<ul id="ingredients"></ul>
			
 
				-<script>
			
 
				-var ingredients = ['Farine', 'Oeufs', 'Beurre', 'Sucre'];
			
 
				-var listeHtml = '';
			
 
				-for(var i = 0 ; i < ingredients.length ; i++) {
			
 
				-  listeHtml += '<li>' + ingredients[i] + '</li>';
			
 
				-}
			
 
				-var listeElem = document.getElementById('ingredients');
			
 
				-listeElem.innerHTML = listeHtml;
			
 
				-</script>
			
 
				-```
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,57 +0,0 @@
 
				-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> ! 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 :
			
 
				-
			
 
				-```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 !
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,28 +0,0 @@
 
				-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.
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -1,10 +0,0 @@
 
				-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()`
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,22 @@
 
				+<blockquote>
			
 
				+<strong>Très important</strong>, on va utiliser <strong>Python 3</strong> et non pas Python 2.
			
 
				+</blockquote>
			
 
				+
			
 
				+En février 2018, on en est à la version 3.6.4 de Python.
			
 
				+
			
 
				+Les instructions en anglais sont [là](http://docs.python-guide.org/en/latest/starting/install3/osx/), **mais en voici le résumé** (ouvre un **Terminal** car tout va se passer là) :
			
 
				+
			
 
				+- Tu dois d'abord installer **Homebrew**, un "gestionnaire de paquets" pour l'installation de logiciels Unix sous OS X. Tape (ou plutôt, copie-colle) : `ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"`
			
 
				+- Une fois Homebrew installé, tape : `brew install python3`
			
 
				+
			
 
				+Ensuite, tu dois pouvoir faire `python3 -v` et obtenir un affichage contenant notamment "Python 3.6.4"
			
 
				+
			
 
				+Si ce n'est pas le cas, lance l'éditeur Nano pour éditer le fichier `.profile` à la racine de ton dossier utilisateur, en tapant :
			
 
				+
			
 
				+    nano ~/.profile
			
 
				+
			
 
				+Ce fichier peut être vide. Il permet de modifier les variables d'environnement. Ajoutes-y :
			
 
				+
			
 
				+    export PATH=/usr/local/bin:/usr/local/sbin:$PATH
			
 
				+
			
 
				+Puis sauvegarde (Ctrl+O normalement).
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,5 @@
 
				+<blockquote>
			
 
				+Normalement, on a <strong>déjà installé Git ensemble.</strong>
			
 
				+</blockquote>
			
 
				+
			
 
				+Pour télécharger Git, le lien est disponible sur [la page d'accueil de Git](https://git-scm.com/).
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,11 @@
 
				+<blockquote>
			
 
				+On va maintenant installer des <strong>dépendances</strong> pour Git : <strong>Django</strong> et <strong>Selenium</strong>
			
 
				+</blockquote>
			
 
				+
			
 
				+On a déjà testé l'installation correcte de Python 3 en tapant `python3 -v`dans le terminal. Restes-y ou retournes-y, et tape :
			
 
				+
			
 
				+    pip3 install Django selenium
			
 
				+
			
 
				+**Normalement** ça prend un peu de temps, mais il ne devrait pas trop broncher.
			
 
				+
			
 
				+**Pour info**, pip est le "gestionnaire de packages" de Python. Il permet d'installer, via le shell, des librairies, frameworks, ou programmes, qui ne sont pas livrés avec Python en standard.
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,15 @@
 
				+Quelques explications, car tu te demandes sûrement pourquoi on installe tout ça.
			
 
				+
			
 
				+Python et Git, ça semble évident. Mais le reste ?
			
 
				+- Django est un "framework web" écrit en Python. Il permet de créer des **applications web** dans ce langage.
			
 
				+- Selenium est un outil qui permet de lancer un navigateur comme Firefox, et de le piloter par un programme. &Agrave; quoi ça sert ? Cela va nous permettre de lancer des "tests automatisés", pour vérifier que notre appli se comporte comme on l'attend.
			
 
				+- geckodriver est une "interface" entre Selenium et le navigateur **Firefox** (dont le moteur s'appelle Gecko, et que tu dois **installer** si ce n'est déjà fait).
			
 
				+
			
 
				+geckodriver peut être téléchargé sur [la page "releases" du GitHub](https://github.com/mozilla/geckodriver/releases).
			
 
				+
			
 
				+Il n'y a qu'une version OS X universelle, dont voici le lien direct : [geckodriver-v0.19.1-macos.tar.gz](https://github.com/mozilla/geckodriver/releases/download/v0.19.1/geckodriver-v0.19.1-macos.tar.gz).
			
 
				+
			
 
				+
			
 
				+Décompresse cette archive et tu obtiendras un fichier `geckodriver` (exécutable). On va le garder bien au chaud pour la suite !
			
 
				+
			
 
				+Déplace `geckodriver` dans le répertoire `python-tdd`, que tu as du créer avant, et dans lequel tu as mis `python-web-tutorial` après décompression. 
			
--- a/react-tuto/src/markdown/2.
+++ b/react-tuto/src/markdown/2.
@@ -0,0 +1,8 @@
 
				+Pour terminer, deux points importants :
			
 
				+- Utilise un éditeur correct, capable de **coloration syntaxique** pour les programmes Python. Tu te rendras vite compte si ce n'est pas le cas. Parmi les bons candidats :
			
 
				+    - Atom
			
 
				+    - Brackets
			
 
				+    - Sublime Text
			
 
				+- Contrairement aux "heureux" utilisateurs de Windows qui peuvent juste utiliser `python`, tu devras utiliser `python3` pour invoquer le Python tout-puissant. Sinon le système va confondre avec Python 2 qui est installé en standard sous OS X. Et je te le dis tout de suite, ça serait fâcheux !
			
 
				+
			
 
				+<img alt="python" src="img/tuto/python.gif" />
			
--- a/react-tuto/src/markdown/3.
+++ b/react-tuto/src/markdown/3.
@@ -1,27 +0,0 @@
 
				-<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++) {
			
 
				-  items[i].style.color = 'white';
			
 
				-  items[i].style.background = '#89a';
			
 
				-  items[i].style['font-weight'] = 'bold';
			
 
				-}
			
 
				-```
			
 
				-
			
 
				-* Remarque qu'on a bouclé sur `items` <em>exactement</em> comme on l'aurait fait
			
 
				-avec un tableau. Pour autant, ce n'est <em>pas</em> un tableau, et des méthodes
			
 
				-marchant sur un tableau ne marcheraient pas ici.
			
 
				-* On affecte individuellement les propriétés de style. Elles doivent te rappeler
			
 
				-quelque chose puisque tu connais CSS !
			
 
				-* Note qu'on a utilisé deux façons de définir des couleurs :
			
 
				-    * En utilisant une couleur "standard" comme `'white'`.
			
 
				-    * En utilisant un code couleur hexadécimal.
			
 
				-* On ne peut pas utiliser n'importe quels caractères pour manipuler une propriété via le `.` suivi du nom.
			
 
				-Le `-` n'est pas autorisé, on utilise donc la variante entre crochets pour assigner
			
 
				-le style gras.
			
--- a/react-tuto/src/markdown/3.
+++ b/react-tuto/src/markdown/3.
@@ -1,35 +0,0 @@
 
				-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 !
			
--- a/react-tuto/src/markdown/3.
+++ b/react-tuto/src/markdown/3.
@@ -1,33 +0,0 @@
 
				-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`.
			
--- a/react-tuto/src/markdown/3.
+++ b/react-tuto/src/markdown/3.
@@ -1,43 +0,0 @@
 
				-Manipuler les classes avec `className` serait bien peu pratique ! Prends
			
 
				-l'élément suivant :
			
 
				-
			
 
				-```html
			
 
				-<button id="btn1" class="btn btn-primary active">Bouton actif</button>
			
 
				-```
			
 
				-On pourrait avoir les styles suivants dans l'en-tête HTML :
			
 
				-```html
			
 
				-<style>
			
 
				-.btn { padding: 10px; border-radius: 3px; }
			
 
				-.btn-primary { background: #aaf; border: 1px solid #aaf; }
			
 
				-.btn-secondary { background: #aff; border: 1px solid #aff; }
			
 
				-.active { font-weight: bold; }
			
 
				-</style>
			
 
				-```
			
 
				-
			
 
				-Comment faire si je veux enlever `active`, ou remplacer `btn-primary` par `btn-secondary` ?
			
 
				-Cela m'oblige à faire des manipulations potentiellement complexes sur la chaîne assignée à
			
 
				-`className`.
			
 
				-
			
 
				-<blockquote>
			
 
				-La propriété <code>classList</code> contient non pas une chaîne, mais une <em>liste</em> des classes.
			
 
				-Ce n'est pas un simple tableau, mais un objet renfermant un tableau, et qui offre les méthodes :
			
 
				-<ul>
			
 
				-  <li><code>add</code> : <em>ajouter</em> une classe</li>
			
 
				-  <li><code>remove</code> : <em>supprimer</em> une classe</li>
			
 
				-  <li><code>toggle</code> : <em>changer</em> l'existence d'une classe</li>
			
 
				-  <li><code>contains</code> : <em>vérifier</em> l'existence d'une classe</li>
			
 
				-</ul>
			
 
				-Quand on manipule <code>className</code>, <code>classList</code> est mise à jour automatiquement, et vice-versa.
			
 
				-</blockquote>
			
 
				-
			
 
				-Exemple avec le bouton ci-dessus (regarde le résultat avant et après que tu aies inséré le code ci-dessous) :
			
 
				-```javascript
			
 
				-var button = document.getElementById('btn1');
			
 
				-button.classList.remove('btn-primary');
			
 
				-button.classList.add('btn-secondary');
			
 
				-button.classList.toggle('active');
			
 
				-if(! button.classList.contains('active')) {
			
 
				-  button.innerHTML = 'Bouton inactif';
			
 
				-}
			
 
				-console.dir(button);
			
 
				-```
			
--- a/react-tuto/src/markdown/4.
+++ b/react-tuto/src/markdown/4.
@@ -1,38 +0,0 @@
 
				-<blockquote>
			
 
				-L'interactivité que JS permet avec la page web repose sur un système d'<em>évènements</em>.
			
 
				-</blockquote>
			
 
				-
			
 
				-Des évènements sont émis lorsque l'utilisateur interagit avec la page web. Chaque évènement est <em>nommé</em>
			
 
				-et s'applique à une <em>cible</em>. Exemples d'évènements :
			
 
				-* `click` correspond au clic sur un élément (par exemple un lien, un bouton).
			
 
				-* `submit` correspond à la soumission d'un formulaire, et ne s'applique qu'à un élément `form`.
			
 
				-* `change` correspond au changement de valeur d'un élément de saisie dans un formulaire, comme `input`, `select` ou `textarea`.
			
 
				-* `keyup` correspond au <em>relâchement</em> d'une touche dans un élément de saisie, ce qui est subtilement différent (et notamment, ne s'applique pas à un élément comme `select`).
			
 
				-
			
 
				-Il est ensuite possible d'<em>écouter</em> les évènements, et d'effectuer une action lorsqu'ils surviennent.
			
 
				-Pour cela, on <em>attache</em> un <em>gestionnaire</em> ou <em>handler</em> à l'élément sur lequel on veut écouter un évènement.
			
 
				-
			
 
				-Un handler est une fonction, qui prend en paramètre un <em>objet</em> de type `Event`, qu'on peut avoir besoin d'utiliser.
			
 
				-
			
 
				-Reprenons le tout premier exemple, le bouton de la section 1.1 :
			
 
				-
			
 
				-```html
			
 
				-<button onclick="alert('Hi!')">Click me</button>
			
 
				-```
			
 
				-On a attaché au bouton un handler pour l'évènement `click`, en l'attribuant directement dans l'attribut `onclick`.
			
 
				-Un élément dispose de propriétés `on*` pour chaque type d'évènement, où `*` est le nom de l'évènement.
			
 
				-
			
 
				-Cette façon d'attacher un handler directement sur la balise est un peu rudimentaire : on appelle cela du JS "inline",
			
 
				-et ce n'est généralement pas considéré comme une bonne pratique.
			
 
				-
			
 
				-A la place, on préfère attacher les handlers via du code JS. En reprenant l'exemple précédent, avec un `id` pour identifier le bouton :
			
 
				-```html
			
 
				-<button id="btn2">Click me</button>
			
 
				-<script>
			
 
				-var button = document.getElementById('btn2');
			
 
				-button.onclick = function() {
			
 
				-  alert("Je viens d'être cliqué !");
			
 
				-}
			
 
				-</script>
			
 
				-```
			
 
				-On a attaché un handler pour `click` en attribuant une fonction anonyme à la propriété `onclick`.
			
--- a/react-tuto/src/markdown/4.
+++ b/react-tuto/src/markdown/4.
@@ -1,51 +0,0 @@
 
				-On a vu comment attacher un handler pour l'évènement `click`, via la propriété `onclick`.
			
 
				-
			
 
				-Il existe une autre façon d'attacher des handlers. Imaginons qu'on veuille
			
 
				-attacher non pas un, mais <em>plusieurs</em> handlers pour un même évènement.
			
 
				-
			
 
				-On ne pourrait pas faire cela avec les propriétés `on*`, car elles ne permettent d'attacher
			
 
				-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>
			
 
				-
			
 
				-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');
			
 
				-
			
 
				-// Handlers
			
 
				-function handlerAlerte() {
			
 
				-  alert('Le bouton #btn3 a été cliqué');
			
 
				-}
			
 
				-
			
 
				-function enleveHandlerAlerte() {
			
 
				-  if(! handler1dejaSupprime) {
			
 
				-    console.log('Suppression du 1er handler');
			
 
				-    button.removeEventListener('click', handlerAlerte);
			
 
				-    handler1dejaSupprime = true;
			
 
				-  }
			
 
				-  else {
			
 
				-    console.log('Le 1er handler a déjà été supprimé !');
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-// Attache les handlers
			
 
				-button.addEventListener('click', handlerAlerte);
			
 
				-button.addEventListener('click', enleveHandlerAlerte);
			
 
				-</script>
			
 
				-```
			
 
				-
			
 
				-Remarques :
			
 
				-* 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 !
			
--- a/react-tuto/src/markdown/4.
+++ b/react-tuto/src/markdown/4.
@@ -1,36 +0,0 @@
 
				-Dans l'exemple précédent, on ne ciblait qu'un élément `button`.
			
 
				-Sachant qu'on en avait un seul, on pouvait se permettre d'utiliser directement la
			
 
				-variable qui le référençait, dans un handler (le second).
			
 
				-
			
 
				-Comment faire si on veut appliquer le même handler à plusieurs boutons, et permettre
			
 
				-que le handler trouve quel bouton a été ciblé par l'évènement ?
			
 
				-
			
 
				-<blockquote>
			
 
				-Le paramètre de type <code>Event</code> passé en paramètre a un handler contient de nombreuses propriétés,
			
 
				-qui nous informent sur l'évènement.
			
 
				-<br><br>
			
 
				-Parmi elles, la propriété <code>target</code> référence l'élément ciblé par l'évènement.
			
 
				-</blockquote>
			
 
				-
			
 
				-Illustration :
			
 
				-```html
			
 
				-<button class="log-nom">Joe</button>
			
 
				-<button class="log-nom">Jack</button>
			
 
				-<script>
			
 
				-// Handler: le paramètre evt (nommage arbitraire)
			
 
				-// est de type Event
			
 
				-function afficheNom(evt) {
			
 
				-  // Récupère la cible;
			
 
				-  var button = evt.target;
			
 
				-  // innerText contient le texte du bouton
			
 
				-  console.log('Je suis', button.innerText);
			
 
				-}
			
 
				-
			
 
				-// Récupère TOUS les boutons .log-nom
			
 
				-var buttons = document.getElementsByClassName('log-nom');
			
 
				-console.log(buttons);
			
 
				-for(var i = 0 ; i < buttons.length ; i++) {
			
 
				-  buttons[i].addEventListener('click', afficheNom);
			
 
				-}
			
 
				-</script>
			
 
				-```
			
--- a/react-tuto/src/markdown/4.
+++ b/react-tuto/src/markdown/4.
@@ -1,73 +0,0 @@
 
				-On va s'intéresser à des évènements qui concernent les formulaires et leurs champs
			
 
				-de saisie.
			
 
				-
			
 
				-<blockquote>
			
 
				-<ul>
			
 
				-  <li><code>submit</code> est émis lorsqu'on soumet un formulaire.</li>
			
 
				-  <li><code>keyup</code> est émis lorsqu'on relâche une touche, pendant la saisie dans un champ <code>input</code></li>
			
 
				-</ul>
			
 
				-</blockquote>
			
 
				-
			
 
				-```html
			
 
				-<h4>Inscrire une personne</h4>
			
 
				-<div id="message-erreur"></div>
			
 
				-<form id="nouvel-abonne">
			
 
				-  <input type="text" name="nom" placeholder="Nom" /><br>
			
 
				-  <input id="annee" type="text" name="annee" placeholder="Année de naissance" /><br>
			
 
				-  <button id="bouton-submit" type="submit">Soumettre</button>
			
 
				-</form>
			
 
				-
			
 
				-<ol id="liste-abonnes"></ol>
			
 
				-<script>
			
 
				-// Variables
			
 
				-var formulaire = document.getElementById('nouvel-abonne');
			
 
				-var inputAnnee = document.getElementById('annee');
			
 
				-var messageErreur = document.getElementById('message-erreur');
			
 
				-var boutonSubmit = document.getElementById('bouton-submit');
			
 
				-var listeAbonnes = document.getElementById('liste-abonnes');
			
 
				-
			
 
				-// Handlers
			
 
				-function inscritAbonne(evt) {
			
 
				-  // TRES important : empêche l'évènement de se poursuivre
			
 
				-  evt.preventDefault();
			
 
				-  // Récupère le formulaire (on aurait pu utiliser formulaire)
			
 
				-  var form = evt.target;
			
 
				-  // Récupère les champs de saisie de CE formulaire
			
 
				-  var inputs = form.getElementsByTagName('input');
			
 
				-  // Crée un objet vide pour stocker les valeurs saisies
			
 
				-  var valeurs = {};
			
 
				-  for(var i = 0 ; i < inputs.length ; i++) {
			
 
				-    var input = inputs[i];
			
 
				-    // Associe la valeur saisie à la clé (nom du champ)
			
 
				-    valeurs[input.name] = input.value;
			
 
				-    // Efface la valeur du champ !
			
 
				-    input.value = '';
			
 
				-  }
			
 
				-  console.log(valeurs);
			
 
				-  // Crée un nouvel item à insérer dans la liste
			
 
				-  var item = document.createElement('li');
			
 
				-  item.innerHTML = valeurs.nom + ", né en " + valeurs.annee;
			
 
				-
			
 
				-  // Insère l'item
			
 
				-  listeAbonnes.appendChild(item);
			
 
				-}
			
 
				-
			
 
				-function verifieAnnee(evt) {
			
 
				-  var input = evt.target;
			
 
				-  var valeurTexte = input.value;
			
 
				-  // Convertit une chaîne en entier... si possible !
			
 
				-  var valeurEntiere = parseInt(valeurTexte);
			
 
				-  if(valeurTexte.length > 0 && Number.isNaN(valeurEntiere)) {
			
 
				-    messageErreur.innerHTML = "La valeur '" + valeurTexte + "' n'est pas valide !";
			
 
				-    boutonSubmit.disabled = true;
			
 
				-  }
			
 
				-  else {
			
 
				-    messageErreur.innerHTML = '';
			
 
				-    boutonSubmit.disabled = false;
			
 
				-  }
			
 
				-}
			
 
				-
			
 
				-formulaire.addEventListener('submit', inscritAbonne);
			
 
				-inputAnnee.addEventListener('keyup', verifieAnnee);
			
 
				-</script>
			
 
				-```
			
--- a/react-tuto/src/resources/const.js
+++ b/react-tuto/src/resources/const.js
@@ -1,11 +1,9 @@
 
				 export const intro = `
			
 
				-Cette appli est un petit guide pour débuter en JavaScript, qui s'adresse à ceux
			
 
				-qui connaissent déjà un autre langage - Java en l'occurence.
			
 
				+Cette appli est une intro au **développement web en Python**, qui s'adresse à ceux
			
 
				+qui connaissent déjà d'autres langages - Java et JavaScript en l'occurence.
			
 
				 
			
 
				-On va présenter les bases nécessaires pour interagir avec une page web, sans
			
 
				-entrer dans les détails du langage.
			
 
				-
			
 
				-Précisons que le fait qu'il soit disponible sur tous les navigateurs et machines
			
 
				-(ordinateurs, tablettes, smartphones), fait de JavaScript la plate-forme d'exécution
			
 
				-de programmes **la plus répandue**.
			
 
				+On va aborder :
			
 
				+- Les bases *minimales* nécessaires de Python, et notamment sa syntaxe particulière
			
 
				+- Le framework Django qui permet d'écrire des applications professionnelles en Python
			
 
				+- La méthode appelée TDD pour "Test-Driven Développement", en français "Développement piloté par les tests". Sous cet acronyme barbare se cache une méthodologie efficace pour coder **proprement** des applications **fiables**.
			
 
				 `;
			
--- a/react-tuto/src/resources/markdown.json
+++ b/react-tuto/src/resources/markdown.json