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

In this sample, the floorDiv element is assigned an anonymous function to run when it's
clicked. Within the function, rather than query the DOM for the element again to do some-
thing with it, the this keyword provides a reference to the element that initiated the event. In
this case , $(this) provides a reference to the floorDiv element, and you can do whatever you
want with that element. In this case, you are only changing the background color style prop-
erty of the div . In more advanced scenarios, the result of the selector can return more than
one element. The following example demonstrates this:
$("document").ready(
function () {
$('#floorDiv').click(function () {
$("div").each(function () { $(this).css("background-color", "red");
});
})
}
);
In this example, when floorDiv is clicked, $(“div”) finds all the div elements in the page.
Then it calls the each operator, which calls the callback function passed into it for each ele-
ment that's returned. Then, $(this) is used to modify the background color of each div . In this
way, the use of the this keyword is extremely efficient because it provides quick direct access
to each element with very little code.
Thought experiment
Creating a chat application
In this thought experiment, apply what you've learned about this objective. You can
find answers to these questions in the “Answers” section at the end of this chapter.
Would you use WebSockets or would you use AJAX to create an asynchronous
bi directional communication application in JavaScript? For this though experiment,
describe how you would create an HTML5 JavaScript based real-time chat
application.
Objective summary
■ WebSockets provide bidirectional communication with a server.
■ WebSockets support both non-secure ( ws ) and secure ( wss ) connections to the server.
■ The jQuery AJAX framework provides a mechanism to make asynchronous web
requests.
■ You can wire up events by using the jQuery selector syntax.