Previous article: JavaScript Course | Practice Quiz-1
Javascript allows us the privilege with which we can interact with the user and respond accordingly. It includes several user-interface functions which help in the interaction. Let’s take a look at them one by one.
- alert
simply creates an alert box which may or may not have specified content inside it, but it always comes with the ‘OK’ button. It simply shows a message and pauses the execution of the script until you press the ‘OK’ button. The mini-window that pops-up is called the ‘modal window’.alert('text');
Example:
// alert example
<script>
alert(
'HI there'
);
// with specified content
alert();
// without any specified content
</script>
chevron_rightfilter_noneOutput:
It can be used for debugging or simply for popping something to the user. - prompt
Prompt is another user-interface function which normally contains two arguments.
prompt('text', default value);
The text is basically what you want to show the user and the default value argument is optional though it acts like a placeholder inside a text field. It is the most used interface as with it you can ask the user to input something and then use that input to build something.
Example:(with default parameter)<script>
// prompt example
let age = prompt(
'How old are you?'
, 50);
alert(`You are ${age} years old!`);
</script>
chevron_rightfilter_noneOutput:
You can enter anything and it will print that, it doesn’t necessarily have to be a number. Without the default value, you have to enter something in the text-field otherwise it will print a blank space simply.
Example:<script>
// prompt example
let age = prompt(
'How old are you?'
);
alert(`You are ${age} years old!`);
</script>
chevron_rightfilter_noneOutput:
- confirm
The confirm function basically outputs a modal window with a question and two button ‘OK’ and ‘CANCEL’.confirm('question');
Example:
<script>
// confirm example
let isHappy = confirm(
'Are you Happy?'
);
alert(`You are ${isHappy}`);
</script>
chevron_rightfilter_noneOutput:
It will print true or false based on your choice of clicking the ‘OK’ button or ‘CANCEL’ button respectively.
Next article: JavaScript Course | Logical Operators in JavaScript