目次

if の代わりに switch

if,else の代わりに使える switch

if,else の代わりに使える switch というものもあります。ただし if,else の方が応用が利きますからif,else を使いこなせる人が switch を学ぶのが順序ではありますが、今回の場合は switch の方が構造がわかりやすいかもしれません。

スクリプトの書き方

body の中に画像を img タグで貼り付け、id="area1" と名前を付けるところは同じです。繰り返しますが、この名前はページ内で同じ名前があってはいけません。

<img src="images/img1.png" alt="" id="area1" />

anime() という関数の if の部分を switch を使って次のように書き換えます。

<script type="text/javascript">
function anime(){
  switch ( n ) {
    case 1:
      document.getElementById("area1").src = "images/img2.png";
      n=2;
      break;
    case 2:
      document.getElementById("area1").src = "images/img3.png";
      n=3;
      break;
    case 3:
      document.getElementById("area1").src = "images/img1.png";
      n=1;
      break;
  }
  setTimeout("anime()",1000)
}

window.onload = function(){
   n = 3;
   anime();
}
</script>

switch(n) と書いて、n の値を調べることを表明します。

case 1: は n が 1 だったら

case 2: は n が 2 だったら

それぞれの後に複数の行で実行することを書けますが、最後に break; としないと次の case の内容も実行してしまいます。

setTimeout() 関数は if-else のところと同じです。

window.onload = function の部分で開始させるのも同じです。

default:の使い方

今回の目的ではいらないので省きましたが、default:の使い方です。

  switch ( m ) {
    case 1:
      /* m が 1 の時にすること; */
      break;
    case 2:
      /* m が 2 の時にすること; */
      break;
    default:
      /* m が 1でも2でもない時にすること; */
   }

ウェブページ
聖愛中学高等学校
http://www.seiai.ed.jp/
Oct.2011