Главная страница>Учебник по веб-дизайну>Учебник по Javascript

Взаимодействие: оповещение, подсказка, подтверждение

Автор：Eve Cole Время обновления：2025-01-13 13:06:04

Поскольку мы будем использовать браузер в качестве демонстрационной среды, давайте рассмотрим пару функций для взаимодействия с пользователем: alert , prompt и confirm .

тревога

Это мы уже видели. Он показывает сообщение и ждет, пока пользователь нажмет «ОК».

Например:

 Оповещение("Привет");

Мини-окно с сообщением называется модальным окном . Слово «модальный» означает, что посетитель не может взаимодействовать с остальной частью страницы, нажимать другие кнопки и т. д., пока не освоит окно. В данном случае – пока не нажмут «ОК».

быстрый

prompt функции принимает два аргумента:

 результат = приглашение (название, [по умолчанию]);

Он показывает модальное окно с текстовым сообщением, полем ввода для посетителя и кнопками ОК/Отмена.

  • title

  • Текст, который будет показан посетителю.

  • default

  • Необязательный второй параметр, начальное значение поля ввода.

Квадратные скобки в синтаксисе [...]

Квадратные скобки вокруг default в приведенном выше синтаксисе означают, что параметр является необязательным, а не обязательным.

Посетитель может ввести что-нибудь в поле ввода подсказки и нажать ОК. Затем мы получаем этот текст в result . Или они могут отменить ввод, нажав «Отмена» или клавишу Esc , тогда в result мы получим null .

Вызов prompt возвращает текст из поля ввода или null , если ввод был отменен.

Например:

 let age = Prompt('Сколько вам лет?', 100);

alert(`Вам ${age} лет!`); // Вам 100 лет!

В IE: всегда указывайте default

Второй параметр является необязательным, но если мы не укажем его, Internet Explorer вставит в приглашение текст "undefined" .

Запустите этот код в Internet Explorer, чтобы увидеть:

 let test = Prompt("Тест");

Итак, чтобы подсказки хорошо выглядели в IE, мы рекомендуем всегда указывать второй аргумент:

 let test = Prompt("Тест", ''); // <-- для IE

подтверждать

Синтаксис:

 результат = подтвердить (вопрос);

Функция confirm показывает модальное окно с question и двумя кнопками: ОК и Отмена.

Результат будет true если нажата кнопка ОК, и false в противном случае.

Например:

 let isBoss = submit("Вы босс?");

оповещение (isBoss); // true, если нажата ОК

Краткое содержание

Мы рассмотрели три функции браузера для взаимодействия с посетителями:

  • alert

  • показывает сообщение.

  • prompt

  • показывает сообщение с просьбой ввести текст. Он возвращает текст или, если нажата кнопка «Отмена» или Esc , null .

  • confirm

  • показывает сообщение и ждет, пока пользователь нажмет «ОК» или «Отмена». Он возвращает true для OK и false для Cancel/ Esc .

Все эти методы являются модальными: они приостанавливают выполнение скрипта и не позволяют посетителю взаимодействовать с остальной частью страницы, пока окно не будет закрыто.

Все вышеперечисленные методы имеют два ограничения:

  1. Точное расположение модального окна определяется браузером. Обычно это в центре.

  2. Точный вид окна также зависит от браузера. Мы не можем его изменить.

Это цена за простоту. Есть и другие способы показать более красивые окна и более богатое взаимодействие с посетителем, но если «навороты» не имеют большого значения, эти методы работают просто отлично.

Задачи

Простая страница

важность: 4

Создайте веб-страницу, которая запрашивает имя и выводит его.

Запустить демо-версию

JavaScript-код:

 let name = Prompt("Как вас зовут?", "");
оповещение (имя);

Полная страница:

 <!DOCTYPE html>
<html>
<тело>

  <скрипт>
    'используйте строгий';

    let name = Prompt("Как вас зовут?", "");
    оповещение (имя);
  </скрипт>

</тело>
</html>
Связанные статьи