Теперь, когда мы изучили теорию, начнем использовать знания на практике. В этом уроке мы напишем самый простой калькулятор.
Какая основная идея калькулятора? Взять два числа и сложить их! Это мы и реализуем)
Я написал вот такой вариант:
Тут все просто. Вводите первое и второе числа, нажимаете на кнопку с действием и с этими цифрами что-то происходит, а результат выводится в соответствующей строке.
Логика получается следующая:
Теперь разберем как эта логика реализуется в коде.
Чтобы обработать действие, в первую очередь, необходимо поставить событие 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('_');
}К сожалению, этот калькулятор слабо напоминает тот, который мы привыкли видеть. Там только одно поле для цифр, нет никаких строк с результатом и есть циферки. Поэтому именно такой калькулятор мы сделаем в следующем уроке.
Просто сначала надо было понять принцип создания подобных программ. И теперь, когда мы знаем как брать значения, обрабатывать их и выводить на страницу результат, мы сделаем более сложную версию калькулятор.