Exercise 6.1. Introducing confirm()
Do you notice that there is only one button with alert()? You can only click on OK. What if we want to ask something like: “Are you ready?” And the user should be able to respond with one of the two options: YES or NO. Here comes our new command: confirm().
Let’s try out the following code in JS Bin :
alert("This is an alert. I have one button."); confirm("This is a confirm. I have two buttons.");
As you can see, you have a Cancel button for confirm().
Since we are offering choices to our user( OK or Cancel ), we should be able to get what did the user pick. Run the following code twice, choose OK for the first time, and Cancel for the second, and pay attention to what is in the Output column.
var response = confirm("This is a confirm. I have two buttons."); document.write(response);
You should have a true for the OK button and a false for the Cancel button, which means confirm() returns a boolean value.
Exercise 6.2. Input, Compute, Output
Notice here, we are getting responses from users now. When we show something to users or print something out to a web page ( document.write() ) or the console ( console.log() ), we are doing output. When we get something back from users ( true or false via confirm() ), we say users input something. A computer program can be divided into three parts:
Input — Compute — Output
They don’t have to be in exact that order. You can imagine this is how a computer program work:
- Firstly, you have to input some data for computing.
- Secondly, the computer starts to compute with the data and to generate the final result.
- Finally, the computer program has to output the final result to users.
We will demonstrate this process later in this tutorial. Let’s talk a look at another command for input.
Exercise 6.3. Introducing prompt();
It’s obvious not enough only to get true/false from users, we would like our users to tell us some information directly. This is what the prompt() command is made for.
Let’s look at an example, enter something in the popup window:
var response = prompt("This is a prompt. Enter something:"); document.write(response);
As you see, whatever you entered will be stored in the variable response.
Now, let’s put everything together to create a meaningful example.
Exercise 6.4. Sum and Average Example
In this exercise, we will ask users to provide us with three numbers, which are grades of English, Math and History. We use these numbers to calculate the sum and average and print the results to the web page.
Here is the code:
var english = Number( prompt("Enter your English grade:") ); var math = Number( prompt("Enter your Math grade:") ); var science = Number( prompt("Enter your History grade:") ); var sum = (english + math + science); var average = sum / 3; document.write("Sum: " + sum); document.write("Average: " + average);
Notice there is a Number() surrounding the prompt(). That’s because the value returns by prompt() is set to be strings by default and we need numbers to do the math. So we have to convert strings to numbers, this is what Number() does, it tries to convert anything into numbers. Of course, if you give it some letters, it won’t be able to convert and you will get an error.
Exercise 6.5. Conclusion
After this exercise, you should be clearer about the idea of programming. Let’s organise what we have learned in three parts:
- Input: confirm() , prompt();
- Compute: values & variables ( number, string, boolean )
- Output: console.log(), alert()