JS 電卓の作り方について

Question

http://cya.sakura.ne.jp/java/calc.htm

こちらを見ながらJSを勉強しています。

var kigou = 1; //合計と入力値の演算子　0:数字 1:演算子

電卓の動き方として、
①数字ボタンを押す
②numに入る
③document.myForm.myLine.valueで表示する

となるのがわかるのですが、var kigou = 1;がない場合は①をしても③で表示がされませんでした。
これは何故なのでしょうか？

<form name="myForm">
    <p>
      <!-- 結果表示 -->
      <input type="text" size="12" name="myLine" value="0">
    </p>

    <ul>
      <li><button type="button" value="AC" onclick="myC()">AC</button></li>
      <li><button type="button" value="+/-" onclick="mybtn()">+/-</button></li>
      <li><button type="button" value="%" onclick="mybtn('%')">%</button></li>
      <li><button type="button" value="/" onclick="mybtn('/')">÷</button></li>
    </ul>
    <ul>
      <li><button type="button" value="7" onclick="myValue(7)">7</button></li>
      <li><button type="button" value="8" onclick="myValue(8)">8</button></li>
      <li><button type="button" value="9" onclick="myValue(9)">9</button></li>
      <li><button type="button" value="*" onclick="mybtn('*')">×</button></li>
    </ul>
    <ul>
      <li><button type="button" value="4" onclick="myValue(4)">4</button></li>
      <li><button type="button" value="5" onclick="myValue(5)">5</button></li>
      <li><button type="button" value="6" onclick="myValue(6)">6</button></li>
      <li><button type="button" value="-" onclick="mybtn('-')">-</button></li>
    </ul>
    <ul>
      <li><button type="button" value="1" onclick="myValue(1)">1</button></li>
      <li><button type="button" value="2" onclick="myValue(2)">2</button></li>
      <li><button type="button" value="3" onclick="myValue(3)">3</button></li>
      <li><button type="button" value="+" onclick="mybtn('+')">+</button></li>
    </ul>
    <ul>
      <li><button type="button" value="0" onclick="myValue(0)">0</button></li>
      <li><button type="button" value="1" onclick="myValue(1)">1</button></li>
      <li><button type="button" value="." onclick="myValue('.')">.</button></li>
      <li><button type="button" value="=" onclick="mybtn('=')">=</button></li>
    </ul>
  </form>

  <script>
    var ans = 0; //現在の合計値
    var num = ""; //現在入力している値
    var before = "+"; //一度前に入力したもの
    var kigou = 1; //合計と入力値の演算子　0:数字 1:演算子

    //値または小数点ボタンを押す
    function myValue(myData) { //myValueって関数をつくる
      kigou = 0;
      num += myData; //numに+1した
      document.myForm.myLine.value = num;
    };
   function mybtn(myData) { //mybtnって関数をつくる
      if (kigou === 0) {
        kigou = 1;
        myWork = ans + before + num;
        ans = eval(myWork);
        num = "";
        document.myForm.myLine.value = ans;
      };

      if (myData == "=") {
        num = 0;
        before = "+";
      } else {
        before = myData;
      }
    };
/*

    function myC() {
      ans = 0; //現在の合計値
      num = ""; //現在入力している値
      before = "+"; //一度前に入力したもの
      document.myForm.myLine.value = ans;
    };
*/
  </script>

Answer 1

一番初めに表示したときそれぞれの値が何であるかを
初期値という形で予め数字をセットしておくことで
誤操作をしてもエラーにならないようにすることが出来ます。

    var ans = 0; //現在の合計値
    var num = ""; //現在入力している値
    var before = "+"; //一度前に入力したもの
    var kigou = 1; //合計と入力値の演算子　0:数字 1:演算子

画面に表示されたとき、結果表示が0と表示されていると思いますがそれが「ans = 0」になります。
作り方によると思いますがお手本にされている仕組み上、前回何を入力したのか
確認してから記号であるのか数字であるのかを判断する処理があります。
画面を表示したときは、「0+」の状態で次の操作を待っている状態から始まります。
この状態でもし数字の1が入力されると以前何を入力したのかな？という処理がまず動きますので
「before = "+"」「kigou = 1」この２つをみて前回+を入力したのだなということを判断して
「0+1」の結果を表示させることになります。
ここで「kigou = 1」がなかったときは前回何を入力されたのかが判断できないため本来されるべき
チェックができなかったということではないでしょうか。

「before = "+"」「kigou = 1」が何故要るのかというのは、
「0+」で次の入力を待っているから次は数字が入力されるだろうと待ち構えていたら
「-」マイナスボタンが押された場合「0+-」（？）これってどんな計算するの？
という形になりますのでその前に押された記号「+」を消して「0-」として次の入力をさせるように
準備するために追加しているということだと思います。

誤操作による想定外のことをなくすため
記号を連続で何度も押されることを想定した対策ということでしょう。
電卓にもよりますが＝を連続で押すと結果が2の場合2が連続で足されるようなものも
あると思います。

これで分かりますかね。
説明が下手かもしれませんが少しでも理解できればと思います。
がんばってください。

Comments

[eri_3100]

ありがとうございます！
ぼやっと輪郭がつかめたような気がします。助かりました！

[tukatter]

温泉に入ろうとして自分が男子でも女子でもない状態になっている状態（？）だから自分は男子だということを予め教えておかないと本来入るべきところに入れないですよ
という表現でいいのかわかりませんが
画面を表示する前に予め決めておくべき値があるわけです。

表示したときに0+の状態で次の入力を待ちたいので
var kigou = 1; //合計と入力値の演算子　0:数字 1:演算子
ここで1（演算子）だということを設定しておくことで
if(kigou==1)という記述部分が処理されますが
それが設定されていなかったり別の値だとその処理をしないで
表示されるので表示できてるのにおかしいな？　ということになります。
kigouとかで検索するとどこで使われているかが分かります。

始めはぼんやりでいいとおもいますよ。
じっくりすすめていくといいです。がんばってください