JavaScript - Repetition(Multiplication Table)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• kjs-array (JavaScript Library)
• Safari(Web browser)
• JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)(参考書籍)
• JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)(参考書籍)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 6(Repetition)、30(Multiplication Table)を取り組んでみる。

30(Multiplication Table)

コード(Emacs)

<div id="output0"></div>
<label for="base0">
  base number:
</label>
<select id="base0">
</select>
<div id="output1"></div>
<div id="output2"></div>

<script src="array.js"></script>
<script src="sample30.js"></script>

(function () {
    'use strict';
    var nums = range(13),
        div_output0 = document.querySelector('#output0'),
        select_base = document.querySelector('#base0'),
        div_output1 = document.querySelector('#output1'),        
        div_output2 = document.querySelector('#output2'),
        nl = '<br>',
        output0 = '',
        options = '',
        output2 = '',
        createTable;


    nums.forEach(function (i) {
        nums.forEach(function (j) {
            output0 += i + ' × ' + j + ' = ' + (i * j) + nl;
        });
    });
    div_output0.innerHTML = output0 + nl;

    nums.forEach(function (i) {
        options += '<option>' +  i + '</option>';
    });
    select_base.innerHTML = options;

    createTable = function () {
        var base = parseInt(select_base.value, 10),
            output = '';
        
        nums.forEach(function (n) {
            output += base + ' × ' + n + ' = ' + (base * n) + nl;
        });
        div_output1.innerHTML = output + nl;
    };
    createTable();
    select_base.onchange = createTable;

    output2 = '<table border="1" style="text-align:center"><tr><th></th><th>' +
        nums.join('</th><th>') + '</th></tr>';
    nums.forEach(function (i) {
        output2 += '<tr><th>' + i + '</th>';
        nums.forEach(function (j) {
            output2 += '<td>' + (i * j) + '</td>';
        });
        output2 += '</tr>';
    });
    output2 += '</table>';

    div_output2.innerHTML = output2;
}());

base number: