Lesson 12: Creating and Using Conditional Statements

Creating and Using Conditional Statements

Conditional Alternatives

What else is the Condition?

Most of the time, when you consider a condition, it has an alternative. To let you consider such an alternative, JavaScript supports the else keyword. It must accompany an if condition. The formula to follow is:

if(condition) {
    statement(s)1;
}
else {
    statement(s)2;
}

Each condition can have as many statements as you want.

Practical Learning: Introducing Conditional Statements

Start Microsoft Visual Studio
On the main menu, click File -> New -> Project...
In the middle frame of the New Project dialog box, make sure ASP.NET Web Application (.NET Framework) is selected.
Change the Name to PayrollPreparation7
Click OK
In the ASP.NET Web Application dialog box, make sure the MVC icon is selected.
Click OK
In the Solution Explorer, right-click Content -> Add -> New Item...
In the left list of the Add New Item dialog box, under Visual C#, expand Web, and click Markup
In the middle list, click Style Sheet
Change the file Name to PayrollPreparation
Click Add

Change the document as follows:

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; }

In the Solution Explorer, expand App_Start and double-click BundleConfig.cs

Change the document as follows:

using System.Web.Optimization;

namespace PayrollPreparation7
{
    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"));
        }
    }
}

In the Solution Explorer, expand Controllers, and click HomeController.cs

In the class, create a method named PayrollEvaluation as follows:

using System.Web.Mvc;

namespace PayrollPreparation7.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 PayrollEvaluation() => View();
    }
}

In the class, right-click PayrollEvaluation() and click Add View...
In the Add View dialog box, make sure the View Name text box is displaying PayrollEvaluation. Click Add

Change the document as follows:

@{
    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">
        <table class="table table-striped">
            <tr>
                <td class="large-text bold">Hourly Salary:</td>
                <td><input class="form-control small" id="hourlySalary" /></td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</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>&nbsp;</td>
                <td class="text-center" colspan="5">
                    <input type="button" id="btnCalculate" class="btn btn-primary"
                           style="width: 500px" value="Calculate" onclick="calculate()" />
                </td>
            </tr>
            <tr>
                <td class="bold">Regular Time:</td>
                <td><span id="regularTimeMonday"></span></td>
                <td><span id="regularTimeTuesday"></span></td>
                <td><span id="regularTimeWednesday"></span></td>
                <td><span id="regularTimeThursday"></span></td>
                <td><span id="regularTimeFriday"></span></td>
            </tr>
            <tr>
                <td class="bold">Overtime:</td>
                <td><span id="overtimeMonday"></span></td>
                <td><span id="overtimeTuesday"></span></td>
                <td><span id="overtimeWednesday"></span></td>
                <td><span id="overtimeThursday"></span></td>
                <td><span id="overtimeFriday"></span></td>
            </tr>
            <tr>
                <td class="bold">Regular Pay:</td>
                <td><span id="regularPayMonday"></span></td>
                <td><span id="regularPayTuesday"></span></td>
                <td><span id="regularPayWednesday"></span></td>
                <td><span id="regularPayThursday"></span></td>
                <td><span id="regularPayFriday"></span></td>
            </tr>
            <tr>
                <td class="bold">Overtime Pay:</td>
                <td><span id="overtimePayMonday"></span></td>
                <td><span id="overtimePayTuesday"></span></td>
                <td><span id="overtimePayWednesday"></span></td>
                <td><span id="overtimePayThursday"></span></td>
                <td><span id="overtimePayFriday"></span></td>
            </tr>
            <tr>
                <td colspan="4">&nbsp;</td>
                <td class="bold">Net Pay:</td>
                <td><span id="netPay"></span></td>
            </tr>
        </table>
    </form>
</div>

In the Solution Explorer, right-click Scripts -> Add -> New Item...
In the left list of the New Item dialog box, under Visual C# and under Web, click Scripts
In the middle list, click TypeScript File
Change the file Name to TimeSheetEvaluation
Click Add

Change the document as follows:

function calculate() {
    const hSalary: number = 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);

    let overtimeSalary: number = hSalary * 1.50;

    let regTimeMon: number = 0.00;
    let overtimeMon: number = 0.00;
    let regPayMon: number = 0.00;
    let ovrPayMon: number = 0.00;

    let regTimeTue: number = 0.00;
    let overtimeTue: number = 0.00;
    let regPayTue: number = 0.00;
    let ovrPayTue: number = 0.00;

    let regTimeWed: number = 0.00;
    let overtimeWed: number = 0.00;
    let regPayWed: number = 0.00;
    let ovrPayWed: number = 0.00;

    let regTimeThu: number = 0.00;
    let overtimeThu: number = 0.00;
    let regPayThu: number = 0.00;
    let ovrPayThu: number = 0.00;

    let regTimeFri: number = 0.00;
    let overtimeFri: number = 0.00;
    let regPayFri: number = 0.00;
    let ovrPayFri: number = 0.00;

    if (monTime <= 8.00) {
        ovrPayMon = 0.00;
        overtimeMon = 0.00;
        regTimeMon = monTime;
        regPayMon = monTime * hSalary;
    } else {
        regTimeMon = 8.00;
        regPayMon = 8.00 * hSalary;
        overtimeMon = monTime - 8.00;
        ovrPayMon = (monTime - 8.00) * overtimeSalary;
    }

    if (tueTime <= 8.00) {
        ovrPayTue = 0.00;
        overtimeTue = 0.00;
        regTimeTue = tueTime;
        regPayTue = tueTime * hSalary;
    } else {
        regTimeTue = 8.00;
        regPayTue = 8.00 * hSalary;
        overtimeTue = tueTime - 8.00;
        ovrPayTue = (tueTime - 8.00) * overtimeSalary;
    }

    if (wedTime <= 8.00) {
        ovrPayWed = 0.00;
        overtimeWed = 0.00;
        regTimeWed = wedTime;
        regPayWed = wedTime * hSalary;
    } else {
        regTimeWed = 8.00;
        regPayWed = 8.00 * hSalary;
        overtimeWed = wedTime - 8.00;
        ovrPayWed = (wedTime - 8.00) * overtimeSalary;
    }

    if (thuTime <= 8.00) {
        ovrPayThu = 0.00;
        overtimeThu = 0.00;
        regTimeThu = thuTime;
        regPayThu = thuTime * hSalary;
    } else {
        regTimeThu = 8.00;
        regPayThu = 8.00 * hSalary;
        overtimeThu = thuTime - 8.00;
        ovrPayThu = (thuTime - 8.00) * overtimeSalary;
    }

    if (friTime <= 8.00) {
        ovrPayFri = 0.00;
        overtimeFri = 0.00;
        regTimeFri = friTime;
        regPayFri = friTime * hSalary;
    } else {
        regTimeFri = 8.00;
        regPayFri = 8.00 * hSalary;
        overtimeFri = friTime - 8.00;
        ovrPayFri = (friTime - 8.00) * overtimeSalary;
    }

    let netPay: number = regPayMon + regPayTue + regPayWed + regPayThu + regPayFri +
                         ovrPayMon + ovrPayTue + ovrPayWed + ovrPayThu + ovrPayFri;

    document.getElementById("regularTimeMonday").innerHTML = regTimeMon.toFixed(2);
    document.getElementById("regularTimeTuesday").innerHTML = regTimeTue.toFixed(2);
    document.getElementById("regularTimeWednesday").innerHTML = regTimeWed.toFixed(2);
    document.getElementById("regularTimeThursday").innerHTML = regTimeThu.toFixed(2);
    document.getElementById("regularTimeFriday").innerHTML = regTimeFri.toFixed(2);

    document.getElementById("overtimeMonday").innerHTML = overtimeMon.toFixed(2);
    document.getElementById("overtimeTuesday").innerHTML = overtimeTue.toFixed(2);
    document.getElementById("overtimeWednesday").innerHTML = overtimeWed.toFixed(2);
    document.getElementById("overtimeThursday").innerHTML = overtimeThu.toFixed(2);
    document.getElementById("overtimeFriday").innerHTML = overtimeFri.toFixed(2);

    document.getElementById("regularPayMonday").innerHTML = regPayMon.toFixed(2);
    document.getElementById("regularPayTuesday").innerHTML = regPayTue.toFixed(2);
    document.getElementById("regularPayWednesday").innerHTML = regPayWed.toFixed(2);
    document.getElementById("regularPayThursday").innerHTML = regPayThu.toFixed(2);
    document.getElementById("regularPayFriday").innerHTML = regPayFri.toFixed(2);

    document.getElementById("overtimePayMonday").innerHTML = ovrPayMon.toFixed(2);
    document.getElementById("overtimePayTuesday").innerHTML = ovrPayTue.toFixed(2);
    document.getElementById("overtimePayWednesday").innerHTML = ovrPayWed.toFixed(2);
    document.getElementById("overtimePayThursday").innerHTML = ovrPayThu.toFixed(2);
    document.getElementById("overtimePayFriday").innerHTML = ovrPayFri.toFixed(2);

    document.getElementById("netPay").innerHTML = netPay.toFixed(2);
}

In the Solution Explorer, right-click Scripts -> Add -> TypeScript JSON Configuration File
Accept the suggested name of the file, tsconfig, and click OK

Change the document as follows:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5"
  },
  "files": [
    "TimeSheetEvaluation.ts"
  ],
  "compileOnSave": true
}

Click the PayrollEvaluation.cshtml tab to activate it

Create a form as follows:

@{
    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>

To execute the application, on the main menu, click Debug -> Start Without Debugging

In the text boxes, type the following values:

Hourly Salary: 28.58
Monday:        8.00
Tuesday:       9.50
Wednesday:     6.00
Thursday:      10.50
Friday:        9.00

Click the Calculate button:
Close the browser and return to your programming environment

The Ternary Operator (?:)

If you are creating a short if...else condition where each part has a simple single statement, JavaScript supports the ternary operator as an alternative to it. The formula to use it is:

condition ? statement1 : statement2;

if...else if

An if...else condition considers only two propositions. The first proposition, if, is precise. The second proposition, else, embraces anything other than its accompanying if condition. If you want to create an alternate to the if condition but that considers only precise alternative, add an else if condition to the if clause. The formula to follow is:

if(condition1) {
    statement(s)1;
}
else if(condition2) {
    statement(s)2;
}

if...else if...else

If you create an if...else if... condition, you may still have at least one condition that doesn't fit. To consider that other embracing alternative, you can add an else condition. The formula to follow is:

if(condition1){
    statement(s)1;
}
else if(condition2) {
    statement(s)2;
}
else {
    statement(s)_n;
}

if...else if...else if...else

After the first if condition, you can create as many else if conditions as you want. The formula to follow is:

if(condition1) {
    statement(s)1;
}
else if(condition2) {
    statement(s)2;
}
. . .
else if(condition_n) {
    statement(s)_n;
}
else {
    statement(s)-n;
}

Conditional Statements and Functions

Introduction

In the body of a function, you can declare any variable you judge necessary. This includes Boolean variables. You can then use a Boolean variable like those we have used so far.

Practical Learning: Using a Conditional Statement in a Function

Click the TimeSheetEvaluation.ts tab and change the document as follows:

function evaluateTimeWorked(hSal: number, time: number) {
    let regTime: number = 0.00;
    let ovrt: number = 0.00;
    let regPay: number = 0.00;
    let ovrPay: number = 0.00;
    let overtimeSalary: number = hSal * 1.50;

    if (time <= 8.00) {
        ovrPay = 0.00;
        ovrt = 0.00;
        regTime = time;
        regPay = time * hSal;
    } else {
        regTime = 8.00;
        regPay = 8.00 * hSal;
        ovrt = time - 8.00;
        ovrPay = (time - 8.00) * overtimeSalary;
    }

    return {
        regularTime: regTime,
        overtime: ovrt,
        regularPay: regPay,
        overtimePay: ovrPay
    };
}

function calculate() {
    const hSalary: number = 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);

    let mondayValues = evaluateTimeWorked(hSalary, monTime);
    let tuesdayValues = evaluateTimeWorked(hSalary, tueTime);
    let wednesdayValues = evaluateTimeWorked(hSalary, wedTime);
    let thursdayValues = evaluateTimeWorked(hSalary, thuTime);
    let fridayValues = evaluateTimeWorked(hSalary, friTime);

    let netPay: number = mondayValues.regularPay + tuesdayValues.regularPay + wednesdayValues.regularPay + thursdayValues.regularPay + fridayValues.regularPay +
                         mondayValues.overtimePay + tuesdayValues.overtimePay + wednesdayValues.overtimePay + thursdayValues.overtimePay + fridayValues.overtimePay;

    document.getElementById("regularTimeMonday").innerHTML = mondayValues.regularTime.toFixed(2);
    document.getElementById("regularTimeTuesday").innerHTML = tuesdayValues.regularTime.toFixed(2);
    document.getElementById("regularTimeWednesday").innerHTML = wednesdayValues.regularTime.toFixed(2);
    document.getElementById("regularTimeThursday").innerHTML = thursdayValues.regularTime.toFixed(2);
    document.getElementById("regularTimeFriday").innerHTML = fridayValues.regularTime.toFixed(2);

    document.getElementById("overtimeMonday").innerHTML = mondayValues.overtime.toFixed(2);
    document.getElementById("overtimeTuesday").innerHTML = tuesdayValues.overtime.toFixed(2);
    document.getElementById("overtimeWednesday").innerHTML = wednesdayValues.overtime.toFixed(2);
    document.getElementById("overtimeThursday").innerHTML = thursdayValues.overtime.toFixed(2);
    document.getElementById("overtimeFriday").innerHTML = fridayValues.overtime.toFixed(2);

    document.getElementById("regularPayMonday").innerHTML = mondayValues.regularPay.toFixed(2);
    document.getElementById("regularPayTuesday").innerHTML = tuesdayValues.regularPay.toFixed(2);
    document.getElementById("regularPayWednesday").innerHTML = wednesdayValues.regularPay.toFixed(2);
    document.getElementById("regularPayThursday").innerHTML = thursdayValues.regularPay.toFixed(2);
    document.getElementById("regularPayFriday").innerHTML = fridayValues.regularPay.toFixed(2);

    document.getElementById("overtimePayMonday").innerHTML = mondayValues.overtimePay.toFixed(2);
    document.getElementById("overtimePayTuesday").innerHTML = tuesdayValues.overtimePay.toFixed(2);
    document.getElementById("overtimePayWednesday").innerHTML = wednesdayValues.overtimePay.toFixed(2);
    document.getElementById("overtimePayThursday").innerHTML = thursdayValues.overtimePay.toFixed(2);
    document.getElementById("overtimePayFriday").innerHTML = fridayValues.overtimePay.toFixed(2);

    document.getElementById("netPay").innerHTML = netPay.toFixed(2);
}

Click the PayrollEvaluation.cshtml tab to activate it
To execute the application, on the main menu, click Debug and click Start Without Debugging

In the text boxes, type the following values:

Hourly Salary: 33.07
Monday:        9.50
Tuesday:       6.50
Wednesday:     10.50
Thursday:      7.00
Friday:        9.00

Click the Calculate button:
Close the browser and return to your programming environment

Passing a Boolean Value as Argument

When creating a function, you can make it use any type of parameter. A parameter can be a Boolean type. In the body of the function, you can ignore the parameter or use it as holding a value that is either true or false.

Returning from a Function

After performing the desired operations in a function, you can make it return a value. When it comes to Boolean expressions, you can create conditional statements that each returns a Boolean value. The most important rule is that, when the compiler encounters the closing curly bracket, it must come to a conclusion that the function has returned all necessary values.

Built-In Logic

Introduction

To assist you when writing your code, JavaScript provides some functions and objects that you can directly use. These are built-in functions and objects.

Some Value, But Not a Number

The Number object is equipped with a property named NaN. This constant is used to determine that a value is not a number, or if the compiler is not able to conclude that some value is a number, it decides that the thing is not a number.

When this is Not a Number

To accompany the NaN constant, the Number object is equipped with a Boolean method named isNaN. Its syntax is:

boolean isNaN(value);

This method takes one argument, which is a value to analyze. If the argument is a valid number, this method returns true (this method analyzes a value to formulate a conclusion; it doesn't produce the number). If the argument doesn't hold a valid number, this method returns false; in this case, this also means that the argument is NaN.

By the way, most of the time, you don't have to compare a Boolean function call to true as in == true or === true. The truthfulness is implied.

Logical Conjunctions and Disjunctions

Nesting a Conditional Statement

You can nest a condition in a conditional statement. This is referred to as nesting. The formula to nest one condition in another is:

if( condition1 )
{
    if( condition2 )
    {
        statement(s)
    }
}

You can also use a ternary operator to nest a condition in another. You can also nest a condition in a condition that itself is nested.

Boolean Conjunctions

A Boolean conjunction is the ability to join two condition so that both must be true. JavaScript supports conjunctions using the && operator. The formula to use this operator is:

condition1 && condition2

In the same way, you can combine conjunctions as follows:

condition1 && condition2 && condition3 && . . . && condition_n

The conjunction is usually created in an if conditional statement or its variants that involve the else alternatives.

A Text Box Control for Boolean Conjunctions

A text box supports a Boolean conjunction using two attributes. In an INPUT control whose TYPE is set to TEXT, HTML provides an attribute named MINLENGTH. This attribute specifies the minimum number of characters that will be allowed on the text box. The control is also equipped with an attribute named MAXLENGTH. This attribute specifies the maximum number of characters that the control can hold. As a result, if the number of symbols entered in the text is between the MINLENGTH and the MAXLENGTH, the value is valid. Normally, you don't have to write code for this: the compiler will watch it for you while the user is typing in the text box.

Boolean Disjunctions

JavaScript supports the ability to join two or more conditions so that only one of them needs to be true for the whole group of conditions to be true. Such as group is referred to as a disjunction. The disjunction uses the || operator. The formula to disjoin two conditions is:

condition1 || condition2

You can also set the value of a Boolean variable with a disjunction. Here is an example:

var canBeExcused = vehicleType == 'police' || vehicleType == 'ambulance';

Such a variable can be compared with true or false to get its current value.

You can also disjoin more than two conditions using the following formula:

condition1 || condition2 || . . . || condition_n

The Text Box for Boolean Disjunction

The HTML text box supports Boolean disjunction using the MINLENGTH and the MAXLENGTH attributes. If the value of the MINLENGTH attribute (the minimum number of symbols allowed in the text box) is lower than the or higher than the value of the MAXLENGTH attribute (the maximum number of symbols in the text box), the value must be rejected.

Switching Conditions

Introduction

JavaScript supports the idea of using a value and considering the possible matches of that value. This is done by using a combination of the switch and the case keywords. The primary formula to follow is:

switch(expression)
{
    case choice1:
        statement1;
	break;
    case choice2;
        statement2;
	break;
    case choice-n;
        statement-n;
	break;
}

Each case considers one possible value of the expression.

A default Case

If you think there is a possible value the doesn't match any of the choices, you should add an outcome that uses the default keyword. This leads to a formula as follows:

switch(expression)
{
    case choice1:
        statement1;
    	break;
    case choice2:
        statement2;
    	break;
    case choice-n:
        statement-n;
    	break;
    default:
        default-statement;
    	break;
}

Everything follows the description we reviewed for the switch condition in C#, excluding the pattern matching.

Enumerations

Introduction

An enumeration is a list of numbers. The reason to create that list depends on what you want each number to represent. To give meaning to each number, you associate a name to it so that, when you need to use one of the numbers of an enumeration, you will instead use its associated name.

Creating an Enumeration

The primary formula to create an enumeration is:

enum enumeration-name { member(s)}

Start with the enum keyword followed by a name and curly brackets. To create an enumeration that contains one element, enter the name of that element in the curly brackets. Here is an example:

enum MaritalStatus { Single }

To create an enumeration that has more than one element, enter the names of those elements in the curly brackets but separate them with commas. Here is an example:

enum MaritalStatus { Single, Married, Unknown }

Using an Enumeration

After creating an enumeration, it becomes some type of a data type. One way you can use it is to declare a variable from it. To indicate that the variable will hold values from an enumeration, you should appropriately initialize it. To do that, after the name of the variable, type =, the name of the enumeratio, a period, and the desired member. Here is an example:

enum MaritalStatus { Single, Married, Unknown }

let mStatus = MaritalStatus.Single;

Practical Learning: Disposing of Components

Close your programming environment


Previous	Copyright © 2018-2019, FunctionX	Next