2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-25

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

alertメソッド

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

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

実行結果
alert.png

confirmメソッド

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

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

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

実行結果
confirm.png

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

promptメソッド

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

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

実行結果
prompt.png

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

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

実行結果
prompt 初期値あり.png

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

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

参考記事

https://developer.mozilla.org/ja/docs/Web/API/Window/alert
https://developer.mozilla.org/ja/docs/Web/API/Window/confirm
https://developer.mozilla.org/ja/docs/Web/API/Window/prompt

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?