Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Class Confusion (newbie)

    I'm really new to this so I'm probably just not understanding a core concept.
    I am attempting to create a button class that updates based on events.

    Code:
    function Button()
    {
    	this.Pressed = false;
    	this.Released = false;
    	this.Down = false;
    	
    	this.Reset = function()
    	{
    		this.Pressed = false;
    		this.Released = false;
    	}
    	
    	this.Pressed = function()
    	{
    		this.Pressed = true;
    		this.Down = true;
    	}
    	
    	this.Released = function()
    	{
    		this.Released = true;
    		this.Down = false;
    	}
    }
    
    var Right = new Button();
    
    document.addEventListener('keydown', function(event)
    {
    	if (event.keyCode == 39)
    	{
    		Right.Pressed();
    	}
    }, true);
    
    document.addEventListener('keyup', function(event)
    {
    	if (event.keyCode == 39)
    	{
    		Right.Released();
    	}
    }, true);
    It has issues when I try to call Right.Pressed() in the event listener.
    It works if I instead of calling Right.Pressed() and Right.Released() I replace them two functions called RightPressed() and RightReleased() that do:

    Code:
    function RightPressed()
    {
    	Right.Pressed = true;
    	Right.Down = true;
    }
    
    function RightReleased()
    {
    	Right.Released = true;
    	Right.Down = false;
    }
    What am I doing wrong?

    Thanks,
    Jake

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Code:
    Right.Pressed();
    should be

    Code:
    Right.Pressed.call(Right);
    you can also do the thisNthat trick:

    Code:
    function Button(){
      var that=this;
    and then in your methods that will be bound to events, replace this for that:
    Code:
    	this.Pressed = function()
    	{
    		that.Pressed = true;
    		that.Down = true;
    	}
    that way you don't have to hard-code the variable name or use call/apply/bind...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure I understand the problem...

    Why does the:
    Code:
    Right.Pressed()
    need to be:
    Code:
    Right.Pressed.call(Right)
    ?

    Shouldn't it know that you are calling it on Right because you are doing Right.Pressed()?

    As far as the thisNthat trick, I'm not sure what that is actually doing. Can you please elaborate a bit more?

    Also, thank you for your reply.

  • #4
    Regular Coder
    Join Date
    Aug 2010
    Posts
    966
    Thanks
    19
    Thanked 211 Times in 209 Posts
    this.Released = function()
    {
    this.Released = true;

    Not good !

    Maybe more like this ...

    Code:
     
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>MasterMind</title>  
    <style>
    span{color:red;}
    </style>
    </head>
    <body > 
    <span id="Pressed">Pressed</span>
    <span id="Released">Released</span>
    <span id="Down">Down</span>
    <button type="button" onClick="Right.Reset()">RESET</button>
      <script type="text/javascript">
      function Button(){
     var isPressed = false;
     var isReleased = false;
     var isDown = false; 
     this.Reset = function(){
      isReleased = false;
      isDown = false;
      isPressed = false;
     } 
     this.Pressed = function(){
      isDown = true;
      isReleased = false;
      isPressed = true;
     } 
     this.Released = function(){
      isReleased = true;
      isDown = false;
     }
     this.getPressed = function(){
      return isPressed;
     } 
     this.getReleased = function(){
      return isReleased;
     }
     this.getDown = function(){
      return isDown;
     }
    }
    var Right = new Button();
    document.addEventListener('keydown', function(event){
         if (event.keyCode == 39){
          Right.Pressed();
         }
             }, true);
    document.addEventListener('keyup', function(event){
         if (event.keyCode == 39){
          Right.Released();
         }
           }, true);
    (function monitor(){
            Pressed.style.color = Right.getPressed() ? "green" : "red";
            Released.style.color = Right.getReleased() ? "green" : "red";
            Down.style.color = Right.getDown() ? "green" : "red";
            setTimeout(monitor,30);
    }());
      </script>
    </body>
    </html>
    Last edited by DaveyErwin; 07-10-2013 at 10:02 PM.

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,214
    Thanks
    12
    Thanked 338 Times in 334 Posts
    Quote Originally Posted by rnd me View Post
    Code:
    Right.Pressed();
    should be
    Code:
    Right.Pressed.call(Right);
    AFAIK, the inner scope of variables is not affected in event handlers (Right is already closured).

    but the issue with rewriting holds true.

    @Chrums
    my tips for working with classes in JavaScript
    - forget everything you know about classes, it’s irrelevant in JS because it’s not class-based but object-based
    - it’s recommended to start Constructors (like the Button() function) upper-case and properties/methods lower-case (for better distinction)
    - methods (except in special cicumstances) should be put into the object’s prototype (memory management and such)
    - functions are objects, too
    - (therefore) there is no programmatical difference between a method and a property
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,273
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by Dormilich View Post
    AFAIK, the inner scope of variables is not affected in event handlers (Right is already closured).
    but the issue with rewriting holds true.
    yup, good eye, i shouldn't be as cynical...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%


  •  

    Tags for this Thread

    Posting Permissions

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