Подсчитайте ... это все, что мы, кажется, делаем все время. От планирования бюджетов и отпусков до того, что осталось в нашем аккаунте 401k, все это требует небольших вычислений. То же самое и для разработчиков программного обеспечения; мы рассчитываем, когда строим вещи. Прямо сейчас этот «материал», который мы собираемся создавать шаг за шагом, и исправлять по частям, представляет собой научный калькулятор.
Теперь это не связано с API, что делает его очень кратким и простым (или немного сложным) для нас. Навыки, которые вам понадобятся, включают хорошее владение HTML, CSS и JavaScript. Используйте свое воображение, здесь мы также будем проделывать множество манипуляций с DOM. Будет справедливо сказать, что мы начали хорошее дело. Давай сделаем это!
(Если вы предпочитаете просто скопировать и вставить код, а затем выяснить, как он работает, за чашкой кофе, есть черный ход с лестничным пролетом, который приведет вас туда)
Добавление кнопок
Здесь мы начнем с нашего HTML, создав кнопки, которые будут определять, как мы будем использовать наш калькулятор. Каждый научный калькулятор имеет свои функции, сгруппированные по четырем типам; основные функции (+, -, *, /… ..), триггерные клавиши (возврат, очистка и ввод), цифровые клавиши (в основном 0–9) и расширенные функции (ln, cos, log, rad, x ^… .. ). Чтобы упростить манипуляции при назначении функций в JavaScript и стилизации в CSS, мы дадим каждой кнопке класс button, а также класс одного из этих четырех; basic-stuff, numbers, triggers и complex-stuff:
Добавление наших триггерных функций
На следующем шаге нам нужно будет создать три самые важные кнопки; CLEAR, ENTER и BACKSPACE. С одной или двумя функциями и несколькими старыми добрыми методами JavaScript мы закончим эту часть в кратчайшие сроки:
Устранение синтаксических ошибок
Наш калькулятор должен уметь регистрировать синтаксические ошибки при вводе неправильного вычисления, скажем, 7-*8. Для этого нам нужно создать функцию:
Определение функций наших кнопок
Здесь мы перейдем к определению функции каждой кнопки. Это легко сделать с помощью JavaScript Math Object. Мы расскажем о многом. Вот несколько отрывков из кода, чтобы вы воодушевились.
Интеграция наших функций с нашими кнопками
Последний кусок нашей головоломки? Предоставляем нашим пользователям что-то, на что можно щелкнуть, и видеть, что это действительно работает. Помните, раньше мы присвоили каждой кнопке класс button? Мы собираемся найти хорошее применение тому, что мы сделали. Мы создадим массив каждого элемента с именем класса button и пройдемся по массиву, вызывая каждую кнопку и назначая ей соответствующую функцию. Это какой-то длинный код (10 000 строк да! :)), но, как обычно, мы предоставим отрывки:
Заключение
Мы пересекли финишную черту, заметили, я ничего не сказал о CSS? Это потому, что, в отличие от HTML и JavaScript, вам разрешено делать свои собственные вещи в CSS; или так кажется. Люди, кажется, думают, что CSS - это просто, я принимаю сторону Отиса Райта здесь.
При желании вы можете просмотреть калькулятор здесь. Ваше здоровье!
Если вам это понравилось, пожалуйста, аплодируйте кнопкой аплодисментов, заранее спасибо!
