of the last program I am going to give another very interesting code snippet.
This deals with what is called as DOM manipulation using html, css and
javascript.
Remember, jQuery is not a new programming language. It is just a high
level toolkit
that uses the object oriented facilities in javascript to make web 2.0
programming fun.
And there are 1000s of jQuery plugins for every imaginable use. It is
just so much fun
and enjoyment that for a long time some 4 years ago I was busy with that.
But even today I am not so good at jQuery. I have not authored a
single plugin. I may do
that sometime.
Okay now let us look at some interesting code.
As I said, don't make the mistake I made. Web programming starts to
get interesting
and gives you joy only after you have spent some 3 years or so
learning the various
components.
It is not logic like if condition, for loop,variables and arrays like
perl or python or shell scripting.
Web programming involves understanding the big picture of html, css,
javascript, closures,
functional programming, and DOM manipulation.
What is DOM?
DOM is as the XML folks would say, document object model.
That is actually a tree view of various html nodes or objects.
I will illustrate in a really simple way.
look at this html code.
<body>
<h1> I am here </h1>
</body>
Actually this is what we used in the last example I gave.
The DOM here is this:
body
|
|
h2(I am here)
Okay so you have a model.
Now I will give you one more example.
<body>
<h1 align="center"> Just a title</h1>
<div id="someid"> A paragraph </div>
</body>
Here the tree is:
body
|
| \
h1 div
As you can see it is not very hard.
And each node in the tree has what are called as attributes.
We have two attributes, align = center and id=someid
If you understand things so far we are ready to try this code:
-start-
<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#someid').text("I created this text dynamically");
})
</script>
</head>
<body>
<div id="someid"></div>
</body>
-end
So what we are doing here is basically manipulate the html of the web
page on the
fly and not as static html. We can even do simple counters, a delay,
various colors
using CSS, simple animations and so on.
I will illustrate that in the days that follow.
-Girish
--
Gayatri Hitech
http://gayatri-hitech.com
_______________________________________________
ILUGC Mailing List:
http://www.ae.iitm.ac.in/mailman/listinfo/ilugc
ILUGC Mailing List Guidelines:
http://ilugc.in/mailinglist-guidelines
