HTML、CSS、JavaScript を使用した基本的な電卓の作成

JavaScript で関数電卓を作成するのは楽しいもので、DOM 操作、イベント処理、条件付きロジック、文字列操作、算術演算、キーボード入力の統合、ユーザー インターフェイスの CSS スタイリングなど、多くの概念が使用されています。このブログ投稿では、コードを深く掘り下げ、各行を分解してそのプロパティと機能を理解します。このブログを終えるまでに、電卓の仕組みをしっかりと理解できるようになります。

始めましょう。

HTML構造のセットアップ

HTML は単純なもので、標準的な定型文から始まります。以下は、index.html

のコード スニペットです。

セクション。それぞれにボタンのセットが含まれます。これらのセクションには、数字 (0 ～ 9)、数学演算子 ( 、-、*、/)、およびその他の重要なボタン (AC、C、%、=、. など) が含まれます。

タグは、計算機のロジックと機能が定義されている外部 JavaScript ファイル script.js にリンクします。この外部ファイルはユーザーの操作と計算を処理し、電卓が意図したとおりに操作を実行できるようにします。

ここでは、表示ボックスには入力と結果が表示され、ボタン ボックスにはすべての電卓ボタンが表示されます。

スタイル設定用の CSS の追加

それでは、電卓を視覚的に魅力的で使いやすいものにスタイル設定してみましょう。

CSS コードを分解してみましょう。

1. ラッパーのスタイリング

最小高さ: 100vh;ラッパーが少なくともビューポートの高さ全体を占めるようにします。ディスプレイ: フレックス;柔軟なレイアウトが可能になり、子の配置が可能になります。 justify-content: center; align-items: center; はコンテンツを水平方向に中央揃えにします。コンテンツを垂直方向の中央に配置します。最後に、境界線: 2 ピクセルの黒一色。ラッパーの周囲に境界線を追加します。

1. 電卓コンテナのスタイル:

ディスプレイ: フレックス;電卓コンテナを柔軟にし、子要素を行または列に配置できるようにします。 flex-direction: 列;子要素を垂直方向に配置します。ギャップ: 12px;各セクションまたは要素の間にスペースを追加します。最後に、幅: 500px;電卓の幅を 500px に設定します。

1. ディスプレイボックスのスタイル

境界線: 1 ピクセルの黒一色。表示ボックスに枠線を追加します。パディング: 16px;ボックス内にスペースを設けて読みやすくします。テキストの配置: 右;テキストが右揃えになるようにします。フォントサイズ: 24px;フォントサイズを大きくして視認性を向上させます。一方、border-radius: 5px;ボックスの角を丸くします。

1. ボタンコンテナとボタンのスタイル

ここでは、ボタン コンテナは .flex-container でスタイル設定されています。子要素の柔軟なレイアウトを作成します。 justify-content: space-between;プロパティはボタン間にスペースをあけて均等に配置しますが、gap: 8px;各ボタン間の適切な間隔を確保して、位置を適切に調整します。

各ボタンは flex: 1; でスタイル設定されており、行内で均等なスペースを占めます。パディング: 16px;快適さのために各ボタンの内側にスペースを追加し、フォントサイズ: 20px;テキストが読みやすいことを保証します。フォントの太さ: 太字。テキストを目立たせます。一方、border: 1px 真っ黒です。各ボタンの周囲に境界線を追加します。さらに、border-radius: 8px;ボタンの角をわずかに丸め、カーソル: ポインタ;ホバーするとカーソルがポインタに変わります。ボタンの背景色は、background-color: rgb(255, 255, 255); で白に設定されます。

「=」ボタンの場合、.equal クラスは flex: 2.5; を使用します。より多くのスペースを確保し、他のボタンの幅の 2.5 倍にします。ボタンの上にマウスを置くと、button:hover スタイルによって背景色が灰色に変更されます。背景色:rgb(127, 131, 131);そして文字の色を白にします。このトランジション効果は、transition: 背景色 0.3 秒イーズ、カラー 0.3 秒イーズ; によって滑らかになり、色間の 0.3 秒のフェードが可能になります。

上記の HTML と CSS を使用すると、計算機は次のようになります:

それでは、計算機に命を吹き込む、主要部分に移りましょう。
JavaScript コードのスニペット

理解を深めるためにコードを分解してみましょう。

1. DOM 要素の選択

displayBox 変数は、表示ボックス (

) への参照を保持します。

1. 表示と演算子の変数

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

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

forEach メソッドは、calculatorBtns コレクション内の各ボタンをループするために使用されます。各ボタンについて、innerText プロパティが buttonValue 変数に割り当てられます。この変数には、「AC」、「C」、「9」、「 」など、ボタンに表示されるテキストが保持されます。

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

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

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

1. 表示機能

display() 関数は、表示ボックス (displayBox) の内容を現在の displayValue で更新します。 displayValue が空の場合、デフォルトでは「0.0」が表示されます。

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

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

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

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

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

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

1. 演算子の検証

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

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

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

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

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

内の現在の式の最後の文字を取得します。

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

1. 小数点の検証

このコード ブロックは、小数点 (.) が数値内に 1 回だけ出現できるようにし、「3..5」のような無効な入力を防ぎます。

まず、条件 if (buttonValue === ".") は、クリックされたボタンが小数点であるかどうかを確認します。そうであれば、検証が続行されます。

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

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

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

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

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

結論

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

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

以上がHTML、CSS、JavaScript を使用した基本的な電卓の作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。