[Résolu] Utiliser Event

Bonsoir,

Comme on me l'a conseillé, j'ai essayé d'utiliser les événements plutôt que mélanger html et JS. Cependant, on ne peut pas dire que ce soit une réussite

Je pense ne pas avoir bien compris le fonctionnement des événements, pouvez-vous m'aider ?

Voici les différents codes http://jsfiddle.net/Ccile/qABy8/#base

Merci d'avance

Bah pour le coup, tu n'utilises pas les évènements plus qu'avant. Mais bon la... ca marche bien non? TU peux modifier l'état des cellules quand le jeu est marqué comme arrété, et tu ne peux pas quand il est lancé. DU coup qu'est ce qui te bloques?

J'ai oublié de sauvegarder... C'est l'ancienne version :'(
Voilà le bon lien, ou plutôt la bonne version http://jsfiddle.net/Ccile/qABy8/

salut,
il y a beaucoup que tu dois revoir et si tu ne comprends pas la gestion d'évènements JS je te conseillerais de consacrer un peu de temps pour mieux maîtriser.
Pour ton code, déjà pas la peine de donner une classe à tous tes <td> et tu peux faire plus simple, comme ceci.

PS: pas la peine de créer toute la structure d'un document HTML sur jsField il gère tout ça tout seule.

Salut,

Je veux bien consacrer plus de temps, mais que faire ? Lire des tutos ? Lesquels me conseillerez-vous ? (j'ai lu celui du sdz).

Je vais voir ton code en espérant le comprendre
Et pour la structure, c'est un copié/collé de mon fichier^^ la flemme de faire gaffe

Merci

PS : J'ai déjà une question, à propos du CSS : à quoi sert
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
Il y a une grande différence avec juste boder-radius ?
(je sais je peux tester avec, sans et tout pour voir, mais je pose aussi la question^^)
Modifié par Ccile13 (24 Aug 2013 - 16:52)

Oui désolé pour le code un peu parachuté. On va essayer de détailler tout ça.
- La fonction "addEvent()" est là pour simplifier les choses et assurer une rétrocompatibilité avec IE7/8, les paramètres qu'on passe sont l'objet sur lequel s'applique l'évènement, le type d'évènement (click, mouseover...) et la fonction qui gérera l'évènement.
- On récupère ensuite tes <td> et ton <button> dans des variables pour les réutiliser après.
- On créer les deux fonctions "changeCouleur" et "changerTexte" pour les évènements.
- On applique l'écoute du clic sur tous les <td> avec une boucle et on applique aussi l'écoute sur le bouton.

Après c'est la même chose que ce que tu as déjà fait.

Pour les tutos, je pense que pour commencer y'a pas mieux que Sdz, c'est clair et pas surchargé pour un début, ils sont très bien faits et destinés aux débutants.

a écrit :
à quoi sert
-webkit-border-radius: 5px;
-moz-border-radius: 5px;

C'est juste pour une question de rétrocompatibilité pour les vieux FF, Safari et Chrome qui ne comprenaient pas à un moment de leur histoire la propriété "border-radius" sans préfixe.

Pas de soucis ^^ J'étais en train de l'étudier ce code Et de le remettre à ma sauce. Par exemple, voilà addEvent :

function addEvent(element, event, func,booleen)
{
   booleen=booleen||!0;
    element.addEventListener? element.addEventListener(event,func,booleen):element.attachEvent('on'+event,func);
}

Mais, pour être sûre... d, c'est bien le booleen ? Et en même temps il est optionnel... et si on le mets pas, ça prend la valeur !0 qui est en fait true non ? (sur le coup je suis pas sûre de moi...)

Par contre je ne comprends pas pourquoi mon code précédent ne fonctionnait pas :

function init()
{
	var elements=document.getElementsByTagName('td'),
		elements_length=elements.length;
	
	for(j=0;j<elements_length; j++)
	{
		addEvent(elements[j],'click',changeCouleur(elements[j]));
	}
	
}

function changeCouleur(td)
{
	if(!bloque)
	{
		td.className=(td.className=="morte") ? "vivante" : "morte";
	}
}

init(); 

Je pensais que ça faisait : une fois init() lancé, ça récupère les td voulu, et ça y applique la fonction changeCouleur quand on clique dessus... Mais apparemment non... Qu'est-ce qui cloche exactement ?

Merci beaucoup ^^

(PS J'ai du le lire trop fatiguée le tuto... :'( )

Edit :

currentTD.className = (currentClass == "") ? "vivante" : "";

Peut-il être remplacé par

currentClass=(currentClass=="")?"vivante":"";

?
Merci encore
Modifié par Ccile13 (24 Aug 2013 - 17:34)

Oui pour la fonction "addEvent" c'est exactement ce que tu dis, elle est juste compressée (pour moi je sais comment l'utiliser mais en effet tu peux la refaire à ta sauce).

Pour ton ancien code, déjà tu exécutes la fonction dès le départ en l'appelant dans init() (quand tu ajoutes les parenthèses à la fonction changeCouleur, elle est tout de suite appelée au lieu de l'être uniquement lors du clic), de plus, tu dois récupérer l'élément courant avec l'objet Event mais ça tu dois connaître si non c'est du charabia.
Ton code donnerait ça.

Ah d'accord... merci^^

Mettre !0 à la place de true c'est pour raccourcir ou y at-t-il une autre raison ?

Pour ton EDIT, non tu ne peux pas remplacer et il n'y a pas d'autre raison que de raccourcir le code.

Si on ne peut pas remplacer c'est une histoire de référence ou quelque chose du genre non ? currentClass est une boîte contenant la même chose que currentTD.className quand on l'initialise et modifier la variable ne modifiera pas le nom de la class c'est ça ?

Je préfère mettre true^^

Merci encore

Ccile13 a écrit :
PS : J'ai déjà une question, à propos du CSS : à quoi sert
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
Il y a une grande différence avec juste boder-radius ?
(je sais je peux tester avec, sans et tout pour voir, mais je pose aussi la question^^)

La ressource ultime pour les préfixes est Caniuse : http://caniuse.com/#search=border-radius
Firefox 3.6, Safari 4 (et sur iOS 3.2), Android 2.1 ... ça fait longtemps que je ne mets plus de préfixe pour cette propriété-là.

a écrit :
ça fait longtemps que je ne mets plus de préfixe pour cette propriété-là.

Sauf que tout le monde n'a pas la dernière version de ces navigateurs et beaucoup utilisent des versions plus anciennes pour diverses raisons.
Tu serais peut être surpris (ou pas) de voir à quel point les vieilles versions de FF, Chrome sont d'actualité. Si t'as des stats pour la gestion de tes sites, tu pourras le vérifier.

Pourquoi pourrait-on préférer d'anciennes versions ? (aucun jugement ou préjugés dans cette question)

Et une autre question... (désolée) Je souhaiterais que une fois le jeu lancé (et écrit... --" ) on ne puisse plus modifier les cases (et qu'on repuisse si on clique sur "Modifier"). A quel endroit est-il plus logique de mettre la condition nécessaire ? Dans changeColor ? Mais alors, à chaque clic, même si le jeu tourne, il y aura appel à cette fonction... et si je le mets dans le for, j'ai l'impression que ça n'irait pas...

Merci

Zelalsan a écrit :
Sauf que tout le monde n'a pas la dernière version de ces navigateurs et beaucoup utilisent des versions plus anciennes pour diverses raisons.
Tu serais peut être surpris (ou pas) de voir à quel point les vieilles versions de FF, Chrome sont d'actualité. Si t'as des stats pour la gestion de tes sites, tu pourras le vérifier.

Je termine un long projet où le support d'IE6 était encore demandé il y a peu (et non sans raison, au début du projet).
"Mes sites" sont ceux des clients et je n'ai pas souvent accès à leurs stats et pour alsacreations.com ce n'est pas représentatif : mélange d'utilisateurs experts et d'experts sortant IE6 juste pour tester... ça gonfle les stats AMHA
En m'occupant du site 2011 des RMLL (50% de Linux parmi les visiteurs ), j'ai pu constater que Debian laggait bien au niveau des versions de Firefox. Ils étaient en 3.0 ou 3.6 quand tout le monde était en 4.0. Et il y a eu des changements majeurs entre ces versions
J'ai bien conscience que pas mal de boîtes bloquent la mise à jour de leur parc applicatif "pour des raisons de sécurité/pour le maîtriser" dont Firefox mais 3.6 c'est très vieux. Chrome je serais surpris par contre, oui.
Il y a un seuil à partir duquel c'est leur problème et plus celui du webdesigner/intégrateur/développeur web. Je suis très conservateur parce que je fais attention à l'accessibilité mais y a des limites quand le problème vient pas de moi !
Pour info, alsacreations.fr ne supporte plus qu'IE8 mini pour les projets récents ou à venir et ce n'est plus négociable, même pour des potes.
IE6 et son support des sélecteurs, boxsizing.htc qui est un peu buggé (1 seul bug mais très impressionnant quand ça arrive), les navigateurs modernes et ce qu'on nous demande en matière de Responsive Web Design ou de CSS avancés, c'est un grand écart qui n'est plus gérable.


J'aurais dû ajouter dans mon précédent message que si border-radius n'est pas appliqué, ce sera cosmétique et un "défaut" visuel avec lequel on peut vivre... Quand c'est plus important que ça, il faut bien entendu faire attention à avoir une "dégradation gracieuse" (ou rehaussement progressif si on travaille comme ça). Rajouter une propriété préfixée n'a que peu d'influence sur le poids total des CSS, ça se gzippe très bien.