IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Trier une liste de résultats


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut Trier une liste de résultats
    Bonjour, à toutes et à tous.

    Mon problème du jour est de trier une liste de résultats d'une recherche de volets d'une saga cinématographique par ordre croissant du numéro des volets.

    Pour l'instant, j'ai une page et un JavaScript qui fonctionnent pour afficher une liste de films vus par année. La liste des films est affichée dans l'ordre de visionnage et donc de haut en bas, dans l'ordre chronologique, dans ma base de données locale.
    J'aimerais pouvoir faire la même chose avec une saga, dont je n'aurais hélas pas vu les volets dans l'ordre, du genre d'abord le volet 2, puis le 3 et enfin le 1er.

    Exemple pour bien expliquer :

    Saga L'arme fatale enregistrée par ordre de visionnage dans la base de données locale :
    1. L'arme fatale 2 (vu le 01.01.2024)
    2. L'arme fatale 4 (vu le 01.02.2024)
    3. L'arme fatale (vu le 01.03.2024)
    4. L'arme fatale 3 (vu le 01.04.2024)


    Résultat de l'affichage des volets de la saga dans l'ordre croissant, c'est ce que j'aimerais obtenir :

    Saga L'arme fatale :
    1. 01 : L'arme fatale
    2. 02 : L'arme fatale 2
    3. 03 : L'arme fatale 3
    4. 04 : L'arme fatale 4



    Voici le code de la page HTML, adaptée pour l'objectif recherché, qui affiche cette liste de volets d'une saga :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <html><head><title>Liste des volets de la saga</title>
    <script type="text/javascript" src="scripts/bdjs.js"></script>
    <link type="text/css" rel="stylesheet" media="screen" title="Style" href="scripts/style.css" /></head><body>
    <div id="Entete"><script type="text/javascript">AfficheEntete()</script></div>
    <div id="Titre3"><a href='filmsvus.html'><script type="text/javascript">AfficheTitreListe()</script></a></div>
    <!-- Début de la liste des volets de la saga -->
    <div id="Centre7"><div id="Centre8">
    <!-- Début du div de l'affichage des résultats de la recherche -->
    <div id="Descriptions"><a name="_top"></a><script type="text/javascript">SearchItem2()</script></div>
    <!-- Fin du div de l'affichage des résultats de la recherche -->
    <br /></div></div>
    <!-- Fin de la liste des volets de la saga -->
    <div id="BarreDeBoutons2"><input type="button" name="bouton" style="width:50px" value="Retour" onclick="history.go(-1);return(false)"></div>
    <div id="Copyright"><script type="text/javascript">AfficheCopyright()</script></div>
    <div id="BarreDeBoutons1"><script type="text/javascript">AfficheBarreDeBoutons()</script></div>
    </body></html>

    Et voici le JS contenu dans le fichier " bdjs.js " (je n'ai évidemment pas mis le fichier en entier, qui contient toute la base de données locale et tous les JS) :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    // Initialisation de la base de données et création des éléments de la base de données.
     
    var tjs_base=new TJS_InitBase("_self");
     
    // Voici un exemple pour un film vu, 1 ligne tjs_base.Add(" ... "); alimentée par de nombreuses variables en amont, qui sont des informations sur le film vu et plein de mots-clés concernant le film, parmi lesquels le moteur de recherche pourra puiser pour l'afficher selon un mot-clé contenu en paramètre dans une URL.
     
    var FilmVuLe004_2024="04.02.2024";
    var LieuDeVisionnage004_2024="à la télévision";
    var FilmVuAvec004_2024="ma Chérie";
    var TitreFr004_2024="Maya l'abeille 2 : Les Jeux du miel";
    var TitreOr004_2024="Die Biene Maja 2 - Die Honigspiele";
    var Realisateur004_2024="Noel Cleary et Sergio Delfino";
    var Compositeur004_2024="Ute Engelhardt";
    var ProduitEn004_2024="2017";
    var SortieEnFranceLe004_2024="18.07.2018";
    var Duree004_2024="01h26";
    var Vu004_2024="en 2D";
    var Histoire004_2024="adaptée des romans Die Biene Maja und ihre Abenteuer (Maya l'abeille et ses aventures) (1912), et Himmelsvolk (Peuple du ciel) (1915), de Waldemar Bonsels";
    var FilmPossede004_2024="DVD";
    var BOPossedee004_2024="Non";
    var Notation004_2024="<img src='images/EtoileNotation2.png' class='EtoilesNotation' title='Pas mal'>";
    var ActeurPrincipal004_2024="";
    var ActricePrincipale004_2024="";
    var Synopsis004_2024="Maya participe enfin aux Grands Jeux du Miel. L'enjeu est de taille : Maya doit absolument gagner, sinon elle devra livrer tout le miel de sa ruche à l'Impératrice, qui n'est autre que la sœur de la Reine de sa ruche. Maya, Willy et les membres de leur équipe vont devoir se surpasser pour battre l'équipe de Violette, une adversaire aussi rusée et maligne que mauvaise joueuse…";
    var Casting004_2024="<span class=\"texte3\">Film d'animation</span>";
    var CastingOuEt004_2024="Film d'animation";
    var VoletSaga004_2024="02";
    var Saga004_2024="Volets : "+nbvolsaga528+"&nbsp;&nbsp;-&nbsp;&nbsp;<a href='fichefilm.html?numerodefilm=038_2017'><img src='images/fleche3.gif' class='BoutonsSaga' /></a> N°"+VoletSaga004_2024+" <a href='fichefilm.html?numerodefilm=0001_2024'><img src='images/fleche1.gif' class='BoutonsSaga' /></a>";
    var TitreSaga004_2024=titresaga528;
    var AnneeEtTypeDeFilm004_2024="2024CF";
    var TypeFilm004_2024="Cinéfilm";
     
    tjs_base.Add("fichefilm.html?numerodefilm=004_2024","<img src='images/affiches/004_2024.jpg' class='affiche' />","<span class='desc'><b>004 - "+FilmVuLe004_2024+" :</b> "+TitreFr004_2024+" ("+TitreOr004_2024+") - "+ProduitEn004_2024+" - "+TypeFilm004_2024+"</span>","<span class='infos'><b>Réalisateur(s) :</b> "+Realisateur004_2024+"<br /><b>Casting :</b> "+ActeurPrincipal004_2024+" "+CastingOuEt004_2024+" "+ActricePrincipale004_2024+"<br />Vu "+LieuDeVisionnage004_2024+"</span>"," "+TitreSaga004_2024+" "+VoletSaga004_2024+" "+AnneeEtTypeDeFilm004_2024+" "+FilmVuLe004_2024+" "+TitreFr004_2024+" "+TitreOr004_2024+" "+ProduitEn004_2024+" "+SortieEnFranceLe004_2024+" "+Realisateur004_2024+" "+Compositeur004_2024+" "+LieuDeVisionnage004_2024+" "+Casting004_2024+" ");
     
     
    // Scripts du chercheur-afficheur de cinéfilms et vidéofilms vus par année.
     
    // Script d'initialisation et de création des éléments de la base de données.
    // Lié à la base de données, qui précède la liste des scripts.
     
    function TJS_InitBase(target)
    {
    this.nb_item=0; this.target=target; this.Add=AddItem; this.Search=SearchItem;
    }
     
     
    // Script définissant les différents éléments contenus dans les résultats éventuels (affichés dans le div Descriptions).
     
    function AddItem(page,image,desc,infos,cle)
    {
    var nb = this.nb_item; var item = new Object; item.page=page; item.image=image; item.desc=desc; item.infos=infos; item.cle=cle; this[nb]=item; this.nb_item++;
    }
     
     
    // Script de récupération de "anneetype" dans les liens du récapitulatif des cinéfilms/vidéofilms vus par année.
    // Créé par Patrick Manzoni le 23.05.2024.
     
    function anneeEtType(param)
    {
    var chaine=window.location.search;
    chaine=chaine.substring(1);
    var dz=chaine.indexOf("#",0);
    if(dz!=-1) {
    chaine=chaine.substring(0,dz);}
    chaine=chaine+"&";
    if(chaine.indexOf(param,0)!=-1){
    pos=chaine.indexOf(param,0);
    var pos2=chaine.indexOf("=",pos);
    var pos3=chaine.indexOf("&",pos);
    contenu=chaine.substring(pos2+1,pos3);}
    return contenu;
    }
     
     
    // Script de recherche et d'affichage de la liste des résultats dans le div Descriptions.
     
    function SearchItem2(at)
    {
    var at = anneeEtType("anneetype"); // Valeur "anneetype" dans l'URL.
    at = unescape(at);
    at = at.replace(/\+/g," ");
    var n=tjs_base.nb_item;
    var indice=-1;
    {
    var Z=""; var nb=0;
    for (var i=0; i<n; i++)
    {
    if (tjs_base[i].cle.toUpperCase().indexOf(at.toUpperCase(),0)!="-1")
    {
    Z+="<div id='CadreReponse'> "+tjs_base[i].image+" <a href='"+tjs_base[i].page+"' target='"+tjs_base.target+"'> "+tjs_base[i].desc+"</a>" +tjs_base[i].infos+ "<a href='#_top' title='Retour au sommet de la page'><img src='images/fleche2.gif' class='FlechesResultats' /></a></div>";
    nb++;
    }
    }
    document.write(Z);
    }
    }
    Précision :

    Pour afficher cette liste de résultats, sur une autre page HTML précédente, on a cliqué sur un lien et, dans son URL, il y a un paramètre " anneetype " (on en créera un autre pour la saga, " numsaga "), qui est récupéré par un JS. Donc, dans la base de données locale, il y a une longue liste de lignes tjs_base.Add(" ... "); , comme celle de l'exemple donné, qui sont autant de films vus. Le moteur de recherche regarde toutes ces lignes et n'affichent pour résultats que celles dont un mot-clé correspond à celui de la recherche, dans ce cas le numéro de la saga. Dans les résultats affichés, les volets de la saga, on a le numéro, le titre, le réalisateur, la durée, etc... de chacun.

    Je pense que la modification à apporter, pour obtenir le résultat voulu, se situe au niveau de la dernière partie, la fonction SearchItem2 et son " document.write " qui affiche sur la page HTML la liste des résultats.
    Je pense qu'il faudra aussi, avant tout, ajouter la variable " VoletSaga004_2024 ", dans l' " item cle " du tjs_base.Add(" ... "); , je l'ai déjà fait dans l'exemple donné, qui attribue au volet de la saga un numéro, afin que la fonction JS s'en serve pour effectuer le tri. Il faudrait donc que la fonction SearchItem2 modifiée regarde la valeur " VoletSaga " des résultats affichés pour les trier dans l'ordre. J'espère que c'est possible... mais cela me semble compliqué.

    En vous remerciant d'avance pour votre précieuse aide, je vous souhaite un bon week-end. A bientôt.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 354
    Points : 15 700
    Points
    15 700
    Par défaut
    si vous avez la date de sortie de chaque film, je pense que vous pourrez utilisez cette information pour faire le tri des films.

    je me demande comment vous saisissez un nouveau film ? si c'est en modifiant le fichier javascript, je vous conseille de plutot stocker cela sous la forme d'objets javascript pour éviter les erreurs de saisie des différentes variables.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Bonjour, Mathieu.

    Non, la date de sortie des volets d'une saga n'est hélas pas la bonne solution... La faute aux préquelles, des volets qui sortent après plusieurs volets, mais qui chronologiquement se passent avant l'histoire racontée dans le premier volet sorti... C'est devenu très courant ces dernières années. Par exemple, dans la saga Destination finale, le 5ème volet sorti en 2011 est devenu le nouveau 1er volet, parce que son histoire se passe avant le premier film sorti au cinéma en 2000... Et des exemples similaires, il y en a beaucoup... Idem avec Kingsman : le 3ème sorti se passe avant le 1er.

    Pour saisir un nouveau film, c'est là tout mon problème... Oui, j'ajoute les nouveaux films vus dans le fichier bdjs.js, qui contient toute la BDD et les JS. J'ai créé une page Ajouter, qui permet de rentrer toutes les informations du film dans les champs de la future fiche du film (en parallèle, je travaille aussi sur un moteur de recherche qui récolte les données du film sur l'API du site TMDB), puis, en cliquant sur un bouton, les lignes de variables du film sont créées et copiées dans le presse-papier. Il ne me reste plus qu'à faire un coller dans le fichier, à la suite du film précédemment vu, et de copier l'affiche du film dans le sous-dossier "affiches " du dossier " images ".
    J'ai vu qu'il serait possible de simplifier cela avec JQuery et JSON, mais je ne maîtrise pas du tout cela...

    Pour votre solution d'objets javascript, auriez-vous un exemple, SVP ? Vu que je suis en train de modifier toute ma BDD pour la création de la nouvelle version 7.0 de ma liste de films vus, je ne suis plus à cela près... Je peux encore changer des choses.

    Bon dimanche.

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 354
    Points : 15 700
    Points
    15 700
    Par défaut
    au sujet de jquery, c'est une bibliothèque qui permettait de simplifier le développement dans les anciens navigateurs mais elle n'est plus très utile avec les navigateurs actuels.

    pour le format de stockage des données, vous pouvez faire cela :
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const bdd = [
    	{
    		"titre" : "Maya l'abeille 2 : Les Jeux du miel",
    		"saga" : "Maya l'abeille",
    		"volet_saga" : "2",
    		...
    	}
    	,{
    		"titre" : "Maya l'abeille ...",
    		"saga" : "Maya l'abeille",
    		"volet_saga" : "1",
    		...
    	}
     
     
    ];

    pour avoir une interface plus pratique pour ajouter des films, vous aurez besoin d'un langage de programmation côté serveur comme PHP ou node.js.
    si vous hébergez cette application sur votre ordinateur, peut-être que node.js est le plus pratique pour vous puisqu'il s'agit de javascript côté serveur.

  5. #5
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par mathieu Voir le message
    au sujet de jquery, c'est une bibliothèque qui permettait de simplifier le développement dans les anciens navigateurs mais elle n'est plus très utile avec les navigateurs actuels.

    pour le format de stockage des données, vous pouvez faire cela :

    pour avoir une interface plus pratique pour ajouter des films, vous aurez besoin d'un langage de programmation côté serveur comme PHP ou node.js.
    si vous hébergez cette application sur votre ordinateur, peut-être que node.js est le plus pratique pour vous puisqu'il s'agit de javascript côté serveur.
    Mathieu, merci pour les informations sur JQuery. J'en suis étonné, car j'ai trouvé encore beaucoup de projets/sites qui s'en servent... Et, d'après les informations que j'ai trouvées, cela sert aussi pour des applications et exécutables en locale avec un fichier JSON, qui pourrait être ma nouvelle BDD.

    En attendant votre réponse, je me suis informé sur les objets javascript et c'est donc ce à quoi je m'attendais. Merci pour l'exemple. Niveau code, je ne vois pas plus de clareté et simplification... De plus, la question que je me pose alors, c'est comment mon moteur de recherche va aller puiser dans ces objets JS les variables correspondant aux mot-clés saisis pour afficher les films recherchés ? Cela me paraît compliqué aussi...

    Je maîtrise le PHP, mais je n'ai pas envie de passer par un serveur. Mon application est 100% locale, stockée sur un disque dur.

    Du coup, hélas, vous n'avez pas de solution pour modifier mon JS afin de faire un classement... Dommage. Je vais continuer à chercher une solution... En attendant, la seule solution que j'ai est de créer une page par saga... et il y en a beaucoup des sagas !

    Bonne journée.

  6. #6
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 354
    Points : 15 700
    Points
    15 700
    Par défaut
    Citation Envoyé par pat_fr38 Voir le message
    J'en suis étonné, car j'ai trouvé encore beaucoup de projets/sites qui s'en servent...
    jquery fonctionne toujours bien et il est régulièrement mis à jour. avec le temps cela devient juste une bibliothèque de plus en plus légère puisque cela fini par être un simple proxy.

    Citation Envoyé par pat_fr38 Voir le message
    cela sert aussi pour des applications et exécutables en locale avec un fichier JSON, qui pourrait être ma nouvelle BDD.
    les requêtes http sont aussi faisables en javascript directement
    https://developer.mozilla.org/fr/doc.../fetch#exemple

    Citation Envoyé par pat_fr38 Voir le message
    En attendant, la seule solution que j'ai est de créer une page par saga...
    vous voulez dire "un fichier par saga" ? vous n'avez pas besoin de cela.
    à partir de la liste des films, vous pouvez faire une boucle qui va choisir la saga à afficher
    https://developer.mozilla.org/fr/doc.../Array/forEach
    la saga peut se choisir par un clic dans une liste ou aussi en passant un argument dans l'url
    https://developer.mozilla.org/fr/doc...arams#exemples

  7. #7
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 354
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 354
    Points : 15 700
    Points
    15 700
    Par défaut
    je vous ai préparé un exemple que vous pouvez télécharger là :
    https://drop.infini.fr/r/pAFgaw7R5T#...e7/QRdCeKcz8M=

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 436
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 436
    Points : 4 930
    Points
    4 930
    Par défaut
    Bonjour,
    Citation Envoyé par pat_fr38 Voir le message
    Du coup, hélas, vous n'avez pas de solution pour modifier mon JS afin de faire un classement... Dommage.
    Si si, la solution existe mais j'attendais seulement que vous appliquiez les suggestions de Mathieu, car c'est le moyen le plus propre.

    Sinon et si vous voulez dépanner le code pour le moment, je pense que tout se passe ici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    {
    var Z=""; var nb=0;
    for (var i=0; i<n; i++)
    {
    if (tjs_base[i].cle.toUpperCase().indexOf(at.toUpperCase(),0)!="-1")
    {
    Z+="<div id='CadreReponse'> "+tjs_base[i].image+" <a href='"+tjs_base[i].page+"' target='"+tjs_base.target+"'> "+tjs_base[i].desc+"</a>" +tjs_base[i].infos+ "<a href='#_top' title='Retour au sommet de la page'><img src='images/fleche2.gif' class='FlechesResultats' /></a></div>";
    nb++;
    }
    }
    document.write(Z);
    }
    Il y'a seulement quelques trucs à corriger comme
    • les accolades en trop lignes 1 et 12 qu'ils ne servent à rien
    • Le 0 dans .indexOf(at.toUpperCase(),0)!="-1" est utilisé par défaut, donc pas la peine de réutiliser
    • Le "-1" pourrait être tout simplement -1 sans les guillemets
    • Le id id='CadreReponse' doit être unique dans une page HTML, donc soit le supprimer ou bien le rajouter un nombre différent à chaque tour de la boucle for
    • La fonction write() n'est plus utilisée maintenant, c'est de l'ancienne école.., il existe insertAdjacentHTML()


    En gros l'idée c'est de stocker le retour de la variable Z dans un tableau que l'on peut nommé html par exemple, puis faire le tri avec la fonction sort() et localeCompare()
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var Z=""; var nb=0;
    var html=[];//déclarez la variable ici
    for (var i=0; i<n; i++)
    {
    if (tjs_base[i].cle.toUpperCase().indexOf(at.toUpperCase())!=-1)
    {
    html.push("<div> "+tjs_base[i].image+" <a href='"+tjs_base[i].page+"' target='"+tjs_base[i].target+"'> "+tjs_base[i].desc+"</a>" +tjs_base[i].infos+ "<a href='#_top' title='Retour au sommet de la page'><img src='images/fleche2.gif' class='FlechesResultats' /></a></div>");
    html.sort((a,b)=>a.localeCompare(b));
    nb++;
    }
    }
    document.body.insertAdjacentHTML("beforeend",html.join(""));

  9. #9
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par mathieu Voir le message
    jquery fonctionne toujours bien et il est régulièrement mis à jour. avec le temps cela devient juste une bibliothèque de plus en plus légère puisque cela fini par être un simple proxy.

    les requêtes http sont aussi faisables en javascript directement
    https://developer.mozilla.org/fr/doc.../fetch#exemple
    OK, merci encore pour les infos, Mathieu.

    Citation Envoyé par mathieu Voir le message
    vous voulez dire "un fichier par saga" ? vous n'avez pas besoin de cela.
    à partir de la liste des films, vous pouvez faire une boucle qui va choisir la saga à afficher
    https://developer.mozilla.org/fr/doc.../Array/forEach
    la saga peut se choisir par un clic dans une liste ou aussi en passant un argument dans l'url
    https://developer.mozilla.org/fr/doc...arams#exemples
    Ben, en fait je voulais dire une page HTML par saga, comme par exemple ici pour la Saga 006 (la 3ème de Star Trek) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <html><head lang="fr"><title>Saga</title>
    <script type="text/javascript" src="scripts/bdjsdepjm.js"></script>
    <link rel="stylesheet" href="scripts/style.css" type="text/css"></head><body>
    <div id="Entete"><script type="text/javascript">AfficheEntete0()</script></div>
    <div id="Titre3"><a href='filmsvusparpjm.html'>.::::: Saga 006 : <script type="text/javascript">document.write(""+titresaga006+"");</script> - Nombre de volets : <script type="text/javascript">document.write(""+nbvolsaga006+"");</script> :::::.</a></div>
    <!-- Début de la liste des volets de la saga -->
    <div id="Centre7"><div id="Centre8"><a name="_top"></a>
    <!-- Début de la fiche du volet 01 -->
    <div id="Cadre"><script type="text/javascript">AfficheCadreFicheVolet2("023_2009")</script></div>
    <!-- Fin de la fiche du volet 01 -->
    <!-- Début de la fiche du volet 02 -->
    <div id="Cadre"><script type="text/javascript">AfficheCadreFicheVolet2("076_2014")</script></div>
    <!-- Fin de la fiche du volet 02 -->
    <!-- Début de la fiche du volet 03 -->
    <div id="Cadre"><script type="text/javascript">AfficheCadreFicheVolet2("078_2016")</script></div>
    <!-- Fin de la fiche du volet 03 -->
    <br /></div></div>
    <!-- Fin de la liste des volets de la saga -->
    <div id="BarreDeBoutons2"><input type="button" name="bouton" style="width:50px" value="Retour" onclick="history.go(-1);return(false)"></div>
    <div id="Copyright"><script type="text/javascript">AfficheCopyright0()</script></div>
    <div id="BarreDeBoutons1"><script type="text/javascript">AfficheBarreDeBoutons0()</script></div>
    </body></html>

    Il semble qu'il me faille apporter des précisions sur la structure et l'utilisation de mon application pour qu'on comprenne mieux son fonctionnement.

    J'ai une fenêtre rectangulaire, une GUI, ouverte par un exécutable créé par le logiciel AutoPlay Media Studio. Au démarrage, elle affiche une page Bienvenue au centre, il y a un bandeau titre en haut, et en bas un bandeau Copyright et une barre de boutons (faisant office de menu).

    Par un des boutons du menu, on ouvre dans la GUI une page HTML montrant la liste de tous les cinéfilms vus par année (du genre " En 2023 : 22, dont 7 au cinéma " et " En 2024 : 11, dont 2 au cinéma " etc...). Quand on clique sur un des liens d'une année, une page HTML s'ouvre dans la GUI pour montrer la liste de tous les films vus durant l'année sélectionnée. Pour cela, j'utilise le code du moteur de recherche trouvé il y a des années et que j'ai modifié récemment pour cette fonction, et ça marche très bien, à mon grand plaisir. Cela m'a permis de n'avoir qu'une page HTML pour afficher toutes les listes annuelles de films vus. Avant, j'avais une page par année, pour les cinéfilms et les vidéofilms...

    Par un autre bouton, on peut faire la même chose pour les vidéofilms (c'est ainsi que j'ai décidé de nommer les films sortis directement en vidéo/VOD/chaîne de streaming en France).

    Un autre bouton affiche une page HTML, qui montre la longue liste de toutes les sagas. Et, quand on clique sur le lien d'une saga, une page HTML montre la saga par une liste de tous les volets qui la composent, dans l'ordre croissant (Volet 1, en dessous Volet 2, etc...). Pour conclure, en cliquant sur un des volets de la saga, on ouvre une page HTML montrant la fiche du film avec son affiche et toutes ses informations (Réalisateur, Compositeur, Année de production, Date de sortie en France, Durée, Possession personnelle, Format 2D ou 3D, Synopsis, Casting, Appartenance à une saga et accès au volet suivant/précédent de cette saga).

    Pour en finir avec la description de la GUI de l'appli, un bouton donne accès à ma collection de DVD, un autre ouvre une page pour ajouter un nouveau film vu et un dernier ouvre le moteur de recherche, qui me permet de vérifier rapidement si et quand j'ai déjà vu un film, mais aussi de voir la liste de tous les films vus au cinéma, tous les films d'un même réalisateur ou acteur ou compositeur, bref il y a des mot-clés permettant de chercher et afficher tout cela en puisant dans la BDD. Voilà voilà...

    Bon après-midi.

  10. #10
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par mathieu Voir le message
    je vous ai préparé un exemple que vous pouvez télécharger là :
    https://drop.infini.fr/r/pAFgaw7R5T#...e7/QRdCeKcz8M=
    Merci encore, Mathieu, pour ce superbe travail. Cependant, désolé, on voit que un film (Emprise), ne faisant donc pas partie de la Saga Maya, apparaît tout de même, et que les 2 volets de la saga Maya ne sont pas dans l'ordre croissant comme souhaité (d'abord le 2, puis le 1 en dessous, tel que saisi dans le fichier bdd.js). De plus, j'ai lu quelque part qu'il est fort déconseillé d'intégrer les codes JS dans les pages HTML...

  11. #11
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par Toufik83 Voir le message
    ...
    Bonjour, Toufik83.

    Waouh ! Merci beaucoup pour tout, les corrections et la solution ! Je vais tester cela et je vous dirai ce qu'il en est.

    Bon après-midi.

  12. #12
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par Toufik83 Voir le message

    En gros l'idée c'est de stocker le retour de la variable Z dans un tableau que l'on peut nommé html par exemple, puis faire le tri avec la fonction sort() et localeCompare()
    Un message s'affiche pour me dire qu'il y a une erreur de syntaxe sur cette ligne
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    html=html.sort((a,b)=>a.localeCompare(b));
    à partir du caractère "a" qui est après le "=>"... En fait, je pense que cela vient du moteur JS intégré à mon exécutable, qui ne connaît pas la fonction localeCompare... J'ai fait le test d'ouvrir la page HTML dans le navigateur Mozilla Firefox : pas de message d'erreur, mais il est juste affiché la valeur récupérée dans l'URL...
    J'essaie de comprendre la fonction localeCompare et je me suis documenté : je vois bien, et je n'en doutais pas, Toufik83, que la syntaxe est bonne.

    A part ce souci, je me demande ce que la fonction compare en fait, comment elle opère ? Qu'elle est la valeur "a" et la valeur "b" ? Est-ce que la fonction fait "dans ce tableau nommé html, je compare la valeur a (qui serait donc un numéro de volet de la saga ?) à la valeur b (qui serait un autre numéro de volet de la saga ?) ? Le cas échéant, il y a un problème faisant que ça ne peut pas fonctionner : on a une seule valeur donnée dans l'URL : le numéro de la saga. A un endroit, dans la fonction, il faudrait lui dire : dans la liste de résultats affichés dans le tableau html, regarde la variable " VoletSaga " de chaque ligne et en fonction de cela classe les lignes dans l'ordre croissant de cette variable.

    Je l'avais dit que ça semblait compliqué... Je pense que je vais finir par jeter l'éponge, ne plus vous déranger, et appliquer la solution de 1 page HTML par saga... Après, il y a une autre solution aussi, très lourde à appliquer, celle de changer, dans le fichier de la BDD, l'ordre dans lequel sont stockés les films, afin que lorsque la page affiche la liste des volets de la saga ils soient dans l'ordre croissant, ce qui évite de mettre en place une fonction compliquée de tri...

  13. #13
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 436
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 436
    Points : 4 930
    Points
    4 930
    Par défaut
    Bonjour,

    Citation Envoyé par pat_fr38 Voir le message
    A part ce souci, je me demande ce que la fonction compare en fait, comment elle opère ? Qu'elle est la valeur "a" et la valeur "b" ?
    Un exemple simple répond à cette bonne question
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    let titres=["L'arme fatale 2 (vu le 01.01.2024)",
    "L'arme fatale 4 (vu le 01.02.2024)",
    "L'arme fatale (vu le 01.03.2024)",
    "L'arme fatale 3 (vu le 01.04.2024)"
    ];
    titres.sort((a,b)=>a.localeCompare(b));
    console.log(titres);
    Résultat
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    [
        "L'arme fatale (vu le 01.03.2024)",
        "L'arme fatale 2 (vu le 01.01.2024)",
        "L'arme fatale 3 (vu le 01.04.2024)",
        "L'arme fatale 4 (vu le 01.02.2024)"
    ]
    Le a et b représentent les valeurs du tableau, dans ce cas tout le texte de chaque index.

    Citation Envoyé par pat_fr38 Voir le message
    je compare la valeur a (qui serait donc un numéro de volet de la saga ?) à la valeur b (qui serait un autre numéro de volet de la saga ?) ?
    J'ai utilisé une structure simple d'un tableau pour mieux vous expliquer comment le tri fonctionne, on pourrait bien faire la même chose sur un tableau d'objet par exemple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    let titres = [{
      numero: 2,
      cle: "L'arme fatale 2 (vu le 01.01.2024)"
    }, {
      numero: 4,
      cle: "L'arme fatale 4 (vu le 01.02.2024)"
    }, {
      numero: "",
      cle: "L'arme fatale (vu le 01.03.2024)"
    }, {
      numero: 3,
      cle: "L'arme fatale 3 (vu le 01.04.2024)"
    }];
    titres.sort((a, b) => a.cle.localeCompare(b.cle));
    console.log(titres);
    Résultat :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    [
        {
            "numero": "",
            "cle": "L'arme fatale (vu le 01.03.2024)"
        },
        {
            "numero": 2,
            "cle": "L'arme fatale 2 (vu le 01.01.2024)"
        },
        {
            "numero": 3,
            "cle": "L'arme fatale 3 (vu le 01.04.2024)"
        },
        {
            "numero": 4,
            "cle": "L'arme fatale 4 (vu le 01.02.2024)"
        }
    ]
    Si vous voulez faire la comparaison avec le "numero" en ordre croissant, vous pouvez simplement modifier sort comme suite titres.sort((a, b) => a.numero<b.numero?-1:1);.

    Pouvez vous me montrer le contenu du tableau d'objets tjs_base?

  14. #14
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Citation Envoyé par Toufik83 Voir le message
    Pouvez vous me montrer le contenu du tableau d'objets tjs_base?
    OK, super, merci pour les explications et les exemples très explicites,


    Pour " tjs_base ", il me semble que ce n'est pas un tableau objet, ou vous m'apprenez ce qu'est vraiment ce qui, pour moi, est une ligne de données représentant un film vu, dans ma BDD (bdjs.js), que le moteur de recherche regarde au niveau de la partie "cle" (contenant plein de mots-clés issus du film vu concerné) pour afficher des résultats quand ça matche avec le mot-clé saisi (ou la valeur récupérée dans l'URL pour le cas de son "petit-frère", le chercheur-afficheur que j'ai adapté du JS du moteur de recherche).

    Voici les éléments dans l'ordre où ils sont dans mon fichier bdjs.js :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    // Initialisation de la base de données et création des éléments de la base de données.
     
    var tjs_base=new TJS_InitBase("_self");
     
     
    // Saga de dessins animés et films d'animation (Saga_AN).
     
    var titresaga528="Maya l'abeille"; 						var nbvolsaga528="03";
     
     
    // Ici, l'exemple d'un film vu.
     
    var FilmVuLe004_2024="04.02.2024";
    var LieuDeVisionnage004_2024="à la télévision";
    var FilmVuAvec004_2024="ma Chérie";
    var TitreFr004_2024="Maya l'abeille 2 : Les Jeux du miel";
    var TitreOr004_2024="Die Biene Maja 2 - Die Honigspiele";
    var Realisateur004_2024="Noel Cleary et Sergio Delfino";
    var Compositeur004_2024="Ute Engelhardt";
    var ProduitEn004_2024="2017";
    var SortieEnFranceLe004_2024="18.07.2018";
    var Duree004_2024="01h26";
    var Vu004_2024="en 2D";
    var Histoire004_2024="adaptée des romans Die Biene Maja und ihre Abenteuer (Maya l'abeille et ses aventures) (1912), et Himmelsvolk (Peuple du ciel) (1915), de Waldemar Bonsels";
    var FilmPossede004_2024="DVD";
    var BOPossedee004_2024="Non";
    var Notation004_2024="<img src='images/EtoileNotation2.png' class='EtoilesNotation' title='Pas mal'>";
    var ActeurPrincipal004_2024="";
    var ActricePrincipale004_2024="";
    var Synopsis004_2024="Maya participe enfin aux Grands Jeux du Miel. L'enjeu est de taille : Maya doit absolument gagner, sinon elle devra livrer tout le miel de sa ruche à l'Impératrice, qui n'est autre que la sœur de la Reine de sa ruche. Maya, Willy et les membres de leur équipe vont devoir se surpasser pour battre l'équipe de Violette, une adversaire aussi rusée et maligne que mauvaise joueuse…";
    var Casting004_2024="<span class=\"texte3\">Film d'animation</span>";
    var CastingOuEt004_2024="Film d'animation";
    var VoletSaga004_2024="02";
    var Saga004_2024="Volets : "+nbvolsaga528+"&nbsp;&nbsp;-&nbsp;&nbsp;<a href='fichefilm.html?numerodefilm=038_2017'><img src='images/fleche3.gif' class='BoutonsSaga' /></a> N°"+VoletSaga004_2024+" <a href='fichefilm.html?numerodefilm=0001_2024'><img src='images/fleche1.gif' class='BoutonsSaga' /></a>";
    var TitreSaga004_2024=titresaga528;
    var AnneeEtTypeDeFilm004_2024="2024CF"; // C'est cette variable, qui me permet d'afficher avec le chercheur-afficheur la liste de tous les cinéfilms vus en 2024.
    var TypeFilm004_2024="Cinéfilm";
     
    // Et voici la fameuse ligne "tjs_base", qui récupère toutes les valeurs nécessaires dans les variables déclarées précédemment pour alimenter la 1ère partie (affiche du film, numéro de visionnage durant l'année, date de visionnage, titres, année, Réalisateur, Casting principal et lieu de visionnage) et la 2ème partie, qui représente tous les mot-clés.
     
    tjs_base.Add("fichefilm.html?numerodefilm=004_2024","<img src='images/affiches/004_2024.jpg' class='affiche' />","<span class='desc'><b>004 - "+FilmVuLe004_2024+" :</b> "+TitreFr004_2024+" ("+TitreOr004_2024+") - "+ProduitEn004_2024+" - "+TypeFilm004_2024+"</span>","<span class='infos'><b>Réalisateur(s) :</b> "+Realisateur004_2024+"<br /><b>Casting :</b> "+ActeurPrincipal004_2024+" "+CastingOuEt004_2024+" "+ActricePrincipale004_2024+"<br />Vu "+LieuDeVisionnage004_2024+"</span>"," "+TitreSaga004_2024+" "+VoletSaga004_2024+" "+AnneeEtTypeDeFilm004_2024+" "+FilmVuLe004_2024+" "+TitreFr004_2024+" "+TitreOr004_2024+" "+ProduitEn004_2024+" "+SortieEnFranceLe004_2024+" "+Realisateur004_2024+" "+Compositeur004_2024+" "+LieuDeVisionnage004_2024+" "+Casting004_2024+" ");
     
     
    // Script d'initialisation et de création des éléments de la base de données (ce sont les JS qui définissent les composants des lignes "tjs_base").
     
    function TJS_InitBase(target)
    {
    this.nb_item=0; this.target=target; this.Add=AddItem; this.Search=SearchItem;
    }
     
     
    // Script définissant les différents éléments contenus dans les résultats éventuels (affichés dans le div Descriptions).
     
    function AddItem(page,image,desc,infos,cle)
    {
    var nb = this.nb_item; var item = new Object; item.page=page; item.image=image; item.desc=desc; item.infos=infos; item.cle=cle; this[nb]=item; this.nb_item++;
    }
    Voilà, si cela peut vous aider.

  15. #15
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 436
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 436
    Points : 4 930
    Points
    4 930
    Par défaut
    Bonjour,

    Si si, c'est un tableau d'objets, puisque vous le remplissez avec des objets "item" var item = new Object; item.page=page; item.image=image; item.desc=desc; item.infos=infos; item.cle=cle; dans la fonction addItem this[nb]=item;.

    Vous pouvez donc visualiser tout l'objet dans la console du navigateur avec un console.log(tjs_base) après la dérnière appelle à la fonction Add, exemple :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    tjs_base.Add("......");
    tjs_base.Add("......");
    tjs_base.Add("......");
    console.log("tjs base est :",tjs_base);//regardez ce que cette ligne donne dans la console, et copiez l'objet tel qu'il l'est

  16. #16
    Membre à l'essai
    Homme Profil pro
    Webdesigner
    Inscrit en
    Octobre 2014
    Messages
    21
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Transports

    Informations forums :
    Inscription : Octobre 2014
    Messages : 21
    Points : 10
    Points
    10
    Par défaut
    Bien, vous m'avez appris beaucoup. Un grand MERCI encore. Je vais essayer de me débrouiller avec tout cela.

    Bonne soirée.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Trier une liste chainée.
    Par gregb34 dans le forum Algorithmes et structures de données
    Réponses: 5
    Dernier message: 21/05/2006, 22h05
  2. Trier une liste de dossiers et de fichiers
    Par steveleg dans le forum Langage
    Réponses: 2
    Dernier message: 07/04/2006, 16h54
  3. trier une list
    Par elekis dans le forum C++
    Réponses: 4
    Dernier message: 23/03/2006, 12h01
  4. [c#] Trier une liste de nombres liés.
    Par Joad dans le forum ASP.NET
    Réponses: 13
    Dernier message: 11/05/2005, 11h17
  5. [Debutant(e)]Trier une liste
    Par LeDébutantJava dans le forum Collection et Stream
    Réponses: 8
    Dernier message: 19/08/2004, 12h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo