Взаимодействие с пользователем

1. Введение

Разберем базовые операции ввода/вывода, достаточные для получения и отображения данных от пользователя, до того как научимся работать с 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);

How to use the JavaScript console: going beyond console.log()

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'