JavaScript-ダイアログボックス

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 と Cancel の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 と Cancel の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>

出力

Javascript-dialog-boxes

JavaScript-ダイアログボックス

警告ダイアログボックス

例

出力

確認ダイアログボックス

例

出力

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

例

出力

目次