Simple Javascript OOP

I like to use maths to exercise my javascript coding.
Below is the code I used to make a simple user interface which uses the input values to calculate the answers to three problems.

html for the user input and results

<div id="ml_show_calcs_here">
	<span>Number(n)</span> <input type="text" id="ml_num1" name="ml_num1" maxlength="4" style="width:45px;" />
	<span>Power(e)</span> <input type="text" id="ml_pow1" name="ml_pow1" maxlength="3" style="width:35px;" /> 
	<input type="submit" id="ml_exp_submit1" name="ml_exp_submit1" value="Get Answers" style="padding:10px" />
	<!---- All calculation results show here ---->
	<div><h3>Alternate minus/plus series result</h3><p id="ml_showA">Answer: <span>?</span></p></div>
	<div><h3>Root value using rational exponent</h3><p id="ml_showB">Answer: <span>?</span></p></div>
	<div><h3>Normal exponent value</h3><p id="ml_showC">Answer: <span>?</span></p></div>

Firstly we add the text input boxes, one for the number(n) and one for the exponent number(e). We use the maxlength property to limit the number of characters allowed to be input in the text boxes to 4 characters and 3 characters.
We also add a submit button and divs for the results to be shown in. The results are actually shown in the span elements of each of the paragraphs. We will see how that is done soon.

That is all the html we need so now for the Javascript.

The constructor

var mlExpResult = function(number,power) {
	        this.number = number;
			this.power = power;

There are two arguments in the constructor: the number (input from our number(n) textbox) and the power (input from our exponent number(e) textbox.
When we make a new instance of the object we pass the values of the textboxes into the constructor like this..

var obj = new mlExpResult(txtbox_number_val,txtbox_exponent_val);


Prototypes inherit all the properties from the object constructor, so a prototype of our object will inherit the properties of number and power passed from the textboxes.

Our first prototype is for the first problem.

mlExpResult.prototype.seriesExponent = function() {
	var running = 0;
	if(this.power > 0) {
		for(var i = 1; i <= this.power; ++i) {
			if(i % 2 == 0) {
				running += Math.pow(this.number,i);
			else {
				running -= Math.pow(this.number,i);
	else {
		var power = Math.abs(this.power);
		for(var i = 1; i <= power; ++i) {
			if(i % 2 == 0) {
				running += (1 / Math.pow(Math.abs(this.number), i));
			else {
				running -= (1 / Math.pow(Math.abs(this.number), i));
	return running;

As you can see the inherited properties are referenced using this.number and this.power throughout the function. To use the prototype function with our object do this..


The other two prototypes are more simple.

mlExpResult.prototype.rootUsingPow = function() {
	var n = Math.pow(Math.abs(this.number), 1 / this.power);
		this.number > 0 ? n : -n;
		return n;
mlExpResult.prototype.singleExponent = function() {
	var n = Math.pow(this.number, this.power);
	return n;

The click event

Please refer to this post for a good cross-browser way to listen to/attach click events.
Basically all we do in the code (once we’ve included the addEvent function from here) is this..

/* Assign submit button to the variable sub */
var sub = document.getElementById('ml_exp_submit1');

/* Click function from other post */			

The function which is called once we click the submit button is this..

The ‘click’ function

function mlGetAnswers1() {
        /* Get values of text boxes */
	var numA = document.getElementById('ml_num1').value;
	var powA = document.getElementById('ml_pow1').value;

        /* Get elements where we will display the results */
	var pA = document.getElementById('ml_showA');
	var pB = document.getElementById('ml_showB');
	var pC = document.getElementById('ml_showC');

        /* Create Objects with textbox values */
	var n = new mlExpResult(numA,powA); 

        /* Invoke the prototypes of our object constructor */ 
        var addA = n.seriesExponent();
        var addB = n.rootUsingPow();
        var addC = n.singleExponent();

        /* Add the results to the relevant spans */			
	pA.childNodes[1].innerHTML = addA;
        pB.childNodes[1].innerHTML = addB;
        pC.childNodes[1].innerHTML = addC;

And that’s it, except for the user text box validation (we might want to check if the user hasn’t entered any invalid characters). To see the whole code in action go here.



No Comments

Leave a response