Как вывести результат в JavaScript (2 часть)
Объявление переменных
Для того, чтобы объявить в JavaScript переменную, пишут так:
var name;
где name – осмысленное название переменной, написанное латиницей
var multi_1; - мы объявляем переменную, говорим что у нас есть пустая ячейка
multi_1 = document.getElementById('inp_1').value;
и туда надо что-то положить (присвоить).
Положим туда число, которые вводит пользователь. Переменной multi_1 присвоена запись, теперь в multi_1 лежит число, которое ввел пользователь.
multi_1 = document.getElementById('inp_1').value;
Объявим вторую переменную и положим туда число, введенное пользователем во второй input.
var multi_2;
multi_2 = document.getElementById('inp_2').value;
После введения в документ переменных, больше нет нужды писать длинные выражения, они будут написаны только один раз – первый. Заменим наше громоздкое выражение переменными. Вот так:
alert(multi_1*multi_2);
В ходе работы мы можем менять содержимое переменных - объявлять новое значение переменной, тогда старое содержимое переменной автоматически перезапишется на новое.
Также можно одновременно и объявлять переменную и присваивать ей значение. Эта запись
var multi_1 = document.getElementById('inp_1').value;
равносильна этой записи.
var multi_1;
multi_1 = document.getElementById('inp_1').value;
Нежелательно раскидывать объявление переменных по всему коду, можно перечислить все вводимые переменные через запятую в начале скрипта, добавляя их туда по ходу написания кода.
var a, b, c;
Такой подход, позволяет увидеть все переменные, прост в использовании и в дальнейшем будет использоваться для оптимизации работы скрипта.
Тип переменных
Положить в ячейку можно не только выражение, но и числа, строки, функции. В JavaScript коде, не нужно указывать тип переменных, строки надо заключать в кавычки.
var test = 'Hello baby';
Операции с переменными
С переменными можно производить различные математические действия: сложение, вычитание, деление и.т.д.
var number1 = 10;
var number2 = 20;
alert(number1+number2);
Ошибки в переменной
Если значение переменной number1 оставить пустым, то в консоли разработчика или в окошке alert, появиться ошибка NaN – не число. Нельзя число 20 сложить неизвестно с чем и ждать результата.
При попытке просто вывода пустой переменной, мы увидим undefined. Это предупреждение, что содержимое ячейки number1 не определено. В консоли разработчика, можно видеть все ошибки по JavaScript, но бывает так, что ошибок нет, а скрипт не работает. В таком случае надо искать причину в HTML/CSS коде, других вариантов нет.
Вывод результата
После тега hr, добавим в HTML разметку span, куда выведется результат умножения двух чисел.
<hr>
<span id="result_multi">вывод результата</span>
На данный момент результат мы видим только в окошке alert, но хотим увидеть его на странице в теге span.
function multi(){
var multi_1, multi_2;
multi_1 = document.getElementById('inp_1').value;
multi_2 = document.getElementById('inp_2').value;
alert(multi_1*multi_2);
}
Нам надо убедиться, что мы имеем дело с числами, поэтому сделаем проверку.
multi_1 = parseInt (multi_1);
multi_2 = parseInt (multi_2);
parseInt – это функция, которая проверяет содержимое input и если потребуется преобразование в число, то сделает это. Если пользователь случайно введет, число 10.5 или 10d, то функция сама обрежет до целого числа. Нам нужны числа, а не строки.Необходимо создать ещё одну переменную. назовем её result и присвоим значение умножения. В ячейке result будет храниться результат умножения двух чисел.
var result;
result = multi_1*multi_2;
Вернемся к тегу span, где планируется вывод результата умножения. Мне надо получить элемент span c id result_multi, мы получаем весь элемент span со всеми его свойствами.
document.getElementById('result_multi');
Но мне нужно только одно значение, которое отвечает за то, что будет выводиться между парными тегами span, за это отвечает свойство innerHTML.
document.getElementById('result_multi').innerHTML = result;
При выполнении этой команды, браузер найдет элемент с указанным id и внутри тега span, выведет значение переменной result.
Перед начинающим веб-разработчиком не стоит вопрос – изучать или не изучать JavaScript. Вопрос лишь в том, как максимально эффективно это делать, чтобы после изучения, можно было бы легко применять свои полученные знания на практике? Дело в том, что я разработал уникальный видео-курс по JavaScript, с практической информацией, которую я использую в создании сайтов.
See the Pen Как получить input и вывести результат в JavaScript by porsake (@porsake) on CodePen.
-
Создано 31.12.2018 10:30:00
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.