калькулятор на джава скрипт
Простой калькулятор на JavaScript
Сегодня сделаем простейший калькулятор на JavaScript, но не просто так, а с умыслом. Позднее мы представим, что мы тестировщики, и попробуем протестировать этот калькулятор. Вернее, не протестировать, а дико сломать.
Что делаем
На старте у нас будет самый простой калькулятор, который сможет только складывать, вычитать, умножать и делить два числа. Этого уже будет достаточно, чтобы потренироваться и в коде, и в дальнейшем тестировании.
Логика работы
Так как это простой калькулятор, то поступим так:
Размещаем кнопки и поля ввода на странице
Разместим кнопки с полями на странице, а потом будем писать скрипт.
Обрабатываем нажатия на кнопки математических действий
Сейчас у нас есть 4 кнопки, но нажимать их бесполезно — всё равно ничего не произойдёт, потому что нет обработчиков нажатий. Но что нам прописывать в обработчике?
Первый вариант — привязать к каждой кнопке свою функцию, а потом для каждой операции выполнять свои действия внутри этого обработчика. Но раз у нас есть кнопка «Посчитать», то нам придётся при нажатии на неё из этих четырёх функций вытаскивать действие и нужные команды, запоминать выбранное и как-то использовать в вычислениях. Сложно и громоздко.
Второй вариант — просто записывать в какую-то переменную, какая кнопка была нажата. А потом, при нажатии «Посчитать», просто смотреть в эту переменную и выполнять соответствующее действие. Так и поступим.
👉 Воспользуемся хитростью, про которые многие забывают: в обработчике onclick необязательно писать только функцию — туда можно отправить любую JS-команду. Главное, не забыть потом в скрипте предусмотреть эту переменную, которую мы используем.
Пишем скрипт
Сам скрипт тоже будет простой:
Сразу привяжем функцию func() к нажатию на кнопку «Посчитать»:
Выводим результат
Сейчас в скрипте есть проблема: он всё считает, но ничего не выводит. А всё потому, что мы не предусмотрели на странице место для вывода. Исправим это и добавим строчку в скрипт.
Это — добавим на страницу после кнопки с расчётом:
А это — в функцию func(), чтобы она сразу отправляла результат на страницу:
Собираем всё вместе и смотрим результат
Отлично, калькулятор работает и складывает всё как нужно! Мы выполнили свою задачу — быстро запилили калькулятор на JavaScript, можно закрывать задачу в таск-трекере и браться за новую.
Что дальше
Дальше мы этот код отправим тестировщикам — вряд ли они в нём найдут что-то критичное или вообще какие-то ошибки, но правила есть правила. А если тестировщики тут что-то найдут, мы обязательно расскажем об этом в новой статье.
Попробуйте сами побыть тестировщиком и протестировать эту программу, а результатами тестирования поделитесь в комментариях.
June 06, 2016
Обзор посвящен созданию JavaScript-калькулятора. Домашнее задание для каждого начинающего JavaScript-ниндзя! ) В коде используется не чистый JavaScript, а JavaScript + jQuery.
HTML разметка
CSS стили
Со стилизацией будущего калькулятора тоже проблем не должно возникнуть. Я использовал flexbox для выравнивания кнопок:
JavaScript код
Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )
Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута value кнопок button и динамически вставляем в HTML-разметку:
В результате код для “оживления” кнопки = будет выглядеть “скромно”:
Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод substring() и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.
Результат будет выглядеть таким образом:
Конечно, примеры кода из этой статьи хоть и не являются укороченными, но не дают полного представления о разрабатываемом нами калькуляторе.
Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).
Как вариант для сравнения, можно взглянуть на более сложный пример создания калькулятора, на чистом JavaScript. Пример был найден мною на просторах CodePen.
Заключение
На этом все. В дальнейшем буду продолжать флудить на тему JavaScript, ибо для себя с удивлением обнаружил, что мне в последнее вермя доставляет удовольствие разбирать и рассматривать готовые примеры на JavaScript.
Создаем простой калькулятор на javascript с кнопкой сброса
Доброго времени суток, дорогие читатели блога. После прочтения текущей публикации вы научитесь самостоятельно программировать простой калькулятор на JavaScript с кнопкой сброса. Я поделю свой рассказ на три части.
Вначале я опишу создание разметки калькулятора на html, далее расскажу, какие стилевые правила необходимо будет задать, а после перейду к объяснению функций на JavaScript. Давайте приступим!
Оформление гипертекстовой разметки
Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.
Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом ©.
Превратим набор элементов во что-то стоящее
Для любого пользовательского приложения в первую очередь важен графический интерфейс. Поэтому нужно привести в порядок расположение клавиш и текстового поля, а также скомпоновать их так, чтобы они выглядели, как единое целое.
Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.
Теперь красиво оформим кнопки.
Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.
А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.
Как видите, теперь разрабатываемый калькулятор выглядит достаточно привлекательно и аккуратно. Осталось прописать логику работы функций на JS.
Вперед! Работай!
Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.
Вот теперь программа готова. Буду очень рад, если вы подпишитесь на обновления моего обучающего блога и поделитесь ссылкой на него с коллегами и друзьями. Пока-пока!
Простой калькулятор на чистом javascript
В этой статье я расскажу как сделать простой javascript калькулятор, без особых проблем, эта статья подойдёт в первую очередь тем, кто только начал изучать JavaScript и уже пробует создавать различные простые программы.
HTML файл:
Для начала как всегда начнём с HTML страницы и тут конечно не чего сложного нет.
number 1 type = «text» id = «n1» >
number 2 type = «text» id = «n2» >
Вот такой, совсем короткий HTML получается, кратко расскажу о нём.
JavaScript файл:
Вот тут всё не много сложнее, но я постараюсь всё объяснить максимально понятным языком.
Давайте не много расскажу, что тут вообще происходит.
В начале просто создаём переменные которые нам могут пригодится, это первое число и второе, потом берём элемент, куда будем выводить значения которое получим.
Теперь подробно рассмотрим функции, я не буду все рассматривать, так как не чего почти не меняется, только действии.
Сначала, мы берём первое число из формы и ложем его в нашу переменную для первого значения, точнее берём строку, поэтому строчкой ниже мы переводим стоку в число, если там будут буквы, то он вернёт NaN или нет числа, точно также всё делаем и со вторым числом, только уже используем переменную, которую подготовили для второго числа.
Как то так и работает наша программа, дальше всё одинаковое, единственное различии, только в действии.
Вывод:
В будущем может напишу статью, где буду делать более продвинутый калькулятор, поэтому, что бы не пропустить подписываетесь на все соц-сети.
Калькулятор на javascript Как в Windows 10
Калькулятор на javascript пример
Как будет выглядеть калькулятор на javascript!?
Калькулятор на javascript
Не могли же мы не сделать о калькуляторе видео!
Логика и основные кнопки калькулятора на javascript!?
Первое надо посмотреть на объект(в данном случае калькулятор) и проанализировать, что он из себя представляет и вывести закономерности и повторения!
Кнопки: всего будет 6 х 4 = 24 кнопки, из этого вывод, что надо нарисовать только одну, а потом еще добавить 23…
Пока делать не будем %, се, и запятую.
Кнопки для калькулятора и оформление.
Общее для всех кнопок:
И поведение при наведении сделаем простой бордюр чуть потемнев.
border: 1px solid #888c90;
Позиционируем первую левую снизу кнопку плюс+минус
Следующие 3 кнопки будет отличаться названием после селектора «#» и позицией по горизонтали(margin-left 
+ 80px к предыдущему.
Следующие полоски будут подниматься относительно каждой полоски по вертикали(margin-top + 53px
Позиционируем калькулятор.
Поставим весь код в div с классом центр.
И див arhiv, который будет показывать, что было нажато до знака.
С оформлением закончили.
Скрипт калькулятора на javascript
Переходим к скриптам в калькуляторе
document.getElementById(«rezult»).innerHTML += from_id; // запишем данные из кнопки, прибавляя, если что-то есть в rezult count = document.getElementById(«rezult»).innerHTML; count = count.length; //посчитаем сколько знаков в rezult после отправки
mnogitel = count * 23 ; // переменная вычисленная методом научного тыка. и следующие три строки.
if ( count === 2 ) < sсосо = 272;>
document.getElementById(«rezult»).setAttribute(«style», «margin-left:» + sсосо + «px» ); //отправляем в rezult отступ чтобы цифры сдвинулись влево. >
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 300px» );
Уникальный скрипт, который будет обрабатывать предыдущие скрипты при нажатии на кнопку равно.
Поучаем в переменную «chislo_first» что мы отправили после нажатия на одну из верхних кнопок математических знаков.
Сделаем из строки число «parseInt»
Поучаем в переменную «chislo_second» что у нас есть в rezult.
Проверяем что было нажато. «if(znak ==», в зависимости от нажатого совершаем соответствующее действие.
Далее отправляем полученный результат в rezult и arhiv очищаем. ну и далее в зависимости от количества знаков сдвигаем на расстояние.
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 50px; font-size: 20px;» );
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 80px; font-size: 20px;» );
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 130px; font-size: 20px;» );
mnogitel = count * 23 ;
document.getElementById(«rezult»).setAttribute(«style», «margin-left:» + sсосо + «px» );
Группа скриптов (аналогичная всего 3 штуки. ) корень, х в квадрате, 1 деленное на х
Выполнение данной группы скриптов, отличается от верхних, что здесь нет вторгло объекта и действие должно быть выполнено после единичного нажатия на кнопку с математическим действием.
Будут отличаться лишь концовка третьей строки.
1 деленное на х = parseFloat(1 / chislo);
х в квадрате = Math.pow(chislo, 2);
square = document.getElementById(«rezult»).innerHTML = Math.pow(chislo, 2);
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 295px» );
//здесь условие позиционирования из вышестоящего скрипта со строки if (count > «12» )
document.getElementById(«rezult»).setAttribute(«style», «margin-left: 295px» );
Уникальный скрипт, который будет удалять последний элемент из rezult.
Выполнение скрипта получаем данные из rezult, если это число, то преобразуем в строку, удаляем последний элемент, отправить в rezult, позиционировать.
//здесь условие позиционирования из вышестоящего скрипта со строки if (count > «12» )
Первое что хочется сказать напоследок!
Естественно, что когда я решил сделать такой калькулятор, то пошел и посмотрел, что же делают мои конкуренты и о чем пишут относительно калькулятора и когда видишь название простой калькулятор на javascript, то это не простой калькулятор, а примитивный, так будет очень точное название таких калькуляторов, а вот моя разновидность калькулятора – это и есть простой калькулятор на javascript.
Кнопка СЕ – тоже если честно под сомнением её необходимость, более востребованная –например, мне кажется, была бы кнопка возвести в степень…
Кнопка проценты, никогда с ними не сталкивался, поэтому и не написал…
О всех выше указанных пунктах нужно подумать дополнительно…
И полный листинг не выкладываю! Друзья! Надо чуть-чуть пытаться сделать что-то самостоятельно!
Так вы научитесь намного быстрее!
У нас много других скриптов, которые раздаются бесплатно!
Сообщение системы комментирования :
Форма пока доступна только админу. скоро все заработает. надеюсь.