Input Basics
Up to this point, all variable values have been directly assigned in the code. This means that each time a program runs, the output is the same - unless, you go into the code and change the variable values. Example:
<![CDATA[var birthYear=1972;
var currentYear=2013;
document.write("You are "+(currentYear-birthYear)+" years old this year.");]]>
Javascript offers the first opportunity for users to interact with a web page. This is through the use of input. Input allows us to use the same program structure as above, but instead of 'hardcoding' values into the variables, the user inputs values that are stored in the variables. This allows the program to do the same calculations with different values each time it runs. Example:
<![CDATA[var birthYear=window.prompt("What year were you born?");
var currentYear=window.prompt("What year is it now?");
document.write("You are "+(currentYear-birthYear)+" years old this year.");]]>
See that the hard coded values of 1972 and 2013 were replaced with input functions. Whatever values the user enters when presented with these questions will be the values stored in the variables and, consequently, the values used in the calculation.
Prompting
One of the keys to gathering input from a user is to be very clear in what you are asking for. This is called a prompt. The more specific you can be with a user, the better off you will be. For example, in the code above, we prompted the users to enter a year. We could be more specific by prompting them with "What year were you born? (yyyy)". This shows the user that we need a 4 digit year as input.
window.prompt
The main method of gathering user input is the window.prompt() method. This method takes 0, 1 or 2 pieces of information. If nothing is written in the parenthesis, a blank prompt box is shown. If one string is presented, it acts as the prompt. If two strings are presented, the first is the prompt and the second is the default text that appears in the input box.
<![CDATA[window.prompt(String prompt, [String default]);]]>
As stated above, there should always be a prompt, but the default text parameter is optional.
The one trick with the window.prompt method is that everything comes into javascript as a String. In other words, an entered value of 1972 is treated as "1972". This will prevent us from performing mathematical operations on the numerical information gathered from an input window. To fix this problem, we must parse any numerical information that comes in. This is done using parseInt for integers (non decimal numbers) and parseFloat for decimal numbers. The easiest thing to do is to put the entire prompt call inside the parse method. Again, this is only done when asking the user for numbers on which you may want to do mathematical operations. See the most recent version of the age program below:
<![CDATA[var birthYear=parseInt(window.prompt("What year were you born?"));
var currentYear=parseInt(window.prompt("What year is it now?"));
document.write("You are "+(currentYear-birthYear)+" years old this year.");]]>
window.confirm
Another way to get user input is to use the window.confirm method. Like window.input, window.confirm will take a String parameter that represents the prompt. The confirm method will ask a user if something is true or false. It will then present the user with two buttons: OK (true) and CANCEL (false). This allows the user to make a choice. If set equal to a variable, the confirm method will store the values true or false in the variable. This type of information will be handy later when we learn conditions.