Implement program flow - Programming in HTML5 with JavaScript and CSS3 - page 169

This code makes heavy use of anonymous functions and callbacks. The first instance is
the document ready callback. In this case, you ask the renderer to call back to an anonymous
function after it reaches the ready state:

$("document").ready( function () {…

Next, you want to handle a click event. In this case, you indicate to the renderer that, when
it receives a click from a specific button, to call back to your anonymous function:

$("#Button1").click( function () {…

Next, in your button click is where you are coding your own logic for the page. User input
is taken from the input box and passed to a function that evaluates it. The function does
nothing more than evaluate the value and produce the result. Any caller that's interested in
the result can provide a callback function to get the result.

DoLongTask($("#inputValue").val(),
function (result, data) {
if (result == "SUCCESS")
alert(data + " is a Success");
else
alert(data + " is a fail");
});

The call to DoLongTask accepts two parameters: the value to evaluate and a callback
function to pass the results to when it's done. An anonymous function is passed into the
DoLongTask function as the callback to run. In this case, the callback is known to provide two
parameters, so the callback function accepts two parameters: the original value and the result
of the evaluation. The callback then provides information to users about what the calculation
result was.
Callback functions are very useful and widely used in JavaScript development. Callback
functions can exist statically with a name or be provided inline dynamically as anonymous.

Using the this pointer
The this pointer is a special object provided by the jQuery framework. When running selec-
tions against the DOM using jQuery, this refers to the object that it finds or the collection of
objects that it finds. It provides a shortcut to accessing the item within the current context of
jQuery filter. In a simple example, the this keyword can be demonstrated as follows:

$("document").ready(
function () {
$('#floorDiv').click(function () {
$(this).css("background-color", "red");
})

}

);