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