Как сделать калькулятор на JavaScript

Views: 506

Привет! Я написал программу «Калькулятор» и хочу ею поделиться! Также я опишу код.
калькулятор на js

Итак, давайте разберём эту программу. Для начала опишем css свойства:

На данном изображении мы видим свойства для трех html тегов, а именно:
button — кнопка, теперь она будет шириной 42 пикселя и длиной также 42 пикселя. Эти свойства применяются для всех тегов button.
div — блок, внутри которого будут находится наши кнопки и поле ввода. Теперь он шириной 134 пикселя, длинной 294 пикселя и фоновый цвет у него красный.
input — поле ввода, теперь оно шириной 134 пикселя.

С css мы разобрались, остался лишь html и js.

При помощи html мы создали кнопки (button), блок (div) и поле (input) с id «input».

Это всё просто. Теперь js. Я начну с тега script:
В первой части кода мы находим тег input по id и сохраняем его в переменной «input».
Во второй части мы создаём переменную end (конец), и она имеет булево значение false. Она пригодится при очистке поля, то есть если результат выдан и мы нажимаем любую кнопку, то поле очищается.

Следующая часть кода — кнопки. Они имеют атрибуты onclick. Это значит, что при нажатии на кнопку выполняется код, который находится в кавычках атрибута onclick. Итак, что же значит этот код? Сейчас я все разъясню.

В начале мы используем условный оператор if, который при значение true переменной end очищает поле а затем присваивает переменной end значение false. Это нужно для того, чтобы при последующем нажатии поле не очищалось. При помощи input.innerHTML мы находим значение строкового поля, можем его поменять или добавить к нему другое значение. Так мы и очищаем поле, а затем прибавляем нужный символ, который написан на кнопке.

Но есть три кнопки, код которых сильно отличается от кода других. Первая кнопка — равно. Чтобы найти результат выражения, написанного на поле, нужно использовать eval(). eval() — преобразует строковое значение в числовое. Например, у нас есть строка: «5 — 3». Это просто строка, но благодаря eval(«5 — 3») строковое значение переведется в числовое: 5 — 3, а затем выполнится это выражение. Так работает наша кнопка равно, она использует код input.innerHTML = eval(input.innerHTML) чтобы присвоить полю значение выражения, которое из-за eval() становится числовым значением
и после уже выполняется.

Кнопка для квадратного корня. При помощи input.innerHTML = Math.sqrt(eval(input.innerHTML)) мы находим квадратный корень числа, преобразованного из строки, находящейся в поле, и заменяем содержимое поля на результат.

Кнопка очистки. Здесь мы просто заменяем значение поля на ничего, то есть «».

Также в двух из этих кнопок мы присваиваем переменной end значение true. Это нужно для очистки поля при нажатии на любую кнопку, так как результат уже выведен.

Вот так просто можно сделать калькулятор на js.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *