Лекция №6.

Чтобы вызвать метод setTimeout () объекта Window, достаточно указать имя этого мето­да и задать параметры, а чтобы узнать имя окна, можно обратиться к свойству name.

Обращение document.write () означает то же самое, что и window.document.write (), обращение Location.href эквивалентно обращению и window.location.href и т. д.

Перемещаясь вниз по иерархии объектов, мы сталкиваемся с неожиданной про­блемой. До сих пор не возникало необходимости организовывать ссылки на несколь­ко объектов одного типа. Так, если в Web-странице не используются фреймы, то в окне отображается один HTML-документ, на который и ссылается свойство document объекта Window. Точно так же окно принадлежит конкретному браузеру, ссылка на ко­торый содержится в свойстве navigator. Однако с объектами, на которые должен ссы­латься объект Document, дело обстоит иначе.

Как видно из рис. 9.3, объект Document связан с объектами Link, Image и Form, представ­ляющими соответственно гипертекстовые ссылки, изображения и формы. В составе документов может быть несколько объектов одного типа, по этой причине ссылки на них не могут храниться в обычных свойст­вах типа location или navigator, поэтому они организованы по-другому.

Для того чтобы хранить произвольное количество ссылок на объекты, расположен­ные на Web-странице, используются массивы. Поэтому свойства объекта Document, пред­назначенные для связи с компонентами Web-страницы, выглядят следующим образом.

• links []— массив ссылок па гипертекстовые связи, сформированные в HTML-документе с помощью дескрипторов <A>.

• images []— массив ссылок на изображения, включенные в состав Web-страницы с помощью дескрипторов <IMG>.

• forms [] — массив ссылок на формы, созданные посредством дескрипторов <FORM>.

Объекты Link, Image и Form помещаются в массивы links [], images [] и forms [] в том же порядке, в котором они встречаются в исходном тексте HTML-документа. Так, images [0] ссылается на первое изображение в составе Web-страницы, images [1] — на второе изображение и т. д.

Имена объектов.

Создание и сопровождение сценариев можно упростить. Для этого надо вместо порядковых номеров объектов на Web-странице использовать их имена. При создании практически любого объекта можно указать атрибут NAME. Последовательность символов, заданная в качестве значения этого атрибута, становится именем объекта.

Предположим, что в составе HTML-документ имеется следующий фрагмент кода:

<FORM ACTION=”/cgi-bin/order.pl” METHOD=”POST” NAME=”person”>

Имя: <INPUT TYPE=”TEXT” NANE=”firstname”>

Фамилия: < INPUT TYPE=”TEXT” NANE=”lastname”>

< INPUT TYPE=”SUBMIT”>

</FORM>

Очевидно, что с помощью формы выполняется передача на сервер информации о пользователе, поэтому для неё и вы­брано имя person. В форме содержатся два поля редактирования: в одном из них (с именем firstname) пользователь должен ввести своё имя, а в другом (с именем lastname) — свою фамилию.

Если бы форма не имела имени, обратиться к ней можно было бы лишь с помо­щью выражения document.form [0] (при условии, что эта форма — единственная на Web-странице либо встречается в соответствующем HTML-документе первой, в про­тивном случае надо изменить индекс массива form []). Однако в дескрипторе <FORM> содержится атрибут NAME=”person”, поэтому мы можем обратиться к форме по её име­ни document.person. Соответственно, чтобы получить текст, введенный в полях редак­тирования, можно использовать следующие выражения:

fnm = document.person.firstname.value;

и

lnm = document.person.lastname.value;

После выполнения этих команд в переменную fnm будет записана строка, введён­ная пользователем в поле Имя, а в переменную lnm — строка, введённая в поле Фамилия.

В одном и том же выражении можно использовать как имена объектов, так и име­на свойств, содержащих ссылки на них.

Java-апплет в отдельном окне.

Открыть новое окно позволяет простой фрагмент кода JavaScript, который приве­ден ниже.

…

<SCRIPT LANGUAGE=”JavaScript”>

window.open (“calculator.html”, “calculator”, “width=430, height=330”);

</SCRIPT>

…

Теперь пользователю доступны два окна браузера: в одном из них отображается документ, в другом — апплет, реализующий калькулятор и позволяющий выполнять несложные вычисления.

События.

Какие бы сложные действия ни позволял реализовать JavaScript, он не был бы по-настоящему полезным инструментом, если бы в нём отсутствовали средства для орга­низации интерактивного взаимодействия. Популярность JavaScript во многом обу­словлена именно тем, что написанный на нём сценарий может реагировать на дейст­вия пользователя и другие внешние события. Каждое из событий связано с тем или иным объектом: формой, гипертекстовой ссылкой или даже с окном, содержащим те­кущий документ.

В качестве примеров внешних событий, на которые могут реагировать объекты JavaScript, можно привести следующие.

• Окончание загрузки документа в окно (или окончание загрузки документов во все фреймы окна). Это событие связано с объектом Window.

• Щелчок мышью на объекте. Может быть связано с интерактивным элементом формы или с гипертекстовой ссылкой.

• Получение объектом фокуса ввода. Это событие может быть связано с объекта­ми типа Text, Password и с другими интерактивными элементами.

• Передача на сервер данных, введённых пользователем с помощью интерактив­ных элементов. Связывается с формой.

Обработка события производится с помощью специально предназначенного для этого фрагмента кода, называемого обработчиком события. Для каждого события JavaScript предоставляет свой обработчик. Однако при построении сценария вы може­те создать собственный обработчик события и использовать его вместо обработчика, заданного по умолчанию.

Имя обработчика определяет, какое событие он должен обрабатывать. Так, для того чтобы сценарий нужным образом отреагировал на щелчок мышью, используется обработчик с именем onClick, для обработки события, заключающегося в получении фокуса ввода, — обработчик onFocus, а после окончания загрузки документа вступает в действие обработчик onLoad.

Иногда события называют именами их обработчиков.

Для того чтобы указать интерпретатору JavaScript на то, что обработкой события должен заниматься обработчик, созданный вами, надо включить в HTML-дескриптор следующее выражение:

имя_обработчика=”команды_обработчика”

Это выражение включается в дескриптор, формирующий объект, с которым связа­но событие. Если вы захотите самостоятельно обрабатывать событие, заключающееся в получении фокуса полем ввода, дескриптор, описывающий этот интерактивный элемент, должен иметь приблизительно следующий вид:

<INPUT TYPE=”TEXT” NAME=”Inform” onFocus=”handle ();”>

Как видите, имя обработчика является одним из атрибутов HTML-дескриптора, а команды, предназначенные для обработки события, выступают в роли значения этого атрибута. В данном случае обработка события производится в теле функции handle (). Однако для обработки совсем не обязательно вызывать ту или иную функцию. Обра­ботчиком может быть любая последовательность команд JavaScript.

Аннотирование ссылок.

URL не даёт никаких сведений о том, какая информация находится в докумен­те. Последовательность символов, отображаемая в строке состояния, позволяет узнать доменное имя сервера, на котором находится документ, определить, в какой стране расположен этот сервер. Однако до тех пор, пока вы не скопируете документ на свой компьютер, вы ничего не сможете сказать о содержании документа.

Эта проблема давно стала объектом пристального внимания разработчиков программных средств, предназначенных для поддержки Web. Многие из них предлага­ют различные способы аннотирования ссылок, т. е. генерации кратких описаний и связывания этих описаний с гипертекстовыми ссылками. Для построения аннота­ций разрабатываются различные автоматические средства, основанные па анализе действий пользователей. Однако качество автоматически сгенерированных аннота­ций существенно уступает качеству аннотаций, создаваемых разработчиками HTML-документов.

Рассмотрим сценарий JavaScript, реализующий несложный механизм аннотирова­ния ссылок, расположенных на Web-странице. Как только пользователь поместит курсор мыши на гипертекстовую ссылку, сценарий отобразит в строке состояния краткие сведения о документе, на который указывает эта ссылка.

Для того чтобы сообщение отобразилось в строке состояния, надо записать это со­общение в свойство status объекта Window. Соответствующая операция выглядит так:

window. status=строка_текста;

Очевидно, что данная операция должна выполняться в тот момент, когда курсор мыши помешается на ссылку, т. е. пересекает границу, отделяющую ссылку от осталь­ной части документа. Если курсор переходит с поля документа на ссылку, генерирует­ся событие onMouseOver, если курсор переходит со ссылки на поле документа, генери­руется событие onMouseOut.

Таким образом, для того чтобы пользователь видел краткое описание документа, на которое указывает конкретная ссылка, обработчик события onMouseOver, связанного с этой ссылкой, должен вывести описание в строке состояния. После того как курсор мыши вернётся на поле документа, сообщение в строке состояния теряет смысл, по­этому обработчик события onMouseOut должен стереть его.

Исходный текст HTML-документа, содержащего описанный сценарий, приведен ниже.

<HTML>

<HEAD> <TITLE> Аннотирование ссылок </TITLE> </HEAD>

<BODY>

<Р> Поместив курсор мыши на одну из ссылок, вы увидите в строке состояния её краткое описание

<BR> <BR>

<A HREF="http://ai.rtfm.mit.edu/" onMouseOver="draw ('Отделение искусственного интеллекта Массачусетсского технологического института'); return true;"

onMouseOut="status='';">

MIT </A>

<BR><BR>

<A HREF="http://cs.stanford.edu/" onMouseOver=" draw ('Страница факультета компьютерных наук Стенфордского университета'); return true;"

onMouseOut="status='';">

Stanford </A>

<BR> <BR>

<SCRIPT LANGUAGE=”JavaScript”>

function draw (str)

{

status=str;

}

</SCRIPT>

</BODY> </HTML>

Обратите внимание, что функция draw () содержит одну команду и её использова­ние совершенно не оправданно. Такое решение выбрано лишь для того, чтобы проде­монстрировать одну важную особенность обработки события onMouseOver.

Рассмотрим атрибут onMouseOver="draw ('Отделение искусственного интеллекта Массачусетсского технологического института'); return true;". В кавычках содержится об­работчик события onMouseOver. Обратите внимание на выражение return true;. Оно не­обходимо, так как по умолчанию браузер обрабатывает это же событие. Возвращая зна­чение true, сценарий сообщает браузеру, что обработка события MouseOver полностью завершена. На первый взгляд может показаться, что выражение return true; можно пе­реместить в тело функции draw (). Однако, если сделать это, смысл данной операции резко изменится. В этом случае не обработчик события будет передавать значение true браузеру, а функция будет передавать то же значение обработчику события.

Если же вы хотите, чтобы обработчик события включал в себя одну команду, его надо переписать так:

onMouseOver="return draw ('Отделение искусственного интеллекта Массачусетского технологического института');"

Перенаправление.

Бурное развитие Internet приводит к тому, что ресурсы WWW часто изменяют своё местоположение. Нередко бывает, что сервер предприятия не может справиться с воз­растающей нагрузкой и руководство организации принимает решение установить в каждом из подразделений отдельный Web-сервер. В результате материалы, связанные с деятельностью подразделения, размещаются по новому адресу.

А как быть с гипертекстовыми ссылками? Ведь авторы Web-страниц не только не могут корректировать, материалы, размещенные на других Web-узлах, но даже не зна­ют, какие HTML-документы содержат ссылки на их Web-страницы. Если администратор Web-узла не предпринимает мер для того, чтобы переадресовать обращение поль­зователя по новому адресу, появляются так называемые разрушенные связи — гипертекстовые ссылки, указывающие на несуществующие документы. При попытке обра­щения по такой ссылке первая строка ответа сервера клиенту обычно имеет вид

H

Интересный способ разрешения проблемы разрушенных связей предложили и реализовали авторы системы Alexa (http://www.alexa.com/). Помимо своего основ­ного назначение (выполнение функций Internet-фильтра), система Alexa кэширует Web.

TTP/1.0 404 File Not Found

Чтобы не допускать появления разрушенных связей, администратор узла должен оставить по прежнему адресу ссылку на новый адрес документа. Вспомните, как при рабо­те в Web вы время от времени получали сообщение приблизительно следующего содержания: «Web-страница изменила свой адрес. Если вы все ещё собираетесь обратиться к данному документу, щёлкните на ссылке, расположенной ниже». Далее следовала ссыл­ка, по которой можно было перейти к документу, расположенному по новому адресу.

Реализуем Web-страницу, выполняющую подобное перенаправление запроса пользо­вателя, средствами JavaScript.

<HTML>

<HEAD> <TITLE> Переадресация </TITLE> </HEAD>

<BODY>

С недавнего времени расположение документа изменилось

и теперь он находится по адресу

http://www.net.newtech.edu/manuals/index.html

Чтобы обратиться по новому адресу, щёлкните на гипертекстовой ссылке.

<P>

<CENTER> <A HREF =”http://www.net.newtech.edu/manuals/index.html”>

http://www.net.newtech.edu/manuals/index.html </A> <CENTER>

<P>

<CENTER> Через десять секунд переход произойдет автоматически

<CENTER>

<P> <CENTER>

<form name=”timer”>

На раздумья осталось

<INPUT TYPE=”text” SIZE=2 NAME=”clock”>

секунд

</FORM>

</CENTER>

<SCRIPT LANGUAGE=”JavaScript”>

var seconds=[];

remain ();

function remain ()

{

seconds--;

document.timer.clock.value=seconds;

if (seconds > 0)

{window.setTimeout (‘remain ()’, 1000)}

else

{

location.replace (http://www.net.newtech.edu/manuals/index.html);

}

}

</SCRIPT>

</BODY>

</HTML>