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

Готовые виджеты калькуляторов

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

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

Лично я привык работать только с проверенными проектами и поэтом для одного из своих сайтов скачал калькулятор через онлайн магазин WordPress — WP-R.ru

Переходим в раздел «Плагины» и выбираем «Калькулятор мер и весов» через кнопку купить или название продукта.

На следующей странице смотрим пример работы модуля, описание функций.

Возможности CoWaM:

• Удобный поиск
• Настройка дизайна
• Адаптивная верстка
• Мультиязычность

Если все устраивает жмем «Купить» и в специальной форме указываем домен сайта, адрес электронной почты.

Далее к вам на почту придут данные для входа в личный кабинет пользователя, и реквизиты для оплаты продукта (WebMoney, Яндекс.Деньги) и ссылка для скачивания.

Если вы захотите установить сразу модуль, то в его настройках увидите сообщение для ввода лицензионного ключа.

Лицензию получите в ЛК после подтверждения оплаты.

После активации вам будут доступны все функции калькулятора CoWaM и вы сможете его внедрить как на страницах сайта, так и в любом другом месте.

• Вывод через стандартные виджеты;
• Вывод внутри страниц и записей с помощью шорткода;
• Вывод внутри любого файла темы через специальный код.

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

Установка заняла считанные минуты.

На этом у меня все, надеюсь этот пост поможет вам улучшить свои сайты на только в глазах поисковых систем, но и сделать их полезней для посетителей.

Кстати, сообщение от Яндекса через пару дней пропало. Наверное был сбой в работе алгоритмов. ))

Детали реализации

• Определение кнопок через класс или id:

PHP

var name_variable = document.querySelectorAll(‘.name_class’), name_element = document.getElementById(‘id_element’);

• Обработчики событий на кнопки:

PHP

name_variable.addEventListener(‘click’, name_eventHandler); name_variable.addEventListener(‘click’, function (e) { //обработка события //е – элемент события });

• Все свойства элемента можно вывести в консоль:

PHP

console.log(e);

o Свойство для распознавания кнопки:

PHP

e.srcElement.id

o Свойство для получения текста кнопки:

PHP

e.target.textContent

• Общие структуры функций:

o Функция, которая отражает введенное число на экране калькулятора:

PHP

function numberPress (number) { if (условие) { //ввод нового значение и меняем значение флага} else { if (условие) { //стирает 0 с дисплея} else { //добавляет цифру к числу на экране} } };

o Функция обработки операций калькулятора и вывода результата:

PHP

function operation (op) { //создаем локальную переменную памяти if (условия) { //сохраняем значение на экране в переменную памяти} else { //говорим переменной памяти о том, что мы вводим новое число} if (условие с +) { //выполнение операции} else if (условие с -) { //выполнение операции} else if (условие с *) { //выполнение операции} else if (условие с /) { //выполнение операции} else { //действия с глобальной и локальной памятью}; //вывод результата //сохранение текущей операции };

!Функция преобразования строки к числу с плавающей точкой parseFloat().

o Функция добавления десятичной точки:

PHP

function decimal (argument) { //создаем локальную переменную if (условие) { //добавляем 0.} else { if (условие) { //если не существует символа ‘.’ в строке – добавляй точку }; }; };

o Функция обработки кнопок очищения C и СЕ:

PHP

function clear (argument) { if (условие с се) { //удаление введённого числа с дисплея} else if (условие с с) { //очищения дисплея }; };

o Функция вывода списка функций калькулятора — «Как это работает?»

PHP

function howWork (argument) { //новый элемент списка for (по операциям) { //добавление в элемент списка текста //вставка в лист элемента }; };

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!

Кнопки для калькулятора и оформление.

Кнопка будет иметь уникальный селектор идентификатора + внутри будет — событие «onclick»

<button id=»id_уникальный» onclick=»foo_уникальный()»>уникальный</button>

css кнопки:

Общее для всех кнопок:

Позиция absolute,ширина — 75px, высота — 49px, высота шрифта — 21px,

button {

position: absolute;

width: 75px;

height: 49px;

font-size: 21px;

}

И поведение при наведении сделаем простой бордюр чуть потемнев…

button:hover {

border: 1px solid #888c90;

}

Позиционируем первую левую снизу кнопку плюс+минус

button#id_pl_mi {

margin-top: -60px;

margin-left: 7px;

}

Результат:

±

Следующие 3 кнопки будет отличаться названием после селектора «#» и позицией по горизонтали(margin-left + 80px к предыдущему.

Следующие полоски будут подниматься относительно каждой полоски по вертикали(margin-top + 53px

Оформление гипертекстовой разметки

Изначально для приложения «Калькулятор» необходимо задать разметку элементов и сразу назначить обработчики событий. Для этого лучше всего использовать таблицу. Поскольку в коде будет множество инпутов, то потребуется и форма.

Поэтому создаем форму с именем «Calculation». В нее вписываем таблицу, которая будет содержать 5 строк и 5 столбцов. Первая строка табличного представления будет занята текстовым полем ввода. А далее разместим кнопки с цифрами, арифметическими операциями, знаком «равно», сбросом последнего введенного числа (CE) и полным сбросом .

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

<form name="Calculation" action="">
     <table class="Table" cellpadding="2" cellspacing="2">
     <tr>
         <td colspan=5 align=middle>
         	<input id="TextEdit" name="ReadOut" type="Text" size=28 value="0" width="250px">
         </td>
     </tr>
     <tr>
         <td><input name="btnSeven" type="Button" value="7" onclick="PressedNum(7)"></td>
         <td><input name="btnEight" type="Button" value="8" onclick="PressedNum(8)"></td>
         <td><input name="btnNine" type="Button" value="9" onclick="PressedNum(9)"></td>
          <td><input name="btnClear" type="Button" value="C" onclick="Clear()" /></td>
         <td><input name="btnClearEntry" type="Button" value="CE" onclick="ClearEntry()" /></td>
       </tr>
     <tr>
         <td><input name="btnFour" type="Button" value="4" onclick="PressedNum(4)"></td>
         <td><input name="btnFive" type="Button" value="5" onclick="PressedNum(5)"></td>
         <td><input name="btnSix" type="Button" value="6" onclick="PressedNum(6)"></td>
            <td><input name="btnPlus" type="Button" value="+" onclick="Operations('+')" /></td>
         <td><input name="btnMultiply" type="Button" value="*" onclick="Operations('*')" /></td>
     </tr>
     <tr>
         <td><input name="btnOne" type="Button" value="1" onclick="PressedNum(1)"></td>
         <td><input name="btnTwo" type="Button" value="2" onclick="PressedNum(2)"></td>
         <td><input name="btnThree" type="Button" value="3" onclick="PressedNum(3)"></td>
          <td><input name="btnMinus" type="Button" value="-" onclick="Operations('-')" /></td>
         <td ><input name="btnDivide" type="Button" value=" / " onclick="Operations('/')" /></td>
     </tr>
     <tr>
         <td><input name="btnZero" type="Button" value="0" onclick="PressedNum(0)"></td>
         <td colspan="2"><input id="WideBtn" name="btnEquals" type="Button" value="=" onclick="Operations('=')"></td>
       <td></td>
       <td></td>
     </tr>
     </table>
</form>

JavaScript код

Переходим к самому интересному — созданию JavaScript-кода для калькулятора. В своем примере я использовал JavaScript + jQuery.

Последний применил только из-за удобства манипуляции с DOM. Недавно узнал о существовании библиотеки Underscore.js как альтернативы jQuery, но меньшего размера. Надо опробовать Underscore.js обязательно! )

Первым делом инициализируем кнопки калькулятора. Для этого забираем значения из атрибута кнопок и динамически вставляем в HTML-разметку:

Исходный вид калькулятора подготовили — он теперь выглядит как настоящий калькулятор! Если не принимать во внимание кошмарных цветов и их сочетания ) Ну мы не дизайнеры, нам простительно )

Теперь стоит задача — при нажатии на кнопку калькулятора чтобы ее значение появлялось в окошке последнего. Тоже ничего сложного, если подумать.

Просто нужно забрать у активной кнопки значение ее атрибута и передать как значение элемента .

Небольшая тонкость здесь — нужно конкатенировать текущее значение элемента с текущим значением элемента ; иначе будет происходить простое замещение предыдущего значения элемента текущим значением элемента :

Полная очистка экрана калькулятора элементарно проста — достаточно при нажатии на соответствующую кнопку передать в элемент пустое значение:

Дальше уже немного интереснее — будем оживлять кнопку . То есть — ввели в окошко калькулятора, к примеру, . По нажатии на кнопку в окошке должен появиться результат этой арифметической операции.

На помощь приходит функция JavaScript под названием . На javascript.ru эта функция подробно расписана.

В результате код для “оживления” кнопки будет выглядеть “скромно”:

Наш калькулятор почти готов. Осталось добавить жизни к двум последним кнопкам — возведения в степень и посимвольной очистки экрана калькулятора.

Для возведения в степень воспользуемся стандартной JavaScript-библиотекой и ее методом .

Заберем у элемента его текущее значение и передадим в качестве одного из аргументов в метод . Второй аргумент в нашем случае — это константа 3:

Последний шаг к успеху создания калькулятора — это “оживление” кнопки посимвольной очистки экрана калькулятора.

В этом случае воспользуемся стандартным методом JavaScript — . Это метод JavaScript(), который извлекает из строки подстроку и возвращает ее в виде новой строки — почитать с примерами.

В качестве аргументов принимает два параметра — начальную и конечную позицию, которые выступают как начальный и конечный индекс массива. Массивом в данном случае является строка.

Функция (на кнопке посимвольной очистки) в нашем случае будет работать так — забираем у элемента его текущее значение. Значение возвращается в виде строки, конечно.

Поэтому находим ее длину () и укорачиваем на один (последний) символ — . Таким образом мы динамически укорачиваем текущее значение в окне калькулятора на один символ.

Затем нам нужно заменить текущее значение окна калькулятора укороченным на один символ значением. Для этого берем метод и с помощью него “обрезаем” текущую строку; этот метод возвращает “обрезанный” вариант. Нам осталось только вставить его в окно калькулятора.

Результат будет выглядеть таким образом:

Вот наш калькулятор и готов — ниже полный JavaScript-код:

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

Поэтому привожу ссылку на готовый вариант калькулятора, который создавался в этой статье. На CodePen можно его посмотреть и разобрать детально (при желании).

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

HTML файл:

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

XHTML

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

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

Как установить калькулятор на сайт

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

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

В сети я нашел несколько путей как подключить JS скрипты к записям:

Шорткод. Данный способ основан на редактировании файла темы functions.php.

Здесь вам придется между < ?php … ? > вставить специальный код:

function myJavascript1(){
$str='<script type="text/javascript">КОД</script>';
return $str;
}
add_shortcode( 'myJavascript1', 'myJavascript1');

где вместо КОД вставляем свой скрипт, а для вызова шорткода на странице используем .

Функция wp_enqueue_script. С ее помощью можно подключить скрипт для конкретной страницы. Данный способ популярен, но требует больших знаний движка и его структуры.

Правка header.php. Один из наихудших методов, основанный на добавлении специального кода перед закрывающим тегом </ head> с номером страницы, в которой надо отобразить скрипт.

Конструкция iframe. Один из простейших способов, где надо создать новый файл и закинуть в него скрипт.

Далее загружаем этот файл к себе на хостинг, а в статье в том месте, где будет выводиться калькулятор размещаем код iframe, через который и будет отображаться содержимое из внешних файлов.

<iframe src="http://seoslim.ru/wp-content/calculators/calcul-1.html" width="585" height="300" frameborder="0" scrolling="no"></iframe>

• ссылка — адрес где расположен файл с готовым калькулятором;
• параметры width и height — задают размеры формы;
• параметр frameborder — присваивает толщину границы фрейма;
• параметр scrolling — задает или убирает полосу прокрутки.

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

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

Но можно пойти и другим путем, об этом далее.

Вперед! Работай!

Вот теперь пришло время разобрать самое увлекательное! Ниже я прикреплю программный код на JS и прокомментирую важные моменты.

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

<script language="JavaScript">
var ThisCalc  = document.Calculation; //Определяю объект, с которым буду работать
var CurResult = 0; //хранит текущий численный результат
var IsNewNumFlag = false; //определяю вводится новое число или нет
var OperPending = "";// хранит текущее нажатое значение
 
//функция обрабатывает кнопки с цифрами
function PressedNum (Num) 
{
		if (IsNewNumFlag)//если ввод нового числа, т.е. первой его цифры
		{
			ThisCalc.ReadOut.value = Num;
			IsNewNumFlag = false;
		}	
		else {//если не новое
			if (ThisCalc.ReadOut.value == "0")//если был сброс и стоит 0
//то заменяем его на новую цифру
				ThisCalc.ReadOut.value = Num;
			Else
//иначе дописываем цифры
				ThisCalc.ReadOut.value += Num;
		}
}
 
//функция обрабатывает кнопки с арифметическими операциями
function Operations (Op) 
{
		var Readout = ThisCalc.ReadOut.value;
		if (IsNewNumFlag && OperPending != "=")
		{
			ThisCalc.ReadOut.value = CurResult;
		}
		else
		{
			IsNewNumFlag = true;
			if ( '+' == OperPending )
				CurResult += parseFloat(Readout);
			else if ( '-' == OperPending )
				CurResult -= parseFloat(Readout);
			else if ( '/' == OperPending )
				CurResult /= parseFloat(Readout);
			else if ( '*' == OperPending )
				CurResult *= parseFloat(Readout);
			else
				CurResult = parseFloat(Readout);
			ThisCalc.ReadOut.value = CurResult;
			OperPending = Op;
		}
}
 
 
// Очистка текущей цифры
function ClearEntry () 
{
		ThisCalc.ReadOut.value = "0";
		IsNewNumFlag = true;
}
 
// Сброс всех параметров калькулятора
function Clear () 
{
		Currents = 0;
		OperPending = "";
		ClearEntry();
}
</script>

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

Прочитано: 421 раз

Компилятор vs Интерпретатор

Как исходный код превращается в рабочий? При выполнении программы, совершенно не важно, на каком языке он написан. Главное превратить исходный код в машинный

Это можно сделать двумя способами – компиляцией и интерпретацией.

Компилятор

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

Компилятор, по сути, является переводчиком между программистом и компьютером. Его принцип работы заключается в том, что компилятор сначала читает весь код, проверяет на ошибки и затем, в случае отсутствия ошибок, выполняет его.

После компиляции создается отдельный файл с откомпилированным кодом. Из этого следует недостаток компиляции – плохая переносимость программ для конкретных моделей.

Интерпретатор

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

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

JavaScript файл:

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

JavaScript

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

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

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

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

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

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

Превратим набор элементов во что-то стоящее

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

Итак, для начала оформим внешний вид самой таблицы. Я задал объемную рамку вокруг калькулятора, установил цвет фона, внешние отступы, ширину таблицы и вид размещения текста внутри нее.

1
2
3
4
5
6
7
8

	.Table {
   	  border: 3px inset gray;
   	  background: #E6E6FA;
   	  margin-left: 22%;
   	  margin-top: 12px;
   	  width: 270px;
   	  text-align: center;
   	}

Теперь красиво оформим кнопки.

1
2
3
4
5
6

  	.Table input {
   	  border: 2px solid gray;
   	  border-radius: 4px;
   	  width: 30px;
   	  margin: 4px;
   	}

Также у меня в коде есть особые поля. Это широкая кнопка для знака «равно» и само текстовое поле ввода. Для начала я опишу стили поля ввода, которому я задал идентификатор TextEdit.

А теперь займемся редактированием широкой кнопки с идентификатором WideBtn.

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

Пример простого калькулятора для сайта на PHP + JS

Итак, если вы решите сами создать калькулятор, то знайте, что овладеть хотя бы базовыми знаниями языков программирования JavaScript и PHP все же придется.

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

Форма счетчика будет создана с помощью тегов

<form> … </form>

Для реализации ввода значений используем теги <input>

<form>
 Введите число 1 <input type="text" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br>
 <input type="button" value="Рассчитать">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text">
</form>

Функция Onchange — убирает значения при добавлении их в форму.

Функция Onkeyup — убирает значения при добавлении их в форму кроме цифр.

Далее добавляем переменные в форму для тегов input, например, первое значение это латинская «x», второе вводимое значение в поле это латинская «y», а выходное значение это «summa».

<form>
 Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br>
 <input type="button" value="Рассчитать">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text" name="summa"> </form>

Теперь чтобы форма заработала надо ее наделить разумом, то есть создать скрипт с помощью Java, который и будет вести расчеты.

<script lang="JavaScript">
function calculators(form) {
x = eval(form.a.value); //Присваиваем x значение из первого поля
y = eval(form.b.value); //Присваиваем y значение из второго поля
z = x+y; //Складываем значения x и y
form.total.value = z; //Выдаем результат
}
</script>

Словом calculators можно изменить на любое, так как им мы даем только название функции.

А для x, y, z задаем переменные, которые были созданные ранее.

Далее переходим обратно к форме и для тега input задаем функцию, отвечающую за расчет значений.

<input type="button" value="Рассчитать" />

Для этого добавляем в инпут команду onclick =»calculators (this.form)» которая и запустить алгоритма калькулятора.

<script lang="JavaScript">
 function calculators(form) {
 x = eval(form.a.value);
 y = eval(form.b.value);
 z = x+y;
 form.total.value = z;
 }
 </script>
 <form>
 Введите число 1 <input type="text" name="x" onchange="this.value=this.value.replace(/()/g,'');" onkeyup="var n=this.value.replace(/()/g,''); if(n!=this.value) this.value=n;"><br><br>
 Введите число 2 <input type="text" name="y" onkeyup="this.value=this.value.replace(/()/g,'');"><br><br><br>
 <input type="button" value="Рассчитать" onclick="calculators(this.form)">
 <input type="reset" value="Сброс"><br><br>
 Результат <input type="text" name="summa">
 </form>

Как видите все не, так и сложно как может показать, теперь можно скачать в интернете чужие калькуляторы и редактировать их под себя, например, добавить другие значения и функции.

Вывод:

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

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

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

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

• Снег на JavaScript
• Javascript пинг понг создаём игру с использованием canvas
• Делаем продвинутый слайдер на чистом javascript
• Как сделать простой слайдер на чистом JavaScript

С этим читают

• Alerts
• Переход на v4
• How to — text buttons
• Проверить нажат ли чекбокс javascript пример
• Hidden wiki
• Jquery
• Форма заявки с сайта: разбираемся в видах и настройках элемента
• Html
• Команды и выражения case языка pl/sql на примерах
• Глобальные переменные в wordpress