Support Forums
OOP JavaScript overview - Printable Version

+- Support Forums (https://www.supportforums.net)
+-- Forum: Categories (https://www.supportforums.net/forumdisplay.php?fid=87)
+--- Forum: Webmaster Support (https://www.supportforums.net/forumdisplay.php?fid=36)
+---- Forum: Website Development (https://www.supportforums.net/forumdisplay.php?fid=43)
+---- Thread: OOP JavaScript overview (/showthread.php?tid=3001)

OOP JavaScript overview - Gaijin - 11-18-2009

Let me show you how to work with Objects in JavaScript.
This is just a simple overview of an creation and use of a JavaScript Object.

First we need to create our class, we do that with the keyword function.

Code:
function jsClass() {

}

Yes this does looks just like a simple javascript function for now, but we will turn that into an Object.
To acces your Class all you need to do is to create a new Instance of the object, new instance is created with the keyword new, followed by the name of the Object.
In this case that would be jsClass.

Code:
var myClass = new jsClass();

There you go, the variable myClass is now a instance of our jsClass object and can access all it's methods and properties.
But our class doesn't have methods and properties, so let's create some.

Properties and methods are created with the keyword this following by a DOT (.) and a name of the method/property.

Code:
function jsClass() {
    this.lastResult = 0; // we have created the so called property named lastResult
    
    // now let us create a method
    // methods are simple said functions
    this.addNumbers = function(num1, num2) {
    
    }
}

Now we have a Class filled with few members, but let us make it more functional and create a simple Calculator class.

Code:
var myClass; // this is our global variable for the class instance

function jsClass() {
    this.currentResult;
    this.num1 = 0;
    this.num2 = 0;
    this.resultParent; // div element to show our results
    
    // now let us create a method
    // methods are simple said functions
    this.getNumbers = function() {
        // define properties num1 and num2 of our class as integer values from our input fields
        this.num1 = parseInt(document.calc.num1.value);
        this.num2 = parseInt(document.calc.num2.value);
    }
    
    this.add = function() {
        this.getNumbers();
        this.currentResult = (this.num1 + this.num2); // do the math
        this.showResult(); // show result
    }
    
    this.sutract = function() {
        this.getNumbers();
        this.currentResult = (this.num1 - this.num2);
        this.showResult();
    }
    
    this.multiply = function() {
        this.getNumbers();
        this.currentResult = (this.num1 * this.num2);
        this.showResult();
    }
    
    this.divide = function() {
        this.getNumbers();
        this.currentResult = (this.num1 / this.num2);
        this.showResult();
    }
    
    this.showResult = function() {
        this.resultParent.innerHTML = this.currentResult;
    }
}

Save the above code as "tut.js".

That is so simple that I don't need to explain it with big words, if you read it few times you'll notice by your self what what is.
Methods are functions inside your class, preperties are variables.
Code:
this.property;
this.method = function()

To use this class now, we create a new simple HTML file.

Code:
<html>
    <head>
        <title>I felt challenged</title>
        <!--import our javascript file tut.js-->
        <script language="javascript" src="tut.js" type="text/javascript"></script>
    </head>
    <body>

Now we create a DIV element for our results.
This is where we will show the result of the calculation.
Code:
<div id="result"></div>

So far so good, let us now initialize our Object/Class.

Code:
<script language="javascript" type="text/javascript">
// create new instance of jsClass();
myClass = new jsClass();
// assign div element by id to our property resultParent
myClass.resultParent = document.getElementById("result");
</script>

And now follows our form.

Code:
<form name="calc">

<input type="text" name="num1" value="0" />
<input type="text" name="num2" value="0" />
// when the user release the mouse button we call our methods add(), subtract().....
<span onmouseup="myClass.add();">Add</span>
<span onmouseup="myClass.subtract();">Subtract</span>
<span onmouseup="myClass.divide();">Divide</span>
<span onmouseup="myClass.multiply();">Multiply</span>
</form>

And that's actually it, you should now understand how JavaScript and OOP works, this is not near everything about OOP.
So I can only say read everything you can get. Big Grin

If you have any question post them here and I will try to answer them!

Source JavaScript (tut.js) (Click to View)
Source HTML (index.htm) (Click to View)


RE: OOP JavaScript overview - Nyx- - 12-06-2009

awesome tutorial ^_^ thanks for this

RE: OOP JavaScript overview - Gaijin - 12-07-2009

Big Grin Thank you!
It's nothing big, but JS oop is simple.

RE: OOP JavaScript overview - Sagittarius - 12-11-2009

thank poster.... thank... Good Tutorial