ES6-ダイアログボックス

JavaScriptは、3つの重要なタイプのダイアログボックスをサポートしています。これらのダイアログボックスを使用して、警告を発したり、入力の確認を取得したり、ユーザーからの入力を取得したりできます。ここでは、各ダイアログボックスについて1つずつ説明します。

警告ダイアログボックス

警告ダイアログボックスは、主にユーザーに警告メッセージを送信するために使用されます。たとえば、1つの入力フィールドにテキストを入力する必要があるが、ユーザーが入力を提供しない場合、検証の一部として、警告ボックスを使用して警告メッセージを送信できます。

それでも、わかりやすいメッセージには警告ボックスを使用できます。警告ボックスには、選択して続行するための「OK」ボタンが1つだけあります。

例

<html>
   <head>
      <script type = "text/javascript">
         function Warn() {
            alert ("This is a warning message!");
            document.write ("This is a warning message!");
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

アラートダイアログボックス

確認ダイアログボックス

確認ダイアログボックスは、ほとんどの場合、オプションについてユーザーの同意を得るために使用されます。 [OK]と[キャンセル]の2つのボタンを持つダイアログボックスが表示されます。

ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッド* confirm（）*はtrueを返します。ユーザーが[キャンセル]ボタンをクリックすると、confirm（）はfalseを返します。次の確認ダイアログボックスを使用できます。

例

<html>
   <head>
      <script type = "text/javascript">
         function getConfirmation(){
            var retVal = confirm("Do you want to continue ?");

            if( retVal == true ){
               document.write ("User wants to continue!");
               return true;
            } else {
               Document.write ("User does not want to continue!");
               return false;
            }
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

確認ダイアログボックス

プロンプトダイアログボックス

プロンプトダイアログボックスは、テキストボックスをポップアップしてユーザー入力を取得する場合に非常に便利です。したがって、ユーザーと対話することができます。ユーザーはフィールドに入力して、[OK]をクリックする必要があります。

このダイアログボックスは、（i）テキストボックスに表示するラベルと（ii）テキストボックスに表示する既定の文字列の2つのパラメーターを取る* prompt（）*というメソッドを使用して表示されます。

このダイアログボックスには、[OK]と[キャンセル]の2つのボタンがあります。ユーザーが[OK]ボタンをクリックすると、ウィンドウメソッドprompt（）は入力された値をテキストボックスから返します。ユーザーが[キャンセル]ボタンをクリックすると、ウィンドウメソッドprompt（）はnullを返します。

例

<html>
   <head>
      <script type = "text/javascript">
         function getValue(){
            var retVal = prompt("Enter your name : ", "your name here");
            document.write("You have entered : " + retVal);
         }
      </script>
   </head>

   <body>
      <p>Click the following button to see the result: </p>
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();"/>
      </form>
   </body>
</html>

上記のコードが正常に実行されると、次の出力が表示されます。

プロンプトダイアログボックス

Es6-dialog-boxes

ES6-ダイアログボックス

警告ダイアログボックス

例

確認ダイアログボックス

例

プロンプトダイアログボックス

例

目次