pirhoo · November 27, 2015 18:50
diff --git a/avs.html b/avs.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>AVS</title>
  <meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
 </head>
 <body>

  <form id="mes-filtres">
    <!-- Ce formulaire permet d'affiner la reccherche. -->
    <select name="sexe">
      <option value="H">Homme</option>
      <option value="F">Femme</option>
      <!-- L'attribut 'selected' permet de selectionner cette valeur par defaut -->
      <option value="" selected>Tous</option>
    </select>
    <button type="submit">Filtrer</button>
  </form>

  <div id="persons">
    <!-- ICI, javascript va insérer la liste des personnes correspondants aux filtres. -->
  </div>

  <script type="text/javascript">
    // Nous déclarons ici une variables qui s'appelle "persons".
    // Cette variable contient un tableau d'objets. Chacun de ces objets
    // représente une personne avec un prénom, un age, une ville et un sexe.
    // Le sexe est exprimé à l'aide de deux caractères : H et F.
    // Ces deux caractères correspondent à ceux utilisés dans les filtres ci-dessus.
    var persons = [
      {"prenom":"Isabelle","age":78,"sexe":"F","ville":"Paris","yeux":"bleus"},
      {"prenom":"Léo","age":48,"sexe":"H","ville":"Versailles","yeux":"verts"},
      {"prenom":"Melody","age":23,"sexe":"F","ville":"Steenvort","yeux":"rouges"},
      {"prenom":"Louise","age":36,"sexe":"F","ville":"Tours","yeux":"marrons"},
      {"prenom":"Martine","age":98,"sexe":"F","ville":"Nice","yeux":"noirs"},
      {"prenom":"Adèle","age":16,"sexe":"F","ville":"Marseille","yeux":"verts"},
      {"prenom":"Augustino","age":13,"sexe":"H","ville":"Bordeaux","yeux":"bleus"},
      {"prenom":"Romano","age":34,"sexe":"H","ville":"Perpignan","yeux":"rouges"},
      {"prenom":"Floriane","age":57,"sexe":"F","ville":"Egly","yeux":"noirs"},
      {"prenom":"Roger","age":34,"sexe":"H","ville":"Arpajon","yeux":"noirs"},
      {"prenom":"James","age":29,"sexe":"H","ville":"Juvisy","yeux":"bleus"}
    ];

    // Cette fonction sert a générer la liste des personnes.
    // Le premier argument (sexe) permet de choisir le sexe des personnes
    // à afficher. Si ça valeur est vide, tous les profils sont affichés.
    function generateTable(sexe) {
      // Tout d'abord nous vidons la div contenant le liste
      // pour ne pas ajouter le contenu plusieurs fois.
      // La notation #persons (comme en CSS) signifie :
      // cible l'élément HTML ayant pour id "persons".
      $("#persons").empty()

      // Grâce à la fonction $.each nous allons parcourir le tableau "persons".
      // Pour chaque personne une fonction anonyme (contrairement aux autre fonction,
      // elle n'a pas de nom) est appellé.
      // Cette fonction reçoit deux arguments:
      //   * i: le numéro de la ligne (en partant de zéro)
      //   * person: la valeur de la ligne du tableau en cours
      $.each(persons, function(i, person){
        // Avant d'insérer la personne dans le tableau, il faut vérifier
        // deux choses :
        //   * est-ce qu'un sexe est-il spécifié dans les filtres ?
        //   * ou, la personne courante est-elle du bon sexe ?
        if(sexe == "" || person["sexe"] == sexe) {
          // Si le code arrive ici, cela signifie qu'on peut insérer la personne
          // dans la liste HTML. On utilise deux couleurs distinctes pour afficher
          // une personne.

          // La personne est une femme.
          if(person["sexe"] == "F"){
            // On selectionne encore une fois la liste des personnes.
            // Pour plus de lisibilité on saute des lignes entre chaque
            // morceau du HTML à insérer dans la liste.
            // Comme vous pouvez l'observer, le symbole '+' permet de coller
            // du texte et des variables ensemble.
            $("#persons").append(
              "<p style='background-color: green'>"
                + person["prenom"]
                + " a "
                + person["age"]
                + " ans et les yeux "
                + person["yeux"]
                + ". Elle vit à "
                + person["ville"]
              + ".</p>"
            );
          // La personne est un homme
          } else {
            // On répète l'oppération pour un homme, en modifiant
            // la couleur et la formalation.
            $("#persons").append(
              "<p style='background-color: pink'>"
                + person["prenom"]
                + " a "
                + person["age"]
                + " ans et les yeux "
                + person["yeux"]
                + ". Il vit à "
                + person["ville"]
              + ".</p>"
            );
          }
        }
      // La fonction anonyme de $.each se termine ici.
      });
    // La fonction generateTable se termine ici.
    }

    // Au chargement de la page on appelle la fonction generateTable au moins
    // une fois, sans spécifier de sexe (pour afficher tous les profils).
    generateTable('');

    // On va ici "binder" un évènement sur le formulaire. Cela signifie qu'on
    // va appeller une fonction anonyme lorsque qu'un va soumettre le formulaire.
    // D'abord on cible le formulaire ayant pour id "mes-filtres" avec le
    // selecteur "#me-filtres" (toujours comme en CSS).
    // Ensuite on utilise la fonction "on" qui sert à spécifier une fonction à
    // appeller lorsqu'un évènement est déclencher. Ici on surveille
    // l'évènement "submit" qui correspond à l'action de soumission
    $("#mes-filtres").on("submit", function() {
      // On récupète la valeur de la selectbox.
      // Pour ça  on utilise un selecteur pour cibler la balise 'select' qui a
      // un attribut "name" ayant pour valeur "sexe".
      var sexe = $("select[name=sexe]").val();
      // Maintenant qu'on connait le sexe choisi, on regénère la liste
      generateTable(sexe);
      // Enfin, on retourne "false" pour empêcher le formulaire d'envoyer
      // les données vers une autre page.
      return false;
    });

  </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>AVS</title>
	<meta charset="utf-8">
	<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
	</head>
	<body>

	<form id="mes-filtres">
	<!-- Ce formulaire permet d'affiner la reccherche. -->
	<select name="sexe">
	<option value="H">Homme</option>
	<option value="F">Femme</option>
	<!-- L'attribut 'selected' permet de selectionner cette valeur par defaut -->
	<option value="" selected>Tous</option>
	</select>
	<button type="submit">Filtrer</button>
	</form>

	<div id="persons">
	<!-- ICI, javascript va insérer la liste des personnes correspondants aux filtres. -->
	</div>

	<script type="text/javascript">
	// Nous déclarons ici une variables qui s'appelle "persons".
	// Cette variable contient un tableau d'objets. Chacun de ces objets
	// représente une personne avec un prénom, un age, une ville et un sexe.
	// Le sexe est exprimé à l'aide de deux caractères : H et F.
	// Ces deux caractères correspondent à ceux utilisés dans les filtres ci-dessus.
	var persons = [
	{"prenom":"Isabelle","age":78,"sexe":"F","ville":"Paris","yeux":"bleus"},
	{"prenom":"Léo","age":48,"sexe":"H","ville":"Versailles","yeux":"verts"},
	{"prenom":"Melody","age":23,"sexe":"F","ville":"Steenvort","yeux":"rouges"},
	{"prenom":"Louise","age":36,"sexe":"F","ville":"Tours","yeux":"marrons"},
	{"prenom":"Martine","age":98,"sexe":"F","ville":"Nice","yeux":"noirs"},
	{"prenom":"Adèle","age":16,"sexe":"F","ville":"Marseille","yeux":"verts"},
	{"prenom":"Augustino","age":13,"sexe":"H","ville":"Bordeaux","yeux":"bleus"},
	{"prenom":"Romano","age":34,"sexe":"H","ville":"Perpignan","yeux":"rouges"},
	{"prenom":"Floriane","age":57,"sexe":"F","ville":"Egly","yeux":"noirs"},
	{"prenom":"Roger","age":34,"sexe":"H","ville":"Arpajon","yeux":"noirs"},
	{"prenom":"James","age":29,"sexe":"H","ville":"Juvisy","yeux":"bleus"}
	];

	// Cette fonction sert a générer la liste des personnes.
	// Le premier argument (sexe) permet de choisir le sexe des personnes
	// à afficher. Si ça valeur est vide, tous les profils sont affichés.
	function generateTable(sexe) {
	// Tout d'abord nous vidons la div contenant le liste
	// pour ne pas ajouter le contenu plusieurs fois.
	// La notation #persons (comme en CSS) signifie :
	// cible l'élément HTML ayant pour id "persons".
	$("#persons").empty()

	// Grâce à la fonction $.each nous allons parcourir le tableau "persons".
	// Pour chaque personne une fonction anonyme (contrairement aux autre fonction,
	// elle n'a pas de nom) est appellé.
	// Cette fonction reçoit deux arguments:
	// * i: le numéro de la ligne (en partant de zéro)
	// * person: la valeur de la ligne du tableau en cours
	$.each(persons, function(i, person){
	// Avant d'insérer la personne dans le tableau, il faut vérifier
	// deux choses :
	// * est-ce qu'un sexe est-il spécifié dans les filtres ?
	// * ou, la personne courante est-elle du bon sexe ?
	if(sexe == "" \|\| person["sexe"] == sexe) {
	// Si le code arrive ici, cela signifie qu'on peut insérer la personne
	// dans la liste HTML. On utilise deux couleurs distinctes pour afficher
	// une personne.

	// La personne est une femme.
	if(person["sexe"] == "F"){
	// On selectionne encore une fois la liste des personnes.
	// Pour plus de lisibilité on saute des lignes entre chaque
	// morceau du HTML à insérer dans la liste.
	// Comme vous pouvez l'observer, le symbole '+' permet de coller
	// du texte et des variables ensemble.
	$("#persons").append(
	"<p style='background-color: green'>"
	+ person["prenom"]
	+ " a "
	+ person["age"]
	+ " ans et les yeux "
	+ person["yeux"]
	+ ". Elle vit à "
	+ person["ville"]
	+ ".</p>"
	);
	// La personne est un homme
	} else {
	// On répète l'oppération pour un homme, en modifiant
	// la couleur et la formalation.
	$("#persons").append(
	"<p style='background-color: pink'>"
	+ person["prenom"]
	+ " a "
	+ person["age"]
	+ " ans et les yeux "
	+ person["yeux"]
	+ ". Il vit à "
	+ person["ville"]
	+ ".</p>"
	);
	}
	}
	// La fonction anonyme de $.each se termine ici.
	});
	// La fonction generateTable se termine ici.
	}

	// Au chargement de la page on appelle la fonction generateTable au moins
	// une fois, sans spécifier de sexe (pour afficher tous les profils).
	generateTable('');

	// On va ici "binder" un évènement sur le formulaire. Cela signifie qu'on
	// va appeller une fonction anonyme lorsque qu'un va soumettre le formulaire.
	// D'abord on cible le formulaire ayant pour id "mes-filtres" avec le
	// selecteur "#me-filtres" (toujours comme en CSS).
	// Ensuite on utilise la fonction "on" qui sert à spécifier une fonction à
	// appeller lorsqu'un évènement est déclencher. Ici on surveille
	// l'évènement "submit" qui correspond à l'action de soumission
	$("#mes-filtres").on("submit", function() {
	// On récupète la valeur de la selectbox.
	// Pour ça on utilise un selecteur pour cibler la balise 'select' qui a
	// un attribut "name" ayant pour valeur "sexe".
	var sexe = $("select[name=sexe]").val();
	// Maintenant qu'on connait le sexe choisi, on regénère la liste
	generateTable(sexe);
	// Enfin, on retourne "false" pour empêcher le formulaire d'envoyer
	// les données vers une autre page.
	return false;
	});

	</script>
	</body>
	</html>