Yesterday we saw something that was not very clear. Today we will
try to see a complete sample of the HTML javascript client side processing.
We need to understand what is jQuery. By now most of you people will know.
It is a javascript library, a toolkit built on top of the javascript
programming language.
Javascript is not java. It is a fantastic language. It supports
closures, OO and several
such concepts that make it ideal for DOM manipulation we saw
yesterday, html rewriting and
generally working with strings and math.
The first step before we go any further is to download jQuery from
http://code.jquery.com/jquery.js
Otherwise you can directly use the URL in your script tag like this:
<script type="text/javascript" src="http://code.jquery.com/jquery.js";></script>
Okay now that you have jQuery let us learn js and jQuery together.
jQuery significantly simplifies web development and js coding because
of the rich variety of
plugins(http://plugins.jquery.com) and the smallness.
It is the smallest js library and it is very very powerful.
It is a topic in itself, but today we are only going to touch the
basics. I will cover the rest in
one of our monthly Sunday classes.
First a complete sample to begin learning jquery.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
alert("jquery init");
})
</script>
</head>
<body>
</body>
</html>
Another thing. This code need not be in a webserver for us to run.
This can be accessed even using a file:/// URL.
All jQuery code is written inside the container,
$(function() {
})
This is the starting point of jQuery just like the main() function of
the C language.
Once the html page loads the execution starts. This is also known as
the onLoad() or
window.load() event.
Anyway you can do some simple and really nice animations with jQuery
without using
any plugin.
For example you can do something like:
$(function() {
$('body').append("<h1> Simple animation </h1>').show();
$('h1').hide(6000);
})
Here is the complete sample.
$ cat /home/girish/sample.html
<html>
<head>
<script src="http://code.jquery.com/jquery.js";
type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('body').append("<h1> Simple animation</h1>").show();
$('h1').hide(6000);
})
</script>
</head>
<body>
</body>
</html>
You can test this by typing
file:///home/girish/sample.html
in your browser.
Of course you have to change the home directory accordingly. ;)
Before we go any further you have to install the firebug FF(firefox)
plugin that will help
us debug javascript.
Towards the end of this theme in a few days we will see what relation
this has with CGI.
-Girish
--
G3 Tech
Networking appliance company
web: http://g3tech.in ?mail: girish at g3tech.in