ウェブアプリの開発(1)
電卓アプリ(昭和な電卓のシミュレータ)を対象として,
ウェブアプリ開発を漸進的に実施してみよう.
単なる「作成(いきなり完成)」ではなく
「開発(徐々に育成,完成度向上)」です.
授業2回で完成予定.
昭和な電卓は,現代的なもの(スマホやPCの電卓アプリ等)とは機能が大幅に異なる.
興味があれば「レトロ電卓」などで検索.
作業方法
- 作業用ディレクトリの準備:
- ダウンロード:電卓アプリの試作版
- ウェブページの表示:
$ firefox 〇〇.html &
- コンソール(ウェブ開発ツール)の表示:
ブラウザ内で [Ctrl]+[Shift]+[K]キー,等.
- ウェブページの編集:
$ 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 を元にして,
四則演算等の機能を追加し,
電卓アプリとしての完成度を向上させる予定.
参考資料
教科書:
とほほのWWW入門