<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
	
exampleObj.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 myCarObj = {
	make:	"Toyota",
	model:	"Yaris", 
	year:	2007,
	colour:	"blue"
};

So let's check that you understand this:

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:

myCarObj.model ="Yaris";

Imagine that you could perform actions upon your car object:

myCarObj.turnLeft();
myCarObj.turnRight();
myCarObj.accelerate();
myCarObj.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:

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

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

Revisiting old code: keyboard control

Remember Keyboard Control and Controlling Motion?

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

Let's also imagine some 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?

// animationObj - displays and animates an image
//
// properties:  
//      .id
//      .src
//      .width
//
// methods:
//      .outputImage()
//      .animateUp()

var animationObj = {
    id:         "animateId",
    src:        "MsPacMan.png",
    width:      "100px",
    DISTANCE:   24,
    DURATION:   100
};

//OUTPUT: method to display the image and prepare for animation
animationObj.outputImage = function() {
    console.log( 'in animationObj.outputImage...' );
    
    document.querySelector( "#" + this.id ).src             = this.src;
        
    document.querySelector( "#" + this.id ).style.width     = this.width;
        
    document.querySelector( "#" + this.id ).style.position  = "relative"; 
};
    
//OUTPUT: method to animate up
animationObj.animateUp = function() {
    console.log( 'in animationObj.animateUp...' );
    
    $( "#" + this.id ).animate(
        { top:      '-=' + this.DISTANCE + 'px' }, 
        { duration: this.DURATION }
    );
};

At the end of this sentence I have put the following code: <img id="animateId">:

What is animationObject.id?
What is animationObject.src?
What is animationObject.width?

trigger animationObj.outputImage()
trigger animationObj.animateUp()

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 this.animateUp();

//You can add additional properties to your object like this:
			
//PROCESS: decide which direction to move
animationObj.decideDirection = function ( unicodeNumber ) {
	console.log( 'in animationObject.decideDirection. unicodeNumber = ' + unicodeNumber );
	
	//IF: UP key is pressed
	if (unicodeNumber == 38) { 
		this.animateUp();
		
	//ELSE IF: DOWN key is pressed
	} else if (unicodeNumber == 40) { 
		this.animateDown();
		
	//ELSE IF: RIGHT key is pressed
	} else if (unicodeNumber == 39) {
		this.animateRight();
		
	//ELSE IF: LEFT key is pressed
	} else if (unicodeNumber == 37) { 
		this.animateLeft();	
	} 
} 
			
			
//INPUT EVENT: 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 unicodeNumber	=keyEvent.which || keyEvent.keyCode;
	
	animationObj.decideDirection( unicodeNumber ); 
	
}

Learn more

• w3school.com's JavaScript Object Methods