サンプル・プログラム
output1.html
42: <!-- 結果を表示する（HTML部） -->
43: <span id="from"></span>から<span id="to"></span>の和は<span id="sum"></span>です。
44:
output1.html
22: <script>
23: //ページのロード時に実行
24: window.onload = function() {
25: //変数宣言
26: let a = 1; //開始値
27: let b = 10; //終了値
28: let n = 0; //合計値
29:
30: //aからbまでの整数の合計を求める
31: for (let i = a; i <= b; i++) {
32: n += i;
33: }
34:
35: //結果を表示する
36: document.getElementById('from').innerHTML = a;
37: document.getElementById('to').innerHTML = b;
38: document.getElementById('sum').innerHTML = n;
39: };
40: </script>
これは、このページ、すなわち "output1.html" をブラウザがロードするとき、ブレース {...} で囲まれたブロックを実行しろという命令である。詳しくは「5.2 プロパティ、メソッド、イベントハンドラ」で説明する。いまは定型文だと考えていただきたい。
"document.getElementById('sum').innerHTML = n" は、HTMLでidがsumであるタグの要素として変数nの内容を代入するという命令である。これは "<span id="sum">[変数nの内容]</span>" と書くのと同じ意味になる。
なお、 $ n = n + i $ を $ n\ +\!\!=\ i $ に縮めている。両者は同じ意味である。これもバグを発見しやすくするために、式を短くする例である。
output1.html
7: <style>
8: #from {
9: color: blue;
10: }
11: #to {
12: color: green;
13: }
14: #sum {
15: color: red;
16: font-weight: bold;
17: }
18: </style>
計算式と計算結果を画面に表示
output2.html
44: <!-- 結果を表示する（HTML部） -->
45: <span id="exp"></span>＝<span id="sum"></span>
46:
output2.html
19: <script>
20: //ページのロード時に実行
21: window.onload = function() {
22: //変数宣言
23: let a = 1; //開始値
24: let b = 10; //終了値
25: let n = 0; //合計値
26: let s = ''; //計算式
27:
28: //aからbまでの整数の合計を求める
29: for (let i = a; i <= b; i++) {
30: n += i;
31: s += i.toString();
32: //iが終了値でなければ計算式に＋を追加する
33: if (i !== b) {
34: s += '＋';
35: }
36: }
37:
38: //結果を表示する
39: document.getElementById('exp').innerHTML = s;
40: document.getElementById('sum').innerHTML = n;
41: };
42: </script>
式は、最初に作ったプログラム "hello.html" が表示した "hello, world" というメッセージと同じで、文字列（テキスト）として扱う。そこで、変数iの値を文字列に変換する必要がある。これを行うのが i.toString() である。追い追い説明するが、ここでは、toString()はピリオドの左にある変数を文字列に変換する命令だと覚えておいてほしい。
文字列に対する s += は足し算ではなく、文字列sの末尾に右辺の文字列を加えていくという作用となる。
"if (i !== b) {...}" は、 $ i\neq b $（プログラムではノットイコールを !== と書く。詳しくは「2.6 比較演算子と論理演算子」で説明する）のとき、ブロック内を実行するという命令（if文）である。コメントに書いたとおり、iが終了値でなければ計算式に＋を追加する働きをする。
b = 100 でも b = 1000 でも、瞬時に長～い式とともに計算結果を表示する。forループの面目躍如といったところであろう。
練習問題
コラム：ロジックとデザインの分離
ロジックは、上述の例で言えばJavaScriptの部分に当たる。計算や制御を司る部分だ。デザインは、HTMLとスタイルシートである。
ロジックとデザインの分離を求める背景には、もっともらしい理由がいくつかあるが、個人的に言わせていただくと、一定水準以上のロジックとデザインを1人で書ける人間は存在しないということに尽きる。つまり、仕事でWebアプリケーションを作るなら、ロジックを書く人（狭義のプログラマ）とデザインを書く人（Webデザイナ）の、少なくとも2人は必要で、分業制にしないとプログラムの品質を担保できない。
HTMLでは、JavaScriptとスタイルシートを別ファイルに分離することができる。<script src="[JavaScriptファイル名]"> と <link href="[CSSファイル名]" rel="stylesheet"> である。
ソース管理ツールが無くても、各々が担当するファイルをあらかじめ分離しておき、最後にHTMLでリンクすればいい。
ちなみに、私はロジックはともかく、デザインセンスが皆無である。このシリーズでは、入出力部分は極力、HTMLとスタイルシートに分離していくので、皆さんでデザインを改良していただきたい😓
計算と制御はJavaScriptで書き、表示はHTML、デザインはスタイルシートに分離する。