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つの言語を行き来しました。

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

そんじゃまた。

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


Javascriptで電卓を作ってみた。ソース付き。” への11件のコメント

  1. 現況だと number Key > +/- Key > number Keyと打つと、変な値が入ってしまします。例えば、 2 > +/- で-2となり、その後にユーザーが3を打つと、私の所では何故か -17 が表示されていまいます。これは、
    m.minus = function()で、
    {
    isInput = false; //←追加
    current = -current;
    }
    とする事で回避で来ました。

    例えば-3を先に打ち込みたいときに、最初-が表示されない(計算などの結果は正しい)のは、何とか解消出来ないでしょうか?

    • おぉ、本当ですね、意図しない値になりました。
      ご指摘ありがとうございます!
      修正いたします!

      -3を-, 3 の順に入力することを想定されていますか?
      もしそうだと、内部的に 0 - 3 と同じ入力なので、区別ができません。
      区別するために、もう1個ボタンを増やすか、オールクリアの直後だけ、-3にするとか考えられますが、+/-ボタンがあるので追加をするメリットがありません。

      • バグっていましたが、-3を入力するときは、3 , +/- の順で入力してください。

        • 付け焼き刃で修正しました。
          isInput = false; //←追加
          は意図していない動作になります。

          – ,9, 1 と入力すると、 -91 になるようにしたかったのです。
          currentがプラスのときとマイナスのときで場合分けをしました。

  2. m.calc()の使い方が興味深いです。モデルの方では、この部分が実はキモなのですね。

  3. ピンバック: プログラマになるにはどうすればいいですか? | ヤマヤタケシのブログ

コメントを残す

メールアドレスが公開されることはありません。