条件によって、分けたい処理が多いときに使います。
以下に一般的な書き方を示します。下記は条件によって、
命令U または,命令W または,命令X または,
命令Y または,命令Z のいずれかだけの処理を行わせる記述です。
if(条件A){ 条件Aがtrueの時に、実行させる命令U; } else if(条件B){ 条件Aがfalseで、条件Bがtrueの時に、実行させる命令W; } else if(条件C){ 条件Aと条件Bがfalseで、条件Cがtrueの時に、実行させる命令X; } else if(条件D){ 条件Aと条件Bと条件Cがfalseで、条件Dがtrueの時に、実行させる命令Y; } else { 条件Aと条件Bと条件Cと条件Dがfalse時に、実行させる命令Z; }
ここで、 else if(条件){ } の部分は、もっと増やしてもよく、
最後にある else { } の部分は省略しても構わない規則になっています。
以下では、具体的な例として、
クリックするごとに画像を切り変え、ウインドウのステータス・バーに表示し、
全体体の文字色で、赤の色の濃さを切り替え、その色のデータをタイトル・バーに表示する例を示します。
で確認ください。
<html>
<head>
<title>test</title>
<script language="javascript">
<!--
var file="n00.gif";//変更する画像パス
var dir="img/"; //画像ファイルが存在するディレクトリ
var color="#000000";
function btn1_click(){
if(file == "n00.gif"){
file = "n02.gif";
color="#220000";
} else if(file == "n02.gif"){
file = "n04.gif";
color="#440000";
} else if(file == "n04.gif"){
file = "n06.gif";
color="#660000";
} else if(file == "n06.gif"){
file = "n08.gif";
color="#880000";
} else if(file == "n08.gif"){
file = "n0A.gif";
color="#AA0000";
} else if(file == "n0A.gif"){
file = "n0C.gif";
color="#CC0000";
} else if(file == "n0C.gif"){
file = "n0D.gif";
color="#DD0000";
} else if(file == "n0D.gif"){
file = "n0E.gif";
color="#EE0000";
} else if(file == "n0E.gif"){
file = "n0F.gif";
color="#FF0000";
} else {
file = "n00.gif";
color="#000000";
}
document.numb.src = dir + file; //画像変更
window.status=file; //ステータス・バーに表示
document.body.style.color = color; //文字の色
document.title = color + "の色で文字表示"; //タイトル・バーに表示
}
// -->
</script>
</head>
<body>
<p>
<img src="../img/n00.gif" name="numb">
<input type="button" value="変更" onclick="btn1_click()"><br>
ボタンをクリックするごとに、<br>
画像を切り変えて、<br>
ウインドウのステータス・バーに表示し、<br>
文字色の赤の色の濃さを切り替え、<br>
その色のデータをタイトルバーに表示します</p>
</body>
</html>
このページは、ボタンクリックなどの確認すべき操作をすべて行わないと指示のページへのボタンが有効になりません。