Apollolux: aside

2013-06-14T01:09:19Z

aside

Apollolux: Apollolux moved page Simple OOP in JavaScript to JavaScript/Simple OOP: new conventions

2013-06-14T01:08:16Z

Apollolux moved page Simple OOP in JavaScript to JavaScript/Simple OOP: new conventions

Apollolux: link text

2013-06-14T00:18:25Z

link text

Apollolux: created from http://web.archive.org/web/20120828183913/http://www.spheredev.org/wiki/Simple_OOP_in_JavaScript

2013-06-14T00:17:44Z

created from http://web.archive.org/web/20120828183913/http://www.spheredev.org/wiki/Simple_OOP_in_JavaScript

New page

There is an alternate article for this that is more thorough, but uses more jargon and is probably more suited to more advanced programmers. This more advanced article covers advanced concepts such as Polymorphism and Inheritance. See [[Object oriented programming]].

So you heard a lot about OOP and decided to check it out? Good, that's why we're here. I'm assuming you know ''a bit'' about JavaScript syntax, but this shouldn't be too hard, just things like <code>if</code> and <code>function</code>.

''If you want to learn, but don't want to shovel through text, go to [[#I'm dumb...]]''

''If you know a bit about classes but don't like explanations, go to [[#I'm lazy...]]''

If you want the whole explanations thing, as well as two ways to define methods, just read through the example.

__TOC__

==What is OOP?==
OOP = '''Object-oriented programming'''

It's using these things called ''objects'' to do stuff. An object is just like a car, or a ball, or a person. It has '''properties''': info that describes it, e.g.
<syntaxhighlight>
person.hairColour = CreateColor(0, 0, 0); // black hair
</syntaxhighlight>

Objects also have methods: things that the object can do, e.g.
<syntaxhighlight>
person.jump(5);
</syntaxhighlight>

==Why should I care about OOP?==
Two reasons. First, it's a very natural way of looking at things. It helps a lot in games, because objects occur very naturally in them too, like the player, a spaceship, a sword, shield, an enemy, and so on. Sphere makes games.

Second, it makes your JavaScript code much neater and easier to handle later on. OOP stops you repeating code and so lets you type less. Less typing = less errors = faster completion of your game. It grows easier too.

==I'm dumb...==
This is speed mode. From zero to hero in ten minutes.

Objects are like things in the real world. Things have '''properties''', e.g. person has an eyeColor, and they have '''methods''', e.g. person can clap.

Here's how we can make a simple Person object:
<syntaxhighlight>
function Person(name, eyeColor) {
this.name = name;
this.eyeColor = eyeColor;
}
</syntaxhighlight>

We can now make Persons:
<syntaxhighlight>
var bob = new Person("Bob", "blue");
var ted = new Person("Ted", "teal");
</syntaxhighlight>

We can get properties:
<syntaxhighlight>
var a = bob.name // a now contains "Bob"
var b = ted.eyeColor // b now contains "teal"
</syntaxhighlight>

We can set properties:
<syntaxhighlight>
bob.eyeColor == "brown" // false
bob.eyeColor = "brown";
bob.eyeColor == "brown" // true
</syntaxhighlight>

We can make methods. They're like functions, but for an object:
<syntaxhighlight>
Person.prototype.clap = function () {
Abort(
"This was a silence game.\n" +
"You just lost, " + this.name + ".\n" +
"Game over.\n" );
}
</syntaxhighlight>

We can now call methods.
<syntaxhighlight>
ted.clap();
</syntaxhighlight>

That will show:
<pre>
This was a silence game.
You just lost, Ted.
Game over.
</pre>

That's it!

==Example: kicking people==
The choice might be my misanthropy showing. Oh well.

In this example, we'll make a MalePerson object, capable of kicking, and being kicked.

===The MalePerson template===
Let's write some code:
<syntaxhighlight>
function MalePerson(name) {
this.name = name;
this.maxHitPoints = 20;
this.hitPoints = this.maxHitPoints;
}
</syntaxhighlight>

This is like a template for all MalePersons. They all have a ''name'', they all have ''maxHitPoints'' and they all have ''hitPoints''. Those are all called '''properties'''.

Objects that come out of the same template can have different properties, e.g. one MalePerson object could have a name of "Bob", while another has a name of "Jim". You'll see this when we make a few objects from this template.

===MalePerson methods===
'''Methods''' are a way for your objects to 'do' things, like 'kick' or 'takeDamage'. They're just functions, but connected to an object.

There are 3 ways of making methods. I'll only cover one.
<syntaxhighlight>
/**
* Kick another MalePerson.
* @param victim The other MalePerson object.
* @param location String, place on body to kick the other person.
*/
MalePerson.prototype.kick = function (victim, location) {
victim.takeDamage(location, 11);
}

/**
* Take damage to an area.
* @param area String, the location of the damage.
* @param amount Number, normal amount of damage taken.
*/
MalePerson.prototype.takeDamage = function (location, amount) {
if (location == "groin")
this.hitPoints = this.hitPoints - amount * 2;
else
this.hitPoints = this.hitPoints - amount;
}
</syntaxhighlight>

That stuff in /* */ is just for people like you and me. JavaScript ignores them, so you can put whatever in them, or leave them out if you want.

Notice the use of '''prototype''', along with '''function'''. This way, all MalePerson objects will gain the kick and takeDamage methods. See how methods are set as functions?

===Making objects===
That's all fine and well, we've prepared a template. But by itself, a template doesn't do anything. How do we use the template? Easy, just watch and learn.

Let's make a couple of MalePersons:
<syntaxhighlight>
var timmy = new MalePerson("Timmy");
var thug = new MalePerson("Greasy Thug");
</syntaxhighlight>

This how we make '''new''' MalePerson objects. Get it? :)

Each object is distinct, just like one ball in real life is different from another. Going with the above two lines, see if you can figure out these:
<syntaxhighlight>
timmy.name == "Timmy" // true
thug.name == "Greasy Thug" // true
timmy.name == thug.name // false
timmy.name != thug.name // true
</syntaxhighlight>

Yep, these guys have different names. This is how we get properties from objects.

===Using objects===
Now let's make our MalePersons again, and one will kick the other.
<syntaxhighlight>
// These two lines were from above.
var timmy = new MalePerson("Timmy");
var thug = new MalePerson("Greasy Thug");

thug.kick(timmy, "thigh");

Abort(
timmy.hitPoints + "HP left for Timmy\n" +
thug.hitPoints + "HP left for Greasy Thug.\n" );
</syntaxhighlight>

Okay, poor Timmy has just been kicked by our Greasy Thug. This is the output:
<pre>
9HP left for Timmy
20HP left for Greasy Thug
</pre>

The first bold line is where the Greasy Thug '''kick'''ed Timmy.

The second bold bit is how we access Timmy's '''hitPoints''' property, showing how hurt he is.

The third bold bit is how we access the Greasy Thug's '''hitPoints''' property. He hasn't been hurt a bit.

Can you figure out how to display the names on the last lines like the hitPoints as well, instead of directly typing "Timmy" and "Greasy Thug"?

===Bringing it together===
Let's put this all together, shall we? The big method comments have been left out for readability.
<syntaxhighlight>
function MalePerson(name) {
this.name = name;
this.maxHitPoints = 20;
this.hitPoints = this.maxHitPoints;
}

MalePerson.prototype.kick = function (victim, location) {
victim.takeDamage(location, 11);
}

MalePerson.prototype.takeDamage = function (location, amount) {
if (location == "groin")
this.hitPoints = this.hitPoints - amount * 2;
else
this.hitPoints = this.hitPoints - amount;
}
</syntaxhighlight>

Now let's give Timmy a chance for revenge:
<syntaxhighlight>
var timmy = new MalePerson("Timmy");
var thug = new MalePerson("Greasy Thug");

timmy.kick(thug, "groin");

Abort(thug.HitPoints); // Shows -2
</syntaxhighlight>

Uh oh, Timmy better do some fast running: he just ''killed'' the thug.

==What did I just learn?==
Here's the lingo, if you've heard about classes before:

* objects ('''new''' ObjectName())
* properties (with '''this.'''blah)
* methods (obj.'''kick()''')

And don't kick MalePersons in the groin. It hurts.

==I'm ambitious!==
[[Advanced OOP in JavaScript]] covers inheritance, e.g. using a Person function to make MalePerson and FemalePerson, superclasses (Person) and subclasses (MalePerson and FemalePerson), getters and setters, as well as saving code using polymorphism, and a trick to allow calling superclass methods from the subclasses.

==I'm lazy...==
The example was big, so here's the cheat sheet.

<syntaxhighlight>
function MyObjectName(param1, param2) {
// Properties
this.property1 = param1;
this.property2 = param2;
}

// Methods
MyObjectName.prototype.method1 = function () {
// Code for method1
}

MyObjectName.prototype.method2 = function () {
// Code for method2
}
</syntaxhighlight>

<syntaxhighlight>
// Making objects
var object = new MyObjectName(12, "blah");
var object2 = new MyObjectName(11, "haha");

// Using object properties
if (object.property2 == "blah")
object.property2 = "blah was lame anyway";

// Using object methods
object.method1();
object2.method2(3);
</syntaxhighlight>

Cheers! --Tunginobi 10:22, 28 January 2007 (GMT)

[[Category:Tutorials]]

← Older revision		Revision as of 01:09, 14 June 2013
Line 1:		Line 1:
−	There is an alternate article for this that is more thorough, but uses more jargon and is probably more suited to more advanced programmers. This more advanced article covers advanced concepts such as Polymorphism and Inheritance. See [[Object oriented programming]].	+	{{aside\|Note\|There is an alternate article for this that is more thorough, but uses more jargon and is probably more suited to more advanced programmers. This more advanced article covers advanced concepts such as Polymorphism and Inheritance. See [[Object oriented programming]].\|note.svg}}

	So you heard a lot about OOP and decided to check it out? Good, that's why we're here. I'm assuming you know ''a bit'' about JavaScript syntax, but this shouldn't be too hard, just things like <code>if</code> and <code>function</code>.		So you heard a lot about OOP and decided to check it out? Good, that's why we're here. I'm assuming you know ''a bit'' about JavaScript syntax, but this shouldn't be too hard, just things like <code>if</code> and <code>function</code>.

← Older revision	Revision as of 01:08, 14 June 2013
(No difference)

@@ Line 3: / Line 3: @@
 So you heard a lot about OOP and decided to check it out? Good, that's why we're here. I'm assuming you know ''a bit'' about JavaScript syntax, but this shouldn't be too hard, just things like <code>if</code> and <code>function</code>.
-''If you want to learn, but don't want to shovel through text, go to [[#I'm dumb...]]''
+''If you want to learn, but don't want to shovel through text, go to [[#I'm dumb...|I'm dumb...]]''
-''If you know a bit about classes but don't like explanations, go to [[#I'm lazy...]]''
+''If you know a bit about classes but don't like explanations, go to [[#I'm lazy...|I'm lazy...]]''
 If you want the whole explanations thing, as well as two ways to define methods, just read through the example.

JavaScript/Simple OOP - Revision history

Apollolux: aside

Apollolux: Apollolux moved page Simple OOP in JavaScript to JavaScript/Simple OOP: new conventions

Apollolux: link text

Apollolux: created from http://web.archive.org/web/20120828183913/http://www.spheredev.org/wiki/Simple_OOP_in_JavaScript