[POO] Animation : developpement poo pedagogique

Version imprimable

06/06/2009, 14h23
crazykangourou

[POO] Animation : developpement poo pedagogique

Bonjour,

Voilà, j'utilise le javascript depuis quelques années déjà.
Maintenant, je me remets en question, car je l'utilise de plus en plus. Alors j'aimerai l'utiliser BIEN, c'est à dire utiliser le concept objet ainsi que la méthode non intrusive, c'est à dire ne pas mettre de javascript en ligne (tout dans les fichiers et on ajoute le javascript sur les éléments au chargement de la page).
J'ai donc fait pas mal de recherches pour commencer à programmer proprement.

Je voulais apprendre en implémentant un petit exemple, mais voilà, je me trouve sec, je pense que c'est un automatisme à prendre, mais je ne l'ai pas encore, pourtant, je connais bien le concept objet (C++,Java et PHP).

Entrons dans le vif du sujet :
Je vous décrit ce que je voudrais obtenir :
1 - Une page web avec une image
2 - Au survol de la souris sur l'image, celle ci grandit visuellement et progressivement tant que la souris se trouve sur l'image (donc utilisation de onMouseOver et setTimeout ou setInterval et d'une fonction de redimensionnement de l'image)
3 - Lorsque la souris quitte l'image, celle ci reprend progressivement sa taille d'origine avec le même effet visuel et progressif (donc utilisation de onMouseOut et setTimeout ou setInterval et clearTimeOut pour arreter l'effet de grandissement et arreter le timer dans l'autre sens et d'une fonction de redimensionnement de l'image)

De manière procedurale, "tout est simple", il suffit de faire une fonction redimImage, utiliser une variable global pour le timer qui sera visible pour faire grandir l'image et arreter cet agrandissement au onMouseOut.

Je voudrais utiliser le concept objet :
- Faire une classe Timer qui me permet d'appeler une fonction avec un intervalle de temps, comme cette belle classe ici

Le problème que je rencontre et les questions que je me pose sont les suivants :
- comment fait on pour instancier et utiliser un objet sur les évenements prédéfinit (onMouse..., onClick etc...) qui doit être commun sur les évènements onMouseOver et onMouseOut, notament pour arreter le timer dans notre exemple. Autrement dit comment faire pour que les evenements onMouseOver et onMouseOut utilisent le même objet et connaissent à chaque instant les champs et leurs états/modifications au sein de l'objet.

Merci de m'avoir lu.

PS : arpès avoir écrit mon cahier des charges, je vais essayer de remplir ma mission. ;)
06/06/2009, 14h50
crazykangourou

Je rencontre aussi un autre problème : c'est comment passer des variables à mes fonctions dans le timer car la méthode start de ma class ne prend pas d'arguments
06/06/2009, 15h00
nod__

J'ai pas de solution toute faite à donner, mais puisque le fond du sujet est une remise en question, j'ai quelques liens très importants à propos de javascript.

Un point sur le javascript en général : http://javascript.crockford.com/javascript.html
il y a des liens vers les problèmes d'objets à la fin de l'article.

et tout ce qui se trouve sur cette page : http://javascript.crockford.com/
il y a même plein de vidéos de gens très compétants dans leurs domaine : http://developer.yahoo.com/yui/theater/

Le modèle objet de JS est completement différent de C ou Java bien que ça puisse y ressembler énormément. Si il y a une réflexion globale sur le langage, les articles de Douglas Crockford (le JSON c'est de lui) sont incontournables.

En ce qui concerne les autres problèmes je pense qu'un peu de documentation sur les closures en javascript peut faire avancer le schmilblik.

Parler de classes pour le JS peut être déroutant. Il y a des constructeurs (qui jouent le role des classes dans d'autres langages) et des objets mais certainement pas de classes. Parler de classes en js induit que l'on parle d'un modèle objet classique, ce qui n'est pas le cas.
(mon dieu, je sens que ça va couper du cheuveux en 4 sur ce paragraphe, pour ma défense, voir l'article de Doug. Classical Inheritance in JavaScript et surtout lire l'encadré noir tout en bas).

Merci pour les liens je regarde tout de suite.

Sinon, voilà un petit exemple de code qui commence à ressembler à de la poo :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script language="JavaScript">
// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(); 
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};
function redim()
{
	document.getElementById('imagetest').width=document.getElementById('imagetest').width+1;
}
var obj = new Timer();
obj.Interval = 100;
obj.Tick = redim;
 
</script>
<img src="00056.jpg" id="imagetest" onMouseOver="obj.Start();" onMouseOut="obj.Stop();" />

Manque plus qu'à trouver comment on fait si ma fonction redim avait besoin d'argument et de ne plus être intrusif.

06/06/2009, 15h14
nod__
Code:

1 2 3 4 5 function redim (param) {alert (param);} obj.Tick = redim; // et c'est immédiat obj.Tick("mon paramètre"); // affiche : mon paramètre
ou alors j'ai loupé un truc ?

Par contre les new Boolean(true); c'est pas super super, c'est mieux d'uiliser les littéraux en Javascript (en partie parce que la construction new Constructeur() rappele drolement le modèle classique, ce qui peut porter à confusion).

niveau vidéos je conseille celles de Douglas crockford sur le javascript évidement, on y apprend énormément.

( edit )
Mais il faut que la fonction contenu dans "redim" soit disponible à tous les objets issus de "Timer" ? si c'est le cas il y a quelque chose de "fait pour" :
Code:

1 2 3 4 5 // plus haut on défini Timer function redim (param) {/* la fonction */} Timer.prototype.Tick = redim; // Tick est accessible à tous les objets issus du constructeur "Timer".

Par ce samedi pluvieux, il ne reste plus que ca a faire ;)

Merci nod__ de ta participation.
Je ne connaissait pas le coup de :

Code:

1
2
3
4
5
function redim (param) {alert (param);}
obj.Tick = redim;
 
// et c'est immédiat
obj.Tick("mon paramètre"); // affiche : mon paramètre

Effectivement si j'ai besoin de redim dans tout mes objet, à ce moment là, je ferai un classe fille spécifique qui hériterait de Timer et que j'appelerai RedimVisuel et où j'ajouterai la méthode redim. Hop allons voir l'héritage de classe en JS ;

De plus, j'ai eu un problème avec la propriété Enable :
si j'écris

Code:

if(obj2.Enable==true){obj2.Stop();};obj.Start(400);

je recupere bien mes etats true inversement false.
mais si je fait

Code:

if(obj2.Enable){obj2.Stop();};obj.Start(400);

la condition obj2.Enable est toujours vrai.
Est ce que c'était ce que tu voulais dire ?

J'essaie de compliquer les choses en demandant à la sortie de ma souris que l'image rapetisse jusqu'à une certaine largeur.
Et qu'on puisse tout recommencer.

Voici le code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
 
<script language="JavaScript">
// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function(variables)
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(variables); 
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};
function redim(widthMax)
{
	if(document.getElementById('imagetest').width<widthMax)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width+1;
}
function redimMoins(widthMin)
{
	if(document.getElementById('imagetest').width>widthMin)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width-1;
}
var obj = new Timer();
obj.Interval = 100;
obj.Tick = redim;
 
var obj2 = new Timer();
obj2.Interval = 100;
obj2.Tick = redimMoins;
 
</script>
<img src="00056.jpg" id="imagetest" onMouseOver="if(obj2.Enable==true){obj2.Stop();};obj.Start(400);" onMouseOut="obj.Stop();obj2.Start(20);" />

@nod__

J'ai essayé ta méthode pour le passage de paramètre, ça n'a pas l'air de marcher, ai je loupé un truc ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
 
<script language="JavaScript">
// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(); 
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};
function redim(widthMax)
{
	if(document.getElementById('imagetest').width<widthMax)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width+1;
}
function redimMoins(widthMin)
{
	if(document.getElementById('imagetest').width>widthMin)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width-1;
}
var obj = new Timer();
obj.Interval = 100;
obj.Tick = redim;
obj.Tick(400);
 
var obj2 = new Timer();
obj2.Interval = 100;
obj2.Tick = redimMoins;
obj2.Tick(20);
 
</script>
<img src="00056.jpg" id="imagetest" onMouseOver="if(obj2.Enable==true){obj2.Stop();};obj.Start();" onMouseOut="obj.Stop();obj2.Start();" />

06/06/2009, 16h12
nod__

Code:

if(obj2.Enable)

Que ça soit toujours true c'est normal. si tu fais obj2.Enable = new Boolean(false); essaie

Code:

alert(typeof obj2.Enable);

Bam ça te donne "object" or dans une condition, un objet est évalué comme quelque chose de "true". C'est pour ça qu'il ne faut pas utiliser new Boolean ici. sinon jamais ça marche comme tu veux. L'article sur lequel tu t'es basé est dans l'erreur.

Ensuite les redim ne marchent pas car element.with ne modifie pas la taille de l'objet, mais element.style.width, si. Attention à ne pas oublier les unités.

Si les redim marchent si je passe le paramètre à la méthode start comme dans le code si dessous.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
 
<script language="JavaScript">
// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function(variables)
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(variables); 
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};
function redim(widthMax)
{
	if(document.getElementById('imagetest').width<widthMax)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width+1;
}
function redimMoins(widthMin)
{
	if(document.getElementById('imagetest').width>widthMin)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width-1;
}
var obj = new Timer();
obj.Interval = 10;
obj.Tick = redim;
 
var obj2 = new Timer();
obj2.Interval = 10;
obj2.Tick = redimMoins;
 
</script>
<img src="00056.jpg" id="imagetest" onMouseOver="if(obj2.Enable==true){obj2.Stop();};obj.Start(400);" onMouseOut="obj.Stop();obj2.Start(20);" />

Autrement dit width fonctionne bien sur mon image.

Mais le passage de paramètre comme tu le mentionne ici ne marche pas chez moi

Code:

1
2
3
4
5
6
 
function redim (param) {alert (param);}
obj.Tick = redim;
 
// et c'est immédiat
obj.Tick("mon paramètre"); // affiche : mon paramètre

Voici le code qui me faire dire ça

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<script language="JavaScript">
// Declaring class "Timer"
var Timer = function()
{        
    // Property: Frequency of elapse event of the timer in millisecond
    this.Interval = 1000;
 
    // Property: Whether the timer is enable or not
    this.Enable = new Boolean(false);
 
    // Event: Timer tick
    this.Tick;
 
    // Member variable: Hold interval id of the timer
    var timerId = 0;
 
    // Member variable: Hold instance of this class
    var thisObject;
 
    // Function: Start the timer
    this.Start = function()
    {
        this.Enable = new Boolean(true);
 
        thisObject = this;
        if (thisObject.Enable)
        {
            thisObject.timerId = setInterval(
            function()
            {
                thisObject.Tick(); 
            }, thisObject.Interval);
        }
    };
 
    // Function: Stops the timer
    this.Stop = function()
    {            
        thisObject.Enable = new Boolean(false);
        clearInterval(thisObject.timerId);
    };
 
};
function redim(widthMax)
{
	if(document.getElementById('imagetest').width<widthMax)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width+1;
}
function redimMoins(widthMin)
{
	if(document.getElementById('imagetest').width>widthMin)
		document.getElementById('imagetest').width=document.getElementById('imagetest').width-1;
}
var obj = new Timer();
obj.Interval = 100;
obj.Tick = redim;
obj.Tick(400);
 
var obj2 = new Timer();
obj2.Interval = 100;
obj2.Tick = redimMoins;
obj2.Tick(20);
 
</script>
<img src="00056.jpg" id="imagetest" onMouseOver="if(obj2.Enable==true){obj2.Stop();};obj.Start();" onMouseOut="obj.Stop();obj2.Start();" />

06/06/2009, 17h35
nod__
t'aurais pas oublier de passer des paramètres de taille dans le deuxième cas justement ? Il va pas pouvoir les deviner tout seul ^^. Tu le fais du JS mais ce n'est sauvegardé nul part.

Puisque tu fais du javascript, pourquoi ne pas mettre les évènements par javascript directement au lieu de les mettre en dur dans ton HTML ? C'est beaucoup mieux, tout le js à un endroit, tout le HTMl à un autre. Là par exemple tu aurais pu voir l'oubli directement.

profite en pour remplacer :
Code:

1 2 this.Enable = new Boolean(false);
par

Code:

this.Enable = false;

T'a un problème avec ta variable "timerId". Ce n'est pas un membre de ton objet or toi tu l'utilise en temps que propriété de ton objet. Ça marche, mais c'est pas cohérent.

( edit ) je suis trop fatigué, je comprends plus le script. HS pour aujourd'hui.
06/06/2009, 21h04
crazykangourou

@nod__
Merci de m'avoir suivit jusque là ;)

Citation:

Envoyé par nod__

t'aurais pas oublier de passer des paramètres de taille dans le deuxième cas justement ? Il va pas pouvoir les deviner tout seul ^^. Tu le fais du JS mais ce n'est sauvegardé nul part.

Je ne pense pas avoir oublier de passer de paramètres (dans le redim?), où faudrait il que je les passe encore, dans le Start?

Pour séparer le code javascript du html, c'est quand j'aurais fait tout mes tests et bien assimilé que j'enlèverai le code intrusif et donc mettrais tous les js inline dans un fichier à part et je les "attacherai" aux évènements au chargement de la page, mais chaque chose en sont temps, sinon trop de chose en même temps et après on n'a plus envie.

A demain peut être:ccool: