|
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: Introducing Classes
|
|
- 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>
|
- Save it as BookCollection.htm and preview it in your browser
- Return to your text editor
|
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.
|
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.
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: Creating a Class
|
|
- 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
|
- Save the file
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.
|
|
No comments:
Post a Comment