HTML, XHTML и CSS на 100% - Игорь Квинт
Шрифт:
Интервал:
Закладка:
С помощью метода confi rm() также можно отобразить на экране диалоговую панель с вашим сообщением, однако эта панель содержит две кнопки – OK и Отмена. В зависимости от того, какая кнопка будет нажата, метод возвратит значение true или false. Поэтому данный метод часто применяется в сценариях с условиями if…else.
Рассмотрим использование метода confirm() на примере сценария из листинга 10.5.
Листинг 10.5. Использование метода confirm<html>
<head>
<title>Метод confirm()</title>
<script language="JavaScript">
<!– Маскировка сценария
function okno() //функция
{
if (confirm("Вы действительно желаете закрыть окно браузера?") )
{
alert("До свидания!");
window.close();
}
else
{
alert("Tогда оставайтесь");
}
}
// Конец маскировки сценария –>
</script>
</head>
<body onLoad="okno()">
</body>
</html>
Помимо метода confirm(), в сценарии использованы методы alert() и close(). В области заголовка документа определена функция okno(). Она содержит условие и обращается к методу confirm(), который выводит на экран диалоговую панель с запросом на закрытие окна (рис. 10.5).
Рис. 10.5. Окно с запросом, выводимое методом confirm()
Если пользователь нажмет кнопку OK, метод возвратит значение true, а если кнопку Отмена – значение false.
В случае положительного ответа функция okno() вызывает методы alert() и close() для текущего объекта Window. В данном случае таким объектом является окно браузера. Метод close() позволяет закрыть текущее окно браузера, а метод alert() выдаст пользователю сообщение До свидания!. Если же пользователь нажмет кнопку Отмена, то получит окно с сообщением Тогда оставайтесь.
Примечание
Вместо объекта Window в сценарии можно указывать объект Self, так как это синоним текущего окна. Например, self.close().
Если вам необходимо получить от пользователя одну текстовую строку, то можете применить другой метод объекта Window – метод prompt(). Он отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt() возвращает введенную строку.
Рассмотрим пример сценария, вызывающего метод prompt() (листинг 10.6).
Листинг 10.6. Использование метода prompt()<html>
<head>
<title>Метод prompt()</title>
</head>
<body>
<script language="JavaScript">
<!– Маскировка сценария
var name = prompt("Напишите свое имя, пожалуйста","Введите имя")
document.write("Привет, "+name+ ". Спасибо, что зашли.")
// Конец маскировки сценария –>
</script>
</body>
</html>
Сценарий выдает пользователю запрос на ввод его имени (рис. 10.6).
Рис. 10.6. Окно запроса
Имя, которое ввел пользователь в окне запроса, отображается на веб-странице благодаря команде document.write.
Совет
Метод prompt() позволяет сценарию получить от пользователя только одну текстовую строку. Когда необходимо ввести сразу несколько строк, используйте форму, имеющую произвольное количество полей и кнопку завершения ввода с обработкой события onClick. Когда пользователь нажмет эту кнопку, обработчик события сможет извлечь из полей формы введенные данные.
Ранее мы рассматривали пример закрытия окна браузера с использованием метода close(). С помощью метода open() в сценарии JavaScript можно открыть новое окно браузера и загрузить в него HTML-документ или изображение для просмотра.
Синтаксис команды с использованием метода open() следующий: ореп('адрес URL', 'имя окна', сопйд='параметр 1, параметр 2, параметр 3…., параметр n').
Первый параметр метода open() задает URL-адрес HTML-документа, предназначенный для загрузки в новое окно. Например, data.html. Если загружаемая HTML-страница располагается на другом сервере, то добавьте http:// и полный адрес страницы в Интернете. Например, http://www.mysite.ru/download/javascript.html.
Второй параметр в синтаксисе метода open() определяет имя окна для использования в атрибуте target элемента A или FORM. Вы также можете указать его как пустую строку вида "". Если вам нужно, чтобы страница загружалась в маленьком окне, то данный параметр должен иметь значение joe. Необходимо будет указать joe и после атрибута target.
Параметр config показывает, что следующие атрибуты относятся к конфигурации нового окна и определяют его внешний вид.
• width – ширина окна в пикселах.
• height – высота окна в пикселах.
• toolbar – если параметр имеет значение yes или 1, окно снабжается стандартной панелью инструментов. Если же значение этого параметра равно no, то панель инструментов в новом окне не отображается.
• location – параметр определяет, будет ли отображаться поле ввода адреса HTML-документа (адресная строка).
• status – отображение строки состояния.
• menubar – отображение строки меню.
• scrollbars – отображение полос прокрутки.
• resizable – если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна.
Все атрибуты параметра config перечисляются через запятую без пробелов и заключаются в одинарные кавычки, поскольку являются подкомандами.
Примечание
Помните, что пробел для браузера означает конец команды.
Теперь рассмотрим примеры сценариев, использующих метод open() (листинги 10.7 и 10.8).
Листинг 10.7. Файл okno.html<html>
<head>
<title>Метод open()</title>
</head>
<body>
<script language="JavaScript">
<!– Маскировка сценария
window.open('okno2.html', 'joe',config='height=250,width=300,toolbar= no,menubar=no,scrollbars=no,resizable=yes,location=no,status=yes')
window.name="main window"
// Конец маскировки сценария –>
</script>
</body>
</html>
Листинг 10.8. Файл okno2.html<html>
<head>
<title>Метод open()</title>
</head>
<body>
<a href="http://www.ya.ru" TARGET="main window">Yandex</a>
<p><a href="" onClick="window.close">Щелкните, чтобы закрыть</a></p>
</body>
</html>
Сценарий в файле okno.html открывает документ okno2. html в новом маленьком окне браузера (рис. 10.7).
Рис. 10.7. Новое окно браузера
Это окно имеет размеры 300 х 250 пикселов, в нем не отображаются меню, панель инструментов, адресная строка и полоса прокрутки. За это отвечают значения атрибутов параметра config, равные no. В новом окне отображается только строка состояния, что определяется атрибутом status=yes. Кроме того, пользователь может изменять размеры нового окна. За это отвечает атрибут resizable=yes.
Обратите внимание на строку window.name="main window". Здесь использовано свойство name объекта Window, а main window – это имя главного (большого) окна. Вместо window.name можно написать self.name. Результат будет тот же самый, поскольку window и self – синонимы.
В новое окно загружается документ okno2.html, содержащий две ссылки. Одна ссылка загружает главную страницу сайта поисковой системы «Яндекс» в большом окне браузера, имя которому main window. Этого результата мы добились благодаря команде target="main window". Если необходимо, чтобы страница загружалась в маленьком окне, просто напишите j oe вместо main window. Другая ссылка позволяет закрыть маленькое окно благодаря обработчику события onCli ck и методу close(): onClick="window.close".
Совет
При открытии новых окон ставьте сценарий ближе к концу HTML-документа. Причина проста: сначала загрузится веб-страница, а потом всплывет окошко. Если команда стоит в начале HTML-документа, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Он может закрыть новое окно, не успев им воспользоваться.
Рассмотрим следующий метод объекта Window – setTimeout(). С его помощью вы можете запрограммировать компьютер на выполнение определенных команд по истечении некоторого времени.
При использовании описываемого метода применяется следующий синтаксис: setTimeout ("cmd", timeout). Когда пройдет время, заданное параметром timeout (в миллисекундах), запускается команда JavaScript, определенная параметром cmd.
Пример сценария, содержащего метод setTimeout(), приведен в листинге 10.9.
Листинг 10.9. Использование метода setTimeout<html>
<head>
<title>Метод setTimeout</title>
<script language="JavaScript">
<!– Маскировка сценария
function timer() //функция
{
idTimer=window.setTimeout("alert('Время истекло!')", 3000);
}
// Конец маскировки сценария –>
</script>
</head>
<body>
<form> //форма
<input type="button" value="Timer" onClick="timer()">
</form>
</body>
</html>
Данный HTML-документ содержит сценарий и форму с кнопкой Timer. При нажатии кнопки открывается окно Alert с задержкой в три секунды (рис. 10.8).
Рис. 10.8. Окно Alert с сообщением
Здесь setTimeout() – это метод объекта Window. Он определяет интервал времени в 3000 миллисекунд (3 секунды) и команду, которая должна быть выполнена по истечении этого времени. В данном случае это вызов окна с сообщением с помощью метода alert: «alert(Время истекло!)». Обратите внимание, что код на JavaScript должен быть обязательно заключен в кавычки, а время указывается в миллисекундах и без кавычек.
