Prototypes

Prototypes are a great thing with javascript, and they really come into there own with ajax and jQuery. A prototype basically it extends the present functional aspects. So lets say that you have a basic shape of animal (legs, head etc) and then you want to extend that basic shape with the option if the animal can fly then you can write a prototype to extend that, the prototype can either be a function or a variable so for example

the “this.” means access the variables/functions within the main type (in this case it would be the animal as the main type).

in the example I am just altering some text within a HTML input tag, to start with I am creating a function (that I will extend later) and create a local (this.) variable that points to the element passed by using the document object, afterwards set the value equal to “hi from the parent”. I called it the parent because it is the main type,

function nameing(elem){this.theelem= document.getElementById(elem);this.theelem.value="hi from the parent";}

then to extend this type, you start with the typename.prototype.extension_name, so the examples below will either return the value from the document element value that was setup in the “parent” / main type, and also the setText function will set the text to the document element.

nameing.prototype.getText=function(){returnthis.theelem.value;}

nameing.prototype.getText = function()
{
return this.theelem.value;
}

this is how I set up the object by calling new on the main type with passing in the element that I want to link to the object.

// sets up the link with the 'thewords' id element within the html pagevar name =new nameing('thewords');

// sets up the link with the 'thewords' id element within the html page
var name = new nameing('thewords');

it is all very similar to other object languages, where you reference the object itself by using the “this.” syntax.

Below is the full html code that you can copy-paste into your favourite text editor and then open up in a web browser to see what you think.

<html><head><scriptlanguage="javascript">
// a prototype
function nameing(elem)
{
this.theelem = document.getElementById(elem);
this.theelem.value = "hi from the parent";
}
nameing.prototype.getText = function()
{
return this.theelem.value;
}
nameing.prototype.setText = function(newText)
{
this.theelem.value = newText;
}
function start()
{
// sets up the link with the 'thewords' id element within the html page
var name = new nameing('thewords');
// since the call above will set the 'thewords' to equal "hi from the parent"
alert(name.getText());
// now we are setting the text
name.setText("genux was here");
// and again outputting the text again
alert(name.getText());
}
</script></head><body><inputid="thewords"/><aonclick="javascript:start()">Click me</a></body></html>