Introduction to Boolean Values
Introduction to Boolean Values
Introduction to Operations
If a Condition Exists
A comparison is an operation that examines the relationship between two values (or two objects). As is the case for all C-based languages, the primary operator to use is named if. The primary formula to use it is:
if( expression ) { statement; }
In the parentheses of if(), create an expression-based comparison. Inside the curly brackets, create one or more statements that will execute.
Boolean Operators
A Boolean operator is an operator used to compare two values. JavaScript primarily supports the operators of the C language, some of them with slight modifications.
Practical Learning: Introducing Conditional Statements
body {
background-color: white;
}
form { padding: 1em;
margin: auto;
width: 550px;
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; }
.bold { font-weight: 600; }
.main-title { font-family: 'Times New Roman', Garamond, Georgia, serif;
color: maroon; }
.caption { width: 11.45em;
display: table-cell; }
.resulting-value { width: 6em;
background-color: white;
display: table-cell;
border: 1px solid maroon; }
var appCableCompany = angular.module('appCableCompany', []);
appCableCompany.controller("BillsController", function () {
this.estimateCableBill = function () {
var packageFee = 26.58;
var dvr = this.DVRService;
var sport = this.SportsPackage;
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;
}
});using System.Web;
using System.Web.Optimization;
namespace CableCompany4
{
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",
"~/Scripts/angular.js",
"~/Scripts/BillPreparation.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/CableCompany.css"));
}
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ESCAPE - Bill Evaluation :: @ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@Html.ActionLink("ESCAPE", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>@Html.ActionLink("Bill Evaluation", "BillEvaluation", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p class="text-center">© @DateTime.Now.Year - ESCAPE (Eastern Shore Company and Production Entertainment)</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>using System.Web.Mvc;
namespace CableCompany4.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 BillEvaluation() => View();
}
}@{
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-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-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-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>
Performing Comparisons
A Comparison for Equality
To find out if two values are the same, create an expression that separates them with the === operator.. You can compare a variable to a value to find out whether the variable holds the value to which it is being compared. You can perform the comparison on numeric values. 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 employeeId = 24;
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.";
}
});
</script>
</body>
</html>
In the same way, you can perform a comparison on strings. 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";
if (status === "Full Time") {
this.conclusion = "Full Benefits";
}
});
</script>
</body>
</html>
JavaScript also accepts the == operator used by the other C-based languages.
A Comparison for Inequality
To find out if two values are not equality, use the !== operator in an 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 = "Part Time";
if (status !== "Full Time") {
this.conclusion = "Basic Benefits";
}
});
</script>
</body>
</html>
You can also use the != operator of the other C-based languages.
A Comparison for Lower Value
To find out if one value is lower than another value, include them in an expression and separate them with the < operator. The comparison is primarily performed on numbers. 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>Classroom Summary: {{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var capacity = 35;
if (capacity < 55) {
this.conclusion = "55 students had registered for the course but Room 102 classroom can accomodate only fewer people.";
}
});
</script>
</body>
</html>
The < operation can also be performed on strings. 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>Countries Statistics: {{ec.conclusion}}</p>
</div>
</section>
<script type="text/javascript">
var appExercise = angular.module("appExercise", []);
appExercise.controller("ExerciseController", function () {
var pais = "Zambia";
var country = "Zimbabwe";
if (pais < country) {
this.conclusion = "Zimbabwe comes before Zambia";
}
});
</script>
</body>
</html>
When the comparison is made on strings, the interpreter will check the rules of the language of the computer used by your visitor. The interpreter will compare the characters of each string by the positions of the characters.
The Comparison for a Lower or Equal Value
To combine the comparions for equality and lower values, use the <= operator. 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 yearlySalary = 40000;
if (yearlySalary <= 50000) {
this.conclusion = "The employment candidate will not accept a salary lower than $50,000 a year.";
}
});
</script>
</body>
</html>
The Comparison for Greater Value
To find out if one value is greater than another, use the > operator.
The Comparison for Greater or Equal Value
To find out if one value is greater than or equal to another, use the >= operator.
Practical Learning: Ending the Lesson
|
|
||
| Previous | Copyright © 2017-2022, FunctionX | Next |
|
|
||