Взаимодействие: alert, prompt, confirm
Так как мы будем использовать браузер как демо-среду, нам нужно познакомиться с несколькими функциями его интерфейса, а именно: alert , prompt и confirm .
alert
С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».
alert("Hello");Это небольшое окно с сообщением называется модальным окном. Понятие модальное означает, что пользователь не может взаимодействовать с интерфейсом остальной части страницы, нажимать на другие кнопки и т.д. до тех пор, пока взаимодействует с окном. В данном случае – пока не будет нажата кнопка «OK».
prompt
Функция prompt принимает два аргумента:
result = prompt(title, [default]);Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.
title Текст для отображения в окне. default Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.
Квадратные скобки в синтаксисе [. ]
Квадратные скобки вокруг default в описанном выше синтаксисе означают, что параметр факультативный, необязательный.
Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result . Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc . В этом случае значением result станет null .
Вызов prompt возвращает текст, указанный в поле для ввода, или null , если ввод отменён пользователем.
let age = prompt('Сколько тебе лет?', 100); alert(`Тебе $ лет!`); // Тебе 100 лет!Для IE: всегда устанавливайте значение по умолчанию
Второй параметр является необязательным, но если не указать его, то Internet Explorer вставит строку «undefined» в поле для ввода.
Запустите код в Internet Explorer и посмотрите на результат:
let test = prompt("Test");Чтобы prompt хорошо выглядел в IE, рекомендуется всегда указывать второй параметр:
let test = prompt("Test", ''); // confirm
result = confirm(question);Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.
Результат – true , если нажата кнопка OK. В других случаях – false .
let isBoss = confirm("Ты здесь главный?"); alert( isBoss ); // true, если нажата OKИтого
Мы рассмотрели 3 функции браузера для взаимодействия с пользователем:
alert показывает сообщение. prompt показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null , если была нажата кнопка «Отмена» или Esc с клавиатуры. confirm показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true , если нажата OK, и false , если нажата кнопка «Отмена» или Esc с клавиатуры.
Все эти методы являются модальными: останавливают выполнение скриптов и не позволяют пользователю взаимодействовать с остальной частью страницы до тех пор, пока окно не будет закрыто.
На все указанные методы распространяются два ограничения:
- Расположение окон определяется браузером. Обычно окна находятся в центре.
- Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.
Такова цена простоты. Есть другие способы показать более приятные глазу окна с богатой функциональностью для взаимодействия с пользователем, но если «навороты» не имеют значения, то данные методы работают отлично.
Что можно задать вторым параметром функции prompt
Создание игр на Unreal Engine 5
Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.
В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.
Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.
Уроки и статьи
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Какая тема Вас интересует больше?
Бесплатный курс
Мастер-класс по созданию сайта на WordPress 6
Этот видеоурок длится всего 21 минуту, но уже в конце создан полностью рабочий сайт на WordPress (с применением ChatGPT). И весь процесс Вы увидите своими глазами, а повторить - не составит труда!
Чтобы получить Видеокурс,
заполните форму
Бесплатный онлайн-семинар
Как создать профессиональный Интернет-магазин
После семинара:
- Вы будете знать, как создать Интернет-магазин.
- Вы получите бесплатный подарок с подробным описанием каждого шага.
- Вы сможете уже приступить к созданию Интернет-магазина.
Функция prompt
Функция prompt выводит окно для ввода данных. Первым параметром она принимает сообщение, которое будет показано пользователю, а вторым - текст по умолчанию в поле ввода Второй параметр - не обязательный.
В окошке что появится будет находится текстовое поле, и две кнопки - ОК, CANCEL. При нажатии на ОК - возвращается введенная пользователем строка, а при нажатии на CANCEL - null .
Синтаксис
prompt(сообщение, [текст по умолчанию]);
Пример
По нажатию на кнопку спросим имя пользователя, а затем выведем это имя с помощью функции alert :
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?'); alert(res); >);
Пример
Сделаем так, что имя пользователя уже будет вставлено по умолчанию, однако пользователь сможет его поменять:
let button = document.querySelector('#button'); button.addEventListener('click', function(event) < let res = prompt('What is Your name?', 'John'); alert(res); >);
Смотрите также
- функцию alert ,
которая выводит диалоговое окно с сообщением - функцию confirm ,
которая выводит диалоговое окно для подтверждения
prompt ( )
При помощи функции prompt ( ) можно вывести на экран пользователя модальное окно c полем ввода и текстом-пояснением.
�� Из-за того, что окно модальное — работа с интерфейсом браузера и страницами будет заблокирована. Это неудобно, плюс может восприниматься пользователем как попытка ограничивать его свободу. Модальное окно для пользователя — окно, которое блокирует работу пользователя с браузером до тех пор, пока пользователь это окно не закроет.
Пример
Скопировать ссылку "Пример" Скопировано
�� Это крайне быстрый вариант кода, который взаимодействует с пользователем, но окно созданное таким образом не изменяется через CSS, а значит использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы юзать модальное окно нежелательно.
Как пишется
Скопировать ссылку "Как пишется" Скопировано
prompt ( ) принимает 1 или 2 аргумента — это текст для отображения и значение по умолчанию для поля ввода.
Результат работы prompt ( ) можно записать в переменную:
const answer1 = prompt('Как тебя зовут?')const answer2 = prompt('Как тебя зовут?', 'Имя')const answer1 = prompt('Как тебя зовут?') const answer2 = prompt('Как тебя зовут?', 'Имя')
Если при вызове prompt ( ) использовать только один параметр, тогда в появившемся окне поле ввода не будет содержать «подсказки» ввода.
В случае когда использовано два параметра, то в поле ввода будет с подсказкой ввода. Это полезно, чтобы показать пользователю, какой результат ввода ожидается.
Как понять
Скопировать ссылку "Как понять" Скопировано
Аргументы prompt ( ) должны быть строками. Если это не так — будет автоматическое приведение к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке.
prompt('Как тебя зовут?', 'Саша')// Текст: 'Как тебя зовут?', значение поля ввода: 'Саша'prompt('Введите возраст', 18)// 'Введите возраст', СТРОКА '18'prompt('Как тебя зовут?', 'Саша') // Текст: 'Как тебя зовут?', значение поля ввода: 'Саша' prompt('Введите возраст', 18) // 'Введите возраст', СТРОКА '18'
�� Результат prompt ( ) — строка, если была нажата кнопка «OK» или null , если была нажата «Отмена».
Поэтому не стоит полагаться на то, что результат prompt ( ) всегда будет строкой. Это может привезти к ошибкам в работе скрипта, например:
const result = prompt('Введите четное число', '')// вводим ДЕСЯТЬ и нажимаем ОКif (result % 2 === 0) // Проверка на четность alert('Число четное')> else alert('Число нечетное')> // Результат: сообщение 'Число нечетное'const result = prompt('Введите четное число', '') // вводим ДЕСЯТЬ и нажимаем ОК if (result % 2 === 0) // Проверка на четность alert('Число четное') > else alert('Число нечетное') > // Результат: сообщение 'Число нечетное'
С точки зрения синтаксиса ошибок нет, но
- Нет явной обработки null — result примет значение null в случае нажатия кнопки «Отмена»: Конечно null % 2 выполнится без ошибок, но работа программы будет некорректной. Правильнее будет обработать и отказ от ввода числа.
- Нет обработки ситуаций, когда введено не число.
В операции (result % 2 = = = 0 ) из-за деления на 2 JavaScript осуществляет приведение строки result к численному типу. Если не получится, то результат работы будет некорректным.
Более корректный вариант обработки ввода:
var result = prompt('Введите четное число', '')if (result === null) alert('Вы отказались от ввода')> else if (isNaN(result % 2)) alert('Ошибка, введено НЕ ЧИСЛО')> else if (result % 2 === 0) alert('Число четное')> else alert('число нечетное')>var result = prompt('Введите четное число', '') if (result === null) alert('Вы отказались от ввода') > else if (isNaN(result % 2)) alert('Ошибка, введено НЕ ЧИСЛО') > else if (result % 2 === 0) alert('Число четное') > else alert('число нечетное') >
Вариант обработки всех возможных случаев ввода более громоздкий, но он намеренно написан наиболее простым способом. В случае использование switch или отдельных самостоятельно написанных функций проверки код примет более элегантный вид.
На практике
Скопировать ссылку "На практике" Скопировано
Дока Дог советует
Скопировать ссылку "Дока Дог советует" Скопировано
�� Ниже представлен пример использования prompt ( ) с самостоятельно созданным диалоговым окном: