jQuery로 계산기를 프로그래밍하는 방법

이전에 CSS border-radius 속성을 사용하여 다음 계산기를 만드는 방법을 설명했습니다. 이제 jQuery를 사용하여 계산기의 기능을 구현하는 방법을 보여 드리겠습니다.

jQuery 추가

이 프로젝트에서는 사용자가 버튼을 클릭 할 때 이벤트에 응답하기 위해 jQuery를 사용할 것입니다. 애플리케이션에 jQuery 라이브러리를 추가해야합니다. cdnjs CDN 라이브러리를 사용하여 jQuery를 추가합니다.

index.html 파일 맨 아래에 다음 스크립트 태그를 추가합니다.

연산자 대 숫자 버튼 처리

코드를 작성하기 전에 계산기의 기능을 어떻게 처리할지 브레인 스토밍하기로 결정했습니다. 계산기의 버튼을 연산자숫자의 두 그룹으로 나눕니다 .

숫자 버튼은 숫자 0-9에 해당합니다. 다른 모든 버튼은 연산자입니다.

작업을위한 전역 변수

다음 단계는 필요한 전역 변수를 결정하는 것입니다. 전역 변수는 계산기의 기능을 유지합니다. 예를 들어 사용자는 다음 순서를 입력 할 수 있습니다.

2 + 3 = 5

마찬가지로 사용자는 훨씬 더 긴 시퀀스를 입력 할 수 있습니다.

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

처음에 전역 변수를 고려할 때 사용자가 키를 누를 때마다 새 변수를 만드는 것을 고려할 수 있습니다. 이것은 매우 효율적이지 않습니다. 사용자가 키를 누를 때 얼마나 많은 변수를 알고 있는지 추적해야합니다.

이를 개선하기 위해 4 개의 전역 변수 만 필요하도록 단순화 할 수 있습니다.

  • num1
  • num2
  • 운영자
  • 합계

이것이 어떻게 작동하는지 보여 드리겠습니다. 사용자가 누르는 첫 번째 숫자는 변수 num1에 저장됩니다. 연산자 (예 : +, —, *, / 또는 Enter)는 연산자에 저장됩니다. 입력 한 다음 숫자는 변수 2에 저장됩니다. 두 번째 연산자를 입력하면 합계가 계산됩니다. 합계는 변수 합계에 저장됩니다.

논리적 인 질문은 사용자가 입력 한 세 번째 또는 네 번째 숫자로 무엇을합니까? 간단한 대답은 num1과 num2를 재사용한다는 것입니다.

합계가 계산되면 num1의 값을 합계로 바꿀 수 있습니다. 그런 다음 연산자와 num2 변수를 비워야합니다. 위의 두 번째 예를 통해이를 살펴 보겠습니다.

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 파일의 맨 아래에 코드를 담을 스크립트 태그를 만들겠습니다.

첫 번째 단계는 사용자가 누른 키를 가져 오는 것입니다. 다음은 계산기의 한 행에있는 모든 버튼을 보여주는 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); });});

이제 코드를 테스트하면 누른 키의 값이 표시됩니다. 이것은 계산기의 모든 버튼에 적용됩니다.

글로벌 변수 만들기

이제 어떤 키를 눌렀는지 확인할 수 있으므로 전역 변수에 저장을 시작해야합니다. 네 개의 전역 변수를 만들 것입니다.

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

클릭시 처리 버튼

사용자가 버튼을 클릭하면 번호 나 연산자를 클릭하게됩니다. 이러한 이유로 두 가지 기능을 만들 것입니다.

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

이전의 버튼 클릭 기능에서 console.log를 적절한 기능에 대한 호출로 바꿀 수 있습니다. 버튼이나 연산자가 클릭되었는지 확인하기 위해 e.target.innerHTML0에서 9 사이인지 비교해 볼 수 있습니다. 그렇다면 사용자가 숫자를 클릭 한 것입니다. 그렇지 않은 경우 사용자가 연산자를 클릭했습니다.

Here is my initial step to test to make sure I can tell which button was clicked:

$(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'); } });});

Once I am satisfied that I am identifying each button clicked, I can replace the console.log with a call to the appropriate function:

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

Handling number buttons

When a user presses a number, it will be assigned to either num1 or num2 variable. num1 is assigned value of ''. We can use this to determine what variable to assign the number. If num1 is empty then we assign the number to it. Otherwise, we assign it to num2.

Here is what my handleNumber function looks like:

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

Handling operator buttons

Our function to handle when an operator button is pressed is very simple. All we need to do is to assign the value to our operator variable.

Here is what my handleOperator function looks like:

function handleOperator(oper) { operator = oper;}

Displaying Buttons

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