Window prompt in javascript

Взаимодействие: alert, prompt, confirm

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

alert

С этой функцией мы уже знакомы. Она показывает сообщение и ждёт, пока пользователь нажмёт кнопку «ОК».

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

prompt

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

result = prompt(title, [default]);

Этот код отобразит модальное окно с текстом, полем для ввода текста и кнопками OK/Отмена.

title Текст для отображения в окне. default Необязательный второй параметр, который устанавливает начальное значение в поле для текста в окне.

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

Пользователь может напечатать что-либо в поле ввода и нажать OK. Введённый текст будет присвоен переменной result . Пользователь также может отменить ввод нажатием на кнопку «Отмена» или нажав на клавишу Esc . В этом случае значением result станет null .

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

let age = prompt('Сколько тебе лет?', 100); alert(`Тебе $ лет!`); // Тебе 100 лет!

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

Запустите код в Internet Explorer и посмотрите на результат:

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

confirm

Функция confirm отображает модальное окно с текстом вопроса question и двумя кнопками: OK и Отмена.

Результат – true , если нажата кнопка OK. В других случаях – false .

let isBoss = confirm("Ты здесь главный?"); alert( isBoss ); // true, если нажата OK

Итого

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

alert показывает сообщение. prompt показывает сообщение и запрашивает ввод текста от пользователя. Возвращает напечатанный в поле ввода текст или null , если была нажата кнопка «Отмена» или Esc с клавиатуры. confirm показывает сообщение и ждёт, пока пользователь нажмёт OK или Отмена. Возвращает true , если нажата OK, и false , если нажата кнопка «Отмена» или Esc с клавиатуры.

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

На все указанные методы распространяются два ограничения:

1. Расположение окон определяется браузером. Обычно окна находятся в центре.
2. Визуальное отображение окон зависит от браузера, и мы не можем изменить их вид.

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

Источник

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 ( ) с самостоятельно созданным диалоговым окном:

Источник

JavaScript Window.prompt() Method

The JavaScript window.prompt() is a built-in function that is used to display a dialog box that asks the user to input some text. This pop-up box will appear and takes user input before entering the web page. It waits until the user enters any value in the text box or we can also cancel the dialog box. After entering the input, the web page loads fully. We can also use the prompt() method individually, without the «window» prefix. The user needs to click on «OK» or «Cancel» to cancel the prompt box.

Syntax of JavaScript Window.prompt() Method

The syntax of the prompt() in the javascript method is as follow:

In the above example of prompt() in javascript, text value is the text that we need to display in our dialog box. And the default is the string that will contain the value entered by the user as input.

Parameters of JavaScript Window.prompt() method

Following are the parameters of the window.prompt() method:

• message: it is used to define the text message that we want to display in our dialog box. This can be left empty if we do not want to display any text in the dialog box. «Message» is an optional parameter.
• default is a string value that contains the default input text. It is also an optional parameter. If this parameter is not provided, then the default value will be «undefined«. It is also an optional parameter.

Return Value of JavaScript Window.prompt() Method

The return value of the window.prompt() method is a «string». The value entered by the user will be the default value of this method. If left empty, the default value will be «null».

Exceptions of JavaScript Window.prompt() Method

There are some exceptions that we need to take care of during the use of the window.prompt() method.

• When the prompt box displays a pop-up window before landing on the main page, the user is restricted from seeing the contents of the main page because dialog boxes are modal windows. (Modal windows are those windows that require some action before entering the main page)
• Sometimes when the user input is not a string, we need to perform casting of the input. suppose the user input is a number, then syntax will be like this-

• After chrome version 46.0, prompt() method is prevented from being done inside an «iframe«. This can be used only if there is an allow-modal value assigned to the method’s sandbox attribute.
• It may possible that the dialog box will not appear when the user is switching the tabs or it will not wait for the user to do some activity.

Example(simple and short example)

Let us see an example to understand the window.prompt() method.

Explanation: In the above example of prompt() in the javascript method, we have shown a simple prompt where a popup will come on the screen and asks the user to enter the name to proceed further. If not entered any value, the default text «name» will be accepted as user input.

How does JavaScript Window.prompt() Method work?

The window.prompt() method is used to show a dialog box before landing on the main web page. The «prompt() syntax is used inside the ‘script’ element of an HTML page. When the code will sun, a dialog box appears as a ‘pop-up’ on the screen. The user needs to enter some text or we can simply click the ‘OK’ or ‘Cancel’ button. The dialog prompt will not allow us to see the main page until we do any activity on the dialog box. The dialog prompt waits for the user to input the value or cancel it.

More Examples

Let us see some more examples for a better understanding of window.prompt() methods:

Example 1. Given below is an example of prompt() in javascriptmethod where two buttons are used and a text field to enter some text by the user.

Example 2. Here is another example of a window.prompt() method where some HTML customization has been applied.

Supported Browser

Following are the browsers that support the window.prompt() method:

Browser Name	Supported on versions
Internet Explorer	version >= 6(Aug 2001)
Mozila Firefox	version >= 2(Oct 2006)
Microsoft Edge	version >= 12(Jul 2015)
Google Chrome	version >= 4(Jan 2010)
Safari	version >= 3.1(Mar 2008)

Conclusion:

• window.prompt() method in JavaScript is used to display a dialog box that prompts the user to do some activity like entering a value, or pressing the «OK», or «Cancel» button.
• If users do not do this, they will not be allowed to see the contents of the main page.
• In prompt() in the javascript method we can also store the entered value in a variable and also write them on the web page as per need.
• The prompt() method can also take a number input, but we need to do typecast of the data-type of input.
• The prompt() in the javascript method is written inside the script element of the HTML page.
• The default value in this method is an optional parameter.

Источник