Showing data to users and getting data from users is a pretty fundamental task in programming.
If you come from a Java programming background, you're probably used to using the console to display information to the user as well as using something like the Scanner
to retrieve data via the console as well. But with JavaScript it's a lot more straight forward.
You see, JavaScript offers not only console logging, but also a simple means by which to display messages and get inputs from the users.
This is what we'll be diving into today. First off, let's start with the easy stuff: displaying messages!
How to Display Messages / Alerts to Users with JavaScript
Displaying messages is as simple as using the alert
function.
Here's a simple example of how to display an alert message with JavaScript:
alert("This is a test message");
If you'd like, you can go ahead and click here to see what that alert message looks like.
And it's really as simple as that!
As a rule of thumb, I would avoid overusing the alert
function though, as users will get annoyed by having to click on “OK” over and over again.
How to Get Data from Users
Getting data from users using JavaScript is also very easy.
There are two functions you can use:
prompt
confirm
JavaScript Prompt
The prompt
function is used to get textual or numerical (or both) data from the user. It will just put up a dialogue box on screen with any message you'd like to display along with a text box allowing them to input anything they like.
Here's an example of a prompt
:
var response = prompt("Hey there, what's your name?"); alert("You typed: " + response);
Notice that we use a variable (called response
) to store the input that the user types into the prompt.
If you'd like, you can go ahead and click here to see what that prompt looks like.
JavaScript Confirm
The confirm
function is used in a very similar fashion as the alert
function, but with one big difference. The confirm
function will show an alert box with two options “OK” and “Cancel”.
Here's an example of a confirm
popup:
var response = confirm("Hey there, do you want to learn more about JavaScript?"); alert("Your response was: " + response);
Notice that we use a variable (called response
) to store the choice the user makes (either “OK” or “Cancel”). When the user clicks “OK” the response
variable will be true
, if the user clicks “Cancel” the response
variable will be false
.
If you'd like, you can go ahead and click here to see what the confirm popup looks like.
In Summary
Thankfully this kind of user interaction is not rocket science and is fairly easy to follow.
If you're wondering if there are other methods for retrieving data from users in JavaScript, the answer is “Sort of”.
You see, JavaScript isn't really meant to be the primary source of showing or collecting input from webpage users. HTML is best used for these tasks.
So a typical scenario is to use HTML input
tags to gather input from users and then you JavaScript code to validate that the data is valid before sending it off to a web server!
But if you're in a bind and need a quick way to show or get data from your users, then look no further than JavaScript and the three functions we talked about today.
PS. Don't forget that I'm always giving away awesome free stuff when you join our email list. I also don't sell or give away your email addresses to ANYONE, I never have and a I never will! So be sure to check out what free goodies I'm giving away by filling out the form below :)