Разберем базовые операции ввода/вывода, достаточные для получения и отображения данных от пользователя, до того как научимся работать с HTML-документом.
2. Вывод данных
Для вывода данных будем использовать 2 метода: console.log() и alert().
console и alert являются частью интерфейса window - глобального объекта, доступного при исполнении скрипта на веб-странице. Запись window.alert() избыточна, пишем просто alert() или console.log(). Детальнее об этом будем говорить дальше в курсе.
const message = 'JavaScript is awesome!';
/*
* В круглых скобках указываем имя переменной,
* значение которой необходимо вывести в консоль
*/
console.log(message); // JavaScript is awesome!
const name = 'Mango';
/*
* Можно сначала указать какую-то произвольную строку,
* к примеру описывающую переменную или дополняющую ее, после чего
* поставить запятую и указать имя переменной
*/
console.log('My name is: ', name); // My name is: Mango
/*
* alert выводит модальное окно, текст которого соотсветствует значению
* переменной (или литерала) которую мы укажем в скобках.
*/
alert(message);
3. Получение данных
Для получения данных от пользователя будем использовать prompt() и confirm(), это тоже методы из интерфейса window. Их особенность в том, что результатом своего выполнения они возвращают то, что было введено пользователем. Результат их работы можно записать в переменную для дальнейшего использования.
confirm() — выводит модальное окно с сообщением, и 2 кнопки, Ok и Cancel. При нажатии на Ok, на место вызова функции возвращается true, при нажатии на Cancel возвращается false.
/*
* Просим клиента подтвердить бронь на отель
* и сохраняем в переменную результат работы confirm
*/
const isComing = confirm('Please confirm hotel reservation');
console.log(isComing);
prompt() — выводит модальное окно с полем ввода и кнопками Ok и Cancel. При Ok возвращает то, что было введено в поле ввода, при Cancel возвращает null.
/*
* Спрашиваем имя отеля в котором хотел бы остановится клиент
* и сохраняем в переменную результат вызова prompt
*/
const hotelName = prompt('Please enter desired hotel name:');
console.log(hotelName);
/*
* Важная особенность prompt в том, что не зависимо что ввел пользователь,
* всегда вернется строка. Тоесть если пользователь ввел 5, то вернется
* не число 5, а строка "5". Об этом необходимо всегда помнить.
*/
const value = prompt('Please enter a number!');
console.log(typeof value); // 'string'
console.log(value); // '5'
