Objects


What's an object you say? Well, think of it as a variable with subvariables. Here's a quasi-diagramatic explaination:
          .--- Subvariable3
          |
 Variable-+--- Subvariable2
          |
          `--- Subvariable1
The actual syntax of accessing an object's subvariables is very much similar to that of accessing a variable; the main difference is a dot. ex:
 variable.subvariable
So let's say we had a variable that was nothing but a collection of smaller variables. For example: Our variable was "Dog" and our subvariables were "Number_of_Tails", "Number_of_Arms", "Number_of_Legs" & "Number_of_Eyes". To use these subvariables you would access Dog.Number_of_Tails , Dog.Number_of_Arms , Dog.Number_of_Legs & Dog.Number_of_Eyes.

For example:

 Dog.Number_of_Tails = 1;
 Dog.Number_of_Arms  = 0;
 Dog.Number_of_Legs  = 4;
 Dog.Number_of_Eyes  = 2;
So, how about we create some objects in Javascript? There are a variety of ways to create objects. One way is to just start using them. In the above example when we defined the properties of Dog (tails, arms, etc.) we created an object. Wow, that was easy. However, there's a better way to do it. Let's define an object with a function using the new syntax.
 function animal (Num_Tails,Num_Arms,Num_Legs,Num_Eyes){  
   this.Number_of_Tails = Num_Tails;
   this.Number_of_Arms  = Num_Arms;
   this.Number_of_Legs  = Num_Legs;
   this.Number_of_Eyes  = Num_Eyes;
 }

 var Dog = new animal(1,0,4,2);
At this point you should be scratching your head and saying, "Huh? What's this this thing and this new thing?!" Fear not, all will be explained (I hope).

this is a special word in Javascript that refers to the object you are creating/talking about.
new is used when creating a new object.

Basically when you create the object via the line var Dog = new animal(1,0,4,2); you are assigning the word Dog to this. So... Why use this long method of doing what we did in 4 lines located above in the begin of this section? Well what if you had to do a lot of different animals like Birds, Monkeys, Fish, and Cockroaches? With out current setup, you would just have to type in:

 var Bird      = new animal(1,0,2,2);
 var Monkey    = new animal(1,2,2,2);
 var Fish      = new animal(1,0,0,2);
 var Cockroach = new animal(0,0,6,2);
instead of typing in 16 lines!! And if you use the object "animal" over and over again you will notice basically a (n x 100%) reduction in code where n is the number of subvariables. But I digress.... In a phrase, "Objects Rock!"

Methods


But it doesn't stop there! Not only can an object have a lot of different properties (variables), they can also have methods. A method is simply a function within an object. So not only can we access a property of an object like:
  Dog.Number_of_Tails=1;
We can also access a method (function) of an object.
  Dog.bark();
This causes the Dog object to bark. A method is an action. It causes the object to do something. So how do you define a method. Use the following syntax:
  object_name.method_name = function_name
So, after you have defined some function, you can assign it to the object. Nothing explains better than an example, so let's make a really big example of our animal object.
<html>
<head>
  <SCRIPT LANGUAGE="JavaScript">
    <!-- hide JavaScript from older browsers
      function squeal (string) {
        //Outputs some sort of speech
        document.write(string);
      }

      function grow (property_name) {
        //Makes some part of the object grow
        this[property_name]++;
      }

      function print_properties() {
        //prints the properties of an object
        for(var property_name in this) {
          document.write(property_name + "=" + this[property_name] + "<br>");
        }
      }

      function animal (Num_Tails,Num_Arms,Num_Legs,Num_Eyes){  
        //creates a new animal object
        //initialize properties
        this.Number_of_Tails = Num_Tails;
        this.Number_of_Arms  = Num_Arms;
        this.Number_of_Legs  = Num_Legs;
        this.Number_of_Eyes  = Num_Eyes;
        //define the methods
        this.squeal = squeal;
        this.grow = grow;
        this.print_properties = print_properties;
      }

    // end hiding from older browsers -->
  </SCRIPT>
</head>
<body>

Creating the new object.<br>

<SCRIPT LANGUAGE="JavaScript">
  <!-- hide JavaScript from older browsers

  //Create a new object
  var Dog = new animal(1,0,4,2);

  //Make the dog bark
  Dog.squeal("Ruff!<br>");

  //Make the dog grow a new tail
  Dog.grow("Number_of_Tails");

  //Display the dog's properties
  Dog.print_properties();

  // end hiding from older browsers -->
</SCRIPT>
</body>
</html>
OK. I hope you noticed that I popped a few new things about objects on ya, so lemme explain them. In the past we have referenced property names with the period notation like Dog.Number_of_Tails. There is another way to reference a property name with brackets. It looks like: Dog["Number_of_Tails"]. That's it. Just use a string as the name of the property.

That's the first thing I popped on you. Next, in the print_properties method, I used the following code:

for(var property_name in this) {
  document.write(property_name + "=" + this[property_name] + "<br>");
}
First, the document.write() method just prints text. We'll talk more about that later. Just take that for granted for now.

This is called a for..in statement. The for..in statment cycles through the property names in an object. That's it. The format is:

for (some_variable in object_name) {
  statements
}
It takes a variable (in this case it is property_name), and makes it equal to the name of the first property in the object (in this case it is Number_of_Tails). Then it goes on to the next property. It continues doing this until it has gone through all of the properties. Note that this includes both variables and methods.

There's another thing that I haven't shown yet. It's the with statement. Sometimes you might be working with a single object (such as Dog), and you might get tired of typing Dog a lot. Here comes the with statement to the rescue! You can set the Dog object as the default object. The syntax is:

with (object_name) {
  statements
}
This makes all the statments in the curly braces {} assume you are talking about the given object. So for example, if we had:
  Dog.Number_of_Tails=3;
  Dog.Number_of_Arms=2;
  Dog.Number_of_Legs=Dog.Number_of_Arms*3;
  Dog.Number_of_Eyes=Dog.Number_of_Tails*5;
This can be simplified with:
with (Dog) {
  Number_of_Tails=3;
  Number_of_Arms=2;
  Number_of_Legs=Number_of_Arms*3;
  Number_of_Eyes=Number_of_Tails*5;
}
Whew.... I hope you made it through all that. Don't worry if you didn't get it all the first time through. You'll learn through experience. Just remember that you can come back here to see how it's done.
Return to the Front Page