Projet DigiPix : une boutique en ligne

Le projet consiste à afficher le catalogue d'une boutique virtuelle de vente d'appareils photos numériques. Dans un premier temps, on ne connaît que les noms des fichiers contenant les photos. Il s'agit de fichiers .jpg nommés photo1, photo2, etc.

Pour construire le catalogue, nous utilisons un tableau HTML (élément <table>) qui convient très bien pour l'affichage de données tabulaires. Pour afficher l'ensemble de ces photos, il faut donc utiliser une boucle qui génère les noms de fichiers en concaténant le mot "photo" et un compteur de boucle i. Sachant que nous disposons de 9 photos, nous utilisons une boucle for allant de 1 à 9 y compris.

<script type="text/javascript">
<!--
// insérer la balise <table> en JavaScript avant la boucle
document.write("<table>") ;
for (var i = 1 ; i <= 9 ; i++) {

document.write("<tr>");
document.write("<td>") ;
document.write("<img src='../images/photo" + i + ".jpg' />") ;
document.write("</td>") ;
document.write("</tr>") ;
}
// Après la boucle fermer la balise <table>
document.write("</table>") ;
//-->
</script>

Dans la version ci-dessous, on décide d'utiliser des noms de fichiers plus évocateurs. Plus question dans ce cas de générer les noms de fichiers. JavaScript ne permet pas d'accéder à des ressources extérieures telles que des fichiers ou des bases de données. Il ne reste donc qu'un moyen : il faut coder "en dur" les noms des fichiers. Nous utilisons pour cela une structure de type Array.

var photos = new Array("ap-s1pro.jpg",
"ap-pentax.jpg",
"ap-olympus.jpg",
"ap-nikon.jpg",
"ap-kodak.jpg",
"ap-finepix.jpg",
"ap-epson.jpg",
"ap-canon90.jpg",
"ap-canon.jpg"
) ;

Cela a pour conséquence que la boucle doit maintenant commencer à 0 au lieu de 1. On peut également utiliser la propriété length de l'objet Array pour déterminer la garde de la boucle.

<table>
<script type="text/javascript">
<!--
var photos = new Array("ap-s1pro.jpg",
"ap-pentax.jpg",
"ap-olympus.jpg",
"ap-nikon.jpg",
"ap-kodak.jpg",
"ap-finepix.jpg",
"ap-epson.jpg",
"ap-canon90.jpg",
"ap-canon.jpg"
) ;
for (var i = 0 ; i < photos.length ; i++) {
document.write("<tr>");
document.write("<td>") ;
var chemin = "../images/" + photos[i] ;
document.write("<img src=\"" + chemin + "\" />") ;
document.write("</td>")
document.write("</tr>") ;
}
//-->
</script>
<table>

Utilisons maintenant un second tableau pour stocker une brève description pour chaque appareil et affichons cette information dans une seconde colonne.

<script type="text/javascript">
<!--
var photos = new Array("ap-s1pro.jpg",
"ap-pentax.jpg",
"ap-olympus.jpg",
"ap-nikon.jpg",
"ap-kodak.jpg",
"ap-finepix.jpg",
"ap-epson.jpg",
"ap-canon90.jpg",
"ap-canon.jpg"
) ;
var descriptions = new Array("s1pro",
"Pentax",
"Olympus",
"Nikon",
"Kodak",
"Finepix",
"Epson",
"Canon90",
"Canon") ;

for (var i = 0 ; i <photos.length ; i++) {
document.write("<tr>");
document.write("<td class=\"photo\">") ;
var chemin = "../images/" + photos[i] ;
document.write("<img src=\"" + chemin + "\" />") ;
document.write("</td>") ;
document.write("<td class=\"description\">") ;
document.write(descriptions[i]) ;
document.write("</td>") ;
document.write("</tr>") ;
}
//-->
</script>