belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

JavaScript >>>

                                            Учебник Задачник

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

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Вывод сообщения при помощи метода alert()</title>
</head>
<body>
	<!-- Используем встроенный сценарий -->
	<script>
		alert('Нажмите "ОК", чтобы продолжить!');
	</script>
		
	<p>
		<dfn>Модальное окно</dfn> – это окно, которое приостанавливает 
		выполнение сценария и <br>дальнейшее взаимодействие со страницей 
		до тех пор, пока оно не будет закрыто пользователем.
	</p>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Вывод модального окна при помощи метода confirm()</title>
</head>
<body>
	<script>
		//Передаем методу в качестве аргумента строку, 
		//а результат присвоим переменной 
		var answer = confirm('Хотите изучить JavaScript?');
		
		//Если окно вернет true, то
		if(answer==true){
			//выведем сообщение,
			alert('Так держать!');
		//иначе
		}else{
			//выведем такое сообщение
			alert('Ну, тогда флаг вам в руки и пока!');
		}
	</script>
</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
	<!-- Сообщаем браузеру кодировку документа -->
	<meta charset="utf-8">	
	<!-- Не забываем про заголовок документа -->
	<title>Вывод модального окна при помощи метода prompt()</title>
</head>
<body>
	<script type="text/javascript">
		
		//Передаем методу 2 аргумента (2 строки), а результат 
		//присвоим переменной (о переменных чуть позже)
		var user =  prompt('Введите ваше имя!', 'Пользователь');
		 
		//Если окно вернет null, то
		if(user==null){
			//выведем  простое сообщение,
			alert('Не хотите, как хотите!');
		//иначе
		}else{
			//Строки в JavaScript можно объединять при помощи плюса
			alert('Приветствуем вас, ' + user + '!');
		}
					
	</script>
</body>
</html>

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

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

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

Контрольные вопросы и задания

  1. Перечислите три основных метода, которые используются в JavaScript для создания модальных окон и взаимодействия с пользователем?
  2. Что представляет собой модальное окно?
  3. Какой из методов alert(), confirm() и prompt() блокирует дальнейшее выполнение скрипта? Принимает в качестве аргумента одну строку? Две строки? Имеет поле для ввода текста? Возвращает логическое значение?

Словарь новых английских слов

confirm [kənˈfəːm] – подтверждать.
prompt [prɒm(p)t] – побуждать, подсказывать.
cancel [ˈkans(ə)l] – отменять, аннулировать.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх