Don't understand Javascript function syntax

Question

I'm looking through a website's source code because I'm trying to learn to some basic Javascript. I understand the first part:

function count() {
  ...
}

I know that the function is called count, and doesn't take any arguments. The next function I don't understand:

$(function(){
  ...
});

Is the function called 'function'? And why is there a '$' symbol at the beginning. I've tried searching the internet, but google just ignores the '$'s and brackets and just searches for 'function'.

In addition, another thing I don't understand; the website has a single button that, when pressed, plays an audio file. The button is set up like so:

<a href="javascript:void()" id="button">
<img src="img/button.png" border="0">
</a>

What does javascript:void() do?

I'm sorry this isn't really a programming question, but I'm trying to learn Javascript and i figured I might have a look what other people are doing.

`$(handler)` check DOC for document ready handler, it is shorthand. Even it is `$(function(){ ... })` not just `$(function(){ ... }` — A. Wolff, Feb 26 '14 at 17:43
This has been asked multiple times before; http://stackoverflow.com/questions/846585/can-someone-explain-the-dollar-sign-in-javascript — Bjorn, Feb 26 '14 at 17:44
How about a simple javascript tutorial. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide — , Feb 26 '14 at 17:46

score 3 · Answer 1 · answered Feb 26 '14 at 17:50

$ is the name (actually a reference to) of a function defined by the very popular jQuery library.

$( ) is calling the $ function

Inside the parenthesis you have an anonymous function definition.

$(function(){ console.log('test'); });

is pretty much the same as:

function nameNotImportant() { console.log('test'); }
$(nameNotImportant);

but it's more concise and you don't have to think of a name for that function.

As you probably noticed, nameNotImportant is not called. A reference to it is passed as parameter to the $ function to do as it wants with it, including call it. That is exactly what the $ function does when passed a function as parameter to it: it calls that function when the DOM is ready to be interacted with.

<a href="javascript:void()">

When an <a>nchor is clicked, the default action performed by the browser is to navigate to its href attribute. If you want it to not do that, you have to somehow interfere with the mechanism, for example by setting the href attribute to execute some javascript code that does nothing. I wouldn't consider it an example of good programming, but that is what it is used for.

score 0 · Answer 2 · edited May 23 '17 at 10:24

0

I'm assuming you know that $ is an alias to jQuery.

$(function() {
    // ...
});

is passing an anonymous function to the $ function, which can take a callback function. This function is run when the DOM is ready, so the more verbose form of this is

$(document).ready(function() {
    // ...
});

In addition,

javascript:void()

is used to simply return undefined for a URL--aka the browser does not navigate to a page when you click on the link. javascript:void() is often used to allow the developer to bind JavaScript click events to the <a> tag.

edited May 23 '17 at 10:24

Community

1
1

answered Feb 26 '14 at 17:53

Kevin Ji

10,479
4
40
63

If javascript:void() does nothing, then how is the audio file played when the button is clicked? – user2397282 Feb 26 '14 at 17:56
@user2397282 A guess is that a click handler is associated with your "button", probably in the code you haven't shown us. Look for `.click` – Tibos Feb 26 '14 at 17:59
The link itself does nothing; the code must have bound some JavaScript to the `` tag's `onclick` event, probably with jQuery. – Kevin Ji Feb 26 '14 at 17:59

Don't understand Javascript function syntax

2 Answers2