We’re going to reuse the same concepts from the previous chapter to create a new program. But instead of working with string inputs, we’ll be working with numeric inputs.

The program we’re creating will ask the user for two numbers, and it will compute the sum. This sounds simpler than the previous program, but we need some additional work for numeric inputs.

## String vs Number

We’ve seen a few data types so far, but string is a *special* one. All input values are originally string values, and all output values will get automatically converted to string.

On one hand, it’s convenient that a number output will get automatically converted to a string. But on the other hand, we have to do additional work for input values that are meant to be numbers.

When the user submits a number in the popup box, `prompt`

will return a string value that contains a number. A string value that contains a number is not the same as a number value.

For instance, we won’t be able to use the string value in mathematical operations such as adding two numbers together.

You can still add two strings together, but the computer will process it as a string concatenation instead of an addition.

So if we want to perform any numeric operations with the input values, we first have to first convert them to numbers.

## The Code

Make a new copy of the *hello* folder, and rename it to *chapter-2*:

Ask the user for two numbers using two `prompt`

statements:

```
var input1 = prompt("Please enter a number:");
var input2 = prompt("Please enter another number:");
```

unpack:

Numbers are allowed in a variable name but just not as the first character of the name.

An then we use `parseInt`

to convert them to numbers.

```
var input1 = prompt("Please enter a number:");
var input2 = prompt("Please enter another number:");
input1 = parseInt(input1);
input2 = parseInt(input2);
```

unpack:

parsemeans to change data format.Intis short forinteger.

We’re reusing the same variables for the converted values. This is called

reassignment.

The parameter for `parseInt`

is a string value, and the return value is going to be a number:

Since now we have two number values, we can add them together.

```
...
var sum = input1 + input2;
```

unpack:

The addition operation will return a value, so we have to store it using a new variable.

↓ Basic numeric operations in programming are similar to real-life mathematics. The only noticeable difference is that an asterisk is used for multiplication.

operation | syntax |
---|---|

addition | `input1 + input2` |

subtraction | `input1 - input2` |

multiplication | `input1 * input2` |

division | `input1 / input2` |

And finally, we can output the sum. ↓

```
...
var outputMessage = "The sum is " + sum + ".";
alert(outputMessage);
```

We’re concatenating three values: a string, a number and another string with a period.

## two in one

*Optionally*, we can combine `parseInt`

and `prompt`

in one line.

### Before:

```
var input1 = prompt("Please enter a number:");
var input2 = prompt("Please enter another number:");
input1 = parseInt(input1);
input2 = parseInt(input2);
...
```

### After:

```
var input1 = parseInt( prompt("Please enter a number:"));
var input2 = parseInt( prompt("Please enter another number:"));
...
```

We’re passing the `prompt`

expression directly to the `parseInt`

function as the parameter. Using two functions together this way is called *function composition*.

## using array

We can use one *array* to store the two input values. ↓

```
// create an array
var inputItems = [];
// insert values into the array
inputItems[0] = parseInt( prompt("Please enter a number:"));
inputItems[1] = parseInt( prompt("Please enter another number:"));
var sum = inputItems[0] + inputItems[1];
...
```

Although we’ve used array previously, this is the first time we create an empty array from scratch with a pair of square brackets.

The square brackets can be used in many situations. It can be used for creating an array, assigning values to an array, and getting values from an array.

Since an array can store multiple values, an index number is for identifying each item in the array. An *index* is the position of an item in the array. The index of the first item is 0, and the index of the second item is 1, and so on.

## Single Input

It would be more intuitive if we ask the user to submit two numbers all at once.

↓ We will use a single `prompt`

statement to get an input string that contains two numbers, and then use `split`

to break it into an array of two values.

↓ Finally, convert each value to a number, and put them back in the array.

```
var userInput = prompt("Please enter two numbers:");
var inputItems = userInput.split(" ");
inputItems[0] = parseInt(inputItems[0]);
inputItems[1] = parseInt(inputItems[1]);
...
```

## recap

```
var userInput = prompt("Please enter two numbers:");
var inputItems = userInput.split(" ");
inputItems[0] = parseInt(inputItems[0]);
inputItems[1] = parseInt(inputItems[1]);
var sum = inputItems[0] + inputItems[1];
var outputMessage = "The sum is " + sum + ".";
alert(outputMessage);
```

- We use one prompt statement to get two numbers as the input.
`split`

the input into an array.- Convert each input value into a number.
- And reassign those numbers back to the array using the brackets and the index numbers.
- Compute the sum.
- Concatenate an output message.
- And finally, output the message.

## Exercise

Make a new copy of the *chapter-2* folder, and rename it to *chapter-2-ex*:

Use this new folder for the exercise so you can always start over if you need to.

Try to modify the code to make it accept three numbers instead of two.

And include the input numbers in the output message, so that the user can see the input numbers and the sum all in one place.

## Solution

```
var userInput = prompt("Please enter three numbers:");
var inputItems = userInput.split(" ");
inputItems[0] = parseInt(inputItems[0]);
inputItems[1] = parseInt(inputItems[1]);
inputItems[2] = parseInt(inputItems[2]);
var sum = inputItems[0] + inputItems[1] + inputItems[2];
var outputMessage = "The sum of " + inputItems[0] + ", " + inputItems[1] + ", and " + inputItems[2] + " is " + sum + ".";
alert(outputMessage);
```