ugrás a tartalomhoz

JavaScript osztály

mgergo90 · 2010. Feb. 8. (H), 22.49
Sziasztok!

Adott a következőosztály:
  1. <script>  
  2. ProbaOsztaly.prototype =  
  3. {  
  4.     obj : null,  
  5.     Elso : function()  
  6.     {  
  7.         this.obj = document.getElementById('div');  
  8.         this.Masodik();  
  9.     },  
  10.     Masodik : function()  
  11.     {  
  12.        alert(this.obj);  
  13.     }  
  14. }  
  15.   
  16. ProbaOsztaly() {}  
  17.   
  18. var osztaly = new ProbaOsztaly();  
  19. osztaly.Elso(); // null  
  20.   
  21. </script>  
Ez miért ezt eredményezi és miért nem ezt [objectHTMLDivElement] ?
‹ CSS-háttérszín és más probléma weblap hiba ›
 ■
1

Ez miért ezt eredményezi és

mgergo90 · 2010. Feb. 9. (K), 00.09
Ez miért ezt eredményezi és miért nem ezt [objectHTMLDivElement] ?

Vagyis miért null-t ír ki?
2

kis átalakítás

Drawain · 2010. Feb. 9. (K), 00.14
A példakódod egy kis átalakításra szorul:
  1. function ProbaOsztaly() {}  
  2.   
  3. ProbaOsztaly.prototype = {  
  4.     obj : null,  
  5.     elso : function() {  
  6.         this.obj = document.getElementById('div');  
  7.         this.masodik();  
  8.     },  
  9.     masodik : function() {  
  10.         alert(this.obj);  
  11.     }  
  12. }  
  13.   
  14. var osztaly = new ProbaOsztaly();  
  15. osztaly.elso();  
Ekkor jó elemet fogsz kapni, ha létezik div id-vel ellátott elemed! (tehát ez nem biztos, hogy egy valódi div, bárminek lehet ilyen azonosítója, te adod meg).

A metódusokat kisbetűvel érdemes írni, csak a konstruktorfüggvényeket szokás nagy kezdőbetűvel, de ez nem olyan nagy hiba.

Az már annál inkább, hogy a függvényt rosszul hoztad létre (lemaradt a function kulcsszó), illetve, hogy ezt egyáltalán azután próbáltad megtenni, hogy a prototípusát már állítgattad (ekkor ugye még nem hoztad létre a ProbaOsztaly objektumot).
3

osztály tulajdonságok

mgergo90 · 2010. Feb. 9. (K), 16.25
Továbbra sem boldogulok vele, a teljes kód így néz ki, egy divet kellene mozgatnia az egér pozíciójának megfelelően.
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />  
  4. <script>  
  5.   
  6.  function ProbaOsztaly() {}    
  7.      
  8.  ProbaOsztaly.prototype = {    
  9.      obj : null,    
  10.      x:10,  
  11.      y:10,  
  12.      dx:10,  
  13.      dy:10,  
  14.      mozgatas : false,  
  15.        
  16.      Setup : function()  
  17.      {    
  18.          this.obj =  document.getElementById('negyzet');  
  19.          this.obj.addEventListener('onmousedown',this.Drag,false);  
  20.      },    
  21.      Drag : function() {  
  22.          this.mozgatas = true;  
  23.          thisthis.dx = this.x - this.obj.offsetLeft;  
  24.          thisthis.dy = this.y - this.obj.offsetTop;  
  25.     },  
  26.     Move : function(e)  
  27.     {  
  28.         if (!e) var e = document.event;  
  29.         this.x = e.screenX;  
  30.         this.y = e.screenY;  
  31.         if (this.mozgatas)  
  32.         {  
  33.             var actx = this.x - this.dx;  
  34.             var acty = this.y - this.dx;  
  35.             this.obj.style.left = actx + "px";  
  36.             this.obj.style.top = acty+ "px";  
  37.         }     
  38.     },  
  39.     Drop : function()  
  40.     {  
  41.         this.mozgatas = false;  
  42.     }  
  43.  }   
  44.      
  45. var osztaly = new ProbaOsztaly();    
  46. window.onload = function()   
  47. {  
  48.     osztaly.Setup();    
  49. }  
  50. window.onmousemove = osztaly.Move;  
  51. window.onmouseup = osztaly.Drop;  
  52.   
  53. </script>  
  54. </head>  
  55.   
  56. <body>  
  57.     <div style="background:#000; width:100px; height:100px; position:absolute;" id="negyzet">  
  58.     </div>  
  59. </body>  
  60. </html>  
4

Probléma

Poetro · 2010. Feb. 9. (K), 20.46
A probléma, hogy a JavaScript eseménykezelése teljesen máshogy működik. Az egy dolog, hogy nincs olyan esemény, hogy onmousedown, hanem csak mousedown, már ha addEventListener-t nézzük. Viszont amikor a callback függvények meghívódnak, ebben az esetben a Drag, Move, Drop, akkor a this már teljesen más, jelen esetben az az objektum, aki az eseményt elszenvedi. Szóval valahogy meg kell oldanod, hogy tudd, mi az éppen mozgatott DOM elemedhez tartozó ProbaOsztaly, hogy azon tudd végrehajtani az módosításaidat.