Numeric Values

Introduction

TypeScript supports numbers in a data type named number (all lowercase). You control the number by the way you initialize the variable.

Practical Learning: Introducing Numbers

1. Start Microsoft Visual Studio
2. On the main menu, click File -> New -> Project...
3. In the middle frame of the New Project dialog box, make sure ASP.NET Web Application (.NET Framework) is selected.
   Change the Name to PayrollPreparation1
4. Click OK
5. In the ASP.NET Web Application dialog box, make sure the MVC icon is selected.
   Click OK
6. In the Solution Explorer, right-click Content -> Add -> New Item...
7. In the left list of the Add New Item dialog box, under Visual C#, expand Web, and click Markup
8. In the middle list, click Style Sheet
9. Change the file Name to PayrollPreparation
10. Click Add
11. 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; }

12. In the Solution Explorer, expand App_Start and click BundleConfig.cs
13. Change the document as follows:

    using System.Web.Optimization;
    
    namespace PayrollPreparation1
    {
        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"));
            }
        }
    }

14. In the Solution Explorer, expand Controllers, and click HomeController.cs
15. In the class, create a method named PayrollEvaluation as follows:

    using System.Web.Mvc;
    
    namespace PayrollPreparation1.Controllers
    {
        public class HomeController : Controller
        {
            . . .
    
            public ActionResult PayrollEvaluation() => View();
        }
    }

16. In the class, right-click PayrollEvaluation() -> Add View...
17. Make sure the View Name text box is displaying PayrollEvaluation.
    Click Add
18. 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">
        <table>
            <tr>
                <td class="large-text bold">Hourly Salary:</td>
                <td><span class="form-control small" id="hourlySalary"></span></td>
            </tr>
        </table>
    
        <table class="table table-striped">
            <tr>
                <td class="large-text bold">&nbsp;</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><span class="form-control small" id="monday"></span></td>
                <td><span class="form-control small" id="tuesday"></span></td>
                <td><span class="form-control small" id="wednesday"></span></td>
                <td><span class="form-control small" id="thursday"></span></td>
                <td><span class="form-control small" id="friday"></span></td>
            </tr>
            <tr>
                <td class="bold">Daily Salary:</td>
                <td><span id="salaryMonday"></span></td>
                <td><span id="salaryTuesday"></span></td>
                <td><span id="salaryWednesday"></span></td>
                <td><span id="salaryThursday"></span></td>
                <td><span id="salaryFriday"></span></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td class="bold">Weekly Salary:</td>
                <td><span id="weeklySalary"></span></td>
            </tr>
        </table>
    </div>

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

Natural Numbers

To uee the variable as a natural number, assign a value made of digits only. You can also initialize the variable with an octal number. In this case, the value must start with 0o. You can also initialize the variable with a hexadecimal number. In this case, the value must start with 0x. You can also initialize the variable with a binary number. In this case, the value must start with 0b.

Floating-Point Numbers

Remember that TypeScript supports numbers under a common data type known as number (all lowercase). If you want the variable to be treated as a floating-point number, provide its value with digits separated by the decimal separator, which is US English is the period.

Practical Learning: Using Numders

1. In the empty TimeSheetEvaluation.ts document, type the following code:

   let hSalary: number = 26.74;
   let mon: number = 8.50;
   let tue: number = 10.50;
   let wed: number = 8.00;
   let thu: number = 9.50;
   let fri: number = 10.00;

Operations on Numbers

Introduction

TypeScript supports all arithmetic operations. The addition between two numbers is performed with +. The subtraction is performed with -, the multiplication with *, the division with with /, and the remainder with %.

Practical Learning: Performing Operations on Numbers

• Change the TimeSheetEvaluation.ts document as follows:

  let hSalary: number = 26.74;
  let mon: number = 8.50;
  let tue: number = 10.50;
  let wed: number = 8.00;
  let thu: number = 9.50;
  let fri: number = 10.00;
  
  let timeWorked: number = mon + tue + wed + thu + fri;
  let weeklySalary: number = timeWorked * hSalary;

Converting a Number to String

The JavaScript language provides the ability to convert a value of one type to another. The operation can also be used in TypeScript. For example, the formula to convert a number-based variable to a string is:

variable-name.toString()

Practical Learning: Converting a Number to String

1. Change the TimeSheetEvaluation.ts document as follows:

   let hSalary: number = 26.74;
   let mon: number = 8.50;
   let tue: number = 10.50;
   let wed: number = 8.00;
   let thu: number = 9.50;
   let fri: number = 10.00;
   
   let timeWorked: number = mon + tue + wed + thu + fri;
   let weeklySalary: number = timeWorked * hSalary;
   
   document.querySelector("#hourlySalary").innerHTML = hSalary.toString();
   document.querySelector("#monday").innerHTML = mon.toString();
   document.querySelector("#tuesday").innerHTML = tue.toString();
   document.querySelector("#wednesday").innerHTML = wed.toString();
   document.querySelector("#thursday").innerHTML = thu.toString();
   document.querySelector("#friday").innerHTML = fri.toString();

2. Click the PayrollEvaluation.cshtml tab and change the document as follows:

   @{
       ViewBag.Title = "Payroll Evaluation";
   }
   
   <h2 class="common-font text-center bold">Payrol lEvaluation</h2>
   
   <hr />
   
   <div class="delimiter common-font">
       <table>
           <tr>
               <td class="large-text bold">Hourly Salary:</td>
               <td><span class="form-control small" id="hourlySalary"></span></td>
           </tr>
       </table>
   
       <table class="table table-striped">
           <tr>
               <td class="large-text bold">&nbsp;</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><span class="form-control small" id="monday"></span></td>
               <td><span class="form-control small" id="tuesday"></span></td>
               <td><span class="form-control small" id="wednesday"></span></td>
               <td><span class="form-control small" id="thursday"></span></td>
               <td><span class="form-control small" id="friday"></span></td>
           </tr>
           <tr>
               <td class="bold">Daily Salary:</td>
               <td><span id="salaryMonday"></span></td>
               <td><span id="salaryTuesday"></span></td>
               <td><span id="salaryWednesday"></span></td>
               <td><span id="salaryThursday"></span></td>
               <td><span id="salaryFriday"></span></td>
           </tr>
           <tr>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td>&nbsp;</td>
               <td class="bold">Weekly Salary:</td>
               <td><span id="weeklySalary"></span></td>
           </tr>
       </table>
   </div>
   
   <script src="~/Scripts/TimeSheetEvaluation.js"></script>

3. In the Solution Explorer, expand Views, expand Shared, and click _Layout.cshtml
4. To execute, on the main menu, click Debug -> Start Without Debugging

   

5. Close the browser and return to your programming environment

A Fixed Value

The JavaScript language supports various types of numbers. Its techniques can be applied to TypeScript. The formula to convert a number-based variable to a 2-decimal value is:

variable-name.toFixed(2);

Practical Learning: Converting a Value to a Fixed Number

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

   let hSalary: number = 26.74;
   let mon: number = 8.50;
   let tue: number = 10.50;
   let wed: number = 8.00;
   let thu: number = 9.50;
   let fri: number = 10.00;
   
   let timeWorked: number = mon + tue + wed + thu + fri;
   let weeklySalary: number = timeWorked * hSalary;
   
   document.querySelector("#hourlySalary").innerHTML = hSalary.toFixed(2);
   document.querySelector("#monday").innerHTML = mon.toFixed(2);
   document.querySelector("#tuesday").innerHTML = tue.toFixed(2);
   document.querySelector("#wednesday").innerHTML = wed.toFixed(2);
   document.querySelector("#thursday").innerHTML = thu.toFixed(2);
   document.querySelector("#friday").innerHTML = fri.toFixed(2);
   
   document.querySelector("#salaryMonday").innerHTML = (mon * hSalary).toFixed(2);
   document.querySelector("#salaryTuesday").innerHTML = (tue * hSalary).toFixed(2);
   document.querySelector("#salaryWednesday").innerHTML = (wed * hSalary).toFixed(2);
   document.querySelector("#salaryThursday").innerHTML = (thu * hSalary).toFixed(2);
   document.querySelector("#salaryFriday").innerHTML = (fri * hSalary).toFixed(2);
   
   document.querySelector("#weeklySalary").innerHTML = weeklySalary.toFixed(2);

2. Click the PayrollEvaluation.cshtml tab to activate the document
3. To execute, on the main menu, click Debug -> Start Without Debugging

   

4. Close the browser and return to your programming environment

A Constant Number

In your code, if you are using a value that will not change, you can declare its variable as a constant. The formula to follow is:

const variable-name : number = value;

The number data type is optional.

Practical Learning: Using Constants

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

   const hSalary: number = 22.86;
   const mon: number = 6.00;
   const tue: number = 9.50;
   const wed: number = 10.00;
   const thu: number = 7.50;
   const fri: number = 8.00;
   
   const timeWorked: number = mon + tue + wed + thu + fri;
   const weeklySalary: number = timeWorked * hSalary;
   
   document.querySelector("#hourlySalary").innerHTML = hSalary.toFixed(2);
   document.querySelector("#monday").innerHTML = mon.toFixed(2);
   document.querySelector("#tuesday").innerHTML = tue.toFixed(2);
   document.querySelector("#wednesday").innerHTML = wed.toFixed(2);
   document.querySelector("#thursday").innerHTML = thu.toFixed(2);
   document.querySelector("#friday").innerHTML = fri.toFixed(2);
   
   document.querySelector("#salaryMonday").innerHTML = (mon * hSalary).toFixed(2);
   document.querySelector("#salaryTuesday").innerHTML = (tue * hSalary).toFixed(2);
   document.querySelector("#salaryWednesday").innerHTML = (wed * hSalary).toFixed(2);
   document.querySelector("#salaryThursday").innerHTML = (thu * hSalary).toFixed(2);
   document.querySelector("#salaryFriday").innerHTML = (fri * hSalary).toFixed(2);
   
   document.querySelector("#weeklySalary").innerHTML = weeklySalary.toFixed(2);

2. Click the PayrollEvaluation.cshtml tab to activate it
3. To execute, on the main menu, click Debug -> Start Without Debugging

   

4. Close the browser and return to your programming environment
5. Close your programming environment

Previous	Copyright © 2001-2019, FunctionX	Next