Introduction to Objects and Classes in JavaScript
Introduction to Objects and Classes in JavaScript
Introduction to Objects
Object Definition
The JavaScript language supports the concept of classes but it uses techniques somewhat different from those of traditional object-oriented languages (OOL) like C#. You have many options.
Practical Learning: Introducing Functions
body {
background-color: white;
}
form { padding: 1em;
background-color: #e0d4c0;
border: 1px solid maroon; }
form div { padding: 4px;
margin: 0 0 1px 0; }
input[type=number] { width: 80px;
float: right;
border: 1px solid maroon; }
input[type=number]:focus { outline: 1px solid #ff6a00; }
input[type=button] { border: 0;
border-radius: 10px;
font-size: 14px;
width: 130px;
margin-left: 100px;
background-color: brown;
padding: 0.75em;
color: yellow; }
input[type=button]:hover { color: white;
cursor: pointer;
background-color: chocolate; }
form > fieldset > div > div { margin: 0 0 5px 0 }
.container h1 { margin: auto;
width: 600px; }
.container form { margin: auto;
width: 280px; }
.centered { text-align: center; }<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="~/CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
</script>
</body>
</html>Defining an Object
Like C#, JavaScript supports classes.
In C#, you must first create a class, then you can declare a variable that uses that classes as its type. That's how you get an object in C#. In JavaScript, you don't have to start from a class. You can directly create the object you need by giving it a name and specifying the members you need for the object. Creating an object is also defining one.
The primary formula to create an object is:
var object-name {};
Following this formula, provide a name for the object you want to create. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script>
var storeItem = {};
</script>
</body>
</html>
Introduction to the Properties of an Object
The primary member of an object is created as when declaring a variable. A variable in a class is considered a property of the object. Creating a property is equivalent to attaching a property to an object. To attach a property to an object, you have various options.
To add a property to an object, type the name of the object, a period, a name for the new property, and assign the desired value. Here are examples:
<script>
var storeItem = {};
storeItem.itemNumber = 270384;
storeItem.name = 'Blue Striped Dress';
storeItem.unitPrice = 138.95;
</script>
In the same way, you can keep adding new members to the object.
After attaching properties to an object, you can access those properties and use each as you see fit. To access a property, use the name of its object, a property, and the name of the property.
Practical Learning: Defining and Using an Object
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {};
bill.basicFee = 24.95;
bill.dvr = 9.95;
bill.sports = 9.85;
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
</script>
</body>
</html>
Adding Members Locally
Another technique to create an object is to attach its properties in the body of the object. The formula to follow is:
var object-name = {
member_1,
member_n,
. . .
member_n
};
This time, in the curly vrackets, declare each property. The formula to create a orioerty is:
property-name: value
Provid a name and its value for each property. Use the colon instead of the assignment and omit the var keyword. You can add just one property if you want. If you need to provide more than one property, separate them with commas.
To access a property outside the class, type the name of the object, a period, and the name of the property.
Practical Learning: Overloading an Indexer
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee : 35.85,
dvr : 10.65,
sports : 8.95
};
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
</script>
</body>
</html>
Updating a Property
At any time, you can change the value of a property. To do this, access the property by the name of its object and assign the desired name to it. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="~/CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95
};
bill.dvr = 14.95;
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
</script>
</body>
</html>
This would produce:
Introduction to the Methods of an Object
Overview
In the body of an object, you can create a function. Such a function becomes a member of the object. As mentioned for a class in C#, a function member created in the body of an object is called a method. To create a method, you have various options.
To attach a method to an object, in the body of the object, create a new property, followed by a colon, and define a function. The function doesn't need a name. Here is an example:
var bill = {
basicFee : 24.74,
dvr : 6.75,
sports : 9.95,
presentation : function () {
}
};
As an alternative, if you had first created an object with an empty body, attach a new property to the object and assign an anonymous function to it. The formula to follow would be:
var object-name {};
. . .
object-name.property-name = function() {};
Here is an example:
var bill = {};
bill.basicFee = 24.74;
bill.dvr = 6.75;
bill.sports = 9.95;
bill.presentation = function () {
}
To access a member of the class in the method, precede it with the name of the object and a period. Here are examples:
var bill = {
basicFee : 24.74,
dvr : 6.75,
sports : 9.95,
presentation : function () {
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
}
};
To access a method outside the object, type the name of the object, a period, the name of the property, and parentheses.
Practical Learning: Attaching a Method to an Object
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee : 35.85,
dvr : 10.65,
sports: 8.95,
presentation: function () {
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
}
};
bill.presentation();
</script>
</body>
</html>A Method that Returns a Value
A method can be to return a value. To do this, follow the same rule for a function. Here is an example:
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
}
};
Practical Learning: Creatubg a Method that Returns a Value
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
<div>
<label for="subTotal">Sub-Total:</label>
<input type="number" id="subTotal" name="subTotal" value="0.00" />
</div>
<div>
<label for="countyTaxes">County Taxes:</label>
<input type="number" id="countyTaxes" name="countyTaxes" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
}
};
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
document.BillEvaluation.subTotal.value = bill.subTotal();
</script>
</body>
</html>
Methods and Parameters
Like a regular function, a method of a class can use one or more parameters. When defining the method, add the name of each parameter in the parentheses of the method, In the body of the method, you can use or ignore the parameter.
When calling a method thae uses a parameter, you must pass an argument. If the method uses more than one parameter, pass the arguments in the appropriate order.
Practical Learning: Introducing the Parameters of a Method
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="~/CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="cableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="cableTVBasicFee" name="cableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="sportPackage">Sport Package:</label>
<input type="number" id="sportsPackage" name="sportsPackage" value="0.00" />
</div>
<div>
<label for="subTotal">Sub-Total:</label>
<input type="number" id="subTotal" name="subTotal" value="0.00" />
</div>
<div>
<label for="countyTaxes">County Taxes:</label>
<input type="number" id="countyTaxes" name="countyTaxes" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee : 32.70,
dvr : 10.45,
sports: 12.20,
subTotal: function () {
return bill.basicFee + bill.dvr + bill.sports;
},
localTaxes : function (rate) {
var total = bill.subTotal();
var taxes = total * rate / 100;
return taxes;
}
};
document.BillEvaluation.cableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.sportsPackage.value = bill.sports;
document.BillEvaluation.subTotal.value = bill.subTotal();
document.BillEvaluation.countyTaxes.value = bill.localTaxes(0.15);
</script>
</body>
</html>
this Object
this Member
In our introduction to classes, we saw that the C-based languages (C++, Java, C#, etc) use a special object named this. In those languages, the this object can be used only in the body of a member of a class, such as in the body of a property or of a method of the class. Most of the time, the this object is used to indicate that the member to which it is attached is declared or defined somewhere in the class. In that case, the this object is optional. Consider the following C# example:
public class Employee
{
decimal hsal;
public Employee(decimal salary)
{
/* In this example, the "this" object is optional.
* The "this" object "points" to a member. It simply indicates
* that the hsal member exists somewhere in this class.*/
this.hsal = salary;
}
public decimal HourlySalary
{
get
{
// The "this" object is optional here.
return this.hsal;
}
set
{
// The "this" object is optional here.
this.hsal = value;
}
}
public decimal OvertimeSalary
{
get
{
/* The "this" object "points" to a property defined
* somewhere in this class.
* The "this" object is optional here. */
return this.HourlySalary * 1.50m;
}
}
}
In some cases, the this object is used to reconcile a name conflict, such as when a parameter of a method holds the same name as a method of the class. Here is an example:
public class Employee
{
decimal salary;
public Employee(decimal salary)
{
/* In this example, the "this" object is required to indicate the
* different origins of both names that happen to be similar. */
this.salary = salary;
}
public decimal HourlySalary
{
get
{
// The "this" object is optional here.
return this.salary;
}
set
{
// We don't need the "this" object.
salary = value;
}
}
}
JavaScript also supports the this object but, in some cases, it uses it significantly differently than the other C-based languages. Slightly as done in C#, in JavaScript, to access a member (a property or a method) in a function of the object, you can use the name of the object or the this object.
Practical Learning: Using this Object
<!DOCTYPE html>
<html>
<head>
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
. . . No Change
</div>
<script>
var bill = {
basicFee: 35.85,
dvr: 10.65,
sports: 8.95,
subTotal: function () {
return this.basicFee + this.dvr + this.sports;
},
localTaxes: function (rate) {
var total = this.subTotal();
var taxes = total * rate / 100;
return taxes;
}
};
document.BillEvaluation.CableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.SportsPackage.value = bill.sports;
document.BillEvaluation.subTotal.value = bill.subTotal();
document.BillEvaluation.countyTaxes.value = bill.localTaxes(0.15);
</script>
</body>
</html>. . . No Change
<script>
var bill = {};
bill.basicFee = 38.75;
bill.dvr = 11.85;
bill.sports = 12.50;
bill.subTotal = function () {
return this.basicFee + this.dvr + this.sports;
};
bill.localTaxes = function (rate) {
var total = this.subTotal();
return total * rate / 100;
};
document.BillEvaluation.cableTVBasicFee.value = bill.basicFee;
document.BillEvaluation.DVRService.value = bill.dvr;
document.BillEvaluation.sportsPackage.value = bill.sports;
document.BillEvaluation.subTotal.value = bill.subTotal();
document.BillEvaluation.countyTaxes.value = bill.localTaxes(0.15);
</script>
</body>
</html>
Scoping this Object
In C-based compilation-based languages, the this object cannot be used outside the body of a member (property or method). Consider the following C# example:
public class Employee
{
decimal hsal;
public decimal HourlySalary
{
get { return hsal; }
set { hsal = value; }
}
/* The "this" object cannot be used outside a property or a method.
* This code/line will produce an error. */
private decimal yearlySalary = this.HourlySalary * 40 * 4 * 12;
}
In C-based languages, the this object is usually required where a member (property or method) must indicate that it is referring to its parent class. Here are two examples:
public class Employee
{
public Employee Self()
{
/* The "this" object indicates that this empl variable/object is a "pointer" to the current class.
* In this case, you can use the "this" object or another referrence of ths class.
* This means that, either the "this" object is not required
* or it can be substituted with another "pointer". */
Employee empl = this;
return empl;
}
public Employee Designate()
{
/* The "this" object indicates that this method produces an object of its own class.
* In this case, the "this" object is required. */
return this;
}
}
Notice that in these cases, the this object is used by itself (it is not attached to a declared member).
One more rule is that, outside the class, you cannot access a member of the class using the this object. This rule is also valid in JavaScript. Consider the following JavaScript code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="cableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="cableTVBasicFee" name="cableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="sportPackage">Sport Package:</label>
<input type="number" id="sportsPackage" name="sportsPackage" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = {
basicFee : 38.86,
dvr : 4.88,
sports: 8.58
};
document.BillEvaluation.cableTVBasicFee.value = this.basicFee;
document.BillEvaluation.DVRService.value = this.dvr;
document.BillEvaluation.sportsPackage.value = this.sports;
</script>
</body>
</html>
This would produce:
In JavaScript, the this object can be used to indicate where an object can be used/accessed or not (this feature is called scope). To specify this, create an object but, instead of curly brackets, assign the this object to it. Here is an example:
var bill = this;
After this declaration, you can add members (to the object) using the name of the object as we have done so far. But this time, you can also use the this object to attach a member to the object. Here are examples:
var bill = this; this.basicFee = 38.75; bill.dvr = 11.85; this.sports = 12.50;
If you add a function to the object, as we saw previously, in the body of that function, you can access the other members of the object using either the name of the object or the this object. Here are examples:
var bill = this;
this.basicFee = 38.75;
bill.dvr = 11.85;
this.sports = 12.50;
bill.subTotal = function () {
return this.basicFee + bill.dvr + this.sports;
};
bill.localTaxes = function (rate) {
return bill.subTotal() * rate / 100;
};
This time, you can use the this object to refer to the members of the object.
Practical Learning: Using this Object in Scope
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ESCAPE - Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
<h1 class="centered">ESCAPE</h1>
<h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
<h3 class="centered">Bill Evaluation</h3>
</div>
<div class="container">
<form name="BillEvaluation" method="post">
<fieldset>
<legend>Cable TV Services</legend>
<div>
<label for="CableTVBasicFee">Cable TV Basic Fee:</label>
<input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
</div>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" name="DVRService" value="0.00" />
</div>
<div>
<label for="SportPackage">Sport Package:</label>
<input type="number" id="SportsPackage" name="SportsPackage" value="0.00" />
</div>
<div>
<label for="subTotal">Sub-Total:</label>
<input type="number" id="subTotal" name="subTotal" value="0.00" />
</div>
<div>
<label for="countyTaxes">County Taxes:</label>
<input type="number" id="countyTaxes" name="countyTaxes" value="0.00" />
</div>
</fieldset>
</form>
</div>
<script>
var bill = this;
this.basicFee = 44.68;
this.dvr = 11.96;
this.sports = 12.85;
bill.subTotal = function () {
return bill.basicFee + this.dvr + this.sports;
};
bill.localTaxes = function (rate) {
return bill.subTotal() * rate / 100;
};
document.BillEvaluation.CableTVBasicFee.value = this.basicFee;
document.BillEvaluation.DVRService.value = this.dvr;
document.BillEvaluation.SportsPackage.value = this.sports;
document.BillEvaluation.subTotal.value = this.subTotal();
document.BillEvaluation.countyTaxes.value = this.localTaxes(0.15);
</script>
</body>
</html>
|
|
||
| Previous | Copyright © 2001-2019, FunctionX | Next |
|
|
||