Introduction to Conditional Statements
Introduction to Conditional Statements
A Boolean Value
Introduction
A value is said to be Boolean if it can hold one of two values: true or false. Any of the Boolean expressions we have used so far represented or produced a Boolean value.
A Boolean Variable
A Boolean value is one that can be expressed as being true or false. In AngularJS and JavaScript, to get such a value, declare it with the var keyword. You can then initialize the variable with true or false. Here is an example:
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var isFullTime = true;
});
</script>
You can also initialize the variable using a Boolean expression. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>Employment Summary: {{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var status = "Full Time";
var isFullTime = status == "Full Time";
if (isFullTime === true) {
this.conclusion = "Full Benefits";
}
});
</script>
</body>
</html>
To make your code easier to read, you should put the Boolean expression in parentheses. Here is an example:
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var status = "Full Time";
var isFullTime = (status == "Full Time");
if (isFullTime === true) {
this.conclusion = "Full Benefits";
}
});
</script>
Alternatives to Comparisons
What Other Alternative
A conditional statement created with if is used to examine one possibility. Sometimes there are other possible outcomes. To let you examine any possibility other than the one from if, the C-based languages provide the else keyword. It is used to create a section after the if clause. The formula to follow is:
if( condition) { if-statement(s); } else { else-statement(s) }
As you can see, the else section section doesn't need a condition; this is because it is made for any situation that doesn't fit the if condition. Instead, the else clause must include its own statement. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>{{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var employeeId = 293584;
if (employeeId === 24) {
this.conclusion = "Welcome Mrs. Landford, you will now be redirected to a classified document created 'for your eyes only'. As the system is monitoring all activities on the document, please don't make any copy of the document and don't send it to anybody.";
} else {
this.conclusion = "You are not allowed to view classified information. If you have any question, please contact our administration.";
}
});
</script>
</body>
</html>
By the way, you can write the else on its own line or on many lines thereafter.
What Other Alternatives
As mentioned already, an if condition examines only one outcome. There can be many situations other than that first condition. To let you consider them, the C-based languages provide a condition expressed with else if. The formula to follow is:
if( if-condition) { if-statement(s); } else if( else-if-condition) { else-if-statement(s); }
Based on this, create an expression with else if() after the if() condition. The else if() clause must include its own condition in its parentheses. In its square brackets, create one or more statements. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>{{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var classification = "Secret";
if (classification === "Secret") {
this.conclusion = "A classified document labeled Secret is for high level personnel. If exposed to public use, such a document can cause 'serious damage' to the nation.";
} else if (classification === "Confidential") {
this.conclusion = "A document is classified as Confidential if its publication may significant damage to national security.";
}
});
</script>
</body>
</html>
A Last Recourse Alternative
The if() clause and an else if() condition examine only one outcome each. In most cases, you may still have at least one situation that don't fit neither the if() nor the else if() condition. In this case, you can add a last else clause that embraces all the other conditions. The formula to follow is:
if( if-condition) { if-statement(s); } else if( else-if-condition_1) { else-if-statement(s)_1; } else { else-statement(s)_n; }
The else clause must be created last.
Practical Learning: Creating a Conditional Statement
var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
this.estimateCableBill = function () {
var packageFee = 0.00;
var dvr = this.DVRService;
var sport = this.SportsPackage;
var category = this.packageType;
if (category == 'Standard') {
packageFee = 34.50;
}
else if (category == 'Performance') {
packageFee = 51.85;
}
else {
packageFee = 29.25;
}
var subTotal = packageFee + dvr + sport;
var fcc = subTotal * 0.00250881;
var local = (subTotal + fcc) * 0.0372668;
var state = (subTotal + fcc) * 0.0082493;
this.fccFee = fcc;
this.DVRService = dvr;
this.localTaxes = local;
this.stateTaxes = state;
this.subTotal = subTotal;
this.SportsPackage = sport;
this.CableTVPackageFee = packageFee;
this.paymentAmount = subTotal + fcc + local + state;
}
});@{
ViewBag.Title = "Bill Evaluation";
}
<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>
<form name="BillEvaluation" method="post" ng-app="appCableCompany">
<fieldset ng-controller="BillsController as pay">
<legend>Cable TV Services</legend>
<div class="row">
<div class="col-md-6">
<div class="bold">Cable TV Package Type</div>
<table class="tbl-package">
<tr>
<td style="width: 175px"><label for="Basic">Basic</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Basic" value="Basic"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Standard">Standard</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Standard" value="Standard"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Performance">Performance</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Performance" value="Performance"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
</table>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" ng-model="pay.DVRService"
ng-change="pay.estimateCableBill()" />
</div>
<div>
<label for="SportsPackage">Sports Package:</label>
<input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
ng-change="pay.estimateCableBill()" />
</div>
</div>
<div class="col-md-6">
<div>
<span class="caption bold">Package Fee:</span>
<span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">Sub-Total:</span>
<span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">FCC Fee:</span>
<span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">Local Taxes:</span>
<span class="resulting-value">{{pay.localTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">State Taxes:</span>
<span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">Payment Amount:</span>
<span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
</div>
</div>
</div>
</fieldset>
</form>
Considering Two Alternatives to a Condition
An else if() condition is used to examine one outcome. If you want to consider more than one situation, add another else if() clause. The formula to follow is:
if( if-condition) { if-statement(s); } else if( else-if-condition_1) { else-if-statement(s)_1; } else if( else-if-condition_2) { else-if-statement(s)_2; }
In this case, each else if() includes its own condition and one or more statements. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>{{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var classification = "Top Secret";
if (classification === "Top Secret") {
this.conclusion = "A Top Secret document requires the highest level of security. Such a document can cause exceptional damage to a large number of administration employees and to the country as a whole.";
} else if (classification === "Secret") {
this.conclusion = "A classified document labeled Secret is for high level personnel. If exposed to public use, such a document can cause 'serious damage' to the nation.";
} else if (classification === "Confidential") {
this.conclusion = "A document is classified as Confidential if its publication may significant damage to national security.";
}
});
</script>
</body>
</html>
In this case, if you want to consider an alternative that fits neither the if() condition nor one of the other two else if() clauses, add a last else section.
Practical Learning: Considering Two Alternatives
var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
this.estimateCableBill = function () {
var packageFee = 0.00;
var dvr = this.DVRService;
var additionalBoxesFee = 0.00;
var sport = this.SportsPackage;
var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
var boxes = this.numberOfBoxes;
if (category == 'Standard') {
packageFee = 34.50;
}
else if (category == 'Performance') {
packageFee = 51.85;
}
else {
packageFee = 29.25;
}
if (boxes == 1) {
additionalBoxesFee = 15.27;
} else if (boxes == 2) {
additionalBoxesFee = 2 * 12.93;
} else if (boxes == 3) {
additionalBoxesFee = 3 * 10.46;
} else { // if (boxes >= 4)
additionalBoxesFee = boxes * 9.97;
}
var subTotal = packageFee + additionalBoxesFee + dvr + sport;
var fcc = subTotal * 0.00250881;
var local = (subTotal + fcc) * 0.0372668;
var state = (subTotal + fcc) * 0.0082493;
this.fccFee = fcc;
this.DVRService = dvr;
this.localTaxes = local;
this.stateTaxes = state;
this.subTotal = subTotal;
this.SportsPackage = sport;
this.CableTVPackageFee = packageFee;
this.paymentAmount = subTotal + fcc + local + state;
}
});@{
ViewBag.Title = "Bill Evaluation";
}
<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>
<form name="BillEvaluation" method="post" ng-app="appCableCompany">
<fieldset ng-controller="BillsController as pay">
<legend>Cable TV Services</legend>
<div class="row">
<div class="col-md-6">
<div class="bold">Cable TV Package Type</div>
<table class="tbl-package">
<tr>
<td style="width: 175px"><label for="Basic">Basic</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Basic" value="Basic"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Standard">Standard</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Standard" value="Standard"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Performance">Performance</label></td>
<td class="text-left">
<input type="radio" name="rdoPackageType" id="Performance" value="Performance"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
</table>
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" ng-model="pay.DVRService"
ng-change="pay.estimateCableBill()" />
</div>
<div>
<label for="SportsPackage">Sports Package:</label>
<input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
ng-change="pay.estimateCableBill()" />
</div>
<div>
<label for="nbrOfBoxes">Number of Boxes:</label>
<input type="number" id="nbrOfBoxes" ng-model="pay.numberOfBoxes"
ng-change="pay.estimateCableBill()" />
</div>
</div>
<div class="col-md-6">
<div>
</div>
<div>
<span class="caption bold">Package Fee:</span>
<span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">Sub-Total:</span>
<span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">FCC Fee:</span>
<span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">Local Taxes:</span>
<span class="resulting-value">{{pay.localTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">State Taxes:</span>
<span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">Payment Amount:</span>
<span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
</div>
</div>
</div>
</fieldset>
</form>
Considering Different Outcomes
You can create as many else if() clauses as you want, each with its own condition and its one or more statements. The formula to follow is:
if( if-condition) { if-statement(s); } else if( else-if-condition_1) { else-if-statement(s)_1; } else if( else-if-condition_2) { else-if-statement(s)_2; } . . . else if( else-if-condition_n) { else-if-statement(s)_n; }
Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>{{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var classification = "Confidential";
if (classification === "Top Secret") {
this.conclusion = "A Top Secret document requires the highest level of security. Such a document can cause exceptional damage to a large number of administration employees and to the country as a whole.";
} else if (classification === "Secret") {
this.conclusion = "A classified document labeled Secret is for high level personnel. If exposed to public use, such a document can cause 'serious damage' to the nation.";
} else if (classification === "Confidential") {
this.conclusion = "A document is classified as Confidential if its publication may significant damage to national security.";
} else if (classification === "Restricted") {
this.conclusion = "A document is Restricted if its publication may create unexpected situations or consequences.";
}
});
</script>
</body>
</html>
The if() clause and each else if() condition examine only one outcome each. In most cases, you may still have a situation that don't fit neither the if() nor any of the else if() conditions. In this case, you can add a last else clause that embraces all the other conditions. The formula to follow is:
if( if-condition) { if-statement(s); } else if( else-if-condition_1) { else-if-statement(s)_1; } else if( else-if-condition_2) { else-if-statement(s)_2; } else if( else-if-condition_n) { else-if-statement(s)_n; } else { else-statement(s)_n; }
The else clause must be created last. Here is an example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exercise</title>
</head>
<body>
<script src="Scripts/angular.js"></script>
<section ng-app="appExercise">
<div ng-controller="ExerciseController as ec">
<p>{{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var classification = "Clearance";
if (classification === "Top Secret") {
this.conclusion = "A Top Secret document requires the highest level of security. Such a document can cause exceptional damage to a large number of administration employees and to the country as a whole.";
} else if (classification === "Secret") {
this.conclusion = "A classified document labeled Secret is for high level personel. If exposed to public use, such a document can cause 'serious damage' to the nation.";
} else if (classification === "Confidential") {
this.conclusion = "A document is classified as Confidential if its publication may significant damage to national security.";
} else if (classification === "Restricted") {
this.conclusion = "A document is Restricted if its publication may create unexpected situations or consequences.";
} else {
this.conclusion = "A document that is not officially classified, also referred to as 'Unclassified', may be made availability for public use.";
}
});
</script>
</body>
</html>
Practical Learning: Considering Different Outcomes
var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
this.estimateCableBill = function () {
var accountFee = 0.00;
var packageFee = 0.00;
var additionalBoxesFee = 0.00;
var dvr = this.DVRService;
var sport = this.SportsPackage;
var category = this.packageType; // 10 Channels, Standard (140 Channels), Performance (220)
var boxes = this.numberOfBoxes;
var accountType = this.acntCategory;
if (category === 'Standard') {
packageFee = 34.50;
}
else if (category === 'Performance') {
packageFee = 51.85;
}
else {
packageFee = 29.25;
}
if (boxes === 1) {
additionalBoxesFee = 15.27;
} else if (boxes === 2) {
additionalBoxesFee = 2 * 12.93;
} else if (boxes === 3) {
additionalBoxesFee = 3 * 10.46;
} else { // if (boxes >= 4)
additionalBoxesFee = boxes * 9.97;
}
if (accountType === "smallBusiness") {
accountFee = 6.55 * boxes;
} else if (accountType === "hospital") {
accountFee = 2.55 * boxes;
} else if (accountType === "government") {
accountFee = 8.55 * boxes;
} else if (accountType === "hotel") {
accountFee = 12.86 * boxes;
} else { // if (accountType === "Home/Residential")
accountFee = 9.92 * boxes;
}
var subTotal = packageFee + accountFee + additionalBoxesFee + dvr + sport;
var fcc = subTotal * 0.00250881;
var local = (subTotal + fcc) * 0.0372668;
var state = (subTotal + fcc) * 0.0082493;
this.fccFee = fcc;
this.DVRService = dvr;
this.localTaxes = local;
this.stateTaxes = state;
this.subTotal = subTotal;
this.SportsPackage = sport;
this.boxesFee = additionalBoxesFee;
this.feeBasedOnAccount = accountFee;
this.CableTVPackageFee = packageFee;
this.paymentAmount = subTotal + fcc + local + state;
}
});@{
ViewBag.Title = "Bill Evaluation";
}
<h1 class="text-center main-title bold">Eastern Shore Company and Production Entertainment</h1>
<h2 class="text-center main-title bold">Bill Evaluation</h2>
<form name="BillEvaluation" method="post" ng-app="appCableCompany">
<fieldset ng-controller="BillsController as pay">
<legend>Cable TV Services</legend>
<div class="row">
<div class="col-md-6">
<div class="bold">Cable TV Package Type</div>
<table>
<tr>
<td style="width: 175px"><label for="Basic">Basic</label></td>
<td class="medium">
<input type="radio" name="rdoPackageType" id="Basic" value="Basic"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Standard">Standard</label></td>
<td>
<input type="radio" name="rdoPackageType" id="Standard" value="Standard"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="Performance">Performance</label></td>
<td>
<input type="radio" name="rdoPackageType" id="Performance" value="Performance"
ng-model="pay.packageType" ng-click="pay.estimateCableBill()" />
</td>
</tr>
</table>
</div>
<div class="col-md-6">
<div class="bold">Account Category</div>
<table>
<tr>
<td style="width: 180px"><label for="home">Home</label></td>
<td class="medium">
<input type="radio" name="rdoAccountCategory" id="home" value="home"
ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="hotel">Hotel</label></td>
<td>
<input type="radio" name="rdoAccountCategory" id="hotel" value="hotel"
ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="hospital">Hospital</label></td>
<td>
<input type="radio" name="rdoAccountCategory" id="hospital" value="hospital"
ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="government">Government</label></td>
<td>
<input type="radio" name="rdoAccountCategory" id="government" value="government"
ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
</td>
</tr>
<tr>
<td><label for="smallBusiness">Small Business</label></td>
<td>
<input type="radio" name="rdoAccountCategory" id="smallBusiness" value="smallBusiness"
ng-model="pay.acntCategory" ng-click="pay.estimateCableBill()" />
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div>
<label for="DVRService">DVR Service:</label>
<input type="number" id="DVRService" ng-model="pay.DVRService"
ng-change="pay.estimateCableBill()" />
</div>
</div>
<div class="col-md-6">
<div>
<label for="SportsPackage">Sports Package:</label>
<input type="number" id="SportsPackage" ng-model="pay.SportsPackage"
ng-change="pay.estimateCableBill()" />
</div>
</div>
</div>
<hr />
<h3>Additional TV Boxes</h3>
<div class="row">
<div class="col-md-6">
<div>
<label for="nbrOfBoxes">Number of Boxes:</label>
<input type="number" id="nbrOfBoxes" ng-model="pay.numberOfBoxes"
ng-change="pay.estimateCableBill()" />
</div>
<div>
</div>
</div>
<div class="col-md-6">
<div>
<span class="caption bold">Box(es) Fee:</span>
<span class="resulting-value">{{pay.boxesFee | number:2}}</span>
</div>
<div>
<span class="caption bold">Category Unit Fee:</span>
<span class="resulting-value">{{pay.feeBasedOnAccount | number:2}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div>
<span class="caption bold">Package Fee:</span>
<span class="resulting-value">{{pay.CableTVPackageFee.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">Sub-Total:</span>
<span class="resulting-value">{{pay.subTotal.toFixed(2)}}</span>
</div>
<div>
<span class="caption bold">FCC Fee:</span>
<span class="resulting-value">{{pay.fccFee.toFixed(2)}}</span>
</div>
</div>
<div class="col-md-6">
<div>
<span class="caption bold">Local Taxes:</span>
<span class="resulting-value">{{pay.localTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">State Taxes:</span>
<span class="resulting-value">{{pay.stateTaxes | number:2}}</span>
</div>
<div>
<span class="caption bold">Payment Amount:</span>
<span class="resulting-value">{{pay.paymentAmount | number:2}}</span>
</div>
</div>
</div>
</fieldset>
</form>
Conditional Conjunctions and Disjunctions
A Boolean Conjunction
A Boolean conjunction consists of combining two conditions that both must be true for the conjunction to be true. If one of both conditions is false, then the whole conjunction is false. To let you create such a situation, the C-based languages use the following operator: &&. The formula to follow is:
condition1 && condition2
Each condition is created as a Boolean expression that uses one of the Boolean operators we saw already.
A Boolean Disjunction
A Boolean disjunction consists of combining two conditions where only one of them has to be true for the whole disjunction to be true. The disjunction is false only if both conditions are false. To let you formulate a disjunction, the C-based languages use the || operator. The formula to follow is:
condition1 || condition2
Once again, each condition is created as a Boolean expression using a Boolean operator.
Practical Learning: Ending the Lesson
|
|
||
| Previous | Copyright © 2017-2022, FunctionX | Next |
|
|
||