ウェブアプリの開発（１）

加算式電卓（昭和時代の原始的な電卓）を例として，ウェブアプリ開発を少しだけ体験してみよう．

単なる「作成（いきなり完成）」ではなく「開発（徐々に育成，完成度向上）」です．

加算式電卓を進化させれば，四則演算電卓も実現可能です．しかし本年度は，授業内では第１部だけを実施．第２部については後日，紹介だけに留めます．

昭和な電卓は，現代的なもの（スマホやPCの電卓アプリ等）とは機能が大幅に異なる．興味があれば「電卓昭和」などで検索．

作業方法

作業用ディレクトリの準備：
```
$ mkdir WSL/ap/calc
$ cd !$
```
ダウンロード：電卓アプリの試作版
- calc.html - 外観と置数機能
- reg.html - レジスタと加算器
- style.css - CSS
- acc.svg - 電卓（置数・加算機能）の状態遷移図
- fxpt.svg - 固定小数点形式入力の状態遷移図
ウェブページの表示：
- 端末で...
```
$ ブラウザ 〇〇.html  &
```
  ブラウザは，firefox，firefox.exe，chrome.exe，等．
- ブラウザで「ファイル→開く」等．
- エクスプローラで開く．
コンソール（ウェブ開発ツール）の表示：
- Firefox の場合，[Ctrl]+[Shift]+[K]キー，等．
- Chrome の場合，[Ctrl]+[Shift]+[J]キー，等．
ソースコードの表示：[Ctrl]+[U]キー，等．
ウェブページの編集：
```
$ エディタ 〇〇.html  &
```
エディタは，gedit や notepad.exe 等．（WSL の場合，gedit では日本語を入力できませんでした...）

作業内容

まずは，calc.html を実行・分析・理解せよ．
次に，reg.html を実行・分析・理解し，Registerクラス内に，固定小数点形式数字列の入力メソッドread() の完全版を作成せよ．
reg.html の状態遷移図fxpt.svg と calc.html の controller部の JS の状態遷移処理を参考にしよう．状態st と文字k に関する二重の switch 文になるでしょう．
最後に，calc.html と reg.html とを統合・改変し，加算式電卓アプリ acc.html を作成せよ．
ブラウザ上の数字キーで置数（dat に入力し，dat の数値を表示），「＝」キーで加算（dat の数値を acc に加算し，acc の数値を表示）．状態遷移図 acc.svg の内容変更も必要だろう．

次回は，今回の成果物 acc.html を元にして，四則演算等の機能を追加し，電卓アプリとしての完成度を向上させる予定．

ただし，上述の通り，本年度の授業時間には実施しません．