anonymous functions; naming of and firebug

[mk834tt]

I am using firebug in firefox to debug my buggy javascripts. I have a
"prep" function that builds another function on the fly. It sticks an
onclick event def inside a list element. Looks like (is actually a
book example):

07 for (var ndx = 0; ndx < anchors.length; ndx++) {
08 anchors[ndx].onclick = function() {
09 showPic(this);
10 return false;
11 }
12 }

Firebug show the function as anonymous. I want a name, so I changed
line 08 to:

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

Second question. If I modify the DOM, I don't expect to see it in the
html source code. Is there a display in firebug that renders the
modified source? I see complex listings in the right window (Style
Layout DOM), but can't figure out how to view the code as displayed.

Thanks.

 

[Joost Diepenmaat]

Firebug show the function as anonymous. I want a name, so I changed
line 08 to:

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

I haven't tested that, but it seems to me that that's the way to name
functions.

Second question. If I modify the DOM, I don't expect to see it in the
html source code. Is there a display in firebug that renders the
modified source? I see complex listings in the right window (Style
Layout DOM), but can't figure out how to view the code as displayed.

See the HTML tab in your firebug window (you've never spotted that?!)

Joost.

 

[mk834tt]

See the HTML tab in your firebug window (you've never spotted that?!)

Joost.

Yah. But it shows the orig source. I must have a mode set or
something dumb. Says "Counsole HTML CSS Script DOM Net". Hummmmmm
Thanks.

 

[Joost Diepenmaat]

Yah. But it shows the orig source. I must have a mode set or
something dumb. Says "Counsole HTML CSS Script DOM Net". Hummmmmm
Thanks.

The content of the HTML tab (the one right of the "Console" tab)
/should/ show the actual state of the DOM. Not the HTML source as
recieved from the server. You should also be able to change attributes
etc right in the content of the tab and see the changes in the browser
view and the tab content. I don't even know of any option that would
disable it.

If it doesn't work, you might try to re-install firebug and/or firefox.

 

[mk834tt]

The content of the HTML tab (the one right of the "Console" tab)
/should/ show the actual state of the DOM. Not the HTML source as
recieved from the server. You should also be able to change attributes
etc right in the content of the tab and see the changes in the browser
view and the tab content. I don't even know of any option that would
disable it.

If it doesn't work, you might try to re-install firebug and/or firefox.

Ok, I'll try it. But I do notice that parts of the HTML display are
updated. The list elements however, with the new 'onclick' event
added, do not. onclick works, so I know the javascript 'prep'
function in the first post must have work ok. Well... I suspect it
anyhow.
Thanks again.

 

[Evertjan.]

wrote on 12 feb 2008 in comp.lang.javascript:

I am using firebug in firefox to debug my buggy javascripts. I have a
"prep" function that builds another function on the fly. It sticks an
onclick event def inside a list element. Looks like (is actually a
book example):

07 for (var ndx = 0; ndx < anchors.length; ndx++) {
08 anchors[ndx].onclick = function() {
09 showPic(this);
10 return false;
11 }
12 }

Firebug show the function as anonymous. I want a name, so I changed
line 08 to:

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

Perhaps:

var fuctionArray = [];

for (var ndx = 0; ndx < anchors.length; ndx++) {
anchors[ndx].onclick = fuctionArray[ndx] = function() {
showPic(this);
return false;
};
};

 

[Joost Diepenmaat]

Ok, I'll try it. But I do notice that parts of the HTML display are
updated. The list elements however, with the new 'onclick' event
added, do not. onclick works, so I know the javascript 'prep'
function in the first post must have work ok. Well... I suspect it
anyhow.

On second thought: "non-html" attributes like onclick aren't visible in
the HTML tab. Some details are filtered in any case. For full info on an
element, you can right-click the element in the firebug HTML view and
select "inspect in DOM Tab".

/right now I can't seem to get the actual code of an onclick handler to
display correctly either... hmm...

 

[mk834tt]

I am using firebug in firefox to debug my buggy javascripts. I have a
"prep" function that builds another function on the fly. It sticks an
onclick event def inside a list element. Looks like (is actually a
book example):

07 for (var ndx = 0; ndx < anchors.length; ndx++) {
08 anchors[ndx].onclick = function() {
09 showPic(this);
10 return false;
11 }
12 }

Firebug show the function as anonymous. I want a name, so I changed
line 08 to:

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

Perhaps:

var fuctionArray = [];

for (var ndx = 0; ndx < anchors.length; ndx++) {
anchors[ndx].onclick = fuctionArray[ndx] = function() {
showPic(this);
return false;
};

};

udahman

anchors[ndx].onclick = fa[ndx] = function aname() {

Shows up in the left hand DOM window as aname. Still a no-show in the
HTML window.
Thanks.

 

[mk834tt]

I am using firebug in firefox to debug my buggy javascripts. I have a
"prep" function that builds another function on the fly. It sticks an
onclick event def inside a list element. Looks like (is actually a
book example):
07 for (var ndx = 0; ndx < anchors.length; ndx++) {
08 anchors[ndx].onclick = function() {
09 showPic(this);
10 return false;
11 }
12 }
Firebug show the function as anonymous. I want a name, so I changed
line 08 to:
anchors[ndx].onclick = function aname() {
Firebug still lists an anonymous function. Is there a way to assign a
name?

Perhaps:

var fuctionArray = [];

for (var ndx = 0; ndx < anchors.length; ndx++) {
anchors[ndx].onclick = fuctionArray[ndx] = function() {
showPic(this);
return false;
};

};

udahman

anchors[ndx].onclick = fa[ndx] = function aname() {

Shows up in the left hand DOM window as aname. Still a no-show in the
HTML window.
Thanks.

I mean the right hand DOM window

 

[Evertjan.]

wrote on 12 feb 2008 in comp.lang.javascript:

[please do not quote signatures on usenet, sig. removed]

udahman

anchors[ndx].onclick = fa[ndx] = function aname() {
Shows up in the left hand DOM window as aname. Still a no-show in the
HTML window.
Thanks.

I mean the right hand DOM window

What is a right DOM window?

Do I use the wrong one?

 

[mk834tt]

wrote on 12 feb 2008 in comp.lang.javascript:

[please do not quote signatures on usenet, sig. removed]

udahman
anchors[ndx].onclick = fa[ndx] = function aname() {
Shows up in the left hand DOM window as aname. Still a no-show in the
HTML window.
Thanks.

I mean the right hand DOM window

What is a right DOM window?

Do I use the wrong one?

When I open firebug I get two firebug panes below my web page. The
left menu: "Console HTML CSS Script DOM Net", the right menu changes
with selections made in the left. While the LH menu HTML is hot, the
RH menu says: "Style Layout DOM". (There is actually a menu on top of
these which span both panes: "Inspect Edit | body < html")

I was talking about the RH DOM verses the LH DOM menu selections.
Group charmer Randy Webb would suggest the manual be read. There has
to be some way to view the function. I'll figure it. There is so
much stuff in these DOM listings. And these contain different info
(or at least it appears they do).

 

[Evertjan.]

wrote on 13 feb 2008 in comp.lang.javascript:

wrote on 12 feb 2008 in comp.lang.javascript:

};

[please do not quote signatures on usenet, sig. removed]

udahman

anchors[ndx].onclick = fa[ndx] = function aname() {
Shows up in the left hand DOM window as aname. Still a no-show in
the HTML window.
Thanks.

I mean the right hand DOM window

What is a right DOM window?

Do I use the wrong one?

[please do not quote signatures on usenet, second request]

When I open firebug I get two firebug panes below my web page. The
left menu: "Console HTML CSS Script DOM Net", the right menu changes
with selections made in the left. While the LH menu HTML is hot, the
RH menu says: "Style Layout DOM". (There is actually a menu on top of
these which span both panes: "Inspect Edit | body < html")

Ah yes, I use IE for debugging, being used to set breakpoints.

All scripts are buggy to start with. ;-)

I was talking about the RH DOM verses the LH DOM menu selections.
Group charmer Randy Webb would suggest the manual be read.

He would not!

There is no "the" manual in javascriptendom.

A good advice is to read the NG FAQ.

There has
to be some way to view the function. I'll figure it. There is so
much stuff in these DOM listings. And these contain different info
(or at least it appears they do).

What is "view the function"?

View the sourcecode like [IE]:

function abc(){return 'Hello World'};
alert(abc);

?

 

[Thomas 'PointedEars' Lahn]

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

You have assigned a name with the above, but Firebug never shows the name.
That should not come as a surprise because a) the name is only locally
available (except in JScript) and b) functions don't have a certain name in
the greater context. In ECMAScript implementations, functions are
first-class objects and so there can be any number of references to them.
Each reference would have a different name or no particular name at all, so
Firebug would have to show all of them if that was possible without
considerably reducing its efficiency.

It is possible to see the function declaration when clicking the
"function()" link in the DOM tab in the pane right-hand side if it was
declared in the source code. In all other case it should suffice to
evaluate f.toString() or String(f) in the Console tab, where `f' is the
reference to the callable object.

Second question. If I modify the DOM, I don't expect to see it in the
html source code. Is there a display in firebug that renders the
modified source?

Try the HTML tab.

I see complex listings in the right window (Style Layout DOM), but
can't figure out how to view the code as displayed.

The source is not modified when assigning to the proprietary `onclick' event
handler property; the DOM is. Firebug works as it is supposed to.


PointedEars

 

[Thomas 'PointedEars' Lahn]

I experienced the same,

The same *what*?

http://www.jibbering.com/faq/faq_notes/clj_posts.html

firebug doesn't show event changes linked to objects in html source...

And there is no good reason why it should. Contrary to apparent popular
belief, adding event listeners to an object does not modify the underlying
source code; it does not even modify the document tree. It would be nice if
Firebug could keep track of real event listeners added with scripting, but
that is a Firebug RFE and therefore outside of the scope of this newsgroup.


PointedEars

 

[dhtml]

anchors[ndx].onclick = function aname() {

Firebug still lists an anonymous function. Is there a way to assign a
name?

You have assigned a name with the above, but Firebug never shows the name.
That should not come as a surprise because a) the name is only locally
available (except in JScript) and b) functions don't have a certain name in
the greater context.

In Spidermonkey Functions absolutely do have a name:-

var x = function y() {
console.log(arguments.callee.name);
};

x();

Result: y

As for the problem of inspecting the LI, logging it should have the
effect:

console.log( li );


Garrett

[snip]

 

[Thomas 'PointedEars' Lahn]

anchors[ndx].onclick = function aname() {
Firebug still lists an anonymous function. Is there a way to assign a
name?

You have assigned a name with the above, but Firebug never shows the name.
That should not come as a surprise because a) the name is only locally
available (except in JScript) and b) functions don't have a certain name in
the greater context.

In Spidermonkey Functions absolutely do have a name:-

You miss the point. I have said that Functions do _not_ have a *certain*
name in the greater context. That really is basic knowledge:

var x = function y() {
console.log(arguments.callee.name);
};

x();

Result: y

See? Would you really expect the function to be displayed as `y' despite
the property that is referring to it has the name `x'?

And what about

o.z = function y() {
console.log(arguments.callee.name);
returns false;
};

Would you then expect Firebug displaying `y' as well despite `o.z' refers to
a completely different Function object? Most certainly not.

As for the problem of inspecting the LI, logging it should have the
effect:

console.log( li );

That will of course display only the start tag of the element, a string
representation of the element node and its attribute nodes. Since `onclick'
is an attribute in the markup but not accessed as such here (else you would
assign a string value and not a Function object reference), there is no
change in its representation. (If one used setAttribute(), the change would
be visible in Firebug, but the script would not be likely to work everywhere.)


PointedEars

 

[dhtml]

(e-mail address removed) wrote:
anchors[ndx].onclick = function aname() {
Firebug still lists an anonymous function. Is there a way to assign a
name?
You have assigned a name with the above, but Firebug never shows the name.
That should not come as a surprise because a) the name is only locally
available (except in JScript) and b) functions don't have a certain name in
the greater context.

In Spidermonkey Functions absolutely do have a name:-

You miss the point. I have said that Functions do _not_ have a *certain*
name in the greater context. That really is basic knowledge:

var x = function y() {
console.log(arguments.callee.name);
};

Result: y

See? Would you really expect the function to be displayed as `y' despite
the property that is referring to it has the name `x'?

It doesn't have a name x. x is a reference to a function. That
function has a name property, with the value y. The name property
reflects the function's identifier.

It is entirely possible to have more than one variable point to the
same function. For example:

var a = [], z;
z = a[0] = function y(){};

I would not expect the function's name to be a[0].

And what about

o.z = function y() {
console.log(arguments.callee.name);
returns false;
};

Would you then expect Firebug displaying `y' as well despite `o.z' refers to
a completely different Function object? Most certainly not.

The function that o.z points to has a name. The name is y. It seems to
me to be a natural expectation that function.name would return the
identifier of the function.

It also is a good idea to give a meaningful and unique name to the
function. Of course, the problem with adding an identifier is that old
JScript bug. There's also been some bugs in versions of Safari as
recent as 2.

That will of course display only the start tag of the element, a string
representation of the element node and its attribute nodes.

That is what clicking on it is for.

Since `onclick'

 

[Thomas 'PointedEars' Lahn]

On Feb 17, 4:58 am, Thomas 'PointedEars' Lahn <[email protected]>
wrote:
(e-mail address removed) wrote:
anchors[ndx].onclick = function aname() {
Firebug still lists an anonymous function. Is there a way to assign a
name?
You have assigned a name with the above, but Firebug never shows the name.
That should not come as a surprise because a) the name is only locally
available (except in JScript) and b) functions don't have a certain name in
the greater context.
In Spidermonkey Functions absolutely do have a name:-

You miss the point. I have said that Functions do _not_ have a *certain*
name in the greater context. That really is basic knowledge:

var x = function y() {
console.log(arguments.callee.name);
};
x();
Result: y

See? Would you really expect the function to be displayed as `y' despite
the property that is referring to it has the name `x'?

It doesn't have a name x. x is a reference to a function.

*yawn*

To a Function object. I know. You miss the point again.

That function has a name property, with the value y.

In one implementation.

The name property reflects the function's identifier.

As an ECMAScript extension, it stores the name of a locally available property:

,-[ECMAScript Ed. 3 Final, section 13]
|
| NOTE The Identifier in a FunctionExpression can be referenced from inside
| the FunctionExpression's FunctionBody to allow the function to call itself
| recursively. However, unlike in a FunctionDeclaration, the Identifier in
| a FunctionExpression cannot be referenced from and does not affect the
| scope enclosing the FunctionExpression.

It is entirely possible to have more than one variable point to the
same function.

I know. That is exactly one of my points. You cannot expect Firebug to
display the name there.

The function that o.z points to has a name. The name is y. It seems to
me to be a natural expectation that function.name would return the
identifier of the function.

It would be nonsense for Firebug's DOM inspector to display the same name
for different Function objects just because they happen to have a locally
available property with the same name. For example, it would lead to all
kinds of confusion if an object had

o.onclick = function x() { return true; };
o.onmouseup = function x() { return false; };

and Firebug's DOM inspector were to display

onclick x()
onmouseup x()

instead of what it currently displays:

onclick function()
onmouseup function()

The name property of a Function object, if it has one, is completely
irrelevant outside its local execution context.

It also is a good idea to give a meaningful and unique name to the
function.

It is in a function declaration, not in a function expression.

Of course, the problem with adding an identifier is that old
JScript bug.

Therefore, it is not a good idea.

There's also been some bugs in versions of Safari as recent as 2.

Therefore, it is an even worse idea.

That is what clicking on it is for.

Have you ever done that for an object that has an event listener added?


PointedEars

 

[Lasse Reichstein Nielsen]

....

The function that o.z points to has a name. The name is y. It seems to
me to be a natural expectation that function.name would return the
identifier of the function.

That would have been a reasonable design. Alas, it isn't so. There
is no direct way to access that name from outside its scope. Its
scope is the body of the function.

On the other hand, it's also completely useless outside of its scope,
for anything but documentation purposes, so it's no big loss in
practice.

/L

 

[dhtml]

dhtml wrote:
On Feb 17, 4:58 am, Thomas 'PointedEars' Lahn <[email protected]>
wrote:
(e-mail address removed) wrote:
     anchors[ndx].onclick = function  aname() {

The spec does not contain a - name - property for a function object.
It's there in Spidermonkey.

It would be nonsense for Firebug's DOM inspector to display the same name
for different Function objects just because they happen to have a locally
available property with the same name.  For example, it would lead to all
kinds of confusion if an object had

  o.onclick = function x() { return true; };
  o.onmouseup = function x() { return false; };

and Firebug's DOM inspector were to display

  onclick    x()
  onmouseup  x()

instead of what it currently displays:

  onclick    function()
  onmouseup  function()

The name property of a Function object, if it has one, is completely
irrelevant outside its local execution context.

It works in Spidermonkey. When I try this in Firebug, I can see that
the name - y - will get printed out. It's possibly a different version
of Firebug.

document.body.onclick = function y(){};
document.body

This displays in Firebug:
"<body>"

When I click on that <body>, then choose the right-side DOM tab, I can
see
onclick y()

For me, that makes it easier to debug.

It's possible that I could have two functions with y, but I would
probably not do that. If I did, I'd still ahve it narrowed down to two
functions in the search result.