Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Теперь рассмотрим исходный текст сценария JavaScript, встроенного в документ HTML (листинг 2.6).
Листинг 2.6. Файл chapter2/Password/Password. html
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Ввод пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window. setTimeout(cmd, 10000);
}
function NoAccess()
{
document. write("<H1>Доступ запрещен</H1>");
document. write("<P>Попробуйте в следующий раз!");
}
function CheckPassowd()
{
var szPwd="";
szPwd=document. pwdForm. pwd. value;
if(szPwd=="password")
{
clearTimeout(idTimer);
document. write("<H1>Доступ разрешен</H1>");
document. write("<P>Наш сервер: ");
document. write(
'<A HREF="http://www. *****/~frolov/index. html"');
document. write( '>http://www. *****/~frolov/index. html</A>');
}
else
{
document. write("<H1>Доступ запрещен</H1>");
document. write("<P>Попробуйте в следующий раз!");
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="StartMyTimer();">
<H1>Доступ ограничен</H1>
<P>Мы ограничили доступ к нашему серверу :)
<P>Вы должны ввести пароль (слово password)
в течении 10 секунд.
<HR>
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
<HR>
</BODY>
</HTML>
Прежде всего обратим ваше внимание на заголовок документа HTML.
В первой странице этого заголовка мы указали с помощью оператора <META> номер кодовой страницы 1251, соответствующей кириллице в Windows:
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
Без этой строки наш документ отображался неправильно браузером Microsoft Internet Explorer версии 4.0.
В первых строках сценария, расположенного в заголовке документа, мы объявили переменную idTimer и определили функцию StartMyTimer:
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window. setTimeout(cmd, 10000);
}
Функция StartMyTimer запускает таймер, сохраняя его идентификатор в глобальной переменной idTimer. Для запуска таймера мы применили знакомый вам метод с именем setTimeout.
Когда таймер сработает (а это произойдет через 10 секунд после загрузки нашего документа HTML в окно браузера), будет вызвана функция NoAccess. Эта функция выводит в окно браузера сообщение о запрещении доступа к странице.
Для того чтобы функция StartMyTimer запускалась сразу после загрузки документа HTML в окно браузера, мы указали ее имя в параметре onLoad оператора <BODY>, организовав таким образом обработку соответствующего события:
<BODY BGCOLOR=white onLoad="StartMyTimer();">
Итак, если пользователь загрузил документ и просто смотрит на него, через 10 секунд содержимое документа в окне браузера будет перезаписано функцией NoAccess, что иллюстрируется на рис. 2.13.
Для ввода пароля необходимо использовать форму, которая определена в нашем документе HTML следующим образом:
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
Имя формы pwdForm указано в параметре NAME оператора <FORM>. Это имя нам потребуется для извлечения строки пароля из текстового поля, определенного в форме с помощью оператора <INPUT>. Имя этого текстового поля pwd также задается параметром NAME.
Помимо текстового поля, в форме имеется кнопка с надписью “Enter Password”. Для этой кнопки мы определили обработчик события onClick, который вызывается, когда пользователь нажимает мышью на кнопку. Обработчиком в нашем случае является функция CheckPassowd, определенная в нашем сценарии. Эта функция проверяет пароль и, если пароль введен правильно, останавливает таймер, запущенный при загрузке документа HTML.
Как наш сценарий извлекает строку пароля из поля формы?
Это делается следующим образом:
var szPwd="";
szPwd=document. pwdForm. pwd. value;
Здесь мы выполняем ссылку на свойство value объекта pwd, которым является текстовое поле формы (вспомните, что это поле называется pwd). Объект pwd находится внутри формы с именем pwdForm, которая, в свою очередь располагается в документе HTML, загруженным в окно браузера. Этим документом является объект document.
Получив введенную пользователем строку, функция CheckPassowd проверяет ее:
if(szPwd=="password")
{
clearTimeout(idTimer);
. . .
}
Если строка введена правильно, таймер останавливается методом clearTimeout. В качестве параметра этому методу передается идентификатор таймера, полученный от метода setTimeout. При ошибке в документ HTML записывается сообщение о запрещении доступа.
Загрузка документа HTML в окно браузера
В разделе этой главы с названием “Открываем новое окно” мы рассказали вам о том, как сценарий JavaScript может открыть новое окно, загрузив в него документ HTML. Однако часто возникает и другая задача - отобразить новый документ HTML в текущем окне браузера, не создавая новое окно.
Наш следующий сценарий (листинг 2.7) решает как раз эту задачу.
Листинг 2.7. Файл chapter2/JumpTo/JumpTo. html
<HTML>
<HEAD>
<TITLE>Jump to other Web page</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function urlJump()
{
var szNewURL="";
szNewURL=prompt("Enter new URL address:", "http://");
window. location. href=szNewURL;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Jump to other Web page</H1>
<FORM NAME="selectForm">
<P><INPUT TYPE="button" VALUE="Jump"
onClick="urlJump();">
</FORM>
</BODY>
</HTML>
Когда в пользователь нажимает кнопку Jump в форме selectForm (показанной на рис. 2.15), запускается функция urlJump.
Рис. 2.15. Кнопка Jump, предназначенная для перехода к просмотру другой страницы Web
Эта функция вызывает метод prompt, определенный в классе window:
var szNewURL="";
szNewURL=prompt("Enter new URL address:", "http://");
Метод prompt отображает на окне монитора диалоговую панель, предназначенную для ввода текстовой строки. В нашем случае это должна быть строка адреса URL документа HTML, который будет загружен в окно браузера (рис. 2.16).
Рис. 2.16. Диалоговая панель для ввода нового адреса URL
Введенный адрес (на рис. 2.16 мы ввели адрес главной страницы нашего сервера Web) записывается в переменную szNewURL.
Теперь можно переходить к загрузке нового документа в окно браузера.
Когда мы рассказывали об объектах класса window, то говорили, что такие объекты содержат в себе другие объекты. В частности, объект window содержит в себе объект location, описывающий расположение документа HTML, загруженного в окно браузера.
Для того чтобы загрузить в окно новый документ, достаточно изменить содержимое свойства объекта location с именем href:
window. location. href=szNewURL;
Это свойство хранит адрес URL документа. Изменение содержимого свойства href объекта location главного окна браузера приводит к загрузке в это окно нового документа (рис. 2.17).
Рис. 2.17. В главное окно браузера загружен новый документ HTML
Объект document
Специально для работы с документами HTML в языке JavaScript имеется отдельный объект с названием document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В первой главе нашей книги мы уже применяли один из методов объекта document с именем write для записи строки в тело документа HTML.
Когда в 29 томе “Библиотеки системного программиста” мы рассказывали о документах HTML, то говорили, что такие документы состоят из заголовка и тела документа. Заголовок определяется при помощи оператора языка HTML <HEAD>, а тело документа - при помощи оператора <BODY>. Прежде чем мы перейдем к описанию свойств и методов объекта document, рассмотрим назначение отдельных параметров оператора <BODY>.
В общем виде этот оператор выглядит следующим образом:
<BODY
BACKGROUND="Фоновое_изображение"
BGCOLOR="Цвет_фона"
TEXT="Цвет_текста"
LINK="Цвет_непосещенных_ссылок"
ALINK="Цвет_активизированных_ссылок"
VLINK=" Цвет_посещенных_ссылок "
onLoad="Обработчик_события_при_загрузке_документа"
onUnload="Обработчик_события_при_выгрузке_документа">
</BODY>
Описание параметров оператора приведено ниже:
Параметр | Описание |
BACKGROUND | С помощью этого параметра можно указать адрес URL изображения, заполняющего фон тела документа |
BGCOLOR | Параметр BGCOLOR применяется в тех случаях, когда фон документа необходимо раскрасить в какой-либо цвет. Цвет задается в виде "#rrggbb", где константы rr, gg и bb - соответственно, красная, зеленая и голубая компоненты цвета. Значение констант может находиться в диапазоне от 0 до FF (в шестнадцатеричном виде). Цвет может также задаваться символическими константами, такими как red или white |
TEXT | Цвет текста. Задается таким же образом, что и цвет фона BGCOLOR |
LINK | Параметр LINK определяет цвет ссылок, размещенных в документе HTML, и еще не посещенных пользователем |
ALINK | Этот параметр определяет цвет ссылок, выбранных пользователем |
VLINK | Параметр VLINK определяет цвет ссылок, размещенных в документе HTML, которые уже посещались пользователем ранее |
onLoad | С помощью параметра onLoad можно определить обработчик события, который получит управление при загрузке документа в окно браузера |
onUnload | Аналогично предыдущему, однако обработчик события получит управление при удалении документа из окна браузера |
Анализируя свойства объекта document, сценарий JavaScript может определить значения перечисленных выше параметров. Кроме того, сценарию доступны локальные метки, формы и связи документа как элементы соответствующих массивов, а также информация из заголовка документа.
Свойства объекта document
Перечислим свойства объекта document, доступные сценарию JavaScript:
Свойство | Описание |
alinkColor | Содержимое параметра ALINK |
anchors | Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа |
applets | Массив объектов, соответствующих аплетам Java, расположенным в документе HTML |
bgColor | Содержимое параметра BGCOLOR |
cookie | Значение cookie для текущего документа. О том, что это такое, мы расскажем в последней главе нашей книги |
embeds | Массив объектов plug-in, содержащихся в документе HTML |
fgColor | Содержимое параметра TEXT |
forms | Массив, содержащий в виде объектов все формы, расположенные в документе HTML |
images | Массив растровых изображений, включенных в документ |
lastModified | Дата последнего изменения документа HTML |
linkColor | Содержимое параметра LINK |
links | Массив, содержащий все ссылки в документе HTML |
location | Полный адрес URL документа HTML |
referrer | Адрес URL вызывающего документа HTML |
title | Заголовок документа, заданный с помощью оператора <TITLE> |
URL | Полный адрес URL документа HTML |
vlinkColor | Содержимое параметра VLINK |
Объект document может содержать в себе другие объекты, доступные как свойства:
Свойство | Описание |
anchor | Локальная метка, определенная в документе HTML с помощью оператора <A> |
form | Форма, определяемая в документе HTML с помощью оператора <FORM> |
history | Список адресов URL, посещенных пользователем |
link | Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver |
Методы объекта document
Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:
Метод | Описание |
clear | Удаление содержимого документа из окна просмотра |
close | Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока |
open | Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln |
write | Запись в документ произвольной конструкции языка HTML |
writeln | Аналогично предыдущему, но в конце строки добавляется символ новой строки |
Цветовое оформление документа
Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. Сначала мы попробуем динамически изменить цветовое оформление документа HTML, показанного на рис. 2.18.
Рис. 2.18. Документ HTML с цветовым оформлением, измененным при помощи сценария JavaScript
Сценарий изменил пять свойств документа HTML - цвет фона и текста, а также цвета посещенных, не посещенных и выбранных пользователем ссылок (листинг 2.8).
Листинг 2.8. Файл chapter2/ColorLinks/ColorLinks. html
<HTML>
<HEAD>
<TITLE>Color Links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document. bgColor = "#00FF80";
document. fgColor = "#800080";
document. linkColor = "#000000";
document. alinkColor = "#FF0000";
document. vlinkColor = "#4000FF";
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Изменение цветового оформления</H1>
<P>Посетите эти серверы:
<P><A HREF="http://www. *****/~frolov/index. html">Наша домашняя страница</A>
<P><A HREF="http://www. *****">Каталог программ Auramedia</A>
<P><A HREF="http://www. /java/">Страница сервера Microsoft про Java</A>
<P><A HREF="ColorLinks. html#Локальный раздел">Локальный раздел</A>
<HR>
<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
<P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet
</BODY>
</HTML>
Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:
document. bgColor = "#00FF80";
Немного усложнив сценарий, вы можете изменять цвет фона, например, в зависимости от времени суток или от календарной даты. Например, цвет страницы по выходным дням можно сделать праздничным, а по рабочим - деловым. Выбор цифровых констант, определяющих праздничный и деловой цвета в шестнадцатеричном виде, мы оставляем на ваше усмотрение или на усмотрение вашего дизайнера.
Ссылки и метки в документе
Как мы уже рассказывали в 29 томе “Библиотеки системного программиста” с названием “Сервер Web своими руками”, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать оператор <A>. В общем виде этот оператор представлен ниже:
<A HREF=Адрес URL или локальная метка
NAME="Имя локальной метки"
TARGET="Имя окна"
onClick="Обработчик события: щелчок по ссылке"
onMouseOver="Обработчик события: курсор над ссылкой">
Текст ссылки
</A>
Описание параметров оператора <A> мы привели ниже:
Параметр | Описание |
HREF | Параметр HREF задает адрес URL или имя локальной метки документа, куда будет сделан переход по ссылке |
NAME | Если указан параметр NAME, оператор <A> определяет локальную метку. Значение этого параметра задает имя метки |
TARGET | Параметр TARGET задает имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного с помощью оператора <FRAMESET>, или одним из следующих зарезервированных имен - _top, _parent, _self, или _blank |
onClick | С помощью параметра onClick можно определить обработчик события, который получит управление, когда пользователь сделает щелчок левой клавишей мыши по ссылке |
onMouseOver | Аналогично предыдущему, однако обработчик события получит управление, когда пользователь разместит курсор мыши над ссылкой |
Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links.
Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links. Вот список этих свойств:
Свойство | Описание |
hash | Имя локальной ссылки, если она определена в адресе URL |
host | Имя узла и порт, указанные в адресе URL |
hostname | Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP |
href | Полный адрес URL |
pathname | Путь к объекту, указанный в адресе URL |
port | Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке |
protocol | Строка названия протокола передачи данных (включающая символ “двоеточие”), указанного в ссылке |
search | Строка запроса, указанная в адресе URL после символа “?” |
target | Значение параметра TARGET, заданное в ссылке |
length | Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML |
Рассмотрим пример сценария JavaScript, работающего со ссылками как с элементами массива links.
Мы приведем пример документа, с формой, списком и кнопкой Jump. Сценарий JavaScript заполняет список ссылками, размещенными в документе HTML. Внешний вид этого документа показан на рис. 2.19.
Рис. 2.19. Документ со списком расположенных в нем ссылок
Выбрав из списка ссылку и нажав кнопку Jump, вы загрузите в окно браузера документ, указанный в этой ссылке или запустите почтовую программу для подготовки и отправки сообщения (если выбрана ссылка на адрес электронной почты).
Так как список ссылок формируется сценарием динамически, новые ссылки, добавленные в документ HTML, появятся в списке автоматически без дополнительных усилий по редактированию сценария.
В нижней части этого же документа HTML, показанного на рис. 2.20, сценарий отображает детальную информацию по каждой ссылке, извлеченную из свойств объектов класса links, соответствующих ссылкам.
Рис. 2.20. Детальная информация о ссылках
Что за информация здесь отображается?
Вначале выводятся свойства перовй ссылки, содержащей адрес главной страницы нашего сервера Web в сети Internet:
http://www. *****/~frolov/index. html host: www. *****:80
hostname: www. *****
href: http://www. *****/~frolov/index. html
pathname: ~frolov/index. html
port: 80
protocol: http:
search:
target:
Так как в этой ссылке указан полный адрес URL, включающий путь к файлу документа index. html, то этот путь записывается в свойство с именем pathname.
Хотя порт, с использованием которого устанавливается соединение с сервером Web, не указан, в свойства host и port записывается значение, применяемое для этой цели по умолчанию, а именно 80.
Рассмотрим следующую ссылку:
http://www. *****/ host: www. *****:80
hostname: www. *****
href: http://www. *****/
pathname:
port: 80
protocol: http:
search:
target:
Здесь путь к файлу документа HTML не указан, поэтому свойство pathname содержит пустую строку.
В ссылке на сервер Microsoft мы указали путь к каталогу java:
http://www. /java/ host: www. :80
hostname: www.
href: http://www. /java/
pathname: java/
port: 80
protocol: http:
search:
target: newwnd
Этот частичный путь оказался записанным в свойство pathname. Кроме того, для отображения содержимого сервера Microsoft должно быть создано новое окно. Имя этого окна задано как newwnd в параметре TARGET оператора <A>. С помощью этого оператора мы разместили ссылку в документе HTML. Как и следовало ожидать, имя окна оказалось записано в свойство target.
Последняя ссылка - это адрес электронной почты:
mailto:*****@***apc. org host: glas. apc. org
hostname: glas. apc. org
href: mailto:*****@***apc. org
pathname:
port: 0
protocol: mailto:
search:
target:
В свойстве protocol данной ссылки записана строка “mailto:”.
Рассмотрим теперь исходный текст документа HTML, содержащий сценарий JavaScript, работающий со ссылками (листинг 2.9).
Листинг 2.9. Файл chapter2/LinksList/LinksList. html
<HTML>
<HEAD>
<TITLE>Links and Anchors</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function urlJump()
{
var szNewURL="";
szNewURL =
document. links[Sel. ListOfLinks. selectedIndex];
window. location. href=szNewURL;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Просмотр ссылок</H1>
<FORM NAME="Sel">
<SELECT NAME="ListOfLinks">
</SELECT>
<INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">
</FORM>
<P>Посетите эти серверы:
<P><A HREF="http://www. *****/~frolov/index. html">Наша домашняя страница</A>
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
