fonction en dynamique dans script orienté objet

bonjour à tous,
je ne parviens pas à ajouter une fonction
en dynamique dans "script orienté objet" :

Ton plus gros problème provient de ces lignes :

this.nom.setAttribute
("onmouseover", function() { this.coul(this.ove); } ) ;
this.nom.setAttribute
("onmouseout", function() { this.coul(this.out); } ) ;

D'une part, cette écriture n'est pas conforme aux standards et
n'est comprise que par IE mais on verra ça après...
D'autre part tu t'empatouilles dans l'utilisation de this !
this dans ta définition de l'objet correspond à l'objet mais
au moment du onmouseover ou onmouseout, this désigne l'élément
ayant provoqué l'évènement, et pas l'encapsulation que tu en fais.

Pour contourner le problème tu es obligé de créer une closure,
c'est à dire créer une propriété privée ou interne à l'objet et
l'employer dans une définition de fonction qui sera utilisée
à un moment où les propriétés de l'objet ne sont pas disponibles :

var _self = this;
this.nom.setAttribute
("onmouseover", function() { _self.coul(_self.ove); } ) ;
this.nom.setAttribute
("onmouseout", function() { _self.coul(_self.out); } ) ;

Le problème est que cette écriture n'est pas conforme parce que
les spécifications disent que setAttribute a deux arguments chaînes !
(Je sais IE ne sait pas le faire et accepte cette écriture-ci).

this.nom.setAttribute
("onmouseover", " _self.coul(_self.ove);") ;

Fx et autres Opera vont hurler que _self n'est pas défini, puisque
la closure n'existera pas : il n'y a pas de définition d'une fonction
à l'intérieur de l'objet !

Rassure-toi il existe un moyen licite de s'en sortir, utiliser les
fonctions du DOM 0 ou 1 :

this.nom.onmouseover =function(){ _self.coul(_self.ove);};
this.nom.onmouseout =function(){ _self.coul(_self.out);};

et là, la closure étant réalisée, ça fonctionne partout (enfin
pas IE3 ou NC4 ;-) ) !

var trt=new fnct(frm.txt,frm.txt.style.backgroundColor);

Euh ! ça c'est caca. C'est pour l'exemple, je suppose que tu écris
autrement avec des document.getElementById() ou des
document.forms["frm"].elements["txt"] ou document.forms.frm.elements.txt !

HTH

--
Y.D.

rebonjour à tous,
j'ai nettement avancé (grâce à Y.D.),
merci encore à lui. Il me reste un
( pour l'instant ! ) souci :
======================================= <textarea name="sp"
id="sp"
style=" background-color:#FFFF00;
width:300;
height:200px; ">
</textarea>
<script type="Text/JavaScript">
function deb(zone)
{
this.nom=document.getElementById(zone);
this.ieúlse; /*@cc_on this.ie = true; @*/
lui=this;
if (!this.ie)
{
document.captureEvents(Event.MouseMove);
this.nom.onmousemove=lui.Deplace;
}
else {
this.nom.onmousemove=function(){lui.Deplace();};
}
}
deb.prototype.Deplace=function(evt)
{
if (this.ie)
{
window.status=event.y+" / "+event.x;
}
else {
window.status=evt.clientY+" / "+evt.clientX;
}
window.status+=" "+this.nom; // ####????####
}
var trt=new deb("sp");
</script>
======================================= dans la fonction Deplace, this.??? déclarés dans
la fonction deb, sont "non définis" ( uniquement
avec FF ). Comment faire "proprement" ?
merci d'avance. @+

rebonjour à tous,
j'ai nettement avancé (grâce à Y.D.),
merci encore à lui. Il me reste un
( pour l'instant ! ) souci :

à tout hasard :

<script type="Text/JavaScript">

ieúlse; /*@cc_on this.ie = true; @*/

function deb(zone)
{
this.nom=document.getElementById(zone);
var lui=this;
if (!ie)
{
document.captureEvents(Event.MouseMove);
this.nom.onmousemove=lui.Deplace;
}
else {
this.nom.onmousemove=function(){lui.Deplace();};
}
}

deb.prototype.Deplace=function(evt) {
var e = evt || window.event;
window.status= ie? e.y+" / "+e.x :
e.clientY+" / "+e.clientX;
window.status+=" "+this.nom; // ####????####
// essayer (ss tte réserve et des fois que ...) :
if(!(!e.nom))
window.status += ' -- variante : '+e.nom;
return true;
}

var trt=new deb("sp");
</script>


ce serait peut-être mieux plus propre
(sans s'intéresser à IE particulièrement) :

deb.prototype.Deplace=function(evt) {
var e = evt || window.event;
window.status= e.y?
e.y+" / "+e.x :
e.clientY?
e.clientY+" / "+e.clientX :
'X et Y inconnus ';
window.status+=" "+this.nom; // ####????####
// essayer :
if(!(!e.nom))
window.status += ' -- variante : '+e.nom;
return true;
}

======================================= > dans la fonction Deplace, this.??? déclarés dans
la fonction deb, sont "non définis" ( uniquement
avec FF ). Comment faire "proprement" ?
merci d'avance. @+

--
Stephane Moriaux et son [moins] vieux Mac

sans s'occuper d'Internet Explorer ( puisque
le problème(?) est uniquement sous FireFox ) :
======================================= <textarea name="sp"
id="sp"
style=" background-color:#FFFF00;
width:300;
height:200px; ">
</textarea>
<script type="Text/JavaScript">
function deb(zone)
{
this.nom=document.getElementById(zone);
var lui=this;
document.captureEvents(Event.MouseMove);
this.nom.onmousemove=lui.Deplace;
}
deb.prototype.Deplace=function(evt)
{
window.status= evt.clientY+" / "+evt.clientX+" = "+evt.nom;
}
var trt=new deb("sp");
</script>
======================================= toujours undefined.
merci de la réponse, d'autres idées ? ( si j'ai suivi
la 1ère recommandation ). @+

sans s'occuper d'Internet Explorer ( puisque
le problème(?) est uniquement sous FireFox ) :
======================================= > <textarea name="sp"
id="sp"
style=" background-color:#FFFF00;
width:300;
height:200px; ">
</textarea>
<script type="Text/JavaScript">
function deb(zone)
{
this.nom=document.getElementById(zone);
var lui=this;

je ne sais pas si cette ligne est utile ?

document.captureEvents(Event.MouseMove);
this.nom.onmousemove=lui.Deplace;
}
deb.prototype.Deplace=function(evt)
{

et en gardant ici :
var evt = evt || window.event;
?

window.status= evt.clientY+" / "+evt.clientX+" = "+evt.nom;
}
var trt=new deb("sp");
</script>
======================================= > toujours undefined.
merci de la réponse, d'autres idées ? ( si j'ai suivi
la 1ère recommandation ). @+

mais tu obtiens bien les X et Y en barre d'état ?

si oui,
et que veux-tu avoir en plus comme complément dans ce message ?

à mon idée :
au mieux 'this.nom' désigne le textarea,
au pire çà désigne la fenêtre.
Et alors qu'en veux-tu ?
- value ?
- name ?
- id ?
- tagName
- etc de ses attributs this.nom.tagName

Si c'est l'event que tu veux avoir :
à quoi bon? c'est mousemove comme tu lui as expliqué.


De toutes façons la gestion des événements ce n'est pas de la tarte
en anglais :
http://www.quirksmode.org/js/introevents.html
en français :
http://www.aidejavascript.com/article143.html

--
Stephane Moriaux et son [moins] vieux Mac

mais tu obtiens bien les X et Y en barre d'état ?
oui.

si oui, que veux-tu avoir en plus comme complément dans ce message ?
pas un problème de "message", ici, ce n'est qu'un exemple...

mais comment accéder à l'ensemble de "this.???" définis dans la
fonction principale ? comme prévu dans une fonction .prototype ?
j'ai "résolu" (si on veut) en passant par une variable
globale, ce qui est un comble pour ce style de script.
======================================= <textarea name="sp" id="sp"
style=" background-color:#FFFF00;
width:300; height:200px;" >Exemple</textarea>
<script type="Text/JavaScript">
function deb(zone)
{
this.nom=document.getElementById(zone);
document.captureEvents(Event.MouseMove);
window["Lui"] = this;
this.nom.onmousemove=window["Lui"].Deplace;
}
deb.prototype.Deplace=function(evt)
{
window.status= evt.clientY+" / "+evt.clientX+" = "+window["Lui"].nom;
}
var trt=new deb("sp");
</script>
======================================= mais ce n'est pas "normal", on devrait pouvoir
utiliser this.??? non ? @+

mais comment accéder à l'ensemble de "this.???" définis dans la
fonction principale ? comme prévu dans une fonction .prototype ?
j'ai "résolu" (si on veut) en passant par une variable
globale, ce qui est un comble pour ce style de script.

Variable qui n'existera qu'en un seul exemplaire... Chaque objet
écrasera la précédente valeur à sa création !

mais ce n'est pas "normal", on devrait pouvoir
utiliser this.??? non ? @+

Oui !

Plutôt que de longues explications un exemple à décortiquer et
si des questions viennent après on essaiera d'y répondre...

<textarea name="sp"
id="sp"
style=" background-color:#FFFF00;
width:300;
height:200px; ">
</textarea>
<div id="w"></div>
<script type="Text/JavaScript">
temoin = document.getElementById("w");
function deb(zone)
{
this.nom=zone;
this.elt=document.getElementById(zone);
var lui=this; /*pas oublier var sinon on définit une globale*/
this.elt.onmousemove=function(e){lui.Deplace(e);};
}

deb.prototype.Deplace=function(evt){
if (!evt && event) /*IE*/ {
evt=event;
temoin.innerHTML=evt.y+" / "+evt.x;
}
else if(evt && evt.clientX) /* DOM2 */{
temoin.innerHTML=evt.clientY+" / "+evt.clientX;
}
temoin.innerHTML+= " - " + this.nom + " - " + this.elt;
}

// Si c'est indispensable sa place est dans le prototype non ?
deb.prototype.ie=function(){
var ieúlse; /*@cc_on ie = true; @*/ return ie;}();

var trt=new deb("sp");
</script>

re HTH

--
Y.D.

Variable qui n'existera qu'en un seul exemplaire
c'était l'un des soucis, entr'autres

this.elt.onmousemove=function(e){Lui.Deplace(e);};
et tout baigne.

merci encore et à nouveau, mais je reviendrais. @+