Pages

Subscribe:

2011-09-23

PHPの練習~その1(九九の表を作る)

PHPの基礎はまだ少し続きますが、
このあたりで今まで覚えたことを復習も兼ねて例題を解いていこうと思います。
勉強中の方は内容を見る前に実践してみるといいかも?

今回やろうとしているのは以下の通りです。


for文を利用し、九九の表を作る

まずは九九の表を作ります。
いきなり1の段から9の段までやろうとすると大変なので
まずは大元となる1の段を作ることから始めます。

九九の1の段は「1×1」から「1×9」までの繰り返しです。
つまり、「×(かける)」の後の数字を繰り返しの対象とし、
増減式で1ずつ増やせば式を9個作ることが可能となります。
<?php
for($i = 1; $i <= 9; $i++){
    $ans = 1 * $i;
    echo $ans;
}
?>

…1の段だとあんまり掛け算の答えぽくなかったですね。
答えだけの表示だと九九っぽくないので、
「echo」の部分で文字列と変数を使い式と答え両方表示させることもできます。
<?php
for($i = 1; $i <= 9; $i++){
    $ans = 1 * $i;
    echo '1×'.$i.'='.$ans.'/';
}
?> 


次に、出来上がった1の段のfor文を使い、9の段まで表示できる表を作ります。
先ほどのfor文の処理の中にある、
「$ans = 1 * $i;」の1の部分を「2~9」に変えて同じ文を作れば、
表を完成させることができると考えられると思います。
もう一歩踏み込むと、それも繰り返しであると考えることができます。

つまり今まで「1」と決めていた部分も変数にして繰り返してしまえば良いのです。
ここで、登場するのが前々回の記事で説明をした入れ子の構造です。
繰り返しをさらに繰り返したいので、for文の処理の中にまたfor文を作ります。
<?php
for($a = 1; $a <=9; $a++){
    for($i = 1; $i <= 9; $i++){
        $ans = $a * $i;
        echo $a.'×'.$i.'='.$ans.'/';
    }
    echo '<br>';
}
?>
この場合、最初のfor文を新たなfor文でくるんだようになりました。
「段」にあたる部分を「$a」とし、
「$a」が「1~9」繰り返される間の処理に、
「$i」が「1~9」繰り返されて、さらに計算結果を表示するという形になっています。

外側のfor文の「$a」が「1」のときに内側のfor文の「$i」は「1~9」まで繰り返され、
式が9個できて表示された時点で内側は一度処理を抜け、
そこで改行が働いてから外側の処理も抜け、
同時に外側の処理の2回目に入っていきます。

ブラウザで確認すると、九九全てが表示されました!


作った九九の表をHTMLのテーブルタグと組み合わせる

九九の表示はできましたが、まだまだ表というには見づらい状態です。
テーブルタグを使って、見やすく表示させてみます。

問題になってくるのはどの部分をタグで囲めばいいかということです。
「<table></table>」はこの九九を全て包むものなので、
「<?php ?>」ごと囲んでしまえばいいというのはすぐに分かります。
今回見出しのようなセルはないので、
あとは「<tr>」と「<td>」をどこに入れるかを考えるだけです。

ここで注目したいのがテーブルの構造と九九の表の構造が似ていることです。
「<td>」は「<tr>」の中に書かれます。
一方、九九のプログラムは外側のfor文が1繰り返すごとに内側が9繰り返して
いました。
つまり1の段を表す「<tr>」の中に「<td>」が9個入っていて、
その「<tr>」も9個あるという構造です。
実際に書いてみたのが以下です。
<table border="1">
<?php
for($a = 1; $a <=9; $a++){
    echo '<tr>';
    for($i = 1; $i <= 9; $i++){
        $ans = $a * $i;
        echo '<td>'.$a.'×'.$i.'='.$ans.'</td>';
    }
    echo '</tr>';
}
?>
</table>
表にすることができました!

ただ普通、九九の表は段ごとに縦に並んでいるものです。
表示をさせる部分の「$a」と「$i」を入れ替えるとよくある九九の表の並びにすることができます。
今まで「$a」を「1(~9)の段」として説明してきたので、
少し混乱するかも知れませんが…
あくまでも「$a」は「$i」が9回繰り返される間は同じ数字で固定されるということです。
テーブルにする前にそれも踏まえると複雑になりそうだったので、
こういう形をとりました。
きつきつだったので余白もつけてみました。
だいぶ見栄えが良くなりましたね。


作ったテーブルのセルの背景色が交互に変わるようにする

いよいよ終わりに近づいてきました。
できた表をさらに装飾してみます。
最終的にはこうなる予定です。

色を付けるためにはcssも使えますが今回はHTML内でテーブルの「<td>」に
背景色を指定しようと思います。
先ほど作った表の「<td>」にそのまま背景色を付けると
全てのセルの色が同じになってしまいます。
何かの条件に対して色分けをしなくてはなりません。
つまりここではif文を使います。
if文で色のついたセルとそのままのセルを分けて表示するのです。

ではどのように条件を分ければよいでしょうか。
規則性のある数字の並びなので奇数・偶数で条件付けするのが
良さそうです。
「$ans」を基準にすると段によっては奇数がなかったりするものもあり、
難しそうなので、「$a」と「$i」が奇数か偶数かを判断させるとよさそうです。

奇数偶数を判断させる考え方は(前々回の記事)に書いてあるので
参考にしてみて下さい。

条件分岐をしたいのは表示に関する内容なので、
「<td>」をechoさせている部分を分ければいいと考えられます。
場所が決まったところで、実際にif文を入れて書いてみます。
<table border="1" cellpadding="5">
<?php
for($a = 1; $a <=9; $a++){
    echo '<tr>';
    for($i = 1; $i <= 9; $i++){
        $ans = $a * $i;
        if($i % 2 == 0){
            echo '<td bgcolor="#cccccc">'.$i.'×'.$a.'='.$ans.'</td>';
        }
        else{
            echo '<td>'.$i.'×'.$a.'='.$ans.'</td>';
        }
    }
    echo '</tr>';
}
?>
</table>

「$i」が偶数の列に色を付け、表示を分けることができました。
 ですが、これではまだ当初の予定には至らない状態です。
この状態からさらに色の付いている部分をひとつおきにしたいので、
if文の中の条件を増やします。
この場合、「$i」が偶数で、且つ「$a」も偶数である部分に色を付けたいので
演算子の中の論理演算子「&&」を利用します。
(演算子の記事参照)
if文の条件を以下のように変更します。
if($i % 2 == 0 && $a % 2 == 0) 

これと同じことを「$i」が奇数の列でもやりたいので、さらにif文の内容を追加します。
「&&」でつなげた文はそれぞれカッコでくくり、
さらにそのふたつのカッコを論理演算子の「||(または)」を利用してつなげます。
<table border="1" cellpadding="5"> 
<?php
for($a = 1; $a <=9; $a++){
    echo '<tr>';
    for($i = 1; $i <= 9; $i++){
        $ans = $a * $i;
        if(($i % 2 == 0 && $a % 2 == 0) || ($a % 2 == 1 && $i % 2 == 1)){
            echo '<td bgcolor="#cccccc">'.$i.'×'.$a.'='.$ans.'</td>';
        }
        else{
            echo '<td>'.$i.'×'.$a.'='.$ans.'</td>';
        }
    }
    echo '</tr>';
}
?>
</table> 
やっと完成しました!

ちなみにif文のなかで論理演算子「xor」を使うと条件をもっと短くまとめることができます。
if($a % 2 == 1 xor $i % 2 == 0)


思いのほか長くなってしまいました。
ここまでお付き合いいただいてありがとうございます。
変数を書き始めたころに比べて、ずいぶん長いプログラムを書くことができるように
なりました。
今までやってきたことの復習のようになったのではないかと思います。

答えを聞けば理解はできるけど、自分でそこにたどり着くのがとても難しいと
いうのが、始めてから今でも持っている実感です。
慣れるしかないみたいですが…
これで少しでも理解の助けになればと思います。

次回からまた基礎の続きをまとめていきます。

1 件のコメント:

Aztekium Bot さんのコメント...

掛け算表をマスター http://Aztekium.pl/Masuta

コメントを投稿