Проект для начинающих: пишем калькулятор на JavaScript
JavaScript – это один из самых популярных языков программирования, который используется для создания интерактивных веб-сайтов. В этом уроке мы научимся писать простой калькулятор на JavaScript, который будет выполнять базовые арифметические операции, такие как сложение, вычитание, умножение и деление.
Для начала создадим HTML-код для нашего калькулятора. Вот как будет выглядеть простая разметка:
<!DOCTYPE html>
<html>
<head>
<title>Калькулятор</title>
</head>
<body>
<h1>Калькулятор</h1>
<input type="text" id="display" disabled>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('/')">/</button>
</body>
</html>В этом коде мы создаем поле ввода с id="display", где будут отображаться результаты вычислений, и несколько кнопок с различными цифрами и операторами. Каждая кнопка имеет атрибут onclick, который вызывает соответствующие функции JavaScript при нажатии на нее.
Теперь напишем JavaScript-код для нашего калькулятора:
let expression = '';
function clearDisplay() {
expression = '';
document.getElementById('display').value = expression;
}
function appendToDisplay(value) {
expression += value;
document.getElementById('display').value = expression;
}
function calculate() {
try {
expression = eval(expression);
document.getElementById('display').value = expression;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}В этом коде мы создаем три функции: clearDisplay(), appendToDisplay() и calculate(). Функция clearDisplay() очищает поле ввода, функция appendToDisplay() добавляет значение на которое была нажата кнопка к текущему выражению, а функция calculate() вычисляет результат выражения с помощью eval() и отображает его на экране. Если произошла ошибка в вычислениях, на экран выводится сообщение ‘Error’.
Теперь соединим HTML-код и JavaScript-код вместе, сохраните файл как calculator.html и откройте его в браузере. Вы увидите простой калькулятор, который вы можете использовать для выполнения различных арифметических операций.
Это был простой проект для начинающих по созданию калькулятора на JavaScript. Надеюсь, что этот урок помог вам понять основы работы с JavaScript и создания интерактивных элементов на веб-страницах. Успехов в изучении программирования!
❗Подписывайся на мой телеграм-канал про IT, программирование и frontend → https://t.me/sergeydmitrievsky
всё хорошо ,начал писать также а кусок кода html с 7:42 минуты не видно.теперь не могу продолжать чтобы научиться также😔
прив, почему у меня в консоли null результат?
Бро, после видео с индусом где он калькулятор делал, это видео легко воспринял, но все круто получилось 😅
вроде понятно но что эти команды значат я вообще незнаю…
спасибо лучший
❤
Можно весь этот код сделать и в одном файле намного быстрее и который будет ещё и красивее я считаю что человек знающий базу сможет нормально всё сделать
НАФІГА так багато js складно все одному зробити?
Есть у кого код банковского калькулятора на react?
Добрый день, Сергей! VS Code выдает данную ошибку, когда пробую что-нибудь вычислить на сайте проекта:
Uncaught ReferenceError ReferenceError: calculate is not defined
at <anonymous>
В чем может быть причина данной ошибки? Благодарю за ответ заранее!
Спасибо . Очень зашло. Только начал изучать js
У меня действие в консоли не выводится. Пишет ошибка в 12 строчке index. js const result = calculate({
Для чего каждой переменной в js давать в конце "Node"?
год учил js ,решал задачи на codewars 6 уровня ,но не знал что можно вызывать функцию из другого файла js ,думал нужен export/import
Умоляю,помогите
Все делал как по видео. Тысячу раз перепроверил. Вчера все работало,сегодня запускаю и нажимая на результат ничего не происходит. Код не менялся,все сохранилось, просто внезапно решило перестать работать. В ЧЕМ ПРОБЛЕМА?
спасибо
Спасибо автору. Помогает лучше разобраться в мире JS
Я что-то не понял, на 6.01 как файл calculate.js узнает о функциях из math.js. например sum(). В math.js вроде же нет экспорта у функций.
Бомба
Видео точно не для начинающего