Introduction to Classes
Introduction to Classes
Classes Fundamentals
Introduction
A class is a technique to prepare a blueprint that can be used to create an object. A class itself is not an object. It used to create a list of expressions that can be used to create an object.
Practical Learning: Introducing Conditional Statements
body {
background-color: white;
}
.bold { font-weight: 600; }
.small { width: 100px; }
.large-text { width: 120px; }
.delimiter { margin: auto;
width: 700px; }
.common-font { font-family: Georgia, Garamond, 'Times New Roman', serif; }using System.Web.Optimization;
namespace PayrollPreparation8
{
public class BundleConfig
{
// For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/PayrollPreparation.css"));
}
}
}using System.Web.Mvc;
namespace PayrollPreparation8.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
public ActionResult PayrollPresentation() => View();
}
}@{
ViewBag.Title = "Payroll Preparation";
}
<h2 class="common-font text-center bold">Payroll Preparation</h2>
<hr />
<div class="delimiter common-font">
<form name="PayrollPreparation" method="post">
<table class="table table-striped">
<tr>
<td class="large-text bold">Hourly Salary:</td>
<td><input class="form-control small" id="hourlySalary" /></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="large-text bold">Days</td>
<td class="bold text-center">Monday</td>
<td class="bold text-center">Tuesday</td>
<td class="bold text-center">Wednesday</td>
<td class="bold text-center">Thursday</td>
<td class="bold text-center">Friday</td>
</tr>
<tr>
<td class="bold">Time Worked:</td>
<td><input type="number" class="form-control small" id="monday" /></td>
<td><input type="number" class="form-control small" id="tuesday" /></td>
<td><input type="number" class="form-control small" id="wednesday" /></td>
<td><input type="number" class="form-control small" id="thursday" /></td>
<td><input type="number" class="form-control small" id="friday" /></td>
</tr>
<tr>
<td> </td>
<td class="text-center" colspan="5">
<input type="button" id="btnCalculate" class="btn btn-primary"
style="width: 500px" value="Calculate" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td class="bold">Time</td>
<td class="bold">Pay</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="bold">Regular:</td>
<td><span id="regularTime"></span></td>
<td><span id="regularPay"></span></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="bold">Overtime:</td>
<td><span id="overtime"></span></td>
<td><span id="overtimePay"></span></td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td class="bold">Total:</td>
<td><span id="totalTime"></span></td>
<td><span id="netPay"></span></td>
<td> </td>
</tr>
</table>
</form>
</div>Creating a Class
A class is created using a keyword named class. The primary formula to follow is:
class class-name { }
After the class keyword, provide a name for the class. Unlike variables as we have declared them so far, the name of a class should follow the CamelCase. This means that if the name is one word, the first letter should be in uppercase and the other letters in lowercase. If the name if a combination of words, each word should start in uppercase but the name must be provided in one. Here is an example:
class Toy {
}
The section between the curly brackets, { and }, is the body of the class. In that body, you can create the desired members of the class.
Practical Learning: Creating a Class
class Pay {
}Creating an Object
As it can be concluded from our introduction, in order to have an object, you should first create a class. Once you have a class, the formula to create an object is:
var | let | const variable-name = new class-name();
Start with one of the traditional keywords used to declare a variable. This is followed by the name of the object. The name follows the camelCase of the names of variables. Unlike the regular variable, you must assign the new operator to the variable. This is followed by the name of the class and parentheses. Here is an example:
class Toy {
}
let truck = new Toy();
Introduction to the Properties of a Class
Introduction
A property of a class is a piece of information that describes an object. To create a property, in the body of the class, type a name like that of a variable and specify its type. We already know that, to indicare the type of a viable, after its name, type a colon and a type. Here is an example of creating a property:
class Toy {
itemNumber: number;
}
let truck = new Toy();
Practical Learning: Adding Properties to a Class
class Pay {
hourlySalary: number;
timeWorked: number;
}Accessing a Property
To access a property outside of its class, type the name of an object created from the class, a period, and the name of the property. Here is an example:
class Toy {
itemNumber: number;
}
let truck = new Toy();
truck.itemNumber
Using a Property
The primay way to use a property is to give it a value. To do this, after accessing the property, assign the desired value to it. Of course, the value must be appropriate based on the type of the propert. Here is an example
class Toy {
itemNumber: number;
}
let truck = new Toy();
truck.itemNumber = 492850;
Another to use a property, or after initializing a property, you can display its value using any of the techniques we have used so far.
Introduction to the Methods of a Class
Overview
As seen with JavaScript objects, a method of a class is a function created in the body of the class. The purpose of the function is to perform one or more operations.
Creating a Method
To create a method, in the body of a class, type a name, some parentheses, and a body delimited by curly brackets. Here is an example:
class Toy {
itemNumber: number;
initialize() {
}
}
After creating a method, to access it outside its class, after declaring a variable of the class, type the name of the variable, a period, the name of the method, and parentheses. Here is an example:
class Toy {
itemNumber: number;
initialize() {
}
}
let truck = new Toy();
truck.initialize();
this Class
When you create a class, it becomes equipped with an object named this. The this object allows you to access the members of class from the other members of the same class. For example, to access a property of a class in the body of a method of the same class, type this, a period, and the name of the desired property. You can then use the accessed member, such as initialyzing a property. In the same way, you use the this object to call one method from the body of another method of their common class. Here are examples:
class Toy {
itemNumber: number;
initialize() {
this.itemNumber = 492850;
}
present() {
this.initialize();
}
}
Returning from a Method
Returning a Constant
When a method reaches its end, if you want, you can make it return a value. To do this, before the closing curly bracket, type the return keyword followed by a constant value. Here is an example:
class Toy {
countDays() {
return 15;
}
}
Returning an Expression
The value a method returns can be an expression.
Practical Learning: Returning an Expression from a Method
class Payroll {
hourlySalary: number;
timeSpecified: number;
calculateOvertimeSalary(): number {
return this.hourlySalary * 1.50;
}
calculateRegularPay(): number {
return this.hourlySalary - this.evaluateRegularTime();
}
calculateOvertimePay(): number {
return this.calculateOvertimeSalary() - this.calculateOvertime();
}
calculateNetPay(): number {
return this.calculateRegularPay() + this.calculateOvertimePay();
}
}Methods and Conditional Statements
When creating a method that involves conditional statements, you may want the method to return a value based on some condition. Make sure that, when the compiler gets to the end of the method, all possible outcomes have been reviewed and, when necessary, each possible outcome has returned a value.
Practical Learning: Returning a Value from a Method
class Payroll {
hourlySalary: number;
timeSpecified: number;
calculateOvertimeSalary(): number {
return this.hourlySalary * 1.50;
}
evaluateRegularTime(): number {
if (this.timeSpecified <= 40.00)
return this.timeSpecified;
else
return 40.00;
}
calculateOvertime(): number {
if (this.timeSpecified <= 40.00)
return 0.00;
else
return this.timeSpecified - 40.00;
}
calculateRegularPay(): number {
return this.hourlySalary - this.evaluateRegularTime();
}
calculateOvertimePay(): number {
return this.calculateOvertimeSalary() - this.calculateOvertime();
}
calculateNetPay(): number {
return this.calculateRegularPay() + this.calculateOvertimePay();
}
}A Method with a Parameter
Introduction
To assist a method with the operation(s) it must perform, you can provide a value to it. To prepare a method for such a value, in its parentheses, type the name that will represent the value. That name is called a parameter.
To give a parameter to a method, in its parentheses, type a name for the parameter, a colon, and a data type. Here is an example:
class Toy {
present(nbr: number) {
}
}
In the body of the method, you can ignore or use the parameter. For example, you can use the method to display the value of the parameter. Here is an example:
TypeScript File: ToyDefinition.ts
class Toy {
present(nbr: number) {
document.querySelector("#itemNbr").innerHTML = nbr.toString();
}
}
View: ToyPresentation.cshtml
@{
ViewBag.Title = "Toy Presentation";
}
<h2>Toy Presentation</h2>
<p><b>Item #:</b> <span id="itemNbr"></span></p>
<script src="~/Scripts/ToyDefinition.js"></script>
Another way to use a parameter is to assign it to a property of the class. This technique is used to initialize a property. Here is an example:
class Toy {
itemNumber: number;
present(nbr: number) {
this.itemNumber = nbr;
}
}
Calling a Method with One Parameter
When calling a method that uses one parameter, you must provide a value for the parameter. If you know the value you want to pass as argument, pass its constant. Here is an example:
class Toy {
itemNumber: number;
present(nbr: number) {
this.itemNumber = nbr;
}
}
let truck = new Toy();
truck.present(492850);
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
This would produce:
As an alternative, you can first declare and initialize a variable, then pass it as argument.
An Object as Argument
When creating a method with a parameter, you may want that parameter to represent an object. To do this, in the parentheses of the method, specify the name of the parameter. Here is an example:
class Toy {
present(fun) {
}
}
At this time, the method only knows that it will receive an argument but it doesn't know the type of the argument. In the body of the method, use the parameter as if it is an object, that is, access the members of the object. Here is an example:
class Toy {
present(fun) {
document.querySelector("#itemNbr").innerHTML = fun.itemNumber.toString();
document.querySelector("#itemName").innerHTML = fun.name;
document.querySelector("#price").innerHTML = fun.unitPrice.toString();
}
}
When calling the method, (you must) pass an object as argument. Here is an example:
class Toy {
present(fun) {
document.querySelector("#itemNbr").innerHTML = fun.itemNumber.toString();
document.querySelector("#itemName").innerHTML = fun.name;
document.querySelector("#price").innerHTML = fun.unitPrice.toString();
}
}
let truck = new Toy();
let tablet = {
itemNumber: 775080,
name: "Fun Touch Tablet",
unitPrice: 35.66
};
truck.present(tablet);
This would produce:
Whenever you are not planning to change an object throughout your application, you should create it as a constant. Here is an example:
class Toy {
present(fun) {
. . .
}
}
let truck = new Toy();
const tablet = {
itemNumber: 775080,
name: "Fun Touch Tablet",
unitPrice: 35.66
}
truck.present(tablet);
You may need to create the object if you plan to use it more than once. If you are planning to use the object only as argument, you can pass it directly to the method. Here is an example:
class Toy {
present(fun) {
document.querySelector("#itemNbr").innerHTML = fun.itemNumber.toString();
document.querySelector("#itemName").innerHTML = fun.name;
document.querySelector("#price").innerHTML = fun.unitPrice.toString();
}
}
let truck = new Toy();
truck.present({
itemNumber: 775080,
name: "Fun Touch Tablet",
unitPrice: 35.66
});
An Array as Argument
The parameter of a method can represent an array. To make it happen, follow the same logic as for an object: When creating a method, provide a name for a parameter to it. In the body of the method, ignore or use the parameter. If you decide to use the parameter in the body of the method, treat the parameter as an array. When calling the method, pass an array as argument. Here is an example:
TypeScript File: PersonnelManagement.ts
class Accounting {
showEmployees(staff) {
document.write("<table style='border: 2px solid black; width: 420px'>");
document.write("<tr><td style='font-weight: bold; text-align: center; width: 110px;'>Employee #</td>");
document.write("<td style='font-weight: bold; border: 1px solid black; width: 100px;'>First Name</td>");
document.write("<td style='font-weight: bold; border: 1px solid black; width: 100px;'>Last Name</td>");
document.write("<td style='font-weight: bold; border: 1px solid black; text-align: center'>Hourly Salary</td></tr>");
for (let i: number = 0; i < staff.length; i++) {
document.write("<tr><td style='text-align: center; border: 1px solid black;'>" + staff[i].employeeNumber + "</td>");
document.write("<td style='border: 1px solid black'>" + staff[i].firstName + "</td>");
document.write("<td style='border: 1px solid black'>" + staff[i].lastName + "</td>");
document.write("<td style='text-align: center; border: 1px solid black'>" + staff[i].hourlySalary.toFixed(2) + "</td></tr>");
}
document.write("</table>");
}
};
const employees = [
{ employeeNumber: 941148, firstName: "Catherine", lastName: "Watts", hourlySalary: 68.80 },
{ employeeNumber: 266830, firstName: "Robert", lastName: "Gwynne", hourlySalary: 24.95 },
{ employeeNumber: 519308, firstName: "July", lastName: "Samms", hourlySalary: 28.75 },
{ employeeNumber: 317462, firstName: "Laura", lastName: "Amiens", hourlySalary: 35.05 },
{ employeeNumber: 694173, firstName: "Kenneth", lastName: "Jeffers", hourlySalary: 17.75 }
];
const hr = new Accounting();
hr.showEmployees(employees);
View:EmployeesRecords.cshtml
@{
ViewBag.Title = "Employees Records";
}
<h2>Employees Records</h2>
<script src="~/Scripts/PersonnelManagement.js"></script>
This would produce:
Once again, if you are not planning to use the array many times, you can create it directly in the parentheses of calling the method. Here is an example:
class Accounting {
showEmployees(staff) {
. . .
}
};
const hr = new Accounting();
hr.showEmployees([
{ employeeNumber: 941148, firstName: "Catherine", lastName: "Watts", hourlySalary: 68.80 },
{ employeeNumber: 266830, firstName: "Robert", lastName: "Gwynne", hourlySalary: 24.95 },
{ employeeNumber: 519308, firstName: "July", lastName: "Samms", hourlySalary: 28.75 },
{ employeeNumber: 317462, firstName: "Laura", lastName: "Amiens", hourlySalary: 35.05 },
{ employeeNumber: 694173, firstName: "Kenneth", lastName: "Jeffers", hourlySalary: 17.75 }
]);
A Method with Many Parameters
Introduction
When creating a method, if you want it to use many parameters, write the name and type of each parameter in the parentheses of the method. The parameters can be of the same type. In the body of the method, ignore or use the parameters. Here is an example:
class Employee {
createFullName(fname: string, lname: string): string {
return fname + ' ' + lname;
}
}
The parametets can also be of different types. When calling the method, provide a value for each parameter. Here is an example: : Here are examples:
View: ToyPresentation.cshtml
@{
ViewBag.Title = "Toy Presentation";
}
<h2>Toy Presentation</h2>
<p><b>Item #:</b> <span id="itemNbr"></span></p>
<p><b>Item Name:</b> <span id="itemName"></span></p>
<p><b>Unit Price:</b> <span id="price"></span></p>
<script src="~/Scripts/ToyDefinition.js"></script>
TypeScript File: ToyDefinition.ts
class Toy {
present(nbr: number, name: string, price: number) {
document.querySelector("#itemNbr").innerHTML = nbr.toString();
document.querySelector("#itemName").innerHTML = name;
document.querySelector("#price").innerHTML = price.toString();
}
}
let truck = new Toy();
truck.present(492850, "Fire Truck with Remote Control", 25.50);
This would produce
A Method with Objects
When creating a method that uses various parameters, you can use a mix of numbers, strings, objects, etc, in any order of your choice. When calling the method, pass each argument in the right order and with the appropriate value.
Introduction to the Constructors of a Class
Introduction
When an object is created from a class, you may want the new object to hold some preliminary values for its properties. To do this, we saw that you can create a method. Here is an example:
class Toy {
itemNumber: number;
prepare() {
this.itemNumber = 492850;
}
}
let truck = new Toy();
truck.prepare();
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
As you can see, to apply that prelimary value to the property, you must call the method. Object-oriented languages provide an alternative called a constructor. A constructor is a special method that is automatically called when an object is created from a class; that is, when a variable is declared and initialized from a class.
Creating a Constructor
To get a constructor, create a method named constructor.
A Parameterized Constructor
Since a constructor is primarily a method, it can use a parameter. That is, when creating a constructor, in its parentheses, type a name for the parameter. If the parameter is a number or a string, specify its type. Here is an example:
class Toy {
constructor(value: number) {
}
}
Creating an Object
In our introduction to classes, we saw that, to create an object, you can declare a variable and initialize it with the name of a class. Actually, when you do that, the constructor of a class is automatically called. If you create a constructor that uses a parameter, when creating an object from that class, you must pass an argument to the name of the class to represent the parameter. Here is an example:
class Toy {
constructor(value: number) {
}
}
let truck = new Toy(492850);
A Default Constructor
As seen with other methods, you can create a simple constructor that has empty parentheses. Here is an example:
class Toy {
constructor() {
}
}
This type of constructor is called a default constructor. When you create a class, if you don't create any constructor at all, a default constructor is automatically created in the class. That's why, since our introduction to classes, we didn't need to create a constructor but we were able to create objects from our classes. Still, if you want, when creating a class, you can add a default constructor to it.
Techniques of Creating and Using a Constructor
Initializing an Object with Constant Values
The primary goal of a constructor is to initialize an object. At a minimum, you can create a property and initialize it in the body of a constructor. This is done by assigning a constant value to the property. Here is an example:
class Toy {
itemNumber: number;
constructor() {
this.itemNumber = 492850;
}
}
let truck = new Toy();
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
In the same way, you can use a constructor to initialize many properties with constant values. Here is an example:
class Toy {
itemNumber: number;
itemName: string;
unitPrice: number;
constructor() {
this.itemNumber = 492850;
this.itemName = "Fire Truck with Remote Control";
this.unitPrice = 25.50;
}
}
let truck = new Toy();
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
document.querySelector("#itemName").innerHTML = truck.itemName;
document.querySelector("#price").innerHTML = truck.unitPrice.toString();
Initializing an Object with Unknown Values
Normally, when creating a class, you cannot always predict the values that the class (the properties of the class) will use. Therefore, when creating a constructor and you want to use it to initialize an object, you should give the necessary parameter(s) to it. Then, in the body of the constructor assign the parameter to the property. Here is an example:
class Toy {
itemNumber: number;
constructor(nbr: number) {
this.itemNumber = nbr;
}
}
After doing this, when creating an object, you must pass the appropriate argument to the class. Here is an example:
class Toy {
itemNumber: number;
constructor(nbr: number) {
this.itemNumber = nbr;
}
}
let truck = new Toy(492850);
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
In the same way, you can use a constructor to initialize many properties. Here is an example:
class Toy {
itemNumber: number;
itemName: string;
unitPrice: number;
constructor(nbr: number, name: string, cost: number) {
this.itemNumber = nbr;
this.itemName = name;
this.unitPrice = cost;
}
}
When you are creating an object, pass the right number of arguments and by their appropriate types. Here is an example:
class Toy {
itemNumber: number;
itemName: string;
unitPrice: number;
constructor(nbr: number, name: string, cost: number) {
this.itemNumber = nbr;
this.itemName = name;
this.unitPrice = cost;
}
}
let truck = new Toy(492850, "Fire Truck with Remote Control", 25.50);
document.querySelector("#itemNbr").innerHTML = truck.itemNumber.toString();
document.querySelector("#itemName").innerHTML = truck.itemName;
document.querySelector("#price").innerHTML = truck.unitPrice.toString();
Practical Learning: Creating and Using a Constructor
class Payroll {
hourlySalary: number;
timeSpecified: number;
public Payroll(salary: number, time: number) {
this.hourlySalary = salary;
this.timeSpecified = time;
}
calculateOvertimeSalary(): number {
return this.hourlySalary * 1.50;
}
evaluateRegularTime(): number {
if (this.timeSpecified <= 40.00)
return this.timeSpecified;
else
return 40.00;
}
calculateOvertime(): number {
if (this.timeSpecified <= 40.00)
return 0.00;
else
return this.timeSpecified - 40.00;
}
calculateRegularPay(): number {
return this.hourlySalary - this.evaluateRegularTime();
}
calculateOvertimePay(): number {
return this.calculateOvertimeSalary() - this.calculateOvertime();
}
calculateNetPay(): number {
return this.calculateRegularPay() + this.calculateOvertimePay();
}
}function calculate() {
const hSalary = Number((document.querySelector("#hourlySalary") as HTMLInputElement).value || 0);
const monTime: number = Number((document.querySelector("#monday") as HTMLInputElement).value || 0);
const tueTime: number = Number((document.querySelector("#tuesday") as HTMLInputElement).value || 0);
const wedTime: number = Number((document.querySelector("#wednesday") as HTMLInputElement).value || 0);
const thuTime: number = Number((document.querySelector("#thursday") as HTMLInputElement).value || 0);
const friTime: number = Number((document.querySelector("#friday") as HTMLInputElement).value || 0);
const totalTime = monTime + tueTime + wedTime + thuTime + friTime;
const work = new Pay(hSalary, totalTime);
document.querySelector("#regularTime").innerHTML = work.evaluateRegularTime().toFixed(2);
document.querySelector("#regularPay").innerHTML = work.calculateRegularPay().toFixed(2);
document.querySelector("#overtime").innerHTML = work.calculateOvertime().toFixed(2);
document.querySelector("#overtimePay").innerHTML = work.calculateOvertimePay().toFixed(2);
document.querySelector("#totalTime").innerHTML = totalTime.toFixed(2);
document.querySelector("#netPay").innerHTML = work.calculateNetPay().toFixed(2);
}{
"compilerOptions": {
"noImplicitAny": false,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"files": [
""PayDayDefinition.ts",
"PayrollEvaluation.ts"
],
"compileOnSave": true
}@{
ViewBag.Title = "Payroll Evaluation";
}
<h2 class="common-font text-center bold">Payroll Evaluation</h2>
<hr />
<div class="delimiter common-font">
<form name="PayrollEvaluation" method="post">
. . .
</form>
</div>
<script src="~/Scripts/TimeSheetEvaluation.js"></script>
Hourly Salary: 28.58 Monday: 8.00 Tuesday: 9.50 Wednesday: 6.00 Thursday: 10.50 Friday: 9.00
<script src="~/Scripts/PayDayDefinition.js"></script> <script src="~/Scripts/PayrollEvaluation.js"></script>
|
|
||
| Previous | Copyright © 2019, FunctionX | Home |
|
|
||