
- •Лабораторная работа № 16 «JavaScript: Web-формы и элементы управления. Свободно позиционируемые элементы Web-страницы
- •Создание Web-форм
- •Создание элементов управления
- •Поле ввода
- •Поле ввода пароля
- •Поле ввода значения для поиска
- •Область редактирования
- •Переключатель
- •Список, обычный или раскрывающийся
- •Надпись
- •Прочие элементы управления
- •Специальные селекторы css, предназначенные для работы с элементами управления
- •Свойства и методы объекта htmlElement, применяемые для работы с элементами управления
- •Свойства и методы объекта Element, применяемые для работы с элементами управления
- •События элементов управления
- •Реализация поиска на Web-сайте
- •Подготовка базы данных
- •Создание Web-формы
- •Написание Web-сценария, выполняющего поиск
- •Понятие свободно позиционируемого элемента Web-страницы
- •Создание свободно позиционируемых элементов
- •Средства библиотеки Ext Core для управления свободно позиционируемыми элементами
- •Реализация усовершенствованного поиска
- •Создание контейнера с Web-формой поиска
- •Написание Web-сценария, выполняющего поиск
Свойства и методы объекта 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");
События элементов управления
Специфические события, поддерживаемые элементами управления, перечислены в табл. 16.1.
Таблица 16.1. Специфические события, поддерживаемые элементами управления
Элементы управления также поддерживают события dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover и mouseup, описанные в табл. 13.1.
Реализация поиска на Web-сайте
Реализуем поиск на нашем Web-сайте. Поиск будет осуществляться на основе информации, хранящейся в базе данных, которую мы создали в предыдущей лабораторной работе.
Реализуем поиск, во-первых, по названиям Web-страниц, во-вторых, по ключевым словам, связанным с каждой Web-страницей. Ключевым словом в данном случае называется специальным образом подобранное кодовое слово, характеризующее конкретный материал.
Скажем, для материала, рассказывающего о теге <AUDIO>, ключевыми словами будут "мультимедиа" и "аудио", поскольку он описывает способ размещения на Web-страницах аудиороликов, относящихся к мультимедийным материалам.
Далее, мы предоставим посетителю возможность выбирать критерии поиска: только по названиям, только по ключевым словам или и по названиям, и по ключевым словам. Для этого мы используем раскрывающийся список, т. к. он занимает немного места на Web-странице и вполне информативен.
Что касается самого поиска, то реализовать его несложно. Достаточно просмотреть все три массива, составляющие нашу базу данных, найти элементы, содержащие название или ключевое слово, совпадающее с введенным посетителем значением, и скопировать их в другой массив, который будет хранить результаты поиска. Потом на основе полученного массива мы сформируем, скажем, список, пункты которого будут представлять собой гиперссылки на соответствующие Web-страницы, и вставим его в контейнер cmain. Почти как в случае раздела "См. также".
Еще мы предусмотрим ситуацию, когда посетитель введет не все искомое название или ключевое слово, а только его начало. Соответственно, Web-сценарий, который мы напишем, будет искать элементы базы данных, начало названия или одного из ключевых слов которого совпадает с тем, что ввел посетитель.