Basics of JavaScript: Part 4

Harpreet Singh
9y
6.4k
0
0

100

Article

4BasicsOfjs.zip

This is Part 4 of the Basics of JavaScript tutorial. In this part we will learn how to work with strings and numbers.

The following are the topics we have already discussed:

This article discusses the following topics:

How to concatenate two string values
How to concatenate string and a number
How to add two numbers
How to subtract two numbers
What happens when we subtract a string with a number
Various methods to convert string to number

How to concatenate two string values

To concatenate a string, we use the “+” operator as in the following:

<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>

How to concatenate string and number

Example 1

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

In the preceding HTML, we have two variables, one contains a value of type string and the other contains a value of type integer.

When we concatenate a string value and a number, the number is converted into a string.

Example 2

In this example we will prove if an integer value is converted into a string and when we concatenate a number with a string.

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

So, even after passing a string of numeric value, both the values are concatenated.

How to add two numbers

To add a number we use the “+” operator as in the following:

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

How to subtract two numbers

To subtract two numbers we use the “-” operator as in the following:

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

Now you might be wondering, OK to add two numbers, the value must be numeric and if we try to add a string value and a number, the number is converted into a string. But what if we try to subtract a string value from an integer or an integer value from a string? Still the number will be converted into a string and if the number is converted to a string, how will the number and string be concatenated? We know that to concatenate two variables or values we need to use the “+” operator but here we are using the “–“ operator.

So, let's look at an example.

What happens when we subtract a string by a number

Example 1

In the first example we will see what happens if we try to subtract a text from a number.

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

In the preceding HTML, we have two variables. One holds a value of type string and the other holds a value of type integer.

In the alert function we are subtracting firstValue by secondValue.

Open the file in a browser.

We got the output as NaN.

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 subtracted the firstValue by the secondValue and that gives us the value 2.

NOTE

Whenever we use “+” to add/concat string or a numeric string to an integer, the integer value is converted into a string whereas when we use the “–“ operator to subtract a string value from an integer value the result will be NaN because the string value that we pass was unable to be converted into an integer. But when we subtract a numeric string value with an integer, the numeric string value is converted into an integer and we get the result.

Methods to convert string into a number

The first thing we need to do is to create a UI where we can pass two numbers and get the sum of it.

<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 with the name “script.js”.

In the JavaScript file we need to retrieve the user input from both the TextBox control, pass the result to the third TextBox control and 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 the output we got, rather than adding these two numbers the “+” operator is concatenating the numbers.

Reason:

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

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