Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #11956 > unrolled thread

onclick=function(){obj.meth()}

Back to article view | Back to comp.lang.javascript

Contents

  onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-20 14:02 -0500
    Re: onclick=function(){obj.meth()} "Tom de Neef" <tdeneef@qolor.nl> - 2012-02-20 20:20 +0100
      Re: onclick=function(){obj.meth()} Jake Jarvis <pig_in_shoes@yahoo.com> - 2012-02-20 20:39 +0100
        Re: onclick=function(){obj.meth()} "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-02-21 00:34 +0000
          Re: onclick=function(){obj.meth()} Stefan Weiss <krewecherl@gmail.com> - 2012-02-21 02:13 +0100
            Re: onclick=function(){obj.meth()} Richard Cornford <Richard@litotes.demon.co.uk> - 2012-02-21 04:05 -0800
          Re: onclick=function(){obj.meth()} Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-21 12:47 +0100
            Re: onclick=function(){obj.meth()} John G Harris <john@nospam.demon.co.uk> - 2012-02-21 15:59 +0000
    Re: onclick=function(){obj.meth()} Stefan Weiss <krewecherl@gmail.com> - 2012-02-20 21:09 +0100
      Re: onclick=function(){obj.meth()} "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-02-20 20:29 +0000
        Re: onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-20 16:50 -0500
          Re: onclick=function(){obj.meth()} "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-02-21 11:33 +0000
      Re: onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-20 15:47 -0500
        Re: onclick=function(){obj.meth()} Jake Jarvis <pig_in_shoes@yahoo.com> - 2012-02-20 22:38 +0100
          Re: onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-20 17:12 -0500
        Re: onclick=function(){obj.meth()} Gene Wirchenko <genew@ocis.net> - 2012-02-20 14:04 -0800
          "The this value" (Was: onclick=function(){obj.meth()}) Stefan Weiss <krewecherl@gmail.com> - 2012-02-21 01:37 +0100
            Re: "The this value" (Was: onclick=function(){obj.meth()}) Gene Wirchenko <genew@ocis.net> - 2012-02-20 17:20 -0800
            Re: "The this value" (Was: onclick=function(){obj.meth()}) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-21 13:44 +0100
              Re: "The this value" (Was: onclick=function(){obj.meth()}) Stefan Weiss <krewecherl@gmail.com> - 2012-02-21 22:31 +0100
                Re: "The this value" (Was: onclick=function(){obj.meth()}) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-22 10:55 +0100
                  Re: "The this value" (Was: onclick=function(){obj.meth()}) John G Harris <john@nospam.demon.co.uk> - 2012-02-22 15:58 +0000
          Re: onclick=function(){obj.meth()} "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-02-21 01:30 +0000
        Re: onclick=function(){obj.meth()} Scott Sauyet <scott.sauyet@gmail.com> - 2012-02-20 13:43 -0800
        Re: onclick=function(){obj.meth()} Stefan Weiss <krewecherl@gmail.com> - 2012-02-20 23:17 +0100
          Re: onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-20 17:48 -0500
            Re: onclick=function(){obj.meth()} Stefan Weiss <krewecherl@gmail.com> - 2012-02-21 00:57 +0100
            Re: onclick=function(){obj.meth()} "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-02-21 01:03 +0000
              Re: onclick=function(){obj.meth()} Gene Wirchenko <genew@ocis.net> - 2012-02-20 19:05 -0800
                Re: onclick=function(){obj.meth()} Richard Cornford <Richard@litotes.demon.co.uk> - 2012-02-21 04:14 -0800
                  Re: onclick=function(){obj.meth()} Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-21 13:54 +0100
                  Re: onclick=function(){obj.meth()} Gene Wirchenko <genew@ocis.net> - 2012-02-21 10:17 -0800
                    Re: onclick=function(){obj.meth()} Scott Sauyet <scott.sauyet@gmail.com> - 2012-02-21 11:57 -0800
                      Re: onclick=function(){obj.meth()} Gene Wirchenko <genew@ocis.net> - 2012-02-21 13:39 -0800
                        Re: onclick=function(){obj.meth()} Scott Sauyet <scott.sauyet@gmail.com> - 2012-02-22 05:07 -0800
              Re: onclick=function(){obj.meth()} Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-02-21 12:58 +0100
          Re: onclick=function(){obj.meth()} "Richard Cornford" <Richard@litotes.demon.co.uk> - 2012-02-21 00:45 +0000
            Re: onclick=function(){obj.meth()} Stefan Weiss <krewecherl@gmail.com> - 2012-02-21 02:22 +0100
          Re: onclick=function(){obj.meth()} Puzzled <scratching.head@example.com> - 2012-02-21 08:12 -0500
            Re: onclick=function(){obj.meth()} Scott Sauyet <scott.sauyet@gmail.com> - 2012-02-21 11:14 -0800

Page 1 of 2  [1] 2  Next page →

#11956 — onclick=function(){obj.meth()}

I have a routine that gets called as a method in a loop and
produces a string representing a row in a table.  The text in the
link can be clicked to select it for further processing.

Now I'm trying to convert the code to javascript's version of oo
style, and find that I'm getting a "syntax error" complaint from
firebug, apparently centered on "function()".  If I replace
"onclick=function(){alert('+i+')}" with "onclick=alert('+i+')",
it works.  However, no matter what I do or don't put in  the body
of the anon function, or how I do or don't garnish it with
quotes, whitespace, etc., I get the syntax-error complaint.  Even
completely stripped down as you see it here, I get the complaint.

function row( i )
{
    var rec_s  = '<tr><td><a href="javascript:void(0);" '+ 	  
        'id="foo'+i+'" '+ 
        'onclick=function(){alert('+i+')}>'+i+'</a>'+
	'</td></tr>';
    return rec_s ;
}

I've stared at it til I'm green in  the face, but cannot see
what's wrong.

Many thanks in advance for  any ideas.  

[toc] | [next] | [standalone]

#11957

"Puzzled" <scratching.head@example.com> schreef in bericht 
news:jp45k75qbcjbb5v8tavnmognds11hjihdh@4ax.com...
>
> function row( i )
> {
>    var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>        'id="foo'+i+'" '+
>        'onclick=function(){alert('+i+')}>'+i+'</a>'+
> '</td></tr>';
>    return rec_s ;
> }
>

This function compiles in FF and JSlint doesn't complain either.
Tom

[toc] | [prev] | [next] | [standalone]

#11958

On 20.02.2012 20:20, Tom de Neef wrote:
> "Puzzled"<scratching.head@example.com>  schreef in bericht
> news:jp45k75qbcjbb5v8tavnmognds11hjihdh@4ax.com...
>>
>> function row( i )
>> {
>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>>         'id="foo'+i+'" '+
>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>> '</td></tr>';
>>     return rec_s ;
>> }
>>
>
> This function compiles in FF and JSlint doesn't complain either.
>

It's not about just compiling/passing as syntactically valid js program 
on the first level, the real problem manifests itself "later", when 
actually clicking the resulting anchor.

-- 
Jake Jarvis

[toc] | [prev] | [next] | [standalone]

#11974

Jake Jarvis wrote:
> On 20.02.2012 20:20, Tom de Neef wrote:
>> Puzzled schreef:
>>>
>>> function row( i )
>>> {
>>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>>>         'id="foo'+i+'" '+
>>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>> '</td></tr>';
>>>     return rec_s ;
>>> }
>>>
>>
>> This function compiles in FF and JSlint doesn't complain either.
>>
>
> It's not about just compiling/passing as syntactically valid js
> program on the first level, the real problem manifests itself
> "later", when actually clicking the resulting anchor.

As you say, the real problem will manifest itself later, but that later 
will not be when anchor is clicked.  The issue here is a syntax error; 
an Expression statement is forbidden from commencing with the - 
function - keyword by the language's syntax rules, because that would be 
ambiguous with a function declaration. And the point when that syntax 
error will manifest itself will be when the javascript string defined in 
the function above is processed through an HTML parser (probably via the 
use of innerHTML, but maybe - document.write -). At that point the 
browser must use the text of the - ONCLICK - attribute in the HTML to 
create a javascript function object to assign to the DOM element 
representation's - onclick - property, which is will not be able to do 
because the HTML attribute value contains a javascript syntax error.

Richard. 

[toc] | [prev] | [next] | [standalone]

#11978

On 2012-02-21 01:34, Richard Cornford wrote:
> Jake Jarvis wrote:
>> It's not about just compiling/passing as syntactically valid js
>> program on the first level, the real problem manifests itself
>> "later", when actually clicking the resulting anchor.
> 
> As you say, the real problem will manifest itself later, but that later 
> will not be when anchor is clicked.  The issue here is a syntax error; 
> an Expression statement is forbidden from commencing with the - 
> function - keyword by the language's syntax rules, because that would be 
> ambiguous with a function declaration. And the point when that syntax 
> error will manifest itself will be when the javascript string defined in 
> the function above is processed through an HTML parser (probably via the 
> use of innerHTML, but maybe - document.write -). At that point the 
> browser must use the text of the - ONCLICK - attribute in the HTML to 
> create a javascript function object to assign to the DOM element 
> representation's - onclick - property, which is will not be able to do 
> because the HTML attribute value contains a javascript syntax error.

You're right about the cause of the syntax error, of course, but I beg
to differ about the rest. What the HTML parser does when it encounters
invalid JS in an event handler attribute is completely up to the
implementation. All it is required to do (if scripting is available and
enabled) is register the presence of the onclick attribute, and leave
the rest for the JS engine. After all, the contents of that attribute
could change at any time, so why bother pre-parsing it.

  <a href="#" onclick="|-">.</a>
  <!-- in the main document HTML -->

Firefox, Chrome, Opera, Safari don't blink an eye about this, until the
user clicks the link. Imagine my surprise when I found out that IE8
handles it differently, and does throw a syntax error (I didn't have an
IE9 for testing available).


- stefan

[toc] | [prev] | [next] | [standalone]

#11992

On Feb 21, 1:13 am, Stefan Weiss wrote:
> On 2012-02-21 01:34, Richard Cornford wrote:
<snip>
> You're right about the cause of the syntax error, of course,
> but I beg to differ about the rest. What the HTML parser does
> when it encounters invalid JS in an event handler attribute is
> completely up to the implementation. All it is required to do
> (if scripting is available and enabled) is register the presence
> of the onclick attribute, and leave the rest for the JS engine.
> After all, the contents of that attribute could change at any
> time, so why bother pre-parsing it.
>
>   <a href="#" onclick="|-">.</a>
>   <!-- in the main document HTML -->
>
> Firefox, Chrome, Opera, Safari don't blink an eye about this,
> until the user clicks the link.

Not blinking an eye is not quite the same as evidence of the creation
of the function object at the point of user interaction. The versions
of Opera and Safari that I tried (which are definitely not the latest,
so things may have changed) failed to create the event handler
function silently, in the sense of generating no syntax error reports
(which is not good).  Chrome and Firefox seemed to create the function
object at the point of first access to the element's - onclick -
property, which may be before any user interaction.  And that is not
such a good design either as instead of being warned about syntax
errors when the elements are created you are only going to find out
about the ones that will not work by interacting (programmatically or
by user interaction) with the handlers, which complicates testing.

I tested your proposition with:-

<html>
 <head>
  <title></title>

<script type="text/javascript">
window.onload = function(){
  var t;
  document.body.innerHTML =
          '<div id="x" onclick="||alert(\'here\');"></div>';
  var div = document.getElementById('x');
  alert('1');
  t = (typeof div.onclick);
  alert('2 '+t);
  div.innerHTML = t +'<br>'+ div.onclick+'<br>';
};
</script>

 </head>
 <body>
 </body>
</html>
- where Chrome and Firefox show the error after the first alert, IE
shows the syntax error before the first alert and the Safari and Opera
versions that I tired where silent on the syntax error but reported -
typeof div.onclick - as null and undefined respectively (with clicking
on the field not resulting in any action or error, showing that they
had attempted and failed to create the function, but not making
pinning down the exact moment of attempted creation).


> Imagine my surprise when I found out that IE8
> handles it differently, and does throw a syntax error (I didn't
> have an IE9 for testing available).

Yes, it is unusual for IE to have the better design (and IE 9 is the
same as 8 in this regard), but then all they have done is left things
as they were, while at least Chrome and Firefox have tried to get
clever about it and done something stupid along the way.

Richard.

[toc] | [prev] | [next] | [standalone]

#11988

Richard Cornford wrote:

> Jake Jarvis wrote:
>> On 20.02.2012 20:20, Tom de Neef wrote:
>>> Puzzled schreef:
>>>> function row( i )
>>>> {
>>>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>>>>         'id="foo'+i+'" '+
>>>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>>> '</td></tr>';
>>>>     return rec_s ;
>>>> }
>>>
>>> This function compiles in FF and JSlint doesn't complain either.
>>
>> It's not about just compiling/passing as syntactically valid js

There is no "js".

>> program on the first level, the real problem manifests itself
>> "later", when actually clicking the resulting anchor.
> 
> As you say, the real problem will manifest itself later, but that later
> will not be when anchor is clicked. […]

That depends on the host environment.  Internet Explorer/MSHTML is known to 
compile event-handler attribute values (and IIRC also `href' attribute 
values with `javascript:' URI) when parsing the document; other layout 
engines handle this differently.  So the real problem may manifest itself 
only if the anchor is clicked.

How a layout engine's markup parser handles invalid attribute specifications 
depends on that parser as well.

Further, the current HTML5 working draft at the W3C makes delimiting quotes 
or apostrophes optional with the used attribute value (in general with any 
string of non-whitespace characters) [1].  So this also depends on the 
markup language in which this code is used, in particular it also depends on 
the version of HTML.

Of course, none of this makes the above code in any way correct or even 
recommended/-able.  See also <http://jibbering.com/faq/#javascriptURI>.


PointedEars
___________
[1] <http://www.w3.org/TR/html5/tokenization.html#before-attribute-value-
state>
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#11998

On Tue, 21 Feb 2012 at 12:47:19, in comp.lang.javascript, Thomas
'PointedEars' Lahn wrote:
>Richard Cornford wrote:
>
>> Jake Jarvis wrote:
>>> On 20.02.2012 20:20, Tom de Neef wrote:
>>>> Puzzled schreef:
>>>>> function row( i )
>>>>> {
>>>>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>>>>>         'id="foo'+i+'" '+
>>>>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>>>> '</td></tr>';
>>>>>     return rec_s ;
>>>>> }
>>>>
>>>> This function compiles in FF and JSlint doesn't complain either.
>>>
>>> It's not about just compiling/passing as syntactically valid js
>
>There is no "js".
  <snip>

It isn't ECMA 262 that says the value of an intrinsic event attribute
must be a statement. Richard has invented the generic name "js" for the
sub-languages that do say.

Therefore there *is* now a "js".

  John
-- 
John Harris

[toc] | [prev] | [next] | [standalone]

#11959

On 2012-02-20 20:02, Puzzled wrote:
> Now I'm trying to convert the code to javascript's version of oo
> style
...
> function row( i )
> {
>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+ 	  
>         'id="foo'+i+'" '+ 
>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
> 	'</td></tr>';
>     return rec_s ;
> }

Why are you wrapping "function(){ ... }" around your event handler code?
That's not what "javascript's version of oo style" is. Anonymous
functions have their place, but they need to be part of an expression,
or it's syntax error. Drop the "function(){ ... }" bit (and put the
remaining onclick value in quotes, while you're at it).

There are some other weak spots in your code, but this should resolve
the syntax error.


- stefan

[toc] | [prev] | [next] | [standalone]

#11960

Stefan Weiss wrote on 20 feb 2012 in comp.lang.javascript:

> On 2012-02-20 20:02, Puzzled wrote:
>> Now I'm trying to convert the code to javascript's version of oo
>> style
> ...
>> function row( i )
>> {
>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+        
>>         'id="foo'+i+'" '+ 
>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>      '</td></tr>';
>>     return rec_s ;
>> }
> 
> Why are you wrapping "function(){ ... }" around your event handler
> code? That's not what "javascript's version of oo style" is. Anonymous
> functions have their place, but they need to be part of an expression,
> or it's syntax error. Drop the "function(){ ... }" bit (and put the
> remaining onclick value in quotes, while you're at it).
> 
> There are some other weak spots in your code, but this should resolve
> the syntax error.

This kind of works:

<div onclick=alert('a')>click</div>

but this not:

<div onclick=alert('a b')>click</div>

[so if your string i contains whitespace you are in trouble]

You should have the onclick js in quotes:

<div onclick="alert('a b')">click</div>

even then

<div onclick="function(){alert('a b')}">click</div>

will not work, because this

<script type='text/javascript'>
    function(){alert('a b')}
</script>

does not,
methinks because an anonimous function has to be compiled to be called.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#11964

On 20 Feb 2012 20:29:51 GMT,
"Evertjan." <exjxw.hannivoort@interxnl.net> wrote:

>You should have the onclick js in quotes:
>
><div onclick="alert('a b')">click</div>

I agree, though it didn't really make any difference to the
problem.


>even then
>
><div onclick="function(){alert('a b')}">click</div>
>
>will not work, because this
>
><script type='text/javascript'>
>    function(){alert('a b')}
></script>
>
>does not,
>methinks because an anonimous function has to be compiled to be called.

Could it be that your example doesn't work because it's only the
declaration?  It seems to work if there's a call as well:

<script type='text/javascript'>
	var foo = function(){alert('hello')}
	foo() ;
</script>

I generally stick to writing procedure-style because it
eliminates a lot of the under-the-table craziness of various oo
implementations.  In my procedural javascript code, I've quite
often used an anon function to trick the system into letting me
pass instantiation arguments to the esr.    That's why this
current problem is giving me a headache -- it all should work,
but it doesn't!

[toc] | [prev] | [next] | [standalone]

#11987

Puzzled wrote on 20 feb 2012 in comp.lang.javascript:

> On 20 Feb 2012 20:29:51 GMT,
> "Evertjan." <exjxw.hannivoort@interxnl.net> wrote:
> 
>>You should have the onclick js in quotes:
>>
>><div onclick="alert('a b')">click</div>
> 
> I agree, though it didn't really make any difference to the
> problem.

Yes it does, because on a NGT we are not concerned with your specific 
probelem that includes untold info, like "the string in x never has any 
whitespace, but I did not say so".

The responses are to the group and are used by others, so quoting of 
unknown strings should always be quoted in html, and even then the same 
quote is not allowed to be in such string. 

>>even then
>>
>><div onclick="function(){alert('a b')}">click</div>
>>
>>will not work, because this
>>
>><script type='text/javascript'>
>>    function(){alert('a b')}
>></script>
>>
>>does not,
>>methinks because an anonimous function has to be compiled to be called.
> 
> Could it be that your example doesn't work because it's only the
> declaration?  It seems to work if there's a call as well:
> 
> <script type='text/javascript'>
>      var foo = function(){alert('hello')} // COMPILED
>      foo() ; // CALLED
> </script>
> 

Quite. That's why I set it as an example.

As I said the "anonimous function has to be compiled to be called"


-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#11961

On Mon, 20 Feb 2012 21:09:05 +0100,
Stefan Weiss <krewecherl@gmail.com> wrote:

>On 2012-02-20 20:02, Puzzled wrote:
>> Now I'm trying to convert the code to javascript's version of oo
>> style
>...
>> function row( i )
>> {
>>     var rec_s  = '<tr><td><a href="javascript:void(0);" '+ 	  
>>         'id="foo'+i+'" '+ 
>>         'onclick=function(){alert('+i+')}>'+i+'</a>'+
>> 	'</td></tr>';
>>     return rec_s ;
>> }
>
>Why are you wrapping "function(){ ... }" around your event handler code?
>That's not what "javascript's version of oo style" is. Anonymous
>functions have their place, but they need to be part of an expression,
>or it's syntax error. Drop the "function(){ ... }" bit (and put the
>remaining onclick value in quotes, while you're at it).
>
>There are some other weak spots in your code, but this should resolve
>the syntax error.

What I supplied was the simplest form that gives the error.  What
I'm actually trying to do is use a method as the event service
routine, so a somewhat more accurate version of the code would
be:

// row is called as x.rec_row, 
// where x is the obj instance identifier

// esr is the event service routine declared in x

// i is the integer id of the record that can be selected
// for further processing by clicking the link

 function row( i )
 {
     var proxy = this ;   // create a closure-alias for 'this'
     var rec_s  = '<tr><td><a href="javascript:void(0);" '+
'id="foo'+i+'" '+ 
         'onclick=function(){proxy.esr(i)}>'+i+'</a>'+
 	'</td></tr>';
     return rec_s ;
 }

It's my understanding that to use a method as an esr, I've to
create and use a proxy for 'this' in the event binding as here,
and use an anon function so as to be able to pass arguments.  Is
that not so? 

[toc] | [prev] | [next] | [standalone]

#11963

On 20.02.2012 21:47, Puzzled wrote:
> On Mon, 20 Feb 2012 21:09:05 +0100,
> Stefan Weiss<krewecherl@gmail.com>  wrote:
>
>> On 2012-02-20 20:02, Puzzled wrote:
>>> Now I'm trying to convert the code to javascript's version of oo
>>> style
>> ...
>>> function row( i )
>>> {
>>>      var rec_s  = '<tr><td><a href="javascript:void(0);" '+ 	
>>>          'id="foo'+i+'" '+
>>>          'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>> 	'</td></tr>';
>>>      return rec_s ;
>>> }
>>
>> Why are you wrapping "function(){ ... }" around your event handler code?
>> That's not what "javascript's version of oo style" is. Anonymous
>> functions have their place, but they need to be part of an expression,
>> or it's syntax error. Drop the "function(){ ... }" bit (and put the
>> remaining onclick value in quotes, while you're at it).
>>
>> There are some other weak spots in your code, but this should resolve
>> the syntax error.
>
> What I supplied was the simplest form that gives the error.  What
> I'm actually trying to do is use a method as the event service
> routine, so a somewhat more accurate version of the code would
> be:
>
> // row is called as x.rec_row,
> // where x is the obj instance identifier
>
> // esr is the event service routine declared in x
>
> // i is the integer id of the record that can be selected
> // for further processing by clicking the link
>
>   function row( i )
>   {
>       var proxy = this ;   // create a closure-alias for 'this'
>       var rec_s  = '<tr><td><a href="javascript:void(0);" '+
> 'id="foo'+i+'" '+
>           'onclick=function(){proxy.esr(i)}>'+i+'</a>'+
>   	'</td></tr>';
>       return rec_s ;
>   }
>
> It's my understanding that to use a method as an esr, I've to
> create and use a proxy for 'this' in the event binding as here,
> and use an anon function so as to be able to pass arguments.  Is
> that not so?

When you use HTML "intrinsic event attributes" you write as attribute 
content the statements you want executed

<a onclick="p.esr(2);">2</a>

(note the delimiting with " (details in the HTML specs))


When you script the HTML document by manipulating the higher level DOM 
representation you assign an anonymous function

anchorRef.onclick = function () { p.esr(2); };

-- 
Jake Jarvis

[toc] | [prev] | [next] | [standalone]

#11966

On Mon, 20 Feb 2012 22:38:22 +0100,
Jake Jarvis <pig_in_shoes@yahoo.com> wrote:

>On 20.02.2012 21:47, Puzzled wrote:
>> On Mon, 20 Feb 2012 21:09:05 +0100,
>> Stefan Weiss<krewecherl@gmail.com>  wrote:
>>
>>> On 2012-02-20 20:02, Puzzled wrote:
>>>> Now I'm trying to convert the code to javascript's version of oo
>>>> style
>>> ...
>>>> function row( i )
>>>> {
>>>>      var rec_s  = '<tr><td><a href="javascript:void(0);" '+ 	
>>>>          'id="foo'+i+'" '+
>>>>          'onclick=function(){alert('+i+')}>'+i+'</a>'+
>>>> 	'</td></tr>';
>>>>      return rec_s ;
>>>> }
>>>
>>> Why are you wrapping "function(){ ... }" around your event handler code?
>>> That's not what "javascript's version of oo style" is. Anonymous
>>> functions have their place, but they need to be part of an expression,
>>> or it's syntax error. Drop the "function(){ ... }" bit (and put the
>>> remaining onclick value in quotes, while you're at it).
>>>
>>> There are some other weak spots in your code, but this should resolve
>>> the syntax error.
>>
>> What I supplied was the simplest form that gives the error.  What
>> I'm actually trying to do is use a method as the event service
>> routine, so a somewhat more accurate version of the code would
>> be:
>>
>> // row is called as x.rec_row,
>> // where x is the obj instance identifier
>>
>> // esr is the event service routine declared in x
>>
>> // i is the integer id of the record that can be selected
>> // for further processing by clicking the link
>>
>>   function row( i )
>>   {
>>       var proxy = this ;   // create a closure-alias for 'this'
>>       var rec_s  = '<tr><td><a href="javascript:void(0);" '+
>> 'id="foo'+i+'" '+
>>           'onclick=function(){proxy.esr(i)}>'+i+'</a>'+
>>   	'</td></tr>';
>>       return rec_s ;
>>   }
>>
>> It's my understanding that to use a method as an esr, I've to
>> create and use a proxy for 'this' in the event binding as here,
>> and use an anon function so as to be able to pass arguments.  Is
>> that not so?
>
>When you use HTML "intrinsic event attributes" you write as attribute 
>content the statements you want executed
>
><a onclick="p.esr(2);">2</a>

okay, but what's "p" in this case --- is it the instance-id "x"
in my example, or is it "this"?  I need it to be "this", the
self-ref.  

That was the first syntax I tried (eg <a
onclick="this.esr(2);">2</a>).  It didn't work.  Evidently the
terp isn't smart enough to understand that it needs to
special-case 'this' and save off the value that's current when
the binding is made.

My first thought was to cheat by just using the absolute instance
id, but reckoned it would bite me later on if I did, so here I am
:-)

[toc] | [prev] | [next] | [standalone]

#11965

On Mon, 20 Feb 2012 15:47:45 -0500, Puzzled
<scratching.head@example.com> wrote:

[snip]

>It's my understanding that to use a method as an esr, I've to
>create and use a proxy for 'this' in the event binding as here,
>and use an anon function so as to be able to pass arguments.  Is
>that not so? 

     No.  (Please read this understanding that I think I know what you
want to do, but that I do not understand your bit about a proxy.  I am
still weak on exactly how to use the this object.  From my
perspective, JavaScript is a bit weird with how the this object
works.)

     I am fairly new to the deep end of the JavaScript pool, so the
following might not be the best way, but it does work reliably.

     Somewhere, I create the function that is what you call an "event
service routine".  That is *separate* from the on clause.  (Unless the
on action is trivial as in the onfocus clause below, I create a
separate function.)

     For the on clause, I have a call to the function with whatever
parameters I need.  Here is one control from my experimental page:
          <input name="CliCode" id="Text" onfocus="this.select();"
onblur="return FieldData['CliCode'].FIValidation(this);" size="3"
maxlength="3">

     In the code above, FieldData is an array of FieldItem objects.
FieldItem contains data about data fields, and its method
.FIValidation() handles the validation for the field/control.  Because
the control may be accessed, I pass the this object to the validation.
There is absolutely no problem passing parameters.


     Advanced readers: "the this object" is awkward.  "this" with or
without the quotes is confusing.  Is there a better way to refer to
the this object in English text?

Sincerely,

Gene "Dogpaddle" Wirchenko

[toc] | [prev] | [next] | [standalone]

#11975 — "The this value" (Was: onclick=function(){obj.meth()})

On 2012-02-20 23:04, Gene Wirchenko wrote:
>      Advanced readers: "the this object" is awkward.  "this" with or
> without the quotes is confusing.  Is there a better way to refer to
> the this object in English text?

It is awkward. I still haven't found a good way to reduce the
awkwardness in plain text. It's easier when you can use markup (<code>)
or italics or a different color, but on Usenet? *shrugs* I use what
seems appropriate at the moment. Some use "this", or |this|, or `this'.
I think that as long as it's clear what we're talking about, we're okay.
It's not our fault that it has °this° silly name...

BTW, the specs always used to refer to it as "the this value", not "the
this object". IIRC, that's because in ES3 it is possible to set |this|
to a type other than object. In ES5 (strict mode only?), |this| always
has to be of type object. I could be mistaken about the details, but I'm
too lazy to look it up now (it's late, and the wine was good).


- stefan

[toc] | [prev] | [next] | [standalone]

#11979 — Re: "The this value" (Was: onclick=function(){obj.meth()})

On Tue, 21 Feb 2012 01:37:14 +0100, Stefan Weiss
<krewecherl@gmail.com> wrote:

>On 2012-02-20 23:04, Gene Wirchenko wrote:
>>      Advanced readers: "the this object" is awkward.  "this" with or
>> without the quotes is confusing.  Is there a better way to refer to
>> the this object in English text?
>
>It is awkward. I still haven't found a good way to reduce the
>awkwardness in plain text. It's easier when you can use markup (<code>)
>or italics or a different color, but on Usenet? *shrugs* I use what
>seems appropriate at the moment. Some use "this", or |this|, or `this'.
>I think that as long as it's clear what we're talking about, we're okay.
>It's not our fault that it has °this° silly name...

     But we can get stung by it.  I was about to say "this" at one
point in my post, and realised that if it were taken as being the
usual English meaning for "this", it would distort what I intended to
state.

>BTW, the specs always used to refer to it as "the this value", not "the
>this object". IIRC, that's because in ES3 it is possible to set |this|
>to a type other than object. In ES5 (strict mode only?), |this| always
>has to be of type object. I could be mistaken about the details, but I'm
>too lazy to look it up now (it's late, and the wine was good).

     Thank you for that bit about what the spec stated.  I can see
that "the this value" is more accurate as The Awkward-To-Name Entity
is a reference to an object, not an object.

     Hmm, maybe, I should call it "TATNE".

     Hey!  Put down that baseball bat.

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#11993 — Re: "The this value" (Was: onclick=function(){obj.meth()})

Stefan Weiss wrote:

> On 2012-02-20 23:04, Gene Wirchenko wrote:
>>      Advanced readers: "the this object" is awkward.  "this" with or
>> without the quotes is confusing.  Is there a better way to refer to
>> the this object in English text?
> 
> It is awkward. I still haven't found a good way to reduce the
> awkwardness in plain text. It's easier when you can use markup (<code>)
> or italics or a different color, but on Usenet? *shrugs* I use what
> seems appropriate at the moment. Some use "this", or |this|, or `this'.
> I think that as long as it's clear what we're talking about, we're okay.
> It's not our fault that it has °this° silly name...

One must also differentiate between the "`this' value" (in the 
specification) and the "value of `this'" (in program code).

> BTW, the specs always used to refer to it as "the this value", not "the
> this object".

Correct.

> IIRC, that's because in ES3 it is possible to set |this| to a type other
> than object.

I do not see how that could be possible.  While it is true that you can 
specify the `this' value as not being an object reference, the value of 
`this' in ECMAScript Ed. 3-conforming program code will *always* be a 
reference to an object [1].

> In ES5 (strict mode only?), |this| always has to be of type object.

Incorrect; rather the reverse is true.

In ECMAScript Edition 5 strict mode function calls or execution contexts, 
`this' only refers to an object (and therefore could be said to be of 
Type(…) "Object") if the function is called *explicitly* as the method or 
constructor of an object [2].  IOW, in any String prototype method `bar', 
for "foo".bar(), `this' is the primitive String value "foo", not a reference 
to the String object referred by new String("foo") that needed to be created 
to call the method in the first place.  [This affects primarily the result 
of the `typeof' operation, as if a primitive string value is used with a 
property accessor, it is being converted internally to a String instance 
anyway (so you still can use `this.trim()', but it is easier to tell string 
values apart, or so perhaps was the intention of Ecma TC39.]

Further, with strict mode calls, the `this' value /is/ the `undefined' value 
if the base value of the Reference of the call was `undefined' or `null' 
[3].  IOW, in the strict mode call bar() or strict mode function context of 
`bar' ("use strict" at the start of the function body), where `bar' is a 
property of the Global Object and `globalRef' is a reference to the Global 
Object, `this' will only refer to the Global Object if bar is called as 
globalRef.bar().  While `bar()' being resolved to `globalRef.bar()' will 
cause the `this' value /to be/ the `undefined' value.

Google V8 in Chromium 16.0.912.77 (Developer Build 118311 Linux) and V8 in 
18.0.1025.33 beta (Linux) are (apparently; tested only in the Script Console 
as yet) not conforming regarding the latter.

> I could be mistaken about the details, but I'm too lazy to look it up now
> (it's late, and the wine was good).

It would appear to be prudent if one, in good scientific tradition, 
refrained from making claims that one is unable or unwilling to 
substantiate.


PointedEars
___________
[1] ECMA-262 Edition 3 Final, section 10.2
[2] ECMA-262 5.1 Edition, sections 11.2.3, 13.2.1 and 10.4.3
[3] ibid.
-- 
Prototype.js was written by people who don't know javascript for people
who don't know javascript. People who don't know javascript are not
the best source of advice on designing systems that use javascript.
  -- Richard Cornford, cljs, <f806at$ail$1$8300dec7@news.demon.co.uk>

[toc] | [prev] | [next] | [standalone]

#12006 — Re: "The this value" (Was: onclick=function(){obj.meth()})

On 2012-02-21 13:44, Thomas 'PointedEars' Lahn wrote:
> Stefan Weiss wrote:
>> IIRC, that's because in ES3 it is possible to set |this| to a type other
>> than object.
> 
> I do not see how that could be possible.  While it is true that you can 
> specify the `this' value as not being an object reference, the value of 
> `this' in ECMAScript Ed. 3-conforming program code will *always* be a 
> reference to an object [1].

You're right, I got that switched around.

>> I could be mistaken about the details, but I'm too lazy to look it up now
>> (it's late, and the wine was good).
> 
> It would appear to be prudent if one, in good scientific tradition, 
> refrained from making claims that one is unable or unwilling to 
> substantiate.

Where do you think you are, the Royal Society? A simple correction would
have been enough, but you chose to ignore four hints at uncertainty
("IIRC"; "could be mistaken"; didn't look it up; had wine) to
pontificate about scientific tradition. Get a life.

- stefan

[toc] | [prev] | [next] | [standalone]

Page 1 of 2  [1] 2  Next page →

Back to top | Article view | comp.lang.javascript

csiph-web