Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Newbie: how to understand the argument in overwritten function (http://www.velocityreviews.com/forums/t934026-newbie-how-to-understand-the-argument-in-overwritten-function.html)

john_woo 12-24-2007 04:48 PM

Newbie: how to understand the argument in overwritten function
 
Hi,

in somewhere I saw the following js code:

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY; // line 1

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

function getMouseXY(e) { // line 10
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft; //line 20
tempY = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
tempX = e.pageX; //
line 30
tempY = e.pageY
}
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}
return
true; // line 40
}

Can some one explain:
in line 1, why not passing in argument, any default value, how to
handle overload functions?
in line 20, where is the event object from, event is same as the e in
parameter?
in line again, where is e from, as the caller doesn't pass in e;
in line 40, what sense to return true?
also, in line, can I write something like aForm.onmousemove or
button.onmousemove?

--
Thanks lots.
John

Lee 12-24-2007 05:08 PM

Re: Newbie: how to understand the argument in overwritten function
 
john_woo said:
>
>Hi,
>
>in somewhere I saw the following js code:
>
>// Set-up to use getMouseXY function onMouseMove
>document.onmousemove = getMouseXY; // line 1
>
>// Temporary variables to hold mouse x-y pos.s
>var tempX = 0
>var tempY = 0
>
>function getMouseXY(e) { // line 10
> if (IE) { // grab the x-y pos.s if browser is IE
> tempX = event.clientX + document.body.scrollLeft; //line 20
> tempY = event.clientY + document.body.scrollTop;
> } else { // grab the x-y pos.s if browser is NS
> tempX = e.pageX; //
>line 30
> tempY = e.pageY
> }
> // catch possible negative values in NS4
> if (tempX < 0){tempX = 0}
> if (tempY < 0){tempY = 0}
> return
>true; // line 40
>}
>
>Can some one explain:
>in line 1, why not passing in argument, any default value, how to
>handle overload functions?


In line 1, getMouseXY is not being invoked, so you don't pass it
any arguments. That line iss assigning a reference to the function
to the global variable "document.onmousemove", so when the browser
internally decides to invoke document.onmousemove, it actually
invokes getMouseXY, sending it whatever arguments it was providing
to onmousemove.

>in line 20, where is the event object from, event is same as the e in
>parameter?


The IE browser provides a global variable named "event", which
is used in about the same way as the first argument passed to
event handlers by other browsers (name "e" in this code).

>in line again, where is e from, as the caller doesn't pass in e;


When the browser calls document.onmousemove (which is now a
reference to getMouseXY), it passes an event argument, unless
it is Internet Explorer, in which case it sets the global
variable "event".

>in line 40, what sense to return true?


Some event handlers will cancel the event (ie, prevent the mouse
from moving) if it returns false. I don't know that onmousemove
has this behavior, but the author considered it a good idea to
explicitly return true, possibly just to assure us all that the
event is being allowed to continue.

>also, in line, can I write something like aForm.onmousemove or
>button.onmousemove?


I wouldn't count on those handlers being supported, but I'd
have to check the documentation.


--


john_woo 12-24-2007 05:42 PM

Re: Newbie: how to understand the argument in overwritten function
 
Thanks lots Lee,

one more question, if there are functions:

function getMouseXY() {}

function getMouseXY(e) {}

function getMouseXY(e, e) {}

then for
document.onmousemove = getMouseXY;

which getMouseXY function referred to?

Thomas 'PointedEars' Lahn 12-24-2007 09:22 PM

Re: Newbie: how to understand the argument in overwritten function
 
john_woo wrote:
> in somewhere I saw the following js code:
>
> // Set-up to use getMouseXY function onMouseMove
> document.onmousemove = getMouseXY; // line 1
>
> // Temporary variables to hold mouse x-y pos.s
> var tempX = 0
> var tempY = 0
>
> function getMouseXY(e) { // line 10
> if (IE) { // grab the x-y pos.s if browser is IE
> tempX = event.clientX + document.body.scrollLeft; //line 20
> tempY = event.clientY + document.body.scrollTop;
> } else { // grab the x-y pos.s if browser is NS
> tempX = e.pageX; //
> line 30
> tempY = e.pageY
> }
> // catch possible negative values in NS4
> if (tempX < 0){tempX = 0}
> if (tempY < 0){tempY = 0}
> return
> true; // line 40
> }
>
> Can some one explain:
> in line 1, why not passing in argument, any default value,


The signature of event handlers is defined by the respective DOM.

> how to handle overload functions?


Event handlers cannot be overloaded. However, you can define the assigned
event listener as a function that calls another method. This method can
have an arbitrary signature.

> in line 20, where is the event object from,


It is a host-defined property that stores a reference to a host object, of
an object along the scope chain, probably the same object as referred to by
the host-defined `window' property of the Global Object.

> event is same as the e in parameter?


Not quite. The MSHTML DOM provides the event object reference with `event',
while other DOMs provide it with the first argument of the event listener.

> in line again, where is e from, as the caller doesn't pass in e;


The caller is the event handler, and it does pass the value for `e' if the
UA's DOM implements the NN4 DOM or W3C DOM Level 2 Events in that regard.

> in line 40, what sense to return true?


Provided that the `return' keyword and the `true' value are actually on one
line: returning a boolean value to the event handler for an event causes
cancellation or not-cancellation of the event, depending on the value and
the event, in proprietary DOMs. I don't see what sense it would make to
cancel the `mouseover' event, so that might as well be only a result of the
developer's habits.

> also, in line, can I write something like aForm.onmousemove or
> button.onmousemove?


Of course you can. But what are you trying to accomplish with that?


PointedEars
--
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>

Lee 12-24-2007 09:24 PM

Re: Newbie: how to understand the argument in overwritten function
 
john_woo said:
>
>Thanks lots Lee,
>
>one more question, if there are functions:
>
>function getMouseXY() {}
>
>function getMouseXY(e) {}
>
>function getMouseXY(e, e) {}
>
>then for
>document.onmousemove = getMouseXY;
>
>which getMouseXY function referred to?


Javascript is not Java.
You only get one getMouseXY


--


Thomas 'PointedEars' Lahn 12-24-2007 09:53 PM

Re: Newbie: how to understand the argument in overwritten function
 
john_woo wrote:
> [...]
> function getMouseXY() {}
>
> function getMouseXY(e) {}
>
> function getMouseXY(e, e) {}
>
> then for
> document.onmousemove = getMouseXY;
>
> which getMouseXY function referred to?


If the implementation is ECMAScript-compliant, then it should refer to the
function declared last with that identifier in the code. See ECMAScript Ed.
3 Final, section 10.1.3. Try window.alert(getMouseXY) or
window.alert(document.onmousemove) to test it; the displayed window would
contain the method's signature.


PointedEars

Evertjan. 12-24-2007 10:07 PM

Re: Newbie: how to understand the argument in overwritten function
 
Thomas 'PointedEars' Lahn wrote on 24 dec 2007 in comp.lang.javascript:

> john_woo wrote:
>> [...]
>> function getMouseXY() {}
>>
>> function getMouseXY(e) {}
>>
>> function getMouseXY(e, e) {}
>>
>> then for
>> document.onmousemove = getMouseXY;
>>
>> which getMouseXY function referred to?

>
> If the implementation is ECMAScript-compliant, then it should refer to
> the function declared last with that identifier in the code.


Well, yes, however:

Compare this script:

================================================== ===
<span id='da'>aaaaaaaaaaaaaa</span>
<span id='db'>bbbbbbbbbbbbbb</span>
<span id='dc'>cccccccccccccc</span>


<script type='text/javascript'>

function TheFunction() { alert('a') }

document.getElementById('da').onmouseover = TheFunction

function TheFunction() { alert('b') }

document.getElementById('db').onmouseover = TheFunction

function TheFunction() { alert('c') }

document.getElementById('dc').onmouseover = TheFunction

</script>
================================================== ===

with this script:

================================================== ===
<span id='da'>aaaaaaaaaaaaaa</span>
<span id='db'>bbbbbbbbbbbbbb</span>
<span id='dc'>cccccccccccccc</span>


<script type='text/javascript'>

var TheFunction = function() { alert('a') }

document.getElementById('da').onmouseover = TheFunction

var TheFunction = function() { alert('b') }

document.getElementById('db').onmouseover = TheFunction

var TheFunction = function() { alert('c') }

document.getElementById('dc').onmouseover = TheFunction


</script>
================================================== ===

They are different in effect [in IE7 and FF2 at least]

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

sasuke 12-26-2007 05:33 PM

Re: Newbie: how to understand the argument in overwritten function
 
On Dec 25, 3:07 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
> Compare this script:
>
> ================================================== ===
> <span id='da'>aaaaaaaaaaaaaa</span>
> <span id='db'>bbbbbbbbbbbbbb</span>
> <span id='dc'>cccccccccccccc</span>
>
> <script type='text/javascript'>
>
> function TheFunction() { alert('a') }
>
> document.getElementById('da').onmouseover = TheFunction
>
> function TheFunction() { alert('b') }
>
> document.getElementById('db').onmouseover = TheFunction
>
> function TheFunction() { alert('c') }
>
> document.getElementById('dc').onmouseover = TheFunction
>
> </script>
> ================================================== ===
>
> with this script:
>
> ================================================== ===
> <span id='da'>aaaaaaaaaaaaaa</span>
> <span id='db'>bbbbbbbbbbbbbb</span>
> <span id='dc'>cccccccccccccc</span>
>
> <script type='text/javascript'>
>
> var TheFunction = function() { alert('a') }
>
> document.getElementById('da').onmouseover = TheFunction
>
> var TheFunction = function() { alert('b') }
>
> document.getElementById('db').onmouseover = TheFunction
>
> var TheFunction = function() { alert('c') }
>
> document.getElementById('dc').onmouseover = TheFunction
>
> </script>
> ================================================== ===
>
> They are different in effect [in IE7 and FF2 at least]


Yes, the two scripts are different in the sense that the one which
uses the 'var' keyword for declaring functions ends up creating three
different functions which alert 'a', 'b' and 'c' respectively, while
the one which doesn't use 'var' creates only a single function which
is overwritten twice.

I have always been confused by the terminology, but I guess one of the
forms is called function definition and the other is called function
declaration, though the exact differences between those two have
always been fuzzy to me.


Thomas 'PointedEars' Lahn 12-26-2007 06:21 PM

Re: Newbie: how to understand the argument in overwritten function
 
sasuke wrote:
> On Dec 25, 3:07 am, "Evertjan." <exjxw.hannivo...@interxnl.net> wrote:
>> Compare this script:
>>
>> ================================================== ===
>> <span id='da'>aaaaaaaaaaaaaa</span>
>> <span id='db'>bbbbbbbbbbbbbb</span>
>> <span id='dc'>cccccccccccccc</span>
>>
>> <script type='text/javascript'>
>>
>> function TheFunction() { alert('a') }
>>
>> document.getElementById('da').onmouseover = TheFunction
>>
>> function TheFunction() { alert('b') }
>>
>> document.getElementById('db').onmouseover = TheFunction
>>
>> function TheFunction() { alert('c') }
>>
>> document.getElementById('dc').onmouseover = TheFunction
>>
>> </script>
>> ================================================== ===
>>
>> with this script:
>>
>> ================================================== ===
>> <span id='da'>aaaaaaaaaaaaaa</span>
>> <span id='db'>bbbbbbbbbbbbbb</span>
>> <span id='dc'>cccccccccccccc</span>
>>
>> <script type='text/javascript'>
>>
>> var TheFunction = function() { alert('a') }
>>
>> document.getElementById('da').onmouseover = TheFunction
>>
>> var TheFunction = function() { alert('b') }
>>
>> document.getElementById('db').onmouseover = TheFunction
>>
>> var TheFunction = function() { alert('c') }
>>
>> document.getElementById('dc').onmouseover = TheFunction
>>
>> </script>
>> ================================================== ===
>>
>> They are different in effect [in IE7 and FF2 at least]

>
> Yes, the two scripts are different in the sense that the one which
> uses the 'var' keyword for declaring functions ends up creating three
> different functions which alert 'a', 'b' and 'c' respectively, while
> the one which doesn't use 'var' creates only a single function which
> is overwritten twice.
>
> I have always been confused by the terminology, but I guess one of the
> forms is called function definition and the other is called function
> declaration, though the exact differences between those two have
> always been fuzzy to me.


What the both of you apparently overlook is that

var f = function ...

and

function f...

differ significantly in the regard of evaluation order.

There is only one important rule to apply here: variable instantiation comes
*before* execution. *But* the term "variable instantiation" is not to be
confused with "variable initialization".

That means in all instances `f' is instantiated before execution, however
only in the second instance it is declared as a reference to a Function
object upon variable instantiation. Accordingly, in the first instance it
is declared having the `undefined' value upon variable instantiation and
only when execution reached that line, is assigned the Function object
reference.


Getting back with the example given before mine, now with line numbers to
ease understanding:

1 function TheFunction() { alert('a') }
2 document.getElementById('da').onmouseover = TheFunction
3 function TheFunction() { alert('b') }
4 document.getElementById('db').onmouseover = TheFunction
5 function TheFunction() { alert('c') }
6 document.getElementById('dc').onmouseover = TheFunction

What essentially happens is:

0. Split the code into parsing tokens.

1. Find a function declaration in line 1. Create a new Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.

2. Find a function declaration in line 3. Create a *new* Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.

3. Find a function declaration in line 5. Create a *new* Function object
and assign a reference to it to the `TheFunction' property of the
Variable Object.

4. No more declarations found. Execute line 2:

document.getElementById('da').onmouseover = TheFunction

Assign a reference to the object `TheFunction' *now* refers to to
the `onmouseover' property of the object that is referred to by the
return value of document.getElementById('da').

5. Execute line 3 (as automatic semicolon insertion ends the statement
in line 2):

document.getElementById('db').onmouseover = TheFunction

Assign a reference to the object `TheFunction' *now* refers to to
the `onmouseover' property of the object that is referred to by the
return value of document.getElementById('da'). That would be the
*same* Function object as the value of `TheFunction' was not altered
in between.

6.-8. and so on.


As for the second example:

1 var TheFunction = function() { alert('a') }
2 document.getElementById('da').onmouseover = TheFunction
3 var TheFunction = function() { alert('b') }
4 document.getElementById('db').onmouseover = TheFunction
5 var TheFunction = function() { alert('c') }
6 document.getElementById('dc').onmouseover = TheFunction

What essentially happens is:

0. Split the code into parsing tokens.

1. Find a variable declaration in line 1. Instantiate the variable
`TheFunction' (as the `TheFunction' property of the Variable object)
as follows:

var TheFunction = undefined;

2. Find `TheFunction' declared in line 3. Execute

var TheFunction = undefined;

3. Find `Thefunction' declared in line 5. Execute

var TheFunction = undefined;

4. Execute line 1, evaluate the right-hand operand, create a new Function
object and assign the reference to it to `TheFunction' (overwriting the
previously assigned `undefined' value):

var TheFunction = function() { alert('a') }

5. Execute line 2:

document.getElementById('da').onmouseover = TheFunction;

document.getElementById('da') is called, and as it would return a
reference to a (host) DOM element object, its `onmouseover' property
would be assigned a reference to the object that `TheFunction' refers to.

6. Execute line 3, evaluate the right-hand operand, create a *new* Function
object and assign the reference to *that* to `TheFunction' (overwriting
the previously assigned value, allowing the previously referred Function
object to be garbage-collected since nothing refers to it anymore):

var TheFunction = function() { alert('b') }

7. Execute line 4:

document.getElementById('db').onmouseover = TheFunction

document.getElementById('da') is called, and as it would return a
reference to a (host) DOM element object, the `onmouseover' property
would be assigned a reference to the *other* object that `TheFunction'
*now* refers to.

8.+9. and so on.


See also ECMAScript Edition 3 Final, 10.1.3 (again).


HTH

PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

Evertjan. 12-26-2007 08:33 PM

Re: Newbie: how to understand the argument in overwritten function
 
Thomas 'PointedEars' Lahn wrote on 26 dec 2007 in comp.lang.javascript:

> sasuke wrote:
>> On Dec 25, 3:07 am, "Evertjan." <exjxw.hannivo...@interxnl.net>
>> wrote:
>>> Compare this script:
>>>
>>> ================================================== ===
>>> <span id='da'>aaaaaaaaaaaaaa</span>
>>> <span id='db'>bbbbbbbbbbbbbb</span>
>>> <span id='dc'>cccccccccccccc</span>
>>>
>>> <script type='text/javascript'>
>>>
>>> function TheFunction() { alert('a') }
>>>
>>> document.getElementById('da').onmouseover = TheFunction
>>>
>>> function TheFunction() { alert('b') }
>>>
>>> document.getElementById('db').onmouseover = TheFunction
>>>
>>> function TheFunction() { alert('c') }
>>>
>>> document.getElementById('dc').onmouseover = TheFunction
>>>
>>> </script>
>>> ================================================== ===
>>>
>>> with this script:
>>>
>>> ================================================== ===
>>> <span id='da'>aaaaaaaaaaaaaa</span>
>>> <span id='db'>bbbbbbbbbbbbbb</span>
>>> <span id='dc'>cccccccccccccc</span>
>>>
>>> <script type='text/javascript'>
>>>
>>> var TheFunction = function() { alert('a') }
>>>
>>> document.getElementById('da').onmouseover = TheFunction
>>>
>>> var TheFunction = function() { alert('b') }
>>>
>>> document.getElementById('db').onmouseover = TheFunction
>>>
>>> var TheFunction = function() { alert('c') }
>>>
>>> document.getElementById('dc').onmouseover = TheFunction
>>>
>>> </script>
>>> ================================================== ===
>>>
>>> They are different in effect [in IE7 and FF2 at least]

>>
>> Yes, the two scripts are different in the sense that the one which
>> uses the 'var' keyword for declaring functions ends up creating three
>> different functions which alert 'a', 'b' and 'c' respectively, while
>> the one which doesn't use 'var' creates only a single function which
>> is overwritten twice.
>>
>> I have always been confused by the terminology, but I guess one of
>> the forms is called function definition and the other is called
>> function declaration, though the exact differences between those two
>> have always been fuzzy to me.

>
> What the both of you apparently overlook is that
>
> var f = function ...
>
> and
>
> function f...
>
> differ significantly in the regard of evaluation order.


I did not overlook anything, Thomas.

I just showed the possibilities of object, read function, assignment

by reference:

var fName = function(){}

and by value:

function fName(){ ... }


[..]

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


All times are GMT. The time now is 09:56 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.