Associer des liens à une classe ?

Bonjour,

Je suis un habitué de Flash, et je commence à peine le Javascript en mode "compliqué" ! Je dois créer une interface en Ajax, pour le moment ça va, j'arrive à peu près bien avec ce que j'ai. Le problème est que mes boutons vont se multiplier, et donc j'aimerais pouvoir gérer leur état, et leurs actions depuis un contrôleur, de plus cela me permettrait de ne pas avoir à mettre des onClick/MouseOver partout dans le HTML ! Je veux tout centraliser en somme. Du coup j'avais pensé associer chaque boutons un par un dans ma fonction d'initialisation à une classe bouton qui gérerait les états (rollOver, Disabled...) et leurs actions etc... mais je n'ai pas trouvé d'exemple sur le net retraçant cette méthode. J'ai oublié de préciser que ces boutons sont dans le HTML chargé au lancement. Du coup je les récupère avec leur ID.

Est-ce possible ? Existe-t-il une meilleure méthode ? Les prototypes s'utilisent-ils de la même manière qu'en Flash ?

Merci de votre attention
Modifié par warry (13 May 2008 - 15:47)

Salut warry,

C'est une bonne idée, tu vas te simplifier la vie.

Au final cela peux donner des chose comme ça :

$('.roll_over').addEvent('click',function(){
   //do something
});

ou

addEvent(getClass('roll_over'),'click',function(){
   //do something
});

ou

$('a.roll_over').mouseOver(function(){
   //do something
});

Ce qui est très pratique.

Pour arriver à cela par contre c'est une autre histoire, à moins d'utiliser une bibliothèque comme jQuery ou Mootools, ce qui peut se révéler utile dans ton cas si tu as besoin de produire une application avec des délais et que tu connais actionScript. En effet ces bibliothèque, en plus d'avoir une syntaxe plus intuitive t'épargnent les problème de compatibilité entre les navigateurs qui rendent souvent fous les développeur flash.

Bien sur cela peut s'apprendre, et j'imagine que tu dois en connaitre déjà pas mal mais avec des contraintes de production pour faire une application en ligne ajax, c'est un coup à ne pas dormir!

matmat a écrit :
Salut warry,

C'est une bonne idée, tu vas te simplifier la vie.

Au final cela peux donner des chose comme ça :

$('.roll_over').addEvent('click',function(){
   //do something
});

ou

addEvent(getClass('roll_over'),'click',function(){
   //do something
});

ou

$('a.roll_over').mouseOver(function(){
   //do something
});

Merci !
J'étais justement en train de lire la doc sur addEvent (un mot que je connais ) ! C'est déjà bon de savoir que je vais dans la bonne direction. Et c'est encore toi qui m'aide ... je pense lancer mon blog : "les déboires d'un graphiste perverti au XML"

matmat a écrit :

Ce qui est très pratique.

Pour arriver à cela par contre c'est une autre histoire, à moins d'utiliser une bibliothèque comme jQuery ou Mootools, ce qui peut se révéler utile dans ton cas si tu as besoin de produire une application avec des délais et que tu connais actionScript. En effet ces bibliothèque, en plus d'avoir une syntaxe plus intuitive t'épargnent les problème de compatibilité entre les navigateurs qui rendent souvent fous les développeur flash.

Bien sur cela peut s'apprendre, et j'imagine que tu dois en connaitre déjà pas mal mais avec des contraintes de production pour faire une application en ligne ajax, c'est un coup à ne pas dormir!

En fait, je suis en alternance et mon chef de projet, qui n'a pas trop le temps de m'épauler, m'a donné ça à faire pour que j'approfondisse mes connaissances (j'aimerais bien avoir la charge de tout ce qui concerne les interfaces Web des projets sur lesquels on bosse : je fais déjà le graphisme et le flash depuis un moment). Du coup je n'ai pas de délais serrés, je peux y aller sereinement . Si c'est pas moi qui le fait, ce sera fait lorsque l'équipe qui développe le backoffice aura le temps, et du coup ce serait un js.js avec une liste interminable de fonctions ^^. Tant qu'à faire, autant que ce soit propre

Je connais un peu Mootools, puisque j'ai déjà utilisé les effets de slide et l'accordion mais j'ai pas été plus loin. Je vois qu'il y a des classes qui permettent de créer d'autres classes avec héritage, de sélectionner facilement les noeuds etc...

Merci des tuyaux

warry a écrit :

En fait, je suis en alternance et mon chef de projet, qui n'a pas trop le temps de m'épauler, m'a donné ça à faire pour que j'approfondisse mes connaissances (j'aimerais bien avoir la charge de tout ce qui concerne les interfaces Web des projets sur lesquels on bosse : je fais déjà le graphisme et le flash depuis un moment). Du coup je n'ai pas de délais serrés, je peux y aller sereinement

ça c'est cool...

Dans ce cas c'est vrai que c'est peut-être l'occasion d'apprendre plus en détail comment cela fonctionne, même si tu utilise au final une librairie, cela aide à comprendre comment elles fonctionnent pour bien les utiliser. Pour l'exemple que tu donnes des sélecteur de classes, tu peux regarder le code de Julien Royer qui permet de sélectionner et de transformer les classes : http://forum.alsacreations.com/topic-5-3716-2-Fonctions-methodes-class-et-scripts-utiles.html#p143818, j'avais aussi fait une fonction selecteur css une fois qui m'est bien utile http://forum.alsacreations.com/topic-5-29704-2-Resolu-GetElementsByClass.html#p230158.

Dans ce cas, justement, si tu comprends comment ça marche, tu t'aperçois que de sélectionner comme ça tag -> classe (a.classeName) c'est beaucoup mieux que de rechercher une classe dans toutes les balises de la page (* -> classe), ton script fera 10 fois moins de boucles, multiplié par toutes les fois que tu uses le sélecteur.

Par contre, pour avoir recherché un peu sur la syntaxe "chainage" ( el.maFonction().monAutreFonction() au lieu maFonction(), voir jQuery ) avec l'aide précieuse de koala64 et de Julien Royer, je n'ai pas réussi à vraiment comprendre comment l'utiliser.

Pour les événements une autres discutions avec koala64 qui m'a bien appris : http://forum.alsacreations.com/topic-5-34220-1-AddEvent-dans-la-pratique.html

Comme tu vois c'est long d'apprendre javascript, donc si tu as le temps maintenant n'hésite pas!

Merci pour tous les liens

matmat a écrit :

Comme tu vois c'est long d'apprendre javascript, donc si tu as le temps maintenant n'hésite pas!

Oui, c'est pareil avec tous les langages. Ce qui est dur n'est pas la synthaxe, mais les habitudes de codage. Encore que je suis pas trop perdu, j'ai longtemps codé des prototypes en Actionscript, lorsque je ne connaissais pas les classes. Après faut pratiquer !

J'ai ce livre qui m'aide aussi http://www.eyrolles.com/Scan/9782212120097.gif
j'ai pas encore trop regardé les librairies, j'en suis plutôt au début.

Je poursuis ce fil, malgré que le sujet ne soit pas le meme !
J'ai continué à scripter, et j'ai du mal avec certains aspects.
D'abord, je n'arrive pas à créer des objets avec Eval ! [var eval('o-'id) = new obj();]

Il semble que j'ai un problème de référence à mes objets, et j'ai essayé avec getElementById, sans résultats !

Voici le code :

// --------------------------------------------------------
// Fonction de gestion des inputs textes pour les variables
// --------------------------------------------------------

var objInput = function () {}

objInput.prototype.create = function (
			noeud,			// ID de la cellule ou doit se placer le champ
			identifier,		// identifierifiant du champ
			defaultValue,	// Valeur par défaut
			minValue,		// Valeur mini
			maxValue,		// Valeur maxi
			interval		// Pas des +/-
			) 
{
	//-----------------------------------
	// Création d'un input text
	this.champ=document.createElement('input');
	this.champ.setAttribute('type','text');
	this.champ.setAttribute('name',identifier);
	this.champ.setAttribute('value',defaultValue);

	//-----------------------------------
	// Vérifie les valeur soumise au champ
	this.champ.onchange = function()
	{
		if (this.value == '' || !parseFloat(this.value) || this.value < minValue || this.value > maxValue)
		{
			this.style.borderColor = 'red';
		}
	}

	//-----------------------------------
	// Applique le style au focus
	this.champ.onfocus = function()
	{
		this.style.borderColor = 'black';
		tips(document.getElementById('tips'),"Type a value between "+minValue+" and "+maxValue);
	}

	//-----------------------------------
	// Gestion des touches fléchées
	if(window.event) // If = IE
	{
		this.champ.onkeypress = function(event){
			if (event.keyCode == "40")
			{
				if (parseFloat(this.champ.value-interval) >= minValue)
					this.champ.value -= interval;
			}
			else if (event.keyCode == "38")
			{
				if (parseFloat(this.champ.value+interval) <= maxValue)
					this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
			}
		}
	}
	else // If != IE
	{
		this.champ.onkeydown = function(event){
			if (event.keyCode == "40")
			{
				if (parseFloat(this.champ.value-interval) >= minValue)
					this.champ.value -= interval;
			}
			else if (event.keyCode == "38")
			{
				if (parseFloat(this.champ.value+interval) <= maxValue)
					this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
			}
		}
	}

	//-----------------------------------
	// Création d'un bouton moins
	this.btMoins=document.createElement('img');
	this.btMoins.setAttribute('src','images/less.gif');
	this.btMoins.setAttribute('alt','decrease value');
	// Gestion du clic
	this.btMoins.onclick = function()
	{
		if (parseFloat(this.champ.value-interval) >= minValue)
			this.champ.value -= interval;
	}

	//-----------------------------------
	// Création d'un bouton plus
	this.btPlus=document.createElement('img');
	this.btPlus.setAttribute('src','images/more.gif');
	this.btPlus.setAttribute('alt','increase value');
	// Gestion du clic
	this.btPlus.onclick = function()
	{
		if (parseFloat(this.champ.value+interval) <= maxValue)
			this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
	}

	//-----------------------------------
	// Ajout des éléments précédents dans le code HTML
	document.getElementById(noeud).appendChild(this.btMoins);
	document.getElementById(noeud).appendChild(this.champ);
	document.getElementById(noeud).appendChild(this.btPlus);
	//-----------------------------------
}


	var o = new objInput();
	o.create(noeud,identifier,defaultValue,minValue,maxValue,interval);

Je sais, je n'ai pas utilisé de librairies... Je dirait même que j'ai codé de l'actionscript.

je créer un 30 aine d'objets par page. Lorsque je ne fais pas en proto (sans les this etc...) ca les affiche tous, mais tous les évènements se répercutent sur le dernier objet (normal).

Là, en objet, il les affiche bien, mais ce sont les évènements qui ne sont pas bons (this.champ has no properties), je vois pas comment faire pour faire passer la référence. Faut-il que je créer une fonction du prototype pour chaque évènement (comme dans tes exemples), un peu comme les écouteurs en As ?

Je ne suis pas certains d'avoir été très clair :s

Merci de votre attention
Modifié par warry (15 May 2008 - 16:47)

warry a écrit :
Je poursuis ce fil, malgré que le sujet ne soit pas le meme !
J'ai continué à scripter, et j'ai du mal avec certains aspects.
D'abord, je n'arrive pas à créer des objets avec Eval ! [var eval('o-'id) = new obj();]

Il semble que j'ai un problème de référence à mes objets, et j'ai essayé avec getElementById, sans résultats !

Voici le code :

// --------------------------------------------------------
// Fonction de gestion des inputs textes pour les variables
// --------------------------------------------------------

var objInput = function () {}

objInput.prototype.create = function (
			noeud,			// ID de la cellule ou doit se placer le champ
			identifier,		// identifierifiant du champ
			defaultValue,	// Valeur par défaut
			minValue,		// Valeur mini
			maxValue,		// Valeur maxi
			interval		// Pas des +/-
			) 
{
	//-----------------------------------
	// Création d'un input text
	this.champ=document.createElement('input');
	this.champ.setAttribute('type','text');
	this.champ.setAttribute('name',identifier);
	this.champ.setAttribute('value',defaultValue);

	//-----------------------------------
	// Vérifie les valeur soumise au champ
	this.champ.onchange = function()
	{
		if (this.value == '' || !parseFloat(this.value) || this.value < minValue || this.value > maxValue)
		{
			this.style.borderColor = 'red';
		}
	}

	//-----------------------------------
	// Applique le style au focus
	this.champ.onfocus = function()
	{
		this.style.borderColor = 'black';
		tips(document.getElementById('tips'),"Type a value between "+minValue+" and "+maxValue);
	}

	//-----------------------------------
	// Gestion des touches fléchées
	if(window.event) // If = IE
	{
		this.champ.onkeypress = function(event){
			if (event.keyCode == "40")
			{
				if (parseFloat(this.champ.value-interval) >= minValue)
					this.champ.value -= interval;
			}
			else if (event.keyCode == "38")
			{
				if (parseFloat(this.champ.value+interval) <= maxValue)
					this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
			}
		}
	}
	else // If != IE
	{
		this.champ.onkeydown = function(event){
			if (event.keyCode == "40")
			{
				if (parseFloat(this.champ.value-interval) >= minValue)
					this.champ.value -= interval;
			}
			else if (event.keyCode == "38")
			{
				if (parseFloat(this.champ.value+interval) <= maxValue)
					this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
			}
		}
	}

	//-----------------------------------
	// Création d'un bouton moins
	this.btMoins=document.createElement('img');
	this.btMoins.setAttribute('src','images/less.gif');
	this.btMoins.setAttribute('alt','decrease value');
	// Gestion du clic
	this.btMoins.onclick = function()
	{
		if (parseFloat(this.champ.value-interval) >= minValue)
			this.champ.value -= interval;
	}

	//-----------------------------------
	// Création d'un bouton plus
	this.btPlus=document.createElement('img');
	this.btPlus.setAttribute('src','images/more.gif');
	this.btPlus.setAttribute('alt','increase value');
	// Gestion du clic
	this.btPlus.onclick = function()
	{
		if (parseFloat(this.champ.value+interval) <= maxValue)
			this.champ.value = parseFloat(this.champ.value) + parseFloat(interval);
	}

	//-----------------------------------
	// Ajout des éléments précédents dans le code HTML
	document.getElementById(noeud).appendChild(this.btMoins);
	document.getElementById(noeud).appendChild(this.champ);
	document.getElementById(noeud).appendChild(this.btPlus);
	//-----------------------------------
}


	var o = new objInput();
	o.create(noeud,identifier,defaultValue,minValue,maxValue,interval);

Je sais, je n'ai pas utilisé de librairies... Je dirait même que j'ai codé de l'actionscript.

je créer un 30 aine d'objets par page. Lorsque je ne fais pas en proto (sans les this etc...) ca les affiche tous, mais tous les évènements se répercutent sur le dernier objet (normal).

Là, en objet, il les affiche bien, mais ce sont les évènements qui ne sont pas bons (this.champ has no properties), je vois pas comment faire pour faire passer la référence. Faut-il que je créer une fonction du prototype pour chaque évènement (comme dans tes exemples), un peu comme les écouteurs en As ?

Je ne suis pas certains d'avoir été très clair :s

Merci de votre attention

EDIT : c'est ok ! j'ai enregistré la référence à champ dans une variable !