Know Your Dialog Window in Javascript Programming
In the earlier material , you’ve learned how to display the output on Javascript programming.
One of them is by using the function alert () . Function alert () is a function that can show both output in the dialog window.
Before issuing the output must be input, there are two ways we can do to take inputs:
- The first way: Using form.
- The second method: Using the dialog window.
In this matter we will discuss the second way is by using the dialog window.
Dialog window is a window that can be used to interact with the user.
There are three kinds of dialog window in Javascript:
- Dialog window alert () ;
- Dialog window confirm () ;
- Dialog window prompt () ;
The dialogue has a different way and use each.
Let’s discuss them one by one.
Alert Dialog Window
Dialog alert () is usually used to display a warning message or information that appears in a pop-up browser.
Function alert () within the window object.
We can write fatherly can use it like this:
window.alert(“Learn Javascript FajarYusuf.com“);
Or like this:
alert(“Learn Javascript FajarYusuf.com“);
Since the beginning of the window object is an object that global backwardly, we can not write it.
Dialog alert () will not return any value when executed.
Please try the following code, you may write to create a .html file, or it can be run through HTML editor FajarYusuf.com :
The result:
Dialog alert () has loaded parameter above should be given in the form of text to be displayed in the dialog that appears in a pop-up window.
In the above example, we give the text “Welcome to the FajarYusuf.Com Javascript tutorial”.
And if you ask how to display a dialog alert () on certain events, for example on a click event or when a button is clicked?
This can be done by adding a dialog function in the event listener.
In HTML, we can put the function alert () on the attribute onclickso that it will be displayed when an element present in the onclick clicked.
Coding example:
<html>
<head>
<title>Belajar Dialog Alerttitle>
head>
<body>
<button onClick="alert('Kamu sudah menekan Tombolnya!')">Klik Inibutton>
body>
html>The result:
 |
| Dialog window of alerts will appear when the button is clicked |
Confirm Dialog Window
Dialog confirm () is needed to confirm the specific action.
For example, when we approve something going action we take, it will be better if we show the dialog confirm () . Because if no such action would be dangerous.
Dialogue can be made to confirm the function confirm () .
Writing Sample:
confirm ( “Are you sure you want to delete your status?”);
Dialogue confirm () will return true when we choose the OK button and returns a false value when we choose Cancel.
This return value can be disposed within the variable to be processed.
Example code:
The result:
Prompt Dialog Window
Dialog prompt () usually serves to take an input from the user.
Dialog prompt () will return a string value of what was entered by the user.
Example code:
The result:
Dialog prompt () has two requirements for parameters that must be given:
- Text to be displayed on the form.
- The default value for the input field.
In the coding example above, we provide its default value is an empty string in quotation marks “”.
Conclusion
When is the right time to use Dialogue Alert, Confirm, and Prompt?
Based on the examples that have been described above, we can know when it is appropriate to use the alert (), confirm () and prompt ().
When we only want to display information without expecting something in return users, then use the alert ().
When we want to get the answer confirmation from the user, then use confirm ().
And when we want to retrieve data from the user input text, then use the prompt ().