Question de Méthode

Tout d'abord, bonjour à tous et à toutes.
Je suis nouveau sur le forum, auquel je me suis inscrit car j'ai déjà trouvé plein de chose utile sur le site. Alors, voila, je me lance.

J'utilise javacript sans framework. Je me suis construit plusieurs "objets" plus ou moins utile. Mais j'ai un probleme avec la methode d'approche d'une construction d'un utilitaire au sein d'une page.

Exemple :

- J'ai construit un utilitaire qui gere des onglets. En cliquant sur des boutons, on declenche l'affichage ou le masquage d'element DIV contenant... le contenu de l'onglet

Afin de permettre une gestion dynamique du nombre d'onglet, je lance un processus d'initialisation en fin de page HTML qui obtient l'ensemble des DIV portant un certain attribut "name" qui lie un ensemble de bouton et un ensemble de DIV entre eux.

Soit :

// On instance l'objet Onglet
var Onglets = new Onglets();

<div id="menu"> 
	<input type="button" id="b00" name="test" value="Bouton 0" onclick="Onglets.selection(this);" />
	<input type="button" id="b01" name="test" value="Bouton 1" onclick="Onglets.selection(this);" />
</div>
<div name="test" id="test00">
	00000000000000000000000000000000000000000
</div>
<div name="test" id="test01">
	111111111111111111111111111111111111111111
</div>

//Puis on recherche l'ensemble des elements HTML ayant cette attribut "name"
Onglets.init("test");

Je ne vous fait pas de dessin pour la suite, mais si c'est pas clair dites moi.

Vous me direz peut etre : Ouais, ben ca fonctionne non ??

Je vous repondrais : Oui, cela fonctionne tres bien. Sauf que cela fait que ma page HTML n'est pas valide... En effet, une DIV n'a pas d'attribut "name".

Aussi, je pense que ma demarche dans la construction de cet utilitaire est mauvaise, puisqu'elle aboutit à un code HTML invalide....

Pouvez vous m'eclairez la dessus ????

Bonsoir,

Normal que ton code ne soit pas valide!
Même si un DIV, je dis "même si", acceptait l'attribut "name", tu ne pourrais pas donner le même "name" à plusieurs DIVs !
Il faut t'y prendre autrement!

Cordialement

>lddsoft : L''attribut "name" peut s'appliquer à plusieurs elements. D'ailleurs la méthode document.getElementsByName existe, et il y a bien un "s" à Elements dans l'ecriture de la methode. Donc ce n'est pas vraiment cela le probleme.

Autant pour moi !
Il n'empêche que l'attribut "name" ne s'applique pas à un élément "div".
Pourquoi ne te bases-tu pas sur l'attribut id incrémenté (comme tu le fais), en prenant pour base les lettres de l'id (et en utilisant un "for" pour la numérotation)?

Si tu pouvais montrer ton code javascript, ça aiderait aussi
Modifié par lddsoft (12 Mar 2011 - 20:32)

salut

a écrit :
Aussi, je pense que ma demarche dans la construction de cet utilitaire est mauvaise, puisqu'elle aboutit à un code HTML invalide...

C'est ce que m'inspire ce post. Reinventer la roue, pourquoi pas mais il faut d'abord se doter de bases solides. Puisque tu ne veux pas utiliser de framework et ... coder à l'ancienne , étudie bien ce script bien conçu mais d'approche disons, pas très "moderne". Je suis assez d'accord avec iddsoft, document.getElementById serait plus indiqué pour finalement le même résultat et, au moins, c'est valide.

Et pour finir, un framework, içi javascript, c'est parfois utile, à condition évidement de ne pas en abusé. Avec jquery ou prototype/scriptaculous je fait la même chose avec cinq lignes de codes en mieux, en terme de puissance, plus fiable. l'exemple de jquery UI est assez parlant. Je fais un menu onglets avec une ligne de code js et une vingtaine de lignes css. Bien sur c'est une autre approche mais c'est diablement éfficace et permet de gagner un temps fou, en résolution de problèmes potentiels, bugs. D'autres y on déjà réfléchi avant nous. Perso, je me suis remis au js après l'avoir longtemps méprisé pour son très mauvais support par les navigateurs, non, je ne pense pas seulement à ie, firefox, netscape ou encore opéra n'ont pas toujours étaient ce qu'ils sont aujourd'hui, grâce à ma découverte de jquery. Avec jquery, je me concentre sur la structure, pas sur le support de tel navigateur, de tel fonction, de la version. En utilisant un framework, je suis libre de m'occuper de l'essentiel, le contenu et sa présentation mais aussi puissant car j'utilise un moteur éprouvé. Maintenant il est vrai que la puissance d'un framework js ou autre peut fortement être contrebalancé par une lourdeur extrème, flex ou zend framework, par exemple. C'est une question de choix, encore et toujours.

Bonjour,

Juste au sujet des attributs HTML:
- On veillera à ne pas détourner des attributs HTML qui servent à autre chose, par exemple l'attribut title ou class, dans le but de passer des informations à un script.
- On veillera à ne pas utiliser d'attributs HTML existants là où ils ne sont pas valides (comme c'est le cas de name ici.
- En HTML4 (ou XHTML1), ça veut dire qu'on doit se limiter le plus souvent à utiliser la valeur de l'attribut id d'un élément. En respectant des conventions de nommage précise, on peut associer un élément à un autre, par exemple <button id="tabs-btn-01"> et <div id="tabs-tab-01">... on peut récupérer le "01" dans l'id du bouton cliqué pour savoir ensuite quel élément afficher.
- En HTML5, il y a un mécanisme pour ajouter des attributs personnalisés, destinés en général aux scripts, sur les éléments. On peut créer n'importe quel attribut du moment qu'il commence par "data-". Donc ça peut donner <button data-target="5">, par exemple.

Reflexion bête : Et si tu utilises l'attribut class en lieu et place de name ?

Seul bémol, construire une fonction qui puisse te faire un getElementByClass correct. Etant donnée des divergences entre les navigateurs sur "getElementByClassName' il faudrait en développer une proprement et ensuite suivre ton processus initial.

Bonne nuit

@juju57 > Je ne pense pas que se baser sur l'attribut "class" soit la méthode la plus judicieuse, car il faut en effet pouvoir différencier les boutons.

Maintenant, pour contourner la non-implémentation de "getElementByClassName" sur IE, on peut adapter le script ci-dessous:

var n, i, X_obj, mon_obj;
var tabObj;
var nom_class = "maClasse";
 
tabObj = document.getElementsByTagName("*");
n = tabObj.length;
 
for (i=0; i<n; i++)
{  
  X_obj = tabObj.item(i); 
  if (X_obj.className == nom_class)
  {
    mon_obj = X_obj; 
  }
}

que j'ai trouvé ici : http://www.developpez.net/forums/d644763/webmasters-developpement-web/javascript/document-getelementsbyclassname-ie7/

lddsoft a écrit :
@juju57 &gt; Je ne pense pas que se baser sur l'attribut &quot;class&quot; soit la méthode la plus judicieuse, car il faut en effet pouvoir différencier les boutons.

Certes, mais ils possèdent tous un id unique, non ? Comme sur ton exemple.

C'est la raison pour laquelle je privilégie l'utilisation de document.getElementById . C'est pas très compliqué à mettre en place!

Salut,

J'étais pérsuadé que la balise <input /> devait se trouver impérativement dans un formulaire <form> pour être conforme au W3C.

Hors, le code ci-dessous (basé sur le texte de fvsch).

fvsch a écrit :
En respectant des conventions de nommage précise, on peut associer un élément à un autre, par exemple <button id="tabs-btn-01"> et <div id="tabs-tab-01">... on peut récupérer le "01" dans l'id du bouton cliqué pour savoir ensuite quel élément afficher.

est parfaitement valide.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Test</title>
		<meta name="description" content="Afficher/Cacher bloc de contenu" />

		<style type="text/css" media="screen">/*<![CDATA[*/
			body {
				color:#000;background-color:#eee;
			}
			#navigation {
			}
			#navigation input {
				display:inline;
				margin:0px;padding:8px;
				background-color:#ddd;color:#000;
				border:1px #ccc solid;
				cursor:pointer;
			}

			#content {
				margin:8px 0px 0px 0px;
				padding:0px 24px 8px 24px;
				display:block;
				width:256px;
				background-color:#f8f8f8;
				border:1px #ccc dashed
			}
			#tabs-tab-01 {display:none}
			#tabs-tab-02 {display:none}
			#tabs-tab-03 {display:none}
			/*]]>*/
		</style>

		<script type="text/javascript">//<![CDATA[
			function selectTab(btn){
				if(!btn||!btn.id)return false;
				var elt=false;
				var tab=btn.id.split('-');
				if(tab.length==3&& tab[0]=='tabs'&& tab[1]=='btn'&& tab[2]!=''){
					id='tabs-tab-'+tab[2];
					elt=document.getElementById(id);
				}
				if(!elt)return false;
				var i;
				tab=document.getElementById('content').getElementsByTagName('div');
				for(i=0;i<tab.length;i++)tab[i].style.display=(tab[i].id==id)?'block':'none';
				return false;
			}

			function initTabs(){
				var btn,i;
				btn=document.getElementById('navigation').getElementsByTagName('input');
				for(i=0;i<btn.length;i++)btn[i].onclick=function(){selectTab(this);return false;};
				return false;
			}

			window.onload=function(){
				initTabs();
				selectTab(document.getElementById('tabs-btn-01'));
			}
			//]]>
		</script>
	</head>

	<body>
		<h1>Test</h1>
		<p>Afficher/Cacher bloc de contenu.</p>

		<div id="navigation">
			<input type="button" id="tabs-btn-01" value="Un" />
			<input type="button" id="tabs-btn-02" value="Deux" />
			<input type="button" id="tabs-btn-03" value="Trois" />
		</div>

		<div id="content">
			<div id="tabs-tab-01">
				<h2>Un</h2>
				<p>Ceci est le premier bloc.</p>
			</div>

			<div id="tabs-tab-02">
				<h2>Deux</h2>
				<p>Ceci est le deuxième bloc.</p>
			</div>

			<div id="tabs-tab-03">
				<h2>Trois</h2>
				<p>Ceci est le troisième bloc.</p>
			</div>
		</div>
	</body>

</html>

[/i][/i][/i]

@Eric2A > Désolé, Eric, j'ai essayé ton script, mais il y a un bug ici :

for(i=0;i<tab.length;i++)tab.style.display=(tab[i].id==id)?'block':'none';

Le "tab.style" provoque une erreur.[/i]
Modifié par lddsoft (13 Mar 2011 - 15:28)

@tepaze > Pourquoi vouloir réinventer la roue? Ne trouverais-tu pas ce que tu recherche ici : http://onlinetools.org/tools/domtabdata/

Merci lddsoft !

Maintenant, je comprends pourquoi mon post se termine avec deux [ / i ]...

L'éditeur de texte (*) du forum a supprimé les crochets du code.

Il fallait donc lire...

for(i=0;i<tab.length;i++)tab[ i ] .style.display=(tab[ i ].id==id)?'block':'none';


(*) Faut vraiment améliorer cet editeur de texte les gars !

J'allais justement te signaler qu'il manquait [ i ] après "tab" (les espaces sont nécessaires pour éviter le problème que tu as eu )
Modifié par lddsoft (13 Mar 2011 - 15:46)

Ok, merci à tous pour ces reflexions.

Je me contenterais donc de l'id et utiliserais des conventions de nommage strict. HTML5, je n'ai pas mis le nez dedans actuellement, donc je vais faire sans dans un 1er temps.

Quand au fait de re-inventer la roue, c'est relatif. Développer des composants, c'est aussi apprendre a coder des elements complexes. jQuery est une extrapolation de js, maitriser la structure de js fait donc sens.

Merci a tous en tout cas.

a écrit :
Quand au fait de re-inventer la roue, c'est relatif. Développer des composants, c'est aussi apprendre a coder des elements complexes.quote]

+1

Ce qui n'empêche pas de réutiliser le code intélligent existant.

jQuery est une extrapolation de js, maitriser la structure de js fait donc sens.[/

çà và sans dire mais c'est vrai, c'est mieux en le soulignant.

a écrit :
Je me contenterais donc de l'id

Sage décision

> Keran

Je n'ai rien contre le fait de reprendre du code existant, et je le fait

Florent V. a écrit :
- On veillera à ne pas détourner des attributs HTML qui servent à autre chose, par exemple l'attribut title ou class, dans le but de passer des informations à un script.

Tout d'accord sauf pour class . En l'absence d'un mécanisme comme celui offert par HTML 5, l'attribut class est tout à fait pertinent pour mettre en place des scripts clients (simili typage et possibilité d'affecter plusieurs valeurs de classes). Je ne vois pas ça comme un détournement (pourquoi plus un passage par l'identifiant que par la classe !?).

Bon après, on est d'accord pour dire que ça nécessite de se taper des choses un peu spéciales (split de la valeur de l'attribut et détection de certaines valeurs pour affecter des gestionnaires d'événement).

En attendant les attributs data- et API JS correspondante.

yodaswii a écrit :
Tout d'accord sauf pour class . En l'absence d'un mécanisme comme celui offert par HTML 5, l'attribut class est tout à fait pertinent pour mettre en place des scripts clients (simili typage et possibilité d'affecter plusieurs valeurs de classes). Je ne vois pas ça comme un détournement (pourquoi plus un passage par l'identifiant que par la classe !?).

J'ai déjà vu des scripts qui stockaient des valeurs arbitraires dans element.className. Genre des chaines de texte ou des URL.

Utiliser class pour déclarer un groupe logique d'éléments sous un même nom n'est bien sûr pas un abus... vu que l'attribut est fait pour ça (cf. la spec HTML 4.01).

yodaswii a écrit :
En attendant les attributs data- et API JS correspondante.

Les attributs data- sont utilisables dans tous les navigateurs actuels sans souci particulier. Si le navigateur ne les implémente pas spécifiquement, on n'aura pas accès à element.dataset.lol mais on peut tout à fait utiliser element.getAttribute('data-lol').