На главную страницу
Форум txt.version   




Статья :: Дополнительные Статьи
Оглавление | Назад | Вперёд | Индекс

Глава 13
Дополнительные Статьи

В этой главе рассматриваются некоторые специальные понятия и приложения, расширяющие мощь и гибкость JavaScript.

В главе имеются следующие разделы:

Использование JavaScript-URL


Вам, возможно, уже знакомы стандартные типы URL: http:, ftp:, file: и так далее. В Navigator'е Вы можете использовать также URL типа javascript: для выполнения операторов JavaScript вместо загрузки документа. Вы просто используете строку, начинающуюся с javascript:, в качестве значения атрибута HREF тэгов anchor. Например, Вы можете определить такую гиперссылку для перезагрузки текущей страницы:

<A HREF="javascript:history.go(0)">Reload Now</A>

В общем, Вы можете поместить любой оператор или вызов функции после префикса javascript: в URL.

Можно по-разному использовать JavaScript-URL для добавления функциональности в Ваши приложения. Например, можно выполнить инкремент счётчика p1 в родительском фрэйме, если пользователь щёлкает по гиперссылке, с помощью такой функции:

function countJumps() {
   parent.p1++
   window.location=page1
}

Для вызова этой функции используйте JavaScript-URL в стандартной гиперссылке HTML:

<A HREF="javascript:countJumps()">Page 1</A>

Здесь предполагается, что page1 это строка, представляющая URL.

Если значение выражения, идущего после URL-префикса javascript:, вычисляется в undefined, новый документ не загружается. Если значение вычисляется в определённый тип, значение конвертируется в строку, которая специфицирует источник загружаемого документа.

Использование клиентских карт изображений


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

Вместо стандартных URL Вы можете использовать в клиентских картах JavaScript-URL, например:

<MAP NAME="buttonbar">
<AREA SHAPE="RECT" COORDS="0,0,16,14"
   HREF ="javascript:top.close(); window.location = newnav.html">
<AREA SHAPE="RECT" COORDS="0,0,85,46"
   HREF="contents.html" target="javascript:alert(`Loading
   Contents.'); top.location = contents.html">
</MAP>

Использование серверных карт изображений


Клиентские карты предоставляют функциональность для выполнения большинства задач, но стандартные (иногда называемые серверными) карты изображений придают ещё большую гибкость. Вы специфицируете стандартную карту тэгом атрибутом ISMAP в тэге IMG, который является гиперссылкой. Например,

<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>

Если Вы щёлкаете по изображению с атрибутом ISMAP, Navigator запрашивает URL в такой форме:

URL?x,y

где URL это документ, специфицированный значением атрибута HREF, а x и y это горизонтальная и вертикальная координаты указателя мыши (в пикселах от верхнего левого угла изображения) во время щелчка. (Изображение "about:logo" встроено в Navigator и отображает логотипом Netscape.)

Запросы карт традиционно отправляются на сервер, где CGI-программа выполняет функцию просмотра базы данных. С помощью клиентского JavaScript, однако, Вы можете просматривать на стороне клиента. Можно использовать свойство search объекта location для разбора координат x и y и выполнения соответствующей акции. Например, у Вас имеется файл img.html со следующим содержимым:

<H1>Click on the image</H1>
<P>
<A HREF="img.html"><IMG SRC="about:logo" BORDER=0 ISMAP></A>
<SCRIPT>
str = location.search
if (str == "")
   document.write("<P>No coordinates specified.")
else {
   commaloc = str.indexOf(",") // местонахождение запятой
   document.write("<P>The x value is " + str.substring(1, commaloc))
   document.write("<P>The y value is " +
      str.substring(commaloc+1, str.length))
}
</SCRIPT>

Если Вы щёлкаете по изображению, Navigator перезагружает страницу (поскольку атрибут HREF специфицирует тот же самый документ), добавляя в URL координаты x и y щелчка мыши. Операторы блока else отображают затем координаты x и y. На практике Вы можете перенаправлять на другую страницу (устанавливая location) или выполнять какое-нибудь другое действие на основе значений x и y.

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


Вы можете использовать два свойства объекта window, status и defaultStatus, для отображения сообщений в статусной строке Navigator'а в нижней части окна. Navigator обычно использует status bar для вывода таких сообщений, как "Contacting Host..." и "Document: Done." Сообщение defaultStatus появляется, если в статусной строке больше ничего нет. Свойство status отображает временное сообщение, как, например, при проведении указателя мыши над гиперссылкой.

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

defaultStatus = "Some rise, some fall, some climb...to get to Terrapin"

Создание подсказок обработчиками onMouseOver и onMouseOut


По умолчанию, если Вы проводите указатель мыши над гиперссылкой, в статусной строке отображается URL назначения гиперссылки. Вы можете установить status в обработчиках onMouseOut и onMouseOver гиперссылки или области изображения для отображения подсказок в статусной строке. Обработчик события обязан возвращать true для установки значения status. Например,

<A HREF="contents.html"
   onMouseOver="window.status='Click to display contents';return true">
Contents
</A>

В это примере подсказка "Click to display contents" выводится в статусной строке, когда указатель мыши проходит над гиперссылкой.

Использование кук


Куки Netscape это механизм хранения данных на клиенте в файле cookies.txt. Поскольку HyperText Transport Protocol (HTTP) это бесстатусный/stateless протокол, куки являются способом обслуживания информации в промежутках между клиентскими запросами. В этом разделе обсуждаются основы использования кук/cookies и дан простой пример. Полное описание кук см. в книге Клиентский JavaScript. Справочник.

Кука это небольшой блок информации, иногда имеющий строк действия и добавляемый в cookie-файл в следующем формате:

name=value;expires=expDate;

name это имя хранимых данных, а value это значение. Если name и value содержат одну запятую, точку с запятой или пробелы, Вы обязаны использовать функцию escape для их кодирования и функцию unescape - для декодирования.

expDate это дата окончания срока действия в GMT-формате даты:

Wdy, DD-Mon-YY HH:MM:SS GMT

Хотя он слегка отличается от формата строки даты, возвращаемой методом toGMTString объекта Date, метод toGMTString можно использовать для установки срока действия куки.

Дата-срок действия куки является параметром по выбору/optional, указывающим срок действия куки. Если expDate не специфицирован, кука перестаёт действовать после выхода пользователя из текущей сессии Navigator'а. Navigator обслуживает и запрашивает куку, только если строк действия куки ещё не передан.

О функциях escape и unescape см. книгу Клиентский JavaScript. Справочник.

Ограничения


Куки имеют следующие ограничения:

  • всего 300 кук в cookie-файле.
  • 4 Kb на одну куку как сумму имени и значения.
  • 20 кук на сервер или домен (полностью специфицированные хосты и домены рассматриваются как отдельные объекты и имеют ограничение в 20 кук каждый, не суммируясь).

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

Использование кук в JavaScript


Свойство document.cookie это строка, содержащая имена и значения всех кук Navigator'а. Вы можете использовать это свойство для работы с куками в JavaScript.

Вот что Вы можете делать с куками:

  • Устанавливать значение куки, специфицируя, по выбору, срок действия куки.
  • Получить значение куки, задав её имя.

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

// Установить значение куки. Дата окончания действия - не обязательна.
//
function setCookie(name, value, expire) {
   document.cookie = name + "=" + escape(value)
   + ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}

Обратите внимание на использование функции escape для кодирования специальных символов (точки с запятой, запятой, пробелов) в строке-значении. Эта функция принимает, что имена кук не содержат специальных символов.

Следующая функция возвращает значение куки, задавая имя куки:

function getCookie(Name) {
   var search = Name + "="
   if (document.cookie.length > 0) { // если есть какие-либо куки
      offset = document.cookie.indexOf(search)
      if (offset != -1) { // если кука существует
         offset += search.length
         // установить индекс начала значения
         end = document.cookie.indexOf(";", offset)
         // установить индекс конца значения куки
         if (end == -1)
            end = document.cookie.length
         return unescape(document.cookie.substring(offset, end))
      }
   }
}

Обратите внимание на использование функции unescape для декодирования специальных символов в значении куки.

Использование кук: пример


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

Вам необходимо определить дополнительно ещё одну функцию в HEAD/шапке документа. Эта функция, register, создаёт куку TheCoolJavaScriptPage и значение, передаваемое ей - в качестве аргумента.

function register(name) {
   var today = new Date()
   var expires = new Date()
   expires.setTime(today.getTime() + 1000*60*60*24*365)
   setCookie("TheCoolJavaScriptPage", name, expires)
}

BODY документа использует getCookie (определённую в предыдущем разделе) для проверки существования куки TheCoolJavaScriptPage и выводит приветствие, если кука имеется. Имеется также форма, которая вызывает register для добавления куки. Обработчик onClick вызывает также history.go(0) для перерисовки страницы.

<BODY>
<H1>Register Your Name with the Cookie-Meister</H1>
<P>
<SCRIPT>
var yourname = getCookie("TheCoolJavaScriptPage")
if (yourname != null)
   document.write("<P>Welcome Back, ", yourname)
else
   document.write("<P>You haven't been here in the last year...")
</SCRIPT>
<P> Enter your name. When you return to this page within a year,
you will be greeted with a personalized greeting. 
<BR>
<FORM onSubmit="return false">
Enter your name: <INPUT TYPE="text" NAME="username" SIZE= 10><BR>
<INPUT TYPE="button" value="Register"
   onClick="register(this.form.username.value); history.go(0)">
</FORM>

Определение установленных Plug-in'ов


Вы можете использовать JavaScript для того чтобы определить, имеется ли у пользователя определённый установленный plug-in; затем Вы можете отобразить данные внедрённого plug-in'а, если plug-in установлен, или вывести какую-нибудь другую информацию (например, рисунок или текст), если не установлен. Вы можете также определить, может ли клиент обрабатывать определённый MIME-тип (Multipart Internet Mail Extension). В этом разделе даны объекты и свойства, необходимые для обработки plug-in'ов и MIME-типов. Более детальную информацию об этих объектах и свойствах см. в книге Клиентский JavaScript. Справочник.

Объект navigator имеет два свойства для проверки установленных plug-in'ов: массив mimeTypes и массив plugins.

Массив mimeTypes


mimeTypes это массив всех MIME-типов, поддерживаемых клиентом (внутренне - через вспомогательные приложения, или с помощью plug-in'ов). Каждый элемент массива является MimeType-объектом, который имеет свойства своего типа, описание, расширение файла и подключённые plug-in'ы.

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

Таблица 13.1 Значения свойства MimeType для рисунков JPEG
Выражение Значение
navigator.mimeTypes["image/jpeg"].type
image/jpeg
navigator.mimeTypes["image/jpeg"].description
JPEG Image
navigator.mimeTypes["image/jpeg"].suffixes
jpeg, jpg, jpe, jfif, pjpeg, pjp
navigator.mimeTypes["image/jpeg"].enabledPlugin
null

Следующий скрипт проверяет, может ли клиент работать с клипами QuickTime:

var myMimetype = navigator.mimeTypes["video/quicktime"]
if (myMimetype)
   document.writeln("Click <A HREF='movie.qt'>here</A> to см. a " +
      myMimetype.description)
else
   document.writeln("Too bad, can't show you any movies.")

Массив plugins


plugins это массив всех plug-in'ов, установленных в данный момент на клиенте. Каждый элемент массива является Plugin-объектом, имеющим свойства для своего имени, имени файла и описание, а также массив MimeType-объектов для MIME-тпов, поддерживаемых данным plug-in'ом. Пользователь может получить список установленных plug-in'ов, выбрав меню About Plug-ins из Help. Например, в следующей таблице резюмируются значения для plug-in'ов LiveAudio.

Таблица 13.2 Значения свойств Plugin для plug-in'а LiveAudio
Выражение Значение
navigator.plugins['LiveAudio'].name
LiveAudio
navigator.plugins['LiveAudio'].description
LiveAudio - Netscape Navigator sound
playing component
navigator.plugins['LiveAudio'].filename
d:\nettools\netscape\nav30\
Program\plugins\NPAUDIO.DLL
navigator.plugins['LiveAudio'].length
7

В Таблице 13.2 значение свойства length указывает, что navigator.plugins['LiveAudio'] имеет массив объектов MimeType, содержащий 7 элементов. Значения свойств второго элемента этого массива показаны в следующей таблице.

Таблица 13.3 Значения MimeType для plug-in'а LiveAudio
Выражение Значение
navigator.plugins['LiveAudio'][1].type
audio/x-aiff
navigator.plugins['LiveAudio'][1].description
AIFF
navigator.plugins['LiveAudio'][1].suffixes
aif, aiff
navigator.plugins['LiveAudio'][1].enabledPlugin.name
LiveAudio

Следующий скрипт проверяет, установлен ли Shockwave plug-in, и отображает внедрённый Shockwave-клип, если это так:

var myPlugin = navigator.plugins["Shockwave"]
if (myPlugin)
   document.writeln("<EMBED SRC='Movie.dir' HEIGHT=100 WIDTH=100>")
else
   document.writeln("You don't have Shockwave installed!")
Оглавление | Назад | Вперёд | Индекс

Дата последнего обновления: 25 мая 1999 года.
Copyright (c) 1999 Netscape Communications Corporation

Дополнительные Статьи

страницы в данном разделе 
 Дополнительные Статьи  Индекс
 Отображение Ошибок с Помощью Консоли JavaScript  Клиентский JavaScript. Руководство.
 Клиентский JavaScript. Руководство.  Ведрение JavaScript в HTML
 Обработка Событий  Выражения и Операции
 Функции  Словарь
 Значения, Переменные и Литералы  Клиентский JavaScript. Руководство.
 JavaScript. Обзор.  LiveConnect. Обзор.
 LiveAudio и LiveConnect  Mail-Фильтры
 Использование Объектов Navigator'a  Работа с Объектами
 Объектная Модель. Детали.  Приложения
 Специфические Клиентские Возможности  Возможности Ядра Языка
 Работа с LiveConnect  об Этой Книге
 Регулярные Выражения  Безопасность в JavaScript
 Операторы  toc.htm
 whatsnew.htm  windows.htm


Разделы
Околокомпьютерная литература (375)
Программирование (102)
Программы (75)
ОС и Сети (49)
Интернет (29)
Аппаратное обеспечение (16)
Базы данных (6)

Содержание сайта (выборка)
Apache
Протоколы TCP/IP (принципы, протоколы и архитектура)

PHP, PELR, JSP
PHP
JavaServer Pages (JSP)

Базы данных
Основы mysql
СУБД INFORMIX
СУБД POSTGRES
Основы проектирования реляционных баз данных

HTML, javascript
Спецификация HTML 4.01
Каскадные Таблицы Стилей, Уровень 2
Клиентский JavaScript. Справочник.
JavaScript руководство пользователя
Серверный JavaScript 1.4. Руководство по Использованию.

Паскаль, C, C++, C#
GCC (примеры)
FAQ Валентинa Озеровa DELPHI
C





 
©  programming-lang.com  справочник программиста