var htelSecondItem = clItems[1];
Здесь мы получаем второй пункт списка.
Отдельный пункт списка представляется экземпляром объекта HTMLOptionElement. Он поддерживает уже знакомое нам свойство disabled, позволяющее разрешить или запретить доступ к данному пункту списка.
А еще он поддерживает свойство selected, указывающее, выбран ли данный пункт списка. Значение true обозначает, что пункт списка выбран, а значение false — не выбран. Это свойство удобно применять, чтобы выяснить, какие пункты выбраны в списке, позволяющем выбирать сразу несколько пунктов (листинг 20.17).
Листинг 20.17
<FORM ACTION="#">
<P>
С помощью каких тегов HTML формируется таблица?
<SELECT ID="answer" NAME="answer" SIZE="5" MULTIPLE>
<OPTION>TR</OPTION>
<OPTION>DIV</OPTION>
<OPTION>TABLE</OPTION>
<OPTION>TH</OPTION>
<OPTION>TT</OPTION>
<OPTION>HEAD</OPTION>
<OPTION>TD</OPTION>
</SELECT>
</P>
</FORM>
.
var clItems = Ext.getDom("answer"). options;
if ((clItems[0].selected) && (clItems[2].selected)
&& (clItems[3].selected) && (clItems[6].selected)) {
var s = "Вы ответили правильно!";
} else {
var s = "Неправильно! Будьте внимательнее.";
}
В листинге 20.17 мы создали что-то наподобие онлайнового экзамена. Посетителю требуется выбрать в списке answer пункты, представляющие теги HTML, с помощью которых создаются таблицы. Если все эти пункты выбраны, ответ считается правильным.
Свойство form возвращает экземпляр объекта HTMLElement, представляющий Web-форму, в которой находится данный элемент управления:
var htelForm = Ext.getDom("answer"). form;
Метод focus делает данный элемент управления активным. Он не принимает параметров и не возвращает результата:
Ext.getDom("email"). focus();
Метод blur делает данный элемент управления, наоборот, неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления. Данный метод также не принимает параметров и не возвращает результата:
Ext.getDom("email"). blur();
Метод select выделяет все содержимое поля ввода или области редактирования. Он не принимает параметров и не возвращает результата:
Ext.getDom("email"). select();
Метод click позволяет имитировать щелчок на кнопке. Он не принимает параметров и не возвращает результата (листинг 20.18).
Листинг 20.18
<FORM ACTION="#">
<P>
Найти:
<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">
<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">
</P>
</FORM>
.
Ext.getDom("find"). click();
Свойства и методы объекта Element, применяемые для работы с элементами управления
А теперь обратимся к объекту Element библиотеки Ext Core и посмотрим, что он может предложить нам для работы с элементами управления.
Метод getValue возвращает значение, введенное в поле ввода или область редактирования, в виде строки или числа:
<экземпляр объекта Element>.getValue(<преобразовать в число>)
Если этому методу передать в качестве параметра значение false, он вернет значение поля ввода или области редактирования в виде строки. Если же ему передать значение true, он попытается преобразовать это значение в число и в случае успеха вернет его; в противном случае он вернет это значение в виде строки:
var sEmail = Ext.get("email"). getValue(false);
Метод focus делает данный элемент управления активным. Он не принимает параметров и не возвращает результата. Если вызвать этот метод у элемента Web- страницы, не являющимся элементом управления, ничего не произойдет:
Ext.get("email"). focus();
Метод blur делает данный элемент управления неактивным; при этом фокус ввода переносится на следующий в порядке обхода элемент управления:
Ext.get("email"). blur();
Данный метод также не принимает параметров и не возвращает результата. Если вызвать его у элемента Web-страницы, не являющимся элементом управления, ничего не произойдет.
Метод select поддерживает еще один селектор —:checked. Он соответствует всем установленным флажкам и переключателям:
var clChecked = Ext.get("cmain"). select(":checked");
События элементов управления
Специфические события, поддерживаемые элементами управления, перечислены в табл. 20.1. Их немного.
Элементы управления также поддерживают события dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover и mouseup, описанные в табл. 15.1.
Реализация поиска на Web-сайте
Теоретическая часть, посвященная Web-формам и элементам управления, закончена. Давайте попрактикуемся.
Для практики мы реализуем давно задуманное — поиск на нашем Web-сайте. Поиск будет осуществляться на основе информации, хранящейся в базе данных, которую мы создали еще в главе 18. База данных — вещь универсальная и может пригодиться для многих дел. Мы уже убедились в этом, когда в главе 19 создавали раздел "См. также" у Web-страниц, куда поместили связанные с ними материалы.
Чтобы усложнить себе задачу и упростить жизнь посетителям, мы реализуем поиск, во-первых, по названиям Web-страниц, во-вторых, по ключевым словам, связанным с каждой Web-страницей. Ключевым словом в данном случае называется специальным образом подобранное кодовое слово, характеризующее конкретный материал. Скажем, для материала, рассказывающего о теге <AUDIO>, ключевыми словами будут "мультимедиа" и "аудио", поскольку он описывает способ размещения на Web-страницах аудиороликов, относящихся к мультимедийным материалам.
Далее, мы предоставим посетителю возможность выбирать критерии поиска: только по названиям, только по ключевым словам или и по названиям, и по ключевым словам. Для этого мы используем раскрывающийся список, т. к. он занимает немного места на Web-странице и вполне информативен.
Что касается самого поиска, то реализовать его несложно. Достаточно просмотреть все три массива, составляющие нашу базу данных, найти элементы, содержащие название или ключевое слово, совпадающее с введенным посетителем значением, и скопировать их в другой массив, который будет хранить результаты поиска. Потом на основе полученного массива мы сформируем, скажем, список, пункты которого будут представлять собой гиперссылки на соответствующие Web-страницы, и вставим его в контейнер cmain. Почти как в случае раздела "См. также".
Еще мы предусмотрим ситуацию, когда посетитель введет не все искомое название или ключевое слово, а только его начало. Соответственно, Web-сценарий, который мы напишем, будет искать элементы базы данных, начало названия или одного из ключевых слов которого совпадает с тем, что ввел посетитель.
Что ж, основной план работ мы набросали, а детали будем прояснять по ходу дела. Начнем с базы данных.
Подготовка базы данных
Нам потребуется указать для каждого элемента массива, составляющего базу данных и представляющего одну из Web-страниц, список ключевых слов. Для этого мы создадим у конфигураторов — элементов этих массивов новое свойство keyword, которому и присвоим список соответствующих ключевых слов. Он будет представлять собой обычную строку с ключевыми словами, разделенными запятыми, — так его проще обрабатывать.
Откроем файл Web-сценариев data.js и поместим после кода, создающего свойство related со связанными данными, но перед кодом, выполняющим сортировку базы, такое выражение:
aHTML[0].keyword = "тип, версия";
Мы взяли первый элемент массива aHTML (с индексом 0), добавили к хранящемуся в нем конфигуратору свойство keyword и присвоили этому свойству строку с ключевыми словами "тип" и "версия". Следовательно, мы указали, что Web-страницу с описанием тега <!DOCTYPE> будут характеризовать эти два ключевых слова.
Аналогично укажем ключевые слова для остальных Web-страниц нашего Web- сайта. Необязательно для всех — хотя бы для нескольких, чтобы только проверить поиск в работе.
Создание Web-формы
На очереди — Web-форма, в которую посетитель будет вводить искомое слово или его часть. Вот только куда ее поместить? Давайте пока что вставим ее в контейнер cnavbar, ниже полосы навигации, непосредственно перед закрывающим тегом </DIV>, формирующим этот контейнер. В
