分岐するプログラム

肥満度判定機

ここでは基本アルゴリズムの一つである分岐処理を学習します。

BMI指数は以下の表のように分類されます。

低体重(やせ)	18.5未満
普通体重	18.5以上　25未満
肥満（1度）	25以上　30未満
肥満（2度）	30以上　35未満
肥満（3度）	35以上　40未満
肥満（4度）	40以上

この判定をプログラムで自動で行うように肥満度計算機を改造します。

肥満度計算機をForkしましょう。
まず簡単にするために、肥満だけを判定するプログラムを作ります。

form等のアイテムを配置した後にdocument.writeを実行すると消えてしまいますので、結果出力用のタグを用意します。
HTMLタブを開いて、以下のコードを入力します。

<form name="form1">
   身長<INPUT TYPE="text" NAME="txtA">cm<BR>
   体重<INPUT TYPE="text" NAME="txtB">kg<BR>
   BMI<INPUT TYPE="text" NAME="txtC">
   <br>
   <INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()">    
   <div id="msg">
       
   </div>
</form>

<div id="msg"> </div>として、結果を出力する領域を用意しました。

JavaScriptタブを開いて、以下のコードを追加します。

2回目以降の実行のために前回の結果を消しておきます。

document.getElementById("msg").innerHTML="";

divタグのid=msgの領域に""を格納して、空にします。

if (c>=25) {
  document.getElementById("msg").innerHTML="肥満です";
}

変数cにBMI指数の数値が格納されてとして、25以上であるかどうかを判定します。判定がYESになれば{ } の処理を実行します。
ここでは、msgの領域に肥満ですというメッセージを格納しました。
25未満の場合は何も処理を行いません。

さらに、普通体重の処理を追加します。

if (c>=25) {
  document.getElementById("msg").innerHTML="肥満です";
} else if (c>=18.5) {
  document.getElementById("msg").innerHTML="普通体重です";
}

else は前の判定がNOだった場合の処理です。25以上では無かったときだけ、18.5以上かどうかを判定します。
つまり、これで18.5以上25未満のときにYESとなります。
それ以外は何も実行されません。

if (c>=25) { // 1
  document.getElementById("msg").innerHTML="肥満です";  //α
} else if (c>=18.5) {  //2
  document.getElementById("msg").innerHTML="普通体重です"; //β
} else { //3
  document.getElementById("msg").innerHTML="低体重(やせ)です"; //γ
}

else の後ろにifを書かない場合は、上記の条件が全てNOだった場合の処理です。

cの値がどんな値でも正しくトレースできるようになりましょう。
例) Cの値を同値分割した場合

c=26 の場合	1の判定でYES → 処理α
c=20 の場合	1の判定でNO → 2の判定でYES → 処理β
c=15 の場合	1の判定でNO → 2の判定でNO → 処理γ

境界値(c=25,c=18.5)でもトレースしてみてください。

完成版のプログラムです

練習

• 肥満度判定機を肥満1度から肥満4度も判定するように改造してみよう。
  • さらに同値分割と境界値でトレースをしてみよう。

改良計算機

入力するプログラムでで作成した計算機プログラムを改良します。
＋かーを選択式にして計算できるようにします。

計算機をForkすると簡単です。
HTMLタブを開いて、以下のコードを入力します。

<form name="form1">
  <INPUT TYPE="text" NAME="txtA">
  <select name="selOpe" size=1>
    <option value="1">＋</option>
    <option value="2">－</option>
  </select>
  <INPUT TYPE="text" NAME="txtB">=
  <INPUT TYPE="text" NAME="txtC">
  <br>
  <INPUT TYPE="button" NAME="calc" value="計算" onclick="Calc()">           
</form>

<select> タグを使って、+と-を選べるようにしています。

値を格納する変数を宣言しておき、document.form1.selOpe.valueで得た選択した値を取得します。

var ope;
ope = parseInt(document.form1.selOpe.value);

その値に応じて、計算する式を変えています。HTMLの方で＋ならvalue=1、ーならvalue=2と決めているので、その値に応じて計算式を選択します。
if( ) { } else { } 構文では、if(条件式) の条件が成立した場合にそれに続く{ } の中の処理を実行します。

else の後ろは条件が成立しなかった場合に実行されます。
if( ope == 1) {
 c= a+b;
} else if( ope==2) {
 c= a-b;
}

上記の構文では、
ope=1 であれば c = a+b
ope=2 であれば c = a-b
を実行することになります。

以下が完成板のプログラムです。

練習

• HTMLとJavaScriptのプログラムを追加して×と÷も選択できるようにしよう。
  • さらに追加して÷を選んだときだけ、商と余りを計算するプログラムに改良しよう。
    • ヒント
    • 余りを表示するテキストボックスを作っておく。
    • ÷の計算結果を整数にする（切り捨て Math.float()）。
    • 余りを計算する演算子は % を使う。