Программирование калькулятора в HTML

Видео: Верстаем калькулятор. HTML + CSS. Подробный урок

Содержание

Шагать
Часть 1 из 4: понимание кода
Часть 2 из 4: Стандартный код для калькулятора HTML
Часть 3 из 4: Создание собственного калькулятора
Часть 4 из 4. Воспользуйтесь калькулятором
Советы

Есть много разных способов расчета на компьютере с использованием встроенного калькулятора, но другой способ - создать свой собственный, используя простой HTML-код. Чтобы сделать калькулятор с использованием HTML, вам потребуются некоторые базовые знания HTML, затем введите необходимый код в текстовом редакторе и сохраните его как файл HTML. Затем вы можете использовать калькулятор, открыв HTML-файл в своем любимом браузере. Вы не только сможете выполнять арифметические операции в браузере, но также сможете получить некоторые базовые навыки программирования!

Шагать

Часть 1 из 4: понимание кода

Узнайте, что делает каждая функция HTML. Код, который вы будете использовать для создания калькулятора, состоит из множества различных типов синтаксиса, которые вместе определяют различные элементы документа. Щелкните здесь для объяснения этого процесса или прочтите, чтобы узнать больше о том, что каждая строка кода будет делать для создания калькулятора.
- html: Этот бит синтаксиса сообщает остальной части документа, какой язык будет использоваться в коде. Есть несколько языков для кодирования, и в этом случае html> дает понять остальной части документа, что он находится - как вы уже догадались - html.
- глава: Сообщает документу, что все после него данные о данных, также называемые «метаданными». Команда head> обычно используется для определения стилистических элементов документа, таких как заголовки, заголовки и т. Д. Думайте об этом как о зонтике, под которым определяется остальная часть кода.
- заглавие: Здесь указывается заголовок вашего документа. Этот атрибут используется для обозначения заголовка документа при его открытии в браузере HTML.
- body bgcolor = "#": Этот атрибут устанавливает цвет фона HTML-страницы и тела. Число в строке кавычек и после # соответствует определенному цвету.
- text = "": Этот синтаксис устанавливает цвет текста документа.
- имя формы = "": Этот атрибут определяет имя формы и используется для построения структуры того, что будет дальше, на основе того, что Javascript знает о значении имени формы. Например, имя формы, которое мы собираемся использовать, - «калькулятор», которое мы собираемся использовать для создания определенной структуры для документа.
- тип ввода = "": Здесь что-то происходит. Атрибут «тип ввода» сообщает синтаксическому анализатору документа, какой текст содержится в значениях между кавычками. Например, это может быть текст, пароль, кнопка (как в случае с калькулятором) и т. Д.
- значение = "": Эта команда сообщает синтаксическому анализатору документа, что входит в указанный выше тип ввода. Для калькулятора это числа (1-9) и операции (+, -, *, /, =).
- onClick = "": Этот синтаксис описывает событие, указывающее, что что-то должно быть сделано при нажатии кнопки. Для калькулятора мы хотим, чтобы текст на каждой кнопке также распознавался как таковой. Поэтому перед кнопкой «6» мы помещаем document.calculator.ans.value + = «6» в кавычки.
- br: этот тег создает новую строку в документе, так что текст (или что-то еще) помещается после него в другой строке.
- / форма, / тело и / html: эти команды закрывают соответствующие команды, ранее открытые в документе.

Часть 2 из 4: Стандартный код для калькулятора HTML

Скопируйте код ниже. Выделите текст в поле ниже, удерживая левую кнопку мыши и перетаскивая курсор из нижнего левого угла поля в верхний правый, чтобы весь текст стал синим. Затем нажмите «Command + C» на Mac или «Ctrl + C» на ПК, чтобы скопировать код в буфер обмена.

html> head> title> HTML-калькулятор / заголовок> / 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' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> 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 =" - "onClick =" document.calculator.ans. value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> 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.calcul ator.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> Ответ isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Часть 3 из 4: Создание собственного калькулятора

Откройте текстовый редактор на своем компьютере. Есть несколько программ, которые можно использовать, но для простоты мы будем придерживаться TextEdit или Notepad.
- На Mac щелкните увеличительное стекло в правом верхнем углу экрана, чтобы открыть Spotlight. Когда вы доберетесь туда, введите TextEdit и щелкните программу TextEdit, которая теперь должна быть выделена синим цветом.
- На ПК откройте меню «Пуск» в левом нижнем углу экрана. В строке поиска введите «Блокнот» и щелкните приложение «Блокнот», которое появится в строке поиска справа.
Вставьте HTML-код калькулятора в документ.
- На Mac щелкните текст документа и нажмите Command + V. Затем нажмите на Формат вверху экрана, а затем Сделать простой текст после вставки кода.
- На ПК щелкните текст документа, а затем Ctrl + V.
Сохраните файл. Вы делаете это через «Файл» в главном меню окна, а затем с помощью Сохранить как... на ПК или Сохранить... на Mac из раскрывающегося меню.
Добавьте расширение HTML к имени файла. В меню «Сохранить как ...» введите имя файла, затем «.html», затем нажмите «Сохранить». Например, если вы хотите назвать этот файл «Мой первый калькулятор», сохраните его как «Мой первый калькулятор.html».

Часть 4 из 4. Воспользуйтесь калькулятором

Найдите только что созданный файл. Для этого введите имя файла в Spotlight или в строке поиска в меню «Пуск», как описано в предыдущем шаге. Также нет необходимости вводить расширение «html».
Щелкните файл, чтобы открыть его. Ваш браузер по умолчанию откроет ваш калькулятор на новой веб-странице.
Нажмите кнопки на калькуляторе, чтобы использовать его. Решения ваших уравнений теперь появятся на панели ответов.