What do these dollar signs and parenthesis do?

[gimme_this_gimme_that]

What is going on here with the dollar signs and parenthesis?

$(document).ready(function(){
$("li").behavior("click",function(){
$(this).load(menu.html");
});
});

And when do you use click vs. onclick? Is onclick only an attribute
thing?

Thanks.

 

[cwdjrxyz]

What is going on here with the dollar signs and parenthesis?

$(document).ready(function(){
$("li").behavior("click",function(){
$(this).load(menu.html");

});
});

You might get a better answer if you can give a complete example on a
page that works. One should note that the dollar sign $ is used to
indicate a variable in the server side script php, and unlike in JS
labeling of variables is required every time they are used. In JS you
might see "var something" once, and often the script will work even if
you forget to declare the variable. However in php you will see
"$something" and this must be used every time "something" is needed.
Just a short bit of php code often looks a lot like a short bit of JS
code. The two scripts are just enough alike to get you in trouble if
you just seldom write one of them. You have to keep thinking that you
are writing php and not JS, for example.

 

[gimme_this_gimme_that]

Thanks cwdjrxyz,

I haven't written any PHP - so I didn't recognize it.

The example comes from a slide I perused in a YUI presentation.

 

[Richard Cornford]

What is going on here with the dollar signs and parenthesis?

$(document).ready(function(){
$("li").behavior("click",function(){
$(this).load(menu.html");
});
});

They make for very obscure javascript source code (and disregard a
specified language convention). The - $ - signs are Identifiers, and the
parenthesise that follow them are the wrappers of arguments lists to
function calls (to all practical purposes they are 'call operators').
Meaning that the Identifier - $ - must have been assigned a reference to
a function object (though you will have to look at the rest of the code
involved to find out which function object, as it could be any).

And when do you use click vs. onclick?

That question has on meaning. The - click - above is just a string
literal, any meaning it may have is determined by whichever -
behaviour - method has been defined for whichever object is returned
from whichever functions has been assigned to whichever variable has
the - $ - Identifier. It all depends on the context, and the rest of the
code in that context.

Is onclick only an
attribute thing?

No.

Richard.

 

[gimme_this_gimme_that]

Thanks very much Richard.

 

[Tuomo Tanskanen]

You might get a better answer if you can give a complete example on a
page that works. One should note that the dollar sign $ is used to
indicate a variable in the server side script php, and unlike in JS
labeling of variables is required every time they are used. In JS you
might see "var something" once, and often the script will work even if
you forget to declare the variable. However in php you will see
"$something" and this must be used every time "something" is needed.
Just a short bit of php code often looks a lot like a short bit of JS
code. The two scripts are just enough alike to get you in trouble if
you just seldom write one of them. You have to keep thinking that you
are writing php and not JS, for example.

That is Prototype syntax, http://www.prototypejs.org/.

$('id') is a prototype shorthand for document.getElementById('id') and
so on.

BR, Tumi

 

[RobG]

That is Prototype syntax,http://www.prototypejs.org/.

It may be similar to that used in Prototype.js, but I doubt it's from
that library - Prototype.js does not define "ready", "behavior" or
"load" functions.

There is another library sometimes mentioned in this group that seems
a more likely candidate.

 

[Matt Kruse]

What is going on here with the dollar signs and parenthesis?
$(document).ready(function(){
$("li").behavior("click",function(){
$(this).load(menu.html");
});
});

For some reason no one wants to give you the straight answer.
This is jQuery syntax. http://www.jquery.com

Matt Kruse

 

[Henry]

For some reason no one wants to give you the straight answer.
This is jQuery syntax.http://www.jquery.com

It is not JQuery syntax. There is no such thing as JQuery syntax (nor
Prototype syntax), the code is javascript and so must use javascript
syntax. The code may be calling JQuery functions and methods, but then
it may also be calling the functions and methods of code that is (by
coincidence or imitation) indistinguishable from JQuery in the
external appearance of the functions/methods used above.

 

[Matt Kruse]

It is not JQuery syntax. There is no such thing as JQuery syntax (nor
Prototype syntax), the code is javascript and so must use javascript
syntax. The code may be calling JQuery functions and methods, but then
it may also be calling the functions and methods of code that is (by
coincidence or imitation) indistinguishable from JQuery in the
external appearance of the functions/methods used above.

You can be intentionally obtuse and argumentative all you want, but
that doesn't actually help anyone.

The example syntax most closely resembles jQuery, from my experience.
And since the code snippet comes directly from a presentation by John
Resig, author of jQuery, the original poster would probably be most
interested in checking out jquery.com.

Similarly, if anyone was asking about code like
var panel_one = new YAHOO.widget.Panel("panel_one", {} );
it would be logical to point them to YUI, although the code isn't
necessarily from YUI.

And just for fun, I'll give more info on the code:

$(document).ready(

This command takes a function as an argument, to be executed when the
DOM is ready to be manipulated, but before window.onload is fired.

function(){

This is the beginning of an anonymous function which is the argument
to ready()

$("li").behavior("click",

The $() function, in jQuery and many other libraries, is a selector.
It's argument is typically a CSS selector used to identify elements in
a page which will then be somehow manipulated. In this case, $("li")
will select all "li" elements in the page.
The .behavior syntax isn't something I recognize, but maybe was
included as an example of behavior-driven syntax. In jQuery, you would
typically just write .click(function) which would specify a function
to fire when the "onclick" event is fired.
So this line is attaching a function to be execute onclick of all LI
elements in the page.

function(){
$(this).load("menu.html");
}

This is the function that will be fired when an LI is clicked.
In this example, 'this' will be a reference to the element itself, and
passing it to the $() function just selects it and makes the jQuery
functions available.
In this case, .load() is called which is an AJAX shortcut to load the
specified file and replace the inner content of the selected element
with the content returned from the AJAX call.

);
}
);

And those are there to close everything off.

Sometimes the over-abundance of $(){} and anonymous functions can make
this style of development a bit cryptic. It helps to format the
source. I also add some layers on top of this syntax to avoid so many
anonymous functions, etc. This certainly is only one way to develop
javascript, and other libraries and reusable code use entirely
different approaches. Pick the one that makes sense to you, or none at
all


Matt Kruse

 

[Henry]

You can be intentionally obtuse and argumentative all
you want, but that doesn't actually help anyone.

The question asked was "What is going on here with the dollar signs
and parenthesis?", and what is going on with the dollar signs and
parenthesise has nothing to do with whether the code is using JQuery
or Prototype or anything else. It is a question about javascript
syntax.

The example syntax most closely resembles jQuery,

The example syntax most closely resembles javascript syntax. And if it
were not javascript syntax it certainly could not be effectively using
the JQuery library.

from my experience. And since the code snippet comes
directly from a presentation by John Resig, author of
jQuery, the original poster would probably be most
interested in checking out jquery.com.

<snip>

Or the OP already figured it was JQuery (having attended the
presentation) and was just wondering whether the obscure code had some
significance in the language beyond his/her knowledge or javascript.

 

[Pete Walker]

hello - I believe this is javascript syntax and is merely a function
definition along the lines of

function $(element) {
return document.getElementById(element);
}

and the $ is just the name of the function. It just happens that both
the prototype and jQuery javascript libraries have defined it.

Thus, you can use it whenever you want the element reference so


var e = $('textbox1');

is the same as

var e = document.getElementById('textbox1');

 

[Joost Diepenmaat]

I can't find the post you're replying to. Maybe you should have quoted
something.

hello - I believe this is javascript syntax and is merely a function
definition along the lines of

function $(element) {
return document.getElementById(element);
}
Yes.

and the $ is just the name of the function. It just happens that both
the prototype and jQuery javascript libraries have defined it.

The do (probably out of some misguided attempt at looking cool) but they
shouldn't. Ecma 262, section 7.6:

"The dollar sign ($) and the underscore (_) are permitted anywhere in
an identifier. The dollar sign is intended for use only in mechanically
generated code."

 

[Michael Wojcik]

I can't find the post you're replying to. Maybe you should have quoted
something.

It's from 21 April:

http://groups.google.com/group/comp.lang.javascript/msg/2ef6cb9c83b717ac

Maybe he should have checked the date before replying. (Though I must
admit, the first time I used a BBS chat system, I did the same thing.
That was in the late 1980s, a few years before I started reading Usenet.)

 

[David Mark]

I can't find the post you're replying to. Maybe you should have quoted
something.



Yes.

Actually, it is somewhat worse, but that is the general idea. Add a
useless and incorrectly named global function and add a few
performance penalties.

By coincidence, both were designed by JavaScript neophytes.

The do (probably out of some misguided attempt at looking cool) but they
shouldn't. Ecma 262, section 7.6:

 "The dollar sign ($) and the underscore (_) are permitted anywhere in
an identifier. The dollar sign is intended for use only in mechanically
generated code."

Just to add. Avoid both of these like the plague. They were mistakes
and should not be compounded further by usage. And the ridiculous
pattern cited is just an indicator of incompetence (how many objects
does it take to attach an event?)