Aim
Moving on rapidly from the first app, I want to spend a little time integrating our first major library. JQuery is a very powerful library developed by John Resig (www.ejohn.org) specifically to deal with many of the problems of working across browsers. Therefore, we will integrate JQuery into our project and re-implement the previous solution taking advantage of some JQuery tricks.Concepts - HTML is data
Once again, feel free to skip this part, but I would like to take a little time to discuss HTML. HTML was first envisiaged as a document format, hence why it has %% tags, % % tags etc. As the web progress more richness was required and these tags became embellished with extra information, such as positional information etc. Then Frames came along, with tables and small images for exact placement and the whole thing became a horrible mess. Recently the web has moved towards a a newer model, whereby the HTML document contains (mostly) data, the presentational aspect is done with Cascading Style Sheets (CSS) and the dynamic stuff is done with JavaScript (JS). What this means is that from now on we will try to adhere to this by having basic html files containing data and separated JS and CSS files. Right, concepts over, on with the code.Directions
So then, JQuery. I have chosen to download it and host locally. You can use this approach which makes it easier to develop offline, however if you have a good permanent connection to the new, you can simply link to the includes at http://code.jquery.com/jquery-1.6.4.min.js. If you do this you can lose the 'lib' directory.- Navigate to www.jquery.com and download the latest version of the library
- Create a new directory for the project with the structure below
- project
- lib
- jquery-1.6.2.min.js
- src
- main.js
- index.html
Code
With regards to the code, the first thing you need to do is include JQuery by placing this include in the head section of the HTML. This simply links the JQuery library into your page and makes all of the functionality available. Now we need to use the onReady capability of JQuery to run our code when the browser is ready. JQuery handles this abstraction for us so that we don't encounter problems. This can be done $(document).ready(); but we will use the shortcut. [% $(function() { // Handler for .ready() called. }); %] Finally, we can use JQuery to tidy up our HTML, we had some pretty ugly things in there, mainly this "onclick=displayMessage();". We can use JQuery to dynamically bind the functionality to this element. Here is the final run down of all the code.index.html
<!doctype html>
<!--
<copywright>
Copyright 2011
@author Andy Monis
-->
<!--
This is much cleaner and simpler. All code has been removed and just data exists in the HTML body
-->
<html>
<head>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="src/mycode.js"></script>
</head>
<body>
<div id="console"></div>
<div id="buttons">
<button id="buttonGo">Display Message</button>
</div>
</body>
</html>
src/mycode.js
/**
* File mycode.js contains all of your application logic
*/
// JQuery creates the special $ operator from which all of the functionality can be accessed.
// Declare an anonymous function inside the JQuery $ operator as the starting point for your code.
// Don;t worry about anonymous functions for now. :-)
$(function() {
// Accessing document elements by ID is easy in JQuery, simply use $("#<id>")
// There are numerous handlers that implement cross browser functionality, here we add a click handler to the button
$("#buttonGo").click( function( event ){
// The anonymous handler is run when the button is clicked, it accesses the console element and updates the message inside.
$("#console").html("Message from JQuery");
});
});
No comments:
Post a Comment