Закрыть
Войти
Подождите...
Собирается информация...
Восстановить пароль
Логин или пароль введены не верно!
Подождите...
Идет авторизация.
Вход
Логин или пароль введены не верно!
Забыли пароль?
или войти через вконтакте

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

Открыть содержание
JavaScript

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

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

  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 и нельзя убрать последнее введенное число.

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

Предыдущий урок Следующий урок
Политика конфиденциальности   Пользовательское соглашение