JavaScript, jQuery, and DOM model interaction

Dollar Signs

The dollar sign jumps right out at the start and identifies a jQuery function. The first line of the script (line 3) is often puzzling for newcomers. It opens the $() statement that ends just before the ending </script> tag.

The browser immediately executes JavaScript code as soon as it parses the HTML page. However, it could happen that the browser hasn't finished rendering the page yet, in which case the script will not find certain page elements and will fail.

To avoid this problem, the function $() encapsulates the part of code that jQuery should execute only after the browser finishes loading all the HTML code. In the example, $() encloses the entire JavaScript code. To be exact, it doesn't enclose the code itself but receives as a parameter a nameless (anonymous, or lambda) function that contains the actual program code.

Apart from the fact that the code enclosed by the anonymous function is guaranteed to execute only after the browser has rendered the page, the functionality does not change.

Anonymous, Yet Present

Anonymous functions are indispensable ingredients of JavaScript. Event handlers that respond to user input (e.g., line 22 in Listing 1) wouldn't work without them. A "function without a name" is quite literally that. Immediately following the function keyword are parameters enclosed in parentheses (in this case they're empty, because you do not need to pass parameters to the function). Lambda functions behave just like simple values (numbers or strings): You can assign them to variables or pass them as parameters to functions.

The first two lines of the lambda function define arrays of various strings with the syntax <array> <index> that define content. Array keys can be zero or positive integers only. Containers with strings as keys, also called associative arrays or hashes in Perl, are called "objects" in JavaScript. Defining objects requires JavaScript Object Notation (JSON), which many other languages now use.

In JSON, curly braces enclose comma-separated lists of key-value pairs (lines 6-11, Listing 1). You access them with the dot notation inherited from Java (<object>.<attribute-name> ). Whenever the attribute name is contained within a variable, the array syntax is as follows:

var name = "attribute";
var value = object[name];

Incidentally, JavaScript variables are always declared with the var keyword – only then can the interpreter determine its scope. In this way, variables declared inside the function remain invisible on the outside.

The sample code stores the color codes of the boxes in the two arrays. The object defined on the next line contains the sayings, one of which the browser displays when you click the corresponding color box.