spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / diaries / 6

[previous]

Java Software Engineer / Architect Sr (IL)
Next Step Systems
US-IL-Chicago

Justtechjobs.com Post A Job | Post A Resume
Developer News
OpenOffice 3.2 Lands Amid Critical Changes
Red Hat, IBM Firmly in KVM Virtualization Camp
Red Hat Talks Up Open Source Cloud Plans


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;
  }
  1. Here we have created a function (also our object) called computer and given it several parameters: Type, Monitor, Drive and RAM.
  2. 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>");
  }
  1. Here we created another function called displaySys and gave it a parameter of sysInfo.
  2. Next, we declared a variable called display and initialized it with a value of a concatenated string: "<strong>" + sysInfo.type + "</strong><br>".
  3. Then we added ( += ) three more concatenated strings to the value of the display variable:
    1. "Monitor: " + sysInfo.monitor + "<br>"
    2. "Drive: " + sysInfo.drive + "<br>"
    3. "RAM: " + sysInfo.ram + "<br>"
    (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.)
  4. Finally, we issued a document.write statement, display+"<br>", 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);
  }
  1. First, we created a function called sysStats
  2. Next, we declared two variables, sysNeed and sysWant.
  3. Then, we used them to create two new instances of the computer object.
  4. At the same time, we initialized the variables with parameters for each one, respectively:
    1. "System I Need:","17\" CRT","80 GB","512 MB"
    2. "System I Want:","21\" LCD","120 GB","1 GB"
  5. 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!

To Part 2 Continue on to "The JavaScript Diaries: Part 7"

home / programming / javascript / diaries / 6

[previous]


The Network for Technology Professionals

Search:

About Internet.com

Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers

webref The latest from WebReference.com Browse >
Installing and Using Meeplace, the Business Review CMS · Sending an HTML and Plain Text E-newsletter with ASP.NET, Part 2 · Create Multilingual Web Sites with Windows Unicode Fonts
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MySql View Technique for Grouping Crosstab Column Data · Why You Need a Mobile Web Site · Tame Web Marketing with Social Media Management

Created: July 1, 2005

URL: