Newcomposers.ru

IT Мир
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Команда prompt в javascript

Блог Vaden Pro

Операции alert, prompt и confirm. Взаимодействие с пользователем в Javascript

В JavaScript существует три базовых операции, которые позволяют получать данные от пользователя, для дальнейшей их обработки в скриптах. Это alert, prompt и confirm. Для чего они применяются, как их использовать и прочие нюансы и будут рассмотрены далее в этой статье.

alert

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

После вывода сообщения, содержащегося в alert, выполнение скрипта приостанавливается и возобновляется после закрытия модального окна.

Для примера запустите следующий скрипт из одной строки:

Обычно используется для вывода на экран пользователя оповещений о чем-либо (к примеру о неверно заполненных полях формы) или же для отладки кода, чтобы выяснить на каком месте кода начинается некорректное выполнение скрипта.

prompt

Второй по распространенности после операции alert является prompt. Данная команда предоставляет пользователю больше возможностей для взаимодействия с модальным окном, делая доступными для нажатия две кнопки (OK и CANCEL) и поле для ввода информации.

Для того, чтобы продолжить работу с сайтом, юзеру необходимо или закрыть данное окно, кликнув на CANCEL (нажатие EST на клавиатуре также сработает) или ввести информацию в поле для ввода и нажать ОК.

В случае отмены ввода текста в поле (нажатие CANCEL) в скрипт будет возвращено специальное значение null. Подробнее о котором можно почитать тут.

В случае заполнения поля и нажатия ОК, в скрипт вернется информация, которую ввел пользователь.

Синтаксис данной команды несколько сложнее, чем предыдущей, поскольку позволяет задать текст обращения к пользователю и содежимое поля для ввода информации, которое будет выводиться по умолчанию: result = prompt ( title , default ) ; , где

  • title – сообщение, которое будет выведено пользователю в модальном окне. Аргумент обязательный для заполнения.
  • default – то, что выведется в поле для ввода текста по умолчанию. Также обязателен для заполнения, поскольку если его не задать, то это может привести к ошибкам в некоторых браузерах. Если же вы хотите оставить поле ввода информации пустым, то просто задайте prompt следующим образом:

Маленький пример использования prompt:

Обычно данная команда используется для сбора данных у пользователей, которые необходимы скрипту для продолжения дальнейшей работы.

confirm

Также представляет собой модальное окно. Как не сложно догадаться из названия используется обычно для согласования чего-либо с пользователем.

Для того и заточена – для взаимодействия предоставляет пользователю кнопки OK и CANCEL, которые возвращают скрипту булевы значения true и false соответственно.

По синтаксису не отличается от alert.

Мы не можем влиять на оформление модального окна, выводящего эти команды.Это с одной стороны не позволяет адаптировать вывод сообщений под дизайн сайта, с другой стороны делает эти команды невероятно простыми, благодаря чему они и заслужили такую популярность среди веб-разработчиков.

Способов получить информацию от пользователей проще, чем искользование команд alert, prompt, confirm просто не существует.

JavaScript — Методы alert, prompt и confirm

На этом уроке мы познакомимся с методами объекта window : alert() , prompt() и confirm() .

Метод alert()

Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой «ОК». Оно может использоваться для того чтобы донести до пользователя важную информацию.

Метод alert() имеет один обязательный параметр — это текст сообщения, которое отображается в диалоговом окне. Данный метод в результате своего выполнения ни чего не возвращает.

Метод confirm()

Данный метод имеет один параметр — это текст сообщения, которое будет выведено в диалоговое окно.

Метод confirm() в качестве результата ( resultConfirm ) своего выполнения возвращает одно из двух значений:

  • true , если пользователь нажал «ОК»;
  • false , если пользователь нажал «Отмена» или закрыл его.

Например, выведем в элемент р с id=»resultConfirm» результат нажатия пользователем на кнопку «ОК» в диалоговом окне:

Метод prompt()

Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками «ОК» и «Отмена». Оно предназначено для того, чтобы запросить данные у пользователя.

Данный метод имеет два параметра:

  • сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором «говорится», какие данные должен ввести пользователь в текстовое поле;
  • второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.

В зависимости от действий пользователя метод prompt() может возвращать следующие данные:

  • текстовое значение — если в поле ввода содержатся данные и пользователь нажал «ОК»;
  • пустая строка — если в поле ввода не содержатся данные и пользователь нажал «ОК»;
  • null — если пользователь нажал «Отмена» или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.

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

Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id=»nameUser» :

Например, попросим пользователя угадать число 8:

Примеры prompt, alert и confirm в JS

У браузеров есть замечательная опция — возможность взаимодействия с пользователем, через диалоговые (модальные) окна на JS. Достигается это с помощью встроенных в браузер функций: alert, prompt и confirm, каждую из которых, мы сегодня и рассмотрим.

Функция alert в JS

Функция alert запускает в браузере окно с текстом и кнопкой для подтверждения. Пока окно висит в браузере, выполнение скриптов приостанавливается, до тех пор, пока пользователь не подтвердит, нажав на кнопку ‘OK’, что ознакомился с выведенной в окне информацией.

alert(«Мы больше не работаем в выходные!»);

В передаваемых параметрах, строку можно склеивать с переменными. Вместо ‘x’, подставится значение переменной, а оператор (+) склеит строки с переменной.

let x = 9;
alert(«Вы получите свой товар в » + x + » часов»);

Функция prompt в JS

Функция prompt — самая крутая среди трёх рассматриваемых. Она позволяет запрашивать у посетителя данные и оперировать ими.

let firstName = prompt(‘Как Вас зовут?’);
alert(«Добро пожаловать » + firstName);

Prompt показывает окно с полем для ввода запрашиваемых данных от пользователя и две кнопками (‘OK’ и ‘Отмена’). Если пользователь введет имя и нажмет ‘OK’, то введенное им имя присвоится переменной name. Тогда появится следующее окно, где мы приветствуем пользователя, обратившись к нему по имени. Возможен и другой вариант развития событий, если была нажата кнопка ‘Отмена’, то скрипт вернет null.

Функция prompt может принимать два параметра, вторым параметром устанавливается дефолтное значение в поле окна.

let age = prompt(‘Подтвердите, что вы совершеннолетний! Укажите ваш возраст!’, 18);
alert(«Вам есть «+ age + » заходите!»);

Цифра 18 автоматически выводится в поле ввода, которую можно изменить или оставить как есть.

Загадайте пользователю загадку и используя конструкцию if-else, сообщите ему правильно ли он ответил.

let user_otvet = prompt(«Два конца, два кольца. Посредине гвоздик.»);
if(user_otvet == «ножницы») <
alert(«Ответ верный!»); // инструкция 1
> else <
alert(«Ответ неверный!»); // инструкция 2
>

Зададим условие: Если в переменную попадет слово ножницы, то выполнится инструкция 1 и пользователь увидит окно «Ответ верный!»

Если пользователь введет какое-то другое слово, то программа перейдет к блоку else и выполнится инструкция 2. Выведется сообщение — «Ответ неверный!»

Функция confirm в JS

Функция confirm запускает окно с текстом и кнопками: ‘OK’ и ‘Отмена’.

let sendMail = confirm(«Ты отправил письмо?»);
alert( sendMail );

В случае нажатия ‘OK’, возвращает в alert окне true, в случае отмены — false.

Заключение

Все эти три функции взаимодействуют с пользователем. Функция alert не оставляет пользователю выбора, ему показывается только одна кнопка и ожидается клик по ней. Функция confirm предоставляет пользователю выбор между двумя кнопками. Функция prompt просит ввести данные и возвращает эти данные, если нажата кнопка ‘OK’. А в случае отмены, возвращает null.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Системные диалоговые окна JavaScript

    В этом уроке мы разберемся, как выводить диалоговые окна, позволяющие выводить короткие сообщения. Если вы пишете программу на JavaScript, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alert(), prompt() и confirm(). Каждое из этих диалоговых окон является синхронным и модальным, то есть выполнение кода приостанавливается на время показа такого окна и возобновляется после его закрытия.

    Метод alert()

    Метод alert() позволяет выводить диалоговое окно с заданным сообщением и кнопкой OK . Синтаксис соответствующего выражения имеет следующий вид:

    Диалоговые окна оповещений обычно применяют, если нужно уведомить пользователя о чем-то, что он не контролирует, например об ошибке. В простейшем случае текст предупреждения, заключенный в двойные или одинарные кавычки, вводится внутри круглых скобок. Диалоговое окно, выведенное на экран методом alert() , можно убрать, щелкнув на кнопке OK . До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Методу alert() передается только одна строка — отображаемая. Чтобы отобразить многострочное сообщение, разделяйте строки символом n :

    Окно предупреждения генерируется самим браузером, поэтому внешний вид окна в различных браузерах может несколько различаться.

    Примечание: Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными.

    На заметку: JavaScript-программисты часто вставляют вызов метода alert() в программный код с целью диагностики возникающих проблем.

    Метод confirm()

    Метод confirm() позволяет вывести диалоговое окно с сообщением и двумя кнопками — OK и Cancel (Отмена), благодаря чему пользователь может подтвердить или отменить некоторое действие. В отличие от метода alert() этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Чтобы можно было определить, какую кнопку выбрал пользователь, метод confirm() возвращает true, если был щелчок на кнопке OK , и false, если он щелкнул на кнопке Cancel (Отмена) или закрыл диалоговое окно щелчком на системной кнопке закрытия окна — X .

    Синтаксис применения метода confirm() имеет следующий вид:

    result — это логическое значение (true или false), указывающее, было ли выбрано OK или Cancel (Отмена).

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

    В этом примере оператор if («если») получает условие (confirm(«Вы уверены?»)). Он вычисляет его, и если результат – true (пользователь щелкает на кнопке OK ), то выполняет команду и выводит сообщение: «Я очень рад, что Вы уверены!».
    Блок else («иначе») выполняется если пользователь выбирает кнопку Cancel . При этом выводится оповещение: «Жаль, что Вы не уверены. «.
    Этот шаблонный код часто используется, когда пользователь пытается что-либо удалить либо пкинуть веб-страницу.

    Метод prompt()

    Метод prompt() выводит на экран диалоговое окно, которое запрашивает у пользователя информацию. Вместе с кнопками OK и Cancel (Отмена) оно содержит текстовое поле для ввода данных. В отличие отметодов alert() и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию.

    Синтаксис применения метода prompt имеет следующий вид:

    • result — строка, содержащая текст, введенный пользователем, или значение null .
    • сообщение — строка текста для отображения пользователю (обычно это вопрос). Этот параметр является необязательным и может быть опущен, если в окне подсказки ничего не отображается.
    • значение по умолчанию — строка, которая отображается по умолчанию в поле ввода, обычно второй аргумент оставляют пустым и записывают так — «».

    Если пользователь щелкает на кнопке OK , метод prompt() возвращает значение, введенное в текстовом поле, а если выбирается кнопка Cancel (Отмена) или окно закрывается иным образом, то возвращается null . Вот пример:

    JavaScript :: Ввод-вывод данных

    Модальные окна в JavaScript

    Для взаимодействия с пользователем в JavaScript предусмотрено несколько простейших возможностей в виде диалоговых модальных окон, которые выводятся на экран пользователя при помощи методов alert() , confirm() и prompt() объекта Window (более подробно о понятиях ‘метод’ и ‘объект’ мы поговорим позже).

    Модальное окно – это окно, которое приостанавливает выполнение сценария и дальнейшее взаимодействие со страницей до тех пор, пока оно не будет закрыто пользователем.

    Метод alert()

    С методом alert(), который принимает в качестве аргумента строку, мы уже познакомились в предыдущих пунктах данного параграфа. Метод выводит на экран модальное окно с каким-либо сообщением. При этом выполнение скрипта будет приостановлено до тех пор, пока пользователь не нажмет на кнопку ‘OK’ (см. пример №1).

    Пример №1. Вывод сообщения при помощи метода alert()

    Метод confirm()

    Если необходимо, чтобы пользователь не просто увидел сообщение или вопрос, но и мог как-то на него отреагировать, используется метод confirm() , который дополнительно имеет две кнопки ‘OK’ и ‘Cancel’ (см. пример №2).

    Пример №2. Вывод модального окна при помощи метода confirm()

    В качестве аргумента метод confirm() принимает строку, например, вопрос, на который нужно ответить утвердительно или отрицательно (можно вообще аргумента не передавать, но тогда будет выведено пустое модальное окно без заголовка с двумя вышеуказанными кнопками). Если пользователь нажмет кнопку ‘OK’ , метод вернет логическое значение true , а если воспользуется кнопкой ‘Cancel’ , то будет возвращено логическое значение false (о логических значениях мы поговорим позже, пока же будем понимать их как ‘да’ и ‘нет’ ).

    Метод prompt()

    Иногда возникает необходимость, чтобы пользователь ввел в окне какие-либо данные. Для таких случаев предусмотрен метод prompt() , создающий модальное окно, которое не только выводит сообщение (в виде заголовка этого окна), но также имеет поле для ввода текста и две кнопки ‘OK’ и ‘Cancel’ (см. пример №3).

    Пример №3. Вывод модального окна при помощи метода prompt()

    В качестве аргументов метод prompt() принимает через запятую две строки: первая — служит заголовком окна, а вторая — задает начальное содержимое поля ввода (значение по умолчанию). Если их не указать, то будет выведено модальное окно без заголовка и с пустым полем ввода (запустите пример и попробуйте различные варианты). Далее, если пользователь нажмет кнопку ‘OK’ , то метод вернет значение, которое указано в данный момент в поле ввода (это может быть как введенное пользователем значение, так и значение по умолчанию). Если же пользователь воспользуется кнопкой ‘Cancel’ , то будет возвращено специальное значение null (само значение null мы рассмотрим позже, пока же будем понимать его как ‘пустое значение’ ).

    Из описанных выше методов отдельно хотелось бы обратить внимание на метод alert() , поскольку его мы будем довольно часто использовать при написании кода благодаря его особенности приостанавливать дальнейшее выполнение скрипта (что может быть очень полезным при его отладке). В общем же случае мы не будем использовать данные встроенные методы. В место этого мы будем создавать собственные диалоговые окна нужной нам конфигурации и вида.

    Читать еще:  Таблица символов java
    Ссылка на основную публикацию
    Adblock
    detector