Order It Here!
JavaScript classes are helpful when building online forms, displaying dynamic content using Ajax, and to keep your functions centralized.
When working on a website with allot of dynamic content, it can become an overwhelming task to comb through hundreds of lines of code, to track down one function. Until learning how to incorporate class's into my work, I would waste allot of time combing through over a thousand lines of code to find a problem.
JavaScript classes not only keep your functions centralized, they lend themselves to re-usability, which is how they came about. Lets say for example, you build allot of forms with the same fields. You can code one file with a bunch of generic fields, and call them into all your online web forms. Just remember to check to see if the object exits.
For example;
this.Element = document.getElementById("name_of_field");
if (this.Element != null) // Check object exists
{
This way the generic field does not necessarily need to be part of the page you are working on.
Lets get down to the nuts and bolts of the class. I won't get into much detail here only the basics.
Use the new keyword to define an object belonging to a class.
For example;
var myobject = new customer();
To refer to the properties and methods belonging to your object.
myobject.customer_name;
Define your class like this. Always use the this keyword to define your properties in the class. Properties are like variables in a function. This class was taken from the current project I am working on, but will give you an idea of how to construct your class.
function operation_routines(){
//Update row property
operation_routines.prototype.updatedisplay = function (rec){
this.rec = parseInt(rec); //Get record
this.Element = document.getElementById("recordnumber");
if (this.Element != null) // Check object exists
{
if (document.getElementById("recordnumber").value!="")
{
//Recordnumber must be greater than zero to uncheck the previous record. If the record is
//zero, the old record does not exist.
if (document.getElementById("recordnumber").value>0){
//selectedrow=eval(document.getElementById("recordnumber").value) + 100;
this.selectedrow=parseInt(document.getElementById("recordnumber").value) + parseInt(100);
//chk=document.getElementById(selectedrow.toString());
//alert("test" + this.selectedrow);
this.chk=document.getElementById(this.selectedrow);
this.chk.checked=false;
this.rw_num=document.getElementById("recordnumber").value;
//Set old row color to blank.
this.temp = document.getElementById(this.rw_num);
this.temp.style.backgroundColor=""; //Set old
}
}
//document.getElementById("recordnumber").value=record_numb; //Save new record number
document.getElementById("recordnumber").value=this.rec; //Save new record number
//Set current row color.
this.rw_clr = document.getElementById(document.getElementById("recordnumber").value);
this.rw_clr.style.backgroundColor="yellow";
} //End of first if statement.
}
//Display editor
operation_routines.prototype.text_editor = function (){
this.Element = document.getElementById("txt_addr");
if (this.Element != null) // Check object exists
{
//this.temp = document.getElementById("txt_sum").value;
// Use it to attach the editor to all textareas with full featured setup
//WYSIWYG.attach('all', full);
// Use it to attach the editor directly to a defined textarea
WYSIWYG.attach('txt_addr', full); // full setup
// Use it to attach the editor directly to a defined textarea
WYSIWYG.attach('txt_sum', full); // full setup
//document.getElementById("txt_sum").value = this.temp;
// Use it to attach the editor directly to a defined textarea
WYSIWYG.attach('txt_desc', full); // full setup
// Use it to attach the editor directly to a defined textarea
//WYSIWYG.attach('txt_desc', small); // small setup
}
} //End of text_editor
//Strip
operation_routines.prototype.strip_para = function (){
this.Element = document.getElementById("txt_sum");
if (this.Element != null) // Check object exists
{
this.str_cng1=window.frames[0].document.body.innerHTML;
this.chng1 = this.str_cng1.replace(/
/ig,'
'); //Change all
to
this.chng2 = this.chng1.replace(/<\/p>/ig,''); //Change all
window.frames[0].document.body.innerHTML=this.chng2;
}
} //End of strip_para
operation_routines.prototype.get_newrentalapps = function (){
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support AJAX!");
return;
}
var url="../admin/inc/list_docs.php";
var blank = "";
url = url+"?parm=" + blank;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
} //End of get_newrentalapps
} //End of class
Unfortunately, due to the way Mozilla and Internet Explorer work, you can't just declare a pointer to access an object in your JavaScript file. Mozilla will work fine, but IE, like for allot of other things won't. To get around that problem, I created a function called bind. It uses a parameter to determine which method to access.
Example;
bind(name_of_function){
Use case switch to call the correct method for the functionality you are trying to enable on your page.
}
When building your classes, be careful, think about re-usability and centralization. If your just starting out as a professional web developer, you will thank me for writing this blog if you take the time to write classes for the functions in your projects.
There are many resources on the internet to draw on for assistance like, http://javascript.about.com/library/bltut35.htm, or check out, http://www.w3schools.com.
Create realistic 3d images, broadcast ready, using industry-leading 3d Modelling/Animation and Game Design software used by animation studios with Illusion Image.
Order It Here!
