Javascriptで電卓を作ってみた。ソース付き。

こんにちは。ヤマヤタケシです。
プログラマになるにはどうすればいいですか?でプログラマになる第一歩は、
電卓を作るべし!
わからないなら写経すべし!
言語はとりあえずJavascriptがいい!
と、言いたい放題やりました。

しかし!
よくよく考えてみると、俺自身電卓を作った事がなかったのです!
プログラムはゲームをベーマガ(雑誌)で写経して覚えたので・・・・。

しかし、読者にやったこともない事を勧めるのは無責任です。
やってみました。Javascript で電卓を作りました!
車輪の再発明でございます。

約5時間かかりました・・・。
2時間ぐらいはスタイルタグをいじっていました。
見た目の調整がクソめんどいですね。
height=100%の指定がどうにもうまく行かなかったのです。
結局、「高さが決まらないタグが親に含まれていると、autoになる。」ことが原因でした。
スタイルシートまで勉強しちゃいました!

さて、これが作った電卓です。
ソースはこの記事の最後にあります。

小数点に誤差が出ます。
これは、2進数をベースにしたコンピュータの宿命なので、そのまま残しました。
なんとかするときは、整数ベースでやるとか、Math.roundするとか、いろいろあるんでしょうが、学習用です。
そのままにしました。

ソースは index.html にまとめました。
普通は3ファイルに分割します。
style.cssとdentaku.jsとindex.html の3つです。
今回は写経してもらうことを想定したので1つです。

プログラムは、M-VCを意識しています。
ModelとView-Contrtolで分離しています。
Modelは論理、ロジック、コア、仕組み、概念です。
Viewは見た目です。
Controlは操作です。
このように分けると仕様変更に強くなります。
Model が独立しているとUIに依存しないテストができます。
単体の自動テストなどを取り入れる場合にとても役立ちます。
View-ControlはプラットフォームのAPIに依存しますが、Model は 純粋な Javascript のみになります。
そのため、移植するときにModelはそのままいけます。

ソースについて少し説明します。
createDentakuModel()で返すインスタンスが電卓の Model です。
createView()が返すのがView-Controlです。

Javascript は高級な言語なので、C言語にはない機能がたくさんありますね。
まあ、言語間の機能の比較などは1つの言語がある程度学習が進んでからで良いと思います。
最近は、いろんな言語を時と場合によって使い分けるようになっています。
この例を作るだけなのに、html, css, javascriptの3つの言語を行き来しました。

さて、ソースをどーんと貼ります。

そんじゃまた。

軽い気持ちで有名になりたいのでクリックをお願いします!