На этом уроке мы познакомимся с методами объекта window: alert() , prompt() и confirm() .
Метод alert()Метод alert() предназначен для вывода на экран пользователя предупреждающего диалогового окна с указанным сообщением и кнопкой "ОК". Оно может использоваться для того чтобы донести до пользователя важную информацию.
window.alert(Параметр_1);
Метод alert() имеет один обязательный параметр - это текст сообщения, которое отображается в диалоговом окне. Данный метод в результате своего выполнения ни чего не возвращает.
Например, выведем для посетителя сайта при нажатии на ссылку предупреждающее диалоговое окно: Перейти на сайт
Метод confirm() Метод confirm() объекта window предназначен для вывода на экран пользователя диалогового окна с указанным сообщением и кнопками "ОК" и "Отмена". Окно с подтверждением можно использовать, чтобы запросить у пользователя разрешение на выполнение того или иного действия.var resultConfirm = confirm(Параметр_1);
Данный метод имеет один параметр - это текст сообщения, которое будет выведено в диалоговое окно.
Метод confirm() в качестве результата (resultConfirm) своего выполнения возвращает одно из двух значений:
- true , если пользователь нажал "ОК";
- false , если пользователь нажал "Отмена" или закрыл его.
Например, выведем в элемент р с id="resultConfirm" результат нажатия пользователем на кнопку "ОК" в диалоговом окне:
var resultActionUser = confirm("Пользователь, пожалуйста нажми на кнопку ОК."); if (resultActionUser) { document.getElementById("resultConfirm").innerHTML = "Пользователь, спасибо что Вы нажали на кнопку ОК"; } else { document.getElementById("resultConfirm").innerHTML = "Пользователь, мы разочаровались в Вашем ответе"; }
Метод prompt()Метод prompt() предназначен для вывода на экран пользователя диалогового окна с сообщением, текстовым полем для ввода данных и кнопками "ОК" и "Отмена". Оно предназначено для того, чтобы запросить данные у пользователя.
var resultPrompt = prompt(Параметр_1, Параметр_2);
Данный метод имеет два параметра:
- сообщение, которое будет выведено в диалоговом окне. Данный параметр является обязательным и содержит сообщение, в котором "говорится", какие данные должен ввести пользователь в текстовое поле;
- второй параметр является необязательным и может использоваться для указания начального значения, которое будет выведено в поле ввода диалогового окна при открытии.
В зависимости от действий пользователя метод prompt() может возвращать следующие данные:
- текстовое значение - если в поле ввода содержатся данные и пользователь нажал "ОК";
- пустая строка - если в поле ввода не содержатся данные и пользователь нажал "ОК";
- null - если пользователь нажал "Отмена" или закрыл это окно, при этом не важно какие данные были введены в текстовое поле.
Примечание: диалоговое окно, которое появляется в результате выполнения одного из методов alert() , confirm() или prompt() является модальным, т.е. оно блокирует доступ пользователя к родительскому приложению (браузеру) до тех пор, пока пользователь не закроет это диалоговое окно.
Например, запросим у пользователя имя и выведем в зависимости от результата текст в элемент c id="nameUser" :
var nameUser = prompt ("Введите своё имя?"); if (nameUser) { document.getElementById("nameUser").innerHTML = nameUser +", добро пожаловать на сайт!"; } else { document.getElementById("nameUser").innerHTML = "Гость, добро пожаловать на сайт!"; }
Например, попросим пользователя угадать число 8:
function guessNumber() { var findNumber = prompt ("Угадай число от 1 до 10?"); switch (findNumber) { case "6": alert("Уже теплее!"); break; case "7": alert("Горячо!"); break; case "8": alert("Ты угадал! Это число 8."); break; case "9": alert("Уже теплее!"); break; default: alert("Холодно!"); break; } } ... Угадай число
Организация диалога с посетителем веб-ресурса может быть исполнена различными способами, из которых использование функции JavaScript alert() является самым простым и быстрым вариантом. Особенно хорош этот вариант для целей тестирования, но на многих ресурсах применяется как естественный функционал.
Функция JavaScript alert() позволяет получить утвердительный ответ. По сути, важен не ответ, а сам факт вывода информации. Причём веб-ресурс перестаёт функционировать до тех пор, пока пользователь не откликнется. Ответ по алерту всегда один - это ответ!
В целях отладки JavaScript alert() - идеальное средство, которое позволяет быстро получить актуальную информацию, принять решение и продолжить работу. Но в целях обычного функционирования сайта у него есть также изрядное количество преимуществ.
Фиксация внимания посетителя"Алерт" - как в жизни, формирует событие, мимо которого никак не пройти. Но это событие может и не произойти .
Редкий разработчик знает об этом обстоятельстве и мучительно долго отлаживает свой сайт в его клиентской части. При этом мало кто из разработчиков не знает: найти ошибку в клиенте, то есть в браузере, часто настолько затруднительно, что:
- бесцельно уходят часы драгоценного времени;
- затрачиваются неимоверные трансформации кода;
- перелопачивается масса скриптов, на словах, достаётся и браузеру, и серверу.
А результата все нет. Ни дебаггеры не помогают, ни слова, ни встроенные во всякий браузер инструменты для отладки. Между тем ларчик всегда просто открывается - важен правильный ключик.
Простое правило правильного кодаПрежде всего, куки стали самой востребованной составляющей современного сайта. Следует никогда не забывать:
- JavaScript alert & document cookie
- «здесь и сейчас» & «вообще или когда-нибудь».
Куки - это классная возможность помнить в недрах браузера о каждом клиенте, но не следует придавать этому значения в текущем сеансе. Главная забота куки: остаться в «памяти» браузера в том содержании, которое она имела на момент ухода посетителя.
Во всем остальном код скрипта в недрах браузера зависит только от самого себя и событий, которые он обрабатывает.
В данном контексте, а контекст этот здесь идеален, код не может не работать, если он написан правильно. Это идеальное правило для правильного кода. Если браузер показывает чистый экран или что-то не так делает, есть основания предполагать наличие ошибки.
Проще простого применить:
- JavaScript alert("До сих пор было все правильно!").
Самый лучший дебагер или отладчик - событие, которое обязано произойти, но не происходит .
Перемещая эту конструкцию вниз от нуля до досадного криминала в коде можно обнаружить то место, после которого она не работает. Ошибка будет найдена. JavaScript alert() - это модальное окно . Его обойти никак нельзя, и дальше ничего не будет, пока разработчик/посетитель не закроет данное окно.
Если окно не выскакивает, значит, либо оно обозначено в коде неверно, либо все, что идёт до него, содержит ошибку.
Сложная ситуация, в которой alert JavaScript вроде как не срабатываетВ основном это касается AJAX алгоритмов обмена информацией с сервером. Здесь не всегда допустимо применять классические средства отладки, а когда на стороне клиента действует многоуровневая система объектов, то отладка вообще трансформируется в сознание разработчика и никакой дебаггер не в силах помочь.
Лучший вариант алерта в процедуре общения с сервером - это див (div), в который помещается протокол общения с сервером по методу innerHTML - всегда будет ясно, на каком этапе происходит проблема.
Статический див, который всегда виден на странице - это не модальное окно от JavaScript alert. Window может не появиться, и причин для того может быть множество, причем оформленных синтаксически правильно. Язык браузера отличается предельно спокойным нравом и никогда не предпримет каких-либо действий, если чего-то не разобрал и не понял.
Статичность любого тега HTML - хороший фактор. Убрать весь код и добавлять его порциями, пока ошибка вновь не возникнет, - не самая быстрая технология для отладки. Писать правильно - совет популярный, востребованный, но не практичный.
Язык браузера - работает по событиям, его основная забота - не последовательный код, а исполнение функциональности, назначенной на теги страницы, и обработка событий.
Дополнительное правило к простому правилуЕсли окно от JavaScript alert("До сих пор все написано правильно") не появилось в браузере, значит, синтаксис до места, где эта конструкция записана, не вызывает у браузера сомнений и исполнен правильно.
У логики современного стиля письма есть существенный недостаток. Все файлы страницы сливаются воедино (со своей сути и типам) в одно целое, и после этого строится DOM. Порядок соединения файлов часто имеет существенное значение.
Лучше всего, когда разработчик не придает значения событийному принципу организации исполнения функций, назначенных на события, а располагает все функции в последовательности их применения и назначения на теги и события страницы.
Порядок всегда важнее всего. С остальным JavaScript разберется сам: что и когда вызывать. Современное программирование вообще и в контексте любого метода, любого высокоорганизованного объектно-ориентированного подхода в частности - всегда последовательно. объединяются всегда тоже последовательно по мере описания.
Если что-то не происходит, значит: не где-то что-то не так, а только перед этим местом.
И снова я приветствую Вас в очередной теме посвященной языку JavaScript
, в которой мы разберем методы alert, prompt,
confrim
. Данные методы являются встроенными в язык Javascript
и помогают нам взаимодействовать с пользователем.
Alert
выводит на экран браузера окно с определенной информацией, которое приостанавливает скрипт до момента нажатия пользователем кнопки ОК.
Prompt
, как правило, выводит окно, в котором пользователю задают вопрос, на который он должен ответить в определенном текстовом поле, после чего нажать
клавишу ОК. Также пользователь может ничего не вводить, нажав клавишу отмена.
Confirm
также выводит окно, в котором пользователь уже не может вводить что-либо в текстовое поле, а может лишь нажать кнопку
ОК или отмена.
А теперь после небольшого вступления перейдем к рассмотрению всего вышесказанного на практике.
alert, prompt, confirm
alert("Привет, дорогой пользователь!"
);
var
nameUser
= prompt("Ваше имя?"
, "name"
);
var
userAnswer
= confirm("Вы действительно хотите покинуть сайт?"
);
В результате при обновлении страницы браузера у нас появится окно с приветствием пользователя. После нажатия кнопки ОК,
появится следующее окно, где будут спрашивать ваше имя. В данном методе есть два параметра, первый является обязательным и
отвечает за заголовок, который будет выводиться, в нашем случае это вопрос имени пользователя. И второй параметр отвечает за значение,
которое будет выводиться по умолчанию в текстовом поле. Если Вы введете ваше имя и нажмете кнопку ОК, то ваше имя поместиться в переменную
nameUser
. Если вы нажмете кнопку отмена, то в переменную будет записан null
.
И напоследок окно, которое спрашивает у пользователя, хочет он покинуть наш сайт или нет. В случае согласия в переменную будет помещено булево
значение true
, и при отказе false
соответственно. Вот и все, что следует знать о данных методах, до встречи в следующих уроках!