2022年にJavaScript、HTML、CSSを使用して電卓を構築する
公開: 2021-01-02新しいプログラミング言語を学んでいるか、開発フレームワークを学んでいるかにかかわらず、実際のプロジェクトに取り組む必要があるときが来ます。 あなたが主題を通して前進しているとき、あなたはあなたのスキルと言語の理解をテストするべきです。 新しく学んだテクノロジーまたはフレームワークを使用してプロジェクトを構築することは良い考えです。 あなたがあなたの知識で何を作るべきかに関して、オンラインで利用可能なたくさんのアイデアがあります。
最も一般的に見られる提案には、 JavaScriptの電卓とやることリストが含まれます。 それらは簡単に見えますが、これらのプロジェクトに取り組み始めるとき、それはかなりの作業になる可能性があります。 ここでは、それを簡単かつ論理的に、そしてあなたのために波乱に富んだものにするつもりです。
始めましょうか。
目次
他のすべての前の論理
プロジェクトの作業を開始するとき、それが計算機であろうとやることリストであろうと、最初に特定する必要があるのはロジックです。
電卓はどのように機能しますか？
- 電卓にある数字キーを使用して、2つ以上の数字（任意の桁数）を追加します。
- 次に、これらの数値に対して基本的な算術関数、つまり加算、減算、乗算、除算を実行します。
- 電卓は正しい解を計算して与えることができるはずです。
これが電卓ツールの前提です。 したがって、キーパッド、ディスプレイユニット、および機能要素が必要です。
「等しい」ボタンは答えを評価し、「クリア」ボタンは電卓ディスプレイのすべての入力を確実に削除します。
世界のトップ大学からオンラインソフトウェア開発コースを学びましょう。 エグゼクティブPGプログラム、高度な証明書プログラム、または修士プログラムを取得して、キャリアを早急に進めましょう。
プロジェクトへの取り組み：コードを構築するための鍵
すぐにコードに向かう代わりに、新しいプロジェクトに取り組む方法を学ぶ必要があります。 JavaScript、HTML、CSSなどのフロントエンドテクノロジのロジックと基本的な理解という2つの準備ができています。
JavaScriptを使用して電卓を作成する前に、次のものが必要です。
- 3つのテクノロジーすべてを使用してプロジェクトを構築するのに役立つ統合開発環境。
- コードのテストとバグの削除に役立つローカルサーバー。 その結果、アプリケーションをより速く、より機敏に起動できるようになります。
＃1HTML入門
最初のステップは、HTMLで手を少し汚して、電卓のアウトラインを作成することです。
電卓には、0から9までの10個のボタンがあります。HTMLは、各桁のキーを作成する役割を果たします。
これとは別に、 JavaScriptを使用して電卓を作成する場合も、HTMLを使用してさまざまな算術関数用に個別のキーを作成する必要があります。
HTMLを使用してボタンを追加し、入力した数字または結果を表示したり、表示をクリアしたりできます。
電卓のビジュアルユニットは、HTMLとCSSに完全に依存しており、ボタンとそのIDはHTMLを使用して作成する必要があります。
ボイラープレートコード
<！DOCTYPE html>
<html lang =” en”>
<頭>
<meta charset =” UTF-8”>
<meta name =” viewport” content =” width = device-width、initial-scale = 1.0”>
<link rel =” stylesheet” type =” text / css” href =” css / styles.css”>
<title>電卓</title>
</ head>
<本体>
電卓のアウトラインを作成するための実際のコード
（（
<！–計算機–>
<div class =”電卓”>
<！–表示–>
<input type =” text” class =” display”disabled>
<！–キー–>
<div class =” keys”>
<！– 4行のキー–>
<div class =” row”>
<button value =” 7″> 7 </ button>
<button value =” 8″> 8 </ button>
<button value =” 9″> 9 </ button>
<button value =” +” class =” operator”> + </ button>
</ div>
<div class =” row”>
<button value =” 4″> 4 </ button>
<button value =” 5″> 5 </ button>
<button value =” 6″> 6 </ button>
<button value =”-” class =” operator”>-</ button>
</ div>
<div class =” row”>
<button value =” 1″> 1 </ button>
<button value =” 2″> 2 </ button>
<button value =” 3″> 3 </ button>
<button value =” *” class =” operator”> * </ button>
</ div>
<div class =” row”>
<button value =” C” class =” operator”> C </ button>
<button value =” 0″> 0 </ button>
<button value =” /” class =” operator”> / </ button>
<button value =” =” class =” operator”> = </ button>
</ div>
</ div>
</ div>
<！–電卓本体が終了します–>
<script type =” text / javascript” src =” js / script.js”> </ script>
</ body>
</ html>
学ぶ：初心者向けのGithubのトップ20Javascriptプロジェクト
＃2CSSを使用したスタイル
電卓の構造を定義したら、インラインCSS要素を使用して電卓のスタイルを設定し、視覚的に魅力的で使いやすいものにします。
インラインCSSは、アプリの外観のデザインとスタイリングに関しては優れていますが、SEOに対応していない場合があります。 これとは別に、同じルートディレクトリにタグを付けることで外部CSS要素を使用することもできます。 headセクション内の<style></style>タグ内に存在する内部または埋め込みCSS要素を使用することもできます。
ここでは、電卓のスタイル設定に使用できるコードについて説明します。
（必要に応じて、このコードのバリエーションを作成できます。）
/*一般的なスタイル*/
* {
パディング：0;
マージン：0;
}
体 {
幅：100vw;
高さ：100vh;
オーバーフロー：非表示;
表示：フレックス;
justify-content：center;
align-items：center;
背景色：＃222831;
フォントファミリー：sans-serif;
}
/*一般的なスタイルは終了します*/
/*電卓*/
.calculator {
幅：300px;
パディング-下：15px;
border-radius：7px;
背景色：＃000;
ボックスシャドウ：5px 8px 8px -2px rgba（0、0、0、0.61）;
}
/*電卓スタイルの終了*/
/* 画面 */
。画面 {
幅：100％;
高さ：80px;
境界線：なし;
ボックスサイズ：border-box;
パディング：10px;
フォントサイズ：2rem;
背景色：＃00ff44;
色：＃000;
text-align：right;
border-top-left-radius：7px;
border-top-right-radius：7px;
}
/*表示スタイルの終了*/
/* 行 */
。行 {
表示：フレックス;
justify-content：space-between;
}
/*行スタイルの終了*/
/* ボタン */
ボタン {
幅：50px;
高さ：50px;
境界線半径：50％;
境界線：なし;
概要：なし;
フォントサイズ：1.5rem;
背景色：＃222;
色：#fff;
マージン：10px;
}
ボタン：ホバー{
カーソル：ポインタ;
}
/*ボタンスタイルの終了*/
/*演算子*/
.operator {
背景色：＃00ff44;
色：＃000;
}
/*オペレータースタイルの終了*/
＃3JavaScriptで機能を追加する
ここで、 JavaScriptを使用して計算機を構築する際の目に見える側面について詳しく説明しました。 電卓を機能させ、計算タスクを実行するのに役立つスクリプトをいくつか実行してみましょう。 JSコードの構築に関連するいくつかの手順を理解します。これにより、コードをより迅速に開発できます。
- JavaScriptを使用して個々の関数用に作成したHTMLタグを呼び出す必要があります。 セレクターを使用して、これらの各入力を呼び出し、変数に格納します。 関数ごとに、変数が必要になります。 たとえば、表示用の個別の変数、数字、クリア機能、および同等の機能があります。 この場合、getElementbyID（）関数を使用できます。
- 20 + 30の簡単な計算を実行したいとします。最初に、上記の方法を使用して20を呼び出します。 30と算術関数を呼び出す前に、以前に呼び出された20をどこかに格納する必要があります。 コードは、計算を容易にするために、数値を一時的に保存するためのスペースを確保する必要があります。 空の配列は、数値を文字列として保持します。 eval（）を使用して、他の数値と算術関数を追加したら、数値を評価して答えを得ることができます。
- 電卓のボタンをクリックすると、表示されるか、評価されるかのいずれかの結果が必要になります。 この目的のために、コードにイベントリスナーを追加する必要があります。 このように、ボタンはクリックをリッスンします。 イベントリスナーに関数を追加すると、クリック音でタスクが自動的に実行されます。
- ディスプレイユニットは、クリックしたボタンの値を返す必要があります。 イベントが発生した要素の値を返すため、event.targetオブジェクトを使用できます。 たとえば、数字「1」をクリックするとすぐに表示されるようにします。 このためには、変数の形式で数値を格納する必要があります。 「if」関数を使用して、既存の変数を比較し、それがゼロかどうかを識別します。 ゼロの場合は、空の文字列に追加して、ゼロで始まる数値がないようにします。 最後に、キー「1」の内容を表示変数に追加します。 その結果、数字キーがトリガーされるとすぐに、表示ボックスに内容が表示されます。
- 最後に、表示された数値に数学演算を適用するのに役立つ関数を作成する必要があります。 JavaScriptの電卓が数学計算を簡単に実行できることを確認してください。 この機能を有効にするには、構文とメソッドを組み合わせて使用できます。 以下のJavaScript要素のコードをよく読んでください。
//すべてのボタンを選択します
const button = document.querySelectorAll（'button'）;
// <input type =” text” class =” display”disabled>要素を選択します
const display = document.querySelector（'。display'）;
//各ボタンにeventListenerを追加します
buttons.forEach（function（button）{
button.addEventListener（'クリック'、計算）;
}）;
//関数を計算します
関数calculate（event）{
//現在クリックされているボタンの値
const clickedButtonValue = event.target.value;
if（clickedButtonValue ==='='）{
//表示が空でないかどうかを確認し、計算のみを行います
if（display.value！==”）{
//答えを計算して表示します
display.value = eval（display.value）;
}
} else if（clickedButtonValue ==='C'）{
//表示されているものをすべてクリアします
display.value =”;
} そうしないと {
//それ以外の場合は、ディスプレイに連結します
display.value + = clickedButtonValue;
}
}
必読： Javaアーキテクチャとコンポーネントの説明
まとめ
JavaScriptで計算機を構築する場合でも、より複雑なプロジェクトで作業する場合でも、論理的かつ解釈された方法でコンテンツを分解するという考え方があります。 これは、正確な構文を導き出すのに役立ち、流動的なWebアプリケーションにつながります。 直接コーディングを始めるのではなく、使用しているテクノロジーの本当の目的が何であるかを理解するようにしてください。そうすれば、コードにたどり着くことができます。
Java、フルスタックソフトウェア開発の詳細に興味がある場合は、upGrad＆IIIT-Bのソフトウェア開発のエグゼクティブPGプログラム–フルスタック開発の専門分野をチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニングを提供します。 、9以上のプロジェクト、および割り当て、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、およびトップ企業との雇用支援。
