Элементы UI Javascript

В Javascript имеются три встроенных элемента для взаимодействия с пользователем страницы:

1

alert

1

prompt

1

confirm

Модальное окно alert

Строка кода:

  alert("Message");

… вводит на странице модальное окно. Модальными окнами называются окна, которые блокируют работу всей страницы в целом (и скриптов - в частности) до тех пор, пока пользователь не выполнит требуемое окном действие. Пока модальное окно запущено, пользователь не сможет прокручивать страницу, нажимать на ней какие-либо кнопки или переходить по ссылкам.

Конкретное место, где выводится модальное окно с вопросом — обычно это центр viewport браузера и внешний вид окна выбирает браузер. Разработчик не может на это влиять. С одной стороны — это недостаток, так как нельзя вывести окно в своем, особо красивом, дизайне.

В случае с alert требуемое от пользователя действие одно - нажать кнопку “ОК”.

Задача alert - донести до сведения пользователя страницы какую-либо информацию, будь то справочная информация, информация об ошибке и так далее. Функция alert - единственная, которая ничего не возвращает!

Модальное окно prompt

Функция prompt также, как и alert, создает модальное окно. Но, в отличие от модального окна alert, окно prompt немного сложнее. Синтаксис функции prompt выглядит таким образом:

  var result = prompt (title, default);

То есть, функция prompt принимает два аргумента. Первый аргумент

1

title

1

default

Создаваемое функцией prompt окно имеет поле для ввода и две кнопки OK и Cancel. Вызов prompt возвращает то, что ввел посетитель — строку или специальное значение

1

null

  var ageUser = prompt ('How old are you?', 30);
  alert('Your are ' + ageUser + ' old!');

Рекомендуется всегда указывать второй аргумент:

  var test = prompt('Тест', '');

Окно prompt предназначено для получения у пользователя какой-либо информации в виде данных любого типа.

Модальное окно confirm

Это модальное окно служит для получения от пользователя подтверждения на заданный вопрос - ДА или НЕТ. Функция confirm выводит окно с вопросом question с двумя кнопками: OK и CANCEL. Результатом будет

1

true

1

false

  var sex = confirm('Are you male?');
  console.log(sex);

Заключение

Рассмотренные три способа взаимодействия с пользователем являются самыми простыми. Это простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда важна простота, а всякие «красивости» особой роли не играют.

Итог

• 1

  alert

  выводит сообщение;

• 1

  prompt

  выводит сообщение и ждет, пока пользователь введет текст, а затем возвращает введенное значение или

  1

  null

  , если ввод отменен (CANCEL/ESC);

• 1

  confirm

  выводит сообщение и ждет, пока пользователь нажмет «OK» или «CANCEL» и возвращает

  1	true/false

  ;

Данная статья является пересказом соответствующего материала с ресурса learn.javascript.ru и не претендует на оригинальность.