Закрыть
Вход на сайт
Регистрация
Вы успешно зарегистрировались!

Перейти к обучению
Регистрация
Войти на сайт

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

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

Какая основная идея калькулятора? Взять два числа и сложить их! Это мы и реализуем)

Я написал вот такой вариант: 

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

Логика получается следующая: 

  1. Берем значения из input-ов.
  2. Обрабатываем полученные значения (складываем, вычитаем, умножаем или делим).
  3. Выводим полученный результат на экран.

Теперь разберем как эта логика реализуется в коде. 

Чтобы обработать действие, в первую очередь, необходимо поставить событие click. Тут два варианта, либо ставить 4 события на каждую кнопку, либо сделать так, как сделал я, а именно: у меня у каждой кнопки есть атрибут type, который содержит в себе тип действия, за которое отвечает данная кнопка. 

$('button').click(function(){
  var type=$(this).attr('type');
  console.log(type); // plus ИЛИ minus ИЛИ multiply ИЛИ divide 
});

Таким образом, мы написали только один клик и по переменной type можем понять какое действие делать. 

Но, прежде чем понять что делать с переменным, необходимо получить их значения. 

var first_number=$('.first_number').val();
var second_number=$('.second_number').val();

При клике по кнопке, мы создаем две переменные, в которые заносим значения соответствующих input-ов. 

Далее мы сделаем проверку наших переменных. Если они пустые, то подсветим инпуты красным, если нет, то произведем с ними действия. 

var send_form=true;    

if(first_number.length==0){
  $('.first_number').css('background','tomato');
  send_form=false;
}

if(second_number.length==0){
  $('.second_number').css('background','tomato'); 
  send_form=false;
}

Идея очень простая. Метод length передает количество символов в переменной. Получается, что если количество символов равно нулю, то это значит, что переменная пустая и тогда по классу находим input и делаем значение css свойства background равным tomato. Но тут есть одно но. Вот вы подсветили, а потом человек вводит цифры в красный input, не красиво получается. Поэтому если происходит ввод текста, то мы подсветим input белым. Для этого используем событие keyup. Оно отвечает за нажатие любой клавиши на клавиатуре.  

$('input').keyup(function(){
  $(this).css('background','#FFF');
});

Вы можете задаться вопросом. А что за переменная send_form? Все просто. Это булевая переменная, которая имеет два значения: true или false. Когда дело доходит до этапа выполнений действий с переменными, мы проверяем какое у нее значение. Если true, то запускаем процесс. Если false, то ничего не делаем. Это нужно для того, чтобы действия не запускались с пустыми переменными, иначе возникнет ошибка, а в результат выведется не ответ, а NaN. 

Логика такая: изначально переменная send_form равна true, то есть форму можно отправлять. Если вдруг какая-то из переменных окажется пустой, то значение send_form меняется на false и все останавливается. Такой прием очень удобно использовать если у вас много полей, которые необходимо проверить на пустоту. 

Далее обязательно конвертируем переменные в тип Float. 

first_number=parseFloat(first_number);
second_number=parseFloat(second_number);

Дело в том, что изначально переменные, приходящие от input-ов, строковые. А нам же надо с переменным производить математические действия, поэтому придется перевести в числовой тип. Так как числа могут быть с плавающей точкой, то обязательно используем float. Если привести к integer, то если вы введете 1.5, то получится просто 1. 

В конечном счете, мы проверяем тип действия, создаем переменную result и приравниваем соответствующему результату: 

if(type=='plus'){ 
  var result=first_number+second_number; 
}

Но перед тем, как это сделать, проверяем переменную send_form. И если все хорошо, то производим действия и заносим результат в span, который находится в div-е с классом result, а если отправлять форму нельзя, то очищаем поле результата, вставляя туда знак "_".

if(send_form==true){
  var type=$(this).attr('type'); 

  //Производим соответствующие действия исходя из значения type

  $('.result span').text(result);
}else{
  $('.result span').text('_');
}

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

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

Предыдущий урок Следующий урок