Lesson 07: Introduction to Built-In Functions

Dealing with Numbers

Introduction

To assist you in performing the most routine operations, JavaScript provides many ready-made functions you can use directly in your code. There are som many of the functions that we can review only a few.

Converting a Value to an Integer

If you create a form in which a user must type a value, by default, the value the user types is a string, primarily a piece of text. If you want to consider that a number and must involve it in a numerucal expression, you must convert it. To assist you with this, if the value is an integer, JavaScript provides a function named parseInt. The syntax of this function is:

int parseInt(string, radix);

This function takes one required argument and one optional argument. The requirement argument is the value that must be converted:

If the value contains only digits, the functions produces it as an integer
If the value starts with one or more digits on the left side followed by non-digits, as in 2P48M83 or 256GH8424, the function returns those left digits as a number
If the value starts with a non digit (as in Z98394) or the value contains only non-digits, the function returns a constant known as NaN (which stands for Not-A-Number)

The second argument is valid only if the first one is, based on the above description. The second argument specifies the base by which the number will be converted. It is a number between 2 and 36. If you don't pass this argument, the number 10 would be used.

Converting a Value to a Floating-Point Number

To let you convert a value to a decimal number with a precision part, JavaScript provides a function namedparseFloat. Its syntax is:

decimal parseFloat(value);

This functakes one argument as the value to be conoverted:

If the value contains only digits, the functions produces it as an integer
If the value starts with one or more digits on the left side followed by a non-digit, the function returns those left digits as an integer
If the value starts with a letter or a symbol that is not a digit, the function returns NaN

Normally, a floating-point number is made of two sections separated by the character designated by as the desimal separater. If the argument is a number ;ike that, then the function will return it.

Practical Learning: Introducing Built-In Functions

Change the Index.cshtml document as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ESCAPE: Bill Evaluation</title>
<link rel="stylesheet" type="text/css" href="CableCompany.css" />
</head>
<body>
<div class="container">
    <h1 class="centered">ESCAPE</h1>
    <h2 class="centered">Eastern Shore Cable and Production Entertainment</h2>
    <h3 class="centered">Bill Evaluation</h3>
</div>

<div class="container">
    <form name="BillEvaluation" method="post">
        <fieldset>
            <legend>Cable TV Services</legend>
            <div>
                <label for="CableTVBasicFee">Cable TV Basic Fee:</label>
                <input type="number" id="CableTVBasicFee" name="CableTVBasicFee" value="0.00" />
            </div>
            <div>
                <label for="DVRService">DVR Service:</label>
                <input type="number" id="DVRService" name="DVRService" value="0.00" />
            </div>
            <div>
                <label for="SportPackage">Sport Package:</label>
                <input type="number" id="SportPackage" name="SportPackage" value="0.00" />
            </div>
            <div>
                <div>
                    <input type="button" name="btnEvaluate" value="Evaluate" onclick="evaluatePayment()" />
                </div>
            </div>
            <div>
                <label for="PaymentAmount">Payment Amount:</label>
                <input type="number" id="PaymentAmount" name="PaymentAmount" value="0.00" />
            </div>
        </fieldset>
    </form>
</div>

<script>
    function evaluatePayment() {
        'use strict';
        var basicFee = parseFloat(document.BillEvaluation.CableTVBasicFee.value);
        var dvr = parseFloat(document.BillEvaluation.DVRService.value);
        var sport = parseFloat(document.BillEvaluation.SportsPackage.value);

        var amount = basicFee + dvr + sport;
        document.BillEvaluation.PaymentAmount.value = amount;
    }
</script>
</body>
</html>

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

Change the values in the text boxes as follows:

Cabel TV Basic Fee: 24.90
DVR Service: 10.20
Sports Package: 9.95

Click the Evaluate button::
Close the browser and return to your programming environment
Close Microsoft Visual Studio


Previous	Copyright © 2018-2019, FunctionX	Next