JavaScriptのダイアログ表示について

JavaScriptのダイアログ表示について

window.alert()

window.confirm()

window.prompt()

window.alert()の使用方法

window.alert(message)は、指定したメッセージを表示するシンプルなダイアログボックスを作成します。このダイアログには「OK」ボタンが一つだけあり、ユーザーがクリックするとダイアログが閉じます。

主に情報をユーザーに通知する際に使用されます。例えば、フォームが正しく送信された後に「送信完了」のメッセージを表示する場合などです。

使用例


    window.alert("処理が完了しました!");
  

実行結果

上記コードを実行すると、「処理が完了しました!」というメッセージが表示されます。その後、ユーザーが「OK」をクリックするとダイアログが閉じます。

window.confirm()の使用方法

window.confirm(message)は、ユーザーに「OK」または「キャンセル」の選択肢を提供するダイアログボックスを表示します。このダイアログは、ユーザーに対して確認を求める場合に便利です。

戻り値は、ユーザーが「OK」をクリックした場合は true、「キャンセル」をクリックした場合は false になります。

使用例


    let result = window.confirm("この操作を実行してもよろしいですか?");
    if(result) {
      window.alert("操作が実行されました。");
    } else {
      window.alert("操作はキャンセルされました。");
    }
  

実行結果

このコードを実行すると、ユーザーに確認ダイアログが表示されます。「OK」をクリックすると「操作が実行されました。」というメッセージが表示され、「キャンセル」をクリックすると「操作はキャンセルされました。」というメッセージが表示されます。

window.prompt()の使用方法

window.prompt(message [, default])は、ユーザーに入力を促すダイアログボックスを表示します。ユーザーがテキストを入力して「OK」を押すと、その入力値が返されます。入力せずに「キャンセル」をクリックすると、null が返されます。

第二引数としてデフォルトの入力値を設定することもできます。

使用例


    let name = window.prompt("名前を入力してください", "山田太郎");
    if (name != null) {
      window.alert("こんにちは、" + name + "さん!");
    } else {
      window.alert("名前が入力されませんでした。");
    }
  

実行結果

このコードを実行すると、ユーザーに名前の入力を求めるダイアログが表示されます。もし名前が入力されると、「こんにちは、[名前]さん!」というメッセージが表示され、キャンセルされた場合は「名前が入力されませんでした。」というメッセージが表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です