Introduction
This is Part 4 of the Basics of JavaScript tutorial. This part will teach us how to work with strings and numbers.
The following are the topics we have already discussed,
- Basics of javascript- Part 1
- Basics of javascript- Part 2
- Basics of javascript- Part 3
This article discusses the following topics,
- How to concatenate two string values?
- How to concatenate a string and a number?
- How to add two numbers?
- How do you subtract two numbers?
- What happens when we subtract a string from 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>
![Basics of JavaScript: Part 4]()
How to concatenate strings and numbers?
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.
![Basics of JavaScript: Part 4]()
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 values, both values are concatenated.
![Basics of JavaScript: Part 4]()
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>
![Basics of JavaScript: Part 4]()
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>
![Basics of JavaScript: Part 4]()
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 need to use the "+" operator to concatenate two variables or values, but here we use the "–" operator.
So, let's look at an example.
What happens when we subtract a string from 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 subtract firstValue by secondValue.
Open the file in a browser.
![Basics of JavaScript: Part 4]()
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.
![Basics of JavaScript: Part 4]()
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.
![Basics of JavaScript: Part 4]()
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.
![Basics of JavaScript: Part 4]()
Click the Sum button.
![Basics of JavaScript: Part 4]()
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.
![Basics of JavaScript: Part 4]()
What will happen if we pass a text instead of a number?
![Basics of JavaScript: Part 4]()
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
![Basics of JavaScript: Part 4]()
![Basics of JavaScript: Part 4]()
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.