Простой калькулятор на javascript
Опубликовано: 05.09.2018
Этот простой скрипт онлайн-калькулятора иллюстрирует некоторые возможности DHTML . HTML и CSS использованы для формирования пользовательского интерфейса калькулятора. HTML-формы и встроенный javascript — для выполнения ввода данных, вычисления четырех математических операций и вывода результа.
Исходный код примера приведен в листинге 1, внешний вид калькулятора — на рис. 1 , а посмотреть его работу можно здесь .
Листинг 1. Калькулятор на javascript.
<html> <head> <meta charset="utf-8" /> <title>Калькулятор</title> <style type="text/css"> #calculator * {font-size: 16px;} #calculator table {border: solid 3px silver; border-spacing: 3px; background-color: #EEE; } #calculator table td {border-spacing: 3px;} input.display {width: 166px; text-align: right;} td.buttons {border-top: solid 1px silver;} input[type= button] {width: 40px; height: 30px;} </style> </head> <body> <form name="calc" id="calculator"> <table> <tr> <td> <input type="text" name="input" size="16" class="display"> </td> </tr> <tr> <td class="buttons"> <input type="button" name="one" value="1" OnClick="calc.input.value += '1'"> <input type="button" name="two" value="2" OnClick="calc.input.value += '2'"> <input type="button" name="three" value="3" OnClick="calc.input.value += '3'"> <input type="button" name="add" value="+" OnClick="calc.input.value += '+'"> <br> <input type="button" name="four" value="4" OnClick="calc.input.value += '4'"> <input type="button" name="five" value="5" OnClick="calc.input.value += '5'"> <input type="button" name="six" value="6" OnClick="calc.input.value += '6'"> <input type="button" name="sub" value="-" OnClick="calc.input.value += '-'"> <br> <input type="button" name="seven" value="7" OnClick="calc.input.value += '7'"> <input type="button" name="eight" value="8" OnClick="calc.input.value += '8'"> <input type="button" name="nine" value="9" OnClick="calc.input.value += '9'"> <input type="button" name="mul" value="x" OnClick="calc.input.value += '*'"> <br> <input type="button" name="clear" value="c" OnClick="calc.input.value = ''"> <input type="button" name="zero" value="0" OnClick="calc.input.value += '0'"> <input type="button" name="doit" value="=" OnClick="calc.input.value = eval(calc.input.value)"> <input type="button" name="div" value="/" OnClick="calc.input.value += '/'"> </td> </tr> </table> </form> </body> </html>
Рис. 1. Внешний вид калькулятора
Уроки JavaScript Практика#10 Делаем калькулятор
Рис. 2. Научный онлайн-калькулятор
Алгоритм работы этого скрипта очень прост: по клику на кнопках в текстовое поле добавляется соответствующее значение (число, символ операции или пустая строка для сброса). По нажатию кнопки "=" вызывается библиотечная функция eval, которая принимает в качестве аргумента строку кода, который может быть выполнен. В рассматриваемом случае эта строка содержит выражение вида "число1 операция число2". Результат выполнения помещается в строку вывода. По нажатию кнопки "с" выполняется очистка вывода.
010506 Простой калькулятор на JavaScript
Приведенный скрипт в исходном виде слабо применим на практике. Он никоим образом не претендует на возможности профессиональных онлайн-калькуляторов (один из примеров — на рис. 2) и, с точки зрения функциональности, требует доработки как минимум в следующих аспектах:
вводимые данные не проверяются (с клавиатуры можно ввести любые данные непосредственно в поле ввода); с помощью мыши нет возможности вводить вещественные числа (отсутствует ввод десятичного разделителя); не предусмотрена обработка ошибок (в частности, деления на ноль).С точки зрения программирования на javascript, этот пример может быть изрядно улучшен путем вынесения обработчиков во внешние функции. Также вместо имен объектов удобней использовать их идентификаторы и обращаться по ним через GetElementByID. Так или иначе, приведенный код javascript-калькулятора является учебным примером и указанные выше недостатки вы можете устранить самостоятельно.
Постоянный адрес этой страницы: