Автор оригинала: Jennifer Bland.
Ранее я показал вам, как использовать CSS Horder-Radius Свойство для создания следующего калькулятора Отказ Теперь я покажу вам, как использовать jQuery для реализации функциональности калькулятора.
Добавление jquery.
Мы будем использовать jQuery в этом проекте, чтобы ответить на события, когда пользователь нажимает на кнопку. Нам нужно добавить библиотеку jQuery в наше приложение. Я буду использовать библиотеку CDN CDNJS, чтобы добавить jQuery.
В нижней части моего файла index.html я добавлю следующий тег скрипта:
Оператор обработки по номеру кнопки
Перед написанием моего кода я решил мозговой штурм, как я справился с функциональностью за калькулятором. Я разделяю кнопки на калькуляторе на две группы: Оператор и Номер Отказ
Номер кнопки будет соответствовать номерам 0-9. Все остальные кнопки являются операторами.
Глобальные переменные для нашей операции
Следующим шагом является определение того, как понадобится глобальные переменные. Глобальные переменные будут проводить функциональность нашего калькулятора. Например, пользователь может ввести следующую последовательность:
2 + 3 = 5
Аналогично, пользователь может ввести эту гораздо более длинную последовательность:
2 + 3 * 4 / 5 - 6 = -2
При первоначальном рассмотрении глобальных переменных мы можем рассмотреть возможность создания новой переменной каждый раз, когда пользователь нажимает клавишу. Это не было бы очень эффективным. Нам пришлось бы отслеживать, кто знает, сколько переменных, как пользователь нажимает клавиши.
Чтобы улучшить это, мы можем упростить все, что нужно только для четырех глобальных переменных:
- num1.
- um2.
- оператор
- общее
Позвольте мне показать вам, как это работает. Первое число пользовательских прессов хранится в переменной NUM1. Оператор (I.E. +, -, *,/или ввод) хранится в операторе. Следующий введенный номер хранится в переменной 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, который показывает все кнопки на одну строку калькулятора:
Каждая кнопка, будь то номер или оператор, определяется с помощью <кнопка> <
;/кнопка> элемент. Мы можем использовать это, чтобы поймать, когда пользователь нажимает на кнопку.
В jQuery вы можете иметь функцию нажмите кнопку. Когда кнопка нажата, функция пропускается объектом события. Event.Target
будет содержать кнопку, которая нажала. Я могу получить значение кнопки, используя innerhtml
имущество.
Вот код, который будет Console.log кнопку, который пользователь нажимает.
Теперь, если вы проверяете код, вы увидите значение ключа, которое вы нажимаете. Это работает для каждой кнопки в калькуляторе.
Создание наших глобальных переменных
Теперь, когда у нас есть возможность определить, какой ключ был нажат, нам нужно начать хранить их в наших глобальных переменных. Я собираюсь создать свои четырех глобальных переменных:
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.
Вот как выглядит моя функция обработки подушечка:
function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; }}
Обработка оператора кнопки
Наша функция для обработки, когда нажата кнопка оператора, очень проста. Все, что нам нужно сделать, это назначить значение нашей переменную оператора.
Вот как выглядит моя функция поведения:
function handleOperator(oper) { operator = oper;}
Отображение кнопок
Следующим шагом является фактически отображение кнопки, нажатой пользователю. Если вы проверяете функциональность калькулятора на вашем телефоне, вы заметите, что это только отображает номера. Если пользователь нажимает +
Ключ, он не отображается.
В нашем файле index.html у нас есть div с классом «Результат Calc-result-input»
Это отображает наш вход. Мы будем использовать это для отображения номеров нашим пользователям.
Поскольку мы разделили нашу активность калькулятора в функции, мы создадим функцию для отображения кнопки.
Вот как выглядит моя функция DisplayButton:
function displayButton(btn) { $('.calc-result-input').text(btn);}
Поскольку мы обновляем только дисплей только тогда, когда пользователь нажимает номер, мы можем позвонить в DisplayButton
Функция изнутри Руководство
функция.
Вот как выглядит моя функция обработки подушечка:
function handleNumber(num) { if (num1 === '') { num1 = num; } else { num2 = num; } displayButton(num);}
Обработка итогов
Следующим шагом является вычисление всего. Всего рассчитывается только после того, как пользователь нажимает оператора после определения значения, назначенного NUM1 и num2.
Например, если пользователь входит:
2 + 3 =
Мы хотим суммировать NUM1 и NUM2 и отображать общую сумму.
Если пользователь входит:
2 - 1 =
Мы хотим вычитать NUM2 от NUM1 и отображать общий объем.
Мы создаем Handletotal
функция для обработки этого. Эта функция создаст общее на основе нажатой оператора. Поскольку есть несколько операторов, которые могут быть нажаты, мы будем использовать оператор регистрации для обработки их.
Для простоты я собираюсь показать код для обработки, когда пользователь нажимает на +
Кнопка оператора.
Вот функция Handletototal:
function handleTotal() { switch (operator) { case '+': total = +num1 + +num2; displayButton(total); break; }}
Преобразование строки на номер для расчета
Когда мы получаем innerhtml
нажатой кнопки, мы получаем строковое значение. Сумма 2 переменных, они должны быть преобразованы в число. В JavaScript есть сокращение обозначения, которая преобразует строку в число, префиксировав переменной с помощью +
знак. Вы можете увидеть, где я делаю это преобразование в этой строке:
total = +num1 + +num2;
Когда вызвать функцию Handletotal
Теперь, когда у нас есть функция для расчета общего количества, нам нужно позвонить в соответствующее время. Мы только рассчитываем всего после того, как пользователь вступает в их второй оператор.
Чтобы справиться с этим, нам нужно будет вносить изменения в нашу существующую Рукоцератор
функция. Ранее мы присваиваем переменную оператора значение кнопки оператора, который пользователь нажал пользователь. Теперь нам нужно знать, если это первый оператор, который пользователь нажал или нет. Мы не рассчитываем все, когда пользователь нажимает на первый оператор.
Чтобы объяснить это, мы можем проверить, имеет ли переменную оператора значение ''
Отказ Если это так, это первый оператор. Если у оператора есть значение, то мы захочем рассчитать общее количество.
Вот что выглядит как функция Handeroperator ():
function handleOperator(oper) { if (operator === '') { operator = oper; } else { handleTotal(); operator = oper; } }
Перемещение скрипта в файл App.js
В настоящее время наш HTML и JavaScript Code содержится в файле index.html. Мы хотим разделить логику в отдельный файл. Я создаю новый файл под названием app.js
Отказ
Я копирую все содержимое ening & l
t; скрипт> тег и ближний
NG Тег в моем файле index.html.
Последнее, что нам нужно сделать, это сказать наш файл index.html, где наши сценарии. Мы делаем это, добавив эту строку ниже
Окончательные файлы
У меня сейчас есть эти три файла:
- index.html.
- app.js.
- still.css
index.html Файл используется для отображения калькулятора к пользователю на веб-странице.
still.css используется для стиля моего калькулятора. Пожалуйста, просмотрите мою предыдущую статью, которая рассказывает о Используя свойство CSS Border-Radius Для стиля калькулятора.
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 – Средний стек используется для описания развития с использованием MongoDB, Express.js, angular.js и node.js. В этом руководстве я покажу вам, как использовать Express.js, node.js и mongodb.js. Мы будем создавать очень простое приложение узла, которое позволит пользователям вводить данные, которые они хотят хранить в базе данных MongoDB.