Элементы UI Javascript

Reading time ~2 minutes

В Javascript имеются три встроенных элемента для взаимодействия с пользователем страницы: alert, prompt, confirm. Начнем с самого простого и двинемся по нарастающей.

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

Строка кода:

alert("Message");

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

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

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

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

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

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

var result = prompt (title, default);

То есть, функция prompt принимает два аргумента. Первый аргумент title - это заголовок модального окна. Второй аргумент default - это строка по умолчанию как образец ввода в поле.

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

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

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

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

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

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

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

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

Заключение

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

Итог

  • alert выводит сообщение;
  • prompt выводит сообщение и ждет, пока пользователь введет текст, а затем возвращает введенное значение или null, если ввод отменен (CANCEL/ESC);
  • confirm выводит сообщение и ждет, пока пользователь нажмет «OK» или «CANCEL» и возвращает true/false;

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


Различие между exports и module.exports

Попытка разобраться, в чем различие между exports и module.exports, основанная на статье Understanding module.exports ...Continue reading

Комментарии

Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке