Всем привет. Мы продолжаем решать задачи по JavaScript с Алисой.
Сегодня мы будем продолжать решать задачи на исправление багов. Алиса будет генерировать нам код, а мы должны будем в нём исправлять ошибки.
Мне нравится, какие Алиса генерирует нам задачи, если её попросить, она может подредактировать некоторые детали и даже сделать CSS стили для кода задачи, после чего это будет выглядеть очень круто.
Давайте начинать.
Генерируем задачу
Как и в прошлый раз, мы просим сгенерировать 20 заголовков задач, после чего выбираем из них интересное задание, и Алиса даёт нам подробное описание и код.
Так, чуть по короче нам надо
Вот. Теперь выбираем самую интересную задачу.
Мне понравилась задача 6: "Калькулятор не обрабатывает отрицательные числа". Попросим ИИ раскрыть нам этот пункт.
ИИ не выдал нам HTML код, только чистый JS. Хотелось бы видеть всё это визуально, а также, чтобы были красивые стили.
Алиса выдала нам HTML, CSS, JS, теперь всё это надо вставить к себе на страничку.
Пхххх... Это что?? 😀
Кнопки уехали, так ещё и отрицательные числа обрабатываются...
Смотрите, что мне Алиса написала. Жесть...
Я попросил её связать JS с HTML, а она зачем-то исправила JS код, который был написан с ошибками специально... JS код специально был написан с ошибками для задания, зачем его было исправлять???
Ладно, нужно набраться терпения. С Алисой всегда можно договориться...
Да, вот теперь калькулятор не работает. Всё хорошо, но кнопки так и не были исправлены.
Ничего страшного, это же ИИ. Сомневаюсь, что он свой код запускает. На самом деле написать код только у себя в уме, это довольно сильно.
Решаем задачу
Допустим. Представим, что неправильные кнопки это не просто ошибка, а это баг, который нужно нам исправить...
Хмм... А вдруг так действительно задумывалось? Вот этого я не знаю...
Давайте для начала исправим кнопки
Я думаю, пустую кнопку нужно перенести на место кнопки деления, кнопку деления и все остальные кнопки с операторами сдвинуть вправо, а чуть ниже разместить девять цифр.
Так, кнопку без действия добавили, слеш сдвинули...
Да ладно!! 😮. Оказывается только этой детали и не хватало, чтобы нормально выстроить кнопки. Вот тут я удивлён...
Даже если это и был реальный баг Алисы, предусмотреть такую мелочь довольно непросто, когда ты ИИ, который пишет код наугад, то есть его не тестирует. Я очень сомневаюсь, что Алиса его тестирует. Для этого нужно ещё больше прокачивать ИИ и дать ему возможность анализа изображений и запуска кода на сервере. А если попросить его сгенерировать какой-нибудь тяжёлый код, он будет у себя на сервере его проверять? Это уж вряд ли...
Ладно, это было всё равно интересно и тоже относится к задачам на исправление багов.
Приступаем к исправлению самого JS.
Я заметил, что кнопка очистки не работает. Исправляем баг.
Она вызывает функцию "clearDisplay()".
Так. У нас есть вот такая функция. Она очищает какие-то инпуты и обнуляет операцию. Если присмотреться, внизу есть функция "updateDisplay()". По названию понятно, что она дисплей обновляет.
В других функциях она вставлена. А про функцию очистки забыли. Сам то калькулятор очищается, но у него не обновляется дисплей.
Работает!! 😀
Алиса даже дала нам список багов для исправления. Как мило.
Здесь есть немножко спойлеров, нам такое не надо...
Так, будем пользоваться вот таким списком. Теперь исправим ошибку 5, дисплей не обновляется после вычисления.
Так, проверил. Правда не обновляется.
То же решение, тоже добавляем "updateDisplay()", но уже в функцию для вычислений.
"5 + 5 = 10". Хорошо
Исправляем ошибку 7.
Нет, а вот это не правда. Не знаю, почему это работает...
Пробуем делить на 0.
Допустимо ли это...
По сути, так работает JavaScript. Если поделить число на 0, он выдаст Infinity. Возможно нужна какая-то обработка к этому случаю.
Редактируем функцию calculate()
Приближу для вас.
Я сначала подумал через "result" вывести сообщение, но потом понял, что это плохая идея.
Лучше в конце, после проверки знаков, сделать ещё проверку. В ней будет проверяться, является ли наш знак "/" и делили ли мы на 0? Если мы пытались делить на 0, "result" станет просто нулём (для следующих вычислений), а в сообщении будет выведено "На ноль делить нельзя".
На ноль... Вот так поворот...
Так, я уж подумал, что это всё обрезается в коде. Здесь просто места не хватило.
Либо калькулятор нужно увеличить, либо текст уменьшить.
Я попробовал сделать "На 0 делить нельзя", но проблему это не решило.
Просто выведем текст "Ошибка"
Я только сейчас понял, что немного ошибся. CurrentInput это не элемент для вывода сообщений, это элемент для вывода цифр, да и вообще всего. А "result" это просто временная переменная, её можно было вообще не трогать.
Ничего страшного. Не стоит бояться ошибок, нужно их преодолевать. 😃
Если к этой ошибке прибавить 1 или сделать какое-либо другое действие, будет NaN
По сути это ошибка 3, которую как раз мы и будем сейчас решать.
Посмотрим на кнопки. Действия задаёт функция "setOperation()", а числа задаёт "appendNumber()".
Забавно, мы ещё можем так
По этим функциям нужно пройтись и поисправлять.
Если у нас "currentInput" равен "Ошибка", он сбросится до 0, и сразу же будут сделаны новые действия. Нужно то же самое сделать и для "NaN". А также обновить экран.
То же самое и с добавлением числа. Просто заменяем "currentInput" на 0, а дальше делаем вид, как будто 0 был изначально, делаем с ним те же действия.
А ошибка то не исчезла
Вот блин, нужно было в виде текста задать это, а не в виде числа.
В двух функциях сделать так надо
Сразу после ошибки пишем "5 + 5", получается "10". Всё правильно работает.
Но хотелось бы посмотреть на этот NaN в других случаях, кроме нашего. Когда такое можно получить?
Так, я нашёл способ. Ставим точку, меняем этой точке знак на минус "кнопка +-", потом прибавляем любое число
Получаем это
Наш третий пункт задачи:
"3. Отсутствие проверки на NaN — если ввод некорректен, вычисления дают неожиданные результаты."
Я думаю, здесь можно также заменить "NaN" на "Ошибка", а потом наш калькулятор сам с ней справится, механизм мы уже сделали...
Делаем проверку на NaN в функции с вычислениями.
Если кто не знал, NaN расшифровывается как "Not a Number" ("Не число") и выводится тогда, когда мы делаем совсем странные действия с нашими числами. Действия, которые ломают математическую логику и не могут быть произведены.
Тот же наш пример "-. + 3 = NaN". Мы к отрицательной точке решили прибавить 3.
В общем, NaN у нас быть не должно, и тем более никаких действий мы с ним проводить не должны. Мы не должны складывать NaN (NaN + 4), и тому подобное.
Забавно. Баг остался.
Забавно, но в логике JavaScript мы никак не можем сравнивать NaN, даже с самим собой.
Это сделано для предотвращения ошибки. Представьте, произошли ошибки в вычислении и два числа посчитались неправильно. Например, было "-. + 3" и "-. + 4". А потом их надо сравнить. Получится, что "NaN == NaN" это правда.
Нам нужен другой способ.
Я думал, сделать проверку на тип, "typeof NaN", но NaN имеет тип number (число).
Я нашёл вот такой способ, функция "isNaN()"
Поэтому делаем так
Вот. Минус точка плюс два выдаёт "Ошибка", а не "NaN".
После чего можно продолжить считать, и наши числа не будут складываться с "NaN" или строкой "Ошибка".
Так, а это что такое?? Номер 2...
Я понял. На этом калькуляторе нельзя ввести "5 + 5 + 5" и получить 15. Предыдущие цифры просто стираются, остаются только последние две. Получается 10.
Ну, это видно в логике нашей функции.
Давайте смотреть.
Когда мы вводим первое число, переменные такие:
previousInput = ''
cuttentInput = '5' (например)
Когда мы нажимаем на плюс или другую кнопку:
previousInput = '5'
cuttentInput = '0' (например)
Когда мы вводим ещё число
previousInput = '5'
cuttentInput = '4'
Когда мы нажимаем равно
previousInput = ''
cuttentInput = '9'
Нам нужно сделать условие. Если мы нажимаем на плюс или другой оператор, наш код должен проверять, есть ли у нас уже в "previousInput" какое-то значение или нет. Если есть, он сложит имеющиеся два числа и запишет новые.
Выглядит это так
И это работает. Нажимаем 5, х, 5, х, 5, =, получаем 125.
И главное, что предыдущую логику это не ломает, что очень хорошо.
Остался пункт первый, знать бы, что это значит...
Так он и не будет работать, здесь так специально сделано.
Вот вам и 0 с минусом.
А также я заметил ошибку. Если мы нажмём 2, потом "+-", а потом равно, да и если просто выберем число и нажмём равно, выдаст ошибку.
А всё потому, что 8, неизвестное действие и "" никак не складываются.
В функции calculate делаем проверку. Если действие выбрано, оно будет нормально посчитано, а если нет, то результатом будет просто выбранное число.
Теперь можно взять 8, поменять ей знак и поставить равно
Вот, прекрасно 😁. Ну вроде бы всё.
Подведём итоги
Так, ну а на этом всё. Сегодня мы починили калькулятор и исправили в нём несколько багов.
Если было интересно, подписывайтесь на канал, ставьте лайки и пишите комментарии 😁