Насправді, створити такий калькулятор не дуже складно. Потрібна тільки форма і трохи JavaScript.
Отже, створимо для прикладу простенький калькулятор, за допомогою якого можна буде розв'язати квадратне рівняння за його коефіцієнтами.
Наша інтерактивна веб-сторінка потребуватиме двох файлів: власне, html-сторінка, на якій буде розміщено форму, і js-файл з програмним кодом скрипта, що виконуватиме обчислення.
Розробка форми
Для розміщення форми веб-сторінці є спеціальний парний тег <form>, яким позначається початок і кінець її розташування:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Квадратне рівняння</title>
</head>
<body>
<h1>РОЗВ'ЯЗУВАННЯ КВАДРАТНОГО РІВНЯННЯ</h1>
<form name="equation">
</form>
</body>
</html>
Одразу в тегу <form> розміщуємо атрибут name. Оскільки у формі потім доведеться відшукувати дані для подальших обчислень, то потрібно, щоб дану форму на сторінці можна було знайти, а тому даємо цій формі ім'я name="equation" (equation - з англ. "рівняння").
Тепер на формі потрібно розмістити полі для введення даних і підписи до них. Оскільки на нашій формі потрібно передбачити місця і для введення коефіцієнтів квадратного рівняння, і для виведення відповіді, то усі елементи керування на формі доцільно згрупувати окремо в два розділи: Умова і Відповідь. Для такого групування використовується парний тег <fieldset>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Квадратне рівняння</title>
</head>
<body>
<h1>РОЗВ'ЯЗУВАННЯ КВАДРАТНОГО РІВНЯННЯ</h1>
<form name="equation"> <fieldset style="width: 50%;"> </fieldset>
</form>
</body>
</html>От тепер у межах виділеної групи і розміщуємо елементи керування:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Квадратне рівняння</title>
</head>
<body>
<h1>РОЗВ'ЯЗУВАННЯ КВАДРАТНОГО РІВНЯННЯ</h1>
<form name="equation">
<fieldset style="width: 50%">
<legend style="font-weight: bold;">Коефіцієнти</legend> <!--Це заголовок групи, виділений напівжирним-->
<p>
<label>a=</label> <!--Підпис поля для першого коефіцієнта-->
<input type="text" name="a" value=""> <!--Це саме поле. Елемент керування типу text (для введення текстових значень), з іменем "а" (адже його потім скрипту теж доведеться відшукувати на сторінці, щоб зчитати з нього дані), значення (value) в полі за замовчуванням - ніякого значення-->
</p> <!--Усі інші елементи - аналогічно-->
<p>
<label>b=</label>
<input type="text" name="b" value="">
</p>
<p>
<label>c=</label>
<input type="text" name="c" value="">
</p>
</fieldset>
<br>
<input type="button" value="Обчислити" onclick=calculate()> <!--Важливий елемент керування: кнопка (button), клік по якій запустить скрипт. На кнопці відображається напис "Обчислити" (value). Клік по кнопці (onclick) повинен запустити скрипт, який називається calculate(), а порожні дужки в назві скрипта означають, що для початку його роботи він не вимагає ніяких вхідних даних, бо зчитуватиме їх самостійно-->
<br>
</form>
</body>
</html>З урахуванням введеного, наша сторінка тепер має такий вигляд:
Аналогічним чином створюємо ще одну групу елементів, куди буде виведено результат обчислень:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Квадратне рівняння</title>
</head>
<body>
<h1>РОЗВ'ЯЗУВАННЯ КВАДРАТНОГО РІВНЯННЯ</h1>
<form name="equation">
<fieldset style="width: 50%">
<legend style="font-weight: bold;">Коефіцієнти</legend>
<p>
<label>a=</label>
<input type="text" name="a" value="">
</p>
<p>
<label>b=</label>
<input type="text" name="b" value="">
</p>
<p>
<label>c=</label>
<input type="text" name="c" value="">
</p>
</fieldset>
<br>
<input type="button" value="Обчислити" onclick=calculate()>
<p></p> <!--Вставлено порожній абзац щоб забезпечити належний відступ від кнопки "Обчислити" до наступного блоку-->
<fieldset style="width: 50%;">
<legend style="font-weight: bold;">Відповідь:</legend> <!--Вставляємо новий розділ нашої форми й новий заголовок-->
<p>
<label>D=</label>
<input type="text" name="d" value="">
</p>
<p>
<label>x<sub>1</sub>=</label>
<input type="text" name="x1" value="">
</p>
<p>
<label>x<sub>2</sub>=</label>
<input type="text" name="x2" value="">
</p>
</fieldset>
<br>
<button type="reset">Очистити</button> <!--Щоб не писати ще один скрипт для очищення форми від попередніх даних, використовуємо готовий тип кнопки - reset-->
</form>
</body>
</html>Остаточний вигляд форми:
Ура! З формою усе. Ну, майже все. До коду сторінки потрібно буде ще повернутися й підключити до неї файл скрипта. Хоча, це можна зробити й одразу, підключивши порожній скрипт. В будь-якому разі переходимо до програмної частини нашої сторінки.
Написання скрипта
Власне, логіка роботи скрипта абсолютно зрозуміла кожному, хто колись навчався у 8 класі і знає, як розв'язується квадратне рівняння.
Наш скрипт робитиме точно те саме: прочитає дані з форми, обчислить дискримінант, якщо він від'ємний, то виведе повідомлення про це, а якщо більший нуля або дорівнює нулю, то обчислюватиме корені рівняння.
Отже, скрипт:
function calculate() { /*Заголовок функції, яка обчислюватиме корені рівняння*/
let a = document.forms.equation.a.value /*Отримання даних з форми на веб-сторінці. Що відбувається? Скрипт звертається до документа (document) - веб-сторінки, до якої він прив'язаний, шукає там форми (forms), серед усіх форм, які там є, відшукує форму, яку "звати" equation (саме таке ім'я (name) ми їй дали на етапі створення), серед усіх елементів форми знаходить той, яким має ім'я "а" (а це поле, в яке введене значення першого коефіцієнта квадратного рівняння) і прочитує з цього поля його значення (value) - те, що було введене в поле. Отримане зберігає як змінну а. Усе. */
let b = document.forms.equation.b.value /*Решту даних отримуємо аналогічно*/
let c = document.forms.equation.c.value
let d = b*b-4*a*c /*Тепер за формулою обчислюємо дискримінант квадратного рівняння*/
document.forms.equation.d.value = d /*Виводимо отримане значення дискримінанта в призначене для цього на формі поле за аналогічною до зчитування процедурою: відкриваємо документ, шукаємо на ній форми, серед форм знаходимо форму з іменем equation, на тій формі знаходимо елемент з іменем "d" і в його значення (value) виставляємо обчислений результат*/
if (d < 0) { /*Починаємо перевірку. Якщо дискримінант менший від нуля...*/
alert('Дійсних коренів немає!') /*...то виводимо у спливаюче вікно повідомлення інформацію про відсутність коренів рівняння*/
} else { /*Якщо попередня умова не виконується, значить корені у рівняння є,...*/ let x1 = (-b+Math.sqrt(d))/(2*a) /*...а отже починаємо їх обчислювати*/ let x2 = (-b-Math.sqrt(d))/(2*a)
document.forms.equation.x1.value = x1 /*І, аналогічно до виведення значення дискримінанта, виводимо в полі форми відповідні значення коренів рівняння*/
document.forms.equation.x2.value = x2
}
}Оскільки корені квадратного рівняння можуть бути виражені нескінченними десятковими дробами, то кількість знаків після коми можна дещо обмежити, наприклад, так:
document.forms.equation.x1.value = x1.toFixed(2) /*залишити два знаки після коми*/document.forms.equation.x2.value = x2.toFixed(2)Залишилось тільки підключити файл скрипта до веб-сторінки. Зробити це краще аж перед другим тегом </body> наприкінці сторінки:
... </form>
<script type="text/javascript" src="script.js"></script>
</body>
</html>Усе. Можна перевіряти створене на правильність функціонування:
P.S. А детальніше про форми можна почитати ТУТ