Как запрограммировать калькулятор с помощью jQuery

kak zaprogrammirovat kalkulyator s pomoshhyu jquery?v=1656637452

Прежде я показал вам, как использовать свойство CSS border-radius для создания следующего калькулятора. Теперь я покажу вам, как использовать jQuery для реализации функций калькулятора.

X7MbaFdBptj9fzN4SHHyJsslKfnEB6Fb1otG
Калькулятор с использованием функции CSS border-radius

Добавление 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

Рассматривая глобальные переменные вначале, мы могли бы разглядеть возможность сотворения новой переменной всякий раз, когда юзер нажимает кнопку. Это было бы не слишком эффективно. Нам пришлось бы отслеживать, кто знает сколько переменных, когда пользователь нажимает клавиши.

Чтобы улучшить это, мы можем упростить вещи, чтобы нам понадобилось всего четыре глобальные переменные:

Позвольте мне показать вам, как это работает. Первая цифра, которую пользователь нажимает, сохраняется в переменной 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>

Каждая кнопка, будь то число или оператор, определяется с помощью a <button><;/button> элемент. Мы можем использовать это для отслеживания, когда пользователь нажимает кнопку.

В jQuery можно иметь функцию нажатия кнопки. При нажатии кнопки функция передает объект события. The 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 и отразить результат.

Мы создаем a 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> в этот файл. Я удаляю орening &lt;script> тег and closing в моем файле index.html.

Последнее, что нам нужно сделать это сообщить файлу index.html, где находятся наши сценарии. Мы делаем это, добавляя эту строку ниже <script>, который загружает jQuery внизу файла index.html:

<script src="https://www.freecodecamp.org/news/programming-a-calculator-8263966a8019/app.js"></script>

Окончательные файлы

Сейчас у меня есть эти три файла:

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

The index.html файл используется для отображения калькулятора пользователя на веб-странице.

The style.css используется для стилизации моего калькулятора. Пожалуйста, см. предыдущую статью, которая рассказывает об использовании свойства CSS border-radius для стилизации калькулятора.

The 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.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *