11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

texte ajouté le 19-01-2015 :
Le but de l'étude de leurs pages html c'est que je voudrais enregistrer dans ma base mysql avec du php, les films que je vais voir (titre - date - heure) sans rien avoir à saisir, juste quelques clics à faire. Un peu comme sur leur site pour faire une réservation.

Par curiosité, j'ai regardé le code source de la page de mon cinéma, pour en comprendre le fonctionnement et m'instruire un peu. Voici le lien :
http://www.cinemasgaumontpathe.com/cinemas/cinema-gaumont-champs-elysees/
et j'ai besoin de vos lumières.
Du côté du javascript, il y a des appels à de nombreux fichiers comme :
<script src="v3/js/lib/jquery-ui-1.10.2.custom.js" type="text/javascript"></script>
puis il y a des scripts dans la page html.
Je ne les passerai pas tous en revue, mais voici ceux qui m'intriguent:
1)
var allCinemasAssoc = {"57":{"libelle":"Gaumont Amiens - ","url":"http:\/\/www.cinemasgaumontpathe.com\/cinemas\/cinema-gaumont-amiens\/"},"9":{"libelle":"Gaumont Amn&eacute;ville - ","url":"http:\/\/www.cinemasgaumontpathe.com\/cinemas\/cinema-gaumont-amneville\/"},"4":{"libelle":"Gaumont Angers Multiplexe - ","url":"http:\/\/www.cinemasgaumontpathe.com\/cinemas\/cinema-gaumont-angers-multiplexe\/"},"90":{"libelle":"D&eacute;cavision Annecy - ","url":"http:\/\/www.cinemasgaumontpathe.com\/cinemas\/cinema-decavision-annecy\/"}, etc.
2)
var liaisonFilmVille = {"1":{"11990":"11990","10092":"10092","11588":"11588","11342":"11342","9552":"9552","11718":"11718","9836":"9836","10468":"10468","11842":"11842","11200":"11200","7748":"7748","11420":"11420","12210":"12210","8876":"8876","6530":"6530","12196":"12196","11524":"11524","12224":"12224","11214":"11214","4244":"4244","731":"731","11512":"11512","9506":"9506","10002":"10002","9728":"9728","9848":"9848"},"2":{"11990":"11990","11588":"11588","10172":"10172","11168":"11168","9552":"9552","9836":"9836","11200":"11200","10468":"10468","10798":"10798","8876":"8876","10742":"10742","7748":"7748","11530":"11530","11938":"11938","11420":"11420","12196":"12196","11524":"11524","11214":"11214","9848":"9848"}; etc
En 1) c'est la liste des cinéma et en 2) la liaison entre un film et le cinéma où il est projeté.
Autant la structure du tableau en 1) est facile à comprendre, autant celui en 2) me surprends, la clé du film est identique à sa valeur ?????. Mais là n'est pas ma question.
Plus loin dans le source il y a :
<div class="filmv2 " id="filmVueAffiche_15_11990">
div class="affiche">
<img src="img/rsz/4c/4c57eef4ff8400e7fe4c616df15715e8.jpg" width="225" height="300" alt="Consulter la fiche du film 'A Most Violent Year'" />
</div>

Dans id="filmVueAffiche_15_11990" il est facile de comprendre que 15 et l'identifiant du cinéma et que 11990 est l'identifiant du film.

Ce que je ne comprends pas bien, c'est comment ils font pour associer un numéro à un titre de film ?
Je n'ai pas trouvé le lien entre '11990' et 'A Most Violent Year'.
Je vous remercie pour vos explications.
Modifié par rose brooks (19 Jan 2015 - 12:26)
Merci de ta réponse.
J'avais bien compris que 1) et 2) étaient des tableaux et que les infos proviennent de leur base de données, là n'était pas ma question.
Je ne doute bien que les titres de film proviennent aussi de leur base de données.
Dans leur code javascript, il y a bien la liste des cinémas et une table de liaison entre la liste des cinémas et les films qui y sont projetés. Il manque juste la liste des films...
Ma question est donc "comment font-ils pour afficher les titres de film ?"

D'un point de vue structure de programmation,je comprends bien qu'il y ait la liste des cinémas pour que le client puisse choisir son cinéma, mais ensuite...
Pourquoi créé en javascript une table faisant le lien entre identifiant cinéma et identifiant film puisqu'il n'y a pas le détail des films en javascript ?
S'il faut aller sur la base de données chercher les informations du film, à quoi sert la table faisant le lien entre identifiant cinéma et identifiant film, l'identifiant du cinéma devrait suffire, non ? Avec l'identifiant du cinéma reçu par la demande du client, on regarde la table de liaison puis on donne les titres de films.
Il y a t il un gain de performance possible ? Dans ma logique non, car il faut plus de ressource pour générer toutes les liaisons pour tous les cinémas que pour un seul.
Un peu plus loin dans le code, il apparait qu'il y ait aussi une table de liaison entre identifiant cinéma, identifiant film et date-heure de projection :
<a class="bulle-horaire" href="https://www.cinemasgaumontpathe.com/reservation/?i=22027820" rel="nofollow" >10:40</a>
22027820 semble être un identifiant unique pour l'heure de projection d'un film dans un cinéma.

Il y a quelque chose qui m'échappe et c'est la raison de ce post. Quel est votre façon de programmer, comprenne-vous leur approche, ... Merci
Modifié par rose brooks (13 Jan 2015 - 08:32)
Dis toi juste que tu n'as accès qu'a la partie émergée de l'iceberg, la majeure partie du code source de l'application est bien cachée sur le serveur qui héberge le site.
Alors essayer de comprendre le fonctionnement d'un site en lisant des bouts de code JS ne sert strictement à rien, tu perds ton temps et tu risque de t'embrouiller.

Si tu veux apprendre/comprendre, lis des bouquins et/ou fais des tutos, tu comprendras rapidement que ta problématique ne rime à rien Smiley cligne .

Pour ce qui est du mystère de clé = valeur dans le tableau associatif du 2), c'est juste un problème de mauvais choix de structure des données. Ça arrive souvent dans ce genre de site, on fait bosser les gens pour qu'ils aillent vite et on ne vérifie pas systématiquement qu'ils produisent du bon code.
Merci de tes encouragements.

Ce n'est pas en ayant lu comment monter une canne à pêche que je saurais pêcher à la mouche.
En programmation, les livres sont bien pour apprendre les bases, mais les exemples sont souvent simplistes (pour être bien assimilables). En regardant les scripts d'autres programmeurs, il est plus facile d'ouvrir son esprit à d'autres possibilités, de comprendre leurs pratiques afin de mieux assimiler et être plus "propre" dans son code.
J'ai lu plusieurs explications sur la POO et je n'ai pas compris grand chose et je n'ai pas réussi à le mettre en pratique. Avec des scripts dans leur contexte et fonctionnant, j'ai pu comprendre à quoi ça sert et comment ça fonctionne. Mais pour l'instant je ne m'y suis pas vraiment mise, j'utilise ceux existant (par exemple mysql en php).
A propos de base de données et du cinéma, j'ai appris que s'il y avait une relation (n,n) entre 2 tables, il fallait en créer une de liaison afin d'avoir deux relations (1,n) et (n,1), comme la liste des cinémas qui proposent (n) films et la liste des films qui sont projetés dans (n) cinéma, il y a une table liant les cinémas aux films 2)

Mon savoir est bien modeste pour créer un tuto.
Je comprends tes interrogations, mais le problème c'est que tu mélange le code côté client et côté serveur. Tout ce que tu peux voir du site de ton cinéma, c'est du bête code javascript pour faire quelques opérations dynamiques sur la page. Tu ne peux pas du tout voir comment les données sont récupérées en base, comment elles sont traités. Tu voies juste un tableau de mapping entre les cinémas et les films... c'est une opération de base pour faire un lien entre 2 entités différentes.

Je pense qu'on ne peut pas t'aider sans connaitre les réponses à ces questions :
Que souhaite tu savoir faire et pourquoi ? dans quel langage ?
Je sais très bien que le javascript est interprété par le navigateur et que les données sont sur le serveur qui génère et donne au navigateur la page à afficher.

Le but de l'étude de leurs pages html c'est que je voudrais enregistrer dans ma base mysql avec du php, les films que je vais voir (titre - date - heure) sans rien avoir à saisir, juste quelques clics à faire. Un peu comme sur leur site pour faire une réservation.

Actuellement j'ai un formulaire avec 3 champs de saisie (titre - date - heure) que je rempli au clavier.
Tout fonctionne très bien, mais ce n'est guère ergonomique.
J'ai essayé de remplacer les champs date et heure par différents scripts javascript de "calendrier/horraire", ils fonctionnent bien mais la saisie clavier est plus rapide.

J'aimerai donc pouvoir faire une page similaire à la leur, pour qu'en 3 à 4 clic ce soit fait.

Ma page "saisir_film.php" envoie vers "enregistrer_film.php"

Après avoir vu le film j'y ajoute un commentaire, la page "commenter_film.php" affiche le dernier film vu avec un champs texte à remplir et envoie vers "enregistrer_film.php"

J'ai aussi un listing des films vus avec mon avis. "lister_film.php"