01219245/javascript1/tutorial3

In this tutorial we will learn about objects in JavaScript. We will also develop a Nim game. There are many versions of the game, we will try the version that is usually called the 21 game.

In this game, there are 21 sticks. There are two players: you and the computer. Each player takes turn to take out the sticks. The player can choose between 1 - 3 sticks. The player that picks the last sticks wins.

You can try it at [1].

Quick introduction to objects in JavaScript

You may have known Object-Oriented Programming from other languages. JavaScript's objects are rather different. In languages like Java, C#, C++, objects is an instance of a class. In JavaScript, you can have objects without having to think about classes.

Objects in JavaScript is a bag that maps between keys and values. Open a JavaScript console in your browser and try the following example.

We can use curly braces to enclose property names and values to define an object. To create an "empty" object, we write

var dog = {};

Variable dog now points to an object with no properties. Trying to accessing any of its property will give you undefined.

dog.age

We can assign a value to some property in the object with a standard assignment:

dog.age = 10;
dog.color = 'blue';

If you type

dog           

you'll see something like this:

Object { age=10, color="blue"}

Now you can type dog.age or dog.color to the console to read the object's properties.

You can also use another syntax for accessing properties, i.e., square bracket notation, like this:

dog['age']
dog["color"]

With this syntax, you use a string as an index to the object's properties. You can also assign a property with bracket notation:

dog['owner'] = 'John';

This is useful when the property names are not valid identifier names.

You can also create an object with initial properties with the curly braces notation.

var cat = { name: 'meaw', age: 5 };   // --- output (don't type in) ---
cat.name                              // 'meaw'
cat.age                               // 5

Methods

An object can also have functions for its properties. Let's add property bark:

dog.bark = function() { console.log('box box'); };

Try calling it. (How? Let's try both statements.)

dog.bark
dog.bark()

What do the above statements do?

A property of an object which is a function is referred to as a method.

You can assign the same function to many objects.

function j() { console.log('up up up'); }
dog.jump = j;
cat.jumpjump = j;

When you call the method:

dog.jump()       // prints up up up
cat.jumpjump()   // prints up up up

Accessing properties from a method: this

A method that does not use any of the object's properties might not be very useful. To access object's properties from a method, you use a keyword this.

BEFORE YOU MOVE ON, LET ME SAY IT RIGHT AWAY THAT THE WAY this IN JAVASCRIPT WORKS IS DIFFERENT FROM THE WAY this IN JAVA, C#, OR C++ WORKS. SO BE CAREFUL.

Keyword this refers to the current object. To see this, let's define function hello like this:

var hello = function() { alert( this.age ); };

This function is defined outside any class; and you can call it.

hello();         // you';l see an alert with undefined

Let's assign it to objects dog and cat.

dog.sayhi = hello;
cat.morning = hello;

Let's call them.

dog.sayhi();             // an alert with 10
cat.morning();           // an alert with 5

With this, you can modify the object's properties.

cat.growup = function() { this.age++; }

This function increases the cat's age.

cat.growup();
cat.growup();
cat.morning();          // an alert with 7

No classes?

In JavaScript, each object lives on its own. It does not have to belong to a class. This makes it slightly strange to work with a lot of objects.