JavaScriptは、Webページを動的に操作するための言語として広く使われています。
その中でもダイアログを表示することでユーザーとのやりとりを行うことができます。
この記事ではJavaScriptを使ってダイアログを表示し、「はい」と「いいえ」の選択肢によって処理を分岐する方法について解説します。
この記事は約8分で読むことができます
ダイアログとは
ダイアログとは、Webページ上に表示されるポップアップウィンドウのことです。
主に、ユーザーからの入力を受け付けるために使用されます。
ダイアログにはいくつかの種類がありますが、この記事ではメッセージダイアログに焦点を当てて解説します。
JavaScriptを使ってダイアログを表示する
ダイアログを表示するためには、JavaScriptのwindowオブジェクトのメソッドを使用します。
具体的には、window.alert()、window.confirm()、window.prompt()があります。
この記事では、window.confirm()を使って解説します。
window.confirm()は、メッセージと「はい」「いいえ」のボタンを表示するダイアログを表示するメソッドです。
以下のように記述することで、ダイアログを表示することができます。
if(window.confirm('この操作を実行しますか？')){
// 「はい」を選択した場合の処理
} else {
// 「いいえ」を選択した場合の処理
}
このように記述することでダイアログが表示され、「はい」を選択した場合と「いいえ」を選択した場合で処理を分岐することができます。
ブラウザで確認すると上記のようなダイアログが出ると思います！
ただしこの方法ではダイアログが表示されるだけで、実際に何かしらの処理をすることはできません。
「はい」と「いいえ」によって処理を分岐する
先程の例では、「はい」と「いいえ」を選択した場合で処理を分岐することができましたが、具体的にどのような処理をするかについては記述していませんでした。ここでは、「はい」を選択した場合にはアラートを表示し、「いいえ」を選択した場合には何もしないように処理を記述して見ましょう！
if(window.confirm('この操作を実行しますか？')){
window.alert('処理を実行しました。');
} else {
// 何もしない
}このように記述することで、「はい」を選択した場合にはアラートが表示され、「処理を実行しました。」というメッセージが表示されます。一方、「いいえ」を選択した場合には何も処理されません。
「はい」を選択すると上記のようなアラートが表示されたと思います！
この例ではアラートを表示するだけですが、開発ではダイアログの結果に応じた処理を実行することが多いです。
例えば、フォームの入力内容を確認するダイアログを表示し、
「はい」を選択した場合にはフォームを送信
「いいえ」を選択した場合には何もしない
といったような処理が考えられます。
まとめ
今回はJavaScriptでダイアログを作成する方法について解説しました。ダイアログはユーザーに選択肢を提示することができるため、JavaScriptを使うことでより使いやすく、分かりやすいWebページを作ることができます。
JavaScriptの練習問題もあるのでぜひ解いて見てください！
コメント