1.5 画面表示

（2024年2月10日）TeX画像をMathJaxに置き換え。練習問題を追加。

1. サンプル・プログラム
2. 計算結果を画面に表示
3. 計算式と計算結果を画面に表示
4. 練習問題
5. コラム：ロジックとデザインの分離

ダウンロード

output1.html を実行

  42: <!-- 結果を表示する（HTML部） -->
  43: <span id="from"></span>から<span id="to"></span>の和は<span id="sum"></span>です．
  44: 

まずHTMLの部分――<span>タグを使って、開始値（idがfrom）、終了値（idがto）、計算結果（idがsum）の3つを用意する。

   9: <script>
  10: //ページのロード時に実行
  11: window.onload = function() {
  12:     //変数宣言
  13:     let a = 1;      //開始値
  14:     let b = 10;     //終了値
  15:     let n = 0;      //合計値
  16: 
  17:     //aからbまでの整数の合計を求める
  18:     for (let i = a; i <= b; i++) {
  19:         n += i;
  20:     }
  21: 
  22:     //結果を表示する
  23:     document.getElementById('from').innerHTML = a;
  24:     document.getElementById('to').innerHTML   = b;
  25:     document.getElementById('sum').innerHTML  = n;
  26: };
  27: </script>

次にJavaScriptの部分――基本的な部分は前回作ったプログラムと同じだが、"window.onload = function() {...}" で始まるところが大きく異なる。
これは、このページ、すなわち "output1.html" をブラウザがロードするとき、ブレース {...} で囲まれたブロックを実行しろという命令である。詳しくはイベントのところで説明する。いまは定型文だと考えていただきたい。

"document.getElementById('exp').innerHTML = s" は、HTMLでidがexpであるタグの要素として変数sの内容を代入するという命令である。これは "<span id="exp">[変数sの内容]</span>" と書くのと同じ意味になる。
なお、 \( n = n + i \) を \( n\ +\!\!=\ i \) に縮めている。両者は同じ意味である。これもバグを発見しやすくするために、式を短くする例である。

  29: <style>
  30: #from {
  31:     color: blue;
  32: }
  33: #to {
  34:     color: green;
  35: }
  36: #sum {
  37:     color: red;
  38:     font-weight: bold;
  39: }
  40: </style>

おまけとしてスタイルシートも用意した。<span>タグのidで示される場所に色を付ける。

このプログラムは、ブラウザがこのファイルをロードするとき、1から10までの整数の和を計算し、開始値、終了値、計算結果をそれぞれ、<span>タグのidで示される場所に表示する――という働きをする。

  42: <!-- 結果を表示する（HTML部） -->
  43: <span id="from"></span>から<span id="to"></span>の和は<span id="sum"></span>です．
  44: 

まずHTMLの部分――<span>タグを使って、計算式（idがexp）、計算結果（idがsum）の2つを用意する。

output2.html を実行

   9: <script>
  10: //ページのロード時に実行
  11: window.onload = function() {
  12:     //変数宣言
  13:     let a = 1;      //開始値
  14:     let b = 10;     //終了値
  15:     let n = 0;      //合計値
  16:     let s = '';     //計算式
  17: 
  18:     //aからbまでの整数の合計を求める
  19:     for (let i = a; i <= b; i++) {
  20:         n += i;
  21:         s += i.toString();
  22:         //iが終了値でなければ計算式に＋を追加する
  23:         if (i != b) {
  24:             s += '＋';
  25:         }
  26:     }
  27: 
  28:     //結果を表示する
  29:     document.getElementById('exp').innerHTML = s;
  30:     document.getElementById('sum').innerHTML = n;
  31: };
  32: </script>

次にJavaScriptの部分――繰り返し計算する式を変数sに代入する。
式は、最初に作ったプログラム "hello, world" のメッセージと同じで、文字列（テキスト）として扱う。そこで、変数iの値を文字列に変換する必要がある。これを行うのが i.toString() である。追い追い説明するが、ここでは、toString()はピリオドの左にある変数を文字列に変換する命令だと覚えておいてほしい。
文字列に対する s += は足し算ではなく、文字列sの末尾に右辺の文字列を加えていくという作用となる。

"if (i != b) {...}" は、 \( i\neq b \)（プログラムではノットイコールを != と書く）のとき、ブロック内を実行するという命令（if文）である。コメントに書いたとおり、iが終了値でなければ計算式に＋を追加する働きをする。

b = 100 でも b = 1000 でも、瞬時に長～い式とともに計算結果を表示する。forループの面目躍如といったところであろう。

プログラムへの入出力がコマンドラインから1行ずつ行われていた時代からフルスクリーンになったとき、プログラム作りに要求されたのがロジックとデザインを分離することだった。

ロジックは、上述の例で言えばJavaScriptの部分に当たる。計算や制御を司る部分だ。デザインは、HTMLとスタイルシートである。
ロジックとデザインの分離を求める背景には、最もらしい理由がいくつかあるが、個人的に言わせていただくと、一定水準以上のロジックとデザインを1人で書ける人間は存在しないということに尽きる。つまり、仕事でWebアプリケーションを作るなら、ロジックを書く人（狭義のプラグラマ）とデザインを書く人（Webデザイナ）の、少なくとも2人は必要で、分業制にしないとプログラムの品質を担保できない。

HTMLでは、JavaScriptとスタイルシートを別ファイルに分離することができる。<script src="[JavaScriptファイル名]"> と <link href="[CSSファイル名]" rel="stylesheet"> である。
ソース管理ツールが無くても、各々が担当するファイルをあらかじめ分離しておき、最後にHTMLでリンクすればいい。

ちなみに、私はロジックはともかく、デザインセンスが皆無である。このシリーズでは、入出力部分は極力、HTMLとスタイルシートに分離していくので、皆さんでデザインを改良していただきたい😓