3 функции JavaScript: Confirm, Prompt и Alert.

К оглавлению

Часть HTML

HTML структура данного урока будет очень простой, всего 3 кнопки. 
<HTML>
	<HEAD>
		<TITLE>3 функции JavaScript: Confirm, Prompt и Alert.</TITLE>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<script src="js/jquery-2.1.3.min.js"></script>
		<script src="js/myscript.js"></script>
	</HEAD>
	<BODY>
		<!--А вот и 3 наших кнопки-->
		<input type="button" id="alert" value="Сообщение">
		<input type="button" id="confirm" value="Подтверждение">
		<input type="button" id="prompt" value="Вопрос">
	</BODY>
</HTML>

У тэга <input> есть еще несколько типов, с ними мы познакомимся позже, но если очень интересно, можно почитать на сайте htmlbook.ru.

Часть JQuery


Сделаем как можно проще, для каждой кнопки свою обработку событий. 
$(document).ready(function() {
	// Кнопка отправки сообщения пользователю, при нажатии
	$(document).on("click", "#alert", function() {
		alert("Вы нажали на кнопку функции alert!");
	});
	// Кнопка подтверждения запроса
	$(document).on("click", "#confirm", function() {
		// Это условие, которое означает следующее:
		// Если функция confirm возвращает положительное значение
		// пользователь нажал "Ок", то выполнить код внутри условия "if"
		if(confirm("Вы нажимали кнопку?")) {
			alert("Вы согласились!");
		} else {
			// Здесь указывается код, если условие "if" оказалось неверным
			// Пользователь нажал "Нет"
			alert("Вы отказались");
		}
	});
	$(document).on("click", "#prompt", function() {
		// Вводим переменную в которой будет храниться значение,
		// которое пользователь ввел при запуске функции prompt()
		var answer = prompt("Введите значение");
		// Вывод значения из переменной
		alert(answer);
	});
});


В итоге мы получим 3 такие кнопочки:


Скачать коды урока