More than 3 years have passed since last update.

alertメソッド、confirmメソッド、promptメソッドの違い

Last updated at 2020-10-25Posted at 2020-10-25

はじめに

タイトルに記述した３つのメソッドは全てwindowオブジェクトのメソッド。
３つのメソッドの挙動が似ているためそれぞれの違いをまとめます。

Window.alert() メソッドは、オプションの指定されたコンテンツと OK ボタンを持つ警告ダイアログを表示します。

<script>
  window.alert('アプリ連携が完了しました。');
</script>

実行結果

Window.confirm() メソッドは、メッセージと、OK, キャンセルの 2 つのボタンを持つモーダルダイアログを表示します。

※モーダルダイアログ・・・閉じるまで親ウィンドウの操作ができなくなるダイアログのこと
（「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典）

<script>
  window.confirm('ゲームスタート！準備はいい？');
</script>

実行結果

・「OK」をクリックした場合はtrue、「キャンセル」をクリックした場合はfalseが返ってくる。

ユーザにテキストを入力することを促すメッセージを持つダイアログを表示します。

<script>
  window.prompt('星座を入力してください。');
</script>

実行結果

第２引数を指定することで初期値を指定することも可能。

<script>
  window.prompt('星座を入力してください。', '蟹座');
</script>

実行結果

・「OK」をクリックした場合のみ入力されたテキストが戻り値として返ってくる。(キャンセルの場合は何も返ってこない)
・空の状態で「OK」をクリックした場合はnillが戻り値となる。

alertメソッド → テキスト+OKボタン
confirmメソッド → テキスト+OKボタン+キャンセルボタン
promptメソッド → 　テキスト+テキスト入力ボックス+OKボタン+キャンセルボタン