HTML、CSS、JavaScript を使用した基本的な電卓の作成
JavaScript で関数電卓を作成するのは楽しいもので、DOM 操作、イベント処理、条件付きロジック、文字列操作、算術演算、キーボード入力の統合、ユーザー インターフェイスの CSS スタイリングなど、多くの概念が使用されています。このブログ投稿では、コードを深く掘り下げ、各行を分解してそのプロパティと機能を理解します。このブログを終えるまでに、電卓の仕組みをしっかりと理解できるようになります。
始めましょう。
HTML構造のセットアップ
HTML は単純なもので、標準的な定型文から始まります。以下は、index.html
のコード スニペットです。タグは、計算機のロジックと機能が定義されている外部 JavaScript ファイル script.js にリンクします。この外部ファイルはユーザーの操作と計算を処理し、電卓が意図したとおりに操作を実行できるようにします。
ここでは、表示ボックスには入力と結果が表示され、ボタン ボックスにはすべての電卓ボタンが表示されます。
スタイル設定用の CSS の追加
それでは、電卓を視覚的に魅力的で使いやすいものにスタイル設定してみましょう。
CSS コードを分解してみましょう。
- ラッパーのスタイリング
最小高さ: 100vh;ラッパーが少なくともビューポートの高さ全体を占めるようにします。ディスプレイ: フレックス;柔軟なレイアウトが可能になり、子の配置が可能になります。 justify-content: center; align-items: center; はコンテンツを水平方向に中央揃えにします。コンテンツを垂直方向の中央に配置します。最後に、境界線: 2 ピクセルの黒一色。ラッパーの周囲に境界線を追加します。
- 電卓コンテナのスタイル:
ディスプレイ: フレックス;電卓コンテナを柔軟にし、子要素を行または列に配置できるようにします。 flex-direction: 列;子要素を垂直方向に配置します。ギャップ: 12px;各セクションまたは要素の間にスペースを追加します。最後に、幅: 500px;電卓の幅を 500px に設定します。
- ディスプレイボックスのスタイル
境界線: 1 ピクセルの黒一色。表示ボックスに枠線を追加します。パディング: 16px;ボックス内にスペースを設けて読みやすくします。テキストの配置: 右;テキストが右揃えになるようにします。フォントサイズ: 24px;フォントサイズを大きくして視認性を向上させます。一方、border-radius: 5px;ボックスの角を丸くします。
- ボタンコンテナとボタンのスタイル
ここでは、ボタン コンテナは .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 コードのスニペット
理解を深めるためにコードを分解してみましょう。
- DOM 要素の選択
displayBox 変数は、表示ボックス (
- 表示と演算子の変数
displayValue 変数は、画面に表示される現在の値を保持し、計算中の正確な更新を保証します。 lastOperator 変数は最後に使用された演算子を追跡し、連続した演算子入力などのエラーを防ぎます。さらに、console.log はデバッグ目的、特にレビューのために calculatorBtns ノード リストを記録するために利用されます。
- ボタンクリックイベントリスナー/各ボタンのループ
forEach メソッドは、calculatorBtns コレクション内の各ボタンをループするために使用されます。各ボタンについて、innerText プロパティが buttonValue 変数に割り当てられます。この変数には、「AC」、「C」、「9」、「 」など、ボタンに表示されるテキストが保持されます。
その後、onclick イベント リスナーが各ボタンに追加されます。ボタンをクリックすると、割り当てられた機能が実行されます。この関数 handleButtonAction(buttonValue) は、ボタンのテキスト (buttonValue) を引数として受け取ります。ボタンの値を渡すことにより、この関数により、電卓は表示のクリア、数値の入力、数学的演算の実行などの正しいアクションを実行できるようになります。
- キーボード入力のキー押下の処理
これにより、電卓をキーボードでも操作できるようになります。キーが押されると、対応するボタンのアクションがトリガーされます。たとえば、キーボードで「1」を押すと、値「1」で handleButtonAction() 関数がトリガーされます。
- 表示機能
display() 関数は、表示ボックス (displayBox) の内容を現在の displayValue で更新します。 displayValue が空の場合、デフォルトでは「0.0」が表示されます。
- ボタンアクションハンドラー(メインロジック):
コードは、電卓の表示を更新し、計算を処理するためにいくつかの手順を実行します。まず、eval(displayValue) は、displayValue に格納されている数式を評価します。たとえば、ディスプレイに「3 5」と表示されている場合、eval は計算して結果を返します。この場合、結果は 8 になります。
次に、displayValue = String(result) は結果を文字列に変換し、displayValue を更新して結果を画面に表示します。計算が完了すると、lastOperator = "" は lastOperator を空の文字列にリセットし、以前の演算子がすべてクリアされるようにします。最後に、display() 関数は表示を更新して計算結果を表示します。
- AC(オールクリア)およびC(クリア)ボタンロジック
「AC」ボタンがクリックされると、コードは buttonValue が「AC」と等しいかどうかをチェックします。 true の場合、displayValue を空の文字列にリセットし、実質的に表示全体をクリアして電卓をリセットします。次に、display() 関数が呼び出され、空の値で表示が更新されます。
「C」ボタンの場合、buttonValue が「C」の場合、コードは、slice(0, -1) を使用して、displayValue から最後の文字を削除します。これにより、ユーザーは最後の入力または文字を削除できるようになり、display() 関数が再度呼び出されて、それに応じて表示が更新されます。
- 演算子の検証
この条件は、表示されている現在値に基づいてオペレーターを押すことができるかどうかを検証するために使用されます。
条件 ["%", "/", "*", " "].includes(buttonValue) は、クリックされたボタンが演算子 (%、/、*、) のいずれかであるかどうかを確認します。ボタンが演算子の場合、次のチェック if (!displayValue || displayValue === "-") により、ディスプレイが空であるかマイナス記号 (-) のみが含まれている場合には演算子を押すことができないことが確認されます。これにより、2 つの演算子が連続する、または演算子で始まるなどのエラーが防止されます。条件が true の場合、関数は単に戻り、演算子は表示に追加されません。
- 連続オペレーターを防止する
このコード ブロックは、連続した演算子が押されるシナリオを処理し、「 」や「 - 」などの無効な入力を防ぎます。
まず、if (["%", "/", "*", " ", "-"].includes(buttonValue)) は、クリックされたボタンが演算子かどうかを確認します。次に、 const lastCharacter = displayValue.slice(-1) は、displayValue.
内の現在の式の最後の文字を取得します。次に、lastOperator = buttonValue は、lastOperator 変数を更新して現在のオペレーターを保存します。 if (["%", "/", "*", " ", "-"].includes(lastCharacter)) によってチェックされるように、最後の文字も演算子である場合、コードは、displayValue.slice() を使用してその文字を削除します。 0、-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」のような入力は無効であることが保証されます。
- 新しい値で表示を更新します:
コード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 サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

CとCは、主に通訳者とJITコンパイラを実装するために使用されるJavaScriptエンジンで重要な役割を果たします。 1)cは、JavaScriptソースコードを解析し、抽象的な構文ツリーを生成するために使用されます。 2)Cは、Bytecodeの生成と実行を担当します。 3)Cは、JITコンパイラを実装し、実行時にホットスポットコードを最適化およびコンパイルし、JavaScriptの実行効率を大幅に改善します。
