video coming soon

Text Version |

We’re going to reuse the concepts introduced in the previous chapter to create a new program. This rehash will reinforce what you’ve learned so far, at the same time, mix and match with new concepts.

This program will ask the user to enter two numbers, and it will compute the sum of the two numbers. 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 enters 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 on an input value, we have to first convert it to a number.

## 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 are a multipurpose tool. 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 used for referring to each slot in the array. An *index number* is the position of a slot in the array; The index of the first slot is 0, not 1.

## Single Input

It would be more intuitive if we ask the user to enter 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 store them back to 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.
`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 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);
```