SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    constructor function/setTimeout/animate

    Hello... I've actually been writing js for years, but I really want to learn OOP. The problem is I'm very much NOT mathematically minded and it's tough for me to grasp. I've been going through 'Simply JavaScript' and have noticed that the authors make their functions objects, e.g. var SoccerBall ={ init: function() { stuff....

    But then that code isn't reusable and only fires after the doc is loaded. Also they don't really explain WHY they do it


    their function:
    Code:
    var SoccerBall =
    {
      init: function()
      {
        SoccerBall.frameRate = 25;
        SoccerBall.deceleration = 10;
        SoccerBall.div = document.getElementById("soccerBall");
        SoccerBall.targetX = 600;
        SoccerBall.targetY = 150;
        SoccerBall.originX = parseInt(Core.getComputedStyle(SoccerBall.div, "left"), 10);
        SoccerBall.originY = parseInt(Core.getComputedStyle(SoccerBall.div, "top"), 10);
        SoccerBall.x = SoccerBall.originX;
        SoccerBall.y = SoccerBall.originY;
        
        SoccerBall.animate();
      },
    
      animate: function()
      {
        SoccerBall.x += (SoccerBall.targetX - SoccerBall.x) / SoccerBall.deceleration;
        SoccerBall.y += (SoccerBall.targetY - SoccerBall.y) / SoccerBall.deceleration;
        
        if ((SoccerBall.targetX > SoccerBall.originX && Math.round(SoccerBall.x) >= SoccerBall.targetX) || (SoccerBall.targetX < SoccerBall.originX && Math.round(SoccerBall.x) <= SoccerBall.targetX))
        {
          SoccerBall.x = SoccerBall.targetX;
          SoccerBall.y = SoccerBall.targetY;
        }
        else
        {
          setTimeout(SoccerBall.animate, 1000 / SoccerBall.frameRate)
        }
    
        SoccerBall.div.style.left = Math.round(SoccerBall.x) + "px";
        SoccerBall.div.style.top = Math.round(SoccerBall.y) + "px";
      }
    };
    
    Core.start(SoccerBall);
    I'm attempting to make a reusable animate object out of this:

    Code:
    function Mover (movDiv, divLoco) {
    
        this.frameRate = 60;
        this.deceleration = 10;
        this.div = document.getElementById(movDiv); 
        this.targetY = divLoco;   
        this.originY = parseInt(Core.getComputedStyle(this.div, "top"), 10);    
        this.y = this.originY; 
    	};
    	
    	
    Mover.prototype.animate=function(){
       
        this.y += (this.targetY - this.y) / this.deceleration;
        
        if ((this.targetY > this.originY && Math.round(this.y) >= this.targetY) || (this.targetY < this.originY && Math.round(this.y) <= this.targetY))
        {
          
          this.y = this.targetY;
        }
        else
        {
          setTimeout(Mover.prototype.animate, 1000 / this.frameRate);
    	 
        }   
    	
        this.div.style.top = Math.round(this.y) + "px";
    	
      }
    Right now I'm calling the function like (just to test the function):

    Code:
    var Mover1=new Mover('reco01', -400);
    Mover1.animate();
    And it works at first - the div moves one step - then the variables lose all their values, and the timeout counter just runs on.

    I'm doing this mostly as an exercise on how to do it. I know jquery makes this easy, but I want to understand this and hopefully begin to understand OOP with javascript. I haven't found a good tutorial on this kind of thing that has good visual examples. A lot of them use math/calculator functionality and numbers make my eyes cross.

    Any insight is appreciated!

  2. #2
    SitePoint Member
    Join Date
    Aug 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I've got this working:
    Code:
    var Mover =
    {
      init: function(theDiv, theLoc)
      {
        Mover.frameRate = 60;
        Mover.deceleration = 10;
        Mover.div = document.getElementById(theDiv);    
        Mover.targetY = theLoc;    
        Mover.originY = parseInt(Core.getComputedStyle(Mover.div, "top"), 10);    
        Mover.y = Mover.originY;    
        Mover.animate();
      },
    
      animate: function()
      {    
        Mover.y += (Mover.targetY - Mover.y) / Mover.deceleration;    
    	setTimeout(Mover.animate, 1000 / Mover.frameRate)
    	Mover.div.style.top = Math.round(Mover.y) + "px";
      }
    };
    called with

    Code:
    Mover.init(theDiv, theLoc);
    But I'm still unsure of the why. I'm still unsure why the authors build the functions as objects.

  3. #3
    SitePoint Wizard bronze trophy Jeff Mott's Avatar
    Join Date
    Jul 2009
    Posts
    1,313
    Mentioned
    19 Post(s)
    Tagged
    1 Thread(s)
    In procedural programming, there is a tendency to access and modify data from multiple places throughout the entire application, but in OOP, there's an explicit list of functions that exclusively operates on a data structure. That kind of architecture is what makes code easier to maintain, easier to extend, and easier to reuse. OOP also aids overall software architecture by encouraging us to think of our code less like a list of instructions and more like a collection of components.

    Here are a couple guides to can help:

    https://developer.mozilla.org/en/Int...ted_JavaScript
    http://eloquentjavascript.net/chapter8.html

    And a video that's a bit advanced but it can help you understand what's happening under the hood:

    http://www.youtube.com/watch?v=DwYPG6vreJg
    "First make it work. Then make it better."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •