Ввод/вывод данных JavaScript

В JavaScript реализовано 3 метода, позволяющие выводить пользователю диалоговые окна: alert, confirm, prompt.

Особенности методов alert, confirm, prompt: Конкретное место, где выводится модальное окно – обычно это центр браузера, и внешний вид окна выбирает браузер. Разработчик не может на это влиять. Нельзя вывести окно в своем, особо красивом, дизайне. Но это самый простой способ вывести сообщение или получить информацию от посетителя. Поэтому их используют в тех случаях, когда простота важна, а всякие «красивости» особой роли не играют.

Краткое резюме:

alert - выводит сообщение.
prompt - выводит сообщение и ждёт, пока пользователь введёт текст, а затем возвращает введённое значение или null, если ввод отменён (CANCEL/Esc).
confirm - выводит сообщение и ждёт, пока пользователь нажмёт «OK» или «CANCEL» и возвращает true/false.

Диалоговое окно метод alert

Метод alert используется для вывода простейшего диалогового окна, содержащего текст сообщения и единственную кнопку "Ok". Формат вызова данной функции:

alert("Текст сообщения");

Диалоговое окно метод confirm

Функция confirm позволяет вывести пользователю диалоговое окно, содержащее текст сообщения и кнопки "Ok" и "Cancel". Используется в тех случаях, когда пользователь должен сделать выбор. Формат вызова данной функции:

var result=confirm("Текст вопроса");
//условная конструкция для проверки результата 
if(result) { 
    /* действия */ 
} else {
    /* действия */ 
}

Функция confirm возвращает логическое значение в зависимости от нажатой пользователем кнопки: "Ok" соответствует значению true, "Cancel" - значению false. Как правило, результат работы функции присваивают переменной, для дальнейшего анализа, как это показано в примере выше.

Диалоговое окно метод prompt

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

var str=prompt("Запрос на ввод данных", значение_по_умолчанию);

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

parseInt("строка") - преобразует строку в целое число; 
parseFloat("строка") - преобразует строку в число с плавающей точкой.

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

<html>
    <body>
        <script type="text/javascript"> 
	var number, summ=0;
	do
	{
		number=parseInt(prompt("Введите число:", 10));
		summ+=number;
	}
	while(confirm("Продолжим?"))
	alert("Сумма чисел: "+summ);
        </script>
    </body>
</html>

При нажатии на кнопку появляется форма для ввода. Если пользователь ничего не ввел - действие по умолчанию отменяется.

<input type="submit" name="submit" value="payment" style="margin-left:30px" onclick="            
var mcount=prompt('Amount of payment', 10);
if (mcount) alert('You enter: '+mcount);
else return false;
"/>

Востребованы Frontend разработчики

Получите программу курса Frontend -разработчик на e-mail JavaScript, ReactJS, Node.js.