Rehash

Begin Programming with JavaScript Rehash

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.

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

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

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 are a multipurpose tool. 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 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.

image

Single Input

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