По-рано ви показах как да използвате CSS свойството border-radius, за да създадете следния калкулатор. Сега ще ви покажа как да използвате jQuery, за да реализирате функционалността на калкулатора.
Добавяне на jQuery
Ще използваме jQuery в този проект, за да реагираме на събития, когато потребител щракне върху бутон. Трябва да добавим библиотеката jQuery към нашето приложение. Ще използвам cdnjs CDN библиотеката, за да добавя jQuery.
В долната част на моя файл index.html ще добавя следния таг на скрипта:
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Работа с оператор срещу цифрови бутони
Преди да напиша своя код, реших да обмисля как ще се справя с функционалността зад калкулатора. Разделям бутоните на калкулатора на две групи:оператори число.
Цифровият бутон би съответствал на числата 0–9. Всички останали бутони са оператори.
Глобални променливи за нашата работа
Следващата стъпка е да определим как глобалните променливи ще ни трябват. Глобалните променливи ще поддържат функционалността на нашия калкулатор. Например потребителят може да въведе следната последователност:
2 + 3 = 5
По същия начин потребителят може да въведе тази много по-дълга последователност:
2 + 3 * 4 / 5 - 6 = -2
Когато разглеждаме първоначално глобални променливи, може да обмислим създаването на нова променлива всеки път, когато потребителят натисне клавиш. Това не би било много ефективно. Ще трябва да следим кой знае колко променливи, докато потребителят натиска клавиши.
За да подобрим това, можем да опростим нещата, за да се нуждаем само от четири глобални променливи:
- номер1
- номер2
- оператор
- обща сума
Нека ви покажа как работи това. Първият номер, който потребителят натисне, се съхранява в променлива num1. Операторът (т.е. +, —, *, / или enter) се съхранява в оператора. Следващото въведено число се съхранява в променлива 2. След като бъде въведен вторият оператор, общата сума се изчислява. Общата сума се съхранява в променливата total.
Логичен въпрос би бил какво правите с третото или четвъртото число, което потребителят въвежда? Простият отговор е, че използваме повторно 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, който показва всички бутони на един ред на калкулатора:
<div class="flex-row">
<button class="calc-btn">1</button>
<button class="calc-btn">2</button>
<button class="calc-btn">3</button>
<button class="calc-btn">+</button>
</div>
Всеки бутон, независимо дали е число или оператор, се дефинира с помощта на елемент <button></button>. Можем да използваме това, за да уловим, когато потребител щракне върху бутон.
В jQuery можете да имате функция за щракване върху бутон. Когато се щракне върху бутон, на функцията се предава обект на събитие. event.target ще съдържа бутона, върху който сте щракнали. Мога да получа стойността на бутона, като използвам свойството innerHTML.
Ето кода, който ще регистрира console.log бутона, който потребителят щракне.
<script>
$(document).ready(function() {
$('button').on('click', function(e) {
console.log('e', e.target.innerHTML);
});
});
</script>
Сега, ако тествате кода, ще видите стойността на клавиша, който натискате. Това работи за всеки бутон в калкулатора.
Създаване на нашите глобални променливи
Сега, когато имаме способността да определим кой клавиш е бил натиснат, трябва да започнем да ги съхраняваме в нашите глобални променливи. Ще създам своите четири глобални променливи:
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;
}
Показване на бутони
Следващата стъпка е действителното показване на натиснатия бутон на потребителя. Ако проверите функционалността на калкулатора на телефона си, ще забележите, че показва само числа. Ако потребител натисне клавиша +, той не се показва.
В нашия файл index.html имаме div с клас 'calc-result-input', който показва нашия вход. Ще използваме това, за да показваме числа на нашите потребители.
Тъй като сме разделили нашата калкулаторна дейност на функции, ще създадем функция за показване на бутона.
Ето как изглежда моята функция displayButton:
function displayButton(btn) {
$('.calc-result-input').text(btn);
}
Тъй като актуализираме дисплея само когато потребителят натисне номер, можем да извикаме функцията displayButton от функцията handleNumber.
Ето как изглежда моята функция handleNumber сега:
function handleNumber(num) {
if (num1 === '') {
num1 = num;
} else {
num2 = num;
}
displayButton(num);
}
Обработка на общи суми
Следващата стъпка е да се изчисли общата сума. Общата сума се изчислява само след като потребител натисне оператор след присвояване на стойност на num1 и num2.
Например, ако потребителят въведе:
2 + 3 =
Искаме да сумираме num1 и num2 и да покажем общата сума.
Ако потребителят въведе:
2 - 1 =
Искаме да извадим num2 от num1 и да покажем общата сума.
Създаваме функция handleTotal, за да се справим с това. Тази функция ще създаде обща сума въз основа на натиснатия оператор. Тъй като има множество оператори, които могат да бъдат натиснати, ще използваме case оператор, за да ги обработим.
За по-голяма простота ще покажа само кода, който трябва да се обработи, когато потребителят щракне върху бутона на оператора +.
Ето функцията handleTotal:
function handleTotal() {
switch (operator) {
case '+':
total = +num1 + +num2;
displayButton(total);
break;
}
}
Преобразуване на низ в число за изчисление
Когато получим innerHTML на бутона, който е натиснат, получаваме стойност на низ. За да се сумират две променливи, те трябва да бъдат преобразувани в число. В JavaScript има съкратена нотация, която ще преобразува низ в число, като постави пред променливата знак +. Можете да видите къде правя това преобразуване на този ред:
total = +num1 + +num2;
Кога да се извика функцията handleTotal
Сега, когато имаме функция за изчисляване на общата сума, трябва да я извикаме в подходящия момент. Ние изчисляваме общата сума само след като потребителят въведе своя втори оператор.
За да се справим с това, ще трябва да направим промяна в нашата съществуваща функция handleOperator. Преди това присвоявахме на променливата на оператора стойността на бутона на оператора, който потребителят е щракнал. Сега трябва да знаем дали това е първият оператор, който потребителят е кликнал или не. Ние не изчисляваме обща сума, когато потребителят кликне върху първия оператор.
За да отчетем това, можем да проверим дали операторната променлива има стойност ''. Ако е така, това е първият оператор. Ако операторът има стойност, тогава ще искаме да изчислим обща сума.
Ето как изглежда функцията handleOperator() сега:
function handleOperator(oper) {
if (operator === '') {
operator = oper;
} else {
handleTotal();
operator = oper;
}
}
Преместване на скрипт към app.js файл
В момента нашият HTML и JavaScript код се съдържат във файла index.html. Искаме да разделим логиката в отделен файл. Създавам нов файл, наречен app.js.
Копирам цялото съдържание на маркера <script> в този файл. Изтривам отварящия таг <script> и затварящия таг </script> в моя файл index.html.
Последното нещо, което трябва да направим, е да кажем на нашия файл index.html къде са нашите скриптове. Правим това, като добавим този ред под тага <script>, който зарежда jQuery в долната част на файла index.html:
<script src="app.js"></script>
Финални файлове
Сега имам тези три файла:
- index.html
- app.js
- style.css
Файлът index.html се използва за показване на калкулатора на потребителя на уеб страницата.
style.css се използва за стилизиране на моя калкулатор. Моля, прегледайте предишната ми статия, която говори за „използване на свойството border-radius на CSS“ за стилизиране на калкулатора.
Файлът app.js съдържа логиката зад калкулатора.
Ето как изглежда моят файл app.js:
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 = '';
}
Резюме
Нашият калкулатор работи, но само ако потребителят кликне върху оператора +. Можете да добавите към функционалността във функцията handleTotal, за да отчетете всички оператори. Имам цялата функционалност в моето репо, което можете да намерите тук.
Допълнителни четения
Търсене първо в ширина в JavaScript — Двата най-често срещани метода за търсене в графика или дърво са първо търсене в дълбочина и първо търсене в ширина. Тази история ви показва как да използвате първо търсене в ширина на графика или дърво.
Модели за инстанция в JavaScript — Моделите за инстанция са начини да създадете нещо в JavaScript. JavaScript предоставя четири различни метода за създаване на обекти. Научете как да създадете и четирите в тази статия.
Използване на Node.js & Express.js за запазване на данни в MongoDB база данни — Стекът MEAN се използва за описание на разработката с помощта на MongoDB, Express.js, Angular.jS и Node.js. В този урок ще ви покажа как да използвате Express.js, Node.js и MongoDB.js. Ще създадем много просто приложение Node, което ще позволи на потребителите да въвеждат данни, които искат да съхраняват в база данни MongoDB.
