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.
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.
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.
Now we have a Class filled with few members, but let us make it more functional and create a simple Calculator class.
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.
To use this class now, we create a new simple HTML file.
Now we create a DIV element for our results.
This is where we will show the result of the calculation.
So far so good, let us now initialize our Object/Class.
And now follows our 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.
If you have any question post them here and I will try to answer them!
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.
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)
![[Image: sfmentors.gif]](http://img151.imageshack.us/img151/5681/sfmentors.gif)
![[Image: ubuntu_5.11.jpg]](https://t1.gstatic.com/images?q=tbn:nF8B7hnvUQPUXM:https://lists.ubuntu.com/archives/ubuntu-es/attachments/20051202/4abe3cb1/ubuntu_5.11.jpg)