Как создать калькулятор, используя язык HTML
В создании этой статьи участвовала наша опытная команда редакторов и исследователей, которые проверили ее на точность и полноту.
Команда контент-менеджеров wikiHow тщательно следит за работой редакторов, чтобы гарантировать соответствие каждой статьи нашим высоким стандартам качества.
Количество источников, использованных в этой статье: 11. Вы найдете их список внизу страницы.
Количество просмотров этой статьи: 136 354.
Математические вычисления можно выполнить на компьютере с помощью калькулятора, но интереснее создать калькулятор посредством простейшего HTML-кода. Для этого необходимо разобраться в основах HTML, скопировать код в текстовый редактор и сохранить его с расширением HTML. Чтобы воспользоваться калькулятором, нужно открыть HTML-страницу в браузере. Описанные действия позволят не только выполнять вычисления в браузере, но и узнать некоторые основы программирования.
Основы HTML-кода
- html: этот элемент синтаксиса свидетельствует о языке, на котором написана программа. При написании кода могут использоваться несколько языков программирования, поэтому тег указывает на язык HTML. [1] X Источник информации
- 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 Источник информации
Базовый HTML-код для создания калькулятора
Скопируйте код, приведенный ниже. Чтобы выделить код, переместите курсор в верхний левый угол окна, зажмите левую кнопку мыши и перетащите курсор в правый нижний угол окна; код будет выделен синим цветом. Затем нажмите «Command+C» (в Mac OS) или «Ctrl+C» (в Windows), чтобы скопировать код в буфер обмена.
html> head> title>HTML Calculatortitle> 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=" na">onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> br>Solution is input type="textfield" name="ans" value=""> form> body> html> Сложение двух чисел на HTML + JavaScript
В статье рассказывается как создать приложение сложения двух чисел на HTML + JavaScript.
Приготовления
Ничего не требуется кроме блокнота и браузера.
Создание болванки
Создаем текстовой документ под именем index.html .
Закинем в него простую болванку HTML5 документа:
lang="ru"> charset="utf-8" /> name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел Если мы сохраним документ и откроем в браузере, то увидим пустое белое окно, так как ничего видимого в документе пока нет — это просто болванка с шапкой, где располагаются некоторые мета-тэги (по сути их тоже можно было выкинуть), и пустое тело.
Наполнение HTML
Так как нам нужно приложение, которое будет складывать два числа, то нужно два поля ввода текстовой информации. Следовательно, их нужно будет размещать в некоторой форме. Поэтому в теле HTML документа разместим такую форму:
id="a" type="text" value="1" /> /> id="b" type="text" value="1" /> /> Каждое поле имеет свой идентификатор id с названием переменной a и b . Также они имеют начальное наполнение.
Нам нужна кнопка для вычислений. Обычно на форме используется input тэг с type=submit , но он вызовет передачу параметров в форме с переходом на эту же или другую страницу. Поэтому используем обычную кнопку:
type="button" value="Сложить 2 два числа" onclick="addition();" /> /> При клике на кнопку будет вызываться функция JavaScript по имени addition() , которую позже пропишем.
Кроме этого, нам нужно место, куда JavaScript будет записывать результат вычислений. Для этого после формы пропишем пустой слой с определенным идентификатором id=»result» :
Общий документ будет иметь вид:
lang="ru"> charset="utf-8" /> name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> Программа сложения двух чисел id="a" type="text" value="1" /> /> id="b" type="text" value="1" /> /> type="button" value="Сложить 2 два числа" onclick="addition();" /> /> id="result">
