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

## 1. Введение <a href="#vvedenie" id="vvedenie"></a>

Разберем базовые операции ввода/вывода, достаточные для получения и отображения данных от пользователя, до того как научимся работать с HTML-документом.

## 2. Вывод данных <a href="#vyvod-dannykh" id="vyvod-dannykh"></a>

Для вывода данных будем использовать 2 метода: `console.log()` и `alert()`.

{% hint style="success" %}
<mark style="color:green;">`console`</mark> <mark style="color:green;"></mark><mark style="color:green;">и</mark> <mark style="color:green;"></mark><mark style="color:green;">`alert`</mark> <mark style="color:green;"></mark><mark style="color:green;">являются частью интерфейса</mark> <mark style="color:green;"></mark><mark style="color:green;">`window`</mark> <mark style="color:green;"></mark><mark style="color:green;">- глобального объекта, доступного при исполнении скрипта на веб-странице. Запись</mark> <mark style="color:green;"></mark><mark style="color:green;">`window.alert()`</mark> <mark style="color:green;"></mark><mark style="color:green;">избыточна, пишем просто</mark> <mark style="color:green;"></mark><mark style="color:green;">`alert()`</mark> <mark style="color:green;"></mark><mark style="color:green;">или</mark> <mark style="color:green;"></mark><mark style="color:green;">`console.log()`</mark><mark style="color:green;">. Детальнее об этом будем говорить дальше в курсе.</mark>
{% endhint %}

{% code lineNumbers="true" %}
```javascript
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);

```
{% endcode %}

[How to use the JavaScript console: going beyond console.log()](https://medium.com/free-code-camp/how-to-use-the-javascript-console-going-beyond-console-log-5128af9d573b)

## 3. Получение данных <a href="#poluchenie-dannykh" id="poluchenie-dannykh"></a>

Для получения данных от пользователя будем использовать `prompt()` и `confirm()`, это тоже методы из интерфейса `window`. Их особенность в том, что результатом своего выполнения они возвращают то, что было введено пользователем. Результат их работы можно записать в переменную для дальнейшего использования.

`confirm()` — выводит модальное окно с сообщением, и 2 кнопки, `Ok` и `Cancel`. При нажатии на `Ok`, на место вызова функции возвращается `true`, при нажатии на `Cancel` возвращается `false`.

{% code lineNumbers="true" %}
```javascript
/*
 * Просим клиента подтвердить бронь на отель
 * и сохраняем в переменную результат работы confirm
 */
const isComing = confirm('Please confirm hotel reservation');
console.log(isComing);

```
{% endcode %}

`prompt()` — выводит модальное окно с полем ввода и кнопками `Ok` и `Cancel`. При `Ok` возвращает то, что было введено в поле ввода, при `Cancel` возвращает `null`.

{% code lineNumbers="true" %}
```javascript
/*
 * Спрашиваем имя отеля в котором хотел бы остановится клиент
 * и сохраняем в переменную результат вызова 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'

```
{% endcode %}
