jQueryで電卓をプログラムする方法

以前、CSSborder-radiusプロパティを使用して次の計算機を作成する方法を説明しました。次に、jQueryを使用して電卓の機能を実装する方法を説明します。

jQueryの追加

このプロジェクトでは、ユーザーがボタンをクリックしたときにイベントに応答するためにjQueryを使用します。jQueryライブラリをアプリケーションに追加する必要があります。cdnjsCDNライブラリを使用してjQueryを追加します。

index.htmlファイルの最後に、次のスクリプトタグを追加します。

演算子と数字ボタンの処理

コードを書く前に、電卓の背後にある機能をどのように処理するかについてブレインストーミングすることにしました。電卓のボタンを演算子数値の2つのグループに分けます。

数字ボタンは0〜9の数字に対応します。他のすべてのボタンは演算子です。

操作のグローバル変数

次のステップは、グローバル変数がどのように必要になるかを判断することです。グローバル変数は、電卓の機能を保持します。たとえば、ユーザーは次のシーケンスを入力できます。

2 + 3 = 5

同様に、ユーザーは次のはるかに長いシーケンスを入力できます。

2 + 3 * 4 / 5 - 6 = -2

グローバル変数を最初に検討するときは、ユーザーがキーを押すたびに新しい変数を作成することを検討する場合があります。これはあまり効率的ではありません。ユーザーがキーを押したときに、誰が変数の数を知っているかを追跡する必要があります。

これを改善するために、4つのグローバル変数のみを必要とするように物事を単純化することができます。

  • num1
  • num2
  • オペレーター
  • 合計

これがどのように機能するかをお見せしましょう。ユーザーが最初に押した数値は、変数num1に格納されます。演算子(つまり、+、—、*、/またはenter)は演算子に格納されます。次に入力された数値は変数2に格納されます。2番目の演算子が入力されると、合計が計算されます。合計は変数totalに格納されます。

論理的な質問は、ユーザーが入力する3番目または4番目の数字をどうするかということです。簡単な答えは、num1とnum2を再利用することです。

合計が計算されたら、num1の値を合計に置き換えることができます。次に、演算子とnum2変数を空にする必要があります。上から2番目の例でこれを見ていきましょう:

2 + 3 * 4 / 5 - 6 = -2// num1 is assigned value of 2// operator is assigned value of +// num2 is assigned value of 3// total is assigned the value of 5// num1 is assigned the value of 5// num2 and operator are cleared// operator is assigned value of *// num2 is assigned value of 4// total is assigned value of 20// num1 is assigned value of 20// num2 and operator are cleared// operator is stored value of /// num2 is assigned value of 5// total is assigned value of 4// num1 is assigned value of 4// num2 and operator are cleared// operator is assigned value of -// num2 is assigned value of 6// total is assigned value of -2// num1 is assigned value of -2// num2 and operator are cleared// operator is assigned value of =

これで、これら4つの変数を使用して、ユーザーが押したボタンのすべての可能な組み合わせを処理できることがわかります。

ユーザーが押したキーを取得する

ロジックを確認したので、ユーザーが押したキーを処理するプロセスを開始する必要があります。index.htmlファイルの下部に、コードを保持するスクリプトタグを作成します。

最初のステップは、ユーザーが押したキーを取得することです。これは、電卓の1行にあるすべてのボタンを示すindex.htmlファイルのスニペットです。

 1 2 3 + 

数値であろうと演算子であろうと、すべてのボタンは<; / button>要素を使用して定義されます。これを使用して、ユーザーがボタンをクリックしたときにキャッチできます。

jQueryでは、ボタンクリック機能を使用できます。ボタンがクリックされると、関数にはイベントオブジェクトが渡されます。event.targetクリックされたボタンが含まれます。innerHTMLプロパティを使用してボタンの値を取得できます。

これは、ユーザーがクリックしたボタンをconsole.logするコードです。

$(document).ready(function() { $('button').on('click', function(e) { console.log('e', e.target.innerHTML); });});

コードをテストすると、押したキーの値が表示されます。これは、電卓のすべてのボタンで機能します。

グローバル変数の作成

押されたキーを判別できるようになったので、それらをグローバル変数に格納し始める必要があります。4つのグローバル変数を作成します。

let num1 = '';let num2 = '';let operator = '';let total = '';

クリック時のハンドリングボタン

ユーザーがボタンをクリックすると、数字または演算子をクリックします。そのため、2つの関数を作成します。

function handleNumber(num) { // code goes here}
function handleOperator(oper) { // code goes here}

以前のボタンクリック関数では、console.logを適切な関数の呼び出しに置き換えることができます。ボタンまたは演算子がクリックされたかどうかを判断するためにe.target.innerHTML、0から9の間であるかどうかを比較できます。クリックされた場合、ユーザーは数字をクリックしました。そうでない場合、ユーザーはオペレーターをクリックしました。

どのボタンがクリックされたかを確認できるようにするためのテストの最初のステップは次のとおりです。

$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { console.log('number'); } else { console.log('operator'); } });});

クリックされた各ボタンを識別していることに満足したら、console.logを適切な関数の呼び出しに置き換えることができます。

$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { handleNumber(btn); } else { handleOperator(btn); } });});

数字ボタンの取り扱い

ユーザーが番号を押すと、その番号はnum1またはnum2変数のいずれかに割り当てられます。num1には値のが割り当てられます''。これを使用して、番号を割り当てる変数を決定できます。num1が空の場合、番号を割り当てます。それ以外の場合は、num2に割り当てます。

これが私のhandleNumber関数がどのように見えるかです:

function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; }}

オペレーターボタンの取り扱い

オペレーターボタンが押されたときに処理する機能は非常にシンプルです。必要なのは、演算子変数に値を割り当てることだけです。

これが私のhandleOperator関数がどのように見えるかです:

function handleOperator(oper) { operator = oper;}

ボタンの表示

The next step is to actually display the button pressed to the user. If you check out the functionality of the calculator on your phone, you will notice it only displays numbers. If a user presses the + key, it is not displayed.

In our index.html file, we have a div with a class of 'calc-result-input' that displays our input. We will use this to display numbers to our users.

Since we have separated out our calculator activity into functions, we will create a function to display the button.

Here is what my displayButton function looks like:

function displayButton(btn) { $('.calc-result-input').text(btn);}

Since we only update the display when the user presses a number, we can call the displayButton function from within the handleNumber function.

Here is what my handleNumber function looks like now:

function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; } displayButton(num);}

Handling totals

The next step is to calculate a total. A total is only calculated after a user presses an operator after having a value assigned to num1 and num2.

For example, if the user enters:

2 + 3 =

We want to sum num1 and num2 and display the total.

If the user enters:

2 - 1 =

We want to subtract num2 from num1 and display the total.

We create a handleTotal function to handle this. This function will create a total based on the operator pressed. Since there are multiple operators that can be pressed, we will use a case statement to handle them.

For simplicity’s sake, I am only going to show the code to handle when the user clicks the + operator button.

Here is the handleTotal function:

function handleTotal() { switch (operator) { case '+': total = +num1 + +num2; displayButton(total); break; }}

Converting String to Number for calculation

When we get the innerHTML of the button that is pressed, we get a string value. To sum two variables, they need to be converted to a number. There is a shorthand notation in JavaScript that will convert a string to a number by prefixing the variable with a + sign. You can see where I am doing this conversion on this line:

total = +num1 + +num2;

When to call handleTotal function

Now that we have a function to calculate the total, we need to call it at the appropriate time. We only calculate total after a user enters their second operator.

To handle this we will need to make a change to our existing handleOperator function. Previously, we were assigning the operator variable the value of the operator button the user clicked. Now we need to know if this is the first operator the user has clicked or not. We don’t calculate a total when the user clicks on the first operator.

To account for this, we can check to see if the operator variable has a value of ''. If so, this is the first operator. If operator has a value, then we will want to calculate a total.

Here is what the handleOperator() function looks like now:

function handleOperator(oper) { if (operator === '') { operator = oper; } else { handleTotal(); operator = oper; } }

Moving Script to app.js file

Currently our HTML and JavaScript code are all contained in the index.html file. We want to split out the logic into a separate file. I create a new file called app.js.

I copy the entire contents of the pt> tag into this file. I delete the opening &lt;script> tag and closing tag in my index.html file.

The last thing we need to do is to tell our index.html file where our scripts are. We do this by adding this line below the pt> tag that loads jQuery at the bottom of the index.html file:

Final Files

I now have these three files:

  • index.html
  • app.js
  • style.css

The index.html file is used to display the calculator to the user on the web page.

The style.css is used to style my calculator. Please review my previous article that talks about using the CSS border-radius property to style the calculator.

The app.js file contains the logic behind the calculator.

Here is what my app.js file looks like:

let num1 = '';let num2 = '';let operator = '';let total = '';
$(document).ready(function() { $('button').on('click', function(e) { let btn = e.target.innerHTML; if (btn >= '0' && btn <= '9') { handleNumber(btn); } else { handleOperator(btn); } });});
function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; } displayButton(num);}
function handleOperator(oper) { if (operator === '') { operator = oper; } else { handleTotal(); operator = oper; }}
function handleTotal() { switch (operator) { case '+': total = +num1 + +num2; displayButton(total); break; case '-': total = +num1 - +num2; displayButton(total); break; case '/': total = +num1 / +num2; displayButton(total); break; case 'X': total = +num1 * +num2; displayButton(total); break; } updateVariables();}
function displayButton(btn) { $('.calc-result-input').text(btn);}
function updateVariables() { num1 = total; num2 = '';}

Summary

Our calculator works, but only if the user clicks the + operator. You can add to the functionality in the handleTotal function to account for all operators. I have all the functionality in my repo which you can find here.

Further Readings

Breadth First Search in JavaScript — The two most common methods of searching a graph or a tree are depth first search and breadth first search. This story shows you how to use a breadth first search of a graph or a tree.

Instantiation Patterns in JavaScript — Instantiation patterns are ways to create something in JavaScript. JavaScript provides four different methods to create objects. Learn how to create all four in this article.

Using Node.js & Express.js to save data to MongoDB Database — The MEAN stack is used to describe development using MongoDB, Express.js, Angular.jS and Node.js. In this tutorial I will show you how to use Express.js, Node.js and MongoDB.js. We will be creating a very simple Node application, that will allow users to input data that they want to store in a MongoDB database.

Original text