データを登録する際の確認など、処理を実行する前にシステム利用者に最終確認するダイアログ画面があります。
アラートダイアログ画面と違う点は、OKボタンの他にキャンセルボタンが有り、最終確認でキャンセルボタンが押された場合は、それ以降の処理を行わずに処理を終了することができます。
この確認ダイアログ画面も、OKボタン、キャンセルボタン、画面左上の×ボタンのいずれかを押すまでは、プログラムは中断状態にあり、他の画面を操作したりプログラムの次の処理に移ることはできません。
それでは、実際に確認ダイアログ画面を表示するプログラムを見てみましょう。
確認ダイアログの表示
固定文字列の表示
アラートダイアログ画面と同様に、固定文字列を表示する場合は、表示する文字列をシングルクォーテーションで囲みます。
OKボタンとキャンセルボタンの処理の分岐は、window.confirm実行時の戻り値で行います。OKボタンが押下されるとtrueが、キャンセルボタンが押下されるとfalseが返却されます。
|
1 2 3 4 5 6 7 8 |
// 確認ダイアログの表示 if(window.confirm('入力情報を登録しますか？')){ // OKボタン押下時の処理（登録完了メッセージを表示） alert('登録が完了しました'); } else { // キャンセルボタン押下時の処理（警告ダイアログを表示） alert('キャンセルされました'); } |
上記プログラムの実行結果は次のようになります。
OKボタンを押下した時
キャンセルボタンを押下した時
変数の値の表示
アラートダイアログ画面と同様、変数名を指定すれば変数の値を表示することができます。
また、変数名とシングルクォーテーションで囲んだ固定文字列を+で連結すれば、変数の値と固定文字列を連結して表示することも可能です。
|
1 2 3 4 5 6 7 8 9 |
var score = 85; // 確認ダイアログの表示 if(window.confirm('今回の得点：' + score + 'を前回の結果に上書きしてもよろしいですか？')){ // OKボタン押下時の処理（登録完了メッセージを表示） alert('上書きしました'); } else { // キャンセルボタン押下時の処理（警告ダイアログを表示） alert('キャンセルされました'); } |
上記プログラムの実行結果は次のようになります。
OKボタンを押下した場合
キャンセルボタンを押下した場合
改行を含む文字列の表示
複数行の文字列を表示することも可能です。アラートダイアログ画面と同様に、改行したい箇所に\nを付加することで改行することができます。
|
1 2 3 4 5 6 7 8 9 10 |
var score1 = 85; var score2 = 100; // 確認ダイアログの表示 if(window.confirm('今回の得点：' + score2 + '\n' + '前回の得点：' + score1 + '\n' + '今回の結果を上書きしてもよろしいですか？')){ // OKボタン押下時の処理（登録完了メッセージを表示） alert('上書きしました'); } else { // キャンセルボタン押下時の処理（警告ダイアログを表示） alert('キャンセルされました'); } |
上記プログラムの実行結果は次のようになります。
インデント付きの文字列の表示
見出しと内容というように、異なる種類の情報を見やすくためにインデント（字下げ）をしたい場合も、アラートダイアログ画面と同様に、\tと記述すると字下げをすることができます。
|
1 2 3 4 5 6 7 8 9 |
var score2 = 100; // 確認ダイアログの表示 if(window.confirm('【テスト結果】' + '\n' + '\t' + '今回の得点：' + score2 + '\n' + '今回の結果を上書きしてもよろしいですか？')){ // OKボタン押下時の処理（登録完了メッセージを表示） alert('上書きしました'); } else { // キャンセルボタン押下時の処理（警告ダイアログを表示） alert('キャンセルされました'); } |
上記プログラムの実行結果は次のようになります。
２行目が字下げされて表示されました。
確認ダイアログ画面は、システム利用者からのレスポンスによって処理を分岐できる便利なダイアログ画面です。
誤動作によってデータを登録したり削除してしまうリスクを減らすためにも、有効な画面と言えるでしょう。
