ＪａｖａＳｃｒｉｐｔ講座(vol.10)

ＪａｖａＳｃｒｉｐｔ講座
（メールマガジン編）

８/２７日発行　ヨッシーの”ホームページを作ろう！（JavaScript編）”★Vol.10★

”OK・キャンセル”ダイアログ

★ ”OK・キャンセル”ダイアログ ★

今回は"ＯＫ・キャンセル"ダイアログについてやってみよう。
ダイアログというのは以前やった警告ウィンドウ(alert)のようなもののことだよ。
どんなときに使うかというと、何かボタンを押したときに、ユーザーにこれでいいかどうか確認をするために使うんだ。
まず、"ＯＫ・キャンセル"ダイアログを作るための命令をやってみよう。

confirm("表示するテキスト")

”OK・キャンセル”ダイアログを表示する

と書くんだ。
このconfirm()という関数は、
"ＯＫ"を押すと"true"という値が返ってきて、"キャンセル"を押すと"false"という値が返ってくるんだ。
(これを厳密に理解するには前回の引数についてよく理解しないといけない)

◆confirm()の役割◆
ダイアログ"ＯＫ","キャンセル"が出る。
"ＯＫ"を押すと"true"という値が返ってくる。
（つまり、confirm()が"true"になる、と考えてよい）
"キャンセル"を押すと"false"という値が返ってくる。
（つまり、confirm()が"false"になる、と考えてよい）

しかし、このconfirm()の命令だけじゃあまり意味が無いんだ。
（この命令はただ、ダイアログを画面に表示するだけだからね。）
だから、次のプログラムのようにif文等と組み合わせて使ってやろう。

--"ＯＫ・キャンセル"ダイアログを使ったプログラム--

<HTML>
<HEAD>
<SCRIPT language="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="確認" onclick="yes_no()">
</BODY>
</HTML>

≪結果≫

＜解説＞

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function yes_no(){                                         ←yes_no()という関数を作る
    res = confirm("これでいいですか？");         ←②変数resにconfirm()の結果を入れる
    if(res == true){                                         ←③"OK"か"キャンセル"か判定
        alert("ＯＫを押しました");
    }
    else{
        alert("キャンセルを押しました");
    }
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="確認" onclick="yes_no()">
↑①ボタンを押すとyes_no()の関数を出す
</BODY>
</HTML>

①：まず、今までのようにボタンを押すとyes_no()関数が呼び出される。
ここで次に、yes_no()関数を見てみよう。
②：res = confirm("これでいいですか？")
これは、resという変数にconfirm()でユーザーに選択された結果("true"か"false")が代入されるんだね。
つまり、"ＯＫ・キャンセル"のダイアログを作って、
ＯＫを押したら--------------res = true
キャンセルを押したら--------res = false
という風になるよね。
だから、ここは見ている人が"ＯＫ”か"キャンセル"のどちらかを押すことによって変わってくるね。
③：if(res == true){
　　　　alert("ＯＫを押しました");
　　　　}
　　else{
　　　　alert("キャンセルを押しました");
　　　　}
②でユーザーの選択（"ＯＫ"か"キャンセル"）によって"true"か"false"がresという変数に入ったよね。
もし、res == true ならば"alert("ＯＫを押しました")"を実行。
それ以外(else)なら、"alert("キャンセルを押しました")"を実行。
このように、ユーザーが"ＯＫ"か"キャンセル"のどちらを選んだかによって処理を変えているんだ。

※ = , == の違いについて
(わかる人は読まなくていいです、読むと余計わからなくなる可能性があるから：笑)
メールマガジンのvol2,補足で一度やっているね。
もう一度少しだけ復習してみよう。
　=　：　代入　　　　　==　：　等しい
だったね。
<<誤ったら？>>
もし、上のres=confirm()がres==confirm()だったらどうなるかな。
これは、resとconfirm()が等しいということになるね。
でも、この時はまだresという変数には何も入っていないよね。
次にもし、上のif文の中のres==trueがres=trueだったらどうなるかな。
これは、resという変数にtrueという値を入れるという意味だよね。
"="と"=="はよく似ているけど、使い間違えるとぜんぜん違ったプログラムになるからね。

＜問題＞
[命令]のところを埋めて、ボタンを押すと確認ダイアログ("ＯＫ"か"キャンセル")が出て、"ＯＫ"を押すと背景が青色になるプログラムを作れ。

＜ヒント＞
背景の色を変える命令

document.bgColor="色"

このdocumentって文字を書くときにもあったね。
実はdocumentにはきちんと意味があるんだけど、今は丸覚えしておいてね。

～ここから～
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
function blue_wall(){
　　　　[命令]
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="画面を青にします" onClick="blue_wall()">
</BODY>
</HTML>

解説・結果