[POO] Variable réinitialisée dans une classe

Bonjour à tous,

Je débute en POO javascript et j'ai un soucis que je ne sais pas résoudre.

Voici ma classe :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

function souris(){ this.top=0; this.left=0; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ if(navigator.appName.substring(0,3) == "Net") //Pour Netscape document.captureEvents(Event.MOUSEMOVE); document.onmousemove = this.position; }   // Fonction permettant de savoir ou se trouve la souris this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }   }

---

je créé un objet souris ainsi

Code:

---

1 2	var souri = new souris();

---

L'appel a ma fonction souris se fait ainsi:

Code:

---

1 2	<img id="circu" onmouseout="var obj = new img("inv"); obj.cache(); " onmouseover="var obj = new img("inv");obj.chgSource("/image/index/circui.jpg"); souri.posSouris();obj.chgPos(souri.top,souri.left); obj.affiche(); " src="/image/index/circu.gif"/>

---

Le probléme s'est que au passage de la souris sur l'image une autre image doit s'afficher ou la souris se trouve mais elle s'affiche en 0;0 (coordonnées par défaut de mon objet souris).

Si lors de "souri.posSouris();" je fais un alert j'ai bien la position de la souris mais quand je passe a la fonction "obj.chgPos... " un alert me renvoi 0;0 soit la position par défaut de ma souris.

Je ne comprends pourquoi les variables se sont réinitialisées...
HELP plz ... MICI

Salut,
en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.
Jette un coup d'oeil du côté d'apply() ou call() pour rétablir ton contexte. Plus d'infos ici.

Vu que dans ton cas il s'agit d'un objet unique, une seule souris par fenêtre, tu pourrais également te débrouiller pour déclarer/accéder globalement à souri dans window, ex (fonctionne IE, FF, moins propre et conflit potentiel de noms de variables) :

Code:

---

1 2 3 4 5 6 7 8 9 10

function souris(){ this.top = 0; this.left = 0; document.onmousemove = function(e){ window.myMouse.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; window.myMouse.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; } window.myMouse = this; } var souri = new souris();

---

D'autre part, quittes à tester le navigateur autant le faire une seule fois plutôt qu'à chaque mouvement de souris, tu peux associer onmousemouve à telle ou telle fonction en fonction de ton test de navigateur.

Bye

Citation:

---

Envoyé par Djakisback

en fait c'est un problème de contexte et pas de réinitialisation. this dans ta fonction anonyme ne désigne pas l'objet souris mais ta fonction elle même donc left et top de ton instance ne prennent jamais une autre valeur que 0.

---

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

Effectivement c'était un peu flou pour moi, merci pour ces précisions.
Dans le premier code posté, les valeurs sont belles et bien stockées dans document.left et document.top.

Citation:

---

Envoyé par denisC

this désigne le contexte d'execution, donc certainement l'element HTML qui est à la base de l'évenement.

Pour plus d'information :
http://t-templier.developpez.com/tut...ipt-poo1/#L2.3
(le petit paneau jaune)

Pour la résolution :
http://t-templier.developpez.com/tut...ipt-poo3/#L2.2

---

Javascript permet d'étendre les types :aie:

Code:

---

1 2 3 4 5 6

Function.prototype.bind = function(objet) { var self = this; return function() { return self.apply(objet, arguments); } }

---

Est-ce que quelqu'un pourrait montrer comment faire avec l'exemple du onmousemove au-dessus sans utiliser de fonction bind(), directement avec apply() ?

Re tous,

Merci pour vos réponses,

j'ai compris pourquoi cela ne fonctionne pas mais je n'arrive pas à le mettre en place, j'ai essayé ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ if(navigator.appName.substring(0,3) == "Net") //Pour Netscape document.captureEvents(Event.MOUSEMOVE); document.onmousemove = this.position; }   // Fonction permettant de savoir ou se trouve la souris this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }.bind(this);   }

---

Mais toujours la même chose...

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(event){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); }

---

Je sais pas comment vous arrivez toujours à trouver des scripts des années 60, mais de nos jours on teste les objets pas le nom du navigateur :aie:

Citation:

---

Envoyé par Shinuza

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(e){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); }

---

Je sais pas comment vous arrivez toujours à trouver des scripts des années 60, mais de nos jours on teste les objets pas le nom du navigateur :aie:

---

C'est sans doute la nostalgie :roll:
Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche :lol:

Citation:

---

Envoyé par dragonfly

C'est sans doute la nostalgie :roll:
Ton morceau de code est toujours bon a prendre, quand j'aurai solutionné mon probléme je te dirai si ca marche :lol:

---

Testé par mes soins, par contre j'ai édité une partie du code.

Par contre dans ton code j'ai du remplacer event par e sinon ca me mettait plein d'erreur ^^

Sinon pour ce probléme de this, quelqu'un plz?
Je pige le probléme mais la résolution c'est autre chose (voir quelque message plus haut pour mon dernier code)

Citation:

---

Envoyé par dragonfly

Par contre dans ton code j'ai du remplacer event par e sinon ca me mettait plein d'erreur ^^

---

D'ou le

Citation:

---

Testé par mes soins, par contre j'ai édité une partie du code.

---

Citation:

---

Envoyé par dragonfly

Sinon pour ce probléme de this, quelqu'un plz?
Je pige le probléme mais la résolution c'est autre chose (voir quelque message plus haut pour mon dernier code)

---

Qu'est ce qui te manque?

En fait dans ce code

Code:

---

1 2 3 4 5

this.position = function(e){ this.left = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft; this.top = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop; }.bind(this);

---

le this de this.top et this.left fait reference a l'objet document.onMouseMove et non a mon objet souris, je voudrais qu'il fasse référence à mon objet souris

En fait this faire référence à document et pas à document.onmousemove.

Le problème vient du fait que tu appelles 2 fonctions, ta fonction posSouris est d'ailleurs inutile à mon avis :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

// Création de la classe function souris(){ this.top = 0; this.left = 0; if(document.attachEvent) { // ou n'importe quel autre test pour tester le navigateur document.onmousemove = function(e){ this.left = event.x + document.body.scrollLeft; this.top = event.y + document.body.scrollTop; }.bind(this); } else if(document.addEventListener) { document.onmousemove = function(e){ this.left = e.pageX; this.top = e.pageY; }.bind(this); } }

---

Je serais curieux de connaître la solution avec les 2 fonctions, car j'ai essayé de binder posSouris mais ca ne fonctionne pas.

Egalement la solution sans créer de fonction bind (cette fonction est imbitable lol)

Bind est tout qu'il y'a de plus efficace et utile, surtout dans une application orienté objet.

Sinon dans le code que j'ai posté, le this relatif au document.onmousemove est relatif à l'objet souris, donc tu peux récupérer les données avec monInstanceDeSouris.left;

Re bonjour tout le monde

Je reviens à la charge aprés avoir attaqué d'autres problémes, j'en reviens a celui-la.

Pour rappel mon code est le suivant:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   // Fonction permettant de connaitre la position de la souris this.posSouris = function(){ document.onmousemove = function(e){ this.left = e.pageX || e.clientX + document.documentElement.scrollLeft; this.top =e.pageY || e.clientY + document.documentElement.scrollTop; }.bind(this); }   // Fonction permettant de donner le left de la souris this.leftSouris = function(){ return this.left; }   // Fonction permettant de donner le top de la souris this.topSouris = function(){ return this.top; }       }

---

et le probléme c'est que quand j'appel la fonction posSouris, je n'obtiens pas les cordonées de la souris dans l'objet (this).
J'ai essayé tout vos codes mais aucun ne marche.
De plus je ne peut pas enlever la fonction posSouris() car elle est appelé lors d'une action précise (passage de la souris sur un TD précis).

Si quelqu'un a une autre idée de comment réglé le probléme, la je déséspére:cry::cry::cry:

Re tous, j'ai viré ma fonction car en fait j'ai remarqué qu'elle me servait a rien (je pensais que les calculs de position ne s'effectuaient tout le temps mais non juste quand je survole mon fameux td).

Donc voila mon code

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } // Création de la classe function souris(){ this.top; this.left; // Variables servant a prendre les coordonnées de la souris   document.onmousemove = function(e){ this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop; }.bind(this); alert(this.left);   ...

---

j'ai mis un alert pour voir et celui-ci me retourne "undefined", la je pige pas j'ai repris exactement le même code que Shinuza8-) et ca fonctionne pas :bug:

Faut le mettre ailleurs dans ta page ton alert car à l'initialisation de l'objet souris this.left est undefined vu que t'as pas encore bougé la souris.

Forcément (suis-je bête:aie:), je l'ai mis ailleurs j'ai créé un objet souris

Code:

---

1 2 3

var souri= new souris(); alert(souri.top+" et "+souri.left);

---

Mais il y'a un probléme, car quand j'enléve le alert se situant dans ma classe souris j'obtiens "undefined et undefined", alors que si je laisse le alert dans ma class, le premier alert (celui de la classe) affiche "undefined" => normal, mais l'autre affiche bien les bonnes valeurs "456 et 512" mais seulement quand je ferme le premier alert avec la souris (quand je le ferme avec la touche entrée, le second m'affiche "undefined et undefined".

Si vous comprenez quelque chose...

C'est le même problème vu que t'as pas encore bougé la souris.
En fait tes valeurs ne sont pas initialisées tant que t'as pas bougé.

OK OK,

donc comment je dois faire pour que ces valeurs soient bien pris en compte.
En clair ce que je veut c'est que lorsque ma souris passe sur un TD, une image apparait et se place au niveau du curseur de la souris.

Pour l'instant l'image s'affiche mais en haut a gauche de l'écran

A priori, tu peux mettre un onmouseover dans ton td :

Code:

---

<td onmouseover="alert(souris.left)"></td>

---

tu remplaces le alert par ta fonction d'affichage d'image. D'ailleurs t'as pas besoin de passer souris en argument vu que c'est une variable globale. T'as fais une fonction pour afficher tes images ?

[edit]Je viens de revoir ton premier message mais il faudrait voir le JS. normalement tu peux faire ca sans créer de nouvelle image à chaque fois[/edit]

Dans mon td j'ai ceci:

Code:

---

1 2 3 4 5 6

<td id="td276" onmouseout="var imag = new img("imgCarte"); imag.cache();" onmouseover="var imag = new img("imgCarte"); imag.posSouris(); imag.chgSource("../image/carte magic/276.jpg"); imag.affiche();" colspan="1">

---

avec ma classe image et objet qui sont :

Image (simplifiée)

Code:

---

1 2 3 4 5 6 7 8 9 10 11

function img(id){ objet.call(this,id);   this.chgSource = function(source){ document.getElementById(this.id).src=source; }     }

---

objet(simplifiée)

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

function objet(id){ this.id=id;   this.affiche = function(){ document.getElementById(this.id).style.display="block"; }   this.cache = function(){ document.getElementById(this.id).style.display="none"; }   this.chgPos = function(top,left){ document.getElementById(this.id).top=top+"px"; document.getElementById(this.id).left=left+"px"; }   this.posSouris = function(){ var souri= new souris(); this.chgPos(souri.topSouris(),souri.leftSouris()); } }

---

Voila mes appels et mes class .js

Edit : je debute et si il est possible de ne pas créer un objet a chaque fois je suis preneur^^

Pour les images personnellement je passerais par un tableau JS.
Sinon pour var souri= new souris();
faudrait le faire une seule fois aussi, dans le onload du body ou dans une balise script juste après la balise ouvrante body. Dans ta fonction posSouris tu y auras accès directement car ce sera une variable globale. Ensuite faut pas oublier de mettre la position des img que tu crées en absolute.

Re,

1 des 2 conseils ont été résolu (enfin c'était déja comme ca).

Mon image est en position:absolute

Code:

---

1 2 3 4 5 6

img#imgCarte{ z-index:10; position:absolute;top:0%;left:0%; display:none; }

---

Ensuite quand je met

Code:

---

1 2	onLoad="var souri=new souris();"

---

dans le body et que je passe sur un TD il me dit que l'objet souri n'existe pas.

Peut être parce que mes td se trouvent dans un div appartenant a la page centrale (dans laquelle j'intégre le onLoad)

Pour ton prob l'erreur doit être ici (ajout de 'style') :

Code:

---

1 2	document.getElementById(this.id).style.top=top+"px"; document.getElementById(this.id).style.left=left+"px";

---

En fait je pensais plutôt à une fonction init. Mais si tu mets le 'var' ca crée une variable locale et sans, elle sera globale. Le mieux serait de mettre ca dans le head, entre balise <script>. Ou alors <body onload="souri = new souris()">
Ensuite comme je le disais dans un post précédent, mettre ca dans le onmousemove :

Code:

---

1 2	this.left = event.pageX || event.clientX + document.documentElement.scrollLeft; this.top =event.pageY || event.clientY + document.documentElement.scrollTop;

---

c'est mauvais a priori car à chaque fois que tu bouges la souris tu testes le navigateur (enfin les variables event.pageX, etc).

Un test comme ca :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function souris(){ this.top = 0; this.left = 0; if(document.attachEvent) { document.attachEvent('onmousemove', function(e){ this.left = event.x + document.body.scrollLeft; this.top = event.y + document.body.scrollTop; }.bind(this)); } else if(document.addEventListener) { document.addEventListener('mousemove', function(e){ this.left = e.pageX; this.top = e.pageY; }.bind(this), false); } }

---

est plus propre car tu testes une fois pour toute (faudrait quand même tester sur Safari en tout cas marche IE,FF,Opéra)

Pour ce qui est du tableau d'images l'idée est de pouvoir créer une image seulement si elle existe pas. Avec un truc du style (j'ai regroupé obj avec img et renommé img en image pour éviter les conflits avec le DOM) :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<head> <script>   Function.prototype.bind = function(object) { var __method = this; return function() { return __method.apply(object, arguments); } } function souris(){ this.top = 0; this.left = 0; if(document.attachEvent) { document.attachEvent('onmousemove', function(e){ this.left = event.x + document.body.scrollLeft; this.top = event.y + document.body.scrollTop; }.bind(this)); } else if(document.addEventListener) { document.addEventListener('mousemove', function(e){ this.left = e.pageX; this.top = e.pageY; }.bind(this), false); } }   function image(id) { this.id=id;   this.chgSource = function(source){ document.getElementById(this.id).src=source; }   this.affiche = function(){ document.getElementById(this.id).style.display="block"; }   this.cache = function(){ document.getElementById(this.id).style.display="none"; }   this.chgPos = function(top,left){ document.getElementById(this.id).style.top=top+"px"; document.getElementById(this.id).style.left=left+"px"; }   this.posSouris = function(){ this.chgPos(souri.top,souri.left); } }   function getImage(id) { id = 'img' + id; if(!imgs[id]) { // Création de l'image DOM img = document.createElement('img'); img.id = id; img.style.position = 'absolute'; document.body.appendChild(img); // etc J'imagine que t'as déjà fais une fonction pour tout ca   imgs[id] = new image(id); imgs[id].chgSource("../image/carte magic/" + id +".jpg"); } return imgs[id]; }     var souri = new souris(); var imgs = new Array;   </script> </head> <body> <table><tr><td>rezerzerezrezrzer</td> <td id="td276" onmouseout="getImage(this.id).cache();" onmouseover="getImage(this.id); getImage(this.id).posSouris(); getImage(this.id).affiche();" colspan="1">-----</td> </tr></table> </body>

---

Soluce plus propre, stocker l'objet DOM dans ta classe Object comme ca t'évites tous les document.getElementById().
Encore mieux mais je ne sais pas si compatible partout à l'heure actuelle, tu redéfinis tes méthodes directement dans l'objet DOM img via l'objet prototype.

Au final recréer l'image à chaque fois reste le plus simple et je pense pas qu'il y ait trop de différence de temps à l'exécution.

Merci, je teste tout cela ce week-end et je reviens lundi

Bon week-end

Re,

j'ai rajouté le xxx.style.xxx et le test que tu as mis mais cela ne fonctionne toujours pas.

Par contre j'ai essayé cela <body onload="souri = new souris()"> mais cela ne marche pas il me dit que l'objet souri n'existe pas.

Pour avoir un exemple de mon site, j'ai mis ma version sur ifrance, c'est un peu lent, c'est horrible (j'ai pas encore attaqué la partie graphique juste la technique) mais cela te permettra peut être de mieux cerner mon probléme)

Voici l'adresse http://testdragonfly.ifrance.com/

sur la premiére page, clique sur entrez et sur la gauche quand tu passe la souris sur le nom des cartes, une carte s'affiche en haut a gauche (faut attendre 5-10 sec c'est trés long => en même temps serveur gratuit donc)

EDIT : Sous IE je ne sais pas quel miracle mais ca n'affiche pas tout, et avec IE toolbar developer ca ne m'avance pas beaucoup plus... Si quelqu'un voit pourquoi eventuellement