Communicating with the User

There are many times where you need to tell the user something or get information from the user. Once you learn HTML, you will most likely use that for communications back and forth.

JavaScript comes with its own set of functions to pass basic information back and forth. Not all online IDEs will allow you to use these functions. It's one of the reasons I have used repl.it for most of my classroom coding practices. I also use repl.it because of its automatic access to a console window and an HTML preview page.

Developer Tools

Modern browsers all have a developer tools area of some kind. Yep, when you're coding, you're a developer! Each browser has its own way of accessing developer tools. Try pressing F12 to see if that works for your browser.

There's more information here about developer tools if you need it.

Using console.log();

You can use the console anywhere in a browser. Open up the developer tools and there's a console right there you can type basic code into and practice. Ok, it's limited. But we can also use the console to pass information from a program. It's a useful way to communicate while you're learning and it can be a helpful debugging tool until you learn how to use a debugger.

You can type directly into the console to test things out, to do some math, or to access certain variables currently in memory. When you do this, the changes are temporary and when you close the browser or reload the page, the changes are gone. Still, it's a good place for debugging and testing some stuff.

It can also be convenient to have your program display things to the console too. I often use this for testing things that aren't working as expected. There are more official ways to debug your code, but sometimes just printing your variables to the console is enough to find the problem. Within your program, you use the log method on the console object to display things.

console.log();

What you put in the parentheses will show up. But you must make sure it's valid code. For example, if you want words to appear, you need to put them in as a string, surrounded in quotes. You can send numbers, Booleans, variables, objects, arrays, and functions.

let name = "Dr. Wolf"; //to be displayed next
console.log(name); //"Dr. Wolf"
console.log("Hello there!"); //"Hello there!"
console.log(345 * 876); //302220

Debugging your code can be tricky. There are debuggers that will help you track variable values and such through your code, but that's another whole thing to learn. In the meantime, if your code isn't working as expected, try using the console window and send variable information to it and see what's being processed. It can help you quickly identify some issues.

Popup dialogue boxes

There are also pop-ups you can use to interact with a user. There are three types. One just sends information. One is basically a yes/no button press. And the third lets the user type in information, which you can use.

You need to make sure you don't disable pop-ups when you plan to use these. And you should only use them when you're learning or if you need to send an error message to a user. It's not a smooth experience for a user, but until you can connect to HTML, it's all you've got for now.

These next three functions are JavaScript defaults that create different kind of interactive popups.

Using alert();

The alert box is a pop-up dialogue box that lets you send information. It's similar to the console.log(); method, though the console can be more versatile. To send an alert, pass in what you want to say into the function. You can also send variables to be displayed. Not everything looks useful, though. Objects, for instance, say [object Object] and functions return the name of the function.

alert("Hello there!"); //"Hello there!"
let name = "Dr. Wolf";
alert(name); //this only works if you have a name variable defined before this line as shown here

Using confirm();

This allows you to get an OK/Cancel (think: yes/no or true/false) answer from a user. You send in text with a statement or a question. The default buttons are OK and Cancel. OK returns a value of true. Cancel returns a value of false.

You can save the response to confirm(); in a variable, which you can use to make decisions in your program. You don't have to save it, but then what's the point of asking?

let text = "OK to play again. Cancel to quit.";
let playAgain = confirm(text);
if (playAgain)
{
- restartGame();
}

As with all functions, you can insert it directly into a conditional statement and respond to its value without saving it to a variable first.

let text = "OK to play again. Cancel to quit.";
if (confirm(text))
{
- restartGame();
}

Using prompt();

You can also get more detailed information from a user by prompting them for it. Ask the user anything you want and the prompt window will send the answer back as a string.

You also have the option of offering a default value by adding as second parameter.

let text = "Tell me about your best friend.";
let answer = prompt(text);
let text2 = "What's your favorite color?";
let color = prompt(text2, "blue"); //this gives a default answer of blue

I'm using the text and text2 variables to create a string that gets passed into the prompt function. You don't have to do this, but it makes things easier to read, especially if you're passing in a lot of text. Also, in the second example, "blue" is a default answer. The popup box with have that already inserted. If the user blindly hits enter, then one more person has devoted themselves to the love of blue.

The prompt() function always returns a string. If you need to get a number as an answer, you will need to parse it. There are two parse commands, one if you want an integer and one if you want a float (with a decimal). If someone does not respond with a number, you get NaN as the return value: Not a Number.

let num = prompt("What's your favorite number?");
num = parseFloat(num); //allows for a decimal
let guess = prompt("Guess a number from 1 to 10.");
guess = parseInt(guess); //gets rid of any decimal
//This does the capture and parsing all at once
//It uses the variable text, defined here
let text = "Guess a number from 1 to 10.";
let number = parseInt(prompt(text));