シンプルなウェブ計算機を実装するJavaScript

背景

私は新しいプロジェクトチームに配属されたので、プロジェクトでは js を使用する必要がありますが、これまで js に触れたことがなかったので、リーダーは私に 1 週間の学習期間を与えることにしました。はい、4 つの混合演算をサポートする簡単な計算機を実装することが宿題なので、この記事があります。したがって、この記事の主な焦点は html と css ではありません。結局のところ、私は fur について少ししか知らず、深く勉強していません。

成果を達成する

最終的なページは以下のようになります。マウスでボタンをクリックすると、ボタンの色が変わり、混合操作を行うことができます。

上段に計算式が表示され、「=」を押すと計算結果が表示されます。

使用される技術

計算機ページは HTML テーブルを使用して描画されます。ボタンのサイズ、色、マウスホバーの色は CSS によって設定されます。ボタンをクリックすると、値と計算結果が最上行に表示されます。4 つの混合演算は JS によって実行されます。

実装のアイデア

ここでは、.html、.css、.jsの3つのファイルに分割しました。

1. まず、HTMLとCSSを書いて、Webページの外観を描きます。ここでは詳しく説明しません。興味があれば、コードを直接見ることができます。
2. 次に、js の DOM イベントを使用して、さまざまな種類のボタンにクリックイベントを追加し、さまざまな js 関数を呼び出します。
このステップでは、主に特定のボタンを押すことでどのような機能を実現するのか、どのようなエフェクトを表示するのかなど、ロジックを明確に分割して、後から関数を埋めていくロジックがごちゃごちゃしないようにするために、最初に関数定義を書きました。
3. 最後に、js 関数を実装します。つまり、4 つの混合演算を完了します。4 つの混合演算を実装して結果を表示する方法に重点が置かれます。

上記の数式と結果を表示する際、グローバル変数の配列を定義しました。ボタンがクリックされるたびに、ボタンの値が配列にプッシュされ、表示時に配列を直接スローできるようになります。これを行うもう 1 つの理由は、バックスペースキーをクリックするとポップアップが表示され、クリアキーをクリックすると、配列変数に空の配列が直接割り当てられるため、操作が簡単になるからです。

次の重要なステップは、式を計算することです。たとえば、3 * 4.5 - 1= のような式を入力した場合、どのように評価するのでしょうか。私が考えた方法は、まず入力配列をインフィックス式に変換し、次にインフィックス式をポストフィックス式に変換し、最後にポストフィックス式を評価するというものです。

1. まず、上記の配列処理により、['3','*','4','.','5','-','1'] のような配列が得られます。
2. この配列を次のような文字列に変換します: "3*4.5-1"
3. 次に、演算子と数字を区切って新しい配列['3','*','4.5','-','1']に処理します。
4. 処理後、スタックを使用して中置式を後置式に変換します。
5. スタックを使用して接尾辞式を評価し、結果を = の後に格納します。

ステップ 4.5 はデータ構造におけるスタックの適用に関するものなので、よくわからない場合はデータ構造を確認してください。これで完了です。

具体的な実装コード

上で述べたように、十分に分析したので、これについてはあまり言及せず、直接コードに進みます。

.html ファイル

<!DOCTYPE html>
<html>
    <ヘッド>
        <title>電卓</title>
        <link rel="スタイルシート" href="calculator.css" >
        <script src="calculator.js"></script>
    </head>

    <本文>
        <div>
            <表の境界線="1">
                <頭>
                    <th colspan="4">
                        <input type="text" id="result" 無効>
                    </th>
                </thead>

                <t本文>
                    <tr>
                        <td><button class="operate" onclick="showNumber(this)">(</button></td>
                        <td><button class="operate" onclick="showNumber(this)">)</button></td>
                        <td><button class="operate" onclick="clearOneResult()">←</button></td>
                        <td><button class="operate" onclick="clearResult()">C</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">7</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">8</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">9</button></td>
                        <td><button class="operate" onclick="showNumber(this)">*</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">4</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">5</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">6</button></td>
                        <td><button class="operate" onclick="showNumber(this)">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">1</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">2</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">3</button></td>
                        <td><button class="operate" onclick="showNumber(this)">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">0</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">.</button></td>
                        <td><button class="operate" onclick="showNumber(this)">/</button></td>
                        <td><button class="operate" onclick="showAnswer()">=</button></td>
                    </tr>
                </tbody>         
            </テーブル>
        </div>
    </本文>
</html>

.css ファイル

テーブル{
    マージン: 20px;
    パディング: 1px;
}

th、入力{
    高さ: 120px;
    幅: 410ピクセル;
    背景色:rgb(233, 232, 232);
    テキスト配置: 右;
    フォントサイズ: 40px;
}


ボタン{
    高さ: 100px;
    幅: 100ピクセル;
    パディング: 0px;
    フォントサイズ: 30px;
}

th、入力、td、ボタン{
    境界線: 0px;
}

.計算{
    背景色: rgb(231, 231, 235);
}

.操作{
    色: コーラル;
}

ボタン:ホバー{
    背景色: rgb(147, 241, 253);
}

.js ファイル

var 結果 = 新しい配列();
var ops = "+-*/";

関数 arrToStr(arr) {
    var strResult = "";
    (var i = 0; i < arr.length; i++) の場合 {
        strResult += arr[i];
    }
    strResult を返します。
}


関数 showResult() {
    document.getElementById("結果").value = arrToStr(結果);
}


関数 showNumber(id) {
    var val = id.innerHTML;
    結果をプッシュします。
    結果を表示します。
}


関数 showAnswer() {

    var 回答 = "";
    var str = arrToStr(結果);

    var midExpre = strToExpress(str);
    var サフィックスExpre = midToSuffix(midExpre);
    答え = suffixValue(suffixExpre);

    //コンソールログ(midExpre);
    //console.log(サフィックスExpre);

    document.getElementById("result").value = str + "=" + 回答;

}


関数 clearResult() {
    結果 = [];
    結果を表示します。
}


関数 clearOneResult() {
    結果.pop();
    結果を表示します。
}


関数strToExpress(str) {

    var textArr = str.split('');
    var newTextArr = [];
    var calTextArr = [];

    (var i = 0; i < str.length; i++) の場合 {
        ops.indexOf(str[i]) != -1 の場合 {
        
            newTextArr.push("|", str[i], "|");
        }
        そうでない場合 (str[i] == '('){
            newTextArr.push(str[i], "|");
        }
        そうでない場合 (str[i] == ')'){
            newTextArr.push("|", str[i]);
        }
        それ以外 {
            新しいTextArr.push(textArr[i]);
        }
    }

    calTextArr = newTextArr.join('').split('|');

    calTextArr を返します。
}


関数midToSuffix(midExpre) {

    var opStack = [];
    var サフィックスExpre = [];

    (var i = 0; i < midExpre.length; i++) の場合 {

        ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' の場合 {

            if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
                opStack.push(midExpre[i]);
            }

            そうでない場合（midExpre[i] == ')'）{
                する {
                    サフィックスExpre.push(opStack.pop());
                } while (opStack[opStack.length - 1] != '(');
                opStack.pop();
            }
            そうでない場合 (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) {
                opStack.push(midExpre[i]);
            }
            それ以外 {
                する {
                    サフィックスExpre.push(opStack.pop());
                } while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1]));

                opStack.push(midExpre[i]);
            }
        }

        それ以外 {
            suffixExpre.push(midExpre[i]);
        }
    }

    (opStack.length > 0) の場合 {
        サフィックスExpre.push(opStack.pop());
    }

    suffixExpre を返します。
}

関数 Priority(op) {
    var opPri = 0;
    スイッチ（op）{
        ケース「+」:
            opPri = 1;
            壊す;
        場合 "-"：
            opPri = 1;
            壊す;
        場合 "*"：
            opPri = 2;
            壊す;
        場合 "/"：
            opPri = 2;
            壊す;

    }
    opPri を返します。
}

関数 suffixValue(suffixExpre) {
    var calStack = [];

    console.log(サフィックスExpre);
    (var i = 0; i < suffixExpre.length; i++) の場合 {
        ops.indexOf(suffixExpre[i]) != -1 の場合 {
            var opRight = Number(calStack.pop());
            var opLeft = Number(calStack.pop());
            var tmpResult = 0;
            スイッチ (suffixExpre[i]) {
                ケース '+':
                    tmpResult = opLeft + opRight;
                    壊す;
                場合 '-'：
                    tmpResult = opLeft - opRight;
                    壊す;
                場合 '*'：
                    tmpResult = opLeft * opRight;
                    壊す;
                場合 '/'：
                    tmpResult = opLeft / opRight;
                    壊す;
            }
            calStack.push(tmpResult);
        }
        それ以外 {
            calStack.push(サフィックスExpre[i]);
        }

        コンソールにログ出力します。
    }

    calStack.pop() を返します。
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: