Séparation forme et comportement

Bonjour à tous,

Dans le but de séparer proprement la forme et le comportement dans mes pages web, je suis confronté à la question suivante :

J'ai une page web xHtml strict valide. Je veux améliorer l'interface utilisateur en utilisant du javascript. Ce javascript est séparé de mon document dans un fichier .js. J'utilise des classes génériques permettant de gérer mes comportements. je refuse tout javascript dans mon document xHtml (sauf le <script> en en-tête).

Cependant j'ai souvent besoin de récupérer des paramètres dans mon javascript pour fonctionner correctement, tels que des identifiants mais aussi des valeurs spécifiques.

Ces données doivent être présentes dans mon document xHTML, mais je ne veux pas qu'elles se voient pour l'utilisateur et ce, dans tous les cas (activation ou non du javascript, support ou non du css )...

D'où ma question : quelle balise / attribut ou autre utiliser pour inscrire ces variables dans mon document xHTML pour rester le plus propre possible ?

J'espère avoir été suffisamment clair dans mes explications...

merci par avance de votre aide.
Modifié par ikeach (15 Jan 2009 - 11:05)

Bonjour,

ikeach a écrit :
Cependant j'ai souvent besoin de récupérer des paramètres dans mon javascript pour fonctionner correctement, tels que des identifiants mais aussi des valeurs spécifiques.

Pas assez de détail (contexte) pour répondre clairement (sources de ces paramètres : DOM, DB, autres fichiers ?) ...

ikeach a écrit :
Ces données doivent être présentes dans mon document xHTML, mais je ne veux pas qu'elles se voient pour l'utilisateur ...

Par voir, tu entends :
- au sein du DOM,
- au sein de l'URL ... ?
Pas assez de détail non plus (tout en sachant que n'importe qui pourra toujours un minimum déterminer les différentes informations manipulées sur ta page).

ikeach a écrit :
D'où ma question : quelle balise / attribut ou autre utiliser pour inscrire ces variables dans mon document xHTML pour rester le plus propre possible ?

Tout dépendra du contexte (en gros 3 possibilités) : input[type="hidden"], class et / ou id.

En attente d'un peu plus de précisions.

merci pour ta réponse Yodaswii, je vais essayer d'être un peu plus précis.

a écrit :
n'importe qui pourra toujours un minimum déterminer les différentes informations manipulées sur ta page

Je me suis mal exprimé. Je sais qu'il est toujours possible de connaître les données pour le client. Ce que je voulais dire, c'est que je ne veux pas que des informations supplémentaires utilisées par le javascript influent sur le xHTML et son rendu que ce soit pour un utilisateur ou pour un robot d'indexation par exemple.

a écrit :
Pas assez de détail (contexte) pour répondre clairement (sources de ces paramètres : DOM, DB, autres fichiers ?) ...

Alors imaginons un contexte particulier :

J'ai une liste de nom, comme celle-ci :

<ul>
 <li>Riri</li>
 <li>Fifi</li>
 <li>Loulou</li>
<ul>

Imaginons que je veuille, au survol d'un élément de ma liste, appeler en Ajax un script php en lui passant en paramètre l'identifiant correspondant au nom survolé :

Riri => 1
Fifi => 2
Loulou => 3

Question : Comment "noter" proprement cet identifiant dans mon HTML pour que le javascript y accède via le DOM et l'envoie au php ?

a écrit :
Tout dépendra du contexte (en gros 3 possibilités) : input[type="hidden"], class et / ou id

Une balise input est réservée aux formulaires.

L'attribut id n'est pas utilisable car mes identifiants ne seront pas forcément uniques dans ma page web (plusieurs affichages de la même liste par exemple). De plus si j'ai plusieurs variables à récupérer ça me semble difficile avec l'id.

Enfin concernant l'attribut class, comment pourrais-je savoir, parmis toutes les classes possibles d'une balise, quel est l'attribut à envoyer ?

Bref, je cherche une manière générale, simple et puissante de lire des paramètres en DOM depuis un fichier HTML.

Mais bon, je cherche peut-être l'arlésienne...

ikeach a écrit :

L'attribut id n'est pas utilisable car mes identifiants ne seront pas forcément uniques dans ma page web (plusieurs affichages de la même liste par exemple). De plus si j'ai plusieurs variables à récupérer ça me semble difficile avec l'id.

C'est bien dommage parce que ce serait le plus simple!

Par exemple pour ta liste avec les noms tu leurs mets des id user_1,user_2 etc ensuite avec ça tu peux facilement récupérer le contenu correspondant à chaque personne. Si tu as plusieurs liste tu change tout simplement l'id : visitor_2 dans la liste #visitors et user_2 dans la liste #users.

Si tu utilise ajax c'est justement pour ne pas devoir mettre toute l'information dans ta page, donc si tu utilise une base de données a toi avec l'identifiant de récupérer toute les informations nécessaires plutôt que de tout cacher. C'est justement ça un des avantage d'ajax, tu n'as pas besoin de "précharger" ton contenu dans des balises en display:none

Si tu associe une action a plusieurs éléments alors le plus simple c'est d'utiliser les classes, par exemple si tu veux qu'un événement soit associer uniquement à certain élément de la liste tu leur met la classe "user_ajax" ensuite avec un sélecteur javascript tu peux leur associer l'action correspondante.

Et bien sûr tu peux utiliser les deux, les classes pour associer l'événement et les id pour identifier les éléments. Les id seront alors le seul élément a ajouter au html pour le fonctionnement du js, les classes peuvent être les même que pour la feuille de style, tu peux éventuellement utiliser des classes spécifique au js, c'est un des avantages des classes, tu peux en mettre tant que tu veux à un même élément, exemple : <li id="user_23" class="user user_ajax">
Modifié par matmat (17 Jan 2009 - 02:55)

Le mieux pour cela est en fait d'utiliser l'attribut data, introduit par HTML5 et d'ores et déjà compatible avec l'ensemble des navigateurs: http://ejohn.org/blog/html-5-data-attributes/

Merci à tous pour vos réponses.

Matmat, j'écarte volontairement la solution des id et des class pour transmettre des paramètres. Pour moi c'est détourner l'utilisation d'un attribut vers quelque chose vers lequel il n'est pas destiné.

lrbabe, je ne connaissais ce nouvel attribut d'HTML5. En fait je ne me suis pas du tout interressé à html5. Mais le fait d'utiliser un xHTML et un namespace spécifique me parait très très interressant, ouvrant des portes que je n'avais pas imaginé...

Je pense que je vais partir sur cette idée...

Tu peux utiliser l'attribut "title" :

<ul>
 <li title="1">Riri</li>
 <li title="2">Fifi</li>
 <li title="3">Loulou</li>
<ul>

Rien ne t'empêche d'avoir plusieurs Riri dans ta page avec des title répétés. En revanche, pour pouvoir les manipuler, il te faut au minimum connaître le parent, ce qui peut revenir à attribuer un id à ul :

<ul id="liste1">
 <li title="1">Riri</li>
 <li title="2">Fifi</li>
 <li title="3">Loulou</li>
<ul>

Si tu préfères utiliser ID en t'assurant que les identifiants sont uniques :

<ul>
 <li id="liste1_1">Riri</li>
 <li id="liste1_2">Fifi</li>
 <li id="liste1_3">Loulou</li>
<ul>

Pour finir, j'ajouterais que finalement, je sais pas réellement ce que tu veux faire, donc c'est pas évident de donner une réponse très adaptée

Non, pas title : l'information peut être vue en passant la souris sur l'élément...
Bien que data soit du HTML5, j'opterais pour cette solution. Elle répond aux besoins qui ont motivé une question qui s'était posée il y a quelque temps, celle de savoir si ajouter volontairement un attribut invalide au sens du W3C poserait un problème mis à part l'invalidité de la page proprement dite bien sûr. Si je retrouve le topic...
EDIT : le voilà. Data est évoqué brièvement en toute fin de topic.
Modifié par QuentinC (20 Jan 2009 - 18:36)

ikeach a écrit :
Matmat, j'écarte volontairement la solution des id et des class pour transmettre des paramètres. Pour moi c'est détourner l'utilisation d'un attribut vers quelque chose vers lequel il n'est pas destiné.

Si tu utilise un id uniquement pour identifier un élément comme l'exemple de kama

<li id="liste1_1">Riri</li>

pour moi ce n'est pas un détournement et cela vaut bien

<li data-id_user="1">

Qui va sans doute te poser quelque problème de doctype entre autre.
Par contre si tu as d'autre données que l'id a "cacher" dans le html alors oui ça semble être une bonne solution.
Pour ma part je maintient qu'il est préférable de se contenter de passer uniquement l'identifiant et de charger les autres donnés via ajax. Cela sera plus rapide et plus souple.
Modifié par matmat (21 Jan 2009 - 18:56)

Jusqu'à maintenant, j'utilisais un hidden au sein de la balise (sémantiquement discutable mais syntaxiquement juste).

Va falloir que je regarde ce truc du HTML5.