JavaScriptのabc
３．「if文」と関数
● 「if文」で条件分岐
さて甲乙付け難い三美人ですが、美人の要素として標準体形にもっとも近い健康体は誰なのでしょうか。
現代美人の花子さんも含めて４人の標準体重を出し、体形を比較してみましょう。表の要素として、名前、身長、体重に「標準体重」と「体形」を追加します。
標準体形の計算式は、
標準体形＝（身長÷１００）×（身長÷１００）×２２
で、算術演算子（+、-、*、/、%）を使います。
又、小数点以下を四捨五入する為に、Mathオブジェクトを使います。
具体的には、「標準体重hyoujunは、身長shinchouを使って下の様に記述して算出します。
var hyoujun = sinchou[i]/100*sinchou[i]/100*22;
hyoujun = Math.round(hyoujun);
本題の「if文」で条件分岐に入る前に、「Mathオブジェクト」の代表的なものを紹介します。
小数点以下を四捨五入・・・a=Math.round(b)
０以上１未満の乱数 ・・・a=Math.random(b)
小数点以下を切り上げ・・・a=Math.cell(b)
小数点以下を切り捨て・・・a=Math.floor(b)
では、本題の「if文」で条件分岐に入ります。
標準体重から体重を引いた値が－５未満の体形を「やせすぎ」、５以上の体形を「ふとりすぎ」、これら以外を「理想的」と定義したいと思います。
論理的な表現をすると、下の様になります。
（標準体重から体重を引いた値）<－５か？
はい→体形は「やせすぎ」
いいえ→標準体重から体重を引いた値）≥５か？
はい→体形は「ふとりすぎ」
いいえ→体形は「理想的」
ここで、「if文」中での条件分岐の書き方は、「・・・か？ はい」の部分がif、「いいえ」の部分がelseとなります。
実際の記述は下の様になります。
if ((taijuu[i] - hyoujun) < -5 );
document.write(‘<td>‘ + ”やせすぎ” + ‘</td>‘);
} else {
if ((taijuu[i] - hyoujun) ≥ 5 );
document.write(‘<td>‘ + ”ふとりすぎ” + ‘</td>‘);
} else {
document.write(‘<td>‘ + ”理想的” + ‘</td>‘);
}
では、HTML文書全体を見てみましょう。
追加としては、青枠□で囲んだ部分が標準体重の計算式、赤枠□で囲んだ部分がif文による分岐の記述です。
動きは、下のボタンのクリックで確認してください。
今回は、次の事を学びました。
１．算術演算子とMathオブジェクト。
２．「if文」で条件分岐・・・if と else の使い方
次回は今日記述したプログラムを「関数」にしちゃいます。何回も出て来る処理は「関数」にしておくと、楽できます。
● 「関数」使って省エネルギー
今回は、たまたま「表」は一つしかありませんが、場合によってはいくつかの表をつくる事があります。「表」作成以外にも、同じ処理を何回も繰り返す事があります。
この様に何度も行う処理でも、「関数」を使えば一回書くだけで済ませる事ができます。
今回の処理を例にとると、次の処理を「関数」にします。
・表を書く
・最初の横１行に、「名前」、「身長」、「体重」、「標準体重」、「体形」と記入した５マスを作る
・i=0からi<4の間、横１行で次の作業をする
配列変数nameを１番目のマスに入れる
配列変数sinchouを２番目のマスに入れる
配列変数taijuuを３番目のマスに入れる
hyoujunを計算して、これを４番目のマスに入れる
配列変数taijuuとhyoujunを比較して体形を「やせすぎ」、「ふとりすぎ」、「理想的」に分け、これを５番目のマスに入れる
では、ここで、「関数」の作り方を見てみます。
function 関数名(引数名、引数名、引数名・・・）{
関数で処理する内容
}
もし、「関数」の結果（例えば計算の結果）を返したい場合は、
function 関数名(引数名、引数名、引数名・・・）{
関数で処理する内容
return 返値;
}
と書きます。又、結果を返さない場合でも、関数の途中で抜け出したい時にはreturn（返値なし）を使います
今回は次の様な「関数」を作りました。
関数名・・・writeTable
引数名・・・name、sinchou、taijuu、の３つ
処理内容・・上で説明した通り
return・・・無し
実際の関数定義は下の通りです。
function writeTable(name, sinchou, taijuu)
{
document.write(‘<table cellspacing=”0px”>‘);
document.write(‘<tr>‘<th>名前</th><th>身長</th><th>体重</th><th>標準体重</th><th>体形</th></tr>‘);
for(var i=0; i<4; i++){
document.write(‘<tr>‘);
document.write(‘<td>‘ + name[i] + ‘</td>‘);
document.write(‘<td>‘ + sinchou[i] + ‘</td>‘);
document.write(‘<td>‘ + taijuu[i] + ‘</td>‘);
var hyoujun = sinchou[i]/100*sinchou[i]/100*22;
hyoujun = Math.round(hyoujun);
document.write(‘<td>‘ + hyoujun + ‘</td>‘);
if ((taijuu[i] - hyoujun) < -5 ){
document.write(‘<td>‘ + ”やせすぎ” + ‘</td>‘);
} else {
if ((taijuu[i] - hyoujun) ≥ 5 ){
document.write(‘<td>‘ + ”ふとりすぎ” + ‘</td>‘);
} else {
document.write(‘<td>‘ + ”理想的” + ‘</td>‘);
}
}
document.write(‘</tr>‘);
}
document.write(‘</table>‘);
}
この様に定義した関数を呼び出して実行するには、下の様に記述します。
関数名(引数名、引数名、引数名・・・）
では、「美人名鑑」と「良い男名鑑」の２つの表を書かせてみましょう。上の様にして作った関数writeTableを２回呼び出して実行します。
動きの確認です。下のボタンをクリックしてください。
この動きのHTML文書は下の通りです。
さて、ここまで「document」と言うオブジェクトを使って表やその中味を書いて来ました。
次回からは、このオブジェクトと言うものを理解する為に、dateオブジェクトを使って、カレダー作りをしちゃいましょう。
