Modifier event javascript dynamiquement

Discutez d'informatique ici !
Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Modifier event javascript dynamiquement

par Rockleader » 15 Jan 2016, 18:31

Coucou,

je cherche à faire quelque chose, mais je ne sais pas si c'est réalisable de la façon que j'imagine, je viens donc vous demander conseil =)

Admettons une section de page html (dans mon cas une cellule de tableau)

Code: Tout sélectionner
<td id="t0" onclick='test(this)'></td>


Autrement dit, ici, au clic, je vais appeler la fonction javascript test avec l'identifiant de mon div de cellule.

Tout ça c'est très bien, mais


imaginons que maintenant au bout d'un certain temps (expiration d'un timer,ou même en réaction à un autre event javascript) je veuille changer le corps même du code html.

C'est à dire que,

1- soit je ne veux plus que la fonction test s'exécute au clic mais plutôt la fonction test2

2- soit je veux toujours effectuer la fonction test mais plus sur le même événement; disons que je l'effectuerais sur onmouseover.


Je pense qu'il doit y avoir moyen de faire ça avec un setAttribute, mais je suis pas sûr du tout.
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !



Avatar de l’utilisateur
fatal_error
Modérateur
Messages: 6610
Enregistré le: 22 Nov 2007, 14:00

Re: Modifier event javascript dynamiquement

par fatal_error » 15 Jan 2016, 23:44

je vais appeler la fonction javascript test avec l'identifiant de mon div de cellule.

non dans le code que tu as mis, tu appèles ta fonction avec ton td (qui est un HTMLElement)

par rapport à ton onclick tu as deux méthodes.
tu peux mettre une variable dans l'environnement englobant pour ta fonction test
Code: Tout sélectionner
var doSomething = true;//after a while just set doSomething to false
function test(element){
    if(dosomething){
        //
    }
}


Le problème, c'est que ta fonction sera toujours appelée, ce qui marche mais reflète le developpement d'un crado.

Ou tu peux faire mieux: tu debind carrément l'élément (a condition que tu attaches pas de manière inline):
Code: Tout sélectionner
<td id="t0"></td>
function test(e){//doSomething}
//bind the event
document.findByElementId('t0').addEventListener('click', test)

//later on, unbind the event
document.findByElementId('t0').removeEventListener('click', test)
la vie est une fête :)

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Modifier event javascript dynamiquement

par Rockleader » 16 Jan 2016, 00:44

Code: Tout sélectionner
<td id="t0"></td>
function test(e){//doSomething}
//bind the event
document.findByElementId('t0').addEventListener('click', test)

//later on, unbind the event
document.findByElementId('t0').removeEventListener('click', test)


Je vais ouvrir une pétition pour qu'une statue soit érigée en ton honneur sur le capitole :lol:

Dire que je me suis fais chier à mettre l'appel de mes fonctions sur mes onclick des 80 cellules de mon tableau :mdr1:

C'est pile ce que je voulais faire, je vais pouvoir init ma page en liant les events, puis changer ces event et les lier autrement à ma convenance. C'est cool vraiment !

Et en plus ça reprend les noms des méthodes java swing, si le monde est pas bien fait :D

Et en plus de ça, l'avantage de cette solution c'est qu'on évite de mélanger les appels d'events js au html. La classe :amen:


===============================================================================================


J'ai une autre question, un peu dans la même ligne d'idée mais différente quand même.


Sur mon tableau, je vais donc placer dynamiquement avec mon js une image dans une cellule.
Sa c'est ok.

Sauf que l'idée du truc, c'est que ce soit un mini jeu en réseau entre deux personnes.


Donc, grosso modo comment ça va se passer si je schématise disons que j'ai un tableau de 10 élément de 0 à 9.

Je charge la page (déclenchement d'un timer)

Pendant le temps accordé, je clique sur une cellule du tableau ou sera alors placé dynamiquement une image.

Lorsque je reçois mon timeOut, je veux pouvoir voir sur mon tableau l'image que l'adversaire aura ajouté également.
Il ne sera pas possible que l'endroit cliqué ait été le même, donc on peut ignorer ce problème là.

Il n'en reste pas moins qu'il me faut trouver un moyen:

1- De communiquer l'endroit où j'ai cliqué lors du timeout
2- De recevoir l'endroit où l'adversaire a cliqué.


A l'heure actuelle, la seule solution envisageable que je vois ce serait de passer par un accès à la base de donné lors du timeout ce qui me permettrait de récupérer les données sous une forme ou une autre.


Du coup, cela va me poser un nouveau problème:

1- Peut-on interagir avec une BDD directement en javascript, ou bien est-on obligé de passer par php ?
2- Si on doit passer par php; comment je vais dire à ma fonction javascript qu'à l'arrivée d'un timer elle doit exécuter une fonction php ? Est-ce à ce moment là que je vais devoir passer par Ajax ? Je me rappelle m'en être déjà servi l'an dernier sans vraiment comprendre comment tout ça marchait pour faire passer une variable de Js à Php.







Encore merci de prendre le temps de répondre à mes questions à chaque fois. Je viens de me lancer pour la première fois dans un vrai projet en solo et je compte bien le mener à bon port tout en m'améliorant en le réalisant^^



PS: Question qui vous paraîtra encore plus idiote que les autres cette fois, mais bon, mieux vaut la poser (je me connais :] )

Si j'arrive à boucler ce site de façon la plus propre possible, à partir du moment où ce sera quelque chose qui fera un peu appel à tous les langages web; est-ce que ça peut apporter une plus-valu dans un CV, ou bien c'est même pas la peine de l'évoquer ?

Parce que c'est vrai que des fois, je vois des offres de stage web défiler, et même pour ça il demande un minimum d'expérience...du coup, je me dis qu'une expérience personnelle pourrait rattraper un manque d'expérience professionnelle si et seulement si les choses sont bien faîtes of course^^

Mais peut-être que je me trompe, donc je préfère avoir un avis des vétérans =)

(Parce que oui je suis toujours en train de galérer à trouver un stage ou un intérim^^)
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

Avatar de l’utilisateur
fatal_error
Modérateur
Messages: 6610
Enregistré le: 22 Nov 2007, 14:00

Re: Modifier event javascript dynamiquement

par fatal_error » 17 Jan 2016, 11:24

pour commencer j'ai écrit findByElementId, mais la fonction à utiliser est getElementById.
(je devais etre ailleurs ce jour là..)

ensuite,
une parenthèse: si tu as 10 td tu peux te permettre de mettre un event sur chaque cellule.
Si tu en as 500, il peut etre intéressant d'utiliser l'event delegation:
tu bind le click sur le table qui contient tes tds, (donc tu bind un seul click au lieu de 500).
Puis dans le handler de ton click, tu regardes quel est l'élément qui a triggered ce click (pour trouver ton td). Ca évite d'allourdir ta page inutilement. Mais si t'en as que 10 t'embêtes pas, c'est un soucis de mémoire c'est tout.


* concernant la communication avec une autre personne:
tu peux utiliser les webrtc: http://peerjs.com/
j'ai jamais utilisé la techno donc je peux pas t'en dire plus.
Mais ca semble le plus adapté pour ton cas.

Sinon, tu peux t'en sortir classiquement soit avec du push, soit du poll.
Le push:
tu mets un serveur au milieu de tes deux joueurs.
tu ouvres une connexion joueur-serveur.
au bout d'un timer le server envoies lui même les infos aux deux joueurs
(tu peux utiliser socket.io (pour nodejs) par exemple)

Le poll:
tu mets un timer coté joueur qui se déclenche toutes les n (s).
tu fais une requete ajax vers le serveur : what's new?
le serveur te répond avec les instructions.

je te conseillerais le push à la place du poll, c'est un peu tristounet de faire du poll, après faut voir c'est ptet le plus simplement si tu utilises un serveur php...

* concernant ton portfolio:
oui ca sert tjs de mettre ton code en ligne pour un cv: tu mets un lien vers tes projets persos.
c'est tjs bien vu.
mais ca peut te desservir.
ca peut te desservir si tu as fait un code de merde et que le poste pour lequel tu postules requiert plus de skills.
m'enfin pour une ssii il s'en tapent de ton niveau.
pour de l'interim ils peuvent etre regardant, mais bon, entre qq1 qui n'a rien et qq1 qui a mis qqch, il est préférable de voir que ce qq1 est passioné (il crèe des choses de son coté), et si la boite est pas trop nulle, elle te fera passer de toute facon un entretien technique.

Surtout, normalement quand tu partages du code, il y a une certaine forme d'esthétique que tu souhaites faire partager, qqch qui soit utile aux autres. Donc considères ca plus comme un bonus pour ton cv.

un ex très simple:
tu connais pas le delegation event: c'est pas grave, c'est pe un oubli ou la flemme de sortir l'artillerie.
tu mets du js en inline: noob qui fait des choses sales.

si tu postules pour du java, ton recruteur il s'en contrefiche (et il connait ptet même pas le js)
si tu postules pour du backend nodejs, ton recruteur il s'en fout de ton skill frontend (pages web), il retiendra juste ta connaissance du langage
si tu postules pour du frontend, soit ton recruteur est une ssii et tu passes crèmes, soit c'est une boite un peu plus sérieuse, et tu réduis tes chances parce que t'as fais ton crado
la vie est une fête :)

Avatar de l’utilisateur
Rockleader
Habitué(e)
Messages: 2126
Enregistré le: 11 Oct 2011, 20:42

Re: Modifier event javascript dynamiquement

par Rockleader » 17 Jan 2016, 13:56

pour commencer j'ai écrit findByElementId, mais la fonction à utiliser est getElementById.


Je m'en étais rendu compte, mais c'est pas bien grave ça^^

une parenthèse: si tu as 10 td tu peux te permettre de mettre un event sur chaque cellule.
Si tu en as 500, il peut etre intéressant d'utiliser l'event delegation:


Et comment, j'ai un tableau de 80, c'est assez lourd je lier sur chaque td...il faut donc que je regarde un truc qui s'appelle event delegation ? Jamais entendu parler de ça, mais bon j'imagine qu'il y a un début à tout^^


Et pour le reste, je vais jeter un coup d’œil merci ;)



PS: Depuis que tu m'as parlé de cette façon de lier les events, j'ai presque envie de structurer mon code Js pour qu'il charge uniquement une sorte de main au load de la page; comme ça un seul scrippt tournera derrière en couvrant toute la durée d'une partie en liant et déliant lui même les événements.


PS2: Et pour ajax, c'est ma bête noire, je comprends le principe, mais j'arrive jamais à faire les requêtes =)
Mais si j'arrive à faire un truc style client/serveur ça sera très bien =)

La lib que tu m'as conseillé me semble bien aussi, à partir du moment où j'arrive à communiquer l'id qui permettra d'ouvrir la connexion, mais j'imagine que ça ce n'est pas absurde de le faire via la BDD.



EDIT:

Bon, en fait ce que tu m'a proposé peerJs, si j'ai bien compris ça utilise nodeJs.

Sauf que, pour faire tourner un serveur que utilise nodeJs, il faut pouvoir installer ce dit serveur, et, la plupart des hébergeurs mutualisés et donc gratuit (dont Olympe que j'utilise) ne prennent pas en charge nodeJs, ce qui veut dire qu'il me faudrait partir sur un hébergeur payant qui lui me proposerait un accès ssh ? Et où je pourrais installer nodeJs.

Tout cela me parait faire beaucoup de sacrifices pour un résultat encore bien incertain^^


Du coup, peerJs, nodeJs, je vais être obligé de faire une croix dessus. Cela semblait pourtant intéressant.


Du coup, il existe d'autre solution pour faire communiquer deux clients ?

Parce que même si je veux passer par un service de socket, d'après ce que j'ai vu socket.io utilise également nodeJs.



Je l'ai un peu dans l'os là...j'étais bien motivé en plus :triste1:


EDIT2: Brain explode =)

J'ai réfléchi à mon problème de base qui est donc

Faire communiquer deux clients sur ma page web. Par communiquer j'entends l'envoie de variable.
Vu que je veux garder mon modèle d'hébergement gratuit, la communication directe par n'importe quel type de WebSocket semble mission impossible.


Donc, la seule alternative qui me reste c'est une BDD.

Si j'ai bien saisi le concept: AJAX devrait me permettre de lancer des requêtes php (et donc de communiquer avec ma BDD); le tout sans refresh la page. Donc, je devrais pouvoir faire transiter des variables de cette façon là, c'est clairement pas ce qu'il y a de plus propre, mais je ne vois pas quelle autre solution serait envisageable...bien entendu, tout ça dépend d'une chose et une seule..AJAX permet il bien réellement de faire cette communication avec la BDD.

Si ça marche bien de cette façon alors je peux entrevoir la solution à mon problème; je vais devoir faire pas mal de requête en simultané du coup, surtout si mon site se peuple, mais je ne pense pas que ce soit un problème de ce coté là.


EDIT3:

j'ai vu que php permettait d'écrire dans un fichier, donc je peux faire passer mes variables via un fichier qui sera temporairement sur le serveur puis détruit à la fin de la partie.
Donc je peux faire communiquer mes variables via php. :amen:

Reste à savoir si je serais capable de faire communiquer le contenu d'une variables Js vers php avec AJAX sans recharger la page :super: Je pense que je commence à voir le bout du tunel^^

(Mine de rien voit la quantité de question que je suis obligé de me poser pour un projet de si petite envergure...)
Cette histoire est entièrement vraie puisque je l'ai inventé du début à la fin !

 

Retourner vers ϟ Informatique

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 7 invités

Tu pars déja ?



Fais toi aider gratuitement sur Maths-forum !

Créé un compte en 1 minute et pose ta question dans le forum ;-)
Inscription gratuite

Identification

Pas encore inscrit ?

Ou identifiez-vous :

Inscription gratuite