== 条件文 ==
=== 流れ図 ===

プログラムは記述した順に実行されました。
次のようなプログラムがあったとします。
 {{{
 文１
 文２
 文３
 }}}
ここでは、文１～３は代入文かprint文だと考えてください。
このプログラムを実行すると、文１～３はこの順に実行されます。

実行の順序を図で表すと次のようになります。
 . {{attachment:jouken1.png}}
処理の流れ（実行順序）を表すための図を流れ図といいます。

----
=== 条件文の書き方 ===

いつも同じ処理をするだけでなく、場合によって処理内容を変えることができると、もっといろんなプログラムが書けます。

条件によって処理内容を変えるための、もっとも基本的な文が '''if文''' です。

if文の書き方は

 . {{attachment:jouken2.png}}

です。

丸で囲まれたところはその通りに書きます。
条件のところには、数の比較などが書けます。
文のところには、代入文や print文などが書けます。

if文はしばしば数行を使って記述します。

例を示します。
 {{{
 if ( tate > 20 ) {
     wa = tate + 10;
     sa = tate - 30;
 }
 }}}
書き方と対応させて見ましょう。
丸で囲まれた部分に対応する''' if ( ) { } '''の位置を確認してください。
 . '''条件'''に対応するのは tate > 20 だと分りますね。
 . '''文'''に対応するのは wa=tate+10; と sa=tate-30; の２行です。

----
=== 条件文の実行 ===

if文の処理順序は次のようになります。

 . （１） 条件が成り立つか判定する
 . （２） 条件が成り立っているときだけ、{ } で挟まれた文を実行する。

条件が成り立たないときは、（２）では何も行われないことになります。

このようなプログラムがあったとします。
 {{{
 文１
 文２
 if ( 条件 ) {
     文３
     文４
 }
 文５
 }}}
このプログラムを流れ図であらわすと、次のようになります。
点線で囲んだ範囲が if文に対応する部分です。

 . {{attachment:jouken3.png}}
処理順序は
 . （１） 文１が実行されます。
 . （２） 文２が実行されます。
 . （３） 条件が成り立つか判定されます。
 . （４） 条件が成り立っているときだけ、文３、文４の順に実行されます。
 . （５） 文５が実行されます。
です。

----
=== 条件 ===

条件のところには、数値の比較などが記述できます。
他にも論理式を含め、いろいろな条件を記述できますが、この授業では２つの数値の比較のみを扱います。

数値とは、リテラルで表された数値、変数名が表す数値、それらを使った数式、関数などのことです。

２つの数値が、等しいか、等しくないか、大きいか、小さいかなどの比較ができます。

比較を表すには次の記号を使います。
 ||記号||意味||
 ||==||等しい||
 ||!=||等しくない||
 ||>||大きい||
 ||>=||大きいか等しい||
 ||<||小さい||
 ||<=||小さいか等しい||

等しいことの判定にはイクオール２つ、等しくないことの判定には！とイクオールです。注意してください。

 ||例||意味||
 ||maru == 12||maruの値が１２と等しい||
 ||hidari < migi||hidariがmigiより小さい||
 ||x + y >= 30||x+yの値が３０より大きいか等しい||

----
=== 書き方の例 ===

条件が成り立つときだけ実行される部分を、右にずらして書いています。
このように揃えて分りやすく書きましょう。
 {{{
 if ( tate > 20 ) {
     wa = tate + 10;
     sa = tate - 30;
 }
 }}}
print 文も使えます。
 {{{
 if ( tate == 20 ) {
     wa = tate + 10;
     print( '縦が２０です' );
 }
 }}}
条件が成り立つときだけ実行される部分が１文だけのときは、このように書くこともあります。
 {{{
 if ( tate <= 20 ) { wa = tate + 10; }
 }}}
条件が成り立つときだけ実行される部分が１文だけのときは、括弧を省略することもできます。今回は使いません。
 {{{
 if ( tate != 20 ) wa = tate + 10;
 }}}
----
=== 条件文の書き方（１） ===

if文の書き方は
 . {{attachment:jouken1.png}}
であり、処理の流れは図に示す通りです。
図では、いくつかの文をまとめて処理という箱で表しています。
条件が成り立つときだけ、処理の部分を実行します。
 . {{attachment:jouken5.png}}
この流れ図に対応するif文は次のように書きます。
 {{{
 if ( 条件 ) {
     処理
     
 }
 }}}
----
=== 条件文の書き方（２） ===

条件が成り立つときとそうでないときで、別の処理をさせたいことがあります。
流れ図で示すような場合です。
 . {{attachment:jouken6.png}}
条件が成り立つときは処理１を行い、そうでないときは処理２を行います。

この流れ図に対応するif文は else を使って次のように書きます。
 {{{
 if ( 条件 ) {
     処理１
 }
 else {
     処理２
 }
 }}}
処理と書いた部分は、文がいくつか並んだものです。
｛ と ｝ で挟まれた部分は、このように右にずらして書くと分りやすい。

elseを含むif文の構文図はこのようになります。

 . {{attachment:jouken4.png}}
----
=== 条件文の書き方（３） ===

if文の中の処理の部分には、代入文やprint文だけでなく、if文を書くこともできます。
そうすることで、いくつもの場合に分けた処理を行うことができます。

多くの場合に分けるときは、次のように考えます。
 . {{attachment:jouken7.png}}
条件１が成り立つときは、処理１を行い、<<BR>>
そうではなくて（条件１が成り立たなくて）条件２が成り立つときは、処理２を行い、<<BR>>
そうではなくて（条件１も条件２も成り立たなくて）条件３が成り立つときは、処理３を行い、<<BR>>
そうではない（条件１も条件２も条件３も成り立たない）ときは、処理４を行う。

この流れ図に対応するif文は次のように書きます。
 {{{
 if ( 条件１ ) {
     処理１
 }
 else if ( 条件２ ) {
     処理２
 }
 else if ( 条件３ ) {
     処理３
 }
 else {
     処理４
 }
 }}}
if文と流れ図が対応していることを、確認してください。
最初の条件は if で、２番目以降の条件は else if で記述します。
最後は else です。
----
=== 例題 ===
次の図で
haba を与えて、面積と周囲の長さを表示する関数 kao を作りなさい。
 . {{attachment:menseki13.png}}
プログラムのおよその形はこのようになりました。
３行目以下で計算し、変数 wa に面積を代入しています。
そのあとprint文を使って表示します。面積のみ示していますが、実際は他の表示も必要です。
値を返さないreturn文を使っています。値を返してもかまいません。
 {{{
 function kao ( haba ) {
     var ...
     ...
     wa = ...
     print ( '面積は', wa, 'です' );
     return;
 }
 }}}

'''面積の計算'''

面積を計算するには、四角や三角の部分に分けて部分ごとに面積を計算し合計します。
さらに２つの円の面積を計算して、これを引けば求まります。

関数の中でprintを行っているので、引数の値を変えて呼び出すことで結果が表示されます。
例えば
 {{{
 js> kao(9);
 幅 9 のとき
 面積は 111.80 です
 js> kao(10);
 幅 10 のとき
 面積は 125.66 です
 }}}
のようになります。

これらは正しく計算されているようですが、引数の値によっては正しく計算できない場合があります。

幅６のときを計算させてみると
 {{{
 js> kao(6)
 幅 6 のとき
 面積は 67.98 です
 }}}
と表示されますが、実際の形と比べてみると正しくないことが分ります。
 . {{attachment:menseki13b.png}}
円の半径が２ですから、幅が８より小さいときは範囲内に２つ並べることができず、はみ出してしまいます。
このような場合は、面積を求めることができません。

また幅が２０より大きくなるとアゴの三角形ができなくなり、この場合も面積は求まりません。

計算が正しく行えないときは、そのことを表示するようにしましょう。

if文を使って
 . 条件 haba < 8 が成り立つときだけ '幅が小さすぎます' が表示される
ようにします。
 {{{
 function kao ( haba ) {
     var ...
     ...
     wa = ...
     print ( '面積は', wa, 'です' );
     if ( haba < 8 ) { print( '幅が小さすぎます' ); }
     return;
 }
 }}}
条件 haba < 8 が成り立つときだけ、print( '幅が小さすぎます' ); が実行されます。
条件 haba < 8 が成り立たないときは、print( '幅が小さすぎます' ); は実行されません。

したがって、habaの値が 6 のように８より小さいときにはprintが行われ、
habaの値が 10 のように８より大きいときにはprintは行われません。

実行するとこのようになります。
 {{{
 js> kao(6);
 幅 6 のとき
 面積は 67.98 です
 幅が小さすぎます
 js> kao(10);
 幅 10 のとき
 面積は 125.66 です
 }}}
実際には、幅が小さすぎるときや大きすぎるときには
面積がを表示しないようにするのがよい。