В этой статье я расскажу как сделать простой javascript калькулятор, без особых проблем, эта статья подойдёт в первую очередь тем, кто только начал изучать JavaScript и уже пробует создавать различные простые программы.
HTML файл:
Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.
1 2 3 4 5 6 7 8 | <p>number 1<input type="text" id="n1"></p> <p>number 2<input type="text" id="n2"></p> <button onclick="plus()">+</button> <button onclick="minus()">-</button> <button onclick="multiplication()">X</button> <button onclick="division()">/</button> <hr> <p>Result: <span id="out"></span></p> |
Вот такой, совсем короткий HTML получается, кратко расскажу о нём.
Атрибут onclick, это событие клика мыши на элемент, в параметрах задаётся функция, которая будет запускаться при клики на элемент, это в принципе всё что нужно знать.
JavaScript файл:
Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | let num1; // Создаём переменную где будет хранится значение первого числа let num2; // Создаём переменную где будет хранится значение второго числа // Создаём переменную и берём элемент, куда будет выводится результат let out = document.getElementById('out'); // функция сложения function plus() { num1 = document.getElementById('n1').value; num1 = parseInt(num1) num2 = document.getElementById('n2').value; num2 = parseInt(num2) out.innerHTML = num1 + num2; } // функция вычитания function minus() { num1 = document.getElementById('n1').value; num1 = parseInt(num1) num2 = document.getElementById('n2').value; num2 = parseInt(num2) out.innerHTML = num1 - num2; } // функция умножения function multiplication() { num1 = document.getElementById('n1').value; num1 = parseInt(num1) num2 = document.getElementById('n2').value; num2 = parseInt(num2) out.innerHTML = num1 * num2; } // функция деления function division() { num1 = document.getElementById('n1').value; num1 = parseInt(num1) num2 = document.getElementById('n2').value; num2 = parseInt(num2) out.innerHTML = num1 / num2; } |
Давайте не много расскажу, что тут вообще происходит.
В начале просто создаём переменные которые нам могут пригодится, это первое число и второе, потом берём элемент, куда будем выводить значения которое получим.
Теперь подробно рассмотрим функции, я не буду все рассматривать, так как не чего почти не меняется, только действии.
Сначала, мы берём первое число из формы и ложем его в нашу переменную для первого значения, точнее берём строку, поэтому строчкой ниже мы переводим стоку в число, если там будут буквы, то он вернёт NaN или нет числа, точно также всё делаем и со вторым числом, только уже используем переменную, которую подготовили для второго числа.
В последней строчке функции мы складываем две переменные и выводим значение в элементе out.
Как то так и работает наша программа, дальше всё одинаковое, единственное различии, только в действии.
Вывод:
Вот такой простой калькулятор получился на чистом JavaScript, единственный существенный не достаток, в том, что событие вызываются устаревшим образом, сейчас их правильно вызывать через addEventListener(), я не стал его использовать по двум причинам, во первых, мне кажется для новичков такой способ не много легче, а эта статья именно для новичков, во вторых, если вы не знали о таком способе, то его обязательно надо знать, так как, не всегда вы будите работать со современном кодам, на старых сайтах используется такой способ.
В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.
Также посмотрите как сделать Делаем продвинутый слайдер на чистом javascript
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 4,50
Загрузка...