Rehash

Begin Programming with JavaScript Rehash

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.

full

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.

full

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.

full

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:

hello
chapter-2

full

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:

parse means to change data format. Int is short for integer.

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:

full

full

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

full

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.

image

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.

full

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.

full

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.

image

Single Input

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

image

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

full

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

full

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);
  1. We use one prompt statement to get two numbers as the input.
  2. split the input into an array.
  3. Convert each input value into a number.
  4. And reassign those numbers back to the array using the brackets and the index numbers.
  5. Compute the sum.
  6. Concatenate an output message.
  7. And finally, output the message.

Exercise

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

chapter-2
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);