はじめに
JavaScriptには、ユーザーとの簡易的なやりとりを実現するためのダイアログ表示機能が用意されています。今回は、「alert」、「confirm」、「prompt」の通知・確認・入力の3つの機能について記載していきたいと思います。
アラート（alert）とは
alert は、ユーザーにメッセージを通知するためのポップアップウィンドウです。「OK」ボタンが表示され、ユーザーがそれを押すと処理が再開されます。
例
htmlの準備
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="js/main.js" defer></script>
</head>
<body>
<h1>JavaScriptのダイアログ表示</h1>
<button id="alertBtn">アラートを表示</button>
</body>
</html>
alert
document.getElementById("alertBtn").addEventListener("click", () => {
alert("これはアラートです。処理が完了しました。");
});
コンファーム（confirm）とは
confirm は、ユーザーに「OK」か「キャンセル」の選択を促すダイアログです。選択結果によって処理を分岐できます。
例
htmlの準備
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="js/main.js" defer></script>
</head>
<body>
<h1>JavaScriptのダイアログ表示</h1>
<button id="alertBtn">アラートを表示</button>
<button onclick="confirmAction()">確認ダイアログを表示</button>
</body>
</html>
confirm
function confirmAction() {
const result = confirm("このデータを削除しますか？");
if (result) {
alert("削除しました。");
} else {
alert("キャンセルしました。");
}
}
プロンプト（prompt）とは
prompt は、ユーザーから文字入力を受け取り、その入力値を利用するためのダイアログです。
例
htmlの準備
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>example</title>
<script src="js/main.js" defer></script>
</head>
<body>
<h1>JavaScriptのダイアログ表示</h1>
<button id="alertBtn">アラートを表示</button>
<button onclick="confirmAction()">確認ダイアログを表示</button>
<button onclick="promptName()">名前を入力</button>
</body>
</html>
prompt
function promptName() {
const name = prompt("あなたの名前を入力してください：");
if (name !== null) {
alert(`こんにちは、${name}さん！`);
} else {
alert("入力がキャンセルされました。");
}
}
まとめ
| 機能 | 詳細 | 戻り値 |
|---|---|---|
| alert | 通知ダイアログ | なし |
| confirm | OK/キャンセル確認 | true/false |
| prompt | 入力フォーム付き通知 | 入力文字 |
最後に
JavaScriptの環境構築は、この記事を参照してみてください。
【JavaScript】VSCodeでJavaScriptを使用するための環境構築を実施する – SEもりのLog JavaScript
以上、ログになります。
これからも継続していきましょう！！
コメント