//INIT: Creating objects with methods

<New code>

//INIT: — define an object with a method

// exampleObj
// 		properties:
//			exampleObj.exampleProperty1
//			exampleObj.exampleProperty2
// 		methods:
//			exampleObj.exampleMethod()
//
var exampleObj = {
	exampleProperty1:	exampleValue1,
	exampleProperty2:	exampleValue2,
	
	// a method is an object property that contains a function definition
	
	exampleMethod:		function () {
		// function instructions go here
		return this.exampleProperty1 + this.exampleProperty2;
	}
};

Object oriented programming with methods: making objects that DO things!

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:

What does myCarObject.colour contain?
What does myCarObject.make contain?

Great!

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:


	myCarObject.turnLeft();
	myCarObject.turnRight();
	myCarObject.accelerate();
	myCarObject.brake();
			

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
myCarObject.accelerate()
novaScotia.capitol
homemadeFireworks.explode()

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
animateObject.id
animateObject.width
animateObject.src

Let's also imagine some methods:

animateObject methods
animateObject.outputImage()
animateObject.animateUp()
animateObject.animateDown()
animateObject.animateLeft()
animateObject.animateRight()

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});
		}
}

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
		animationObject.animateUp();
		
	} else if (characterPressed == 40) { // DOWN key is pressed
		animationObject.animateDown();
		
	} else if (characterPressed == 39) { // RIGHT key is pressed
		animationObject.animateRight();
		
	} else if (characterPressed == 37) { // LEFT key is pressed
		animationObject.animateLeft();	
		
	} 
}

Learn more