Как создать свой сайт

К учебнику по Dinamic HTML

"Все Технические Моменты Сайтостроения в Видеоформате". Коллекция видеокурсов, которая за 36 часов и 45 минут сделает из Вас профессионала во всех технических моментах создания сайта.



Реклама:


Глава 4. Окно браузера



В данной главе вы узнаете о том, как программировать окно браузера, объекта высшего уровня в объектной модели динамического HTML. Доступ к информации о браузере и содержащемся в нем документе может быть осуществлен посредством объекта window. В окне могут быть отображены два типа HTML-документов: документ с набором фреймов и стандартный HTML-документ. Документы с набором фреймов разделяют одиночное окно на многочисленные фреймы, доступ к которым осуществляется независимо.

В главах 5 и 6 эти два типа документов обсуждаются подробно.

Объект window представляет информацию документа (включая информацию о фреймах на странице и URL для текущего документа) и предоставляет доступ к информации о самом браузере (включая торговую марку компьютера клиента, версию объекта navigator и поддерживаемые им элементы), доступ к информации событий и, что наиболее важно, доступ к объекту document, который представляет сам HTML-документ. Объект window также позволяет перемещаться в файле истории, настраивать браузер и перемещать окно.

В данной главе и главе 5 приведено объяснение методов манипулирования браузером и содержащимся в нем документом, используя объект window. В этой главе внимание сфокусировано на членах процедуры манипулирования текущим окном. В главе 5 будет продолжено обсуждение данной темы и продемонстрированы методы манипулирования наборами фреймов и многочисленными экземплярами браузера.

В данной главе рассмотрены следующие темы:



Объект window

Как упоминалось выше, объект window представляет собой объект высшего уровня в динамическом HTML. В упрощенном виде объект window можно представить в виде контейнера для документа или других окон. Окно, содержащее другие окна, представляет собой основу набора фреймов (frameset). На рис. 4.1 показана иерархия объектов window.

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

Рис. 4.1. Иерархия объектов window



Ссылка на объект window

Поскольку объект window представляет собой объект высшего уровня в объектной модели HTML, не требуется явно ссылаться на него при обращении к свойству окна. Приведенные ниже строки кода выполняют одинаковые действия:


window.location.URL  // Явная ссылка на объект window.
location.URL         // Неявная ссылка на объект window.

Кроме того, объект window представляет свойство self, которое действительно возвращает окно. Поэтому приведенные ниже пять строк кода ссылаются на одно свойство name:


name
self.name
window.self.name
window.self.window.name
window.window.name

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



Свойства document и event

Свойство document возвращает объект document, представляющий страницу, которая содержится в окне. Доступ к стилю, структуре и содержанию документа может быть осуществлен посредством свойства document.

Как упоминалось в главе 3, свойство event объекта window возвращает объект event, который предоставляет информацию о текущем событии. Объект event доступен только в ходе возникновения последовательности событий и возвращает null во всех остальных случаях. В главе 5 объясняется, как установить реакцию на события, которые возникают в других окнах или документах.



Глобальные переменные и определяемые пользователем свойства

Как упоминалось в главе 2, при написании сценариев в динамическом HTML отсутствуют доступные глобальные переменные. Все переменные, которые описываются за пределами функции или обработчика событий, автоматически добавляются как определяемые пользователем свойства объекта window. Когда пользователь покидает страницу, то ее переменные удаляются из окна. Это осуществляется по соображениям безопасности - чтобы новая страница не пыталась читать состояние предыдущей страницы.

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



Установка имени окна

Все окна создаются без имени. Вы можете дать окну имя путем присвоения строки свойству name, или указать имя для фрейма, создаваемого как часть набора фреймов.

Свойство name определяет пункт назначения для ссылки или результатов форм. По умолчанию все страницы направлены на текущий фрейм или фрейм или окно, определенные тегом <BASE TARGET= windowName>. Можно изменить данную цель путем назначения атрибута TARGET для ссылки или элемента Form с указанием именованного окна, в котором должен появляться документ.

Свойство name объекта window сохраняется пользователем при перемещении пользователя на страницу, чтобы гарантировать, что поддерживается цель фрейма.



Передача строк программного кода

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



Среда окна

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



Строка состояния

Текст строки состояния обычно отображается в нижней части окна браузера. Доступ к сообщениям строки состояния возможен посредством свойств defaultStatus и status. Оба свойства представляют строки, допускающие операции чтение/запись. Разница между ними заключается в том, что свойство status используется для сообщения, которое отображается временно, а свойство defaultStatus отображает сообщение до тех пор, пока свойство defaultStatus не изменится или пользователь не покинет окно браузера, как показано в приведенном ниже коде:

<HTML>
   <HEAD>
      <TITLE>Текст состояния</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function setStatus() {
            // Отображаемое сообщение статуса
            window.defaultStatus = "Default status";
            // Temporary message to display
            window.status = "Temporary status";
         }
      </SCRIPT>
   </HEAD>


   <BODY>
      <FORM>
         <INPUT TYPE=BUTTON VALUE="Change Status"
            ONCLICK="setStatus();">
      </FORM>
   </BODY>
</HTML>

Рис. 4.2.

При нажатии кнопки Change Status (Изменить состояние) строка статуса отображает строку Temporary status (Временное состояние). После перемещения мыши сообщение изменяется на Default status (Состояние по умолчанию). Когда пользователь покидает страницу, в строке состояния выводится сообщение по умолчанию.

Используя события onmouseover и onmouseout для элемента, очень просто установить отображение специального сообщения состояния, когда указатель мыши находится на элементе:

<A ONMOUSEOVER="window.status='Go Home'" ONMOUSEOUT="window.status=''" 
      HREF="home.htm">
   Top Page
</A>

Пример программы для создания текста бегущей строки состояния, в котором используется свойство status и таймеры, представлен в разделе "Текст бегущей строки состояния" ниже в данной главе.



Кнопки Back и Forward

Динамический HTML предоставляет методы для создания индивидуальных кнопок истории. Хотя доступ к действительным URL, просмотренным пользователем, невозможен, объект history представляет три метода, которые моделируют нажатие кнопок истории на панели инструментов: методы , forward и back. Свойство length представляет число элементов в списке истории. Приведенный ниже код создает простые кнопки Back (Назад) и Forward (Вперед):

<HTML>
   <HEAD>
      <TITLE> Кнопки истории </TITLE>
   </HEAD>
   <BODY>
      <FORM NAME="Browse">
         <INPUT TYPE=BUTTON VALUE="Back" 
            ONCLICK="history.back();">
         <INPUT TYPE=BUTTON VALUE="Forward" 
            ONCLICK="history.forward();">
      </FORM>
   </BODY>
</HTML>



Местоположение окна

Адрес страницы в окне определяется с помощью свойства location, которое выдается на объект, идентифицирующий адрес URL. Преобразование URL в простые для использования свойства упрощают извлечение и манипулирование URL.


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

Большинство свойств объекта location разделяют URL на простые в пользовании компоненты. Свойства, которые связаны с URL, перечисле ниже:


protocol://hostname:port/ pathname?search#hash 

Почти все URL имеют свойства protocol (протокол), hostname (имя хоста) и pathname (путь). Свойства port (номер порта), search (поиск) и hash (данные) могут не иметь связанных значений. Свойство search представляет строку поиска, которая обычно указывается для сценариев CGI (Common Gateway Interface - общий шлюзовой интерфейс) серверной части. Свойство hash представляет закладку на странице.

Кроме того, объект location использует несколько дополнительных свойств, которые объединяют упомянутые выше свойства. Например, свойство host просто возвращает значение hostname, после которого указано двоеточие и номер порта (port). Свойство href является полной ссылкой URL, которая представлена как отдельная строка.

Присвоение значения любому из данных свойств приводит к тому, что браузер начинает немедленно искать новую страницу. Для большинства операций свойство href является одним из тех свойств, значение которого необходимо установить для загрузки новой страницы. Можно также использовать метод replace, который будет рассматриваться ниже.


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

Для объекта location используются два метода: reload ([force]) и replace (url). Вызов метода reload аналогичен нажатию кнопки Refresh (Обновить) браузера - оба действия вызывают загрузку целиком всей страницы, если она была изменена. Если указать в качестве параметра force значение true, то может произойти перезагрузка страницы, даже если сервер сообщает, что страница не была изменена.

Метод replace осуществляет переход на новую страницу. Метод работает аналогично присвоению значения свойству href, за исключением того, что метод replace не добавляет текущую страницу в список истории. Метод replace полезен для переадресации URL на клиентской стороне, как показано в приведенном ниже примере:

<HTML>
   <HEAD>
      <TITLE> Определение названия браузера </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         // Загрузить другую версию страницы для пользователей Netscape.
         if ("Netscape" == navigator.appName)
            location.replace("nsversion.htm");
      </SCRIPT>
   </HEAD>
   <BODY>
      <!— Страница для других браузеров —>
   </BODY>
</HTML>



Информация экрана

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

Таблица 4.1. Свойства объекта screen


Свойство Описание

width Горизонтальное разрешение экрана в пикселах
height Вертикальное разрешение экрана в пикселах
colorDepth Число битов на пиксел, которое используется экраном или буфером
availHeight Высота экрана внутри окон браузера
availWidth Ширина экрана внутри окон браузера

Свойства availHeight и availWidth дают информацию о размерах пользовательского экрана, который доступен для окон браузера - то есть, свободное пространство внутри окна браузера, не занятое панелями инструментов.

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

<HTML>
   <HEAD>
      <TITLE> Страницы для различных экранов </TITLE>
      <LINK REL="styleSheet" TYPE="text/css" HREF="256color.css">
      <SCRIPT LANGUAGE="JavaScript">
         if ((640 >= screen.width) || (480 >= screen.height))
            window.location.replace("lowres.htm");
         document.styleSheets[0].disabled = (screen.colorDepth < 8);
      </SCRIPT>
   </HEAD>
   <BODY>
      <!— Содержание документа —>
   </BODY>
</HTML>



События окна

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



События состояния документа

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


События загрузки

С загрузкой документа связаны события onload и onreadystatechange. Оба помогают определить момент, когда весь документ будет проанализирован и все элементы загружены. Событие onreadystatechange представляет собой новое событие, которое возникает в документе, а не в окне.

Событие onreadystatechange подробно обсуждается в главе 6.

Событие onload запускается, когда весь документ проанализирован, но не обязательно сообщает о том, что все объекты документа полностью загружены. Данное событие также поддерживается объектными моделями Netscape Navigator 3.0 и Microsoft Internet Explorer 3.0.

Событие onload запускается, когда весь документ проанализирован, но не обязательно сообщает о том, что все объекты документа полностью загружены. Данное событие также поддерживается объектными моделями Netscape Navigator 3.0 и Microsoft Internet Explorer 3.0.


События выгрузки

С процессом выгрузки связаны события документа onbeforeunload и onunload. Событие onbeforeunload генерируется сразу же после события onunload. Событие onbeforeunload дает Web-мастеру возможность проверить, что пользователь действительно хочет покинуть документ. Данное подтверждение полезно, когда выход из документа может привести к потере информации, поскольку пользователь не смог получить данные с сервера. Например, в процедуре связывания данных, когда пользователь запускает много изменений на компьютере клиента, выход из документа без получения данных, приведет к непреднамеренной потере информации изменений.

Связывание данных подробно рассматривается в главе 15.

Событие onbeforeunload может отобразить стандартное диалоговое окно, которое содержит указанный разработчиком текст и спрашивает пользователя, хочет ли он покинуть документ. Для отображения данного запроса установите значение returnValue равным строке, как показано в приведенном ниже коде. Если не установить значение свойства returnValue равным строке, то окно может просто выгрузить документ, не отображая диалоговое окно.

<SCRIPT LANGUAGE="JavaScript" EVENT="onbeforeunload()" FOR="window">
   event.returnValue = "Введенные вами данные будут потеряны, 
                        если вы покинете страницу.";
</SCRIPT>

На рис. 4.3 показано данное индивидуальное сообщение, отображаемое Internet Explorer 4.0 в ответ на событие onbeforeunload.

Рис. 4.3. Запрос подтверждения выхода с текущей страницы

По соображениям безопасности нельзя допускать предотвратить выгрузку документа из окна без вмешательства пользователя. Данное ограничение запрещает документу блокировать систему и требует, чтобы пользователь закрыл приложение браузера или перезагрузил компьютер.

Непосредственно перед выгрузкой документа возникает событие onunload. В этот момент невозможно остановить процесс или попросить пользователя не покидать документ. Более того, в данном месте следует записать код завершения, поскольку это является последней возможностью для сценария обратиться к документу и его содержимому.



События фокуса

Термин фокус (focus) применим к окну или элементу, которые находятся в активном состоянии и получают извещения пользователя, такие как события клавиатуры и мыши. Для того чтобы разрешить определение моментов получения и потери фокуса окном, окно представляет события onblur и onfocus. В целом, событие onblur генерируется, когда фокус переходит от окна к другому элементу внутри данного или другого окна, и событие onfocus возникает, когда окно получает фокус.

Документ, который загружается браузером, первоначально имеет фокус, но не запускает событие onfocus. Когда окно активизировано, каждое действие пользователя в окне будет приводить к возникновению последовательности событий onblur и onfocus. Например, щелчок по документу в окне приводит к возникновению события onblur в окне, за которым следует событие onfocus, даже если окно уже было активизировано.

Если исходным документом является набор фреймов, то первоначально набор фреймов находится в активном состоянии. Так же как и при загрузке традиционных HTML-документов, загрузка фрейма не запускает событие onfocus. Однако если пользователь переходит к экземпляру фрейма или набора фреймов или производит щелчок мышью внутри экземпляра фрейма, то событие onblur запускает набор фреймов, и в соответствующем фрейме возникает событие onfocus. Отсюда вытекает первое правило событий фокуса:

Правило: В любом экземпляре браузера одновременно может быть активизирован только один элемент.

Этим элементом может быть объект window, набор фреймов или элемент внутри документа, такой как элементы ввода данных или внедренный объект. При переходе фокуса событие onblur возникает в окне или элементе, и событие onfocus возникает в другом элементе.

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

Правило: Каждое изменение фокуса возникает симметрично, то есть событие onblur возникает на элементе, потерявшем фокус, и событие onfocus возникает на элементе, получившем фокус.


Методы focus и blur

Вы можете передать или снять фокус с окна или элемента путем вызова методов focus или blur. Вызов одного из этих методов приводит к выполнению соответствующего обработчика событий, только если требуется изменение состояния. Например, активизированное окно не будет генерировать событие onfocus, если вызывается его метод focus. Однако если окно не активизировано и затем получает фокус посредством метода focus, то будет запущено событие onfocus. Важно понимать данное различие, поскольку вы не можете положиться на программу, которая выполняется в ответ на все вызовы методов focus и blur.



Обработка ошибок

Объект window представляет событие onerror, которое запускается при возникновении ошибки в сценарии на странице. Когда ошибка возникает в сценарии, то на экран обычно выводится малопонятное сообщение и загрузка страницы прекращается. Используя обработчик событий onerror, страница может отменить вывод встроенного диалогового окна и отобразить более содержательное сообщение.

Событие onerror также дает возможность отменить вывод встроенного диалогового окна и прекратить загрузку без вывода уведомления, как показано в приведенном ниже коде. Несмотря на простоту данного кода, использовать его не рекомендуется. Последствия возникновения ошибки сценария на странице могут быть непредсказуемы, вследствие чего документ перестанет функционировать.

<SCRIPT LANGUAGE="JavaScript">
   function stopAllErrors() {
      // Ошибки в сценариях не будут приводить к выводу сообщения.
      return true;  // Значение true запрещает появление диалогового окна. 
   }

   window.onerror = stopAllErrors;  // Захват обработчика ошибок onerror.
   thisBadCode.WillNot.GenerateAnError(); // Синтаксическая ошибка.
</SCRIPT>

В отличие от большинства событий в объектной модели динамического HTML, возврат значения true в событие onerror отменяет вывод диалогового окна. Для всех остальных событий возврат значения false предотвращает выполнение событием его действия по умолчанию. Это различие необходимо для поддержания совместимости с событием onerror в Netscape Navigator 3.0.

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

<SCRIPT LANGUAGE="JavaScript">
   function doError() {
      if (arguments[0] == "runtime error 380") {
         alert("Invalid Color Name");
         return true;
      }
   }
   window.onerror = doError;
</SCRIPT>
Color:
<INPUT TYPE=TEXT ONCHANGE="this.style.color = this.value;"
   VALUE="Black">

Событие onerror передает обработчику событий три аргумента: описание ошибки, имя файла, в котором возникла ошибка, и номер строки, в которой возникла ошибка. Обработчики ошибок не должны использовать номер строки, поскольку при редактировании текста программы, номера строк будут изменены и обработчики ошибок перестанут работать.



Пользовательские события

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

В главе 5 представлены методы, которые могут быть использованы сценариями для изменения размера или прокручивания окна.

Используя каскадные таблицы стилей (Cascading Style Sheets, CSS), можно создавать контейнеры внутри документа, которые поддерживают прокручивание и изменение размера. Данные действия запускают для контейнеров те же события, что и для окон.


Событие onresize

При каждом изменении пользователем размера окна возникает событие onresize. Данное событие позволяет написать код, который изменяет расположение содержания документа или даже других окон относительно текущего размера документа.


Событие onscroll

Событие onscroll запускается каждый раз при прокручивании документа вручную пользователем или в результате действия, которое приводит к прокручиванию документа. Например, переход к закладке или использование клавиш со стрелками. Свойства для определения текущего положения маркера полосы прокрутки представлены при помощи объекта body в самом документе.

Взаимодействие с данными свойствами продемонстрировано в главе 5. Их подробное обсуждение можно найти в главе 9.



Определение событий окна

Все события окна, включая onblur, onfocus, onload, onunload и onbeforeunioad, - могут быть определены как атрибуты тега <BODY> на HTML-странице. Это позволяет связать данные события с обработчиком с помощью атрибутов вместо сценариев, как показано в приведенном ниже коде:

<HTML>
   <HEAD>
      <TITLE> Захват обработчиков событий </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function doLoad() {
            // Укажите здесь операции, которые должны быть выполнены 
            // при загрузке страницы.
         }

         function doUnload() {
            // Определите операции, которые должны быть. выполнены при 
            // выгрузке документа.
         }
         window.onload = doLoad;  // Захват обработчика событий в сценарии.
      </SCRIPT>
   </HEAD>
   <!— Захват обработчика событий с помощью атрибута элемента Body. -->
   <BODY ONUNLOAD="doUnload();">
   </BODY>
</HTML>



События таймера

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

Таймеры могут быть добавлены в окно только посредством программы. Они не могут быть определены как атрибуты элемента. Метод setTimeout создает таймер, который выполняется только один раз, а метод setInterval создает таймер, который выполняется с определенным интервалом времени. Оба метода используют одинаковый набор параметров:


var timerRef = window.setTimeout(script, time) 
var timerRef = window.setInterval(script, time) 

Можно использовать одноразовый таймер для повторного выполнения обработчика, если сбросить таймер в обработчике, как показано ниже:

<SCRIPT LANGUAGE="JavaScript">
   var timeEvery100;
   function Every100() {
      // WЗдесь должен быть выполняемый код.
      // ...
      // Сброс таймера.
      timeEvery100 = setTimeout("Every100();", 100);
   }
   // Первый вызов таймера.
   timeEvery100 = setTimeout("Every100();", 100);
   // Когда пользователь покидает страницу, таймер следует удалить.
   window.onunload = new Function("clearTimeout(timeEvery100);");
</SCRIPT>

Если вы используете метод setInterval вместо setTimeout, то вам не требуется сбрасывать таймер в обработчике.

Примечание: Метод setInterval был введен в Netscape Navigator 4.0 и Internet Explorer 4.0 для обеспечения совместимости. Если вы пишете программу для браузеров низкого уровня, то используйте метод setTimeout вместо метода setInterval.

Можно передать параметры обработчику вручную путем создания строки вызова функции. Приведенный ниже код создает вызов функции с тремя параметрами:


var tm = setTimeout("doThis(" + arg1 + ", 23, " + arg3 + ");", 100);

Таймеры создаются с помощью методов setTimeout или setInterval и могут быть удалены в любой момент, посредством метода удаления clearTirneout или clearInterval. Оба метода удаления принимают в качестве параметра значение timerRef, возвращаемое методом set. Поэтому при установке таймера возвращаемое значение следует сохранить в переменной.

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



Использование таймеров

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


Автоматический переход на страницу

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

<HTML>
   <HEAD>
      <TITLE>Счетчик</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         var intLeft = 5;  // Количество секунд до перехода

         function leavePage() {
            if (0 == intLeft)  // Ожидание закончилось - осуществляется
                               // переход.
               document.location = "home.htm";
            else {
               // Счет в сторону уменьшения и вывод изменяющегося 
               // значения счетчика. 
               intLeft -= 1;
               document.all.countdown.innerText = intLeft + " ";
               // Осталась одна секунда.
               setTimeout("leavePage()", 1000);
            }
         }
      </SCRIPT>
   </HEAD>
   <BODY ONLOAD="setTimeout('leavePage()', 1000)">
      <H1> Автоматический переход на страницу </Н1> 
         Переход на <ЕМ> страницу </ЕМ> произойдет через 
      <SPAN ID="countdown">
         <!— Output initial amount of time. —>
         <SCRIPT LANGUAGE="JavaScript">
            document.write(intLeft);
         </SCRIPT>
      </SPAN>
      секунд.
   </BODY>
</HTML>

Длительность паузы таймера в секундах определяется значением переменной intLeft. Изменение исходного значения переменной intLeft также автоматически обновляет исходное значение, вследствие выполнения простого сценария в теле документа.


Текст строки состояния

В приведенном ниже примере создается текст строки состояния, которая прокручивается справа налево. Этот пример может быть запущен только в Internet Explorer 4.0, поскольку элемент Body настроен с определяемым пользователем атрибутом для хранения сообщения.

Данный метод добавления атрибутов в элементы для определения нового поведения описывается в главе 8.

<HTML>
   <HEAD>
      <TITLE>Scrolling Status Bar Text</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function spacer(pos) {
            // Simple routine to generate spaces
            var space = "";
            for (var i = 0; i < pos; i++) 
               space += " ";
            return space;
         }

         function scrollStatus() {
            // Проверка сообщения для бегущей строки.
            if (null != message) {
               with (message) {
                  // Перезапуск сообщения.
                  if (position < -text.length)
                     position = maxSpace;
                  // Scroll words off left edge.
                  if (position < 0) {
                     position--;
                     window.status = text.substring(-position);
                  }
                  else {
                  // Вывод предварительных пробелов.
                  window.status = spacer(position--) + text;
                  }
               }
            }
         }

         function initMessage() {
         // Конструктор для объекта сообщения.
         // Отображаемое сообщение является обязательным аргументом.
         this.text = document.body.getAttribute("message");
         // Значение скорости необязательно.
         if (null != arguments[0])
            this.speed = arguments[0];
         else
            this.speed = 10;
         // Исходное значение предшествующих пробелов
         this.maxSpace = 130;
         this.position = maxSpace;
         // Запуск таймера.
         this.timer = setInterval("scrollStatus()", this.speed);
         return this;
         }
      </SCRIPT>
   </HEAD>
   <BODY ONLOAD="message = initMessage(10);" 
         message="Demo String to Scroll">
      Demo Message Page
   </BODY>
</HTML>


Электронные часы

Появления динамического HTML электронные часы могли быть добавлены в HTML-документы только с помощью апплетов, изображений со сложными программами или других подобных трюков. Данный пример демонстрирует, как создавать электронные часы непосредственно в HTML-документе. документе. В приведенном ниже коде часы помещены внутри элемента Span с идентификатором clock. Каждую секунду (при каждом изменении значения времени) содержание элемента Span заменяется на новое значение.

<HTML>
   <HEAD>
      <TITLE>Ticking Clock</TITLE>
      <STYLE TYPE="text/css">
         #clock {color:blue; font-size:120%} /* Format the clock. */
      </STYLE>
      <SCRIPT LANGUAGE="JavaScript">
         // Проверка того, что используется браузер IE4 или более
         // поздней версии.

         var MS = navigator.appVersion.indexOf("MSIE");
         window.isIE4 = (MS > 0) &&
            (parseInt(navigator.appVersion.substring(MS + 5, MS + 6)) 
               >= 4);

         function lead0(val) {
            // Добавление предшествующих нулей при необходимости.
            return (val < 10) ? "0" + val.toString() : val;
         }

         function buildTime() {
            var time = new Date();
            var ampm = "AM";
            var h = time.getHours();
            // Установки времени и определение времени суток (до 
            // полудня/после полудня am/pm).
            if (h > 12) {
               h = h - 12;
               ampm = " PM";
            }
            return lead0(h) + ":" + lead0(time.getMinutes()) + ":" +
               lead0(time.getSeconds()) + ampm;
         }

         function tick() {
            // Замена значения на часах на текущее время.
            document.all.clock.innerText = buildTime();
         }
      </SCRIPT>
   </HEAD>
   <!— Запускать таймер, только если используется браузер IE4. —>
   <!— При выгрузке удалить таймер. —>
   <BODY ONUNLOAD="if (null != window.tmr) clearInterval(window.tmr);" 
         ONLOAD="if (window.isIE4)
            window.tmr = setInterval('tick()', 999);">
      <H1>Ниже приведены действующие электронные часы, 
         запрограммированные с помощью HTML
      </H1>
      <P>The current time is:
      <SPAN ID="clock">
         <SCRIPT LANGUAGE="JavaScript">
            // Поддержка сценариев низкого уровня 
            // Вывод исходного значения времени.
            document.write(buildTime());
         </SCRIPT>
      </SPAN>.
   </BODY>
</HTML>

Данный код также запускается на браузерах низкого уровня, которые поддерживают сценарии. Хитрость заключается в методе document.write, который содержится в теле документа для вывода текущего времени в соответствующем месте документа. В браузерах, которые поддерживают динамический HTML, часы будут идти. В браузерах, которые не поддерживают динамический HTML, отображается только одно значение времени, которое было на часах в момент загрузки страницы.


Точность таймера

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

Нерегулярность работы таймера может возникнуть в случае, если таймер используется для анимации. Анимация может остановиться мгновенно, вместо ровного выполнения. Данное отклонение может быть вызвано задержки выполнения таймера, что обусловлено каким-либо другим процессом и самим браузером.



Свойства clientInformation и navigator

Свойства clientInformation и navigator ссылаются на объект, содержащий информацию о клиенте. Свойство clientInformation было добавлено в Internet Explorer 4.0 как псевдоним для navigator с целью разделения всех предполагаемых взаимоотношений между объектной моделью и определенным браузером. Однако поскольку свойство clientInformation поддерживается в настоящее время только в Internet Explorer 4.0, то следует использовать свойство navigator при создании страницы, которую можно будет просматривать с помощью различных браузеров. Оба свойства возвращают одинаковые данные, включая имя и версию клиента.

Примечание: В данном разделе свойства и объекты clientInformation и navigator используются попеременно. Во всех случаях оба свойства и объекта предоставляют одинаковую информацию.

Используя объект clientlnformation или navigator, программа может быть выполнена в зависимости от производителя и версии браузера. Если вы просто создаете программу для обхода ошибки или неподдерживаемого элемента в одном браузере, то проверка на клиентской стороне работает хорошо. Но переговоры на клиентской стороне, которые приводят к загрузке новых страниц, требуют многочисленных обращений к серверу. Если вы разрабатываете страницы для просмотра в различных браузерах, то эффективнее передавать корректные страницы сразу, на основе указанного заголовка.



Информация о производителе клиентского компьютера

Перечисленные ниже четыре свойства объекта navigator представляют версию и название клиента:

Браузеры Internet Explorer и Netscape Navigator поддерживают одинаковый общий формат для свойства appVersion. Свойство appVersion возвращает версию клиента в следующем формате:


clientVersion (platform; information [; extraInformation]) 

В Netscape Navigator поле platform содержит название платформы, на которой работает браузер. В Internet Explorer версий 3.0 и 4.0 строка compatible возвращается как значение платформы, а действительное название платформы записывается в поле extraInfonnation.

В Netscape Navigator значение в поле information указывает уровень шифрования продукта. Например, для международной версии возвращается значение I, которое предоставляет более низкий уровень безопасности, чем версия для U.S. (данное отличие обусловлено ограничениями на экспорт из U.S). Версия U.S. возвращает в данном поле значение U. Internet Explorer возвращает номер версии в поле information.

Поле extraInfonnation может возвращать название платформы или бильд-номер требуемой операционной системы. Internet Explorer использует данное поле для возвращения подробной информации о платформе. В зависимости от платформы данное поле может быть использовано Netscape Navigator.

Поля в свойстве appVersion организованы в согласованном формате. Программа может различать клиентов путем анализа данного свойства. В табл. 4.2 перечислены значения, возвращаемые Internet Explorer и Netscape Navigator для платформы Microsoft Windows в свойствах appCodeName, appName и appVersion.

Таблица 4.2. Значения свойства appVersion для разных браузеров


Browser appCodeName appName appVersion

Microsoft Internet Explorer 3.0 Mozilla Microsoft Internet Explorer 2.0 (compatible; MSIE 3.OA; Windows 95)
Microsoft Internet Explorer 4.0 Mozilla Microsoft Internet Explorer 4.0 (compatible; MSIE 4.O; Windows 95)
Netscape Navigator 2.01 Mozilla Netscape 2.01 (Win95; I)
Netscape Navigator 3.0 Mozilla Netscape 3.0 (Win95; I)
Netscape Navigator 4.0 Preview 1 Mozilla Netscape 4.0b1 (Win95; I)

Свойство userAgent содержит строку пользовательского агента HTTP (Hyper text Transfer Protocol), который определен в запросе HTTP. Строка пользовательского агента представляет собой объединение значений свойств appCodeName и appVersion, разделенных косой чертой: appCodeName/appVersion.


Свойство appVersion

Приведенный ниже код разделяет свойство appVersion на базовые компоненты, которые затем добавляются в объект navigator как свойства.

<HTML>
   <HEAD>
      <TITLE>Версия приложения</TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         // Запуск версии.
         function getVersionInfo() {
            var version = navigator.appVersion;

            // Помещение открывающей скобки "(".
            var iParen = version.indexOf("(", 0);

            // Версия клиента указывается перед открывающей скобкой "(".
            navigator.clientVersion = 
               version.substring(0, iParen - 1);
            var information = new Array();

            // Автоматически разделяет оставшиеся значения и помещает их
            // в массив.

            information = version.substring(iParen + 1,
               version.length - 1).split(";");

            // Первое значение представляет собой название платформы.
            navigator.platform = information[0];

            // Второе значение является информационным полем.
            navigator.information = information[1];

            /* Третье значение представляет собой дополнительную
               информацию, которая может быть равна null в зависимости
               от браузера и платформы. */
            navigator.extraInformation = information[2];
         }
         getVersionInfo();
      </SCRIPT>
   </HEAD>
   <BODY>
      <H1>Информация клиента</H1>
      <P>Код для разбора свойства appVersion.</P>
      <SCRIPT LANGUAGE="JavaScript">
         // Вывод информации.
         document.write("Platform: " + navigator.platform + "<BR>");
         document.write("Client Version: " + navigator.clientVersion + 
            "<BR>");
         document.write("Information: " + navigator.information + 
            "<BR>");
         document.write("Extra Info: " + navigator.extraInformation + 
            "<BR>");
      </SCRIPT>
   </BODY>
</HTML>



Окна и объект navigator

Объект navigator не используется совместно всеми загруженными экземплярами окна. Каждое окно имеет собственный экземпляр объект navigator. Хотя почти во всех случаях информация, представленная объектом navigator, одинакова для каждого окна, данное разделение имеет большое значение. По соображениям безопасности, если экземпляр страницы настраивает объект navigator, то доступ к нему может иметь только данный экземпляр.

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



Установки пользователя

Объект navigator обеспечивает доступ к информации о том, поддерживает ли браузер пользователя Java и cookies.


Поддержка Java

Чтобы определить, поддерживается ли Java на стороне клиента, объект navigator использует метод javaEnabled. Данный метод возвращает значение Boolean, которое определяет, может ли компьютер клиента отображать апплеты Java.

Используя метод javaEnabled, можно написать сценарий, который вставляет апплет или отображает сообщения для пользователя:

<SCRIPT LANGUAGE="JavaScript">
   if (navigator.javaEnabled()) 
      document.write("<APPLET NAME=demo CODE=demo.class " +
         "WIDTH=50 HEIGHT=50></APPLET>");
   else
      document.write("<B>This page cannot run with Java disabled." +
         "</B>");
</SCRIPT>


Поддержка cookie

Internet Explorer 4.0 содержит свойство cookieEnabled, которое определяет, поддерживает ли клиент cookie. Cookie позволяют сохранять небольшое количество информации, которая связана с текущей URL или доменом на машине пользователя. Некоторые пользователи не хотят, чтобы на их локальном жестком диске сохранялась какая-либо информация и поэтому отключают данный элемент браузера. Свойство cookieEnabled содержит логическое значение Boolean, которое указывает, отключил ли браузер данную поддержку. Используя это свойство, вы можете реализовать индивидуальную модель поведения, которая не использует cookie клиентской стороны, если оно недоступно.

К сожалению, Internet Explorer 3.0 и Netscape Navigator 4.0 не поддерживают свойство cookieEnabled. Поэтому данный метод нельзя использовать во всех случаях, чтобы определить, активизирован ли прием cookies на клиентской машине.



Новые свойства объекта navigator

Объект navigator поддерживает ряд новых свойств, которые вы можете использовать, чтобы адаптировать документ для различных пользователей. Эти свойства приведены в таблице 4.3.

Таблица 4.3. Новые свойства объекта navigator


Свойство Описание

cpuClass Тип CPU. Значение для процессора Pentium равно х86
systemLanguage Язык по умолчанию для системы. Для американского английского значение равно en-us
userLanguage Язык по умолчанию пользователя. Для американского английского значение равно en-us
platform Текущая операционная система пользователя. Для Microsoft Windows 95 значение равно Win32
appMinorVersion Вторая цифра в номере версии браузера. Значение для Internet Exploreir 4.0 равно 0
onLine Логическое значение, определяющее, читает ли пользователь страницу в оперативном режиме



 

Урок 5. Управление окном и фреймом


Реклама: