JavaScript

Пишем калькулятор. Часть 2

В этом уроке мы создадим новую, более сложную, версию калькулятора:

Разница с калькулятором из предыдущего урока в следующем:

1. Input только один. Он предназначен для ввода первого числа, второго и вывода результата. 
2. Появились кнопки для ввода цифр и точки. 
3. Помимо кнопок с действиями, есть кнопочка "=".

Поехали разбираться в нюансах.

Теперь мы включили проверку на то, чтобы человек вводил только цифры.

$('input').keydown(function(){

  $(this).val($(this).val().replace (/\D/, ''));

});

Фишка в следующем. Если в полученном val() существует не цифра, то она заменяется на "", то есть на ничего. И результат вставляется обратно в input. Соответственно, если в val() находится цифра, она не заменяется и обратно вставляется та же цифра без изменений. При этом, проверка происходит только тогда, когда пользователь поднял клавишу.

Далее мы обрабатываем кнопки, которые вводят в input данные. Это цифры и знак "." для ввода дробных значений.

$('.input_number').click(function(){ 
  var number=$(this).text();
  var value=$('input').val()+number; 
  $('input').val(value);
});

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

Хочу заметить, что я в кнопках специально символы расположил без пробелов. Вот так: <div>7</div>. Это нужно для того, чтобы когда я получаю методом text() данные, не получить в значении лишние пробелы. 

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

Давайте разберемся как происходит логика обработки переменных.

В прошлом уроке было все просто. Два инпута, одно поле вывода. Взяли значение, сложили и вывели результат. Как быть, если у нас один input?

Все просто:

1. Вводим первое число.
2. Нажимаем кнопку действия, например сложить.
3. Заносим значение input в переменную, чтоб запомнить его.
4. Так же, заносим в переменную тип действия, которое мы будем выполнять, для примера возьмем +.
5. Очищаем input, чтоб ввести второе число.
6. Вводим второе число.
7. Нажимаем "=".
8. Получаем первое число из переменной, которую мы создаем в пункте 3.
9. Получаем второе число из input.
10. В 4-м пункте мы записали, какое действие мы хотим выполнить. Исходя из значения этой переменной, манипулируем первым и вторым числами.
11. Результат выводим в input.

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

var first_number;
var type_action;

Обрабатываем клик по кнопке с действием:

$('.action').click(function(){ 
  first_number=parseFloat($('input').val()); 
  type_action=$(this).text(); 
  $('input').val(''); 
});

При этом, заносим значение числа и типа действия в переменную и очищаем input.

Обрабатываем клик по знаку "="

$('.get_result').click(function(){
	var second_number=parseFloat($('input').val());

	if(type_action=='-'){
		var result=first_number-second_number;
	}
	//Обработка остальных действий

	result=result.toFixed(2);
	$('input').val(result);
});

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

Ну и конечно, выводим результат в input.

Поздравляю вас с написанием первого вашего полноценного калькулятора.

Но эта версия не идеальна:

Программа не проверяет ввели ли вы что-то в input, как это было в прошлом уроке. 
Она всегда округляет число до двух знаков и даже целые числа выводятся так: 38.00.
При нажатии на "=" мы не проверяем введено ли первое число. 
Очищается только полностью весь input и нельзя убрать последнее введенное число.

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