Special topic: Object oriented programming with methods

Objects that ACT on themselves

Just for review, remember that you can define an object as follows, using the traditional example of a car:

	var myCarObject = {
		make:	"Toyota",
		model:	"Yaris", 
		year:	2007,
		colour:	"blue"

So let's check that you understand this:

myCarObject.colour click for answer...
myCarObject.make click for answer...


Now in real life, you can do more than look at your car and gather information about it. You can turn it left, turn it right, accelerate it, and brake, among other things.

So, in computer language, just as you can interact with object information with:

	myCarObject.model ="Yaris";

Imagine that you could perform actions upon your car object:


This kind of grammar makes a lot of sense, and is a key aspect of object-oriented programming (OOP).

OOP is programming in which objects have properties, but they also ways of acting on them with functions, called methods. So our example above can be broken into properties and methods:

property method
myCarObject.make myCarObject.turnLeft()
myCarObject.model myCarObject.turnRight()
myCarObject.year myCarObject.accelerate()
myCarObject.colour myCarObject.brake()

One's a verb, and one's a noun...

So let's check that you understand this - are these properties or methods:

myCarObject.colour click for answer...
myCarObject.accelerate() click for answer...
novaScotia.capitol click for answer...
homemadeFireworks.explode() click for answer...

Revisiting old code: keyboard control

Remember Keyboard Control and Controlling Motion?

Let's imagine an object to control, with a whole bunch of properties:

animateObject properties

Let's also imagine a whole bunch of methods:

animateObject methods

Defining an object with both properties and objects

Defining an object with properties works as normal. Defining methods requires an anonymous function definition, like function () {...}. They also often depends on the special object this. What do you think this. does?

	var animationObject = {
		id:		"animateID",
		src:		"MsPacMan.png",
		width:		"100px",

		outputImage: function() {
			document.getElementById(this.id).src			=this.src;	// image src file
			document.getElementById(this.id).style.width		=this.width;	// image width in px
			document.getElementById(this.id).style.position		="relative"; 	// CSS to allow animation movement
		animateUp: function() {		// PROCESS: method to animate up
			$("#"+this.id).animate({ top: '-=24px'}, {duration: 100});
		animateDown: function() {		// PROCESS: method to animate down
			$("#"+this.id).animate({ top: '+=24px'}, {duration: 100});
		animateLeft: function() {		// PROCESS: method to animate left
			$("#"+this.id).animate({ left: '-=24px'}, {duration: 100});
		animateRight: function() {	// PROCESS: method to animate right
			$("#"+this.id).animate({ left: '+=24px'}, {duration: 100});

At the end of this sentence I have put the following code: <img id="animateID">:
{top: , left: }

Adding keyboard control

You can now add the following code to use the keyboard to control your animationObject. Notice that now the commands for each key are now object-oriented, like animationObject.animateUp();

	//	INPUT: This next command tells the browser to trigger when a key is pressed anywhere
	window.onkeydown	=function (keyEvent) {	
		//	detect the code of the key pressed, regardless of IE/Firefox/Chrome...
		var characterPressed	=keyEvent.which || keyEvent.keyCode;
		if (characterPressed == 38) { // UP key is pressed
		} else if (characterPressed == 40) { // DOWN key is pressed
		} else if (characterPressed == 39) { // RIGHT key is pressed
		} else if (characterPressed == 37) { // LEFT key is pressed

Challenge for your future code:

How can you use complex data to look ahead to see if you can move into the next grid cell in a maze?