2-4 九九表示プログラムを作る 作る

　それでは作っていきます。

一の段を作る

　前回のループのところの例と一の段が似ていると気づいてもらえたでしょうか？

// 一の段表示プログラム
var kakeru = 1;                                      // 1から
while( kakeru <= 9) {                             // 9までをかける
    textarea1.value += ' ' + 1 * kakeru;   // 1 * 1 〜 1 * 9を表示する
    kakeru = kakeru + 1;                         // 次に進める
}

　一の段が表示できるようになりました。
　ここまで細かく入れる必要はありませんが、ソースコードには適宜コメントを入れて下さい。他人が見ることがあるかもしれないということもありますが、自分でも何考えてたか忘れることってけっこうあります。

2〜9の段を表示

　段を増やすには、ループを追加します。ループの中にループを入れる「ネスト」にします。

// 九九表示プログラム（見栄え未実装）
var dan = 1;           // 1の段から
while(dan <= 9){    // 9の段まで（ループ１）
    var kakeru = 1;  // かける数。1から
    while(kakeru <= 9 ){  // 9まで（ループ２）
        textarea1.value += ' ' + dan * kakeru;    // 表示する
        kakeru += 1  // かける数をひとつ進める
    }
    textarea1.value += '\n'; // 改行する
    dan = dan + 1;  // 段をひとつ進める
}

整形する

　今回の仕様は3桁の固定長とすることとしました。「文字列操作」を行なって、全て3桁に「パディング」するようにします。
　文字列操作は人間だと直感的にわかるのですが、プログラムで実現しようと思うとけっこうめんどくさいです。「javascript パディング」などで検索して、やり方を調べます。
　調べた結果、以下のやり方が簡単そうでした。

1. パディングしたい文字にスペースをつけてしまう（「1」→「 1」、「81」→「 81」）
2. 「 81」の場合、4桁になってしまっているので、右から3桁にする

// 九九表示プログラム
var dan = 1;           // 1の段から
while(dan <= 9){    // 9の段まで（ループ１）
    var kakeru = 1;  // かける数。1から
    while(kakeru <= 9 ){  // 9まで（ループ２）
        var kotae = '  ' + dan * kakeru;                   // スペースをつける
        textarea1.value += kotae.slice(-3);            // 表示する。右から3桁を取得する
        kakeru += 1  // かける数をひとつ進める
    }
    textarea1.value += '\n'; // 改行する
    dan = dan + 1;  // 段をひとつ進める
}