1. 表示と演算子の変數(shù)

displayValue 変數(shù)は、畫面に表示される現(xiàn)在の値を保持し、計算中の正確な更新を保証します。 lastOperator 変數(shù)は最後に使用された演算子を追跡し、連続した演算子入力などのエラーを防ぎます。さらに、console.log はデバッグ目的、特にレビューのために calculatorBtns ノード リストを記録するために利用されます。

1. ボタンクリックイベントリスナー/各ボタンのループ

forEach メソッドは、calculatorBtns コレクション內(nèi)の各ボタンをループするために使用されます。各ボタンについて、innerText プロパティが buttonValue 変數(shù)に割り當(dāng)てられます。この変數(shù)には、「AC」、「C」、「9」、「 」など、ボタンに表示されるテキストが保持されます。

その後、onclick イベント リスナーが各ボタンに追加されます。ボタンをクリックすると、割り當(dāng)てられた機能が実行されます。この関數(shù) handleButtonAction(buttonValue) は、ボタンのテキスト (buttonValue) を引數(shù)として受け取ります。ボタンの値を渡すことにより、この関數(shù)により、電卓は表示のクリア、數(shù)値の入力、數(shù)學(xué)的演算の実行などの正しいアクションを?qū)g行できるようになります。

1. キーボード入力のキー押下の処理

これにより、電卓をキーボードでも操作できるようになります。キーが押されると、対応するボタンのアクションがトリガーされます。たとえば、キーボードで「1」を押すと、値「1」で handleButtonAction() 関數(shù)がトリガーされます。

1. 表示機能

display() 関數(shù)は、表示ボックス (displayBox) の內(nèi)容を現(xiàn)在の displayValue で更新します。 displayValue が空の場合、デフォルトでは「0.0」が表示されます。

1. ボタンアクションハンドラー(メインロジック):

コードは、電卓の表示を更新し、計算を処理するためにいくつかの手順を?qū)g行します。まず、eval(displayValue) は、displayValue に格納されている數(shù)式を評価します。たとえば、ディスプレイに「3 5」と表示されている場合、eval は計算して結(jié)果を返します。この場合、結(jié)果は 8 になります。

次に、displayValue = String(result) は結(jié)果を文字列に変換し、displayValue を更新して結(jié)果を畫面に表示します。計算が完了すると、lastOperator = "" は lastOperator を空の文字列にリセットし、以前の演算子がすべてクリアされるようにします。最後に、display() 関數(shù)は表示を更新して計算結(jié)果を表示します。

1. AC(オールクリア)およびC(クリア)ボタンロジック

「AC」ボタンがクリックされると、コードは buttonValue が「AC」と等しいかどうかをチェックします。 true の場合、displayValue を空の文字列にリセットし、実質(zhì)的に表示全體をクリアして電卓をリセットします。次に、display() 関數(shù)が呼び出され、空の値で表示が更新されます。

「C」ボタンの場合、buttonValue が「C」の場合、コードは、slice(0, -1) を使用して、displayValue から最後の文字を削除します。これにより、ユーザーは最後の入力または文字を削除できるようになり、display() 関數(shù)が再度呼び出されて、それに応じて表示が更新されます。

1. 演算子の検証

この條件は、表示されている現(xiàn)在値に基づいてオペレーターを押すことができるかどうかを検証するために使用されます。

條件 ["%", "/", "*", " "].includes(buttonValue) は、クリックされたボタンが演算子 (%、/、*、) のいずれかであるかどうかを確認(rèn)します。ボタンが演算子の場合、次のチェック if (!displayValue || displayValue === "-") により、ディスプレイが空であるかマイナス記號 (-) のみが含まれている場合には演算子を押すことができないことが確認(rèn)されます。これにより、2 つの演算子が連続する、または演算子で始まるなどのエラーが防止されます。條件が true の場合、関數(shù)は単に戻り、演算子は表示に追加されません。

1. 連続オペレーターを防止する

このコード ブロックは、連続した演算子が押されるシナリオを処理し、「 」や「 - 」などの無効な入力を防ぎます。

まず、if (["%", "/", "*", " ", "-"].includes(buttonValue)) は、クリックされたボタンが演算子かどうかを確認(rèn)します。次に、 const lastCharacter = displayValue.slice(-1) は、displayValue.

次に、lastOperator = buttonValue は、lastOperator 変數(shù)を更新して現(xiàn)在のオペレーターを保存します。 if (["%", "/", "*", " ", "-"].includes(lastCharacter)) によってチェックされるように、最後の文字も演算子である場合、コードは、displayValue.slice() を使用してその文字を削除します。 0、-1）。これにより、式の最後に演算子が 1 つだけ表示され、連続する演算子が追加されることがなくなります。

1. 小數(shù)點の検証

このコード ブロックは、小數(shù)點 (.) が數(shù)値內(nèi)に 1 回だけ出現(xiàn)できるようにし、「3..5」のような無効な入力を防ぎます。

まず、條件 if (buttonValue === ".") は、クリックされたボタンが小數(shù)點であるかどうかを確認(rèn)します。そうであれば、検証が続行されます。

次に、const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) は、displayValue 內(nèi)の最後の演算子の位置を見つけます。次に、 const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue は、最後の演算子の後の displayValue の部分を抽出します。これは、入力されている現(xiàn)在の數(shù)値を表します。演算子がない場合は、displayValue 全體が考慮されます。

最後に、if (currentNumberSet.includes(".")) は、抽出された數(shù)値部分に既に小數(shù)點が含まれているかどうかを確認(rèn)します。存在する場合、関數(shù)は早期に戻り、ユーザーは 2 番目の小數(shù)點を入力できなくなります。これにより、「3.5」のような數(shù)値は有効ですが、「3..5」のような入力は無効であることが保証されます。

1. 新しい値で表示を更新します:

コードdisplayValue = displayValue buttonValue;押されたボタンの値 (數(shù)字や演算子など) を既存の displayValue 文字列に追加します。これにより、ユーザーが電卓を操作するときに現(xiàn)在の式または數(shù)値が構(gòu)築されます。

ボタンの値を追加した後、display() 関數(shù)が呼び出されて表示が更新され、更新された displayValue が確実に反映されます。これにより、ユーザーが入力した最新の値または式が確実に表示されます。

結(jié)論

この JavaScript コードは、値の表示、計算の実行、入力のクリア、電卓での式の検証のロジックを処理します。ボタンのクリックとキーボード入力の両方で動作します。主な機能には、「=」または「Enter」キーが押されたときの計算の実行、AC (全クリア) および C (最後の文字のクリア) ボタンの処理、連続する演算子や複數(shù)の小數(shù)點などの無効な操作の防止などが含まれます。さらに、各アクションの後に表示が更新されるため、ユーザーには最新の値または式が表示されます。これらの機能を組み合わせることで、機能的でインタラクティブな計算機の基盤が提供されます。

以下は私のデモ リンクですので、自由に完全なコードをチェックアウトしたり、リポジトリを複製したり、ライブ デモを操作したりしてください。コーディングを楽しんでください!
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]