Création objet qui hérite de HTMLDivElement

**hybride11** · 21/10/2020, 21h35

Bonsoir,

je souhaiterais créer un objet 'Cube' qui hérite de l'objet HTMLDivElement et qui contient ses propres propriétés et méthodes en plus de celle de div .

dans les cours ils expliquent comment faire à partir d'objet simple définis soit même , mais je n'ai pas trouvé comment en créer un qui hérite de div .

j'explique pourquoi j'essaie cette manière . Jusqu'à maintenant j'avais crée un objet Cube qui contenait un objet div . Sauf que quand je crée dans une méthode un addEvenListener sur ce div je ne peux pas passer de paramètres
concernant les propriétés de l'objet Cube .

C'est possible avec Un setInterval mais pas avec un addEventListener . D'où l'idée si je crée un objet qui hérite de l'objet div , après il sera simple d'accèder aux autre propriétés , il suffira en effet d'utiliser une e.target.propritéduCube.

voici l'ancien code qui pose problème pour la partie addEventlistener

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
     function   Cube(){
   this.etat=0;
   this.xDepart=600;
   this.yDepart=300;
   this.xArrive=600;
   this.yArrive=300;
   this.objx=0;
   this.objy=0;
   this.angle=0;
   this.compteur=0;
   this.compteurBord=0;
   this.rayon=100;
   this.timer=null;
   this.mydiv=document.createElement('div');
   this.init=function(){  
                          this.mydiv.setAttribute('class','draggableBox');
                          article.appendChild(this.mydiv); 
 
 
 
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
 
                          this.mydiv.style.left=x_affiche+'px';
                          this.mydiv.style.top=y_affiche+'px';
                          this.etat=1;
 
                        //   var myfonction=function(){ this.etat=2;this.demarre();  };
                         //  this.mydiv.addEventListener('click',myfonction,false);          
                          this.etat=2;
                         this.demarre();
 
                         };
   this.demarre=function(){   	
                             var cube=this;
   	                       this.timer=setInterval(function(){
   	                       	                                 var etat=cube.donneEtat(); 
 
                                                             switch(etat) {
 
         	                                                                    case 2: cube.nouveauDepart();
         	                                                                           cube.avance();
         	                                                                           break;
         	                                                                    case 3 : cube.avance();
         	                                                                            break; 
         	                                                                    }           
 
 
                                                                },50,cube); 
 
 
 
                          };
   this.arret=function(){ if(this.etat!=0){clearInterval(this.timer)};this.etat=1; };
 
 
   this.nouveauDepart=function(){
   	     this.angle=getRandomInt(this.angle-10,this.angle+10);
     	     this.objx=Math.floor(Math.cos(this.angle*Math.PI/180)*this.rayon);
           this.objy=Math.floor(Math.sin(this.angle*Math.PI/180)*this.rayon);  
           this.xDepart=this.xArrive;
           this.yDepart=this.yArrive;   
           this.xArrive=this.xDepart+this.objx;
           this.yArrive=this.yDepart+this.objy;
           this.etat=3;
           this.compteur=0;           
        };
   this.avance=function(){ 
                          this.compteur=this.compteur+1;
                          var x_temp=this.xDepart+Math.floor(this.objx*this.compteur/10);
                          var y_temp=this.yDepart+Math.floor(this.objy*this.compteur/10);
                          var x_affiche=x_temp;
                          var y_affiche=600-y_temp;
 
                         if(x_affiche<=limitx_inf){ x_affiche=limitx_inf;this.etat=2;this.angle=0;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(x_affiche>=limitx_sup){ x_affiche=limitx_sup;this.etat=2;this.angle=180;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche<=limity_inf){ y_affiche=limity_inf;this.etat=2;this.angle=270;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche>=limity_sup){ y_affiche=limity_sup;this.etat=2;this.angle=90;this.xArrive=x_temp;this.yArrive=y_temp;}
 
                         this.mydiv.style.left=x_affiche+'px';
                         this.mydiv.style.top=y_affiche+'px';  
 
 
                          if (this.compteur==10) { this.etat=2; } 
   };     
   this.donneEtat=function(){return this.etat;};
 
 
 
 
}

et maintenant il faudrait que Cube hérite de HTMLDivElement comment faire ?

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
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
   function Cube(){
   
   this.etat=0;
   this.xDepart=600;
   this.yDepart=300;
   this.xArrive=600;
   this.yArrive=300;
   this.objx=0;
   this.objy=0;
   this.angle=0;
   this.compteur=0;
   this.compteurBord=0;
   this.rayon=100;
   this.timer=null;
   this.init=function(){  
                          this.setAttribute('class','draggableBox');
                          article.appendChild(this); 
                          
                          
                         
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
                          
                          this.style.left=x_affiche+'px';
                          this.style.top=y_affiche+'px';
                          this.etat=1;
                          
                        
                         this.addEventListener('click',function(e){ 
                               e.target.etat=1;
                               e.target.demarre();
                                                        
                         
                          },false);          
                         
                        
                         }; 



}
Cube.prototype=new   ?   ;

**hybride11** · 21/10/2020, 22h34

je crois avoir trouvé une piste . pour hériter de div ça donnerait un code de ce style ( qui fonctionne faut maintenant que je l'adapte à ce que je souhaite faire )

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
18
19
20
 
 
HTMLDivElement.prototype.etat=0;
HTMLDivElement.prototype.xDepart=0;
HTMLDivElement.prototype.init=function (etat,xd) {
                  this.etat=etat;
                  this.xDepart=xd;
 
               };
HTMLDivElement.prototype.donneEtat=function(){return this.etat;};
HTMLDivElement.prototype.donnexDepart=function () {return this.xDepart;};               
 
 
 
 
   var cube1=document.createElement('div');
   cube1.init(15,20);
   var cube2=document.createElement('div');
   cube2.init(45,50);
   titre.innerHTML=cube1.donneEtat()+" "+cube1.donnexDepart()+" "+cube2.donneEtat();

**hybride11** · 21/10/2020, 22h59

C'est bon j'ai trouvé ,ça fonctionne . Dans l'exemple de code ça me donne deux cubes independants . voici le code :

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
 
 
           HTMLDivElement.prototype.etat=0;
  HTMLDivElement.prototype.xDepart=600;
  HTMLDivElement.prototype.yDepart=300;
  HTMLDivElement.prototype.xArrive=600;
  HTMLDivElement.prototype.yArrive=300;
  HTMLDivElement.prototype.objx=0;
  HTMLDivElement.prototype.objy=0;
  HTMLDivElement.prototype.angle=0;
  HTMLDivElement.prototype.compteur=0;
  HTMLDivElement.prototype.rayon=100;
  HTMLDivElement.prototype.timer=null;
 
  HTMLDivElement.prototype.init=function(){  
 
                          this.setAttribute('class','draggableBox');
                          article.appendChild(this); 
 
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
 
                          this.style.left=x_affiche+'px';
                          this.style.top=y_affiche+'px';
                          this.etat=1;
                          this.addEventListener('click',function(e){ 
                                       e.target.etat=2;
                                       e.target.demarre(); },false);          
 
 
                         };
 
    HTMLDivElement.prototype.demarre=function(){   	
                                             var cube=this;
   	                                       this.timer=setInterval(function(){
   	                       	                                                  var etat=cube.donneEtat(); 
   	                                                                          switch(etat) {
         	                                                                                   case 2: cube.nouveauDepart();
         	                                                                                           cube.avance();
         	                                                                                            break;
         	                                                                                    case 3 : cube.avance();
         	                                                                                             break; 
         	                                                                                   }           
 
 
                                                                          },50,cube); 
 
 
 
                                              };
  HTMLDivElement.prototype.arret=function(){ if(this.etat!=0){clearInterval(this.timer)};this.etat=1; };
 
 
   HTMLDivElement.prototype.nouveauDepart=function(){
   	     this.angle=getRandomInt(this.angle-10,this.angle+10);
     	     this.objx=Math.floor(Math.cos(this.angle*Math.PI/180)*this.rayon);
           this.objy=Math.floor(Math.sin(this.angle*Math.PI/180)*this.rayon);  
           this.xDepart=this.xArrive;
           this.yDepart=this.yArrive;   
           this.xArrive=this.xDepart+this.objx;
           this.yArrive=this.yDepart+this.objy;
           this.etat=3;
           this.compteur=0;           
        };
   HTMLDivElement.prototype.avance=function(){ 
                          this.compteur=this.compteur+1;
                          var x_temp=this.xDepart+Math.floor(this.objx*this.compteur/10);
                          var y_temp=this.yDepart+Math.floor(this.objy*this.compteur/10);
                          var x_affiche=x_temp;
                          var y_affiche=600-y_temp;
 
                         if(x_affiche<=limitx_inf){ x_affiche=limitx_inf;this.etat=2;this.angle=0;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(x_affiche>=limitx_sup){ x_affiche=limitx_sup;this.etat=2;this.angle=180;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche<=limity_inf){ y_affiche=limity_inf;this.etat=2;this.angle=270;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche>=limity_sup){ y_affiche=limity_sup;this.etat=2;this.angle=90;this.xArrive=x_temp;this.yArrive=y_temp;}
 
                         this.style.left=x_affiche+'px';
                         this.style.top=y_affiche+'px';  
 
 
                          if (this.compteur==10) { this.etat=2; } 
   };     
   HTMLDivElement.prototype.donneEtat=function(){return this.etat;};
 
 
 
 
 
 
 
 
 
   /*********************************  *********************************/ 
 
 
   var cube1=document.createElement('div');
   cube1.init();
   var cube2=document.createElement('div');
   cube2.init();

Si quelqu'un a quelque chose de plus "propre" ? En attendant je vais me contenter de ce que j'ai trouvé .

Merci bonne nuit

**hybride11** · 21/10/2020, 23h17

voilà le code final avec la bonne gestion de l'evenement click pour démarrer et arreter le mouvement des div

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 
 HTMLDivElement.prototype.etat=0;
  HTMLDivElement.prototype.xDepart=600;
  HTMLDivElement.prototype.yDepart=300;
  HTMLDivElement.prototype.xArrive=600;
  HTMLDivElement.prototype.yArrive=300;
  HTMLDivElement.prototype.objx=0;
  HTMLDivElement.prototype.objy=0;
  HTMLDivElement.prototype.angle=0;
  HTMLDivElement.prototype.compteur=0;
  HTMLDivElement.prototype.rayon=100;
  HTMLDivElement.prototype.timer=null;
 
  HTMLDivElement.prototype.init=function(){  
 
                          this.setAttribute('class','draggableBox');
                          article.appendChild(this); 
 
                          var x_affiche=this.xDepart;
                          var y_affiche=600-this.yDepart;     
 
                          this.style.left=x_affiche+'px';
                          this.style.top=y_affiche+'px';
                          this.etat=1;
                          this.addEventListener('click',function(e){ 
                                      if (e.target.etat===1) {  
                                       e.target.etat=2;
                                       e.target.demarre();}
                                      else{ e.target.arret(); }  },false);          
 
 
                         };
 
    HTMLDivElement.prototype.demarre=function(){   	
                                             var cube=this;
   	                                       this.timer=setInterval(function(){
   	                       	                                                  var etat=cube.donneEtat(); 
   	                                                                          switch(etat) {
         	                                                                                   case 2: cube.nouveauDepart();
         	                                                                                           cube.avance();
         	                                                                                            break;
         	                                                                                    case 3 : cube.avance();
         	                                                                                             break; 
         	                                                                                   }           
 
 
                                                                          },50,cube); 
 
 
 
                                              };
  HTMLDivElement.prototype.arret=function(){ clearInterval(this.timer);this.etat=1; };
 
 
   HTMLDivElement.prototype.nouveauDepart=function(){
   	     this.angle=getRandomInt(this.angle-10,this.angle+10);
     	     this.objx=Math.floor(Math.cos(this.angle*Math.PI/180)*this.rayon);
           this.objy=Math.floor(Math.sin(this.angle*Math.PI/180)*this.rayon);  
           this.xDepart=this.xArrive;
           this.yDepart=this.yArrive;   
           this.xArrive=this.xDepart+this.objx;
           this.yArrive=this.yDepart+this.objy;
           this.etat=3;
           this.compteur=0;           
        };
   HTMLDivElement.prototype.avance=function(){ 
                          this.compteur=this.compteur+1;
                          var x_temp=this.xDepart+Math.floor(this.objx*this.compteur/10);
                          var y_temp=this.yDepart+Math.floor(this.objy*this.compteur/10);
                          var x_affiche=x_temp;
                          var y_affiche=600-y_temp;
 
                         if(x_affiche<=limitx_inf){ x_affiche=limitx_inf;this.etat=2;this.angle=0;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(x_affiche>=limitx_sup){ x_affiche=limitx_sup;this.etat=2;this.angle=180;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche<=limity_inf){ y_affiche=limity_inf;this.etat=2;this.angle=270;this.xArrive=x_temp;this.yArrive=y_temp;}
                         if(y_affiche>=limity_sup){ y_affiche=limity_sup;this.etat=2;this.angle=90;this.xArrive=x_temp;this.yArrive=y_temp;}
 
                         this.style.left=x_affiche+'px';
                         this.style.top=y_affiche+'px';  
 
 
                          if (this.compteur==10) { this.etat=2; } 
   };     
   HTMLDivElement.prototype.donneEtat=function(){return this.etat;};

**Watilin** · 22/10/2020, 01h11

Bonsoir !
Tu sembles insatisfait de la « propreté » de ta solution. C’est sans doute dû au fait que tu étends directement un prototype du DOM, que ça crée un risque de collision de noms et que ça peut impacter les performances du navigateur sur des pages lourdes ou des machines modestes.

On pourrait faire un héritage en bonne et dûe forme avec un constructeur new Cube(), mais le DOM est capricieux et ne veut pas travailler avec des objets qu’il n’a pas construits lui-même. Du coup, je te propose d’utiliser une fonction fabrique, aussi parfois appelée usine (en anglais factory). C’est une simple fonction qui encapsule les détails de création d’un objet.

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
fonction creerCube() { // fabrique
  var cube = document.createElement("div");
 
  cube.etat = 0;
  cube.xDepart = 600;
  cube.yDepart = 300;
  // etc.
 
  // code de la méthode init()
  cube.setAttribute('class','draggableBox');
  article.appendChild(cube);
  // etc.
 
  return cube;
}

Comme j’y ai inclus le code de la méthode init(), plus besoin de l’appeler après la création.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var cube1 = creerCube();
var cube2 = creerCube();

Tu obtiens deux éléments <div> avec des propriétés qui leur ont été rajoutées ad hoc par la fabrique. Le prototype de HTMLDivElement reste inchangé et les autres <div> de la page ne sont pas affectés.

Et oui, ce n’est plus du tout de l’héritage, je l’avoue

**hybride11** · 22/10/2020, 16h56

un grand merci pour la solution proposée qui est largement meilleure que ce à quoi j'aurais pu penser . Solution Adoptée ! Et ça me donne le code suivant que j'ai testé et qui fonctionne très bien .

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
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
function creerCube() {
    var cube = document.createElement('div');
    cube.etat = 0;
    cube.xDepart = 600;
    cube.yDepart = 300;
    cube.xArrive = 600;
    cube.yArrive = 300;
    cube.objx = 0;
    cube.objy = 0;
    cube.angle = 0;
    cube.compteur = 0;
    cube.compteurBord = 0;
    cube.rayon = 100;
    cube.timer = null;
    cube.setAttribute('class', 'draggableBox');
    article.appendChild(cube);
    var x_affiche = cube.xDepart;
    var y_affiche = 600 - cube.yDepart;
    cube.style.left = x_affiche + 'px';
    cube.style.top = y_affiche + 'px';
    cube.etat = 1;
    cube.addEventListener('click', function(e) {
        if (e.target.etat === 1) {
            e.target.etat = 2;
            e.target.demarre();
        }
        else {
            e.target.arret();
        }
    }, false);
    cube.demarre = function() {
        cube.timer = setInterval(function() {
            //var etat=cube.donneEtat();
            switch (cube.etat) {
                case 2:
                    cube.nouveauDepart();
                    cube.avance();
                    break;
                case 3:
                    cube.avance();
                    break;
            }
        }, 50, cube);
    };
    cube.arret = function() {
        if (cube.etat != 0) {
            clearInterval(cube.timer)
        };
        cube.etat = 1;
    };
    cube.nouveauDepart = function() {
        cube.angle = getRandomInt(cube.angle - 10, cube.angle + 10);
        cube.objx = Math.floor(Math.cos(cube.angle * Math.PI / 180) * cube.rayon);
        cube.objy = Math.floor(Math.sin(cube.angle * Math.PI / 180) * cube.rayon);
        cube.xDepart = cube.xArrive;
        cube.yDepart = cube.yArrive;
        cube.xArrive = cube.xDepart + cube.objx;
        cube.yArrive = cube.yDepart + cube.objy;
        cube.etat = 3;
        cube.compteur = 0;
    };
    cube.avance = function() {
        cube.compteur = cube.compteur + 1;
        var x_temp = cube.xDepart + Math.floor(cube.objx * cube.compteur / 10);
        var y_temp = cube.yDepart + Math.floor(cube.objy * cube.compteur / 10);
        var x_affiche = x_temp;
        var y_affiche = 600 - y_temp;
        if (x_affiche <= limitx_inf) {
            x_affiche = limitx_inf;
            cube.etat = 2;
            cube.angle = 0;
            cube.xArrive = x_temp;
            cube.yArrive = y_temp;
        }
        if (x_affiche >= limitx_sup) {
            x_affiche = limitx_sup;
            cube.etat = 2;
            cube.angle = 180;
            cube.xArrive = x_temp;
            cube.yArrive = y_temp;
        }
        if (y_affiche <= limity_inf) {
            y_affiche = limity_inf;
            cube.etat = 2;
            cube.angle = 270;
            cube.xArrive = x_temp;
            cube.yArrive = y_temp;
        }
        if (y_affiche >= limity_sup) {
            y_affiche = limity_sup;
            cube.etat = 2;
            cube.angle = 90;
            cube.xArrive = x_temp;
            cube.yArrive = y_temp;
        }
        cube.style.left = x_affiche + 'px';
        cube.style.top = y_affiche + 'px';
        if (cube.compteur == 10) {
            cube.etat = 2;
        }
    };
    cube.donneEtat = function() {
        return cube.etat;
    };
    return cube;
}
/*********************************  *********************************/
var cube1 = creerCube();
var cube2 = creerCube();

Création objet qui hérite de HTMLDivElement

JavaScript

Discussions similaires

Partager

Partager