The JavaScript Diaries: Part 6/Page 4

The JavaScript Diaries: Part 6

Object Methods

If methods are like verbs, then they must do something. If we look at the write method of the document object, we can see that it tells the JavaScript interpreter to write something into the document. Let's take a look at how other methods are created and how they are used.

First, let's create an object using the constructor function like we did before:

  function computer(Type,Monitor,Drive,RAM) {
    this.type=Type;
    this.monitor=Monitor;
    this.drive=Drive;
    this.ram=RAM;
  }

Here we have created a function (also our object) called computer and given it several parameters: Type, Monitor, Drive and RAM.
Then we assigned the parameters to properties of the same name, using the this reserved word.

Now we need to create a custom method which will act upon the object we just created.

  function displaySys(sysInfo) {
    display = "<strong>" + sysInfo.type + "</strong><br>";
    display += "Monitor: " + sysInfo.monitor + "<br>";
    display += "Drive: " + sysInfo.drive + "<br>";
    display += "RAM: " + sysInfo.ram + "<br>";
    document.write(display+"<br>");
  }

Here we created another function called displaySys and gave it a parameter of sysInfo.
Next, we declared a variable called display and initialized it with a value of a concatenated string: "" + sysInfo.type + " ".
Then we added ( += ) three more concatenated strings to the value of the display variable:
"Monitor: " + sysInfo.monitor + " "

"Drive: " + sysInfo.drive + " "

"RAM: " + sysInfo.ram + " "
(This is a pretty cool 'trick', using one variable and adding strings to it. It sure does simplify things! Be sure to experiment with different things.)
Finally, we issued a document.write statement, display+" ", to display the concatenated variable display.

Finally, we need to add some data that the method can act upon. We'll do that using another function. (You have probably figured out by now that functions are very important in JavaScript. Learn how to use them and they will help organize your work. The following code could have been written without using a function but it would not have been as compact and accessible.)

  function sysStats() {
    var sysNeed = new computer("System I Need:","17\" CRT","80 GB","512 MB");
    var sysWant = new computer("System I Want:","21\" LCD","120 GB","1 GB");
    displaySys(sysNeed);
    displaySys(sysWant);
  }

First, we created a function called sysStats
Next, we declared two variables, sysNeed and sysWant.
Then, we used them to create two new instances of the computer object.
At the same time, we initialized the variables with parameters for each one, respectively:
"System I Need:","17\" CRT","80 GB","512 MB"

"System I Want:","21\" LCD","120 GB","1 GB"
Finally, we made two function calls, displaySys(sysNeed); and displaySys(sysWant); to the method that we already created.

The function calls will cause the method to act upon our data to display it as we have it set up. It should look like this:

System I Need:
Monitor: 17" CRT
Drive: 80 GB
RAM: 512 MB

System I Want:
Monitor: 21" LCD
Drive: 120 GB
RAM: 1 GB

Wrap-Up

That's all for this time. Carefully review this material and the section on functions. Next time we'll move into the built-in objects. Until next time ... keep on scripting!

Continue on to "The JavaScript Diaries: Part 7"

[previous]

Created: July 1, 2005

URL:

The JavaScript Diaries: Part 6/Page 4