Know Your Dialog Window in Javascript Programming

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 :

<!DOCTYPE html>
<html>
     <head>
         <title> Example Dialog Alert </title>
     </head>
     <body>
     <script>
         alert ("Welcome to the FajarYusuf.Com Javascript tutorial");
     </script>
     </body>
</html>


The result:
Know Your Dialog Window in Javascript Programming

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:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Dialog Alert</title>
    </head>
    <body>
        <button onClick="alert('Kamu sudah menekan Tombolnya!')">Klik Ini</button>
    </body>
</html>


The result:
Know Your Dialog Window in Javascript Programming
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:

<!DOCTYPE html>
<html>
     <head>
         <title> Learning Confirm Dialog </title>
     </head>
     <body>
     <script>
         var sure = confirm ("Are you sure you want to go to the FajarYusuf.Com main page?");
         if (sure) {
             window.location = "https://www.fajaryusuf.com";
         } else {
             document.write ("Ok, you still want it here :)");
         }
     </script>
     </body>
</html>


The result:
Know Your Dialog Window in Javascript Programming

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:
<!DOCTYPE html>
<html>
    <head>
        <title>Learning Dialog Promp</title>
    </head>
    <body>
    <script>
        var name = prompt("Hello who are you?", "");
        document.write("<p>Hello "+ name +"</p>");
    </script>
    </body>
</html>


The result:
Know Your Dialog Window in Javascript Programming


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 ().

Berlangganan update artikel terbaru via email:

0 Response to "Know Your Dialog Window in Javascript Programming"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel