Создать сайт. Видекурсы

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

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



Реклама:


Глава 8. Сценарии и элементы



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

Примеры элементов обсуждаются в главах 9 и 10.

Рассмотрены следующие темы:



Идентификация элементов

При написании сценариев и таблиц стилей можно применить написанный код к одному определенному элементу, ко всем элементам одного типа или к смешанному набору элементов. Объекты элементов имеют несколько свойств, которые упрощают их идентификацию перечисленными выше способами. Свойства id и className объекта содержат значения соответствующих атрибутов ID и CLASS элемента, а его свойство tagName содержит имя тега элемента. Код может использовать свойство id для создания ссылки на одиночный элемент, свойство tagName - для ссылки на все элементы данного типа и свойство className - для ссылки на указанные элементы.

Элементы, которые имеют атрибут NAME, также имеют свойство name, которое содержит значение атрибута. Вы можете использовать в программе свойство name для идентификации одиночного элемента или группы связанных элементов (таких как кнопки-переключатели). Но свойство name не так широко используется как свойство id и объектная модель включает его преимущественно для обеспечения обратной совместимости.

Значения свойства tagName набраны символами в верхнем регистре. Свойства id, name и className являются чувствительными к регистру. Значение coolstuff, например, представляет класс, отличный от значения coolstuff в чувствительном к регистру языке, типа JavaScript. Таблицы стилей, однако, связаны с элементами независимо от регистра.

В табл. 8.1 суммирована информация о четырех свойствах, которые идентифицируют элементы.

Таблица 8.1. Свойства, идентифицирующие элементы


Атрибут Свойство Является ли чувствительным к регистру? Элементы, к которым применяется

(Ничего) tagName Всегда в верхнем регистре Все, включая примечания
ID id Да Все, за исключением примечаний
CLASS className Да Все, за исключением примечаний
NAME name Да Anchor, Applet, Button, Form, IMG, Input, Map, Meta, Object, Select И TextArea

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

<HTML>
   <HEAD>
      <TITLE>Identifying Elements</TITLE>
      <SCRIPT FOR="document" EVENT="onclick()" LANGUAGE="JavaScript">
         // Событие нажатия генерируется в документе независимо от места 
         // нажатия кнопки.
         // Свойство стиля дает доступ к внутреннему стилю.
         var curElement = event.srcElement;
         if ("F123" == curElement.id.toUpperCase()) {
            // Toggle element color between red and blue.
            if ("red" == curElement.style.color) 
               curElement.style.color = "blue";
            else
               curElement.style.color = "red";
         }
         if ("COOLSTUFF" == curElement.className.toUpperCase()) {
            // Увеличивает или уменьшает размер шрифта при нажатии
            // кнопки мыши.
            if ("" == curElement.style.fontSize) 
               curElement.style.fontSize = "150%";
            else
               curElement.style.fontSize = "";
         }
         if ("H1" == curElement.tagName) {
            // Переключает режимы отображения заголовка: выровненный 
            // по центру или по левому краю.
            if ("center" == curElement.align) 
               curElement.align = "";
            else
               curElement.align = "center";
         }
      </SCRIPT>
   </HEAD>
   <BODY>
      <P ID="f123" STYLE="color:red">
         Данный параграф имеет уникальный номер ID.</P>
      <H1>Clicking on an H1 element changes its alignment.</H1>
      <P>This paragraph contains 
         <STRONG CLASS="coolstuff">cool stuff.</STRONG>
      </P>
      <H1 CLASS="coolstuff">
         Данный заголовок также принадлежит классу cool stuff.
      </H1>
   </BODY>
</HTML>

В приведенном выше коде значения className и id преобразуются в верхний регистр перед проведением сравнений. Таким образом, данные значения обрабатываются без учета регистра.



Доступ к атрибутам элемента

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

В главе 11 обсуждается доступ к стилю элемента, а глава 13 содержит обсуждение доступа к содержанию элемента.



Типы данных

В HTML атрибут всегда использует один из следующих типов данных: число (number), строка (string), строка из стандартного списка (string from predefined list) или логическое значение (compact value). (Логические значения содержат значения true (истина) или false (ложь)). Определение типа документа (DTD) устанавливает тип данных для каждого атрибута.

В объектной модели динамического HTML каждый атрибут представлен как свойство, принадлежащее к одному из четырех перечисленных ниже типов данных:

Сценарий в приведенном ниже HTML-документе использует все четыре типа данных:

<HTML>
   <HEAD>
      <TITLE> Программирование атрибутов - типы данных </TITLE>
   </HEAD>
   <BODY>
      <INPUT TYPE=TEXT SIZE=35 ID="txt1" DISABLED>
      <H1 ALIGN="Left" ID="hd1" ONCLICK="alert(`Clicked!')">
         Это выровненный по левому краю заголовок.
      </H1>
      <SCRIPT LANGUAGE="JavaScript">
         alert(document.all.txt1.disabled); // Логическое значение true(истина)
         alert(document.all.hd1.align);     // Значение String(строка)
         alert(document.all.txt1.size);     // 32-разрядное целое, равное 35
         alert(document.all.hd1.onclick);   // Указатель функции 
      </SCRIPT>
   </BODY>
</HTML>

Свойство представлено для каждого определенного атрибута в HTML, даже если атрибут не явно определен в документе. Например, элемент Input в предыдущем коде не имеет определенного значения VALUE, но в объектной модели все элементы Input всегда представляют свойство value. Значение свойства, которое соответствует неопределенному атрибуту, зависит от его типа данных. Свойства строк содержат пустые строки. Свойства числовых значений содержат значения по умолчанию для соответствующих атрибутов. Логические свойства содержат false. Указатели функций содержат null.

Атрибут свойства содержит код, который выполняется в результате определенного действия. При анализе строки кода создается объект function. Свойство, представляющее подобное событие, содержит не определение функции, а указатель на функцию.

Если назначить значение одного типа данных свойству с другим типом данных, то результат будет различен в разных языках написания сценариев Значение будет приведено к типу данных свойства или возникнет ошибка. Например, если вы назначаете число строковому свойству в JavaScript, то транслятор преобразует число в строку до проведения назначения. Если язык поддерживает явный переход от одного типа к другому, то вы должны явно согласовать значения для получения предсказуемых результатов Функция parseInt в JavaScript, например, изменяет строковое представление числа на действительное число:


document.myText.size = parseInt("100");  // 100


Соглашения об именовании

Язык HTML позволяет определять атрибуты независимо от регистра, а JavaScript является чувствительным к регистру. Для упрощения программирования в чувствительных к регистру языках объектная модель представляет все свойства, используя соглашение об именовании (naming convention), которое позволяет определять имя свойства для любых существующих атрибутов без необходимости поиска их в документации.

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

Для каждого атрибута соответствующее свойство имеет имя, совпадающее с названием атрибута, за исключением двух случаев: свойство className представляет атрибут CLASS, а свойство htmlFor представляет свойство FOR (используемое с элементами Label и Script). Данные исключения необходимы, поскольку ключевые слова for и class зарезервированы во многих языках программирования.


Доступ к исходным значениям

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

Метод getAttribute использует имя свойства как строку и возвращает значение, которое находится в исходном коде. Например, если исходный файл устанавливает атрибут SIZE равным строке big, то свойство size возвращает размер по умолчанию, равный 20. Но getAttribute ("size") возвращает строку big, поскольку метод getAttribute всегда возвращает неизменное значение из исходного кода.

Метод setAttribute позволяет разработчику управлять обратной операцией, таким образом строка может быть вставлена в поток HTML, даже если значение свойства является числом. Например, setAttribute("size", "small") помещает строковое значение small в атрибут SIZE. Свойство элемента size по-прежнему возвращает значение 20.

Метод removeAttribute используется для удаления атрибута из объекта.

Эти три метода представляют параметр options, который управляет просмотром. В настоящее время параметр управляет только чувствительностью к регистру. По умолчанию значение параметра options равно false, поэтому просмотр является нечувствительным к регистру. Если значение options равно true, то просмотр является чувствительным к регистру, используя внутреннее выделение прописными буквами известных атрибутов и выделение прописными буквами нераспознаваемых атрибутов в исходном коде.

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

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


Перечислимые типы данных

Многие другие объектные модели представляют списки значений как перечислимые типы данных. Обычно перечислимый тип данных является целочисленным или другим значением, и определено множество констант для представления его разрешенных значений. Для гарантии языковой нейтральности в объектной модели динамического HTML не используется перечисление для целых значений. Напротив, все списки значений представлены как строковые значения. Например, атрибут ALIGN сохраняет строку, которая, как предполагается, является одним из трех строковых значений: left, right и center.

Атрибуту может быть назначена строка, регистр символов которой не имеет значения, и она будет правильно учтена. Например, значение атрибута ALIGN в HTML или соответствующего свойства align может быть равно left или LeFT, или любой другой комбинации строчных и прописных букв. Однако при извлечении значение всегда возвращается в нижнем регистре.

Перечислимые строковые значения преобразуются в нижний регистр во время анализа или назначения. Исходный регистр данных значений недоступен. Методы getAttribute, setAttribute и removeAttribute нe учитывают исходный регистр символов перечислимых строк и возвращают их в нижнем регистре.


Нераспознаваемые атрибуты

Обработка нераспознаваемых элементов в объектной модели была описана в главе 7. Динамический HTML корректно представляет нераспознаваемые атрибуты в любом элементе при помощи методов атрибутов. Используя эти методы, нераспознаваемые атрибуты можно добавить в любой элемент или удалить из него. В JavaScript данный подход получил дальнейшее развитие - все нераспознаваемые атрибуты могут быть также представлены в качестве свойства элемента, как показано ниже:

<H1 ID=myH1 badAttribute=Test>

JavaScript обеспечивает доступ к свойству, названному badAttribute так же, как и к другим свойствам элемента:


alert(document.all.myH1.badAttribute)                 // Test
alert(document.all.myH1.getAttribute("badAttribute")) // Test

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



Информация анализа

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

Информация анализа(parsing information) включает в себя рассмотренную ранее идентификацию свойств, все известные и неизвестные HTML-атрибуты, таблицу внутренних стилей и взаимоотношения элементов с другими элементами в соответствии с определением DTD. Таблица внутренних стилей представляет информацию анализа, а не информацию воспроизведения, поскольку она явно определена в источнике документа, а не рассчитана во время воспроизведения.

Информация воспроизведения (rendering information) представляет собой информацию, которая рассчитывается браузером в ходе формирования документа. Информация воспроизведения включает координаты и размер элемента относительно контекста воспроизведения.

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



Определение иерархии контейнеров HTML

Есть несколько методов определения элементов, которые находятся внутри других элементов. Как упоминалось выше, родительский элемент может быть определен с помощью свойства parentElement. Дочерние элементы, которые находятся внутри элемента, перечислены в семействах элемента children и all. Семейство children представляет прямые дочерние элементы, а в семействе all перечислены все элементы.


Доступ к дочерним элементам

Семейство all документа представляет все элементы HTML, которые находятся внутри документа. Данная концепция иерархии контейнеров выполняется для каждого объекта элемента. Каждый объект элемента также представляет семейство all, которое содержит все элементы, находящиеся внутри данного элемента. Кроме того, семейство children представляет элементы, которые являются прямыми потомками текущего элемента. Данные семейства работают в соответствии с теми же принципами, что и семейства элементов документа, введенные в главе 7. Используя данные семейства, можно создать совершенно самостоятельные элементы. Ниже приведено несколько примеров:


// Все элементы H1 являются дочерними элементами тела документа
document.body.children.tags("H1") 
// Все элементы LI в третьем элементе UL на странице
document.all.tags("UL")[2].children.tags("LI")
// Все элементы Paragraph, которые находятся внутри первого элемента DIV
// и во вложенных элементах DIV или Table
document.all.tags("DIV")[0].all.tags("P")


Проверка вложенности элементов

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

Метод contains был введен, чтобы упростить написание обработчиков событий onmouseover и onmouseout. В главе 3 был приведен пример использования метода contains для проверки того, что указатель мыши был перемещен относительно элемента, на котором возникло событие, а не относительно просто дочернего элемента.



Свойство sourceIndex

Все элементы представляют 32-разрядное целое свойство sourceIndex, которое содержит порядковое положение элемента в семействе all документа только для чтения. Оно же определяет положение элемента в дереве анализа, если дерево было преобразовано в список. Свойство sourceIndex может быть использовано для определения относительного положения элемента и его связей с другими элементами в документе.

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



Создание дерева анализа

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

<HTML>
   <HEAD>
      <TITLE> Построитель дерева </TITLE>
      <SCRIPT LANGUAGE="JavaScript">
         function buildTree() {
            var intParents = 0;
            var intIndent = 0;
            // strStruct сохраняет строку HTML, которая будет 
            // представлять документ.
            var strStruct = "<HTML><TITLE>Document Tree</TITLE>" +
               "<BODY><TABLE BORDER CELLPADDING=5><TR>";
            var elParent;
            // Просмотр всех элементов в документе.
            for (var intLoop = 0; intLoop < document.all.length;
                  intLoop++) {
               elParent = document.all[intLoop];
               // Определения глубины вложенности элемента.
               while (elParent.tagName != "HTML") {
                  intParents++;
                  elParent = elParent.parentElement;
               }
               // Установка вложения или прекращение вложения элементов 
               // на основе нового значения глубины вложенности.
               if (intParents > intIndent)
                  strStruct +=
                     "<TABLE BORDER WIDTH=100% CELLPADDING=5><TR>";
               else if (intParents < intIndent) { 
                  for (var intClose = intParents;
                        intClose < intIndent; intClose++)
                     strStruct += "</TABLE>";
               }
               intIndent = intParents;
               intParents = 0;
               strStruct += "<TD>" +
                  document.all[intLoop].tagName;
            }
            // Закрытие всех оставшихся областей действия.
            for (var intClose = intParents; intClose < intIndent;
                  intClose++)
               strStruct += "</TD></TR></TABLE>";
            strStruct += "</BODY></HTML>";
               // Вывод нового документа в новом окне.
            var w = window.open("", "tree");
            w.document.open();
            w.document.write(strStruct);
            w.document.close();
         }
         window.onload = buildTree;
      </SCRIPT>
   </HEAD>
   <BODY>
      <H1>Tree Builder</H1>
      <UL>
         <LI>Test Item 1
            <UL>
               <LI>Subitem 1
               <LI>Subitem 2
            </UL>
         </LI>
         <LI>Test Item 2</LI>
      </UL>
      <DIV>
         <P>This is <EM>cool.</EM></P>
      </DIV>
   </BODY>
</HTML>

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

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

Рис. 8.1. Иерархия контейнеров HTML-документа



Свойство document

Каждый элемент использует свойство document, представляющее документ, которому принадлежит элемент. Данное свойство позволяет общим сценариям определять документ, а в документе - окно, которое является исходным для произвольного элемента. Например, приведенное ниже выражение ссылается на окно, содержащее элемент:


myElement.document.parentWindow  // The window for an element.



Создание новых элементов

В документ можно добавлять элементы, используя один из двух методов: создавая новый элемент в памяти и связывая его с документом или прямо изменяя основное содержание HTML.

Прямое изменение основного содержания HTML обсуждается в главе 13. В данном разделе представлен первый метод, создание элементов в памяти.

Некоторые элементы можно создать, используя метод createElement документа или оператор new окна. Оба метода выполняют одинаковые действия и возвращают новый объект элемента. Метод createElement является независимым от языка механизмом образования элементов. Оператор new поставляется для совместимости с Netscape Navigator. Новые созданные объекты не поддерживаются в памяти и не связываются с документом до тех пор, пока не будут явно добавлены в документ. Приведенный ниже пример демонстрирует использование этих двух методов для создания элемента IMG:


var img = new Image();
var img = document.createElement("IMG");

Internet Explorer 4.0 позволяет создавать таким образом только три элемента: IMG, Option и Area.

Вы можете динамически добавлять новые элементы Option и Area в окна списков и карт изображений, соответственно. Добавление изображений в настоящий момент ограничено возможностью предварительной загрузки изображений в кэш. Элемент IMG сам по себе не может быть добавлен в документ. Вместо этого в процессе добавления изображение загружается в кэш и адрec URL изображения назначается атрибуту src существующего изображения, что приводит к отображению нового изображения, как показано ниже:


var img = new Image();
img.src = "cool.gif";  // Загружает изображение в фон.
document.all.myImage.src = "cool.gif";  // Использует загруженное изображение.

Элементы New Option и Area могут быть добавлены в документ. Элемент Select представляет семейство options с содержащимися в нем элементами Option, а элемент Map представляет семейство areas, содержащее элементы Area. Данные семейства позволяют динамически добавлять или удалять дополнительные элементы Option или Area.

Метод добавления или удаления элементов, а также примеры использования предварительно загруженных изображений, обсуждаются в следующих двух главах. Все остальное содержание элемента Body документа может быть изменено путем прямого изменения HTML, что обсуждается в главе 13.



Настройка элементов

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

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



Действия по умолчанию

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



Настройка существующих элементов

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

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


Проверка наличия атрибута

Для изменения поведения элемента могут быть использованы индивидуальные атрибуты. Код может проверять элемент для выяснения наличия атрибута и выполнять необходимое действие при выполнении данного условия:

<IMG ID="image1" SRC="img1.gif" dragEnabled>
<H1 ID="header1">Test</H1>
<SCRIPT LANGUAGE="JavaScript">
   alert(document.all.image1.getAttribute("dragEnabled") == null);
      // false
   alert(document.all.header1.getAttribute("dragEnabled") == null);
      // true
</SCRIPT>

Данный пример демонстрирует добавление индивидуальных атрибутов и простую проверку их наличия. Код в главе 12 расширяет данный пример путем обеспечения возможноcmu перемещения любого элемента с атрибутом dragEnabled по документу.

Индивидуальный атрибут, используемый таким способом, отличается от логического значения. Индивидуальный атрибут определяет модель поведения просто своим присутствием, в отличие от логического значения, которое устанавливает модель поведения, если равно true. Для отключения способности перемещения элемента в предыдущем примере в коде необходимо удалить атрибут dragEnabled с помощью метода removeAttribute, а не просто изменить его значение на false.



Определяемые пользователем элементы

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


// Первый экземпляр элемента LastEditBy
document.all.tags("LASTEDITBY")[0].getAttribute("name")

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

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


Константы на основе HTML

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

Приведенный ниже код использует нераспознаваемый элемент HTMLConstant для хранения всех необходимых констант. HTMLConstant поддерживает три атрибута: id, value и type. Атрибуты id и value необходимы: они определяют имя константы и значение по умолчанию. Атрибут type является необязательным, поскольку все константы по умолчанию представляют строки. Если требуется указать целое и вещественную константу, то должен быть определен атрибут type.

<HTML>
   <HEAD>
      <TITLE> Константы на основе HTML </TITLE>
      <HTMLCONSTANT id="startPosition" value="3" type="integer">
      <HTMLCONSTANT id="endPosition" value="2.02" type="float">
      <HTMLCONSTANT id="defaultUser" value="Scott" type="string">
   
      <SCRIPT LANGUAGE="JavaScript">
         function setupConstants() {
            // Получение всех констант.
            var Constants = document.all.tags("HTMLCONSTANT");
            document._Constants = new Object();
            for (var intLoop = 0; intLoop < Constants.length;
                  intLoop++) {
               var temp = Constants[intLoop];
               // Определение типа данных.
               if ("integer" == temp.type)
                  document._Constants[temp.id] = parseInt(temp.value);
               else if ("float" == temp.type)
                  document._Constants[temp.id] =
                     parseFloat(temp.value);
               else
                  // По умолчанию установлен тип данных String.
                  document._Constants[temp.id] = temp.value;
            } 
         }
      </SCRIPT>
   </HEAD>
   <BODY ONLOAD="setupConstants()">
      <H1>HTML-Based Constants</H1>
   </BODY>
</HTML>

На все константы, которые представлены в подобъекте документа _Constants, может быть установлена ссылка следующим образом:


document._Constants.constantID 

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


Индивидуальные контейнеры содержания

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

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

Хотя обсуждение данного вопроса выходит за рамки данной книги, но существует язык разметки XML (Extensible Markup Language - расширяемый язык разметки), разработанный для обработки расширяемых пользователем элементов. XML использует синтаксис на основе SGML и подобен HTML в том смысле, что может описать разницу между контейнером и пустым элементом. Более подробную информацию об XML можно найти на Web-узле консорциума W3C (World Wide Web Consortium - консорциум Всемирной паутины) или на Web-узле компании Microsoft .Урок 9. Программирование индивидуальных элементов.




Реклама: