Plusieurs fonctions à la suite dans une boucle

Le problème exposé dans ce sujet a été résolu.

Bonjour,

J'ai quelques difficultés de débutant en JavaScript : J'utilise le logiciel Filmotech pour ma vidéothèque. Et je voudrais afficher dans un fichier HTML, la liste de toutes les fiches de films que j'ai répertoriés. Je peux le faire à partir de la base de données du logiciel, qui est un fichier XML auquel s'ajoute un dossier d'images. J'ai le script suivant, qui m'extrait et m'affiche mes données depuis le fichier XML (sans recourir à un serveur Web) :

Voilà le code dans le header :

1
2
3
4
5
6
7
8
9
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","Filmotech_Films.XML",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

Et le code dans le body :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
document.write("<div class=\"list-item\">");
var x=xmlDoc.getElementsByTagName("Film");
for (i=0;i<x.length;i++){
    document.write("<img src=\"Affiches/Filmotech_");
    document.write(x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue);
    document.write(".JPG\" /><h3>");
    document.write(x[i].getElementsByTagName("TitreVF")[0].childNodes[0].nodeValue);
    document.write("</h3><p class=\"tags\">");
    document.write(x[i].getElementsByTagName("Genre")[0].childNodes[0].nodeValue);
    document.write("</p><p class=\"ext-info\">");
    document.write(x[i].getElementsByTagName("Annee")[0].childNodes[0].nodeValue + " - ");
    document.write(x[i].getElementsByTagName("Duree")[0].childNodes[0].nodeValue + "min. - ");
    document.write(x[i].getElementsByTagName("Pays")[0].childNodes[0].nodeValue);
    document.write("</p><dl class=\"int-info\"><dt>De :</dt><dd>");
    document.write(x[i].getElementsByTagName("Realisateurs")[0].childNodes[0].nodeValue);
    document.write("</dd><dt>Avec :</dt><dd>");
    document.write(x[i].getElementsByTagName("Acteurs")[0].childNodes[0].nodeValue);
    document.write("</dd><dt>Synopsis :</dt><dd>");
    document.write(x[i].getElementsByTagName("Synopsis")[0].childNodes[0].nodeValue);
    document.write("</dd></dl><p class=\"file-info\">");
    document.write(x[i].getElementsByTagName("Support")[0].childNodes[0].nodeValue);
    document.write("</p>");
}
document.write("</div>");

C'est déjà un truc de dingue pour moi, d'être arrivé à ce résultat. Mais il me reste une difficulté : afficher les images. En effet, dans le fichier XML, chaque item(film) porte un numéro identifiant (en chiffre) qui correspond au nom de l'image dans le dossier. Et le problème, c'est que les noms de fichier sont sous la forme "Filmotech_00000.JPG". En fait, l'identifiant remplace le(s) dernier(s) zéro(s) sur une série de 5 chiffres. Par exemple, pour l'item portant l'ID "42", l'image est "Filmotech_00042.JPG". Pour l'ID "7", l'image est "Filmotech_00007.JPG". Pour l'ID "2500", l'image est "Filmotech_02500.JPG"…

Donc je cherche le moyen d'écrire le numéro ID précédé des zéros complémentaires pour arriver aux 5 chiffres du nom de l'image. J'y arriverais s'il n'y avait qu'un seul item car je pourrais déclarer plusieurs variables pour le même item. Mais là, je ne vois pas comment tout caler dans la boucle… :euh:

Merci d'avoir lu et deux fois plus de merci à l'avance pour votre aide. :)

+0 -0

Salut !

Tu as le droit de déclarer des variables dans une boucle, elles seront remise à zéro à chaque nouvelle itération, ce qui est pratique pour re initialiser certaines choses.

Si je comprends bien ta demande, c'est d'obtenir a partir du numéro une chaine de 5 chiffres qui complète le numéro par des zéros. Tu remarquera que la variable start est ré initialisée à chaque fois qu'on appel la fonction pour prendre comme valeur la longueur de la chaine passée en paramètre.

Je te propose une petite fonction simple qui fait ce travail :

1
2
3
4
5
6
7
8
function idToImg(id){
    var start =  id.length; // on calcul la longueur de la chaine initiale

    for(var i=start; i<5;i++){
        id = "0"+id;  // on ajoute le nombre de zéros qui manquent pour aller à 5
    }
    return id;  // on retourne le résultat 
}

Il ne te reste plus qu'a appeler cette fonction dans ton code pour convertir ton id en lui ajoutant le nombre de zéros requis !

Normalement ça réponds à ton besoin non ? :)

+1 -0

Merci pour tout ! Ça fonctionne à merveille !!! ^^

J'ai mis telle quelle ta fonction dans le code JS du header. Ensuite, dans le body, j'ai intégré la chose comme ceci :

1
2
3
4
document.write("<img src=\"Affiches/Filmotech_");
var filmid = x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue;
document.write(idToImg(filmid));
document.write(".JPG\" />");

Je n'espérais pas y arriver aussi rapidement. Youpi ! :D

Merci encore, je vous aime tous.

+0 -0

Ce serait cool de ne pas utiliser document.write, pour deux raisons :

  • d'abord parce que écrire dans le document à chaque ligne, ça pose des problèmes de performance. Mieux vaut mettre toute la chaîne de caractères dans une variable, et faire une sortie à la fin de la boucle.
  • ensuite, parce qu'il vaut mieux utiliser <monelement>.innerHTML, qui insère dans le DOM au lieu de faire une sortie écran

Un peu plus d'arguments (en anglais) : http://stackoverflow.com/questions/802854/why-is-document-write-considered-a-bad-practice

+1 -0

Ce serait cool de ne pas utiliser document.write […]

Chaopale Lamecarlate

Ok ! Merci pour l'info. J'ai corrigé ça en mettant mon script d'affichage à la fin du body comme ceci :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var htmlist = "";
var x=xmlDoc.getElementsByTagName("Film");
for (i=0;i<x.length;i++){
    var filmid = x[i].getElementsByTagName("ID")[0].childNodes[0].nodeValue;
    htmlist += "<div class=\"list-item\" id=\""+filmid+"\">";
    htmlist += "<img src=\"Affiches/Filmotech_"+idToImg(filmid)+".JPG\" /><h3>";
    htmlist += x[i].getElementsByTagName("TitreVF")[0].childNodes[0].nodeValue + "</h3><p class=\"tags\">";
    htmlist += x[i].getElementsByTagName("Genre")[0].childNodes[0].nodeValue;
    htmlist += "</p><p class=\"ext-info\">";
    htmlist += x[i].getElementsByTagName("Annee")[0].childNodes[0].nodeValue + " - ";
    htmlist += x[i].getElementsByTagName("Duree")[0].childNodes[0].nodeValue + "<small>min.</small> - ";
    htmlist += x[i].getElementsByTagName("Pays")[0].childNodes[0].nodeValue;
    htmlist += "</p><p class=\"file-info\">";
    htmlist += x[i].getElementsByTagName("Support")[0].childNodes[0].nodeValue;
    htmlist += "</p><dl class=\"int-info\"><dt>De :</dt><dd>";
    htmlist += x[i].getElementsByTagName("Realisateurs")[0].childNodes[0].nodeValue;
    htmlist += "</dd><dt>Avec :</dt><dd>";
    htmlist += x[i].getElementsByTagName("Acteurs")[0].childNodes[0].nodeValue;
    htmlist += "</dd><dt>Synopsis :</dt><dd>";
    htmlist += x[i].getElementsByTagName("Synopsis")[0].childNodes[0].nodeValue;
    htmlist += "</dd></dl></div>";
}
document.getElementById("listing").innerHTML += htmlist;

Côté perfs, l'outil de développement de Firefox me dit aussi :

L'utilisation d'XMLHttpRequest de façon synchrone sur le fil d'exécution principal est obsolète à cause de son impact négatif sur la navigation de l'utilisateur final. Consulter http://xhr.spec.whatwg.org/ pour plus d'informations.

Mais puisque je ne souhaite pas m'encombrer d'un serveur Web, je n'ai pas vraiment de solution pour ça. Et comme je ne constate aucune latence (ça m'a l'air fluide), donc ça n'est pas un problème pour le moment.

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte