Як створити калькулятор, використовуючи мову html: 9 кроків

Математичні обчислення можна виконати на комп`ютері за допомогою калькулятора, але цікавіше створити калькулятор за допомогою найпростішого HTML-коду. Для цього необхідно розібратися в основах HTML, скопіювати код в текстовий редактор і зберегти його з розширенням HTML. Щоб скористатися калькулятором, потрібно відкрити HTML-сторінку в браузері. Описані дії дозволять не тільки виконувати обчислення в браузері, але і дізнатися деякі основи програмування.

кроки

Частина 1 з 4:

Основи HTML-коду

1. Вивчіть основні функції HTML. Описуваний код, за допомогою якого можна створити калькулятор, включає безліч елементів синтаксису, які визначають різні параметри сторінки. прочитайте статтю про те, як вивчити HTML, або читайте далі, щоб дізнатися, для чого призначена кожна рядок представленого тут коду.

html: Цей елемент синтаксису свідчить про мову, на якому написана програма. При написанні коду можуть використовуватися кілька мов програмування, тому тег вказує на мову HTML.
head: Всередині цього тега задаються параметри інших даних, тобто вказуються так звані метадані. Як правило, команда використовується для визначення параметрів стилістичних елементів, таких як заголовки, підзаголовки і так далі. Цей тег є своєрідну парасольку, під яким знаходиться основна частина програми.
title: Цей тег визначає назву сторінки, яке відобразиться в веб-браузері, коли ви її відкриєте.
body bgcolor = "#": Цей атрибут задає колір фону сторінки. Число, яке вводиться всередині лапок після символу #, відповідає певного кольору.
text = "": Слово, яке вводиться всередині лапок, визначає колір тексту сторінки.
form name = "": Цей атрибут визначає ім`я форми, яка використовується для створення структури на основі того, що jаvascript відомо значення імені форми. У нашому прикладі в якості імені форми буде використано значення «calculator» (калькулятор), що призведе до створення спеціальної структури сторінки.
input type = "": Це, мабуть, основний атрибут, який визначає, яким елементам сторінки відповідають значення, введені всередині лапок. Наприклад, такими елементами можуть бути тексти, паролі, кнопки (як в нашому випадку з калькулятором) і так далі.
value = "": Ця команда визначає символи, які відобразяться на елементах, заданих атрибутом «input type =". У разі калькулятора такими символами є цифри (1-9) і математичні операції (+, -, *, /, =).
onclick = "": Цей синтаксис описує подію, яка повинна відбутися при натисканні на кнопку. У разі калькулятора потрібно зробити так, щоб символ, відображений на кнопці, розумівся системою в буквальному сенсі. Наприклад, якщо на кнопці відображена цифра 6, в лапках потрібно ввести таке значення: document.calculator.ans.value + = `6`.
br: Цей тег ініціює розрив рядка на сторінці, тому все, що розташоване після цього тега, буде відображено на наступному рядку.
/ Form, / body, and / html: Це закривають теги, які завершують процеси, запущені відповідними відкривають тегами.

Частина 2 з 4:

Базовий HTML-код для створення калькулятора

1. Скопіюйте код, наведений нижче. Щоб виділити код, перемістіть курсор у верхній лівий кут вікна, затисніть ліву кнопку миші і перетягніть курсор в правий нижній кут вікна-код буде виділений синім кольором. Потім натисніть «Command + C» (в Mac OS) або «Ctrl + C» (в Windows), щоб скопіювати код в буфер обміну.

HTML Calculator bgcolor = "# 000000" text = "gold"> name = "calculator"> type = "button" value = "1" onclick = "document.calculator.ans.value + = `1` "> type =" button "value =" 2 "onclick =" document.calculator.ans.value + = `2` "> type =" button "value =" 3 "onclick =" document.calculator.ans.value + = `3` ">
 type = "button" value = "4" onclick = "document.calculator.ans.value + = `4` "> type =" button "value =" 5 "onclick =" document.calculator.ans.value + = `5` "> type =" button "value =" 6 "onclick =" document.calculator.ans.value + = `6` "> type =" button "value =" 7 "onclick =" document.calculator.ans.value + = `7` ">
 type = "button" value = "8" onclick = "document.calculator.ans.value + = `8` "> type =" button "value =" 9 "onclick =" document.calculator.ans.value + = `9` "> type =" button "value =" - "onclick =" document.calculator.ans.value + = `-` "> type =" button "value =" + "onclick =" document.calculator.ans.value + = `+` ">
 type = "button" value = "*" onclick = "document.calculator.ans.value + = `*` "> type =" button "value =" / "onclick =" document.calculator.ans.value + = `/` "> type =" button "value =" 0 "onclick =" document.calculator.ans.value + = `0` "> type =" reset "value =" Reset "> type =" button "value =" = "onclick =" document.calculator.ans.value = eval (document.calculator.ans.value) ">
Solution istype = "textfield" name = "ans" value = "">

Частина 3 з 4:

створення калькулятора

1. На комп`ютері відкрийте текстовий редактор. Існує безліч подібних програм, але ми рекомендуємо використовувати TextEdit або Блокнот.

У Mac OS клацніть по значку у вигляді лупи (у верхньому правому куті екрану), щоб відкрити Spotlight. Введіть «textedit» і клацніть по програмі TextEdit, яка буде виділена синім кольором.
У Windows відкрийте меню Пуск (у лівому нижньому куті екрану). У рядку пошуку введіть "блокнот" і клацніть по програмі Блокнот, яка відобразиться в рядку результатів пошуку (праворуч).

2. У текстовий документ вставте скопійований HTML-код.

У Mac OS клацніть по документу і натисніть «Command + V». Потім натисніть «Формат» (у верхній частині екрану) - «Створити текстовий документ».

У Windows клацніть по документу і натисніть «Ctrl + V».

3. збережіть файл. Для цього натисніть «Файл» (у верхньому лівому кутку вікна), а потім натисніть «Зберегти як» (в Windows) або «Зберегти» (в Mac OS).

4. До імені файлу додайте розширення .html. У вікні «Зберегти як» введіть ім`я файлу з розширенням .html, а потім натисніть «Зберегти». Наприклад, якщо ви хочете назвати файл «МойПервийКалькулятор», збережіть його як МойПервийКалькулятор.html.

Частина 4 з 4:

Використання калькулятора

1. Знайдіть створений файл. Для цього введіть ім`я файлу в Spotlight або в рядку пошуку меню «Пуск» (як описано в попередній частині). розширення .html вводити не потрібно.