[Proto-Scripty] Re: Javascript scope
On Feb 11, 11:21 am, doug wrote: > I have read about Javascript and scope and I still don't really > understand it completely, particularly when it comes to Ajax.Updater. > > I don't really understand, for example why, if there is a variable > window.myvar, some Javascript code would not be able to access it, and > instead it would be undefined for that code. I was thinking > window.myvar was "global" Without seeing the code, only guesses can be provided in response to that. It may be that myvar hasn't been assigned a value when you try to access it, or the code is trying to access a different window object, or the identifier resolves to a property on some other object, and so on. > But, my question is, is there a way I can do some type of alert() and > have it print out what scope it is executing in? Javascript only has 2 scopes: global and function. However, there can be more than one global object in a web page (e.g. frames). There is a long and detailed article on closures here that includes how scope works: http://www.jibbering.com/faq/faq_notes/closures.html > It is a bit daunting when you first start to read it, but stick at it, you may take a week or so of solid work to get all the way through and fully understand it. But if you take the time, by the end you will have a very good idea of how identifier (hence scope) and property name resolution works in javascript. -- Rob --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Javascript scope
Hi again Doug,
> > But, my question is, is there a way I can do some type of alert() and
> > have it print out what scope it is executing in?
>
> I don't know of a reliable way to do that, no.
But if you're using Firefox, it looks like the latest Firebug[1] now
displays the scope chain on the watch panel automagically when you're
stepping through code. VERY cool. :-)
[1] http://www.getfirebug.com
--
T.J. Crowder
tj / crowder software / com
Independent Software Engineer, consulting services available
On Feb 11, 11:39 am, "T.J. Crowder" wrote:
> Hi Doug,
>
> > I don't really understand, for example why, if there is a variable
> > window.myvar, some Javascript code would not be able to access it...
>
> As far as I know, all code within the same document can access that
> property; it is global to the document because it's a property of the
> "window" object, which is global to the document. Offhand, I can only
> think of two situations where it would be in accessible: 1. If you're
> dealing with frames or iframes, those are in separate documents and
> they each get their own copy of "window" with its own properties; 2.
> If "window" has been hidden by another declaration called
> "window" (e.g., a function with "var window" in it, or someone using
> 'with'), which would be a Bad Idea(tm).
>
> > But, my question is, is there a way I can do some type of alert() and
> > have it print out what scope it is executing in?
>
> I don't know of a reliable way to do that, no. You can get hints at
> it, as with seasoup's note about arguments.callee, but that won't help
> you if you're executing code in the global scope or within an 'exec'.
> But good news: You can always tell by looking at the source, because
> in JavaScript, scope is dictated by program structure; it's not
> determined at runtime.
>
> Most of us are familiar with the concept of globals and locals:
>
> * * * *
>
> var a = "h";
>
> function doSomething() {
>
> // 'a' is a global, so this function can see it
> alert(a);
>
> }
>
> doSomething(); // alerts "h", the current value of 'a'
> a = "j";
> doSomething(); // alerts "j", the current value of 'a'
>
> * * * *
>
> JavaScript takes this to the logical next step: Functions declared
> within a scope inherit that scope and all of its parent scopes, in a
> chain:
>
> * * * *
> var a = "h";
>
> function outermost() {
> var b = "e";
>
> function middle() {
> var c = "ll";
>
> function innermost() {
> var d = "o";
>
> alert(a + b + c + d);
> }
>
> innermost();
> }
>
> middle();
>
> }
>
> outermost(); // alerts "hello"
> * * * *
>
> Cool, huh? Each unqualified reference is resolved by checking it
> against the innermost scope and, if not found there, the next scope up
> in the chain -- in this case, innermost -> middle -> outermost ->
> global. To know what the scope chain looks like, we need only look at
> where the functions are defined. This is the crucial bit: It's where
> they're defined, not where they're called.
>
> The program structure tells us what variables are in scope for which
> functions, but as always, the *values* of those variables is
> determined at runtime. It's easy enough to realize that calling
> 'outermost' above gives us "hello" and that that changes if we change
> 'a':
>
> * * * *
> outermost(); // alerts "hello"
> a = "j";
> outermost(); // alerts "jello" (mm, Jello)
> * * * *
>
> Simple enough, you've changed a global used by one of the inner
> functions. We can also do the same thing using a parameter to
> 'outermost':
>
> * * * *
>
> function outermost(a) {
> var b = "e";
>
> function middle() {
> var c = "ll";
>
> function innermost() {
> var d = "o";
>
> alert(a + b + c + d);
> }
>
> innermost();
> }
>
> middle();
>
> }
>
> outermost("h"); // alerts "hello"
> outermost("j"); // alerts "jello"
>
> * * * *
>
> Note we don't have a global 'a' anymore; it's a parameter of
> 'outermost'. Doesn't matter, parameters go on the scope chain just
> like local variables do.
>
> Where people start to get a bit glassy-eyed is when we start passing
> around function references, which we do all the time in JavaScript.
> Consider this:
>
> * * * *
>
> function outermost(a) {
> var b = "e";
>
> function middle() {
> var c = "ll";
>
> function innermost() {
> var d = "o";
>
> alert(a + b + c + d);
> }
>
> innermost();
> }
>
> return middle;
>
> }
>
> * * * *
>
> Note that 'outermost' now returns a reference to the 'middle'
> function, it does *not* call it. No alert occurs if we call
> 'outermost'; it occurs when we call the function returned by
> 'outermost'. Now, what do we see when we do this:
>
> * * * *
>
> var f1 = outermost("h");
> f1();
>
> * * * *
>
> We call 'outermost' with an "h", and it returns a function reference
> we store in 'f1', and
[Proto-Scripty] Re: Javascript scope
Hi doug, Yes, give us a live demo, if possible. But what I read let me think that you would access to a variable in the main window from javascript coded inside a frame. This is possible but under certain restrictions for security reasons. Is that what you trying to do?? -- david On 11 fév, 16:06, "T.J. Crowder" wrote: > Hi, > > > I wonder if a div with style overflow:auto and a scrollbar on the side > > could act similar to a frame. > > It shouldn't, no. > > > But, when I do an Ajax.Update of the lightbox div, and I have an > > onclick on a button in that lightbox. The code attached to that > > button can longer access the global vars. > > Can you post a pared-down, minimalist, self-contained page > demonstrating the problem? Folks here would be happy to take a > look... > -- > T.J. Crowder > tj / crowder software / com > Independent Software Engineer, consulting services available > > On Feb 11, 1:23 pm, doug wrote: > > > Thanks for the advice every one. > > > T. J. Crowder, > > > I wonder if a div with style overflow:auto and a scrollbar on the side > > could act similar to a frame. > > > I figured what makes things go wrong, but still not sure why. I bring > > up a lightbox similar to the one > > here:http://particletree.com/features/lightbox-gone-wild/. > > But, when I do an Ajax.Update of the lightbox div, and I have an > > onclick on a button in that lightbox. The code attached to that > > button can longer access the global vars. > > > However, if my lightbox contains a div, and I update the inner div, I > > can access the global vars from onclicks within the lightbox. At least > > that's what it seems like is happening. There may be something else > > going on, I'm really not sure. > > > -d --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Javascript scope
Hi, > I wonder if a div with style overflow:auto and a scrollbar on the side > could act similar to a frame. It shouldn't, no. > But, when I do an Ajax.Update of the lightbox div, and I have an > onclick on a button in that lightbox. The code attached to that > button can longer access the global vars. Can you post a pared-down, minimalist, self-contained page demonstrating the problem? Folks here would be happy to take a look... -- T.J. Crowder tj / crowder software / com Independent Software Engineer, consulting services available On Feb 11, 1:23 pm, doug wrote: > Thanks for the advice every one. > > T. J. Crowder, > > I wonder if a div with style overflow:auto and a scrollbar on the side > could act similar to a frame. > > I figured what makes things go wrong, but still not sure why. I bring > up a lightbox similar to the one > here:http://particletree.com/features/lightbox-gone-wild/. > But, when I do an Ajax.Update of the lightbox div, and I have an > onclick on a button in that lightbox. The code attached to that > button can longer access the global vars. > > However, if my lightbox contains a div, and I update the inner div, I > can access the global vars from onclicks within the lightbox. At least > that's what it seems like is happening. There may be something else > going on, I'm really not sure. > > -d --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Javascript scope
Thanks for the advice every one. T. J. Crowder, I wonder if a div with style overflow:auto and a scrollbar on the side could act similar to a frame. I figured what makes things go wrong, but still not sure why. I bring up a lightbox similar to the one here: http://particletree.com/features/lightbox-gone-wild/. But, when I do an Ajax.Update of the lightbox div, and I have an onclick on a button in that lightbox. The code attached to that button can longer access the global vars. However, if my lightbox contains a div, and I update the inner div, I can access the global vars from onclicks within the lightbox. At least that's what it seems like is happening. There may be something else going on, I'm really not sure. -d --~--~-~--~~~---~--~~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" group. To post to this group, send email to prototype-scriptaculous@googlegroups.com To unsubscribe from this group, send email to prototype-scriptaculous+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/prototype-scriptaculous?hl=en -~--~~~~--~~--~--~---
[Proto-Scripty] Re: Javascript scope
Hi Doug,
> I don't really understand, for example why, if there is a variable
> window.myvar, some Javascript code would not be able to access it...
As far as I know, all code within the same document can access that
property; it is global to the document because it's a property of the
"window" object, which is global to the document. Offhand, I can only
think of two situations where it would be in accessible: 1. If you're
dealing with frames or iframes, those are in separate documents and
they each get their own copy of "window" with its own properties; 2.
If "window" has been hidden by another declaration called
"window" (e.g., a function with "var window" in it, or someone using
'with'), which would be a Bad Idea(tm).
> But, my question is, is there a way I can do some type of alert() and
> have it print out what scope it is executing in?
I don't know of a reliable way to do that, no. You can get hints at
it, as with seasoup's note about arguments.callee, but that won't help
you if you're executing code in the global scope or within an 'exec'.
But good news: You can always tell by looking at the source, because
in JavaScript, scope is dictated by program structure; it's not
determined at runtime.
Most of us are familiar with the concept of globals and locals:
* * * *
var a = "h";
function doSomething() {
// 'a' is a global, so this function can see it
alert(a);
}
doSomething(); // alerts "h", the current value of 'a'
a = "j";
doSomething(); // alerts "j", the current value of 'a'
* * * *
JavaScript takes this to the logical next step: Functions declared
within a scope inherit that scope and all of its parent scopes, in a
chain:
* * * *
var a = "h";
function outermost() {
var b = "e";
function middle() {
var c = "ll";
function innermost() {
var d = "o";
alert(a + b + c + d);
}
innermost();
}
middle();
}
outermost(); // alerts "hello"
* * * *
Cool, huh? Each unqualified reference is resolved by checking it
against the innermost scope and, if not found there, the next scope up
in the chain -- in this case, innermost -> middle -> outermost ->
global. To know what the scope chain looks like, we need only look at
where the functions are defined. This is the crucial bit: It's where
they're defined, not where they're called.
The program structure tells us what variables are in scope for which
functions, but as always, the *values* of those variables is
determined at runtime. It's easy enough to realize that calling
'outermost' above gives us "hello" and that that changes if we change
'a':
* * * *
outermost(); // alerts "hello"
a = "j";
outermost(); // alerts "jello" (mm, Jello)
* * * *
Simple enough, you've changed a global used by one of the inner
functions. We can also do the same thing using a parameter to
'outermost':
* * * *
function outermost(a) {
var b = "e";
function middle() {
var c = "ll";
function innermost() {
var d = "o";
alert(a + b + c + d);
}
innermost();
}
middle();
}
outermost("h"); // alerts "hello"
outermost("j"); // alerts "jello"
* * * *
Note we don't have a global 'a' anymore; it's a parameter of
'outermost'. Doesn't matter, parameters go on the scope chain just
like local variables do.
Where people start to get a bit glassy-eyed is when we start passing
around function references, which we do all the time in JavaScript.
Consider this:
* * * *
function outermost(a) {
var b = "e";
function middle() {
var c = "ll";
function innermost() {
var d = "o";
alert(a + b + c + d);
}
innermost();
}
return middle;
}
* * * *
Note that 'outermost' now returns a reference to the 'middle'
function, it does *not* call it. No alert occurs if we call
'outermost'; it occurs when we call the function returned by
'outermost'. Now, what do we see when we do this:
* * * *
var f1 = outermost("h");
f1();
* * * *
We call 'outermost' with an "h", and it returns a function reference
we store in 'f1', and then we call the function. Well, you probably
said it alerts "hello" -- and you'd be right! How 'bout this:
* * * *
var f1 = outermost("h");
var f2 = outermost("j");
f1();
f2();
* * * *
What do we see when 'f1' is called? And 'f2'? The answers, as you
will have realized, are of course "hello" and "jello", respectively.
This is because a function reference includes the execution context of
that function, including the parameters and locals.
"Now hang on a minute," you're saying, "that parameter I passed into
'outermost' the first time is gone by the time I call 'f1'! How can
'f1' still reference it?!" The answer is: The parameter is not
gone. It would be, if there were no outstanding references to it, but
there *is* an outstanding reference to it -- our 'f1' variable refers
to it. That 'a' parameter lives on as a pro
[Proto-Scripty] Re: Javascript scope
> Basically every set of curly braces {} gives you new scope.
This is one of the most confusing aspects of javascript. The above is
not true. There are only two scopes in javascript, global and function
() {}
var a = 'hi';
for (var b = 0; b < 10; b++) {
alert(a); // alerts 'hi'
}
var a = 'hi';
for (var b = 0; b < 10; b++) {
a = 'bye'; // alerts 'hi'
}
alert(a); // alerts 'bye'
var a = 'hi';
function foo() {
var a = 'bye'; // with a var here, javascript thinks you want the
scope local to the function.
}
alert(a); // alerts hi
foo();
alert(a); // alerts hi
var a = 'hi';
function foo() {
a = 'bye'; // without having a var here, javascript assumes you
want global scope
}
alert(a); // alerts hi
foo();
alert(a); // alerts bye
For a real good overview of scope go to jslint.com and look through
their documentation and explanations. Also, read the book Javascript:
The Good Parts.
~Josh Powell
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
[Proto-Scripty] Re: Javascript scope
Basically every set of curly braces {} gives you new scope. It does
(give you) with functions and objects, but i am not sure if it does
for "for", "while" etc. The "this" is different for every level of
scope but not every scope (since it points to the current object).
Examine this code
window.ppp = "ppp"; // or ppp = "ppp";
window.self = this; // or self = this;
// make a scope
(function(){
// make a local var with the same name
var ppp = "qqq";
var self = this;
// another scope
function alert_ppp() {
// access local
alert("ppp is: " + ppp);
alert("self is: " + self);
// access global
alert("global ppp is: "window.ppp);
alert("global self is: "window.self);
}
alert_ppp();
})();
As you can see globals are indeed available.
And though you have different scopes the "this" is the same (window).
However if you make and object and then have alert_ppp() be its method
you will see the local this points to this object, where as this in a
function outside an object will always point to the global window
(since they are kinda methods to the window object).
I hope that explains a little bit.
As for scope identifier -- arguments.callee would identify your
current function.
On Feb 11, 3:21 am, doug wrote:
> I have read about Javascript and scope and I still don't really
> understand it completely, particularly when it comes to Ajax.Updater.
>
> I don't really understand, for example why, if there is a variable
> window.myvar, some Javascript code would not be able to access it, and
> instead it would be undefined for that code. I was thinking
> window.myvar was "global"
>
> But, my question is, is there a way I can do some type of alert() and
> have it print out what scope it is executing in?
>
> thanks,
> -d
--~--~-~--~~~---~--~~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~--~~~~--~~--~--~---
