解説・結果

ヨッシーの”ホームページを作ろう（JavaScript編）”Vol.10

問題

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function blue_wall(){
    res = confirm("背景を青色に変えますか？");
    if(res == true){
        alert("背景を青色に変更します。");
        document.bgColor="blue";
    }
     else{
        alert("背景は変更しません。");
    }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="背景を青色に変える" onclick="blue_wall()">
</BODY>

《結果》

《解説》

<HEAD>
<SCRIPT language="JavaScript">
<!--
function blue_wall(){
    res = confirm("背景を青色に変えますか？");　←Aconfirm()を使ってユーザーの結果をresという変数に入れる
    if(res == true){
        alert("背景を青色に変更します。");
        document.bgColor="blue";　　　　　　　　　　←Bresに応じて背景を変更するかしないかの場合分け
        }
    else{
        alert("背景は変更しません。");
        }
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="背景を青色に変える" onclick="blue_wall()">　←@ボタンを押すとblue_wall()を呼び出す
</BODY>

@：まず、いつもの通りonclick関数を使ってblue_wall()という関数を呼び出しているんだね。
≪関数blue_wall()≫
A：res = confirm("背景を青色に変えますか？")
これは、resという変数にconfirm()でユーザーに選択された結果("true"か"false")
が代入されるんだね。
つまり、"ＯＫ","キャンセル"のダイアログを作って、
ＯＫを押したら--------------res = true
キャンセルを押したら--------res = false
だから、ここは見ている人が"ＯＫ"か"キャンセル"のどちらかを押すことによって変わってくるね。
B：次はユーザーの押したボタンによって場合分けをしていこう。
まず、ユーザーが”ＯＫ”を押した場合、

    if(res == true){
        alert("背景を青色に変更します。");
        document.bgColor="blue";
        }

これは、まずalertで表示して、その後document.bgColor="blue"で背景色を変えているんだね。
次に”キャンセル”を押したとき、

    else{
        alert("背景は変更しません。");
        }

このときは別に何もしなくてもいいんだけど、せっかくだから”背景を変更しません”っていうメッセージを出しておこう。