スポンサーリンク
JavaScriptでアラートを表示する場合はalertメソッドを使用し、確認ダイアログの表示はconfirmメソッドを使います。
アラートの構文
alertメソッドに表示したい文字列を指定します。
alert("アラートに表示するメッセージ");アラートの実装例
以下alertメソッドの実装例です。
ファイル名：alert_test.html
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <title>アラートテスト</title></head>
<body> <script> alert("アラートを表示"); </script></body>
</html>アラートの表示例
保存したalert_test.htmlをブラウザで起動して確認します。
確認ダイアログの構文
confirmメソッドに表示したい文字列を指定します。
confirm("確認ダイアログに表示するメッセージ");確認ダイアログの実装例
以下confirmメソッドの実装例です。
ファイル名：confirm_test.html
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <title>確認ダイアログテスト</title></head>
<body> <script> if (confirm("確認ダイアログを表示")) { document.write('<p>OKを押下</p>'); } else { document.write('<p>キャンセルを押下</p>'); } </script></body>
</html>確認ダイアログの表示例
保存したconfirm_test.htmlをブラウザで起動して確認します。
OKを押下した場合
OKを押下のメッセージが表示されました。
キャンセルを押下した場合
キャンセルを押下のメッセージが表示されました。
確認ダイアログの実装例2
確認ダイアログは、ボタンを押下した際の確認に利用するケースが考えられます。
以下は送信ボタンから確認ダイアログを表示する実装例です。
ファイル名：confirm_test2.html
<!DOCTYPE html><html>
<head> <meta charset="utf-8"> <title>確認ダイアログテスト</title></head>
<body> <div id="container"> <button id="button">送信</button> </div>
<script> var btn = document.getElementById('button');
btn.addEventListener('click', function () { const container = document.getElementById('container'); if (confirm("送信して問題ないですか？")) { container.innerHTML = container.innerHTML + '<p>OKが押下されました</p>'; } else { container.innerHTML = container.innerHTML + '<p>キャンセルが押下されました</p>'; }
}) </script></body>
</html>確認ダイアログの表示例2
保存したconfirm_test2.htmlをブラウザで起動して確認します。
起動後まず送信ボタンを押下します。
確認ダイアログが表示されるので、OK・キャンセルボタンをそれぞれ確認します。
OKを押下した場合2
OKが押下されましたのメッセージが表示されました。
NGを押下した場合2
キャンセルが押下されましたのメッセージが表示されました。
まとめ
- アラートを表示するには<script>内に
alertメソッドを指定する。 - 確認ダイアログを表示するには<script>内に
confirmメソッドを指定する。
確認した環境（ブラウザ）
Microsoft Edge
バージョン 129.0.2792.52
以上で本記事の解説を終わります。
よいITライフを！