11524 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Séparation HTML/JS: Où mettre onclick?

Pages :
(reprise du message précédent)

matmat a écrit :

En fait c'est le js qui crée le lien, j'avais pas vu l'astuce...


AMHA il ne s'agit pas du tout d'une astuce.

matmat, tu es trop dans la virtuosité du code et pas assez dans la réflexion sur la manière dont peut et doit être utilisé le javascript.

Tu risque vraiment d'avoir du mal à comprendre ce que dit Koala car il intègre systématiquement ce dernier aspect.

Cela dit moi c'est encore pire puisque dès qu'il parle de code ben je comprend plus rien Smiley bawling

Smiley lol
Modérateur
Salut,

ben teste donc cet exemple Smiley smile :
<!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=iso-8859-1" />
		<title>Exemple</title>
		<style type="text/css">/*<![CDATA[*/

div { background-color: green; width: 150px; height: 150px; margin: 10px; }
a { display: block; }
.close { display: none; }
.open { display: block; }
.red { background-color: red; }
.blue { background-color: blue; }

		/*]]>*/</style>
		<script type="text/javascript">//<![CDATA[

function Init()
{
	var oDiv = document.getElementsByTagName('div'), iI = 0, iCount = oDiv.length;
	for(iI; iI < iCount; iI++)
	{
		if(oDiv[iI].className == 'display')
		{
			var oA = Control('Contrôle de la div ' + (iI + 1) + ' (affichage)', 'ctrlDisplay' + iI);
			oDiv[iI].className = oA.id + ' close';
			oA.onclick = Display;
		}
		if(oDiv[iI].className == 'style')
		{
			var oA = Control('Contrôle de la div ' + (iI + 1) + ' (style)', 'ctrlStyle' + iI);
			oDiv[iI].className = oA.id + ' red';
			oA.onclick = Style;
		}
	}
}
function Control(txt, id)
{
	var oA = document.createElement('a');
	oA.setAttribute('href', '#');
	oA.setAttribute('id', id);
	var oTxt = document.createTextNode(txt);
	oA.appendChild(oTxt);
	return document.body.appendChild(oA);
}
function Display()
{
	var oDiv = document.getElementsByTagName('div'), iI = 0, iCount = oDiv.length;
	for(iI; iI < iCount; iI++)
	{
		if((oDiv[iI].className == this.id + ' close') | (oDiv[iI].className == this.id + ' open'))
		{
			oDiv[iI].className = (oDiv[iI].className == this.id + ' close') ? this.id + ' open' : this.id + ' close';
			return false;
		}
	}
}
function Style()
{
	var oDiv = document.getElementsByTagName('div'), iI = 0, iCount = oDiv.length;
	for(iI; iI < iCount; iI++)
	{
		if((oDiv[iI].className == this.id + ' red') | (oDiv[iI].className == this.id + ' blue'))
		{
			oDiv[iI].className = (oDiv[iI].className == this.id + ' red') ? this.id + ' blue' : this.id + ' red';
			return false;
		}
	}
}
window.onload = Init;

		//]]></script>
	</head>
	<body>
		<div></div>
		<div class="style"></div>
		<div class="display"></div>
	</body>
</html>
Ce n'est pas forcémment codé au mieux et on peut optimiser mais j'ai tenté de faire simple pour que tout le monde puisse suivre... ( T'as vu clb56, c'est des fonctions toutes bêtes ! Smiley lol )

L'affichage et le changement du style sont optionnels donc je ne fais apparaître les liens de contrôle que dans ce cas.
A chaque div que tu rajoutes avec la classe 'display' ou 'style', le lien de contrôle est généré et est lié à la div correspondante.
Modifié par koala64 (01 Dec 2006 - 11:29)
koala64 a écrit :

( T'as vu clb56, c'est des fonctions toutes bêtes ! Smiley lol )


Oui mais moins que moi Smiley biggol Smiley biggol Smiley biggol

J'ai beaucoup de mal avec javascript c'est toujours très laborieux.

Ce qui est bizarre c'est c'est qu'avec php je me sens plutôt à l'aise
a écrit :

mais j'ai tenté de faire simple pour que tout le monde puisse suivre...


....m..... j'croyais pourtant qu'il me restais des "aspros" !!! Smiley cligne

non non c'est assez clair pour les affectations des fonctions selon la valeur retournée 'className' ..

j'ai un peu de mal avec :

if((oDiv[iI].className == this.id + ' close') | (oDiv[iI].className == this.id + ' open'))
...mais je suis pas trop habitué avec Js + Html ( j'suis plutot Js + svg) ...
grace à cette discussion je crois avoir saisi le méchanisme
des gestions d'évènement ( bon j'ai le livre de Flanagan sur les genoux depuis le début aussi ... au cas où bien sûr ) Smiley rolleyes
kzone a écrit :

....m..... j'croyais pourtant qu'il me restais des "aspros" !!! Smiley cligne



Smiley confused Smiley confused Smiley confused

Je pensais que tu n'en n'aurais peut être pas besoin aujourd'hui...

DSL

Re Smiley confused Smiley confused Smiley confused
Je viens d'essayer ton exemple, c'es impec, j'était moi aussi dans des tests de cette nature mais je me suis perdu sur la transformation d'un élément en lien, en effet sur ma page j'ai une balise h3 qui encadre une image et un texte, et dans le cas ou j'ai juste un texte pas de probléme pour récuperer le contenu avec "nodeValue" mais avec les deux j'ai bataillé et mettre le lien a autour de la balise h3 me semble pas trés logique et surement source de problemes.

En fait je comprend et je trouve la technique trés bien, mais à chaque fois que je veux la mettre en place sur un site ayant d'autres éléments et forcément des cas particulier à celui-ci je me retrouve avec des problémes, par contre externalisé le js ça y est j'ai compris le systéme. Je vais persévérer pour essayer de virer les liens "uniquement js" inutiles. Par contre pour la variable effectivement dans ton exemple cela marcherais trés bien comme ça par exemple:


<div id="red"></div>
<div id="blue"></div>
<div id="green"></div>

<div class="style" id="#red"></div>
<div class="style" id="#blue"></div>
<div class="style" id="#green"></div>

<div class="display"></div>


ou l'id de la div serait envoyé comme paramétre à la fonction style, pour appeler un style different, ainsi dans le document html la class determinerais l'action et l'id l'objectif de cette action.

Une autre possibilité est mettre une regle pour selectionner le style, comme ça:
if(/\bstyle\b/.exec(oDiv[iI].className)

au lieu de:
if(oDiv[iI].className == 'style')

ce qui permet d'écrire ensuite des classes tel que style_red et style_green(il faut ensuite récupérer "red").
Modifié par matmat (01 Dec 2006 - 18:19)
Modérateur
@matmat :

Oui, on peut bien entendu améliorer le script. Je l'ai fait dans un soucis de simplicité, juste pour comprendre le principe. Smiley cligne

A titre d'amélioration, on peut fusionner les fonctions Style et Display, de même qu'on peut virer les onclick et le onload (qui s'approprient l'action pour chaque élément), ou encore développer une fonction de recherche, transformer la fonction Control pour créer tout type d'élément, charger le script plus rapidement, etc... etc...

Tout dépend de ce que tu en attends mais si j'avais montré un exemple plus complexe, d'autres n'auraient pas compris... Smiley ravi (Je vois que c'est chaud pour certains déjà ! Smiley lol )

Maintenant, c'est personnel mais je ne vois pas l'intérêt d'ajouter un id. Chaque élément est différent et lorsque je lance le script, je mets un id sur le lien généré que je reprends en tant que class sur la div (voir code source généré). Je peux, sans id au sein du code xhtml, définir un style différent sur chaque élément pour peu que je passe les paramètres en tant qu'arguments des fonctions Display ou Style.
De même, lorsque j'ai une unique classe, pas besoin d'expressions régulières, ça complexifie mon écriture et je n'ai pas besoin de la puissance de celles-ci. Il serait plus judicieux de s'en servir sur les conditions d'entrée des fonctions Display et Style, par exemple. Smiley smile
Modifié par koala64 (01 Dec 2006 - 19:29)
a écrit :
Je peux, sans id au sein du code xhtml, définir un style différent pour peu que je passe les paramètres en tant qu'arguments des fonctions Display ou Style.

Là je comprend pas comment tu peux faire ça, par quel moyen ces paramétres(therme plus aproprié que "variables", soit dit en passant) vont ils passer, étant donner que la classe défini la fonction, il faudrait alors définir une classe par fonction, ce qui peut devenir super lourd ( en imaginant que tu es 10 couleurs differentes).

<apres 5 minutes>
Je vient de réflechir et j'ai compris pourquoi on ne se comprend pas, en fait moi j'ai besoin d'envoyer des paramétres depuis le xhtml (ils viennent de boucles spip), tandis que toi tu propose de les initier depuis le js. Les deux méthodes fonctionnent mais c'est une question de contraintes.
Modifié par matmat (01 Dec 2006 - 19:40)
Modérateur
Je donne un nom bidon auquel j'associe la valeur de iI. ('ctrlDisplay' + iI au sein de la boucle de la fonction Init)
Modifié par koala64 (01 Dec 2006 - 19:40)
a écrit :
Petite remarque : je ne suis pas sûr que faire commencer des ids par le caratère '#' soit une bonne idée...

Je me disait aussi que c'était un peu bizarre, je vais trouver autre chose, c'est vrai que c'est un coup se mélanger les pinceaux...
Pages :
Sujet clos
Aller à