JavaScript alert, prompt и confirm

Введение в интерактивные функции JavaScript

В этой главе рассматриваются три встроенные функции, которые браузер предоставляет для прямого взаимодействия с пользователем — alert, prompt и confirm — а также console.log для журналирования в процессе разработки. Если вы только начинаете, это самый простой способ заставить страницу что-то делать в ответ на действия пользователя — именно поэтому почти каждое введение в JavaScript начинается с alert.

Все три функции являются методами глобального объекта window, поэтому window.alert(...) и alert(...) — это одно и то же. Перед использованием важно понять два ключевых свойства:

• Они модальны. Каждая открывает небольшое диалоговое окно браузера поверх страницы. Пользователь не может взаимодействовать с остальной частью страницы, пока не закроет его.
• Они синхронны и блокирующие. Строка кода, вызывающая их, не завершается до тех пор, пока пользователь не ответит. Весь поток JavaScript приостанавливается — таймеры не срабатывают, рендеринг не происходит, ничто не выполняется в фоне. Именно поэтому они отлично подходят для быстрого обучения и демонстраций, но плохо подходят для готовых продуктовых приложений.

Поскольку эти диалоги отрисовывает браузер, вы не можете изменить их стили, положение или метки кнопок. В реальных продуктах вы в итоге заменяете их собственными компонентами модальных окон (см. заключение), но для изучения языка они идеальны.

JavaScript Alert: уведомления для пользователя

Роль alert()

Функция alert() отображает простое диалоговое окно с сообщением и единственной кнопкой OK. Она возвращает undefined — её единственная задача — показать сообщение, а не вернуть значение.

Синтаксис и использование

Синтаксис прост: alert(message). Сообщение преобразуется в string, поэтому можно передавать числа, boolean-значения или даже объекты (объекты отображаются как [object Object], что редко является желаемым результатом).

Пользователь должен нажать OK (или Enter / Escape), чтобы продолжить. До этого момента страница заморожена, что делает alert() удобным для единственного важного сообщения, которое пользователь обязан прочитать.

JavaScript Prompt: получение ввода от пользователя

Понимание prompt()

Метод prompt() отображает диалоговое окно с сообщением, полем для ввода текста и кнопками OK / Cancel. Используйте его, когда нужно получить от пользователя один фрагмент текста перед продолжением работы.

Синтаксис и использование

prompt(message, default) принимает два аргумента:

• message — текст, отображаемый над полем ввода.
• default — необязательный. Текст, которым предварительно заполняется поле ввода. Передайте пустую строку "", если хотите, чтобы поле начиналось пустым; если вы полностью опустите этот параметр, некоторые браузеры покажут буквальное слово undefined в поле, поэтому всегда явно указывайте значение по умолчанию.

Обработка ответов пользователя

Возвращаемое значение prompt() — это самое важное, что нужно правильно понять:

• Если пользователь нажимает OK, вы получаете текст из поля ввода в виде string (пустая строка "", если пользователь очистил поле и нажал OK).
• Если пользователь нажимает Cancel или нажимает Escape, вы получаете null.

Поскольку результат может быть string или null, всегда проверяйте его перед использованием. Это естественное место для условных операторов, которые вы уже изучили:

JavaScript Confirm: принятие решений

Метод confirm()

confirm() отображает диалоговое окно с сообщением и двумя кнопками: OK и Cancel. Используйте его для того, чтобы задать пользователю простой вопрос «да/нет».

Синтаксис и использование

confirm(message) принимает один аргумент и возвращает boolean: true, если пользователь нажимает OK, и false, если нажимает Cancel или Escape. Поскольку результат уже является boolean, его можно использовать непосредственно в операторе if.

Особенности применения

Обратите внимание на отличие от prompt(): здесь нет «отсутствующего» состояния. confirm() может вернуть только true или false — Cancel и Escape оба соответствуют false. Как и alert(), он блокирует остальную часть страницы до тех пор, пока пользователь не ответит, поэтому используйте его только для реальных решений («Удалить этот элемент?»), а не для рутинных подтверждений.

JavaScript Console.log: отладка и журналирование

Изучение console.log()

console.log() — это основной инструмент JavaScript для отладки и вывода информации в консоль браузера.

Синтаксис и примеры

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

Заключение: повышение интерактивности веб-страниц с помощью JavaScript

Эти четыре функции — самый простой способ сделать страницу интерактивной в процессе обучения. Кратко напомним их возвращаемые значения — именно с этим начинающие чаще всего ошибаются:

Поскольку все три блокируют главный поток и не поддерживают стилизацию, реальные приложения заменяют их собственными компонентами модальных окон, построенными на HTML и CSS. Но для экспериментов с языком они идеальны. Логичным следующим шагом будет оформить такое взаимодействие в собственные переиспользуемые функции JavaScript и разветвлять логику в зависимости от ответа пользователя с помощью условных операторов.

Практика