Home

Object-Oriented Programming

 

A Class

 

Introduction

Like most modern computer languages, JavaScript highly relies on the theory of class for its functionality. This also means that you must make sure you understand the concept of class and object to take advantage of JavaScript. If you are coming from C++ or Pascal, you must be careful with the way JavaScript handles classes. It is somewhat different and, because JavaScript is referred to as "loose", this flexibility doesn't make sense to a C++ or Pascal programmer.

In the first lesson, we had to introduce classes in order to explain what an object was. Let's consider a (human or animal) hand. To describe it, you would use characteristics such as left or right, the number of fingers, whether the nails are trimmed or not. These are the words used to describe a hand. You can create a list to represent this description as follows:

Hand
[
      Left or Right
      Number of Fingers
      Nails are Trimmed 
      Hand Is Opened
]

We mentioned in Lesson 3 that a name cannot contain space. Therefore, the above list can be rewritten as follows:

Hand
[
      LeftOrRight
      NumberOfFingers
      NailsAreTrimmed 
      HandIsOpened
]

In computer programming, the list of items used to describe something is called a class. In our example, the Hand is a class.

 

Practical Learning Practical Learning: Introducing Classes

  1. Start your text editor and type the following:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    </head>
    
    <body>
    
    <h1>Book Collection</h1>
    <form name="frmBooks">
      <table border="0" width="69%">
        <tr>
          <td width="16%">Title</td>
          <td width="30%">Author</td>
          <td width="54%"> Year</td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle1" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor1" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear1" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle2" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor2" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear2" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle3" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor3" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear3" size="9"></td>
        </tr>
      </table>
      <p><input type="button" value="Show Collection" name="btnShow">
         <input type="reset" value="Reset" name="btnReset"></p>
    </form>
    
    </body>
    
    </html>
  2. Save it as BookCollection.htm and preview it in your browser
     
  3. Return to your text editor

Properties

Any word or expression used to describe an object is referred to as a characteristic. In computer programming, a characteristic of an object is called a property. In our example, NailsAreTrimmed is a property of the Hand class. The other members also are properties of the Hand class.

A property of a class is created like a variable but it belongs to the class. To access a property of a class, you use the period followed by the name of the property that you want to access. 

 

this Member

Every time you create a new class, there is a member automatically created for it. This member is called this and it represents the class itself. Furthermore, the this member has direct access to all properties of its parent class.

Class Creation

A constructor is a special function that is used to create a class. The name of this function also becomes the name of the class. Here is an example:

function Hand()
{
}

In this case, Hand becomes the name of the new class. To specify the properties of a class, you can list them in the parentheses of the constructor. Here is an example:

function Hand(side, fingers, nailsState, handOpenState)
{
}

Using this in a constructor, you can create a list of the properties of the class. To do this, type this, followed by the period operator, followed by the name of the new property you want to create. To complete the creation of the property, you can assign it to an argument passed in the parentheses of the constructor. Here is an example:

function Hand(side, fingers, nailsState, handOpenState)
{
      this.LeftOrRight = side;
      this.NumberOfFingers = fingers;
      this.NailsAreTrimmed = nailsState;
      this.HandIsOpened = handOpenState;
}

These assignments actually create the class and gives it meaning. For this example, we now have a class called Hand and that has the following four properties: LeftOrRight, NumberOfFingers, NailsAreTrimmed, and HandIsOpened.

Practical Learning Practical Learning: Creating a Class

  1. To create a new class, change the top  section of the file as follows:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    
    <script language="JavaScript">
    function WBook(bookName, writer, yearPublished)
    {
        this.Title  = bookName;
        this.Author = writer;
        this.CopyrightYear = yearPublished;
    }
    </Script>
    </head>
    . . .  No Change
  2. Save the file

An Object

 

Introduction

Once you know what is necessary to describe something, you can provide a value for each member of its list. Because the class is only a list of items, if you want to describe something that is based on that list, you can first name it. For example, you can name a hand HumanHand. Another hand can be DogHand, and so on. This means that, before describing a hand to a person, you must specify a name for that hand.

Instantiating an Object: The new Operator

Like the variables we used in previous lessons, before using a class, you must declare it. This is also referred to as instantiating a class or creating an object. To create an object, type the var keyword, followed by the name you want to use for the object, followed by the assignment operator, followed by the new operator, followed by the name of the class and its parentheses. In the parentheses of the class, you can provide a value for each argument. Here is an example:

var dogtHand = new Hand("Right", 5, false, true)

After writing this, you have a Hand object named leftHand and a value is provided for each of its properties. Using the same technique, you can create as many Hand objects as you wish.

 

Practical Learning Practical Learning: Creating an Object

  1. To use the previously created class, change the file as follows:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    
    <script language="JavaScript">
    function WBook(bookName, writer, yearPublished)
    {
        this.Title  = bookName;
        this.Author = writer;
        this.CopyrightYear = yearPublished;
    }
    
    function displayCollection()
    {
      var book1 = new WBook("How to Play Piano", "Roger Evans", 1981);
      var book2 = new WBook("Teach Yourself Perl in 24 Hours", "Clinton Pierce", 2001);
      var book3 = new WBook("Environmental Governance", "Lamont C. Hempel", 1996);
    
      document.frmBooks.txtTitle1.value  = book1.Title;
      document.frmBooks.txtAuthor1.value = book1.Author;
      document.frmBooks.txtCopyrightYear1.value = book1.CopyrightYear;
    
      document.frmBooks.txtTitle2.value = book2.Title;
      document.frmBooks.txtAuthor2.value = book2.Author;
      document.frmBooks.txtCopyrightYear2.value = book2.CopyrightYear;
    
      document.frmBooks.txtTitle3.value = book3.Title;
      document.frmBooks.txtAuthor3.value = book3.Author;
      document.frmBooks.txtCopyrightYear3.value = book3.CopyrightYear;
    }
    </Script>
    </head>
    
    <body>
    
    <h1>Book Collection</h1>
    <form name="frmBooks">
      <table border="0" width="69%">
        <tr>
          <td width="16%">Title</td>
          <td width="30%">Author</td>
          <td width="54%"> Year</td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle1" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor1" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear1" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle2" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor2" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear2" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle3" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor3" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear3" size="9"></td>
        </tr>
      </table>
      <p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
         <input type="reset" value="Reset" name="btnReset"></p>
    </form>
    
    </body>
    
    </html>
  2. Save the file and preview it in your browser
  3. Click the Show Collection button
     
  4. Return to your text editor

Methods

 

Introduction

While the properties are used to describe or characterize an object, some objects may be able to perform actions. For example, you can ask the hand to open. The action of opening a hand is called a method. You can also ask a hand to close itself. This action also is referred to as a method.

 

Creating a Method

A method of a class is created like a function. Since a function cannot be created inside of another function, in this case inside of the class' constructor, when defining the function, you can indicate that it belongs to the class with the use of the this object and the access to the defined member(s) of the class.

After creating the method, to add it to your class, assign it to the desired member name using the this object in the constructor of the class as we did previously. 

Practical Learning Practical Learning: Defining Methods

  1. To create and associate some methods to the class, change the top section of the file as follows:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    
    <script language="JavaScript">
    function WBook(bookName, writer, yearPublished)
    {
        this.Title  = bookName;
        this.Author = writer;
        this.CopyrightYear = yearPublished;
        this.DisplayTitle  = showTitle;
        this.DisplayAuthor = IdentityAuthor;
        this.DisplayYear   = ShowBookYear;
    }
    
    function showTitle()
    {
      document.frmBooks.txtTitle1.value  = this.Title;
    }
    
    function IdentityAuthor()
    {
      document.frmBooks.txtAuthor1.value = this.Author;
    }
    
    function ShowBookYear()
    {
      document.frmBooks.txtCopyrightYear1.value = this.CopyrightYear;
    }
    
    function displayCollection()
    {
      var aBook = new WBook("Computer Organization", "Greg W. Scragg", 1992);
    
      aBook.DisplayTitle();
      aBook.DisplayAuthor();
      aBook.DisplayYear();
    }
    </Script>
    </head>
    
    <body>
    
    <h1>Book Collection</h1>
    <form name="frmBooks">
      <table border="0" width="69%">
        <tr>
          <td width="16%">Title</td>
          <td width="30%">Author</td>
          <td width="54%"> Year</td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle1" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor1" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear1" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle2" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor2" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear2" size="9"></td>
        </tr>
        <tr>
          <td width="16%"><input type="text" name="txtTitle3" size="31"></td>
          <td width="30%"><input type="text" name="txtAuthor3" size="31"></td>
          <td width="54%"><input type="text" name="txtCopyrightYear3" size="9"></td>
        </tr>
      </table>
      <p><input type="button" value="Show Collection" name="btnShow" onClick="displayCollection()">
         <input type="reset" value="Reset" name="btnReset"></p>
    </form>
    
    </body>
    
    </html>
  2. Save the file and preview it in your browser
  3. Return to your text editor

An Object and its Environment

 

Passing an Object as Argument

Like a normal value, an object can be passed to a function. Only the name of the object is passed to the function. This means that you must know what the class on which the object is based looks like. When the object has been passed as argument, you can use its name in the body of the function and access any of its properties and methods, if any, as you see fit.

 

Practical Learning Practical Learning: Passing an Object as Argument

  1. To pass an object as argument, change the top section of the file as follows:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    
    <script language="JavaScript">
    function WBook(bookName, writer, yearPublished)
    {
        this.Title  = bookName;
        this.Author = writer;
        this.CopyrightYear = yearPublished;
    }
    
    function showBook(oneBook)
    {
      document.frmBooks.txtTitle1.value  = oneBook.Title;
      document.frmBooks.txtAuthor1.value = oneBook.Author;
      document.frmBooks.txtCopyrightYear1.value = oneBook.CopyrightYear;
    }
    
    function displayCollection()
    {
      var aBook = new WBook("Visual C++ From the Ground Up", "John Paul Mueller", 1998);
    
      showBook(aBook);
    }
    </Script>
    </head>
    
    <body>
  2. Save the file and preview it in your browser
  3. Return to your text editor

Returning an Object From a Function

Like a normal value, you can declare a local variable of an object in a function, process that object, and then return it when the function exists.

When a function returns an object, when calling that function, you can assign it to variable declared from the same type of object that function returns.

 

Practical Learning Practical Learning: Returning an Object From a Function

  1. To pass an object as argument, change the top section of the file as follows:
     
    <html>
    
    <head>
    
    <title>Book Collection</title>
    
    <script language="JavaScript">
    function WBook(bookName, writer, yearPublished)
    {
        this.Title  = bookName;
        this.Author = writer;
        this.CopyrightYear = yearPublished;
    }
    
    function createBook()
    {
      var aBook = new WBook("College Algebra - Fifth Edition",
                            "Raymond A. Barnett - Michael R. Zigler", 1993);
      return aBook;
    
    }
    
    function showBook(oneBook)
    {
      document.frmBooks.txtTitle1.value  = oneBook.Title;
      document.frmBooks.txtAuthor1.value = oneBook.Author;
      document.frmBooks.txtCopyrightYear1.value = oneBook.CopyrightYear;
    }
    
    function displayCollection()
    {
      var aBook = createBook();
    
      showBook(aBook);
    }
    </Script>
    </head>
    
    <body>
    
    
  2. Save the file and preview it in your browser
  3. Return to your text editor

An Object as a Property of Another Object

An existing object can be made a property of a new or existing class.

 

Previous Copyright © 2004 FunctionX, Inc. Next