JavaScriptで電卓を作ってみた。

JavaScriptで簡単な電卓を作ってみました。

主な仕様

四則演算の電卓。
連続して計算できるようにしたい。

本当にシンプルな電卓です。

HTML & CSS

Html

<!DOCTYPE html><htmllang="ja"><head><metacharset="UFT-8"><title>電卓</title><linkrel="stylesheet"href="main.css"><script src="jquery-3.5.1.min.js"></script></head><body><pclass="show_number">0</p><divclass="number_button"><table><tr><td><buttonclass="number"id="Seven">7</button></td><td><buttonclass="number"id="Eight">8</button></td><td><buttonclass="number"id="Nine">9</button></td><td><buttonclass="operator"id="Plus">+</button></td></tr><tr><td><buttonclass="number"id="Four">4</button></td><td><buttonclass="number"id="Five">5</button></td><td><buttonclass="number"id="Six">6</button></td><td><buttonclass="operator"id="minus">-</button></td></tr><tr><td><buttonclass="number"id="One">1</button></td><td><buttonclass="number"id="Two">2</button></td><td><buttonclass="number"id="Three">3</button></td><td><buttonclass="operator"id="Asterisk">＊</button></td></tr><tr><td><buttonclass="number"id="Zero">0</button></td><td><buttonclass="number"id="DoubleZero">00</button></td><td><buttonclass="number"id="Point">.</button></td><td><buttonclass="operator"id="Slash">/</button></td></tr><tr><tdcolspan="2"><buttonclass="Allclear"id="AllClear">AC</button></td><tdcolspan="2"><buttonclass="Equal"id="Equal">=</button></td></tr></table></div><script type="text/javascript"src="main.js"charset="UTF-8"></script></body></html>

jQueryを使用。
電卓のボタンはtableで配置して整理しやすくしてます。

CSS

.show_number{background-color:black;color:white;width:300px;height:30px;text-align:right;font-weight:bold;margin-bottom:-1px;}.number_button{width:300px;}table{width:100%;}td{width:25%;}button{width:100%;font:16pxbold;}

cssは簡単に、ボタンの体裁を整えるだけ。

JavaScriptで計算

JavaScript

functiongetDotPosition(float){letdotPosition=0;float=String(float);if(float.lastIndexOf('.')!=-1){dotPosition=(float.length-1)-float.lastIndexOf('.');}returndotPosition;}functionCalc(num1,num2,ope){letresult=0;letdotPosition1=getDotPosition(num1);letdotPosition2=getDotPosition(num2);letmax=Math.max(dotPosition1,dotPosition2);num1=parseFloat(num1);num2=parseFloat(num2);letvalue1=parseInt((num1.toFixed(max)+'').replace('.',''));letvalue2=parseInt((num2.toFixed(max)+'').replace('.',''));if(ope==3){if(max==1){max=max+1;}else{max=max*max;}}letpower=Math.pow(10,max);if(ope==1){result=(value1+value2)/power;}elseif(ope==2){result=(value1-value2)/power;}elseif(ope==3){result=(value1*value2)/power;}elseif(ope==4){result=(value1/value2);}returnresult}letnum1=0;letnum2=0;letope=0;letpoint=0;letshow_text=0;letnumber=0;letstate=0;letnegative=0;$(document).ready(function(){$("button").click(function(){letclasses=$(this).attr("class");letid=$(this).attr("id");lettext=$(this).text();if(id=="AllClear"){$(".show_number").text(0);num1=0;num2=0;ope=0;point=0;show_text=0;number=0;}elseif(id=="minus"&&show_text==0){negative=1;}elseif(classes=="number"){state=0;if(id=="Point"){if(point==0){if(show_text==0){number=0+text;}else{number=$(".show_number").text()+text;}point=1;show_text=1;$(".show_number").text(number);}}elseif(id=="DoubleZero"){if(show_text!=0){number=$(".show_number").text()+text;$(".show_number").text(number);}}elseif(id=="Zero"){if(show_text!=0){number=$(".show_number").text()+text;$(".show_number").text(number);}}else{if(show_text==0){if(negative==1){text=-1*text;negative=0;}$(".show_number").text(text);show_text=1;}else{number=$(".show_number").text()+text;$(".show_number").text(number);}}}elseif(classes=="operator"){if(num1==0){num1=$(".show_number").text();}elseif(num1!=0){num2=$(".show_number").text();}if(num2!=0&&state!=1){result=Calc(num1,num2,ope);num1=result;$(".show_number").text(num1);}if(id=="Plus"){ope=1;state=1;}elseif(id=="minus"){ope=2;state=1;}elseif(id=="Asterisk"){ope=3;state=1;}elseif(id=="Slash"){ope=4;state=1;}show_text=0;point=0}elseif(id=="Equal"){if(num1!=0){num2=$(".show_number").text();}result=Calc(num1,num2,ope);$(".show_number").text(result);show_text=0;point=0;ope=0;num1=0;num2=0;}});});

小数点の計算に誤差が出るのでgetDotPosition関数で調整。
Calc関数に数字１、数字２、演算を引数にとって計算させる。
- 計算中に小数点を処理しています。（後述）
global変数を用意。
- num1, num2: 数字２つ分
- ope: 演算
- point: 小数点の入力のFlag
- show_text: 表示が0かどうかのフラグ
- number: show_textへ反映させる変数
- state:　演算子Flag
- negative: マイナス処理のFlag
ボタンが押された時に、
- 押されたボタンのclass, id, 表示を取得。
- ACが押されたら全てを初期化。
- 計算の最初にマイナスが押されたら、negativeフラグを立てる。
- 小数点が押された時、表示の後に続けて小数点を入力し、pointフラグを立てる。
  - pointフラグが立っている時は小数点の入力を受け付けないようにする。
- 0または00が押された時、電卓の表示が0じゃなければ、その後に入力を足す。
  - 表示が0の時に00を続けて入力できないようにする。
- それ以外の数字ボタンの時、
  - 表示が0なら押した数字を表示。
    - その時negativeフラグが立っていたら、マイナスの数値で表示。
  - 表示が0じゃなければ、その後に数字を表示。表示フラグを立てる。
- 演算子の時、
  - num1が登録されてなければ、表示の数字をnum1に登録。
  - num1が登録されていれば、表示の数字をnum2に登録。
  - num2の登録があり、演算子フラグがなければ、
    - Calc関数で計算処理をし、結果をnum1に代入して、電卓に表示。
    - この処理で計算を続けて行うことができるようになる。
  - 各演算子に割り当てた変数をopeに代入して、演算子フラグを立てる。
    - 演算子フラグにより、演算子を間違って押しても、計算処理をせずに押しなおすことができる。
  - 表示フラグを0に、小数点フラグを0に戻す。
- =ボタンの時、
  - num1が登録されていれば、num2に表示を代入する。
  - Calc関数で計算をする。
  - 電卓上に結果を表示。
  - 各フラグを戻す。

小数点の計算について

小数点の計算は誤差が出ることがあるので、その処理をする必要があります。
ライブラリを導入する方法もあるようですが、今回はライブラリは使用してません。
数値を文字列に直して、小数点の位置をlastIndexOf関数で確認していきます。（String, getDotPosition)
小数点の位置が分かったら、小数点を解消するために桁数を記録しておきます。(Calc関数dotPosition1, dotPosition２, max)
数値に直した後 (parseFloat)、小数点を解消します（replace)。
桁数を別に置いておいて (power)、計算後に小数点の処理をします。

この処理をしておくと、誤差がなくなり正しく計算できます。