Using Javascript to build dynamic components

You wont learn Javascript here. Nither is this an introduction to W3C DOM. We will not advise you regarding which method is good Ajax or JSON, DOM or innerHTML. Nor are we going to discuss various Ajax toolkits. We will not clutter up our code with rotten hacks trying to make it cross browser compliant. A basic google search will result in numerous tutorials on these topics. This article is just a guide to how we implemented a web application. You can view a snapshot of the web application created by us. This page is a part of a multipart tutorial discussing using Javascript, CSS and HTML to provide a fast Application frontend.

If you are using a non standard browser like Internet Explorer most of what is here will not work for you. We recommend you get before moving forward with this tutorial. While you are at it you should also install a decent debugger like firebug And/OR venkman

Part 1 Javascript

Javascript is a prototype based functional programming language. This page is not a complete javascript reference. To learn Javascript you can refer to Javascript FAQ, ECMAscript and E4X specification and the w3c DOM model. Since Javascript syntax is loosly based on c syntax a newbie to javascript can still go ahead with the discussion here and refer the the documentation stated above when in doubt.

Uses of javascript

We use javascript to provide the following functionality in our application

Dynamic creation of HTML Element.
Providing GUI effects.
Data Checking.
Creating data structures
Synchronous and asynchronous fetching data from the server.

Dynamic creation of HTML element

We use the DOM method over innerHTML for creation of our HTML elements.
We will use an embedded div element with ID "DivContent" for our discussion here the box to the right in green.
the examples we are going to see are

Adding a line of text
Adding a link
Adding a table.
Converting an array to table.

Providing GUI Effects

GUI effects covered here are

Showing and hiding an HTML element
Making an HTML element relocatable.
Drag and Drop support

Data Handling.

Storing data from dialog box in an XML database.
Creating data structures
Form handling.

Filling forms
Checking form data

Communicating with the server

Synchronous Communication
Asynchronous Communication

Some javascript shortcuts

Since our script size contributes to our bandwidth costs we are going to declare some shortcuts

var d=document;
var ddiv; 
ddiv=document.getElementById("DivContent");

Adding Text using javascript

//Adding Text using javascript

function txt(string){
return d.createTextNode(string);
}

so now we have d.getElementById("DivContent").appendChild(txt("Hello World"));
tryit

Adding a Link using javascript

function lnk(url,text){

var a=d.createElement('a');// Create a element of type hyperlink
a.setAttribute('href',url);// Set the Url
a.appendChild(txt(text));
// Set the displayed text
return a;
}

document.getElementById("DivContent").appendChild(lnk("http://www.google.com","Hello World"));
tryit

Creating a table using javascript

function table(column,name){
        var rowcount=0;
        t=d.createElement('table');
        if(name)
                t.setAttribute("class",name);
        h=t.createTHead();
        b=t.appendChild(d.createElement('tbody'));
        function insrow(h,cols,classv){
                var r=h.insertRow(-1);
                if (classv){
                        r.setAttribute('class',classv);
                }
                for (var i=0;i<cols.length;i++){
                        var c=r.insertCell(-1);
                        c.appendChild(cols[i]);
                }
        }
        function ah(cols){//Add header row
                this.insrow(h,cols);
        }
        function ar(cols){//Add a row
                if(rowcount%2)
                {this.insrow(b,cols,"erow");}
                else
                {this.insrow(b,cols,"orow");}
                rowcount++;
        }
        this.ar=ar;
        this.ah=ah;
        this.insrow=insrow;
        this.t=t;
}

tryit Add a 3x3 table

Converting an array to table.

if we want to convert this array to a html table

var myArray=[
 [txt("h1"),txt("h2"),txt("h3")],
 [txt("b1"),txt("b2"),txt("b3")],
 [txt("b1"),txt("b2"),txt("b3")],
 [txt("b1"),txt("b2"),txt("b3")],
 [txt("b1"),txt("b2"),txt("b3")]
 ];

we declare a function arr2tab(array,name)

function arr2tab(array,name){
var length=array[0].length;
t=new table(length,name);
t.ah(array[0]);
for(var i=1;i<array.length;i++){
t.ar(array[i]);
}
return t;
}

document.getElementById("DivContent").appendChild(arr2tab(myArray,"table").t);

tryit

Showing and hiding a dialog box

Showing or hiding an element can be done by

Setting its display property to none or
Setting its visibility to hidden.

The difference between these two attributes is that an element whose display is set to none does not consume space in the layout i.e. the layout of the rest of the element is done as if this element did not exist at all. where as if visibility is set to hidden the element is still layed out but it is not shown i.e. the element consumes space. Hence an invisible element still affects the layout.
we will use the display:none attribute to hide or show our dialog boxes.
document.getElementById("DivContent").style.display='none';
and
document.getElementById("DivContent").style.display='block'
tryit hide show

Movable elements (e.g.div layer)

An element can be repositioned by changing its positional style attributes(top, bottom, left, right) for example we could reposition our div element by
document.getElementById("DivContent").style.left='400px'
tryit
document.getElementById("DivContent").style.top='100px'
tryit
This movement can be tied to an event for example
let us make our div follow the mouse.

function mousefollow(event){
posy=event.clientY +2;
posx=event.clientX +2;
//ddiv=document.getElementById("DivContent");
if(!ddiv)return;
ddiv.style.top=posy+"px";
ddiv.style.left=posx+"px";
}

document.addEventListener('mousemove', drag,false);
tryit Stopit
Text following mouse is an amature trick for new javascript developers. Let us try to enhance it by converting it to a normal drag and drop feature which is supported by all decent application.
This we do by

Drag and drop

function dragstart(event){
mx=event.clientX;
my=event.clientY;
posx=parseInt(ddiv.style.left);
posy=parseInt(ddiv.style.top);
if(!posx)posx=0;
if(!posy)posy=0;
mx=mx-posx;
my=my-posy;
document.addEventListener('mousemove', drag,false);
document.addEventListener('mouseup', dragend,false);
}
function dragend(){
document.removeEventListener('mousemove', drag,false);
document.removeEventListener('mouseup', dragend,false);
}
function drag(event){
posy=event.clientY -my;
posx=event.clientX -mx;
//ddiv=document.getElementById("DivContent");
if(!ddiv)return;
ddiv.style.top=posy+"px";
ddiv.style.left=posx+"px";
}

document.addEventListener('mousemove', drag,false);
There we are with our drag and drop feature
ddiv.addEventListener('mousedown', dragstart,false);
Tryit Stopit

Data handling

Variables:

Variables in javascript are declares as
var variablename; for local variable.
Using a variable name without declaring it makes it a global variable.

Array:

Arrays can be created as
var myarray=new Array(); or
var myarray=[];

Objects:

Javascript objects can be created using
var myobject={
a:10,
b:15.4,
c:"text"
}
these elements can be then accessed as
myobject.a
myobject.b
etc.