Imaginer que vous voulez afficher une liste de fruit à l'aide des balises HTML <ul> et <li> (si vous ne connaissez pas ces balises recherchez sur internet des informations à leur sujet).

Nous aurions ce genre de code :


<ul>
 <li>banane</li>
 <li>pomme</li>
 <li>ananas</li>
 <li>pêche</li>
 <li>fraise</li>
</ul>

Cela peut vite devenir rébarbatif....

La combinaison d'un tableau, d'une méthode append et d'une boucle for va vous permettre d'automatiser la constitution de listes.

À faire vous-même 3.1

Créer les 2 fichiers suivants :

index.html


<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<script src="lib/jquery-2.1.4.min.js"></script>
<script src="javascript/script.js"></script>
</head>
<body>
 <h1>Voici ma liste de fruits</h1>
 <ul>
 </ul>
</body>
</html>

script.js


$(function(){
 var mesFruitsTab=["banane","pomme", "ananas","pêche","fraise"];
 for (var i=0;i<mesFruitsTab.length;i++){
  $('ul').append('<li>'+mesFruitsTab[i]+'</li>')
 }
});

Etudier attentivement l'exemple ci-dessus. Tester ce même exemple en double-cliquant sur index.html

N'hésiter pas à consulter les activités consacrées au tableau et au boucle en javascript.

À faire vous-même 3.2

En vous inspirant de ce qui vient d'être étudié, créer une application qui permettra d'afficher une série de fiches :

jq1

L'utilisation d'une boucle est obligatoire.

Vous utiliserez le tableau d'objets suivant :


monTableau=[
 {id : "7845",
  nom :"Durand",
  prenom :"Jean-Pierre",
  dateNaissance :"17/08/1967"},
 {id : "6578",
  nom :"Dupond",
  prenom :"Gérard",
  dateNaissance :"23/04/1984"},
 {id : "9876",
  nom :"Robert",
  prenom :"Gabriel",
  dateNaissance :"21/02/1991"}
]