参考にされている教材が非常に古そうに見えるので,一度こちらに目を通されることをおすすめします.JavaScriptは最近特に変遷の激しい言語なので,5年以上前の情報は全く役にたたないと考えてもいいぐらいです.
というわけで,現代的な書き方に直します.
(HTML5では文字コードとタイトルの指定は必須だが,<html>
<head>
<body>
の省略は可能)
html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>Example</title>
4<div id="content"></div>
5<script>
6'use strict';
7addEventListener('DOMContentLoaded', function () { // HTML構造を読み込み終わった時に実行
8 var content = document.querySelector('#content'); // id="content"のdivを取得
9 function write(text) {
10 content.insertAdjacentHTML('beforeend', text); // contentの末尾にテキストを追加
11 }
12 /* ここに上で作ったwrite関数を使って処理を書く */
13});
14</script>
さて,既存のコードの問題点ですが…
- そもそも1行の個数が20になっていない(21になっている)
- 内部ループでiに対して操作を加えており,行の頭の数字に対しては外部ループでの加算処理も含めると実質40が加算されている
- iが10000になったときにも加算処理が行われるので10000を超えてしまう
など,直すべきところがかなり多いです.一例としては以下のようになるでしょうか.
html
1<!DOCTYPE html>
2<meta charset="UTF-8">
3<title>Example</title>
4<div id="content"></div>
5<script>
6'use strict';
7addEventListener('DOMContentLoaded', function () {
8 var content = document.querySelector('#content');
9 function write(text) {
10 content.insertAdjacentHTML('beforeend', text);
11 }
12 var from = 1000;
13 var to = 10000;
14 var span = 20;
15 for (var i = 0; i <= (to - from) / span; ++i) {
16 write(' ' + (from + i * span));
17 if (i % span === span - 1) {
18 write('<br>');
19 }
20 }
21});
22</script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/09 04:46
2016/06/09 08:09