Using a global variable within a function

Hi Katherine,

Look at this thread : http://forums.adobe.com/message/5512963#5512963

and download the example I give, because it's very near of what your trying to do : clicking the buttons produces a cumulative count in a text field.

Gil

Hi Katherine,

However, it seems to be treating p1 as two different variables.

Indeed, your code created two different variables in two different scopes (I guess it as to do with JavaScript closures, but do  not ask me more, I am still a bit foggy about that idiosyncrasy ).

In JavaScript, a primitive parameter – this is the case here with p1, a Number value –, is passed by value. In other words, a copy of the value is made. Your code handles two copies of the value stored in p1.

This contrasts with an object parameter, which is passed by reference (address in memory), without copy. Your code would work if Numbers were passed by reference : the two Var (p1) would then point to the same address.

The intent behind your trial is a global variable.

1) Let us be as simple as possible :

Stage : document.compositionReady event handler

p1 = 0;

buttonClick = function( Increment)

{

  p1 += Increment;

  sym.$( "Value").html( p1);

}

Stage : DownButton.click event handler

buttonClick(-100);

Stage : UpButton.click event handler

buttonClick(100);

Without being preceded by the var keyword the variables are global.

So the Number variable p1 can be accessed inside function buttonClick.

And the Function variable buttonClick as well, is accessible inside click event handlers, everything (function definition +function calls) being inside the same symbol (Stage).

2) Now, suppose this is no longer the case : you want to access a variable from another symbol.

We create a new GraySquare symbol, instantiated both in the DownButton symbol (instance name DownSquare) and in the UpButton symbol (instance name DownSquare).

Stage : document.compositionReady event handler

p1 = 0;

sym.buttonClick = function( Increment)

{

  p1 += Increment;

  sym.$( "Value").html( p1);

}

The sym. prefix is now necessary to make the variable (here a Function, but you would proceed exactly the same with a String, Number or Boolean) accessible in other symbols.

DownButton symbol : DownSquare.click event handler

sym.getComposition().getStage().buttonClick( -100);

UpButton symbol : UpSquare.click event handler

sym.getComposition().getStage().buttonClick( 100);

From these other symbols, the sym.getComposition().getStage(). prefix is necessary to acces to our global variable (function).

The two examples are downloadable here : https://app.box.com/s/6vkyiqk7i8zwlw0j1wk1

Gil

3) A simpler way to share global variables between symbols is to define a Javascript object (thanks again to Zaxist who showed us the way ).

Stage : document.compositionReady event handler

COUNT =

{

  p1 : 0,

  buttonClick : function( Increment)

  {

    COUNT.p1 += Increment;

    sym.$( "Value").html( COUNT.p1);

  }

};

The COUNT object has two properties : a Number and a Function.

An interesting feature is that you can have different objects, which are each a different namespace, avoiding name conflicts (COUNT.total and MEMBERS.total for example).

DownButton symbol : DownSquare.click event handler

COUNT.buttonClick( -100);

UpButton symbol : UpSquare.click event handler

COUNT.buttonClick( 100);

This avoids the heavy sym.getComposition.getStage().

Gil

PS : the above link has been updated to include this third version.

Amuli, this is cool!

My pleasure, Marie

sorry if this is a stupid question

Not at all, Katherine. An excellent opportunity for all of us to think and clarify

Gil

You're welcome, Katherine. Formulating for others is an actual opportunity to get things clearer. I had not the whole answer when you asked, so I have learned as well

Gil