Basics of JavaScript: Part 4

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
//to create a variable we use var keyword    
var firstValue = 'Welcome to ';    
var secondValue = 'JavaScript Tutorial';    
    
//to concatenate a variable we use +    
alert(firstValue+secondValue);    
</script>    
    </body>    
</html>   

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var myFirstValue = 'My age is ';    
            var mySeondValue = 33;    
            alert(myFirstValue+mySeondValue);    
        </script>    
    </body>    
</html>   

<script type="text/javascript">    
   var myFirstValue = '22';    
   var mySeondValue = 33;    
   alert(myFirstValue+mySeondValue);    
</script> 

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var fNum = 3;    
            var sNum = 2;    
            alert(fNum+sNum);    
        </script>    
    </body>    
</html> 

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var fNum = 3;    
            var sNum = 2;    
            alert(fNum-sNum);    
        </script>    
    </body>    
</html>   

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var firstValue = 'Hello';    
            var seconValue = 10;    
            alert(firstValue - seconValue);    
        </script>    
    </body>    
</html>   

This NaN states Not a Number. We will explain this NaN in just a bit.

For now, let's look at another example.

Example 2

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <script type="text/javascript">    
            var firstValue = '12';    
            var seconValue = 10;    
            alert(firstValue - seconValue);    
        </script>    
    </body>    
</html>   

Here we have the same HTML document. The only change we made here is the firstValue value. This time we initialized a numeric string value.

Open the file in a browser.

Look at the output we got. This time the firstValue is converted into an integer, and the "-" operator subtracts the firstValue from the secondValue, which gives us the value 2.

Note

The integer value is converted into a string whenever we use "+" to add/concat string or a numeric string to an integer. In contrast, when we use the "–" operator to subtract a string value from an integer value, the result will be NaN because the value we pass could not be converted into an integer. But when we subtract a numeric string value from an integer, the numeric string value is converted into an integer, and we get the result.

Methods to convert a string into a number

We first need to create a UI to pass two numbers and get their sum.

<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <form>    
            <table>    
                <tr>    
                    <td>    
                        <label>First Number </label>    
                    </td>    
                    <td>    
                        <input type ="text" id ="txtOne"/>    
                    </td>    
                <tr/>    
                <tr>    
                    <td>    
                        <label>Second Number </label>    
                    </td>    
                    <td>    
                        <input type ="text" id ="txtTwo"/>    
                    </td>    
                <tr/>    
                <tr>    
                    <td>    
                        <label>Sum </label>    
                    </td>    
                    <td>    
                        <input type ="text" id ="txtSum"/>    
                    </td>    
                <tr/>    
                <tr>    
                    <td colpsan="2">    
                        <input type="button" value="Sum"/>    
                    </td>    
                </tr>    
            </table>    
        </form>    
        <script type="text/javascript" src="script/script.js"></script>    
    </body>    
</html>   

Open the file in a browser.

Now the next thing we need to do is create an external JavaScript file named "script.js".

In the JavaScript file, we must retrieve the user input from the TextBox control and pass the result to the third TextBox control. For that, we can use the getElementById method of the document object, and from that, we can retrieve and assign the TextBox value.

function add()    
{    
   var fnum = document.getElementById('txtOne').value;    
   var Snum = document.getElementById('txtTwo').value;    
   document.getElementById('txtSum').value = fnum + Snum;    
}   

Pass the preceding JavaScript function to the button's onClick event.

<input type="button" value="Sum" onclick="add()"/>   

Open the file in a browser.

Pass the first and second numbers.

Click the Sum button.

Look at our output; rather than adding these two numbers, the "+" operator concatenates the numbers.

Reason

The input type of our TextBox is text, and the value property returns the number in a string format. So, to add the numbers, we need first to convert those numbers from a string to an integer.

We can use the ParseInt(value) function or Parsefloat(retain decimal) to convert a string to an integer.

function add()    
{    
   var fnum = parseInt(document.getElementById('txtOne').value);    
   var Snum = parseInt(document.getElementById('txtTwo').value);    
   document.getElementById('txtSum').value = fnum + Snum;    
}   

Now add the numbers.

What will happen if we pass a text instead of a number?

We got the sum value as NaN because the parseInt function could not parse "ww" into an integer.

To check whether the text's specified value is a number, we can use the isNaN function.

function add()     
{    
    var fnum = parseInt(document.getElementById('txtOne').value);    
    var Snum = parseInt(document.getElementById('txtTwo').value);    
    
    //if the number isNaN, it will return true else false    
    if (!isNaN(fnum) && !isNaN(Snum))     
    {    
        document.getElementById('txtSum').value = fnum + Snum;    
        //here we are checking if the value not isNaN then we are adding the numbers    
    }    
    else     
    {    
        //else we are displaying an alert message    
        alert('Enter a valid number');    
    }    
}   

Add the numbers

Summary

The next article of this series Basics of JavaScript- Part 5 (String Functions) explains the string function. Until then, keep learning.

I hope you like it.

Thank you.