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

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

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

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

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

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

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

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

  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('_');
}

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

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

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