Сейчас я начинаю четвертую неделю в «Железном дворе». У меня есть большой опыт в использовании HTML, CSS и Javascript. Я собираюсь попробовать и сделать немного больше технического блога сегодня и попытаться деконструировать свой проект Недели 3. Проект «Неделя 3» заключался в создании калькулятора, который устанавливается в браузере (HTML, CSS и Javascript). Основные требования заключаются в том, что он добавляет, вычитает, умножает, делит, очищает, обрабатывает десятичные дроби и показывает пользователю их ввод.

(Далее идет обсуждение технических вопросов. Если у вас нет опыта в программировании, это может быть немного потеряно для вас. Даже если вы это сделаете, это может немного сбить с толку без кода.) Я хочу попробовать и сделайте шаг назад и обсудите на высоком уровне то, что я хотел достичь, по сравнению с тем, что произошло на самом деле. Думаю, это будет пользовательская история моего калькулятора. Я хотел, чтобы калькулятор работал как большинство карманных компьютеров. Я хочу, чтобы пользователь видел свой ввод, но, в отличие от самых дешевых калькуляторов, я хотел, чтобы он видел весь ввод с оператором. Перед нажатием кнопки «равно» на дисплее должно отображаться «3 * 3». После нажатия «равно» я хотел, чтобы пользователь видел свой ответ только на дисплее, например «9». Я хотел, чтобы пользователь затем ввел другую операцию и продолжил изменять ответ, например. пользователь вводит «3 * 3», нажимает «равно», видит на дисплее «9» и нажимает «+3», на дисплее отображается «9 + 3», нажимает «равно», и на дисплее отображается «11». Я также хотел получить квадратный корень и функцию по модулю.

Я начал с написания HTML. Мы узнали, что можем заставить Javascript писать HTML за нас, но это не казалось необходимым. Калькулятор будет статическим, за исключением некоторых изменений стиля наведения и отображения. Я структурировал свой HTML так, чтобы его можно было использовать с flexbox для форматирования. У меня были все цифровые клавиши одного класса, а операторы одного класса. У каждого числа и оператора был уникальный идентификатор, который являлся точным значением ключа, который будет использоваться позже. CSS не сделал ничего примечательного, но вызвал у меня небольшие проблемы. Я попытался объединить все элементы управления, отображения и кнопок в один блок и обернуть их, но это оказался кошмар с медиа-запросами. Я закончил тем, что каждая строка была отдельным div, и все сработало нормально. Затем я перешел к мясу и картофелю, Javascript.

Первым препятствием, над которым мне пришлось задуматься, было то, как именно отображать это в реальном времени. Как оказалось, это не такая уж большая проблема для Javascript и HTML, но у меня возникли проблемы с пониманием концепции. Я решил взять идентификатор div, который нажимал пользователь, и назначить его переменной, а затем поместить его в пустой массив, holdArray. Это означало, что значение было в holdArray в виде строки. Затем я произвел соединение с holdArray, чтобы удалить что-либо, или «», и назначил это displayArray. Наконец принял displayBox.textcontent как равный displayArray. Теперь у меня есть динамический дисплей. Я сделал это для всех номеров и операторов.

Я попытался сделать функцию, которая добавляет оператор или число в поле отображения, автономной функцией, которую я могу вызвать в прослушивателе событий вместо того, чтобы кодировать ее дважды. Первая проблема заключалась в том, что функция выполнялась немедленно, не дожидаясь события. Это легко исправить с помощью синтаксической ошибки. Мне просто пришлось удалить () из имени функции в прослушивателе событий, например item.addEventListener («щелчок», functionName). Следующая проблема, с которой я столкнулся, заключалась в том, что для назначения прослушивателя событий каждой кнопке использовался цикл for, а значения операторов отличались от чисел. У каждого был свой цикл for, и он был необходим, поскольку каждый массив был разного размера.

Проблема возникает, когда я пытаюсь передать идентификатор div в holdArray для сохранения значения. Обычно я использую итератор для определения конкретного элемента, который я вызываю. Это не было выходом за рамки цикла for, и он продолжал выбрасывать undefined. Я довольно легко отказался от этого. Я полагаю, это можно было бы исправить, если бы я изменил операторы и числа на один и тот же класс в HTML. Нет никакой реальной причины разделять их по-другому.

Немного сложнее всего это сделать с кнопкой равенства. У меня есть holdArray со всеми моими числами и операторами. Сначала я присоединяюсь ко всему, а затем передаю в функцию eval. Я устанавливаю количество десятичных знаков и присваиваю его переменному ответу. Теперь я могу передать ответ в displayBox и очистить свои удерживающие массивы displayArray и holdArray. Это позволяет пользователю начать следующий расчет, не нажимая "равно".

Кнопка очистки просто очищает все массивы. Кнопка извлечения квадратного корня берет запись и передает ее через функцию Math.sqrt.

В моей текущей программе я не могу продолжать вычисления после нажатия кнопки равенства. Вычисление должно быть полностью введено, а затем можно нажать кнопку «равно». Функция eval заботится о порядке работы, но я не добавил никаких скобок. Я немного расстроен, я не завершил свою пользовательскую историю на 100%, но я думаю, что это потребует полного переписывания того, как я обрабатываю свои данные. В целом я доволен проектом, но не доволен. Я могу вернуться к этому позже.