Output, Strings, Numbers, Variables, Input

7.0. Overview

To be able to work, computers need to be able to keep track of two basic types of data: strings and numbers. Let's learn how you can program a computer to do that.

7.1. String values and Numeric values

7.2. Outputting a string or number

If you want to print out a value in JavaScript there are a few ways you can do that. In the past, we've used console.log("Hello, world!"); to print out a message into the console.

We're going to be writing into the HTML page now as we start to work on programming in JavaScript, so for this we'll used the document.write() command. Put the value you want to display in the parentheses there, and we'll see it appear in the web browser when the script is executed.

<script>
    document.write('Richard');
    document.write("37");
    document.write(37);
    document.write(37.1);
</script>

In this small script we see that we're printing out two different types of values: two strings (the first two values), and two numbers (an integer and a float).

Note that we can put a string of characters in single quotes (') or double quotes ("). Either way works.

7.2.1. Using the + with numbers and strings

You can use symbols to perform math calculations: +, -, *, and / for addition, subtraction, multiplication, and division. These will be useful to us.

document.write(37 + 1);
// Displays the result --> 38

The symbol for addition, +, is also used to concatenate strings, that is, to assemble a series of strings into one long string. If you have a script with the instruction

document.write("Hello" + ", " + "world" + "!");
                -----     --     -----     -
  String #        1       2        3       4
// Concatenates the four strings and displays them as:
// Hello, world!

If we want a series of values to be printed on separate lines in an HTML document, you need to be sure to print a "<br />" concatenated to each one. This will cause a line-break to be printed, and the next value displayed will go on a new line.

<script>
    document.write('Richard' + '<br />');
    document.write("37" + '<br />');
    document.write(37 + '<br />');
    document.write(37.1 + '<br />');
</script>

7.3. Variables

If JavaScript sees an instruction like this, what will it print out?

document.write("Hello " + "name" + "!");

It prints out Hello name! It prints this message because we have quotes around each word and punctuation mark.

document.write("Hello " + name + "!");

let name = "Jason";

let name = "Jason";
document.write("Hello, " + name + "!");
// Produces the output --> Hello, Jason!

7.3.1. Variables are references

A variable can be considered as a "reference" that points to some value in the computer's memory. If we use the variable in our program, the value is actually used.

let myShoes = "Van's";
let myShoeSize = 12;
document.write("My outfit today:" + "<br />");
document.write("I'm wearing " + myShoes + ", size " + myShoeSize);

7.3.2. Modifying variables

Variables store values in them, and if I want to store a different value for myShoes, I can just replace the old value that was there:

let myShoes = "Van's";
.
.
.
myShoes = "Skechers";
document.write(myShoes);
// Displays the current value of myShoes --> Skechers

Notice that you don't use the word let when we've already used the variable once.

There is a very important strategy that we'll be using to modify numeric variables. If you want to modify a number—if myAge = 18, for example, and we want to add one year to that because I'm celebrating my birthday—you can create a math expression on the right side of an instruction to calculate a new value, and then store that new value in the variable on the left side.

myAge = myAge + 1;

This instruction takes the value of myAge, adds 1 to it, and then stores it in the variable myAge.

7.4. Input

If you want to have the user to enter information into a JavaScript program, one easy way to do that is to use the prompt function:

let name = prompt("Enter your name: ");
document.write("Oh, your name is " + name);

That can be very useful. You can run into a problem if want to have the user enter a number. For example, what happens when your program does this?

let age = prompt("Enter your age: ");
document.write("Oh, your age is " + age);

This will print out the right age, but it's probably not working the way you want it to. For example, if you want to print out how old the person will be next year, look what happens:

document.write("Next year your age will be " + age + 1);
// Enter 18, produces the output --> Next year your age will be 181

When you use a prompt() function the input is assumed to be a string (of characters). If you want it to be a number, you have to use the parseInt() or parseFloat() function to convert the string to the appropriate type of number.

let age = parseInt(prompt("Enter your age: "));
document.write("Next year your age will be " + age + 1);
// Enter 18, produces the output --> Next year your age will be 19