HTML and CSS Reference
In-Depth Information
•
Displaying the results of realtime events:
When certain actions are performed by users, the
app will need to display the result of the action to all the users currently interacting with it.
You'll be using WebSocket technology and Pusher to handle sending the data—we'll cover this
shortly—but information received over the WebSocket connection will trigger an event, just
like a click or any other user interaction. We'll use jQuery to handle those events and perform
tasks based on what's happening in the app.
What Role Does It Play?
jQuery will play the part of half the brains of the app. It will notice anything that changes in the app based on a user
interaction or realtime events and handle that change appropriately, either by animating something, or updating the
user when a change is made somewhere else (as on another user's device).
How Does It Work?
JavaScript is loaded into the HTML markup using a
<script>
tag, which is parsed by the browser. This topic assumes a
basic knowledge of jQuery, so a lot of the basics will be skipped for brevity.
■
Note
If you want to study up on the basics of jQuery, grab a copy of
Pro PHP and jQuery
3
by Jason lengstorf.
eXerCISe 2-3: aDD a SIMpLe JQUerY eFFeCt
to experiment with jQuery, let's add a small script to the htMl file that will do the following:
1.
Bind to hover events on all
<code>
elements.
2.
When a hover occurs, it will then take the text from the tag that the user has hovered
their mouse over and use the text contents of that element to identify other elements on
the page; for example,
<code><time></code>
identifies other
<time>
elements.
3.
the background of the other elements will then be set to yellow.
the first step is to create a new folder called
scripts
in the same directory as your htMl file and create a new
file called
03.js
inside it.
Next, load jQuery and
03.js
into the htMl file using the
<script>
tag, inserting them just above the closing
</body>
tag:
</footer>
<script src="
http://code.jquery.com/jquery-1.7.2.min.js"></script
>
<script src="scripts/03.js"></script>
</body>
3
Search WWH ::
Custom Search