complex-syntax question...;)

[maya]

I'm trying to implement a drag-n-drop script, found here..
http://cwdjr.net/test/newDrag.html

but it doesn't work quite the way I want it to (div to drag-n-drop moves
down the window when I first click on it..)

I'm having a hard time dealing with the code because I don't understand
some things about it..

first of all, in this script the function that does the drag-n-drop is
called thus:

return dragImg(this,event)

but function is declared thus:

function dragImg(div,evt,how) {

what is the 'how' for ?? it's not passed to function from function
call.. if I take it out from function declaration get error that 'how'
is undefined, but where IS it defined in this script (I mean what does
it evaluate to before code inside function starts running (I tested with
an alert in first line of function, it prints 'undefined', so I really
don't get this...)

also can someone pls explain syntax of these var declarations? (rather,
they're var initializations, right?)

how = how || "relative";

var mx = evt.pageX || evt.clientX + root.scrollLeft;

I've never seen vars initialized like this in JS (or any other language
for that matter) and can't look this up because don't even know what to
search for....

thank you very much...

 

[Martin Honnen]

maya wrote:

function dragImg(div,evt,how) {

also can someone pls explain syntax of these var declarations? (rather,
they're var initializations, right?)

how = how || "relative";

how is the name of a parameter to the function dragImg it seems. When
the function is being called without passing in a third argument then
the value of how is the value undefined, the assignment
how = how || "relative"
then sets how to the string value "relative". That happends because ||
is the or operator in JavaScript which roughly looks at its first
operand (which is how having the value undefined), converts it to a
boolean (which in case of undefined yields false), then as the boolean
value is false looks at the second operand (which is the string
"relative") and returns its value.

<http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Reference:Operators:Logical_Operators>

 

[Douglas Crockford]

I'm having a hard time dealing with the code because I don't understand
some things about it..

first of all, in this script the function that does the drag-n-drop is
called thus:

return dragImg(this,event)

but function is declared thus:

function dragImg(div,evt,how) {

This is not a mystery. In JavaScript, missing parameters are given the default
value of undefined. This makes it easy to have optional parameters.

what is the 'how' for ?? it's not passed to function from function
call.. if I take it out from function declaration get error that 'how'
is undefined, but where IS it defined in this script (I mean what does
it evaluate to before code inside function starts running (I tested with
an alert in first line of function, it prints 'undefined', so I really
don't get this...)

how is defined in the function scope. If you delete it from the parameter list,
then obviously you will be introducing bugs.

also can someone pls explain syntax of these var declarations? (rather,
they're var initializations, right?)

how = how || "relative";

var mx = evt.pageX || evt.clientX + root.scrollLeft;

I've never seen vars initialized like this in JS (or any other language
for that matter) and can't look this up because don't even know what to
search for....

The logical OR operator can be used to fill in default values. If how is falsy
(which it will be if it has a value of undefined) then use 'relative' as the
default. If there isn't an evt.pageX value, then use evt.clientX + root.scrollLeft.

If you are going to be effective in this language, then you must be prepared to
understand how it works. Here is a place to start:
http://javascript.crockford.com/survey.html