A Look at The Genesis of Google AdWords

Have you ever thought about how the giant search engine of today,Google inc ever come up with the idea of ads on there site that is not only enriching them but millions of others arround the world? Well in my research i have uncovered an article that showed the innovative idea behind the Google AdWord revenue generation.You could read more about here
History of Google AdWords
I hope you will find this an interesting read

Browser Detection and Cross Browser Support

Have you ever designed a site that looked great in Explorer only for it to look messed up in Firefox or Opera? Well i have and i have looked for ways of dealing with this issue.While conducting a search on the net i came a cross this article that explored the problem.
The article talked a lot about the various browsers and the methods for detecting the each
the link to this article is Browser Detecion and Cross Browser Support
I hope those of you who have the same problem as i do will find this article a great read.

How do i pick up all the fields of a form with javascript?

I have devised a simple way of picking up all the datas in my form for either
client side validation or for packaging and sending it to the server via Ajax
I will illustrate this with a basic form with two input box and two select box
the form structure first

<form method='post' action=''>
<table width='400'align='center'>
<tbody>
<tr>
<td>Firstname</td>
<td><input type='text' id='csFname' name='ssFname'>/</td>
</tr>
<tr>
<td>Lastname</td>
<td><input type='text' id='csLname' name='ssLname'>/</td>
</tr>
<tr>
<td>Age</td>
<td><select id='csAge' name='ssAge'>
< option value=''>Select one< option >
< option value='20'>20< option >
< option value='30'>30< option >
< /select >
</td>
</tr>
<tr>
<td>Sex</td>
<td><select id='csSex' name='ssSex'>
< option value=''>Select one< option >
< option value='Male'>Male< option >
< option value='Female'>Female< option >
< /select >
</td>
</tr>
< tr > < td colspan='2'> < input type='button' value='Submit'/>
</ td > < /tr >
</tbody>
</table>
</form>
All that is needed now is to write the script that will pick up all the data
to do this i always use javascript objects method of coding
or what is called the singleton pattern

var handleForm={
errorCode:0,
dataToServer:null,
errorMessage:null,
/**
*A function to start up the function when the page loads
*/
initDoc:function()
{
if(!document.getElementById && !document.createTextNode)
{return;}
},
/**
* A validating function validates all the form entries
* Node this is a generic validator that determines
* the type of object to be validated and then calls
* the appropriate method to do the validating
*/
validate:function(vtype,data)
{
if(!vtype)
{return}
var self=handleForm;
switch(vtype)
{
case'name':
self.validateName(errorPlace,data);
break;
case'age':
self.validateAge(errorPlace,data);
break;
case'sex':
self.validateSex(errorPlace,data);
break;
}
return;
},
/**
* Define the specific validating scheme for
* all the entries in the validate function
* for instance the name entries validator
* would look like this
*/
validateName:function(errorDiv,dataValue)
{
var self=handleForm;

var exp=%^[a-zA-Z]{3,}$%;
if(!dataValue.match(exp))
{
return self.discardValue(errorDiv,'Invalid name') ;
}else
{return self.acceptValue(errorDiv);}
},
/**
* The discardValue and acceptValue function are
*Helper function that informs the user when something
*goes wrong and when some thing goes write
*/
discardValue:function(errorDiv,errorMsg)
{
var self=handleForm; //references the class itself
//get the place you display error, ususally in a div
var epanel=document.getElementById(errorDiv);
epanel.innerHTML='';

//set the errorCode to a number greater than 0, this tells your script
//stop any process when there is an error somewhere
self.errorCode=434;
epanel.innerHTML=errorMsg;
return;
},
/**
* This is fired when the is a correct value or acceptable value
* it set the errorCode back to 0 and clears the error display place
*/
acceptValue:function(errorDiv)
{
var self=handleForm;
var epanel=document.getElementById(errorDiv);
epanel.innerHTML='';
self.errorCode=0;
return;
},
/**
* We define the function that is called
* when the submit button is clicked
*note that this does the picking,validating and packaging
* of the data for serverside process
*/
getData:function()
{
//define and object array
var ddata=['csFirstname':null,
'csLastname':null,
'csAge':null,
'csSex':null
];

//get all the input object in the form
var inputs=document.getElementsByTagName('input');

//get all the select object in the form
var selects=document.getElementsByTagName('select');

//loop through all the input object validating and putting then into
// the object array ddata

var self=handleForm;

for(var i=0;i<inputs.length;i++)
{
var e=inputs[i];
if(e.type=='text' && e.value.length>0)
{
//here we determine the type of object it is so
// that we can validate it
//remove the prefix cs from the id and pass it to the validating
// function
var thetarget=e.id.substring(2,e.id.length);
self.validate(thetarget,e.value);

//break out of the loop if the is a problem
if(self.errorCode>0)
{
break;
}else
{
// add the value to the array object
ddata[e.id]=e.value;
}
}else
{//fields are empty
alert('Please fill out the form');
}
}
//that does it for all the input fields
// now for the select fields it is still the same loop but with slight difference

for(var k=0;k<selects.length;k++)
{
var d=selects[k];
if(d.selectedIndex>0)
{
//pick out each for validation
var thetarget=d.id.substring(2,d.id.length);
self.validate(thetarget,d.options[d.selectedIndex].value);
if(self.errorCode>0)
{
//a problem break;
}else
{
//add to the object array
ddata[d.id]=d.options[d.selectedIndex].value;
}
}else
{// an empty select box
alert('Please select something');
break;
}
}
if(self.errorCode>0)
{
// the was a problem stop the processing
return;
}
self.dataToServer=ddata;
var formattedData=self.encodeData();
//here goes the Ajax call to the server;
},
/**
* If all the validating went fine without errorCode going beyond 0
* We then encode all the data in the object array for Ajax transmission
* The function bellow does just that
*/
encodeData:function()
{
var self=handleForm;
var str='ajax=1';
var items=self.dataToServer;
for(var item in items)
{
str+='&'+ encodeURIComponent(item)+'='+ encodeURIComponent(items[item]);
}
return str;
}
}

How do i load select object with javascript

To load a select object with javascript we will write two simple functions called
doLoad,loadSelect passing in the select object reference and the data to be loaded
Here we assume the data is comming from an XML file from the server. let's first take
a look at the XML file before we go ahead to write the function
data.xml

<?xml version='1.0' encoding='utf-8'?>
<States>
 <state stateName='Anambra' stateCode='100'/>
 <state stateName='Adamawa' stateCode='101'/>
 <state stateName='Bauchi' stateCode='102'/>
 <state stateName='Edo' stateCode='103'/>
  .
  .
  .
</States>

if we wanted to load this data in to a select object we first define our doLoad function

function doLoad(xmlDoc)
{
 
  /**Here we pick up the select object we want
   * to load based on the id we assigned to it
   */
  var selObject=document.getElementById('SelectId');
  if(!selObject)
    {return;}
   /**
    * Next we get the state element of the XML file
    * This will make docRoot an array of object we could
    *loop through
    */
    var docElem=xmlDoc.getElementsByTagName('state');
 
    /**
     * We call the loadSelect function to do the actual work
     * Passing it the selectObject and the docElem
     */
       
       loadSelect(selObject,docElem);
       return;
}

And that ends the doLoad function, next we look at the loadSelect function

function loadSelect(targetObj,data)
{
   if(!targetObj || !data) 
     {return;}
    
    for(var k=0;k<data.length;k++)
    {
      var options=data[k];
      var option=document.createElement('option');
       option.value=options.getAttribute('stateCode');
 option.appendChild(document.createTextNode(options.getAttribute('stateName')));
     targetObj.appendChild(option);
     option=null;
     options=null;
      
    }
   return;
}

And that does the loading of the XML data into the select object
Note that the structure of the XMl data matters a lot when it comes to loading
the Select Object because Javascript has a number of ways of dealing with
XMl data with its DOM capability, i have used the most basic way of dealing
with XML using javascript DOM