[POO] Objet en JavaScript

Bonjour,

Je rencontre un probléme sur la création d'un objet perso "popup". Plus précisement, j'ai créé un objet(code ci-dessous) et je n'arrive pas à partager mes variables dans la totalité des méthodes de mon objet. Exemple, mon objet posséde une variable "url" créer dans mon constructeur. J'arrive à l'utiliser dans mes "getters" ainsi que dans ma méthode "createPopup()" mais impossible de la récupérer dans mes autres méthodes(boutonPresse(); boutonRelache etc...). Question: pourquoi les variables définies dans mon constructeurs ne sont-elles pas visibles dans toute mes méthodes? Merci

/* Constructeur */
function Popup(title,url,x,y,w,h) {
//Attributs
this.title = title;
this.url = url;
this.x = x; //Position du popup
this.y = y;
this.xMouse = 0; //Position de la souris
this.yMouse = 0;
this.origine_x; //Deplacement
this.origine_y;
this.w = w;
this.h = h;
this.clicEnCours = false;
this.createPopup();
}

/* Methods Getters */
Popup.prototype.getTitle = function() {
return this.title ;
}
Popup.prototype.getX = function() {
return this.x;
}
Popup.prototype.getY = function() {
return this.y;
}
Popup.prototype.getW = function() {
return this.w;
}
Popup.prototype.getH = function() {
return this.h;
}

/* */
Popup.prototype.createPopup = function() {
//A) Creer une div en position absolute
var div = document.createElement("div");
div.id = "popup";
div.style.position = "absolute";
div.style.width = this.w;
div.style.height = this.h;
div.style.top = this.y;
div.style.left = this.x;
div.style.background = "red";
//B) Creer le titre de la popup
var title = document.createElement("div");
var textNode = document.createTextNode(this.title);
title.style.background = "gray";
//C) Creer l'Iframe
var iframe = document.createElement("iframe");
iframe.src = this.url;
iframe.style.width = "100%";
iframe.style.height = "100%";
//D) Ajout des elements dans la page courante
title.appendChild(textNode);
div.appendChild(title);
div.appendChild(iframe);
document.body.appendChild(div);
alert(this.title);
//E) Gestion des evenements
document.body.onmousemove = this.position;
title.onmousedown = this.boutonPresse;
title.onmouseup = this.boutonRelache;
}

Popup.prototype.boutonPresse = function (){

this.origine_x = this.xMouse - this.x;
this.origine_y = this.yMouse - this.y;
this.clicEnCours = true;
}

Popup.prototype.boutonRelache = function ()
{
this.origine_x = this.x - this.xMouse;
this.origine_y = this.y - this.yMouse;
this.clicEnCours = false;
}

Popup.prototype.position = function (e) {

this.xMouse = event.x + document.body.scrollLeft;
this.yMouse = event.y + document.body.scrollTop;
//Deplacement si clickEnCours
if (this.clicEnCours)
{
this.xMouse = this.x - this.origine_x;
this.yMouse = this.y - this.origine_y;
document.getElementById("popup").style.left = this.xMouse;
document.getElementById("popup").style.top = this.yMouse;
}

J'avais le même problème.
C'est à cause de cette ligne

Code:

---

title.onmousedown = this.boutonPresse;

---

Ce qui revient à faire

Code:

---

1 2 3 4 5 6

title.onmousedown = function (){   this.origine_x = this.xMouse - this.x; this.origine_y = this.yMouse - this.y; this.clicEnCours = true; };

---

Mais sans la référence à ton Objet. Enfin je crois :), et je n'ai jamais trouvé de solution :(

Le code m'a l'aire tout bon
j'utilise les "objets" JS autant que ce peux.
eut être un problème d'appel?
A tout hazard, les objet sont bien créer sous la forme :

Code:

---

1 2	var objMaPopup = new Popup(title,url,x,y,w,h);

---

Bon avant tout, merci pour vos réponses précieuses.
Effectivement je suis arrivé à la même conclusion, c'est la ligne "title.onmousedown = this.boutonPresse; " qui me pose un probléme. Effectivement cette ligne n'est pas un appel classique d'une méthode mais plutôt l'association d'une méthode à un attribut(ou un truc de ce genre).
En ce qui concerne l'instanciation de mon objet il est bien de la forme :

Code:

---

onclick="javascript:var popup = new Popup('popupAddAssociation','popupAddAssociation.do','200px','200px','650px','400px');

---

J'espére qu'un petit génie va pouvoir nous renseigner :) En attendant, je veux bien un exemple de ta méthode intermédiare "systemofaxav".

Je vous recommande la lecture de cet article concernant l'utilisation de this dans des événements. En gros, comme systemofaxav l'a fait remarquer, il s'agit de savoir si tu copies ta fonction ou si tu fais une référence à celle-ci. Si tu la copies, ton this se réfère à l'élément ayant déclenché l'élément ; si tu la passes par référence, ton this devrait se référer à l'objet PopUp, comme on s'y attend.

D'après ledit article, les codes suivants font des copies de la fonction :

Code:

---

1 2 3 4

element.onclick = doSomething element.addEventListener('click',doSomething,false) // Existe partout sauf sous IE element.onclick = function () {this.style.color = '#cc0000';} <element onclick="this.style.color = '#cc0000';">

---

Mais ceux là font une référence (ce que tu souhaites, à priori) :

Code:

---

1 2 3

element.onclick = function () {doSomething()} element.attachEvent('onclick',doSomething) // Existe seulement sous IE <element onclick="doSomething()">

---

Comme tu vois, c'est assez sioux. Cela dit ça nous avance pas des masses, parce que si tu fais quelque chose dans ce genre :

Code:

---

document.body.onmousemove = function() { this.position };

---

Si tu fais quelque chose comme le code ci-dessus, ta fonction sera quand même copiée, et pas référencée. L'autre solution c'est d'enregistrer tout tes événements en inline dans le XHTMl, mais ce n'est évidemment ni élégant ni pratique.

Bref, je t'avance pas vraiment, mais j'espère que ça t'éclaire un peu.

EDIT : Il semble que dans le cas d'un référencement de la fonction, this se réfère à l'objet window courant... et donc pas à ton PopUp. Dans ce cas l'enregistrement d'événements vers un objet serait impossible ?!? Il doit exister un workaround astucieux...

Euh... je sais pas si ca peut aider, mais j'ai récement fait un projet qui me semble semblable.

Allez regarder, c'est dans Page Source...
Peut-être que vous y trouverai votre bonheur et/ou la solution à votre pb !

Bonne chance d'avance

comme ça a été dit le this dans ton cas de figure correspondra à l'élément qui supporte l'évènement.

une astuce de ce type pourrait convenir :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

title.monInstance=this; // l'instance en cours est mis dans un propriété de title title.onmousedown=Popup.boutonPresse; // la méthode passe en statique   ...   Popup.boutonPresse=function() {   instanceObj=this.monInstance; // récupération instanceObj.origine_x ...   }

---

tu peux aussi passer le nom de ton instance et utiliser eval() ...

pb : impossible dans ce cas de creer plusieur popup...
on pourrait adapter ton idée avec un array...

>pb : impossible dans ce cas de creer plusieur popup...

pourquoi ?

puisqu'alors tu vas remplacer l'ancien title.instanceOf...
enfait ce sont pas des vrais popup mais des div...

>puisqu'alors tu vas remplacer l'ancien title.instanceOf...

pas faux...

d'un autre côté à chaque appel de "title.onmousedown = this.boutonPresse;" on linkait title avec un seul objet ;)