Сценарии JavaScript в активных страницах Web

Объект window

Далее мы рассмотрим в деталях объекты браузера, необходимые вам практически в любом сценарии JavaScript. Прежде всего это объекты window, document, а также объекты, связанные с формами, определенными в документах HTML.

Первый объект браузера, которым мы займемся вплотную, это окно - объект с именем window.

Свойства объекта window

Объект window имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна, содержимое строки состояния окна и другие:

Что касается свойства defaultStatus, то оно используется только в браузере Netscape Navigator. Если записать в это свойство произвольное сообщение, оно будет отображаться в строке состояния Netscape Navigator, когда окно браузера выдвигается на передний план. К сожалению, браузер Microsoft Internet Explorer версий 3.02 и 4.0 игнорирует свойство defaultStatus.

Свойство status, напротив, применяется обоими конкурирующими браузерами. Периодически записывая сообщение в это свойство и каждый раз сдвигая это сообщение на одну позицию, можно добиться эффекта бегущей строки. Применение строки состояния для отображения бегущей строки распространено достаточно широко. В нашей книге вы найдете пример готового сценария, выполняющего эту работу.

Заметим, однако, что в браузере Microsoft Internet Explorer версии 4.0 строка состояния разделена на несколько областей. Область, содержимое которой соответствует свойству status, расположена слева и имеет относительно небольшие размеры (особенно в режимах видеоадаптера с низким разрешением). Это необходимо учитывать, если вы собираетесь использовать бегущую строку для привлечения внимания пользователя.

Свойства windows и self - синонимы. Вы можете применять любое их них по своему усмотрению.

Остальные свойства, в частности, свойства frames и length, применяются в том случае, когда в окно загружен документ HTML с фреймами. Анализируя свойство length вы можете определить количество фреймов в окне, а при помощи свойства frames (которое является массивом) нетрудно получить доступ к окнам этих фреймов. Работе с фреймами в сценариях JavaScript мы посвятим отдельную главу нашей книги.

Методы объекта window

Среди методов, определенных в объекте window, отметим методы, предназначенные для открытия новых окон и закрытия существующих, для отображения на экране простейших диалоговых панелей с сообщениями и методы для установки таймера:

Метод alert

Что касается метода alert, то мы его уже использовали в разделе первой главы с названием “Вариация пятая: с диалоговой панелью”. Там мы применили этот метод для вывода на экран простейшей диалоговой панели, отображающей приветственное сообщение. Применение некоторых других методов и свойств объекта window мы проиллюстрируем ниже на примерах составленных нами сценариев JavaScript.

Приведем формат вызова метода alert:

alert("Сообщение");

Через единственный параметр методу alert передается сообщение, отображаемое в диалоговой панели.

После вызова этого метода выполнение сценария (точнее говоря, функции сценария, вызвавшей этот метод) задерживается до тех пор, пока пользователь не нажмет кнопку OK, расположенную в диалоговой панели с сообщением.

Заметим, что при вызове метода alert мы не указали объект, для которого вызывается метод - объект window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту window.

Тем не менее, вы можете явно указывать объект window:

window.alert("Сообщение");

Результат будет тем же самым.

Метод confirm

С помощью метода confirm вы также можете отобразить на экране диалоговую панель с сообщением, однако в этой панели будет две кнопки - OK и Cancel. В зависимости от того, какая кнопка будет нажата, метод возвратит, соответственно, значение true или false.

Метод confirm обычно используется следующим образом:

if(confirm("Сообщение"))
{
  // Нажата кнопка OK
  . . .
}
else
{
  // Нажата кнопка Cancel
  . . .
}

Метод prompt

Если вам в своем сценарии необходимо получить от пользователя одну текстовую строку, для этого можно применить метод prompt. Этот метод отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt возвращает введенную строку.

Метод prompt вызывается следующим образом:

Var szInput="";
szInput=prompt("Сообщение","Строка ввода по умолчанию");

Через первый параметр методу передается сообщение, которое отображается в диалоговой панели над текстовым полем ввода. Второй параметр необязательный. Если он указан, поле ввода инициализируется текстовой строкой, заданной этим параметром.

Заметим, что с помощью метода prompt сценарий может получить от пользователя только одну текстовую строку. В тех случаях, когда необходимо ввести и обработать сразу несколько строк, вы можете создать в документе HTML форму, имеющую произвольное количеством полей и кнопку завершения ввода с обработкой события. Когда пользователь нажмет эту кнопку, обработчик соответствующего события сможет извлечь из полей формы введенные значения. Подробно работа с формами будет рассмотрена в отдельной главе нашей книги.

Метод open

С помощью метода open сценарий может открыть новое окно браузера и загрузить в это окно документ HTML для просмотра.

Формат вызова метода open приведен ниже:

open("Адрес URL", "Имя Окна", "Параметры окна");

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

Первый параметр метода open задает адрес URL документа HTML, предназначенный для загрузки в новое окно.

Второй параметр определяет имя окна для использования в параметре TARGET оператора <A> или в операторе <FORM>. Вы можете указать его как пустую строку вида “”.

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

var wndNewWindow;
wndNewWindow=open("hello.html", "", 
"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");

Ниже мы перечислили все возможные параметры окна:

Метод close

С помощью метода close вы можете закрыть созданное вами или основное окно браузера. Формат вызова этого метода такой:

wndNewWindow.close()

Заметим, что текущее окно браузера (то есть окно, в которое загружен документ HTML с работающим сценарием) может быть закрыто одним из двух следующих способов:

window.close()
self.close()

Этот метод мы будем использовать в одном сценарии, описанном ниже.

Метод setTimeout

С помощью метода setTimeout вы можете установить таймер, указав при этом выражение JavaScript и задержку во времени:

idTimer=setTimeout(cmd, timeout);

Метод setTimeout создает и запускает таймер, возвращая его идентификатор. Когда пройдет время, заданное вторым параметром timeout (в миллисекундах), запускается выражение JavaScript, заданное параметром cmd.

Рассмотрим такой фрагмент сценария:

var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);

Здесь мы создаем таймер с временем задержки 10 секунд. После прошествия этого времени будет вызвана функция с именем NoAccess, которая должна быть определена в сценарии заранее. Эта функция будет выполнена только один раз.

Ниже мы приведем примеры сценариев, в которых метод setTimeout используется для периодического вызова функции сдвига сообщения в строке состояния браузера (“бегущая” строка) и для ограничения времени ввода пользователем строки пароля.

Еще одно применение метода setTimeout - создание анимационных эффектов в сценарии JavaScript. Соответствующий пример вы найдете в пятой главе нашей книги, посвященной растровым графическим изображениям.

Метод clearTimeout

С помощью метода clearTimeout можно остановить таймер, запущенный только что рассмотренным методом setTimeout. В качестве параметра методу clearTimeout необходимо передать идентификатор таймера, полученный от метода setTimeout:

clearTimeout(idTimer);

События для объекта window

С объектом класса window связаны два события - onLoad и onUnload. Первое из них возникает, когда браузер заканчивает загрузку окна или всех окон фреймов, определенных оператором <FRAMESET>, а второе - когда пользователь завершает работу с документом HTML.

В своем сценарии вы можете предусмотреть обработку этих событий, назначив для каждого из них свою функцию. Функция, которая вызывается при завершении загрузки документа, может выполнять какие-либо инициализирующие действия, создавать дополнительные окна или выводить сообщения. Обработчик события onUnload может освобождать полученные ресурсы или выводить какие-либо дополнительные сообщения.

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

. . .
function Hello()
{
  window.alert("Welcome to my home page!")
}
function Bye()
{
  window.alert("Bye! Come back again!")
}
  . . .
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
  . . .

Здесь в операторе <BODY> мы определили обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция Hello, а при возникновении второго события - функция Bye. Заметим, что так как документ HTML интерпретируется в направлении сверху вниз, функции Hello и Bye необходимо определить до появления оператора <BODY>. Лучшее место для определения этих функций - заголовок документа HTML.

Если вам нужно проследить загрузку всех фреймов, вы можете указать обработчик события onLoad в операторе <FRAMESET>.