Как создать калькулятор, используя язык HTML

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

Часть 1

Часть 1 из 4:

Основы HTML-кода

Загрузить PDF

1
Изучите основные функции HTML. Описываемый код, посредством которого можно создать калькулятор, включает множество элементов синтаксиса, которые определяют различные параметры страницы. Прочитайте статью о том, как выучить HTML, или читайте дальше, чтобы узнать, для чего предназначена каждая строка представленного здесь кода.
- html: этот элемент синтаксиса свидетельствует о языке, на котором написана программа. При написании кода могут использоваться несколько языков программирования, поэтому тег <html> указывает на язык HTML.^{[1]XИсточник информации}
- head: внутри этого тега задаются параметры других данных, то есть указываются так называемые метаданные. Как правило, команда <head> используется для определения параметров стилистических элементов, таких как заголовки, подзаголовки и так далее. Этот тег представляет собой своеобразный зонтик, под которым находится основная часть программы.^{[2]XИсточник информации}
- title: этот тег определяет название страницы, которое отобразится в веб-браузере, когда вы ее откроете.
- body bgcolor= "#": этот атрибут задает цвет фона страницы. Число, которое вводится внутри кавычек после символа #, соответствует определенному цвету.
- text= "": слово, которое вводится внутри кавычек, определяет цвет текста страницы.
- form name="": этот атрибут определяет имя формы, которая используется для создания структуры на основе того, что Javascript известно значение имени формы. В нашем примере в качестве имени формы будет использовано значение «calculator» (калькулятор), что приведет к созданию специальной структуры страницы.^{[3]XИсточник информации}
- input type="": это, пожалуй, основной атрибут, который определяет, каким элементам страницы соответствуют значения, введенные внутри кавычек. Например, такими элементами могут быть тексты, пароли, кнопки (как в нашем случае с калькулятором) и так далее.^{[4]XИсточник информации}
- value="": эта команда определяет символы, которые отобразятся на элементах, заданных атрибутом «input type=». В случае калькулятора такими символами являются цифры (1-9) и математические операции (+, -, *, /, =).^{[5]XИсточник информации}
- onClick="": этот синтаксис описывает событие, которое должно произойти при нажатии на кнопку. В случае калькулятора нужно сделать так, чтобы символ, отображенный на кнопке, понимался системой в буквальном смысле. Например, если на кнопке отображена цифра 6, в кавычках нужно ввести следующее значение: document.calculator.ans.value+='6'.^{[6]XИсточник информации}
- br: этот тег инициирует разрыв строки на странице, поэтому все, что расположено после этого тега, будет отображено на следующей строке.^{[7]XИсточник информации}
- /form, /body, and /html: это закрывающие теги, которые завершают процессы, запущенные соответствующими открывающими тегами.^{[8]XИсточник информации}
Реклама

Часть 2

Часть 2 из 4:

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

Загрузить PDF

Чтобы выделить код, переместите курсор в верхний левый угол окна, зажмите левую кнопку мыши и перетащите курсор в правый нижний угол окна; код будет выделен синим цветом. Затем нажмите «Command+C» (в Mac OS) или «Ctrl+C» (в Windows), чтобы скопировать код в буфер обмена.

<html><head><title>HTML Calculator</title></head><body bgcolor= "#000000" text= "gold"><form name="calculator" ><input type="button" value="1" onClick="document.calculator.ans.value+='1'"><input type="button" value="2" onClick="document.calculator.ans.value+='2'"><input type="button" value="3" onClick="document.calculator.ans.value+='3'"><br><input type="button" value="4" onClick="document.calculator.ans.value+='4'"><input type="button" value="5" onClick="document.calculator.ans.value+='5'"><input type="button" value="6" onClick="document.calculator.ans.value+='6'"><input type="button" value="7" onClick="document.calculator.ans.value+='7'"><br><input type="button" value="8" onClick="document.calculator.ans.value+='8'"><input type="button" value="9" onClick="document.calculator.ans.value+='9'"><input type="button" value="-" onClick="document.calculator.ans.value+='-'"><input type="button" value="+" onClick="document.calculator.ans.value+='+'"><br><input type="button" value="*" onClick="document.calculator.ans.value+='*'"><input type="button" value="/" onClick="document.calculator.ans.value+='/'"><input type="button" value="0" onClick="document.calculator.ans.value+='0'"><input type="reset" value="Reset"><input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"><br>Solution is <input type="textfield" name="ans" value=""></form></body></html>

Часть 3

Часть 3 из 4:

Создание калькулятора

Загрузить PDF

1
На компьютере откройте текстовый редактор. Существует множество подобных программ, но мы рекомендуем использовать TextEdit или Блокнот.^{[9]XИсточник информации}^{[10]XИсточник информации}
- В Mac OS щелкните по значку в виде лупы (в верхнем правом углу экрана), чтобы открыть Spotlight. Введите «textedit» и щелкните по программе TextEdit, которая будет выделена синим цветом.
- В Windows откройте меню Пуск (в левом нижнем углу экрана). В строке поиска введите «блокнот» и щелкните по программе Блокнот, которая отобразится в строке результатов поиска (справа).
2
В текстовый документ вставьте скопированный HTML-код.
- В Mac OS щелкните по документу и нажмите «Command+V». Затем нажмите «Формат» (в верхней части экрана) – «Создать текстовый документ».^{[11]XИсточник информации}
- В Windows щелкните по документу и нажмите «Ctrl + V».
Для этого нажмите «Файл» (в верхнем левом углу окна), а затем нажмите «Сохранить как» (в Windows) или «Сохранить» (в Mac OS).
В окне «Сохранить как» введите имя файла с расширением .html, а затем нажмите «Сохранить». Например, если вы хотите назвать файл «МойПервыйКалькулятор», сохраните его как МойПервыйКалькулятор.html.
Реклама

Часть 4

Часть 4 из 4:

Использование калькулятора

Загрузить PDF

Для этого введите имя файла в Spotlight или в строке поиска меню «Пуск» (как описано в предыдущей части). Расширение .html вводить не нужно.
Файл будет открыт на новой странице веб-браузера.
Решение будет отображено в строке «Ответ».
Реклама