Basics of JavaScript

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

The topics we 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
Different methods to convert string to number

How to concatenate two string value

To concatenate a string, we use “+” operator.

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

** JavaScript Alert **

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 above html, we have two variables, one contains a value of type string and other contains a value to type integer.

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

** age 33 **

Example 2

In this example we will prove if an integer value is converted into a string 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 gets concatenated.

** 2233 **

How to add two numbers

To add a number we use “+” operator.

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

** 5 **

How to subtract two numbers

To subtract two numbers we use “-” operator.

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

** 1 **

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 gets 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 gets converted to string, How will the number and string will be concatenated as we know to concatenate two variables or values we have to use “+” operator but here we are using “–“ 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 above html, we have two variables. One holds a value of type string and other holds a value of type integer.

In the alert function we are subtracting firstValue by secondValue.

Open file in browser.

** NaN **

We got the output as NaN.

This NaN states Not a Number. We will discuss about 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 file in browser.

** 2 **

Look at the output we got. This time the firstValue is converted into an integer and “-” operator subtract the firstValue by secondValue which gives us a value 2.

NOTE

Whenever we use “+” to add/concat string or a numeric string to an integer, the integer value gets converted into a string whereas when we use “–“ 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 get converted into an integer. But when we subtract a numeric string value with an integer, the numeric string value gets converted into an integer and we get the result.

Methods to convert string into a number

The first thing we need to do is 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 file in browser.

** sum **

Now the next thing we need to do is create an External JavaScript file with a 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 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 above JavaScript function to the button’s onClick event.

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

Open file in browser.

Pass the first and second number

** pass numbers **

Click the sum button.

** click sum **

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 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 string to an integer.

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

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.

** add number **

Now what will happen if we pass a text instead of a number?

** text passed **

We got the sum value as NaN because the parseInt function was unable to parse “ww” into an integer.

To check whether the specified value in the text is a number or not. We can use 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

** valid **

** valid1 **

In the next article of this series we will learn about string function. Until then keep learning.

I hope you like it.

Thank you