各機能を実装しよう。

ここまでくると幾らか慣れてきたと思います。カタチもちょっとだけ見えてきたと思います。ここから先は入り口と出口さえ合っていれば中はどうでもよくて、やり方もいろいろありますからこれまでのようにそのものな答えはありません。もちろん最適解はあると思いますが、それも考え方次第という面もあります。自由な発想で自由に組み込んでいきましょう。

あるボタンを押されたらどういう処理をしてどういう反応をすればいいのか。そんな事を考えながら作っていくといいですよ、きっと。

数字を受け付けるinputValue(value)

数字ボタンが押されると実行されるinputValue()にはどんな機能が求められるでしょうか。

  • 複数桁の数値への入力には数字が続けて入力される。
  • 小数点が入力された場合は小数として扱う。実際に渡されるのはdecという文字列なので変換する。
  • 演算子などの後に入力された場合は新しい数値として扱う。
  • 結果を画面に出力する。

Note

入力した数字は数値として保持するのではなく文字列として保持しておき、計算する前に数値に変換する方が複数桁、小数への対応が簡単です。

数値(num)を文字列に変換する場合は:

String(num);

文字列(str)を数値に変換する場合は:

Number(str);

を用います。

一時保存と画面を出力するpush(value)

一時領域に値を保存するのと画面へ出力する処理は入力時にも必要ですし、計算結果を表示する際にも必要なので一つのメソッドにしておきます。

  • 渡された値をstackに保持する。
  • 画面(ID属性screenのspan要素)に出力する。

Note

$('#screen span').text('文字列');

とすると#screenの文字列を変更できます。もちろん他にも方法はあります。

演算子を受け付けるinputOperator(newOperator)

演算子ボタンは押された状況により動作も変わります。

  • 数値を入力中に押された場合は入力中だった数値が確定され保持される。
  • 先に演算子が入力されていない場合は画面表示は変わらない。
  • 先に演算子が入力されていた場合はそれらの計算結果を表示し、入力されていた演算子と差し替える。

Note

演算子は私が勝手に決めた代替文字列で渡ってきます。+や-のままにして、eval()でゴニョゴニョというやり方もあろうかと思いますが、eval()はevilなんです、嫌いなんです。

計算を行うcalculate()

保持している数値と演算子を使って四則演算を行います。

  • inputOperator()で受け付ける演算子は文字列による代替記号なので変換して計算する。
  • 計算結果をtotalに保持する。

Warning

0での除算は御法度です。念のため。

=を受け付けるequal()

計算を行って結果を表示します。ただし数値や演算子が入力されていないなど、条件に満たない場合は何もしません。

Warning

=を連続して入力する事で計算を継続する機能は今回対応しませんので、このタイミングで一旦演算子を消去してください。

Cを受け付けるclear()

入力中の数値や演算子を消去して未入力の状態にします。=とCの機能はシンプルですね。

メモリー計算を行うmCalculate(mOperator)

メモリー計算を行います。メモリー計算とは別の保存領域へ任意のタイミングで加算や減算を行う仕組みです。例えば単価と個数がわかっている複数の商品の総価格を計算するみたいな事に使えます。

  • m+が押されたら表示中の数値をmTotalに加算する。
  • m-が押されたら表示中の数値をmTotalから減算する。
  • mrが押されたらmTotalの値を表示する。
  • mcが押されたらmTotalの値を0に戻す。

これで一通り動作するはずですが、実は入力するタイミングや順番によって気を付けねばならない場合が他にもあります。いろいろと試しておかしい挙動がないか確かめてみましょう。テストやデバッグも楽しみの一つですよ :-)