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 10 of 10
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    33
    Thanks
    18
    Thanked 0 Times in 0 Posts

    issues understanding code

    Hello,

    I have some issues to understand how parts of the following code are working:

    demo:
    http://devfiles.myopera.com/articles/649/example2.html
    source:
    http://devfiles.myopera.com/articles/649/example2.js

    this is the part I have issues with:

    Code:
    var func = tool[ev.type];
        if (func) {
          func(ev);
        }
    I don't quite get the idea behind this How does it work/what does it to?

    Any help is welcome, thanks in advance!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Functions in JavaScript *ARE* objects.

    So you can get a reference to a function just as you can get a reference to any other kind of object.

    And, if you indeed you *have* a reference to a function, then you can invoke the function via that reference.

    Perhaps a simple example will help:
    Code:
    function demo(arg) { alert("demo called with argument " + arg); }
    
    var dummy = {
         "name" : "dummy object",
         "func" : demo
    };
    
    var functionReference = dummy.func;
    
    functionReference( "tada!" );
    Try it! Does that help?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    coffeecup (12-15-2012)

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    33
    Thanks
    18
    Thanked 0 Times in 0 Posts
    thanks this indeed got me somewhat closer. I still have issues with the following though:

    var func = tool[ev.type];
    if (func) {
    func(ev);
    }
    I'm still confused with the tool array, how does it work? Could you give me an example what value "func=tool[ev.type]" can have? Is there a simpler approach?

    Thanks in advance

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Presumably there is more code than what you posted and the tool[] array is being defined somewhere in the rest of the code.

    From just the portion of code you supplied we can say that tool[ev.type] can be either a function or code that returns a function.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New Coder
    Join Date
    Jul 2012
    Posts
    33
    Thanks
    18
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Presumably there is more code than what you posted and the tool[] array is being defined somewhere in the rest of the code.

    From just the portion of code you supplied we can say that tool[ev.type] can be either a function or code that returns a function.
    link to source is on first post yes tool is defined + instanced previously, but I don't get the whole idea of why tool[ev.type] is an array

  • #6
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    but I don't get the whole idea of why tool[ev.type] is an array
    In JavaScript, objects are associative arrays.

    Code:
    var myObject = { "name": "Bob" };
    // can be referred to as either
    myObject['name'] // or 
    myObject.name
    But functions are also objects and can be assigned as attributes (properties) of an object:
    Code:
    myObject.func = function () { alert("Hello!") };
    
    var anOther.func = myObject['func'];
    anOther.func();  // Hello!
    ev is the event object which, I assume, will have the 'type' of onclick, onmouseover, etc.. which is, in turn, a function. So,
    Code:
    func(ev);
    triggers the event-handler of this name (handing over the current event object as a parameter).

    These are general details - I didn't examine the page in detail.
    Last edited by AndrewGSW; 12-15-2012 at 10:11 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    coffeecup (12-15-2012)

  • #7
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by coffeecup;1300161but I don't get the whole idea of why tool[ev.type
    is an array
    It's not.

    It never was and still isn't.

    It is an object.

    Let's say that we *KNOW* that ev.type is "mouseup".

    That means that doing tool[ev.type] is of course equivalent to doing tool["mouseup"] (no mystery there, right?).

    But...and here may be the surprise to you...tool["mouseup"] is equivalent to tool.mouseup !!!

    SO...

    If we have an object such as this:
    Code:
    var tool = {
         zam : "whomp",
         size : 88.88176,
         mouseup : function(x) { alert("mouse up called with argument" + x); }
    };
    And if we have an event , ev that indeed has its type (ev.type) equal to "mouseup", then doing this:
    Code:
        var func = tool[ev.type];
    becomes
    Code:
        var func = tool["mouseup"];
    becomes
    Code:
        var func = tool.mouseup;
    becomes
    Code:
        var func = function(x) { alert("mouse up called with argument" + x); }
    and do now we can do
    Code:
        func( ev );
    and we are *actually* effectiively doing
    Code:
        alert("mouse up called with argument" + ev);
    Okay?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    coffeecup (12-15-2012)

  • #8
    New Coder
    Join Date
    Jul 2012
    Posts
    33
    Thanks
    18
    Thanked 0 Times in 0 Posts
    excellent ^^ thanks this indeed helped me alot. I was not aware of the whole objects <=> associative array thingie and will look into it. it makes perfect sense now thanks to your explanation.

    just a last small question out of curiousity:
    is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it?

  • #9
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it?
    I don't believe that would work, although I haven't studied the code in depth. But this probably will:
    Code:
    tool[ev['type']]
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Quote Originally Posted by coffeecup View Post
    is there another way to write tool[ev.type]? I don't think tool.ev.type would work, would it?
    The problem is that what you are trying to do is choose *ONE* of the posslble properties of the tool object.

    Suppose you had:
    Code:
    var tool = {
        mouseup : function( ) { ... },
        mousedown : functiion( ) { ... },
        keyup : function( ) { ... },
        keydown : function( ) { .. }
    };
    You could *certainly* use either
    Code:
        tool["mouseup"]
    or
        tool.mouseup
    But in this case, you don't *KNOW* what the value of ev.type is, do you?

    It might be "mouseup" or it might be "keyup" or ...

    You just know (or at least you hope!) that ev.type is *ONE* of the properties of the tool object.

    You *COULD* do
    Code:
        eval( "tool." + ev.type );
    but I'm sure you have heard how evil it is to use eval( ) and for how many reasons.

    So, realistically, the best way *IS* to use simply
    Code:
        tool[ ev.type ];
    Oh, you could write some ugly code like this:
    Code:
        switch ( ev.type )
        {
            case "mousedown" : tool.mousedown(ev); break;
            case "mouseup" : tool.mousedown(ev); break;
            case "keyup" : tool.keyup(ev); break;
            case "keydown" : tool.keydown(ev); break;
       }
    But once you understand it all, isn't it really easier to just do
    Code:
          tool[ev.type]( ev );
    (or the equivalent).
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    coffeecup (12-15-2012)


  •  

    Posting Permissions

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