Partage
  • Partager sur Facebook
  • Partager sur Twitter

Classe avec fonctions

Sujet résolu
21 octobre 2011 à 14:24:31

Bonjour à toutes et à tous,

je vous expose mon soucis. Je souhaitais approfondir mes connaissances en se qui concerne les classes JS. J'ai donc remodeler une fonction d'horloge en classe. Mais j'ai un petit soucis lors de son éxécution :( .

Voici ma classe :
function Heure() {
	//Récupérateurs
	Heure.prototype.getHTML = function(){
		return "<img src=\"images\\times.gif\" valign='middle'>  " + this.getHMS();
	}
	Heure.prototype.getHMS = function(){ 
		var d	= new Date; 
		return this.verif( d.getHours() ) +":"+ this.verif( d.getMinutes() ) +":"+ this.verif( d.getSeconds() ); 
	}
	//Méthodes
	Heure.prototype.verif = function( valeur ) {
		return ( valeur > 9) ? "" + valeur : "0" + valeur;
	}
	Heure.prototype.getLayoutOffsets = function(){
		var de = document.documentElement;
		var screenWidth	= window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
		var screenHeight = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
		return [screenWidth,screenHeight];
	}
	Heure.prototype.miseAjour = function(){
		var divHeure = document.getElementById("heure");
		with( divHeure ){
			innerHTML = this.getHTML();
			style.position = 'absolute';
			style.left = this.getLayoutOffsets()[0] - 100 + 'px';
			style.top = '15px';
		}
	}
	Heure.prototype.activer	= function(){
		this.miseAjour();
		setTimeout( this.activer, 1000 );
	}
}


Et voici le HTML sur lequel la classe influe :

<font id='heure' style='font-family:Arial;font-size:14px'></font>
<script type="text/javascript">
	var h = new Heure();
	h.activer();
</script>


Et voici le message d'erreur de la console :
Uncaught TypeError : Object [object DOMWindow] has no method 'miseAjour'
  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 15:37:25

Bonjour Birdy42,

Tout d'abord, merci d'avoir pris de ton temps pour avoir répondu.
Ensuite, je tiens à souligner que j'ai déjà lu ce sujet avant de poster le mien.
Pour finir, je n'en ai pas tiré aucune solution. Si elle y est, veux-tu bien me préciser où la trouver.

Cordialement,
Oumbra.
  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 16:05:23

Salut, dans setTimeout( this.activer, 1000 );, le this reference window, car setTimeout est une fonction de window, il faut que tu créé une variable qui reference le this représentant ton objet Heure.
Donc maintenant que je t'ai mis sur la piste tu devrait pouvoir régler ton probleme.
Si vraiment tu ne trouve pas hésite pas à redemander.

  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 16:35:48

Bonjour, ninlock !

Merci d'avoir répondu.
J'aimerais être éclairé. J'ai peur de ne pas très bien comprendre.
Il s'agirait de créer une fonction appelant l'instance de l'objet ? du style :
function test(){
this.activer();
}
  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 16:41:57

En fait tu fait juste ça:
Heure.prototype.activer	= function(){
this.miseAjour();
  var heure = this;
  setTimeout(function(){heure.activer()}, 1000 );
}

test ça et dit moi si c'est ok

EDIT : j'avais fait une petite erreur donc j'ai juste modifier mon code.
  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 18:22:39

Merci beaucoup,

Ça fonctionne correctement maintenant.
Mais j'aimerais savoir pourquoi ça ne fonctionné pas avec ma méthode ou plutôt pourquoi ça fonctionne avec la tienne ,
  • Partager sur Facebook
  • Partager sur Twitter
21 octobre 2011 à 19:08:59

C'est ce que j'ai expliqué dans le post précédent le this dans settimeout fait référence a l'objet javascript window, alors que var heure = this represente bien ton instance d'objet Heure car ta fonction est dans le prototype de l'objet Heure, donc en faisant une fonction anonyme qui fait appel a ta variable la référence est passé dans la fonction anonyme et donc fait référence à heure et pas a window.
  • Partager sur Facebook
  • Partager sur Twitter
22 octobre 2011 à 0:37:31

Je comprend mieux maintenant.

Je te remercie d'avoir pris de ton temps pour m'avoir répondu et expliqué.

Cordialement,
Oumbra
  • Partager sur Facebook
  • Partager sur Twitter