Як запрограмувати калькулятор за допомогою jQuery

Раніше я показав вам, як використовувати властивість CSS border-radius для створення наступного калькулятора. Зараз я покажу вам, як використовувати jQuery для реалізації функціональних можливостей калькулятора.

Додавання jQuery

У цьому проекті ми використовуватимемо jQuery для реагування на події, коли користувач натискає кнопку. Нам потрібно додати бібліотеку jQuery до нашого додатку. Я буду використовувати бібліотеку cdnjs CDN для додавання jQuery.

Внизу мого файлу index.html я додаю наступний тег скрипта:

Обробка оператора проти цифрових кнопок

Перш ніж писати свій код, я вирішив подумати, як я буду працювати з функціоналом калькулятора. Кнопки на калькуляторі я поділяю на дві групи: оператор і номер .

Цифрова кнопка відповідала б числам 0–9. Усі інші кнопки є операторами.

Глобальні змінні для нашої роботи

Наступним кроком є ​​визначення того, як можуть нам знадобитися глобальні змінні. Глобальні змінні містять функціональність нашого калькулятора. Наприклад, користувач може ввести наступну послідовність:

2 + 3 = 5

Так само користувач може ввести таку набагато довшу послідовність:

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

Спочатку розглядаючи глобальні змінні, ми могли б розглянути можливість створення нової змінної кожного разу, коли користувач натискає клавішу. Це було б не дуже ефективно. Ми повинні були б відстежувати, хто знає, скільки змінних, як користувач натискає клавіші.

Щоб покращити це, ми можемо спростити речі, щоб мати лише чотири глобальні змінні:

  • num1
  • num2
  • оператора
  • усього

Дозвольте мені показати вам, як це працює. Перше число, яке натискає користувач, зберігається у змінній num1. Оператор (тобто +, -, *, / або enter) зберігається в операторі. Наступне введене число зберігається у змінній 2. Після введення другого оператора обчислюється сума. Сума зберігається у змінній total.

Логічним запитанням було б, що ви робите з третім чи четвертим числом, яке вводить користувач? Проста відповідь полягає в тому, що ми повторно використовуємо num1 та num2.

Після того, як загальна сума була розрахована, ми можемо замінити значення в num1 на total. Потім нам потрібно було б очистити оператор та змінні 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.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