1. TOPTOP
  2. Webサービス
  3. JavaScript

変数の値(0,1)を切り替えることで数値と演算子を使い分けられる理由~イヌでもわかるJavaScript講座 Step.30 – 電卓に挑戦 より

|

calculator

先日、変数の値(0,1)を切り替えることで、数値と演算子を使い分けられる(新しいタブで開く)ことに関する記事を書きました。

といっても結局、自分の理解の範囲を超えてしまったので、オフラインでプログラムに詳しい方に、質問してみました。

それでようやく理解することができたので、記事にして書き留めておきます。

問題

下記のコードの「下準備」のところで”myFlg”という変数が定義されています。0の場合は数字が、1の場合は演算子が入力することができるようになります。

その後の関数(myValue,myCalculate)にあるように、変数myFlgの値を0か1にすることで、これから数字を入力するのか、演算子を入力するのか、予め区別できるようになります。

ではなぜ、0か1という2つの数値で、これから入力する状態を分けることができるのでしょうか?

// ****************
//      下準備
// ****************

// 合計値
var myTotal = 0;
// 入力値
var myInput = "";
// 合計と現在の入力値を合わせる演算子
var myCalc = "+";
// 0→数字の入力状態 1→演算子の入力状態
var myFlg = 1;										

// ****************
// 数字ボタンを押す
// ****************

function myValue(myData) {
 // 窓を数字入力の状態にする
	myFlg = 0;
	myInput += myData;
	document.myForm.myLine.value = myInput;
}

// ****************
// 演算ボタンを押す
// ****************

function myCalculate(myData) {
    // 窓を数字入力状態にする
	if (myFlg==0) {
      // 窓を演算子入力状態にする
		myFlg = 1;
		myWork = myTotal + myCalc + myInput;
		myTotal = eval(myWork);
		myInput = "";
		document.myForm.myLine.value = myTotal;
	}
	// 入力値が"="のとき
	if (myData == "=") {
		myTotal = 0;
		myCalc = "+";
	} else {
		myCalc = myData;
	}
}

// ****************
// クリアボタンを押す
// ****************

function myC() {
	myTotal = 0;
	myCalc = "+";
	myInput = "";
	document.myForm.myLine.value = myTotal;
}

myFlgの状態変化

myFlgと言う変数は、その電卓が、数値を入力できるか状態なのか、演算子を入力できる状態なのか、数値(0 or 1)で表しています。

コメントで 「0→数字の入力状態 1→演算子の入力状態」と書いていますが、あくまで任意です。仮にそういうことにしているということです。

電卓の操作に沿って、myFlgの状態変化を見ていくと、次のようになります。

1.数字ボタン(myValue関数)を押したとき

myFlg=0として、数字の入力状態にする

2.演算ボタン(myCalculate関数)を押したとき

事前にmyFlg=0として、数字が入力されているので、myFlg=1として、計算を行う

ポイント

ポイントはmyCalculate関数のif (myFlg==0){}です。myFlgの初期値は1ですが、初期値のままでは、計算を受け付けないことになっています。

電卓の操作では、まず最初に数値を入力することになります。myValue関数で数値を入力するときに、予めmyFlgの状態を0にしています。

ここでもしmyFlgが0でない状態、つまり1の状態のとき、以降の操作はなされないことになっています。

myFlgという変数や、0と1という数値そのものには、意味はありませんが、その状態を切り替えることで、どんなボタン(数字ボタンor演算ボタン)を押せるのか操作しているということです。

〔前の記事〕