ホーム エクスプローラ ヘルプ
サインイン
py
/
react-python-tdd-tutorial
フォーク元 bh/react-web-tutorial
1
0
Fork 0
ファイル
ソースを参照

Points 3 et 4 sur section 4

Benoît Hubert 7 年 前
親
b2a0f803c1
コミット
342d854dc0
4 ファイル変更、180 行追加、3 行削除
一括表示 差分情報を表示
  1. 70 2
      empty.html
  2. 36 0
      react-tuto/src/markdown/4. Evènements/03. Le paramètre Event.md
  3. 73 0
      react-tuto/src/markdown/4. Evènements/04. Formulaires.md
  4. 1 1
      react-tuto/src/resources/markdown.json

+ 70 - 2
empty.html
ファイルの表示 

@@ -7,14 +7,82 @@
 
     <meta name="description" content="">
 
     <meta name="description" content="">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="stylesheet" href="css/empty.css">
 
     <link rel="stylesheet" href="css/empty.css">
 
+		<style>
 
+		.ok-vegane { color: green; }
 
+		.pas-vegane { color: red; font-weight: bold; }
 
+		</style>
 
+
 
+		<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>
 
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
 
 
-	<!-- CONTENU -->
 
 
 
+		<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);
 
+		}
 
 
 
-	<!-- SCRIPTS -->
 
+		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>
 
 
 
 	</body>
 
 	</body>
 
 </html>
 
 </html>

+ 36 - 0
react-tuto/src/markdown/4. Evènements/03. Le paramètre Event.md
ファイルの表示 

@@ -0,0 +1,36 @@
 
+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>
 
+```

+ 73 - 0
react-tuto/src/markdown/4. Evènements/04. Formulaires.md
ファイルの表示 

@@ -0,0 +1,73 @@
 
+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>
 
+```

ファイルの差分が大きいため隠しています
+ 1 - 1
react-tuto/src/resources/markdown.json