Webページに魔法陣
シツコク魔法陣を作っております（笑）
今回は，Javascript 編でございます
JavaScript の構文は，Ｃ言語のものとよく似ているので，コーディングには問題ないでしょう
このページ内に table を使って魔法陣を表示します
JavaScript の学びなおしは，オブジェクト指向を意識することと，フレームワーク特に jQuery の利用をメインにしていきます
加えて，Webページを動的に表示するためには，DOM(Document Object Model) の構造と操作を明確にしていく必要がありますから，このことはプログラミング全体を通じてやらなければなりません
さて，実際に作った魔法陣です
デフォルトでは３次の魔法陣を表示しています
セレクトボックスで次数を選択すると，選択に応じた次数の魔法陣に変わります
html と JavaScript
魔法陣を表示する部分の html ソースと JavaScript を下に示します
html
<div>
<p><label for="dimSelect">魔法陣の次数の選択：</label>
<select id="dimSelect" onchange="magicSquare();" style="width:100px; text-align:center;">
<option value=3>3 X 3</option>
<option value=5>5 X 5</option>
<option value=7>7 X 7</option>
<option value=9>9 X 9</option>
<option value=11>11 X 11</option>
</select>
</p>
<div id="ms"></div>
</div>
JavaScript
<script type="text/javascript">
window.addEventListener('load', magicSquare());
function magicSquare() {
var dim = document.getElementById('dimSelect').value;
var i, j;
var tbl;
var a = new Array(dim);
for (i = 0; i < dim; i++) {
a[i] = new Array(dim);
for (j = 0; j < dim; j++) {
a[i][j] = 0;
}
}
i = dim - 1;
j = (dim - 1) / 2;
for (var num = 0; num < dim * dim; num++) {
a[i][j] = num + 1;
if (a[(i + 1) % dim][(j + 1) % dim] == 0) {
i = (i + 1) % dim;
j = (j + 1) % dim;
} else {
i = i - 1;
}
}
tbl = '<table border="1" cellpadding="8" style="margin-left:4em;"><tbody>';
for (i = 0; i > dim; i++) {
tbl += '<tr>';
for (j = 0; j < dim; j++) {
tbl += '<td align="center">' + a[i][j] + '</td>';
}
tbl += '</td>';
}
tbl += '</tbody></table>'
document.getElementById('ms').innerHTML = tbl;
}
</script>