issues understanding code

[coffeecup]

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:

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!

[Old Pedant]

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:

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?

[coffeecup]

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

[felgall]

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.

[coffeecup]

Originally Posted by felgall

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

[AndrewGSW]

but I don't get the whole idea of why tool[ev.type] is an array

In JavaScript, objects are associative arrays.

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:

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,

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.

[Old Pedant]

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:

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:

    var func = tool[ev.type];

becomes

    var func = tool["mouseup"];

becomes

    var func = tool.mouseup;

becomes

    var func = function(x) { alert("mouse up called with argument" + x); }

and do now we can do

    func( ev );

and we are *actually* effectiively doing

    alert("mouse up called with argument" + ev);

Okay?

[coffeecup]

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?

[AndrewGSW]

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:

tool[ev['type']]

[Old Pedant]

Originally Posted by coffeecup

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:

var tool = {
    mouseup : function( ) { ... },
    mousedown : functiion( ) { ... },
    keyup : function( ) { ... },
    keydown : function( ) { .. }
};

You could *certainly* use either

    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

    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

    tool[ ev.type ];

Oh, you could write some ugly code like this:

    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

      tool[ev.type]( ev );

(or the equivalent).