XIV Международная студенческая научная конференция Студенческий научный форум - 2022

Инструментом выполнения проекта является JavaScript. Среди множества языков программировании этот язык является клиентским и серверным языком одновременно, так же на нем можно писать как web так и мобильные приложении, так же JavaScript имеет много библиотек и фреймворков для упрощении работы с языком[1].

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

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

Для достижение такого результата в калькулятор встроен раздел «Теория» перейдя в который любой желающий может ознакомиться с теорией решения уравнений когда и .

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

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

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

Предварительно перейдем в раздел «Калькулятор», мы видим 3 поля ввода чисел(input), кнопку с текстом(button) и поле для вывод решение созданный при помощи парного тега div. Введем a, b и c затем нажмем кнопку «Рассчитать» чтобы получить решение. В этот момент программа начнет решение, который можно разделить на несколько этапов:

Проверка на NaN.

Чтобы решение выводилось корректно нужно что бы в полях ввода чисел не было никаких символов кроме «-» и 1-9. Эту проверку нам поможет сделать функция Number.isNaN(value) [2]. Для этого используем проверку с помощью if else, где вместо условии в if запишем проверку на NaN с значениями a, b и с, использую оператор или (||) мы можем проверить вернет ли true хотя бы в одном случае, и если да, то выведем с помощью функции alert сообщение «Можно вводить только числа», если венет false то мы можем работать дальше

Проверка что все числа введены

Если в поля не будут введены a и b то они будут равны
Но если не ввести значение с, то , и уравнение станет не полным калькулятор перейдет режим решение неполного уравнения. Если нажать на кнопку не введя ни одно значение значении будут равны .

ПРИНЦИП РАБОТЫ КОДА:

Ввод чисел в поля input.

Как только мы вводим значении в поля input мы можем заметить, что надписи поднимаются вверх создавая красивый эффект. Разберем, как это работает. Когда мы кликаем по input на нем через метод addEventListener навешивается слушатель событии focus и срабатывает, написанная функция labelCheckFocus(). Эта функция, через метод parentElement. querySelector(‘label’).classList.add(‘active’), находит ближайший родительский элемент lable, и присваивает ему класс active. При клике на другой элемент срабатывает события blur(потеря фокус), и через событие запускает функцию labelCheckBlur(), которая через input.value получает содержимое input, и проверяет input на наличии значении, если input будет равен пустой строке, то удаляет у lable класс active, если в инпуте будет число то оставляет.

Решение уравнения

После ввода чисел нужно запустить функцию которая будет решать уравнение и выводить результат. Это можно сделать двумя способами 1-ый кнопка в калькуляторе , 2-ой клавиша «Enter». Между этими способами нет ни какой разницы так как они запускают одну функцию. Разберем работу функции поподробнее. Работа функции происходит несколько этапов:

1) При запуске функции она изначально получает содержимое всех полей input.
2) Так как тип данных содержащий в input является строкой, его нужно преобразовать в число, для этого служит специальный метод parseInt(string).
3) Проверка на NaN. Как известно при попытки перевода строки, содержащий буквы, выведет NaN(не число)[3]. Поэтому нужно чтобы пользовать вводил только числа, для этого в код строен проверка isNaN(val), если проверка выведет true на странице выводится предупреждение о не допустимости ввода данных кроме чисел.

4) После прохождение проверки на NaN, код проверяет чему равны a и b, если a или b равно 0, то оно станет равным 1
. Если , уравнение решается приравниванием к нулю, для за знак скобки выносится , и уравнение обретает вид . Затем решает . Отсюда получаем . Затем через свойство innerHTML выводим результат в специально отведенный тег div. Если вычисляется дискриминант по формуле , затем проверяет и выводит подходящий решение при , при уравнение не имеет корней. После вычисление корней происходит вывод решений в тег div, для этого происходит подробное расписывание решений со всеми объяснениями и формулами которые нужны чтобы решить уравнение.

Переключение между табами.

Как упоминалось ранее в калькулятор встроены разделы(табы), в котором хранится теория об квадратных уравнениях и инструкция, они служат для ускорении работы приложении, попробуем разобрать как они работают. Основная логика их работы основано на работе классов JavaScript. Есть главный Class Component, в котором хранятся основные функции и методы. Когда мы хотим написать функцию нам не нужно писать все с нуля, достаточно просто наследоваться от родительского класса Component с помощью метода extends, и дать названию унаследованному классу.
Логика работы переключения табов: когда мы кликаем по document срабатывает событие клик, получая все data-атрибуты удаляя всем элементам класс active, затем добавляет класс active элементу на котором мы кликнули.

Фотография работы приложения при

Рисунок 1

Фотография работы приложения при

Рисунок 2

Теория по квадратным уравнениям при при

Рисунок 3

Теория по квадратным уравнениям при при

Рисунок 4

Ссылка на проект в GitHub:

https://ahmed-daurbekov.github.io/equation-calculator/

СПИСОК ЛИТЕРАТУРЫ

Богданов М. Р. Разработка клиентских приложений Web-сайтов [Электронный ресурс]: учебние для вузов http://biblioclub.ru/index.php?page=book_red&id=233745 Москва: Интернет -Университет Информационных Технологий, 2010 (дата просмотра: 05.11.2021).

Климов, Александр JavaScript на примерах / Александр Климов. - М.: БХВ-Петербург, 2018.

Макфарланд, Дэвид JavaScript. Подробное руководство / Дэвид Макфарланд. - М.: Эксмо, 2015.

Слепцова, Л. Д. JavaScript. Самоучитель / Л.Д. Слепцова, Ю.М. Бидасюк. - М.: Вильямс, 2017.

Код для цитирования: Скопировать