Категории
Меню
Лучшие книги » Компьютеры и Интернет » Интернет » HTML, XHTML и CSS на 100% - Игорь Квинт

HTML, XHTML и CSS на 100% - Игорь Квинт

Читать онлайн HTML, XHTML и CSS на 100% - Игорь Квинт

Шрифт:

-
+

Интервал:

-
+

Закладка:

Сделать
1 ... 39 40 41 42 43 44 45 46 47 ... 59
Перейти на страницу:

С помощью метода 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 должен быть обязательно заключен в кавычки, а время указывается в миллисекундах и без кавычек.

1 ... 39 40 41 42 43 44 45 46 47 ... 59
Перейти на страницу:
Пожаловаться на ошибку
Похожие материалы
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Как раскрутить и разрекламировать Web-сайт в сети Интернет - Александр Загуменов
27.12.2023 - 21:25
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий Библиотека книг бесплатно – читать онлайн! | BibliotekaOnline.com
Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий
26.05.2024 - 09:00
Комментарии

Copyright @ bibliotekaonline.com 2024 - 2026. Все права защищены.


Почта для связи: [email protected]