'Personalized JavaScript': User-defined functions, objects, and methods

How to take full advantage of JavaScript by moving beyond its built-in commands

1 2 Page 2
Page 2 of 2

After an object has been created you can assign a value to it. But instead of just assigning a value to the object itself, you should define a new property for the object, and assign a value to the property. To create a new property and assign a value to it, simply write a variable expression like this:

myobject.property = value;
  • myobject is the name of the user-defined object.
  • property is the name of the property you want to create.
  • value is the value you want to assign.

Suppose you create an object called "customer" and you want to define three properties to it: name, address, and phone. Here's one way to do it:

customer = new makeSimpleObject(); customer.name = "Fred"; customer.address = "123 Main Street"; customer.phone = "555-1212";

function makeSimpleObject() { return (this); }

You can verify that you've indeed created a new object and assigned properties to the object my adding an alert method to display one of the properties. For example, you could put this after the customer.phone line. When you run the script the alert box will say "Fred."

alert (customer.name);

Defining properties when you create the object

Another method of defining properties for objects is to include the property names in the object function. You can use this technique to simultaneously create a new object and define the property values. All it takes is a few more lines of code in the object function.

customer = new makeCustomer("Fred", "123 Main Street", "555-1212"); alert (customer.name);

function makeCustomer(Name, Address, Phone) { this.name = Name; this.address = Address; this.phone = Phone; }

Note the series of this statements. Each this statement assigns a property to the current object, which is the one being created in the makeCustomer object function. Three parameters are passed to the object statement: the customer's name, address, and phone number. These parameters are used to define the contents of the three properties, which are name, address, and phone.

JavaScript imposes no limitations on the number of properties you can assign to an object. To include as customer object, just do this:

customer = new makeCustomer("Fred", "123 Main Street", "555-1212");
customer.salutation = "Mr.";

Note that other objects you create with the makeCustomer object function will have just the three base properties, but this object for Fred will have an additional property for the salutation. Properties added later do not affect other objects created with the same object function.

Creating user-defined methods

A user-defined method is yet another way of using functions in JavaScript. Methods act upon objects -- either objects built into JavaScript, or objects that you've created. A method changes or manipulates an object in some way. For instance, suppose you want to insert the various contents of the customer object: name, address, and phone number. Write the code to insert the object contents, then stuff the code in a function. Call the function, using the customer object as a parameter, like so:

customer = new makeCustomer("Fred", "123 Main Street", "555-1212"); displayCustomer (customer);

function displayCustomer (cust_obj) { Temp = "Name: " + cust_obj.name + "<BR>"; Temp += "Address: " + cust_obj.address + "<BR>"; Temp += "Phone: " + cust_obj.phone + "<BR>"; document.write (Temp + "<BR>"); }

Here's a fully functioning user-defined property example if you'd like to try this out. Load the script; JavaScript will display three lines of customer data. (Reload the document if you want to run it again.)

<HTML> <HEAD> <TITLE>Object Method Example</TITLE> <SCRIPT LANGUAGE="JavaScript">

function run () { customer = new makeCustomer("Fred", "123 Main Street", "555-1212"); displayCustomer (customer); }

function displayCustomer (cust_obj) { Temp = "Name: " + cust_obj.name + "<BR>"; Temp += "Address: " + cust_obj.address + "<BR>"; Temp += "Phone: " + cust_obj.phone + "<BR>"; document.write (Temp + "<P>"); }

function makeCustomer(Name, Address, Phone) { this.name = Name; this.address = Address; this.phone = Phone; }

run()

</SCRIPT> </HEAD> <BODY> </BODY> </HTML>

The other method is to create a method for the customer object. With this approach, you call the method as part of the object. This helps in defining special method functions that are designed for -- and only for -- certain kinds of objects. This process forms one of the foundations of object-oriented programming, where objects contain their own unique methods of operation. Here's the same script as above, modified so that the customer object contains the displayCustomer method.

<HTML> <HEAD> <TITLE>Object Method Example</TITLE> <SCRIPT LANGUAGE="JavaScript">

function run () { customer = new makeCustomer("Fred", "123 Main Street", "555-1212"); customer.displayCustomer(); }

function displayCustomer () { Temp = "Name: " + this.name + "<BR>"; Temp += "Address: " + this.address + "<BR>"; Temp += "Phone: " + this.phone + "<BR>"; document.write (Temp + "<P>"); }

function makeCustomer(Name, Address, Phone) { this.name = Name; this.address = Address; this.phone = Phone; this.displayCustomer = displayCustomer; }

run()

</SCRIPT> </HEAD> <BODY> </BODY> </HTML>

As you can see, to display the customer data, you call the displayCustomer method, like so:

customer.displayCustomer();

Notice a few other changes in this version:

  • The call to the displayCustomer function no longer uses a parameter.
  • The displayCustomer() function no longer uses a parameter.
  • The displayCustomer() function uses the "this" keyword to refers to the current object.

When you write your own methods for objects, you'll follow the pattern used in the displayCustomer() function. There's no need to pass parameters to the function unless you need to. Refer to properties using the "this" keyword." And, add the name of the method function in the function that creates the object -- in this case, it's the makeCustomer object function.

Conclusion

Much of JavaScript's power comes from user-defined functions -- functions you make yourself. With your own functions, you create what is in essence your own JavaScript commands. And, you use functions to build JavaScript objects and methods. Master functions, and you'll go far in mastering JavaScript.

Gordon McComb is an author, consultant, and lecturer. He has written 50 books and more than a thousand magazine articles during his 20 years as a professional writer. More than a million copies of his books are in print. Gordon also writes a weekly syndicated newspaper column on computers, reaching several million readers worldwide. Gordon's latest book is The JavaScript Sourcebook, available from Wiley Computer Publishing.

Learn more about this topic

This story, "'Personalized JavaScript': User-defined functions, objects, and methods" was originally published by JavaWorld.

Related:

Copyright © 1996 IDG Communications, Inc.

1 2 Page 2
Page 2 of 2