You probably still remember them being used all over, and if you do, then you also know these were often used on very spammy and annoying websites. Nowadays websites often look really nice and personalized, so having boxes popup that looks old and different from the overall design is a big turn-off. They can still be useful for people new to web development to experiment with interactivity. Or when we just want to test something, get some input and test some control flow. For example, what happens in the code if a certain user presses this or enters that? Of course, we have better ways to test code, but it’s there if we want to use it for a small experiment. In this article, we’ll cover these browser dialog box functions:
alert function prompt function confirm function
JavaScript Alert
The alert function will make an alert or warning dialog box that pops up in our browser with the text we provided. In the past, this could be used to show a message to the user. This could be a warning about validation, errors, or just general information for the user. If you run the code below in your browser console you’ll get a popup dialog box. The alert function takes a string argument, the message you want to show the user. We can choose to not give that argument (it’s optional), but that would make the alert meaningless for the user. The alert dialog box has one button underneath the message. It’s just the ‘OK’ button, when you press it the alert message will disappear. This is an example of an HTML page with a button. Make a new HTML file and the source code. Open the .html file with your browser. When you push the button my message will appear.
JavaScript Prompt
The prompt is useful to get user input. When we want the user to give us a name, an answer to a question, or give us some command in string format. We can read that input in our code and do things with it. If the user entered numbers we could parse those and do calculations. If he entered an email we could store that and send an email later on. If the user entered a command, based on some options we gave, we could do some decision-making based on the answer. The prompt function takes two arguments, the first is the question or message to the user. The optional second string is the placeholder for the field where we can enter our response. There are two buttons on the prompt dialog box, ‘OK’ and ‘CANCEL’, ‘OK’ will return the message you entered to the function. If that message field was empty, an empty string “" is returned. ‘CANCEL’ will just close the dialog box and return null to the prompt function.
Confirmation
We can use the confirmation dialog box for decision-making. This is the yes or no, binary kind of decision-making. Do you want to decide yes then press ‘OK’, if not, then press ‘CANCEL’. If the user presses the ‘OK’ button true is returned by the confirm function. We can give the function a string message to show the user. If the user chooses ‘CANCEL’ then false will be returned. With these returned booleans further logic can be applied. This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional. © 2021 Sam Shepards
