Простой калькулятор на чистом javascript

Простой калькулятор на чистом javascript
Метки: /

В этой статье я расскажу как сделать простой javascript калькулятор, без особых проблем, эта статья подойдёт в первую очередь тем, кто только начал изучать JavaScript и уже пробует создавать различные простые программы.

HTML файл:

Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.

Вот такой, совсем короткий HTML получается, кратко расскажу о нём.

Атрибут onclick, это событие клика мыши на элемент, в параметрах задаётся функция, которая будет запускаться при клики на элемент, это в принципе всё что нужно знать.

JavaScript файл:

Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.

Давайте не много расскажу, что тут вообще происходит.

В начале просто создаём переменные которые нам могут пригодится, это первое число и второе, потом берём элемент, куда будем выводить значения которое получим.

Теперь подробно рассмотрим функции, я не буду все рассматривать, так как не чего почти не меняется, только действии.

Сначала, мы берём первое число из формы и ложем его в нашу переменную для первого значения, точнее берём строку, поэтому строчкой ниже мы переводим стоку в число, если там будут буквы, то он вернёт NaN или нет числа, точно также всё делаем и со вторым числом, только уже используем переменную, которую подготовили для второго числа.

В последней строчке функции мы складываем две переменные и выводим значение в элементе out.

Как то так и работает наша программа, дальше всё одинаковое, единственное различии, только в действии.

Вывод:

Вот такой простой калькулятор получился на чистом JavaScript, единственный существенный не достаток, в том, что событие вызываются устаревшим образом, сейчас их правильно вызывать через addEventListener(), я не стал его использовать по двум причинам, во первых, мне кажется для новичков такой способ не много легче, а эта статья именно для новичков, во вторых, если вы не знали о таком способе, то его обязательно надо знать, так как, не всегда вы будите работать со современном кодам, на старых сайтах используется такой способ.

В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.

Также посмотрите как сделать Делаем продвинутый слайдер на чистом javascript

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
(Пока оценок нет)
Загрузка...

Поделится:

Также рекомендую: