Код калькулятора: Калькулятор на python / Хабр

)0008 = Tk. button (Master = , текст = "=" , PADX = 15 ,

=

998 98 98 98 98 98 =

=

=

1111119 5 , ширина = , команда = равна)

Button_equal.grid (строка = 7 , столбец = 7 , столбец 0007 = 0 , Columnspan = 3 , PADY = 2 )

Window. mainloop ()

114595959595959595

Это грандиозная статья, в которой вы узнаете, как создать калькулятор с нуля. Мы сосредоточимся на JavaScript, который вам нужно написать, — как подумать о создании калькулятора, как написать код и, наконец, как очистить ваш код.

К концу статьи вы должны получить калькулятор, который работает точно так же, как калькулятор iPhone (без функций +/- и процентов).

Предварительные условия

Перед тем, как приступить к выполнению урока, убедитесь, что вы хорошо владеете JavaScript. Как минимум, вам нужно знать следующие вещи:

1. Операторы if/else
2. Циклы For
3. Функции JavaScript
4. Функции со стрелками
5. && и || операторы
6. Как изменить текст с помощью свойства textContent
7. Как добавить прослушиватели событий с шаблоном делегирования событий урок. Это хорошая практика, потому что вы научитесь думать как разработчик.

   Вернитесь к этому уроку, как только вы попытаетесь в течение часа (неважно, преуспеете вы или потерпите неудачу. Когда вы пытаетесь, вы думаете, и это поможет вам усвоить урок в два раза быстрее).

   Итак, давайте начнем с понимания того, как работает калькулятор.

   Создание калькулятора

   Сначала мы хотим построить калькулятор.

   Калькулятор состоит из двух частей: дисплея и клавиш.

    <класс div=”калькулятор”>
     
   0
     
    … 
    

   Мы можем использовать CSS Grid для создания ключей, так как они расположены в формате сетки. Это уже сделано за вас в стартовом файле. Вы можете найти начальный файл на этой ручке.

    .calculator__keys {
     отображение: сетка;
     /* другой необходимый CSS */
   } 

   Чтобы помочь нам идентифицировать ключи оператора, десятичного числа, очистки и равенства, мы собираемся предоставить атрибут действия с данными, который описывает, что они делают.

    <дел>
     +
     -×
     ÷7
     <кнопка>8
     <кнопка>9
     <кнопка>4
     <кнопка>5
     <кнопка>6
     <кнопка>1
     <кнопка>2
     <кнопка>3
     <кнопка>0
     .
     AC
     =
    

   Прослушивание нажатий клавиш

   Когда человек берет в руки калькулятор, может произойти пять вещей. Они могут поразить:

   1. цифровая клавиша (0–9)
   2. клавиша оператора (+, -, ×, ÷)
   3. десятичная клавиша
   4. клавиша равенства
   5. клавиша очистки

   Первые шаги по созданию этого калькулятора должны иметь возможность (1) прослушивать все нажатия клавиш и (2) определять тип нажатой клавиши. В этом случае мы можем использовать шаблон делегирования событий для прослушивания, поскольку все ключи являются дочерними элементами .calculator__keys .

    константный калькулятор = document.querySelector(‘.calculator’)
   константные ключи = калькулятор.querySelector('.calculator__keys')
   keys.addEventListener («щелчок», e => {
    если (e.target.matches('кнопка')) {
      // Сделай что-нибудь
    }
   }) 

   Далее мы можем использовать атрибут data-action , чтобы определить тип нажатой клавиши.

    постоянный ключ = e.target
   const action = key.dataset.action 

   Если ключ не имеет атрибута data-action , он должен быть числовым ключом.

    если (!действие) {
     console.log('цифровая клавиша!')
   } 

   Если ключ имеет действие данных , то есть добавить , вычесть , умножить или разделить , мы знаем, что ключ является оператором.

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     console. log('Ключ оператора!')
   } 

   Если ключ data-action равен decimal , мы знаем, что пользователь нажал на десятичный ключ.

   Следуя тому же мыслительному процессу, если ключ data-action равен clear , мы знаем, что пользователь нажал на клавишу очистки (та, которая говорит AC). Если ключ data-action равен , вычислить , мы знаем, что пользователь нажал на клавишу равенства.

    если (действие === 'десятичный') {
     console.log('десятичный ключ!')
   }
   если (действие === 'очистить') {
     console.log('очистить ключ!')
   }
   если (действие === 'вычислить') {
     console.log('равный ключ!')
   } 

   На этом этапе вы должны получить ответ console.log от каждой клавиши калькулятора.

   РЕКЛАМА

   Путь счастья

   Давайте представим, что сделал бы обычный человек, взяв в руки калькулятор. Это «то, что сделал бы обычный человек», называется путем 91 594 счастья.

   Давайте назовем нашего обычного человека Мэри.

   Когда Мэри берет в руки калькулятор, она может нажать любую из этих клавиш:

   1. цифровую клавишу (0–9)
   2. клавишу оператора (+, -, ×, ÷)
   3. десятичную клавишу
   4. равный ключ
   5. ключ очистки

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

   Когда пользователь нажимает цифровую клавишу

   В этот момент, если калькулятор показывает 0 (число по умолчанию), целевое число должно заменить ноль.

   Если калькулятор показывает ненулевое число, целевое число должно быть добавлено к отображаемому числу.

   Здесь нам нужно знать две вещи:

   1. Номер нажатой клавиши
   2. Текущий отображаемый номер

   Мы можем получить эти два значения через свойство textContent нажатой клавиши и . калькулятор__дисплей соответственно.

    const display = document. querySelector('.calculator__display')
   keys.addEventListener('щелчок', e => {
     если (e.target.matches('кнопка')) {
       постоянный ключ = e.target
       константное действие = key.dataset.action
       константа keyContent = key.textContent
       const displayNum = display.textContent
       // ...
     }
   }) 

   Если калькулятор показывает 0, мы хотим заменить дисплей калькулятора на нажатую клавишу. Мы можем сделать это, заменив свойство textContent дисплея.

    если (!действие) {
     если (отображаемое число === '0') {
       display.textContent = ключевое содержимое
     }
   } 

   Если калькулятор показывает ненулевое число, мы хотим добавить нажатую клавишу к отображаемому числу. Чтобы добавить число, мы объединяем строку.

    если (!действие) {
     если (отображаемое число === '0') {
       display.textContent = ключевое содержимое
     } еще {
       display.textContent = отображаемый номер + keyContent
     }
   } 

   В этот момент Мэри может нажать любую из этих клавиш:

   1. Десятичная клавиша
   2. Клавиша оператора

   Допустим, Мэри нажимает десятичную клавишу.

   Когда пользователь нажимает десятичную клавишу

   Когда Мэри нажимает десятичную клавишу, на дисплее должно появиться десятичное число. Если Мэри нажимает какое-либо число после нажатия десятичной клавиши, это число также должно быть добавлено на дисплей.

   Чтобы создать этот эффект, мы можем объединить . на отображаемый номер.

    если (действие === 'десятичный') {
     display.textContent = отображаемый номер + '.'
   } 

   Далее, предположим, Мэри продолжает вычисления, нажимая клавишу оператора.

   РЕКЛАМА

   Когда пользователь нажимает клавишу оператора

   Если Мэри нажимает клавишу оператора, оператор должен быть выделен, чтобы Мэри знала, что оператор активен.

   Для этого мы можем добавить класс is-depressed к ключу оператора.

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     key.classList.add('нажата')
   } 

   Как только Мэри нажмет клавишу оператора, она нажмет еще одну цифровую клавишу.

   Когда пользователь нажимает цифровую клавишу после клавиши оператора

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

   Чтобы снять состояние нажатия, мы удаляем класс is-depressed из всех клавиш с помощью цикла forEach :

    keys.addEventListener('click', e => {
     если (e.target.matches('кнопка')) {
       постоянный ключ = e.target
       // ...
       
       // Удалить класс .is-depressed из всех ключей
       Array.from(key.parentNode.children)
         .forEach(k => k.classList.remove('в депрессии'))
     }
   }) 

   Далее мы хотим обновить дисплей до нажатой клавиши. Прежде чем мы это сделаем, нам нужен способ определить, является ли предыдущая клавиша клавишей оператора.

   Один из способов сделать это — использовать настраиваемый атрибут. Давайте назовем этот пользовательский атрибут data-previous-key-type .

    константный калькулятор = document.querySelector('.calculator')
   // ...
   keys.addEventListener('щелчок', e => {
     если (e.target.matches('кнопка')) {
       // ...
       
       если (
         действие === 'добавить' ||
         действие === 'вычесть' ||
         действие === 'умножить' ||
         действие === 'разделить'
       ) {
         key.classList.add('нажата')
         // Добавляем пользовательский атрибут
         calculate.dataset.previousKeyType = 'оператор'
       }
     }
   }) 

   Если previousKeyType является оператором, мы хотим заменить отображаемый номер номером, на который нажали.

    константа предыдущаяKeyType = калькулятор.набор данных.previousKeyType
   если (! Действие) {
     if (displayedNum === '0' || previousKeyType === 'operator') {
       display.textContent = ключевое содержимое
     } еще {
       display.textContent = отображаемый номер + keyContent
     }
   } 

   Далее, допустим, Мэри решает завершить свои вычисления, нажав клавишу равенства.

   Когда пользователь нажимает клавишу равенства

   Когда Мария нажимает клавишу равенства, калькулятор должен вычислить результат, который зависит от трех значений:

   1. первое число введенное в калькулятор
   2. оператор
   3. второе число введенное в калькулятор

   После расчета результат должен заменить отображаемое значение.

   На данный момент мы знаем только второе число — то есть текущее отображаемое число.

    если (действие === 'вычислить') {
     const secondValue = отображаемое число
     // ...
   } 

   Чтобы получить первое число , нам нужно сохранить отображаемое значение калькулятора, прежде чем мы его очистим. Один из способов сохранить это первое число — добавить его к пользовательскому атрибуту при нажатии кнопки оператора.

   Чтобы получить оператор , мы также можем использовать ту же технику.

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     // ...
     калькулятор.dataset.firstValue = отображаемое число
     калькулятор.набор данных.оператор = действие
   } 

   Получив три нужных нам значения, мы можем выполнить расчет. В итоге мы хотим, чтобы код выглядел примерно так:

    if (action === 'calculate') {
     const firstValue = калькулятор. dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
     display.textContent = вычислить (первое значение, оператор, второе значение)
   } 

   Это означает, что нам нужно создать функцию вычисления . Он должен принимать три параметра: первое число, оператор и второе число.

    const вычислить = (n1, оператор, n2) => {
     // Выполняем расчет и возвращаем рассчитанное значение
   } 

   Если оператор добавить , мы хотим сложить значения вместе. Если оператор вычесть , мы хотим вычесть значения и так далее.

    const вычислить = (n1, оператор, n2) => {
     пусть результат = ''
     
     если (оператор === 'добавить') {
       результат = n1 + n2
     } иначе если (оператор === 'вычесть') {
       результат = n1 - n2
     } иначе если (оператор === 'умножить') {
       результат = n1 * n2
     } иначе если (оператор === 'разделить') {
       результат = n1 / n2
     }
     
     вернуть результат
   } 

   Помните, что firstValue и secondValue на данный момент являются строками. Если вы добавите строки вместе, вы соедините их ( 1 + 1 = 11 ).

   Итак, перед вычислением результата мы хотим преобразовать строки в числа. Мы можем сделать это с помощью двух функций parseInt и parseFloat .

   • parseInt преобразует строку в целое число .
   • parseFloat преобразует строку в float (это означает число с десятичными разрядами).

   Для калькулятора нам понадобится число с плавающей запятой.

    const вычислить = (n1, оператор, n2) => {
     пусть результат = ''
     
     если (оператор === 'добавить') {
       результат = parseFloat(n1) + parseFloat(n2)
     } иначе если (оператор === 'вычесть') {
       результат = parseFloat(n1) - parseFloat(n2)
     } иначе если (оператор === 'умножить') {
       результат = parseFloat(n1) * parseFloat(n2)
     } иначе если (оператор === 'разделить') {
       результат = parseFloat(n1) / parseFloat(n2)
     }
     
     вернуть результат
   } 

   Вот и все на счастливый путь!

   Вы можете получить исходный код для счастливого пути по этой ссылке (прокрутите вниз и введите свой адрес электронной почты в поле, и я отправлю исходные коды прямо на ваш почтовый ящик).

   РЕКЛАМА

   Пограничные случаи

   Счастливого пути недостаточно. Чтобы создать надежный калькулятор, вам нужно сделать его устойчивым к странным шаблонам ввода. Для этого вам нужно представить нарушителя спокойствия, который пытается сломать ваш калькулятор, нажимая клавиши в неправильном порядке. Назовем этого нарушителя спокойствия Тим.

   Тим может нажимать эти клавиши в любом порядке:

   1. Цифровая клавиша (0–9)
   2. Клавиша оператора (+, -, ×, ÷)
   3. Десятичная клавиша
   4. Клавиша равенства
   5. Очистка key

   Что произойдет, если Тим нажмет десятичную клавишу

   Если Тим нажмет десятичную клавишу, когда на дисплее уже отображается десятичная точка, ничего не должно произойти.

   Здесь мы можем проверить, что отображаемое число содержит . с включает метод .

   включает строк проверки для данного совпадения. Если строка найдена, возвращается true ; если нет, возвращается false .

   Примечание : включает с учетом регистра.

    // Пример включения работы.
   const string = 'Гамбургеры очень вкусные!'
   const hasExclaimation = string.includes('!')
   console.log(hasExclaimation) // true 

   Чтобы проверить, есть ли в строке точка, мы делаем следующее:

    // Ничего не делаем, если в строке есть точка
   если (!displayedNum.includes('.')) {
     display.textContent = отображаемый номер + '.'
   } 

   Далее, если Тим нажмет десятичную клавишу после нажатия клавиши оператора, на дисплее должно появиться 0. .

   Здесь нам нужно знать, является ли предыдущий ключ оператором. Мы можем сказать это, проверив пользовательский атрибут data-previous-key-type , который мы установили в предыдущем уроке.

   data-previous-key-type еще не завершен. Чтобы правильно определить, является ли previousKeyType оператором, нам нужно обновить previousKeyType для каждой нажатой клавиши.

    если (!действие) {
     // ...
     калькулятор.dataset.previousKey = 'число'
   }
   если (действие === 'десятичный') {
     // ...
     calculate.dataset.previousKey = 'десятичный'
   }
   если (действие === 'очистить') {
     // ...
     калькулятор.dataset.previousKeyType = 'очистить'
   }
   если (действие === 'вычислить') {
    // ...
     калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Получив правильный previousKeyType , мы можем использовать его, чтобы проверить, является ли предыдущий ключ оператором.

    если (действие === 'десятичный') {
     если (!displayedNum.includes('.')) {
       display.textContent = отображаемый номер + '.'
     } иначе если (предыдущийKeyType === 'оператор') {
       display.textContent = '0.'
     }
     
   калькулятор.dataset.previousKeyType = 'десятичный'
   } 

   Что произойдет, если Тим нажмет клавишу оператора

   Если Тим сначала нажмет клавишу оператора, клавиша оператора должна загореться. (Мы уже рассмотрели этот пограничный случай, но как? Посмотрите, сможете ли вы определить, что мы сделали).

   Во-вторых, ничего не должно произойти, если Тим несколько раз нажмет одну и ту же клавишу оператора. (Мы уже рассмотрели и этот пограничный случай).

   Примечание: , если вы хотите улучшить UX, вы можете показать оператор, на который нажимают несколько раз, с некоторыми изменениями CSS. Мы не делали этого здесь, но посмотрите, сможете ли вы запрограммировать это самостоятельно в качестве дополнительной задачи по кодированию.

   В-третьих, если Тим нажмет другую клавишу оператора после нажатия первой клавиши оператора, первую клавишу оператора следует отпустить. Затем следует нажать вторую клавишу оператора. (Мы рассмотрели и этот пограничный случай, но как?).

   В-четвертых, если Тим нажимает число, оператор, число и еще один оператор в указанном порядке, дисплей должен обновиться до расчетного значения.

   Это означает, что нам нужно использовать функцию calculate , когда firstValue , оператор 9Существуют 0008 и secondValue .

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     const firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
   // Примечание: достаточно проверить firstValue и оператор, потому что secondValue всегда существует
     если (firstValue && оператор) {
       display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
   key.classList.add('нажата')
     calculate.dataset.previousKeyType = 'оператор'
     калькулятор.dataset.firstValue = отображаемое число
     калькулятор.набор данных.оператор = действие
   } 

   Хотя мы можем вычислить значение при повторном нажатии на клавишу оператора, мы также добавили ошибку в этот момент — дополнительные нажатия на клавишу оператора вычисляют значение, когда этого не должно быть.

   Чтобы калькулятор не выполнял вычисления при последующих нажатиях на клавишу оператора, нам нужно проверить, является ли previousKeyType оператором. Если это так, мы не выполняем расчет.

    если (
     первое значение &&
     оператор &&
     предыдущийKeyType !== 'оператор'
   ) {
     display.textContent = вычислить (первое значение, оператор, второе значение)
   } 

   В-пятых, после того, как ключ оператора вычислит число, если Тим нажмет на число, за которым следует другой оператор, оператор должен продолжить вычисление, например: 8 - 1 = 7 , 7 - 2 = 5 , 5 - 3 = 2 .

   Сейчас наш калькулятор не может выполнять последовательные вычисления. Второе вычисленное значение неверно. Вот что у нас есть: 99 - 1 = 98 , 98 - 1 = 0 .

   Второе значение рассчитано неправильно, потому что мы ввели неправильные значения в вычислить функцию . Давайте рассмотрим несколько изображений, чтобы понять, что делает наш код.

   РЕКЛАМА

   Понимание нашей функции вычисления

   Сначала предположим, что пользователь нажимает на число 99. На данный момент в калькуляторе еще ничего не зарегистрировано.

   Во-вторых, предположим, что пользователь щелкает оператор вычитания. После того, как они щелкнут оператор вычитания, мы устанавливаем firstValue на 99. Мы также устанавливаем оператор для вычитания.

   В-третьих, предположим, что пользователь нажимает на второе значение — на этот раз это 1. В этот момент отображаемое число обновляется до 1, но наши firstValue , оператор и secondValue остаются неизменными.

   В-четвертых, пользователь снова нажимает кнопку «Вычесть». Сразу после того, как они нажали «вычесть», прежде чем мы вычислим результат, мы устанавливаем secondValue в качестве отображаемого числа.

   В-пятых, выполняем расчет с firstValue 99, оператором вычесть и secondValue 1. Результат равен 98.

   После того, как результат подсчитан, мы устанавливаем отображение результата. Затем мы устанавливаем оператор для вычитания и firstValue для предыдущего отображаемого числа.

   Ну, это ужасно неправильно! Если мы хотим продолжить расчет, нам нужно обновить firstValue вычисленным значением.

    const firstValue = calculate.dataset.firstValue
   константный оператор = калькулятор.набор данных.оператор
   const secondValue = отображаемое число
   если (
     первое значение &&
     оператор &&
     предыдущийKeyType !== 'оператор'
   ) {
     const calcValue = вычислить (firstValue, оператор, secondValue)
     display.textContent = вычисленное значение
     
   // Обновить вычисленное значение как firstValue
     калькулятор.dataset.firstValue = calcValue
   } еще {
     // Если вычислений нет, устанавливаем displayNum как firstValue
     калькулятор.dataset.firstValue = отображаемое число
   }
   key.classList.add('нажата')
   calculate.dataset.previousKeyType = 'оператор'
   калькулятор.набор данных.оператор = действие 

   Благодаря этому исправлению последовательные вычисления, выполняемые клавишами оператора, теперь должны быть правильными.

   Что произойдет, если Тим нажмет клавишу равенства?

   Во-первых, ничего не должно произойти, если Тим нажмет клавишу равенства перед любой клавишей оператора.

   Мы знаем, что клавиши оператора еще не были нажаты, если firstValue не установлен в число. Мы можем использовать это знание, чтобы предотвратить вычисление равенства.

    если (действие === 'вычислить') {
     const firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
   если (первое значение) {
       display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
   калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Во-вторых, если Тим набирает число, за которым следует оператор, за которым следует знак равенства, калькулятор должен вычислить результат таким образом, что:

   1. 2 + = —> 2 + 2 = 4
   2. 2 - = -> 2 - 2 = 0
   3. 2 × = -> 2 × 2 = 4
   4. 2 ÷ -> 2 ÷ 2 = 1

   мы уже принял во внимание этот странный ввод. Вы можете понять, почему? 🙂

   В-третьих, если Тим нажмет клавишу "равно" после завершения вычисления, нужно будет выполнить еще одно вычисление. Вот как должно выглядеть вычисление:

   1. Тим нажимает клавиши 5–1
   2. Тим нажимает равно. Расчетное значение: 5 - 1 = 4
   3. Тим попадает одинаково. Расчетное значение: 4 - 1 = 3
   4. Тим попадает одинаково. Расчетное значение: 3 - 1 = 2
   5. Тим попадает одинаково. Расчетное значение: 2 - 1 = 1
   6.  Тим сравняет счет. Расчетное значение: 1 - 1 = 0

   К сожалению, наш калькулятор ошибается в этом вычислении. Вот что показывает наш калькулятор:

   1. Тим нажимает клавишу 5–1
   2. Тим нажимает равно. Вычисленное значение: 4
   3. Тим попадает одинаково. Вычисленное значение равно 1

   Исправление расчета

   Сначала допустим, что наш пользователь нажимает 5. На данный момент в калькуляторе еще ничего не зарегистрировано.

   Во-вторых, предположим, что пользователь щелкает оператор вычитания. После того, как они щелкнут оператор вычитания, мы устанавливаем firstValue на 5. Мы также устанавливаем оператор для вычитания.

   В-третьих, пользователь нажимает на второе значение. Допустим, это 1. В этот момент отображаемое число обновляется до 1, но наши firstValue , operator и secondValue остаются неизменными.

   В-четвертых, пользователь нажимает клавишу равенства. Сразу после нажатия равно, но перед расчетом ставим secondValue as displayNum

   В-пятых, калькулятор вычисляет результат 5 - 1 и дает 4 . Результат обновляется на дисплее. firstValue и оператор переносятся в следующий расчет, так как мы не обновили их.

   В-шестых, когда пользователь снова нажимает равно, мы устанавливаем secondValue на displayNum перед вычислением.

   Вы можете сказать, что здесь не так.

   Вместо secondValue мы хотим установить firstValue в отображаемое число.

    если (действие === 'вычислить') {
     пусть firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
   если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         первое значение = отображаемое число
       }
       
   display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
   калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Мы также хотим перенести предыдущее значение secondValue в новый расчет. Чтобы secondValue сохранилось до следующего вычисления, нам нужно сохранить его в другом пользовательском атрибуте. Давайте назовем этот пользовательский атрибут modValue (обозначает значение модификатора).

    если (действие === 'вычислить') {
     пусть firstValue = калькулятор. dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
   если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         первое значение = отображаемое число
       }
       
   display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
   // Установить атрибут modValue
     калькулятор.dataset.modValue = второе значение
     калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Если previousKeyType равен вычислить , мы знаем, что можем использовать calculate.dataset.modValue как secondValue . Зная это, мы можем выполнить расчет.

    если (первое значение) {
     если (предыдущийKeyType === 'рассчитать') {
       первое значение = отображаемое число
       secondValue = калькулятор.dataset.modValue
     }
     
   display.textContent = вычислить (первое значение, оператор, второе значение)
   } 

   Таким образом, у нас есть правильное вычисление при последовательном нажатии клавиши равенства.

   РЕКЛАМА

   Вернуться к клавише равенства

   В-четвертых, если Тим нажмет десятичную или цифровую клавишу после клавиши калькулятора, дисплей должен замениться на 0. или новое число соответственно.

   Здесь вместо того, чтобы просто проверять, является ли previousKeyType оператором , нам также нужно проверить, является ли вычислением .

    если (!действие) {
     если (
       отображаемое число === '0' ||
       предыдущийKeyType === 'оператор' ||
       предыдущийKeyType === 'вычислить'
     ) {
       display.textContent = ключевое содержимое
     } еще {
       display.textContent = отображаемый номер + keyContent
     }
     калькулятор.dataset.previousKeyType = 'число'
   }
   если (действие === 'десятичный') {
     если (!displayedNum.includes('.')) {
       display.textContent = отображаемый номер + '.'
     } иначе если (
       предыдущийKeyType === 'оператор' ||
       предыдущийKeyType === 'вычислить'
     ) {
       display.textContent = '0. '
     }
     
   калькулятор.dataset.previousKeyType = 'десятичный'
   } 

   В-пятых, если Тим нажимает клавишу оператора сразу после клавиши равенства, калькулятор должен , а не вычислять.

   Для этого мы проверяем, является ли previousKeyType , вычисляем перед выполнением вычислений с операторскими ключами.

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     // ...
     
   если (
       первое значение &&
       оператор &&
       предыдущийKeyType !== 'оператор' &&
       предыдущийKeyType !== 'вычислить'
     ) {
       const calcValue = вычислить (firstValue, оператор, secondValue)
       display.textContent = вычисленное значение
       калькулятор.dataset.firstValue = calcValue
     } еще {
       калькулятор.dataset.firstValue = отображаемое число
     }
     
   // ...
   } 

   Клавиша очистки имеет два назначения:

   1. All Clear (обозначается как AC ) очищает все и сбрасывает калькулятор в исходное состояние.
   2. Очистить запись (обозначается CE ) очищает текущую запись. Он сохраняет предыдущие номера в памяти.

   Когда калькулятор находится в состоянии по умолчанию, должно отображаться AC .

   Во-первых, если Тим нажмет клавишу (любую, кроме очистки), AC следует изменить на CE .

   Мы делаем это, проверяя, является ли data-action clear . Если это не clear , мы ищем кнопку очистки и меняем ее textContent .

    если (действие !== 'очистить') {
     const clearButton = калькулятор.querySelector('[data-action=clear]')
     clearButton.textContent = 'CE'
   } 

   Во-вторых, если Тим нажмет CE , на дисплее должен появиться 0. В то же время CE должен вернуться к AC , чтобы Тим мог сбросить калькулятор в исходное состояние.**

    если (действие === 'очистить') {
     дисплей.текстконтент = 0
     key. textContent = 'AC'
     калькулятор.dataset.previousKeyType = 'очистить'
   } 

   В-третьих, если Тим нажмет AC , сбросит калькулятор в исходное состояние.

   Чтобы сбросить калькулятор в исходное состояние, нам нужно очистить все установленные нами пользовательские атрибуты.

    если (действие === 'очистить') {
     если (key.textContent === 'AC') {
       калькулятор.dataset.firstValue = ''
       калькулятор.dataset.modValue = ''
       калькулятор.набор данных.оператор = ''
       калькулятор.dataset.previousKeyType = ''
     } еще {
       key.textContent = 'AC'
     }
     
   дисплей.текстконтент = 0
     калькулятор.dataset.previousKeyType = 'очистить'
   } 

   Вот и все — во всяком случае, для крайних случаев!

   Вы можете получить исходный код для части крайних случаев по этой ссылке (прокрутите вниз и введите свой адрес электронной почты в поле, и я отправлю исходные коды прямо на ваш почтовый ящик).

   На данный момент код, который мы создали вместе, довольно запутан. Вы, вероятно, потеряетесь, если попытаетесь прочитать код самостоятельно. Давайте рефакторим его, чтобы сделать его чище.

   Рефакторинг кода

   Рефакторинг часто начинается с наиболее очевидных улучшений. В этом случае начнем с 9.0007 вычислить .

   Прежде чем продолжить, убедитесь, что вы знаете эти приемы/функции JavaScript. Мы будем использовать их в рефакторинге.

   1. Ранние возвраты
   2. Тернарные операторы
   3. Чистые функции
   4. Деструктуризация ES6

   Итак, начнем!

   Рефакторинг функции вычисления

   Вот что у нас есть на данный момент.

    const вычислить = (n1, оператор, n2) => {
     пусть результат = ''
     если (оператор === 'добавить') {
       результат = parseFloat(n1) + parseFloat(n2)
     } иначе если (оператор === 'вычесть') {
       результат = parseFloat(n1) - parseFloat(n2)
     } иначе если (оператор === 'умножить') {
       результат = parseFloat(n1) * parseFloat(n2)
     } иначе если (оператор === 'разделить') {
       результат = parseFloat(n1) / parseFloat(n2)
     }
     
     вернуть результат
   } 

   Вы узнали, что мы должны максимально сократить повторные назначения. Здесь мы можем удалить присваивания, если вернем результат вычисления в рамках операторов if и else if :

    const calculate = (n1, operator, n2) => {
     если (оператор === 'добавить') {
       вернуть firstNum + parseFloat (n2)
     } иначе если (оператор === 'вычесть') {
       вернуть parseFloat(n1) - parseFloat(n2)
     } иначе если (оператор === 'умножить') {
       возврат parseFloat(n1) * parseFloat(n2)
     } иначе если (оператор === 'разделить') {
       вернуть parseFloat (n1) / parseFloat (n2)
     }
   } 

   Поскольку мы возвращаем все значения, мы можем использовать раннее возвращение . Если мы это сделаем, то не будет необходимости в каких-либо условиях else if .

    const вычислить = (n1, оператор, n2) => {
     если (оператор === 'добавить') {
       вернуть firstNum + parseFloat (n2)
     }
     
     если (оператор === 'вычесть') {
       вернуть parseFloat(n1) - parseFloat(n2)
     }
     
     если (оператор === 'умножить') {
       возврат parseFloat(n1) * parseFloat(n2)
     }
     
     если (оператор === 'разделить') {
       вернуть parseFloat (n1) / parseFloat (n2)
     }
   } 

   А поскольку у нас есть одно выражение на каждое условие if , мы можем убрать скобки. (Примечание: некоторые разработчики используют фигурные скобки). Вот как будет выглядеть код:

    const calculate = (n1, operator, n2) => {
     если (оператор === 'добавить') вернуть parseFloat(n1) + parseFloat(n2)
     если (оператор === 'вычесть') вернуть parseFloat(n1) - parseFloat(n2)
     if (оператор === 'умножить') вернуть parseFloat(n1) * parseFloat(n2)
     if (оператор === 'разделить') вернуть parseFloat(n1) / parseFloat(n2)
   } 

   Наконец, мы восемь раз вызывали parseFloat в функции. Мы можем упростить его, создав две переменные, содержащие значения с плавающей запятой:

    const calculate = (n1, operator, n2) => {
     const firstNum = parseFloat (n1)
     const secondNum = parseFloat(n2)
     если (оператор === 'добавить') вернуть firstNum + secondNum
     если (оператор === 'вычесть') вернуть firstNum - secondNum
     если (оператор === 'умножить') вернуть firstNum * secondNum
     если (оператор === 'разделить') вернуть firstNum / secondNum
   } 

   Мы закончили с , теперь вычисляем . Вам не кажется, что читать стало легче, чем раньше?

   РЕКЛАМА

   Рефакторинг прослушивателя событий

   Код, который мы создали для прослушивателя событий, огромен. Вот что у нас есть на данный момент:

    keys.addEventListener('click', e => {
     если (e.target.matches('кнопка')) {
     
       если (!действие) { /* ... */ }
       
       если (действие === 'добавить' ||
         действие === 'вычесть' ||
         действие === 'умножить' ||
         действие === 'разделить') {
         /* ... */
       }
       
       если (действие === 'очистить') { /* ... */ }
       если (действие !== 'очистить') { /* ... */ }
       если (действие === 'вычислить') { /* ... */ }
     }
   }) 

   С чего начать рефакторинг этого фрагмента кода? Если вы не знакомы с передовыми методами программирования, у вас может возникнуть соблазн провести рефакторинг, разделив каждый вид действия на меньшую функцию:

    // Не делайте этого!
   const handleNumberKeys = (/* ... */) => {/* ... */}
   const handleOperatorKeys = (/* . .. */) => {/* ... */}
   const handleDecimalKey = (/* ... */) => {/* ... */}
   const handleClearKey = (/* ... */) => {/* ... */}
   const handleCalculateKey = (/* ... */) => {/* ... */} 

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

   Лучше разделить код на чистые и нечистые функции. Если вы это сделаете, вы получите код, который выглядит следующим образом:

    keys.addEventListener('click', e => {
     // Чистая функция
     const resultString = createResultString(/* ... */)
     
     // Нечистый материал
     display.textContent = строка результата
     updateCalculatorState(/* ... */)
   }) 

   Здесь createResultString — это чистая функция, которая возвращает то, что нужно отобразить на калькуляторе. updateCalculatorState — это нечистая функция, которая изменяет внешний вид калькулятора и пользовательские атрибуты.

   Создание createResultString

   Как упоминалось ранее, createResultString должно возвращать значение, которое необходимо отобразить на калькуляторе.
   Вы можете получить эти значения через части кода, которые говорят display.textContent = 'некоторое значение .

    display.textContent = 'некоторое значение' 

   Вместо display.textContent = 'некоторое значение' мы хотим вернуть каждое значение, чтобы мы могли использовать его позже.

    // замените вышеуказанное на это
   return 'some value' 

   Давайте пройдемся по этому шагу вместе, начиная с цифровых клавиш.

   Создание результирующей строки для цифровых клавиш

   Вот код, который у нас есть для цифровых клавиш:

    if (!action) {
     если (
       отображаемое число === '0' ||
       предыдущийKeyType === 'оператор' ||
       предыдущийKeyType === 'вычислить'
     ) {
       display.textContent = ключевое содержимое
     } еще {
       display.textContent = отображаемый номер + keyContent
     }
     калькулятор.dataset.previousKeyType = 'число'
   } 

   Первый шаг — скопировать части, которые говорят display.textContent = 'some value' , в createResultString . При этом убедитесь, что вы изменили display.textContent = на return .

    константа createResultString = () => {
     если (! Действие) {
       если (
         отображаемое число === '0' ||
         предыдущийKeyType === 'оператор' ||
         предыдущийKeyType === 'вычислить'
       ) {
         вернуть ключКонтент
       } еще {
         вернуть отображаемое число + keyContent
       }
     }
   } 

   Далее мы можем преобразовать оператор if/else в тернарный оператор:

    const createResultString = () => {
     если (действие!) {
       вернуть отображаемое число === '0' ||
         предыдущийKeyType === 'оператор' ||
         предыдущийKeyType === 'вычислить'
         ? keyContent
         : displayNum + keyContent
     }
   } 

   При рефакторинге не забудьте записать список необходимых переменных. Мы вернемся к списку позже.

    константа createResultString = () => {
     // Требуемые переменные:
     // 1. Содержимое ключа
     // 2. отображаемое число
     // 3. предыдущий тип ключа
     // 4.  действие
     
     если (действие!) {
       вернуть отображаемое число === '0' ||
         предыдущийKeyType === 'оператор' ||
         предыдущийKeyType === 'вычислить'
         ? keyContent
         : displayNum + keyContent
     }
   } 

   РЕКЛАМА

   Создание результирующей строки для десятичного ключа

   Вот код, который у нас есть для десятичного ключа:

    if (action === 'decimal') {
     если (!displayedNum.includes('.')) {
       display.textContent = отображаемый номер + '.'
     } иначе если (
       предыдущийKeyType === 'оператор' ||
       предыдущийKeyType === 'вычислить'
     ) {
       display.textContent = '0.'
     }
     
     калькулятор.dataset.previousKeyType = 'десятичный'
   } 

   Как и раньше, мы хотим переместить все, что изменяет display.textContent в createResultString .

    константа createResultString = () => {
     // ...
     
     если (действие === 'десятичный') {
       если (!displayedNum.includes('.')) {
         возврат = отображаемое число + '.'
       } else if (previousKeyType === 'operator' || previousKeyType === 'вычислить') {
         возврат = '0. '
       }
     }
   } 

   Поскольку мы хотим вернуть все значения, мы можем преобразовать операторы else if в ранние возвраты.

    константа createResultString = () => {
     // ...
     
     если (действие === 'десятичный') {
       if (!displayedNum.includes('.')) вернуть displayNum + '.'
       if (previousKeyType === 'operator' || previousKeyType === 'calculate') вернуть '0.'
     }
   } 

   Распространенной ошибкой здесь является забывание вернуть текущее отображаемое число, когда ни одно из условий не выполняется. Нам это нужно, потому что мы заменим display.textContent значением, возвращаемым из createResultString . Если мы пропустили это, createResultString вернет undefined , чего мы не хотим.

    константа createResultString = () => {
     // ...
     
     если (действие === 'десятичный') {
       if (!displayedNum.includes('.')) вернуть displayNum + '.'
       if (previousKeyType === 'operator' || previousKeyType === 'calculate') вернуть '0. '
       вернуть отображаемое число
     }
   } 

   Как всегда, обратите внимание на необходимые переменные. На данный момент требуемые переменные остаются прежними:

    const createResultString = () => {
     // Требуемые переменные:
     // 1. Содержимое ключа
     // 2. отображаемое число
     // 3. предыдущий тип ключа
     // 4. действие
   } 

   Создание результирующей строки для клавиш оператора

   Вот код, который мы написали для клавиш оператора.

    если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) {
     const firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     const secondValue = отображаемое число
     
     если (
       первое значение &&
       оператор &&
       предыдущийKeyType !== 'оператор' &&
       предыдущийKeyType !== 'вычислить'
     ) {
       const calcValue = вычислить (firstValue, оператор, secondValue)
       display.textContent = вычисленное значение
       калькулятор. dataset.firstValue = calcValue
     } еще {
       калькулятор.dataset.firstValue = отображаемое число
     }
     
     key.classList.add('нажата')
     calculate.dataset.previousKeyType = 'оператор'
     калькулятор.набор данных.оператор = действие
   } 

   Вы уже знаете, как это сделать: мы хотим переместить все, что изменяет display.textContent в createResultString . Вот что нужно переместить:

    const createResultString = () => {
     // ...
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) {
       const firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       const secondValue = отображаемое число
       
       если (
         первое значение &&
         оператор &&
         предыдущийKeyType !== 'оператор' &&
         предыдущийKeyType !== 'вычислить'
       ) {
         вернуть вычислить (firstValue, оператор, secondValue)
       }
     }
   } 

   Помните, createResultString должен вернуть значение, которое будет отображаться на калькуляторе. Если условие if не совпало, мы все равно хотим вернуть отображаемый номер.

    константа createResultString = () => {
     // ...
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) {
       const firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       const secondValue = отображаемое число
       
       если (
         первое значение &&
         оператор &&
         предыдущийKeyType !== 'оператор' &&
         предыдущийKeyType !== 'вычислить'
       ) {
         вернуть вычислить (firstValue, оператор, secondValue)
       } еще {
         вернуть отображаемое число
       }
     }
   } 

   Затем мы можем преобразовать оператор if/else в тернарный оператор:

    const createResultString = () => {
     // ...
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) {
       const firstValue = калькулятор. dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       const secondValue = отображаемое число
       
       вернуть первое значение &&
         оператор &&
         предыдущийKeyType !== 'оператор' &&
         предыдущийKeyType !== 'вычислить'
         ? вычислить (первое значение, оператор, второе значение)
         : отображаемое число
     }
   } 

   Если вы присмотритесь, то поймете, что нет необходимости хранить переменную secondValue . Мы можем использовать displayNum непосредственно в функции calculate .

    константа createResultString = () => {
     // ...
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) {
       const firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       
       вернуть первое значение &&
         оператор &&
         предыдущийKeyType !== 'оператор' &&
         предыдущийKeyType !== 'вычислить'
         ? вычислить (первое значение, оператор, отображаемое число)
         : отображаемое число
     }
   } 

   Наконец, обратите внимание на необходимые переменные и свойства. На этот раз нам нужны calculate.dataset.firstValue и calculate.dataset.operator .

    константа createResultString = () => {
     // Требуемые переменные и свойства:
     // 1. Содержимое ключа
     // 2. отображаемое число
     // 3. предыдущий тип ключа
     // 4. действие
     // 5. калькулятор.dataset.firstValue
     // 6. калькулятор.набор данных.оператор
   } 

   Создание результирующей строки для ключа очистки

   Мы написали следующий код для обработки очистить ключ .

    если (действие === 'очистить') {
     если (key.textContent === 'AC') {
       калькулятор.dataset.firstValue = ''
       калькулятор.dataset.modValue = ''
       калькулятор.набор данных.оператор = ''
       калькулятор.dataset.previousKeyType = ''
     } еще {
       key.textContent = 'AC'
     }
     
     дисплей.текстконтент = 0
     калькулятор.dataset.previousKeyType = 'очистить'
   } 

   Как и выше, нужно переместить все, что изменяет display.textContent в createResultString .

    константа createResultString = () => {
     // ...
     если (действие === 'очистить') вернуть 0
   } 

   РЕКЛАМА

   Создание строки результата для ключа равенства

   Вот код, который мы написали для ключа равенства:

    if (action === 'calculate') {
     пусть firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     пусть второе значение = отображаемое число
     
     если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         первое значение = отображаемое число
         secondValue = калькулятор.dataset.modValue
       }
       
       display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
     калькулятор.dataset.modValue = второе значение
     калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Как и выше, мы хотим скопировать все, что изменяет display.textContent в createResultString . Вот что нужно скопировать:

    if (action === 'вычислить') {
     пусть firstValue = калькулятор. dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     пусть второе значение = отображаемое число
     
     если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         первое значение = отображаемое число
         secondValue = калькулятор.dataset.modValue
       }
       display.textContent = вычислить (первое значение, оператор, второе значение)
     }
   } 

   При копировании кода в createResultString убедитесь, что вы возвращаете значения для каждого возможного сценария:

    const createResultString = () => {
     // ...
     
     если (действие === 'вычислить') {
       пусть firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       пусть второе значение = отображаемое число
       
       если (первое значение) {
         если (предыдущийKeyType === 'рассчитать') {
           первое значение = отображаемое число
           secondValue = калькулятор.dataset.modValue
         }
         вернуть вычислить (firstValue, оператор, secondValue)
       } еще {
         вернуть отображаемое число
       }
     }
   } 

   Далее мы хотим сократить повторные назначения. Мы можем сделать это, передав правильные значения в вычислить через тернарный оператор.

    константа createResultString = () => {
     // ...
     
     если (действие === 'вычислить') {
       const firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       const modValue = калькулятор.dataset.modValue
       
       если (первое значение) {
         вернуть предыдущийKeyType === 'вычислить'
           ? вычислить (отображаемое число, оператор, modValue)
           : вычислить (первое значение, оператор, отображаемое число)
       } еще {
         вернуть отображаемое число
       }
     }
   } 

   Вы можете еще больше упростить приведенный выше код с помощью другого тернарного оператора, если он вас устраивает:

    const createResultString = () => {
     // ...
     
     если (действие === 'вычислить') {
       const firstValue = калькулятор.dataset.firstValue
       константный оператор = калькулятор.набор данных.оператор
       const modValue = калькулятор. dataset.modValue
       
       вернуть первое значение
         ? предыдущийKeyType === 'вычислить'
           ? вычислить (отображаемое число, оператор, modValue)
           : вычислить (первое значение, оператор, отображаемое число)
         : отображаемое число
     }
   } 

   На этом этапе мы снова хотим обратить внимание на свойства и переменные, необходимые:

    const createResultString = () => {
     // Требуемые переменные и свойства:
     // 1. Содержимое ключа
     // 2. отображаемое число
     // 3. предыдущий тип ключа
     // 4. действие
     // 5. калькулятор.dataset.firstValue
     // 6. калькулятор.набор данных.оператор
     // 7. калькулятор.dataset.modValue
   } 

   Передача необходимых переменных

   Нам нужно семь свойств/переменных в createResultString :

   1. keyContent
   2. displayedNum
   3. previousKeyType
   4. action
   5. firstValue
   6. modValue
   7. operator

   We can get keyContent and action из ключ . Мы также можем получить firstValue , modValue , operator и previousKeyType 9.0008 из калькулятор.набор данных .

   Это означает, что функции createResultString нужны три переменные — key , displayNum и calculate.dataset . Поскольку calculate.dataset представляет состояние калькулятора, давайте вместо этого будем использовать переменную с именем state .

    const createResultString = (key, displayNum, state) => {
     константа keyContent = key.textContent
     константное действие = key.dataset.action
     const firstValue = state.firstValue
     константа modValue = состояние.modValue
     константный оператор = состояние.оператор
     const предыдущийKeyType = состояние.предыдущийKeyType
     // ... Рефакторинг по мере необходимости
   }
   // Использование строки createResultString
   keys.addEventListener('щелчок', e => {
     если (e.target.matches('button')) вернуть
     const displayNum = display. textContent
     const resultString = createResultString (e.target, отображаемое число, калькулятор. набор данных)
     
     // ...
   }) 

   Не стесняйтесь деструктурировать переменные, если хотите:

    const createResultString = (key, displayNum, state) => {
     константа keyContent = key.textContent
     const {действие} = key.dataset
     константа {
       первое значение,
       мод значение,
       оператор,
       предыдущийKeyType
     } = состояние
     
     // ...
   } 

   Согласованность внутри операторов if

   В createResultString мы использовали следующие условия для проверки типа нажатых клавиш:

    // Если ключ — число
   если (!действие) { /* ... */ }
   // Если ключ десятичный
   если (действие === 'десятичный') { /* ... */ }
   // Если ключ является оператором
   если (
     действие === 'добавить' ||
     действие === 'вычесть' ||
     действие === 'умножить' ||
     действие === 'разделить'
   ) { /* ... */}
   // Если ключ очищен
   если (действие === 'очистить') { /* ... */ }
   // Если ключ вычисляется
   if (действие === 'вычислить') { /* . .. */ } 

   Они непоследовательны, поэтому их трудно читать. Если возможно, мы хотим сделать их согласованными, чтобы написать что-то вроде этого:

    if (keyType === 'number') { /* ... */ }
   if (keyType === 'десятичный') { /* ... */ }
   if (keyType === 'оператор') { /* ... */}
   if (keyType === 'очистить') { /* ... */ }
   if (keyType === 'calculate') { /* ... */ } 

   Для этого мы можем создать функцию с именем getKeyType . Эта функция должна возвращать тип нажатой клавиши.

    const getKeyType = (ключ) => {
     const {действие} = key.dataset
     если (! действие) вернуть 'число'
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) вернуть 'оператор'
     // Для всего остального возвращаем действие
     ответное действие
   } 

   Вот как можно использовать эту функцию:

    const createResultString = (key, displayNum, state) => {
     const keyType = getKeyType (ключ)
     
     если (keyType === 'число') { /* . .. */ }
     if (keyType === 'десятичный') { /* ... */ }
     if (keyType === 'оператор') { /* ... */}
     if (keyType === 'очистить') { /* ... */ }
     if (keyType === 'вычислить') { /* ... */ }
   } 

   Мы закончили с createResultString . Перейдем к updateCalculatorState .

   РЕКЛАМА

   Создание updateCalculatorState

   updateCalculatorState — это функция, которая изменяет внешний вид калькулятора и пользовательские атрибуты.

   Как и в случае с createResultString , нам нужно проверить тип нажатой клавиши. Здесь мы можем повторно использовать getKeyType .

    const updateCalculatorState = (ключ) => {
     const keyType = getKeyType (ключ)
     
     если (keyType === 'число') { /* ... */ }
     if (keyType === 'десятичный') { /* ... */ }
     if (keyType === 'оператор') { /* ... */}
     if (keyType === 'очистить') { /* ... */ }
     if (keyType === 'вычислить') { /* ... */ }
   } 

   Если вы посмотрите на оставшийся код, то заметите, что мы изменили data-previous-key-type для каждого типа ключа. Вот как выглядит код:

    const updateCalculatorState = (ключ, калькулятор) => {
     const keyType = getKeyType (ключ)
     
     если (! Действие) {
       // ...
       калькулятор.dataset.previousKeyType = 'число'
     }
     
     если (действие === 'десятичный') {
       // ...
       калькулятор.dataset.previousKeyType = 'десятичный'
     }
     
     если (
       действие === 'добавить' ||
       действие === 'вычесть' ||
       действие === 'умножить' ||
       действие === 'разделить'
     ) {
       // ...
       calculate.dataset.previousKeyType = 'оператор'
     }
     
     если (действие === 'очистить') {
       // ...
       калькулятор.dataset.previousKeyType = 'очистить'
     }
     
     если (действие === 'вычислить') {
       калькулятор.dataset.previousKeyType = 'вычислить'
     }
   } 

   Это избыточно, потому что мы уже знаем тип ключа с помощью getKeyType . Мы можем преобразовать приведенное выше в:

    const updateCalculatorState = (ключ, калькулятор) => {
     const keyType = getKeyType (ключ)
     калькулятор.dataset.previousKeyType = тип ключа
       
     если (keyType === 'число') { /* . .. */ }
     if (keyType === 'десятичный') { /* ... */ }
     if (keyType === 'оператор') { /* ... */}
     if (keyType === 'очистить') { /* ... */ }
     if (keyType === 'вычислить') { /* ... */ }
   } 

   Создание

   updateCalculatorState для клавиш оператора

   Визуально нам нужно убедиться, что все клавиши отпускают свое нажатое состояние. Здесь мы можем скопировать и вставить код, который у нас был раньше:

    const updateCalculatorState = (ключ, калькулятор) => {
     const keyType = getKeyType (ключ)
     калькулятор.dataset.previousKeyType = тип ключа
     
     Array.from(key.parentNode.children).forEach(k => k.classList.remove('is-depressed'))
   } 

   Вот что осталось от того, что мы написали для клавиш оператора, после перемещения частей, связанных с display.textContent в createResultString .

    если (keyType === 'оператор') {
     если (первое значение &&
         оператор &&
         предыдущийKeyType !== 'оператор' &&
         предыдущийKeyType !== 'вычислить'
     ) {
       калькулятор. dataset.firstValue = вычисленное значение
     } еще {
       калькулятор.dataset.firstValue = отображаемое число
     }
     
     key.classList.add('нажата')
     калькулятор.набор данных.оператор = ключ.набор данных.действие
   } 

   Вы могли заметить, что мы можем сократить код с помощью тернарного оператора:

    если (keyType === 'оператор') {
     key.classList.add('нажата')
     калькулятор.набор данных.оператор = ключ.набор данных.действие
     калькулятор.dataset.firstValue = первое значение &&
       оператор &&
       предыдущийKeyType !== 'оператор' &&
       предыдущийKeyType !== 'вычислить'
       ? вычисленное значение
       : отображаемое число
   } 

   Как и прежде, обратите внимание на переменные и свойства, которые вам нужны. Здесь нам нужно вычисляемое значение и отображаемое число .

    const updateCalculatorState = (ключ, калькулятор) => {
     // Необходимы переменные и свойства
     // 1. ключ
     // 2. калькулятор
     // 3. вычисляемое значение
     // 4. отображаемое число
   } 

   Создание

   updateCalculatorState для ключа очистки

   Вот оставшийся код для ключа очистки:

    if (action === 'clear') {
     если (key. textContent === 'AC') {
       калькулятор.dataset.firstValue = ''
       калькулятор.dataset.modValue = ''
       калькулятор.набор данных.оператор = ''
       калькулятор.dataset.previousKeyType = ''
     } еще {
       key.textContent = 'AC'
     }
   }
   если (действие !== 'очистить') {
     const clearButton = калькулятор.querySelector('[data-action=clear]')
     clearButton.textContent = 'CE'
   } 

   Здесь особо нечего рефакторить. Не стесняйтесь копировать/вставлять все в updateCalculatorState .

   РЕКЛАМА

   Создание

   updateCalculatorState для ключа равенства

   Вот код, который мы написали для ключа равенства:

    if (action === 'calculate') {
     пусть firstValue = калькулятор.dataset.firstValue
     константный оператор = калькулятор.набор данных.оператор
     пусть второе значение = отображаемое число
     
     если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         первое значение = отображаемое число
         secondValue = калькулятор.dataset. modValue
       }
       
       display.textContent = вычислить (первое значение, оператор, второе значение)
     }
     
     калькулятор.dataset.modValue = второе значение
     калькулятор.dataset.previousKeyType = 'вычислить'
   } 

   Вот что у нас останется, если мы удалим все, что касается display.textContent .

    если (действие === 'вычислить') {
     пусть второе значение = отображаемое число
     
     если (первое значение) {
       если (предыдущийKeyType === 'рассчитать') {
         secondValue = калькулятор.dataset.modValue
       }
     }
     
     калькулятор.dataset.modValue = второе значение
   } 

   Мы можем преобразовать это в следующее:

    if (keyType === 'calculate') {
     calculate.dataset.modValue = firstValue && previousKeyType === 'вычислить'
       ? modValue
       : отображаемое число
   } 

   Как всегда, обратите внимание на используемые свойства и переменные:

    const updateCalculatorState = (ключ, калькулятор) => {
     // Необходимы переменные и свойства
     // 1.  ключ
     // 2. калькулятор
     // 3. вычисляемое значение
     // 4. отображаемое число
     // 5. значение мода
   } 

   Передача необходимых переменных

   Мы знаем, что нам нужно пять переменных/свойств для updateCalculatorState :

   1. ключ
   2. калькулятор 2
      0007 Расчеты. , отображаемое число) => { // ... } keys.addEventListener('щелчок', e => { если (e.target.matches('button')) вернуть постоянный ключ = e.target const displayNum = display.textContent const resultString = createResultString (ключ, отображаемое число, калькулятор. набор данных) display.textContent = строка результата // Передаем необходимые значения updateCalculatorState (ключ, калькулятор, строка результата, отображаемое число) })

      Рефакторинг UpdateCalculator Stautstate

      Мы изменили три вида значений в UpdateCalculatorState :

      1. Calculator.dataset
      2. . Класс для давления/департамента. хотите сделать его чище, вы можете разделить (2) и (3) на другую функцию — updateVisualState . Вот как может выглядеть updateVisualState :

          const updateVisualState = (ключ, калькулятор) => {
           const keyType = getKeyType (ключ)
           Array.from(key.parentNode.children).forEach(k => k.classList.remove('is-depressed'))
           
           if (keyType === 'operator') key.classList.add('is-depressed')
           
           if (keyType === 'clear' && key.textContent !== 'AC') {
             key.textContent = 'AC'
           }
           
           если (keyType !== 'очистить') {
             const clearButton = калькулятор.querySelector('[data-action=clear]')
             clearButton.textContent = 'CE'
           }
         } 

         РЕКЛАМА

         Подведение итогов

         После рефакторинга код стал намного чище. Если вы посмотрите на прослушиватель событий, вы узнаете, что делает каждая функция. Вот как выглядит прослушиватель событий в конце:

          keys.addEventListener('click', e => {
           если (e.target.matches('button')) вернуть
           постоянный ключ = e. target
           const displayNum = display.textContent
           
           // Чистые функции
           const resultString = createResultString (ключ, отображаемое число, калькулятор. набор данных)
           
           // Обновить состояния
           display.textContent = строка результата
           updateCalculatorState (ключ, калькулятор, строка результата, отображаемое число)
           updateVisualState (ключ, калькулятор)
         }) 

         Вы можете получить исходный код для части рефакторинга по этой ссылке (прокрутите вниз и введите свой адрес электронной почты в поле, и я отправлю исходные коды прямо на ваш почтовый ящик).

         Надеюсь, вам понравилась эта статья. Если да, возможно, вам понравится курс «Изучение JavaScript», в котором я покажу вам, как шаг за шагом создавать 20 компонентов, как мы сегодня создали этот калькулятор.

         Примечание. Мы можем улучшить калькулятор, добавив поддержку клавиатуры и специальные возможности, такие как живые регионы. Хотите узнать как? Посетите Изучайте JavaScript 🙂

         Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

         Калькулятор цветового кода резистора и таблица (4-х, 5-ти или 6-ти полосные)

         Инструменты

         Калькулятор цветового кода резистора и таблица (4-полосная, 5-полосная или 6-полосная)

         • 27
         • Главная
         • Инструменты
         • Калькулятор цветового кода резистора и таблица (4-полосная, 5-полосная или 6-полосная)

         Удобный инструмент для считывания значений цветового кода резистора

         • 4-полосный
         • 5-полосный
         • 6-полосный

         4-полосный резистор

         1-я цифра

         2-я цифра

         Множитель

         Допуск

         1-я цифра 1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         2-я цифра 0 Черный1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9Белый

         Множитель x1 Черныйx10 Коричневыйx100 Красныйx1k Оранжевыйx10k Желтыйx100k Зеленыйx1M Синийx10M Фиолетовыйx100M Серыйx1G Белый÷10 Золотой÷100 Серебряный

         Допуск ± 1 % Коричневый ± 2 % Красный ± 3 % Оранжевый ± 4 % Желтый ± 0,5 % Зеленый ± 0,25 % Синий ± 0,10 % Фиолетовый ± 0,05 % Серый ± 5 % Золотой ± 10 % Серебро

         
         

         Сопротивление:

         Допуск: 

         Минимум:

         Максимум:

         5-полосный резистор

         1-я цифра

         2-я цифра

         3-я цифра

         Множитель

         Допуск

         1-я цифра 1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         2-я цифра 0 Черный1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         3-я цифра 0 Черный1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         Множитель x1 Черныйx10 Коричневыйx100 Красныйx1k Оранжевыйx10k Желтыйx100k Зеленыйx1M Синийx10M Фиолетовыйx100M Серыйx1G Белый÷10 Золотой÷100 Серебряный

         Допуск ± 1 % Коричневый ± 2 % Красный ± 3 % Оранжевый ± 4 % Желтый ± 0,5 % Зеленый ± 0,25 % Синий ± 0,10 % Фиолетовый ± 0,05 % Серый ± 5 % Золотой ± 10 % Серебро

         
         

         Resistance:

         Tolerance:

         Minimum:

         Maximum:

         6 strip Resistor

         1st Digit

         2nd Digit

         3rd Digit

         Multiplier

         Tolerance

         Tempco

         1st Digit 1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         2-я цифра 0 Черный1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9 Белый

         3-я цифра 0 Черный1 Коричневый2 КРАСНЫЙ3 Оранжевый4 Желтый5 Зеленый6 Синий7 Фиолетовый8 Серый9Белый

         Множитель x1 Черныйx10 Коричневыйx100 Красныйx1k Оранжевыйx10k Желтыйx100k Зеленыйx1M Синийx10M Фиолетовыйx100M Серыйx1G Белый÷10 Золотой÷100 Серебряный

         Допуск ± 1 % Коричневый ± 2 % Красный ± 3 % Оранжевый ± 4 % Желтый ± 0,5 % Зеленый ± 0,25 % Синий ± 0,10 % Фиолетовый ± 0,05 % Серый ± 5 % Золотой ± 10 % Серебро

         Tempco 100 Коричневый50 Красный15 Оранжевый25 Желтый10 Синий5 Фиолетовый

         
         

         Стойкость:

         Допуск:

         Минимум:

         Максимум:

         Tempco:

         ppm/°C

         Как пользоваться калькулятором цветового кода резистора

         У вас возникли проблемы с чтением цветовых кодов резисторов? Если ваш ответ да, то этот инструмент создан специально для вас! Наш калькулятор цветового кода резистора — это удобный инструмент для считывания углеродного состава резисторов, независимо от того, являются ли они 4-полосными, 5-полосными или 6-полосными.

         Чтобы использовать этот инструмент, просто нажмите на определенный цвет и номер и посмотрите, как меняются фактические полосы на иллюстрации резистора. Значение сопротивления отображается в поле ниже вместе с допуском и температурным коэффициентом.

          

         Цвета полос резистора

         Как показано выше, резистор из углеродного состава может иметь от 4 до 6 полос. 5-полосный резистор более точен по сравнению с 4-полосным из-за включения третьей значащей цифры. 6-полосный резистор похож на 5-полосный резистор, но включает в себя диапазон температурного коэффициента (6-й диапазон).

          

         	4-полосный	5-диапазонный	6-диапазонный
         1-й диапазон	1-я значащая цифра	1-я значащая цифра	1-я значащая цифра
         2-й диапазон	2-я значащая цифра	2-я значащая цифра	2-я значащая цифра
         3-й диапазон	множитель	3-я значащая цифра	3-я значащая цифра
         4-й диапазон	допуск	множитель	множитель
         5-й диапазон	Н/Д	допуск	допуск
         6-й диапазон	Н/Д	Н/Д	температурный коэффициент

          

          

         Каждый цвет представляет собой число, если он расположен с 1-й по 2-ю полосу для 4-канального типа или с 1-й по 3-ю полосу для 5- и 6-канального типа.

          

         Цвет	Значение
         Черный (только 2-я и 3-я полосы)	0
         Коричневый	1
         Красный	2
         Оранжевый	3
         Желтый	4
         Зеленый	5
         Синий	6
         Фиолетовый	7
         Серый	8
         Белый	9

          

         Мнемоники были созданы для легкого запоминания последовательности цветов. The most popular mnemonic is " B ig B oys R ace O ur Y oung G irls B ut  V iolet G enerally W ins" where the first буква каждого слова соответствует первой букве цвета.

         Если цвет находится на 3-й полосе для 4-полосного типа или на 4-й полосе для 5- и 6-полосного типа, то это множитель.

          

         Цвет	Значение
         Черный	х 1
         Коричневый	x 10
         Красный	x 100
         Оранжевый	x 1000
         Желтый	х 10000
         Зеленый	х 100000
         Синий	х 1000000
         Фиолетовый	х 10000000
         Серый	х 100000000
         Белый	х 1000000000

          

          

         Обратите внимание, что количество нулей равно номеру цвета согласно предыдущей таблице.

         Четвертая полоса (или 5-я для 5- и 6-полосной) указывает значения допуска. Здесь добавлены два цвета (золото и серебро).

          

         Цвет	Значение
         Черный	Н/Д
         Коричневый	±1%
         Красный	±2%
         Оранжевый	±3%
         Желтый	±4%
         Зеленый	±0,5%
         Синий	±0,25%
         фиолетовый	±0,10%
         Серый	±0,05%
         Белый	Н/Д
         Золото	±5%
         Серебро	±10%

          

          

         6-я полоса для резистора 6-полосного типа представляет собой температурный коэффициент. Это указывает, насколько изменяется фактическое значение сопротивления резистора при изменении температуры.

          

         Цвет	Значение
         Черный	Н/Д
         Коричневый	100 частей на миллион/ºC
         Красный	50 частей на миллион/ºC
         Оранжевый	15 частей на миллион/ºC
         Желтый	25 частей на миллион/ºC
         Зеленый	Н/Д
         Синий	10 частей на миллион/ºC
         фиолетовый	5 частей на миллион/ºC
         Серый	Н/Д
         Белый	Н/Д

          

         Исключения цветового кода

         Пятиполосный резистор с 4-й полосой из золота или серебра

         Пятиполосные резисторы с четвертой полосой из серебра или золота составляют исключение и используются на определенных или более старых резисторах. Первые две полосы представляют собой значащие цифры, третья полоса представляет собой коэффициент умножения, четвертая полоса соответствует допуску, а пятая полоса соответствует температурному коэффициенту (частей на миллион/K).

          

         Отклонение цветов

         Чтобы предотвратить попадание металлических и других частиц в покрытие высоковольтных резисторов, золотые и серебряные полосы часто заменяют желтой и серой полосами.

          

         Одна черная полоса или резистор с нулевым сопротивлением

         Одна черная полоса на резисторе называется резистором с нулевым сопротивлением. По сути, это проводная связь, используемая для соединения дорожек на печатной плате (PCB), которая упакована в том же физическом формате, что и резистор. Эта упаковка позволяет размещать резистор с нулевым сопротивлением на печатной плате с использованием того же оборудования, которое обычно используется для размещения других резисторов.

          

         Диапазон надежности

         Когда резисторы производятся в соответствии с военными спецификациями, они часто имеют диапазон, указывающий на надежность. Этот диапазон предназначен специально для процента отказов на 1000 часов работы. Этот диапазон почти никогда не используется в коммерческой электронике. Четырехполосные резисторы обычно используют эту полосу надежности. Дополнительную информацию об этом можно найти в военном справочнике США MIL-HDBK-199.

         
         Дополнительная литература

         Учебник - Резистор: Закон Ома

         Учебник - Цветовые коды резисторов

         Рабочий лист - Резисторы

         Понимание электрического сопротивления

         Связанный контент

         • Калькулятор резистора инвертирующего операционного усилителя
         • Калькулятор резистора для неинвертирующего операционного усилителя
         • Калькулятор закона Ома
         • Калькулятор индуктивности катушки
         • Калькулятор сопротивления трассировки

         Вам также может понравиться

         • onsemi запускает первые в отрасли решения для PoE и KNX

           Абдулвали Ойекунле

         • AMD SoC подпитывает проекты Open RAN для инициативы Meta’s Evenstar

           Джефф Чайлд

         • Технология, стоящая за потрясающими новыми изображениями телескопа Джеймса Уэбба

           Джейк Герц

         • Инструмент анализа энергопотребления

           от Rohde & Schwarz

         • Apple выпускает M2 — процессор Mac второго поколения

           Джейк Герц

         Калькулятор RVU — единицы относительной стоимости AAPC

         Калькулятор рабочей RVU обеспечивает быстрый анализ единиц относительной стоимости работы, связанных с кодами CPT ^® и HCPCS уровня II. Введя соответствующий код и количество связанных с ним единиц, вы получите общее количество рабочих RVU и индивидуальное значение рабочего RVU для этого кода. Результаты расчета RVU основаны на значениях, предоставленных Центрами услуг Medicare и Medicaid (CMS) в файле относительных значений Национальной таблицы оплаты медицинских услуг Medicare на 2022 год (MPFS).

         Рабочие RVU являются наиболее часто используемым компонентом шкалы относительной стоимости, основанной на ресурсах (RBRVS). В отличие от RVU расходов на практику и RVU злоупотребления служебным положением, RVU работы — основанные на данных о заработной плате для нескольких категорий специальностей — обеспечивают меру работы врача, связанную с выполнением услуги или процедуры, представленной кодом CPT ^®  или HPCCS уровня II код.

         В общей шкале RVU работы врача сравнивают работу, связанную с оказанием услуги, со всеми другими услугами и процедурами. Например, удаление инородного тела из глаза (CPT ^® код 65205) присвоено 0,49 рабочих RVU. Но выполнение незначительной пластики глазных ран (65270) оценивается в 1,95 рабочих RVU. Таким образом, работа, необходимая для лечения раны глаза, в 4 раза больше, чем работа, связанная с удалением инородного тела.

         Какие меры включены в Рабочие RVU?

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

         Общая работа  , связанная с услугой или процедурой, относится к трем этапам работы, каждая из которых связана с единицей времени:

         • Предварительная работа относится к работе, выполненной до оказания услуги или процедуры (например, просмотр записей , обсуждение процедур со сверстниками, подготовка к операции).
         • Работа внутри службы относится к работе, связанной с предоставлением услуги или выполнением процедуры. Внутрисервисный период определяется как время встречи с пациентом при посещении офиса или время, проведенное на этаже пациента при посещении больницы. При хирургических процедурах время внутриоперационного периода, также называемое временем «кожа к коже», определяется как период между выполнением первого разреза и закрытием разреза.
         • Работа после оказания услуги включает всю сопутствующую работу, выполняемую после оказания услуги (например, послеоперационный уход, стабилизация состояния пациента, уход в послеоперационной палате, обновление документации).

         Для хирургических процедур общий период работы такой же, как и общий хирургический период, включая время в послеоперационной палате, обычное послеоперационное стационарное лечение и визиты в офис после выписки, а также предоперационную и интраоперационную работу.

         Все рабочие RVU, присвоенные кодам, выражают общую работу и предлагают количественную меру времени и усилий, затраченных на предоставление услуги.

         Сравнительный анализ производительности

         До внедрения RBRVS единственным средством отслеживания производительности поставщика услуг был подсчет количества пациентов, которых осмотрел врач, и процедур, которые они выполнили. Этот метод оказался неэффективным, предлагая немногим больше, чем измерение объема, учитывая, что работа, связанная с предоставлением каждой услуги, сильно различается.

         Количество RVU, созданных врачом, в настоящее время является лучшим доступным средством измерения производительности врача. Таким образом, RVU стали стандартной моделью компенсации поставщиков. Хотя компенсация, как определено в трудовых договорах, различается пороговыми значениями RVU и долларами за RVU, общая цель модели RVU – платить врачам в зависимости от объема выполненной работы, независимо от состава плательщиков или суммы полученного дохода.

         СРТ 9Коды 3434 ® защищены авторским правом 2021 Американской медицинской ассоциации.

         Что такое RVU?

         RVU означает относительную единицу стоимости. Это значение, присвоенное CMS определенным кодам CPT ^® и HCPCS уровня II для представления стоимости предоставления услуги. RVU состоит из трех компонентов: работа врача, расходы на практику и злоупотребление служебным положением. Платежи Medicare определяются RVU, умноженными на коэффициент денежного преобразования и географическую поправку.

         Почему wRVU?

         Рабочие RVU часто используются в моделях вознаграждения поставщика услуг, когда целью является оплата поставщику в зависимости от объема выполненной работы без учета состава плательщиков или суммы полученного дохода. Компенсация рассчитывается путем умножения общего количества RVU за работу на коэффициент пересчета в долларах.

         ---

         Дополнительные варианты обучения и ресурсы

         Инструмент для использования E/M
         БЕСПЛАТНО

         ---

         Последний раз проверено 15 февраля 2022 г. , командой AAPC Thought Leadership

         Калькулятор налога с продаж и инструмент поиска ставок

         Введите свой адрес в США ниже и получите ставку налога с продаж для вашего точного местоположения.

         улица

         Город

         Штат StateAlabamaAlaskaArizonaArkansasCaliforniaColoradoConnecticutDelawareFloridaGeorgiaHawaiiIdahoIllinoisIndianaIowaKansasKentuckyLouisianaMaineMarylandMassachusettsMichiganMinnesotaMississippiMissouriMontanaNebraskaNevadaNew HampshireNew JerseyNew MexicoNew YorkNorth CarolinaNorth DakotaOhioOklahomaOregonPennsylvaniaPuerto RicoRhode IslandSouth CarolinaSouth DakotaTennesseeTexasUtahVermontVirginiaWashingtonWashington, DCWest VirginiaWisconsinWyoming

         - Или -

         Использовать мое текущее местоположение

         Ваша ставка налога с продаж

         Комбинированная налоговая ставка

         %

         Местоположение

         Разбивка по юрисдикции

         Руководство по налогу с продаж штата Алабама Руководство по налогам с продаж в Аризоне Руководство по налогу с продаж в Арканзасе Руководство по налогу с продаж в Калифорнии Руководство по налогу с продаж в Колорадо Руководство по налогам с продаж в Коннектикуте Руководство по налогу с продаж во Флориде Руководство по налогам с продаж в Грузии Руководство по налогу с продаж на Гавайях Руководство по налогам с продаж в штате Иллинойс Руководство по налогу с продаж в Индиане Руководство по налогам с продаж в Канзасе Руководство по налогу с продаж в Кентукки Руководство по налогам с продаж в Луизиане Руководство по налогам с продаж в Мэриленде Руководство по налогу с продаж в штате Массачусетс Руководство по налогам с продаж в штате Мичиган Руководство по налогу с продаж в Миннесоте Руководство по налогу с продаж в штате Миссури Руководство по налогу с продаж в Неваде Руководство по налогам с продаж в Нью-Джерси Руководство по налогам с продаж в Нью-Мексико Руководство по налогам с продаж в Нью-Йорке Северная Каролина Руководство по налогам с продаж в Огайо Руководство по налогам с продаж в Оклахоме Руководство по налогу с продаж в Пенсильвании Руководство по налогам с продаж в Южной Каролине Руководство по налогу с продаж в Теннесси Руководство по налогам с продаж в Техасе Руководство по налогу с продаж в штате Юта Руководство по налогу с продаж в Вирджинии Руководство по налогу с продаж в штате Вашингтон Руководство по налогу с продаж штата Висконсин

         Рассчитайте общую сумму

         Посмотрите ставку налога с продаж, применяемую к любой цене товара

         $

         + Ставка налога с продаж

         Разбивка налогов

         Итого

         Налог

         Сумма налога

         Итого

         Нужны дополнительные ставки? Получите немедленный доступ к нашему калькулятору налога с продаж.

         Воспользуйтесь преимуществами этих ресурсов соответствия

         Применяйте более точные ставки к налоговым декларациям

         Заставьте свои ставки работать, попробовав Avalara Returns for Small Business бесплатно в течение 60 дней.

         Упростите налоговую регистрацию

         Используйте одну форму для всех штатов где нужно зарегистрироваться.

         Определите и подайте заявку на получение бизнес-лицензий

         Быстро изучите лицензии, которые нужны вашему бизнесу, и позвольте Avalara управлять вашим портфелем лицензий.

         Получите информацию о налоге с продаж и о том, как он влияет на ваши существующие бизнес-процессы

         Посетите наш ресурсный центр

         Налоговые изменения Avalara за середину 2022 года уже доступны.
         Читайте о законах о нексусе 2022 года, отраслевых новостях, изменениях в соответствии и многом другом.

         Получите бесплатную копию сейчас

         Хотите узнать больше о ставках налога с продаж? Подпишитесь на нашу рассылку.

         Часто задаваемые вопросы

         Часто задаваемые вопросы

         Как узнать, обязан ли мой бизнес взимать налог с продаж?

         Существует множество способов установить взаимосвязь налога с продаж — связь между бизнесом и штатом, которая создает требование о сборе налога с продаж — и нет двух абсолютно одинаковых законов штата о налоге с продаж.

         Определить, какие законы применимы к вашему бизнесу, сложно, но это важный шаг к соблюдению требований. Дополнительную информацию см. в нашем руководстве продавца по законам о взаимосвязи и требованиям к сбору налогов с продаж.

         Как работает этот калькулятор налога с продаж?

         Когда вы вводите почтовый адрес, калькулятор использует геолокацию, чтобы определить точную налоговую юрисдикцию. Оттуда он может определить соответствующую ставку налога с продаж, используя AvaTax, наш инновационный облачный продукт для расчета налога с продаж.

         Этот уровень точности важен при определении ставок налога с продаж. В некоторых местах тарифы для двух соседних адресов могут быть разными. Использование города или почтового индекса не является надежным способом расчета ставок налога с продаж.

         Как рассчитывается налог с продаж?

         На первый взгляд расчет налога с продаж кажется простым: возьмите цену налогооблагаемого продукта или услуги и умножьте ее на ставку налога с продаж. Однако с налогом с продаж почти никогда не бывает так просто. Настоящая хитрость заключается в том, чтобы выяснить, что должно облагаться налогом, а затем рассчитать правильную налоговую ставку, что, в зависимости от того, как работает ваш бизнес, может означать изучение правил в любой из более чем 12 000 налоговых юрисдикций в Соединенных Штатах.

         Хотите узнать больше? Прочтите эту статью, чтобы узнать больше о том, как правильно определить налог с продаж.

         Какова моя ставка налога с продаж?

         Хотя ставки налога с продаж обычно устанавливаются на уровне штата, некоторые штаты разрешают округам, городам или местным налоговым округам устанавливать свои собственные ставки и правила. При таком большом количестве юрисдикций, устанавливающих ставки, правила и границы, определить ставку налога с продаж лучше всего с помощью адреса улицы, а не названия города, названия улицы или почтового индекса.

         Воспользуйтесь нашим бесплатным калькулятором налога с продаж выше, чтобы вычислить ставку налога с продаж для любого почтового адреса в США.

         Я обычно использую почтовые индексы для определения ставок налога с продаж. Почему этот инструмент не использует их тоже? Почтовые индексы

         были созданы для помощи Почтовой службе США в доставке почты и не зависят от каких-либо систем государственных доходов. Границы могут меняться и часто не совпадают с юрисдикциями по налоговым ставкам. Это делает их неправильным инструментом для определения ставок налога с продаж в Соединенных Штатах.

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

         У меня нет времени искать налоговую ставку для каждой продажи. Есть ли более быстрый способ?

         Avalara AvaTax – это автоматизированное решение для налогообложения продаж, которое работает с вашей системой электронной коммерции, POS или ERP для расчета ставок в режиме реального времени. Если вы работаете с разработчиком, он может воспользоваться API Avatax, чтобы встроить определение ставки налога с продаж в ваше приложение.

         Подробная информация о ставке налога с продаж в штате США

         Alabama

         Alaska

         Arizona

         Arkansas

         California

         Colorado

         Connecticut

         Delaware

         Florida

         Georgia

         Hawaii

         Idaho

         Illinois

         Indiana

         Iowa

         Kansas

         Кентукки

         Louisiana

         Maine

         Maryland

         Massachusetts

         Michigan

         Minnesota

         Mississippi

         Missouri

         Montana

         Nebraska

         Nevada

         New Hampshire

         New Jersey

         New Mexico

         New York

         Северная Каролина

         Северная Дакота

         Огайо

         Оклахома

         Орегон

         Пенсильвания

         Пуэрто-Рико

         Rhode Island

         South Carolina

         South Dakota

         Tennessee

         Texas

         Utah

         Vermont

         Virginia

         Washington

         Washington, DC

         West Virginia

         Wisconsin

         Wyoming

         Alabama

         Аляска

         Аризона

         Арканзас

         Калифорния

         Колорадо

         Коннектикут

         Делавэр

         Флорида

         Georgia

         Hawaii

         Idaho

         Illinois

         Indiana

         Iowa

         Kansas

         Kentucky

         Louisiana

         Maine

         Maryland

         Massachusetts

         Michigan

         Minnesota

         Mississippi

         Missouri

         Монтана

         Небраска

         Невада

         Нью-Гемпшир

         Нью-Джерси

         Нью-Мексико

         Нью-Йорк

         North Carolina

         North Dakota

         Ohio

         Oklahoma

         Oregon

         Pennsylvania

         Rhode Island

         South Carolina

         South Dakota

         Tennessee

         Texas

         Utah

         Vermont

         Virginia

         Washington

         Западная Вирджиния

         Висконсин

         Вайоминг

         Пуэрто-Рико

         Вашингтон, округ Колумбия

         Свяжитесь с Avalara, чтобы получить более точные ставки, которые помогут вам соблюдать налоговое законодательство.

         

         877-286-2149

         Запланируйте звонок

         Чат со специалистом

         Свяжитесь с Avalara, чтобы получить более точные ставки, которые помогут вам соблюдать налоговое законодательство.

         877-286-2149

         Запланируйте звонок

         Пообщаться со специалистом

         Как сделать калькулятор на Python

         Сделать калькулятор на Python

         Хотите сделать калькулятор на Python? В этом уроке мы покажем вам, как написать свой собственный код!

         Будучи языком программирования высокого уровня, Python идеально подходит для такого рода проектов кодирования. Выполнив несколько простых шагов, вы сможете уверенно создать простой калькулятор.

         Готовы узнать больше? Давайте начнем!

         Зачем делать простой калькулятор?

         Программирование на Python — это удобный способ научиться программировать для детей в возрасте от 8 до 18 лет.

         Вы можете создать простой калькулятор для выполнения арифметических операций, включая сложение, вычитание, умножение и деление. Это отличный подход для изучения основ языка программирования (и подготовки к более сложному программированию).

         Изучая такие концепции, как условные операторы, циклы while и другие, юные программисты могут улучшить свои общие навыки кодирования. Он также обеспечивает практику работы с числами, математикой и программированием в командной строке.

         Этот тип проекта кодирования открывает двери для многих возможностей. От видеоигр до мобильных приложений и искусственного интеллекта начинающий программист может получить преимущество во многих захватывающих профессиях и хобби в будущем!

         Что нужно для начала

         Python — это язык программирования с открытым исходным кодом. Это бесплатно для всех!

         Если у вас его еще нет, вы можете загрузить Python 3 с официального сайта. Он работает в различных операционных системах (включая Windows, MacOS и Linux). Процесс загрузки также включает ссылку на удобную документацию по Python.

         Новичок в Python? Ознакомьтесь со следующими ресурсами:

         Python Coding 101 (для детей от 11 лет)

         Создание виртуального фона Zoom (для начинающих)

         Нарисуйте Солнечную систему (графика для начинающих)

         Ищете что-то более продвинутое? Вот несколько учебных пособий по Python:

         Игра «Камень, ножницы, бумага» (средний уровень)

         Создание симулятора домашних животных (средний уровень)

         Создание графиков в Python (от среднего до продвинутого уровня)

         Создание собственной программы на Python — это весело, но это может быть сначала немного пугающе. Не волнуйся! С практикой и правильным руководством вы освоитесь.

         Условия программы Python

         Прежде чем приступить к изучению Python, давайте рассмотрим термины и концепции!

         Tkinter

         Python предлагает множество способов разработки графического пользовательского интерфейса (или GUI). Графический интерфейс предоставляет пользователю различные окна, кнопки и другие виджеты для взаимодействия с приложением.

         Tkinter (наряду с PyQT и wxPython) — один из самых популярных графических интерфейсов. Tkinter позволяет легко и быстро создавать различные приложения, включая калькулятор с графическим интерфейсом.

         Наряду с mainloop — этот метод позволяет Tkinter запустить приложение — он позволяет создать калькулятор с графическим интерфейсом. После того, как вы попрактикуетесь в создании простой программы-калькулятора, вы сможете улучшить свои навыки кодирования с помощью версии с графическим интерфейсом!

         Def и Elif

         Def — это имя, определяющее функцию. Далее следуют параметры функции, которые заключены в круглые скобки. После этого в строке кода ставится двоеточие. Двоеточие представляет собой начало тела функции.

         Элиф (сокращение от «иначе если») позволяет пользователю проверять наличие нескольких выражений. Например, если условие для 'if' равно True, он проверяет другие блоки elif. Если все остальные условия истинны, то выполняется часть else.

         Другие термины Python

         1. Алгоритм: Инструкции, выполняемые для поиска решения конкретной проблемы.

         2. Условный оператор: используется, когда заданное условие либо истинно, либо ложно.

         3. Eval: Функция, которая оценивает выражение и возвращает его как целое число.

         4. Неверный ввод: указывает, что информация от пользователя не принята.

         5. Lambda: однострочная функция, которая сокращает количество строк кода.

         6. Num: сокращение от числовых типов данных, в которых хранятся числовые значения.

         7. Рекурсия: Действие функции вызывать себя.

         8. Исходный код: Код, сгенерированный программистом.

         9. Пользовательский ввод: информация, предоставляемая пользователем с помощью устройств ввода, таких как клавиатура.

         10. Цикл while: многократно выполняет операторы до тех пор, пока не будет выполнено заданное условие.

         Дополнительные определения см. в глоссарии Python.

         Программа калькулятора Учебник

         Пришло время создать собственную программу на Python!

         Существует несколько способов создания калькулятора. Сегодня мы сосредоточимся на простом калькуляторе для сложения, вычитания, умножения и деления.

         Код калькулятора

         Взгляните на приведенный выше код. В этом примере это позволяет вам выбрать два числа для каждой функции. Эти числа представлены num1 и num2.

         Как видите, есть четыре функции, представленные своими группами кода.

         Первое число (число1) можно складывать, вычитать, умножать или делить на второе число (число2) с помощью нашей программы-калькулятора Python.

         Следующая часть кода позволяет пользователю вводить данные. В этом примере он состоит из ветвления функции elif, которое позволяет вам выбрать одну из четырех математических операций.

         «1» представляет собой сложение, «2» представляет собой вычитание, «3» представляет собой умножение, а «4» представляет собой деление.

         Выбрав операцию, введите два числа, которые представляют вашу математическую задачу. Например, если вы хотите найти ответ на 15 x 10, введите 15 в качестве первого числа (число 1) и 10 в качестве второго числа (число 2).

         Когда все условия выполнены для конкретной операции — в данном случае умножения — выполняется тело else, в результате чего выводится ответ: 150.

         Примечание. В этом уравнении используются целые числа (известные как целые числа). Кроме того, мы не используем десятичные точки. Это связано с функцией int() в коде. Его можно настроить для размещения десятичных знаков с помощью функции float().

         Имейте в виду, что если вы введете что-то недопустимое, например буквы, приложение выдаст вам сообщение «Неверный ввод». В приведенном выше примере мы ввели «математику» вместо числового значения. Это приводит к сообщению «ValueError».

         Поздравляем!

         Вы только что узнали, как создать собственную программу-калькулятор на Python. Продолжайте практиковаться и изучать новые техники. Прежде чем вы это узнаете, вы сможете создавать свои собственные игры и приложения. Продолжайте хорошую работу!

         Хотите продолжить обучение? Нужна помощь?

         Надеемся, вам понравилось это руководство по программированию на Python!

         Создание собственного базового калькулятора — это весело и полезно. Еще один отличный способ освоить новые навыки программирования — обратиться к дружелюбному и знающему инструктору.

         В Juni Learning мы предлагаем курсы программирования для детей. Ваш ученик может создавать свои собственные проекты по программированию с индивидуальным руководством.

         Есть вопросы? Поговорите с консультантом Juni, позвонив по телефону (650) 263-4306 или отправив электронное письмо по адресу [email protected] , чтобы узнать больше о нашей учебной программе по программированию и нашем подходе к онлайн-обучению.

         ---

         Juni Learning предлагает отмеченное наградами онлайн-обучение для детей в возрасте от 7 до 18 лет.

         No related posts.

         • Вперед Md5 хеш: Создать и расшифровать md5 online
         • Назад Исходный код страницы онлайн: онлайн инструмент для просмотра HTML кода

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

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

         Комментарий *

         Имя *

         Email *

         Сайт

         Рубрики

         • Css
         • Html
         • Http
         • Javascript
         • Photoshop
         • Верстка
         • Вопросы и ответы
         • Макет
         • Развитие сайтов
         • Сайт
         • Шаблон
         • Шрифт
         • Разное

         Рубрики

         • Css
         • Html
         • Http
         • Javascript
         • Linux
         • Photoshop
         • Адаптив
         • Верстка
         • Вопросы и ответы
         • Макет
         • Развитие сайтов
         • Разное
         • Сайт
         • Советы
         • Шаблон
         • Шаблоны
         • Шрифт
         • Шрифты