三項演算子の活用

(三項演算子の書式)・・・ 変数 = (条件式)?(真の場合に実行):(偽の場合に実行)

上の(偽の場合に実行)をさらに三項演算子にすると、さらに複雑な条件分岐にできます。 
下の例は三項演算子を4つ入れ子にし、時間によって背景色を変更しています。




  ウォーキングしよう!
サア!、 だぁ、 

 

この例は、以下のようなif分で書いても同じこと。 (俺にはこっちのほうが解りやすいが、好みの問題か。三項演算子は、慣れもあろうが、ピンとこないんだヨ・・)
     var bgc;
     if(time > 19)bgc = "dimgray";
     else if(time > 14)bgc = "lightsteelblue";
     else if(time > 8)bgc = "cornsilk";
     else if(time > 3)bgc = "lavender";
     else bgc = "black";
     document.getElementById("box").style.backgroundColor = bgc;

Sample Source......................................................................>>>

<script language="JavaScript"><!--
  function ChangeCokor(){
    var time =document.form1.sele_time.selectedIndex; //時刻
    document.getElementById("box").style.backgroundColor = (time > 19) ? "dimgray" : ((time > 14) ? "lightsteelblue"
                                 : ((time > 8) ? "cornsilk" : ((time > 3) ? "lavender" :"black")));

  }
//--></script>
</head>

<form name="form1">
  サア!、 
  <select name="sele_time">
       <option>1時</option>
       <option >2時</option>
           ・・・(略)
       <option value="24">24時</option>
  </select>
だぁ、 <input type="button" onclick="ChangeCokor();" value="ウォーキングしょ!">
</form>


(最終更新:12/12/3)
フレーム構成になっています・・・<[ホーム] >> [HTML整理ノート]>