【Javascript】確認ダイアログボックスで条件分岐を作ろう

今回はJavascriptを使った、「確認ダイアログボックスで条件分岐」を作ってみたいと思います。ちなみに「確認ダイアログボックス」とは…

画像のようなユーザーに確認を促すボックスですね。今回は「OKボタン」か「キャンセルボタン」を押したときにそれぞれ違った実行結果が処理されるようにしてみたいと思います。処理として、「ここに実行結果を表示します」という文章を、「OKボタン」を押したら「プログラムを実行します」に書き換え、「キャンセルボタン」を押したら「準備をしましょう」という文章に書き換えます。

HTMLにコンテンツを作る

今回は簡単な文章書き換えプログラムを作りますが、準備段階としてまずはHTMLに文章を用意します。

・用意するHTML

今回はJavascriptも一緒に用意してしまいます。”</body>”タグの前に“<script></script>”の要素があると思います。今回はこの中にプログラムを書いていきます。

・確認ダイアログボックスを表示するプログラム

いかがでしょうか？冒頭の画像の様な確認ダイアログボックスが出てきたでしょうか？出てくれば成功ですね。確認ダイアログボックスを表示するには「confirm()」という命令で実行されています。かっこのなかに文字列を入力することで、ボックス内に文章を表示することができます。
しかしお分かりいただけるかと思いますが、このままでは「確認ボタン」や「キャンセルボタン」を押しても何も起こりませんね。ここから命令文をさらに追加することで条件分岐を作っていきます。

if分を使って条件分岐を作る

では上記のプログラムを以下のように書き換えてみましょう。

Javascriptを上記のように書き換えることで、「OKボタン」を押したら「プログラムを実行します」という文章に、「キャンセルボタン」を押したら「準備をしましょう」という文章にそれぞれ書き換わると思います。

ちょっとしたメモ

「confirmメソッド」は「OKを押すと”ture”、キャンセルを押すと”false”」の値を返す機能を持っています。
そのためif(条件分岐)文を用いて二つの分岐処理が可能です。if分の書式として

というプログラムとなっています。今回を例にとってみると「もし(if)、OKボタンが押されたら(ture)～、”content”のidを持つ要素を”プログラムを実行します”に書き換え、それ以外なら(false = else)、”content”のidを持つ要素を”準備しましょう”に書き換えなさい 」というプログラム命令文となるわけです(*’ω’*)

 

それでは今回は確認ダイアログをつかった簡単な条件分岐プログラムでした。これを足掛かりにして色んなプログラムが作れるようになりたいですね(｀･ω･´)