Discussion :

[javan00b]

Bonjour j'ai un travaux pratique � remettre, je me suis dit pftttt javascript, le probleme c'est que faire du simili orient� objet semble plus d�routant que je ne l'aurai imagin�:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
function Card(img){
 
	this.img = new Object(img);
	this.faceDown = true;	
 
 
	Card.prototype.explode = function() {	
	if(this.faceDown){
		$($(img)).hide("explode", { pieces: 35}, 1000).attr("src", "images/1.png").show("explode",{ pieces: 35}, 1000);
		}
	}
}

j'apelle la fonction explode, la ligne jquery fonctionne tr�s bien, par contre this.faceDown est undefined...

comment je peut acc�der une variable d'instance � partir d'une de ces propres fonctions ?

apres 100 essaies de syntaxes diff�rentes je n'arrive pas a acc�der � faceDown... j'imagine que la variable n'est pas vraiment initilialiser ou quelque chose... comment je peux faire aider moi svp

merci d'avance...

[Bovino]

faire du simili orient� objet

Du simili orient� objet ?
JavaScript est un langage enti�rement orient� objet et il n'y a rien de simili l�-dedans... Il n'y a pas que l'orient� objet par classes dans la vie...

Concernant ton code, d�j�, c'est assez maladroit d'augmenter le prototype dans le constructeur, on pr�f�rera �crire

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
function Card(img){
 
	this.img = new Object(img);
	this.faceDown = true;
}	
 
Card.prototype.explode = function() {	
	if(this.faceDown){
		$($(img)).hide("explode", { pieces: 35}, 1000).attr("src", "images/1.png").show("explode",{ pieces: 35}, 1000);
	}
}

Ensuite, comment appelles-tu ce code ?
As-tu bien cr�� une instance de ton objet ?
Par exemple

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var myCard = new Card();
myCard.explode();

Enfin

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$($(img))

Comment dire... lol !

[javan00b]

Merci de ta r�ponse et...

d�sol� pour le

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$($(img))

je devais convertir mon objet DOM en jquery lol.

D'accord jai compris sa fonctionne pas tout a fait comme dans les languages avec des classes, je ne fait qu'une methode constructeur dans le vide avec mes variables � initialiser et ensuite mes methodes reli� � mon objet ne sont que des blocs function completement separ� du constructeur. Il n'y a pas d'imbriquation je pensais que le constructeur servais de classe en quelque sorte...

j'initialise dynamiquement sans nommage: new Card()
merci pour tes precisions, je refusais de faire du code spagetthi pour mon TP meme si sa ne fait que 2 mois que j'ai commenc� l'�cole et qu'on a pas vu l'orient� objet.

d�sol� si j'en ai offusqu� certain en disant que javascript �tait du simili orient�-objet

[Bovino]

d�sol� si j'en ai offusqu� certain en disant que javascript �tait du simili orient�-objet

Oh rassure-toi, tu n'es pas le seul � penser cela et je doute que tu t'aies fait cette opinion par toi-m�me...
Toujours est-il qu'une opinion trop souvent r�pandue et � tort veut que JavaScript soit un mauvais langage sans mod�le objet.
Que JavaScript ne soit pas parfait, tout le monde en convient, mais qu'il n'ai pas de mod�le objet est une aberration : encore une fois, ce n'est pas un mod�le par classes, mais c'est un mod�le objet � part enti�re quand m�me et tout aussi puissant.

Bon, il serait trop long et fastidieux de revenir sur tous les aspects de la POO en JavaScript (constructeur vs objet litt�ral par exemple ou m�thode d'objet vs prototype sans parler des notions d'h�ritage ou de visibilit� des variables).

Toujours est-il qu'un objet poss�de toujours un prototype, qui est ind�pendant de l'objet lui-m�me, c'est pourquoi il est plus propre de le d�finir � part. Ce prototype est lui m�me un objet, tu peux donc l'affecter en une fois comme tel

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
Card.prototype = {
    methode1: function(){...},
    methode2: function(){...},
    methode3: function(){...}
};

ou comme je l'ai fait en d�finissant des propri�t�s individuellement (m�thode utile pour augmenter un prototype existant).

Ensuite, pour se servir de cet objet, il faut en cr�er une instance (comme en PHP du reste...)

[javan00b]

Merci pour toute ces precisions, mais jai encore un petit soucis:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
 
function Card(faceDown){
this.faceDown = faceDown;	
}
 
Card.prototype = {
 
    explo: function(){
alert(this.faceDown);	
}
};

je bind de cette facon

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
 
for(var k=0; k < 24; k++){
				Game.card.push(new Card("true"));
				$($(document.images[k])).click(Game.card[k].explo);
			}

lorsque que je click sur mes cartes � l'ecran faceDown est undefined, je ne connais pas jquery asser mais j'imagines que mon probleme vient du fait que je melange du DOM et jquery un peu trop... je veux bind l'evenement click sur tout mes card qui se trouve dans un Array... ce qui est bizzare cest que lorsque je click l'alert me dit undefined mais si j'apelle manuellement:

Game.card[0].explo(); j'obtient le "true"...



quelqu'un � un id�e ?

[sekaijin]

encore une fois js est un langage � objet.
les objet ont donc des membres et des m�thodes.
lorsque tu fais $($(document.images[k])).click(Game.card[k].explo) tu ne fais pas tout a fait ce que tu crois ou que tu veux faire.

d�j� Jquery te masque certaines choses et �a rand la comprehention plus obscure. en javascript tout cour ton bout de code serait quelque chose comme document.getElementById(document.images[k]).click=Game.card[k].explo; et tu vois ici que tu fais une affectation.
tu affecte le membre clic de l'image.
pour �tre pr�cis c'est comme si tu d�finissait la m�thode click de l'image en lui donnant le code de la m�thode explo. (si tu as fais du c++ tu affect � click un pointeur sur la fonction explo)

tu vois clairement que l'immage n'a aucune r�f�rence � ton objet Game.card[k]du coup lorsque tu clique le code qui s'execute est alert(this.faceDown); mais c'est le membre de l'objet image this est donc une r�f�rence � l'image.
alert(document.getElementById(document.images[k]).faceDown);
Jquery est une belle lib mais pour d�buter je d�conseille de l'utiliser. elle trompe trop le d�veloppeur sur la vrais nature de ce qu'il fait

pour ce qui est du binding deux solution

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
for(var k=0; k < 24; k++){
  Game.card.push(new Card("true"));
  document.getElementById(document.images[k]).click=function () {Game.card[k].explo();}
}

et

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
for(var k=0; k < 24; k++){
  document.getElementById(document.images[k]).card = new Card("true");
  document.getElementById(document.images[k]).click=function (){this.card.explo();}
}

dans la premi�re tu as un tableau de Game card et tu appelle la methode explo d'un objet du tableau
dans la deuxi�me tu n'as plus de tableau mais chaque image est associ� � sa propre game card

pour moi la deuxi�me est celle qui est le plus proche de l'esprit du langage
la plus "objet". elle utilise les capacit�s des objets � s'enrichir de membres ou de m�thodes. elle �vite d'avoir des varaibles globales (comme ici l'objet Game) qui traine pour ceci ou cela. Mais les deux solution ont leurs avantages.

on peut mixer les deux si ont veut conserver le tableau et tout de m�me associer l'image et la carte

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
for(var k=0; k < 24; k++){
  Game.card.push(new Card("true"));
  document.getElementById(document.images[k]).card = Game.card[k].explo();
  document.getElementById(document.images[k]).click=function (){this.card.explo();}
}

A+JYT

[Bovino]

Pas grand chose � rajouter, si ce n'est que document.getElementById(document.images[k]) ne fonctionnera pas puisque document.images[k] n'est pas un id mais un objet de type HTMLElement

A part �a, d'accord aussi sur le fait d'�viter jQuery pour d�buter avec JavaScript (d'autant que l'utilisation que tu sembles en faire ne justifie � priori pas son utilisation), mais pour info

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$(document.images[k])

te sers � transformer l'objet images[k] en objet jQuery, donc

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

$($(document.images[k]))

ne sert strictement � rien : le $() le plus englobant �tant inutile !

[SylvainPV]

Je ne pense pas que jQuery soit vraiment le probl�me : avec ou sans il faut quand m�me comprendre les m�canismes de scope et les nombreux sens du mot-cl� this.

Esquiver le probl�me en passant des fonctions interm�diaires et en passant des variables � un scope plus englobant n'est pas une vraie solution, j'ai d�j� vu les d�g�ts que cela pouvait occasionner chez les d�butants : centaines de variables globales, conflits, effets de bord etc...

Et je d�conseille l'approche de sekaijin qui �tend les propri�t�s d'un �l�ment DOM. Les �l�ments DOM ont des tas et des tas de propri�t�s et m�thodes, dont la plupart des gens ne connaissent pas la moiti�. Le risque de conflit par erreur est trop fort.

Il vaut mieux augmenter l'abstraction sur l'objet (objet.elm = monDOMElement) et d�clarer une variable en closure ou utiliser un proxy (�quivalent de call/apply en jQuery):

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
 
for(var k=0; k < 24; k++){
   var card = new Card();
   card.elm = $(".image-"+k);
   Game.cards.push(card);
   card.elm.click( $.proxy( card.explo, card ) );
}

[sekaijin]

Je suis d'accord avec toi sur la possibilit� d'en richir l'objet Card mais dans ce cas je ferais plut�t quelque chose comme

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Card(faceDown, elem){
  this.faceDown = faceDown;	
  this.setElem(elem);
}
 
Card.prototype = {
  faceDown :null,
  elem:null,
  explo: function(){
    alert(this.faceDown);	
  },
  setElem: function(elem) {
    this.elm = elem;
    var scope = this;
    this.elm.click( $.proxy( this.explo, sope) );
  }
};

et ensuite

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
for(var k=0; k < 24; k++){
   Game.cards.push(new Card("true", $(".image-"+k)));
}

@Bovino
c'est pour �a que j'ai dit

ton bout de code serait quelque chose comme

A+JYT

[BaBeuH]

Salut,

J'ai cru comprendre que le dernier bout de code a �t� fait � "la va-vite", mais est-ce judicieux de mettre dans le prototype de Card une r�f�rence vers l'objet dom (elem) ? Cela signifierait que chaque objet Card poss�de le m�me objet elem ?

Mis � part �a, je rejoins SylvainPV sur l'approche de ne pas �tendre les propri�t�s de l'objet DOM, mais de pointer vers l'�l�ment DOM. Le tout (sauf la r�f�rence vers l'objet DOM en l'occurence) encapsul� dans le prototype pour �viter une trop grande empreinte m�moire (duplication inutile des fonctions getter, et setter par exemple), et je pense que l'on obtient une impl�mentation plut�t correcte.

A+

[Bovino]

mais est-ce judicieux de mettre dans le prototype de Card une r�f�rence vers l'objet dom (elem) ? Cela signifierait que chaque objet Card poss�de le m�me objet elem ?

Non.
Card est un constructeur, chaque instance de ce constructeur devra passer en param�tre l'objet DOM auquel il est rattach�.

[sekaijin]

mon propos dans ce bout de code fait � la va vite est de dire que si on fait porter � card une r�f�rence � l'�l�ment auquel il est associ� autant le faire dans le prototype et le constructeur que je le mettre dnas un code � part

je n'ai pas regard� pr�cis�ment s'il �tait correct
A+JYT

[BaBeuH]

Non.
Card est un constructeur, chaque instance de ce constructeur devra passer en param�tre l'objet DOM auquel il est rattach�.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
Card.prototype = {
  faceDown :null,
  elem:null,
  explo: function(){
    alert(this.faceDown);	
  },
  setElem: function(elem) {
    this.elm = elem;
    var scope = this;
    this.elm.click( $.proxy( this.explo, sope) );
  }
};

La d�claration "elem" dans le prototype est inutile dans ce cas, et peut m�me porter � confusion, non ?

[Bovino]

Ca permet de pr�ciser que l'objet Card poss�de une propri�t� elem, qui sera d�finie par le constructeur. Et comme elem est un param�tre du constructeur, chaque instance poss�dera une propri�t� elem distincte.

Ensuite, porter � confusion, pas vraiment, le fonctionnement est assez clair � la lecture du code.