JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

JavaScript. Подробное руководство, 6-е издание

на обложку

Флэнаган Дэвид

Шрифт:

Свойства

scrollWidth

scrollHeight

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

clientWidth

clientHeight

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

clientWidth

clientHeight

Наконец, свойства

scrollLeft

scrollTop

определяют позиции полос прокрутки элемента. Мы использовали эти свойства корневого элемента документа в методе

getScrollOffsets

(пример 15.8), но они также присутствуют в любом другом элементе. Обратите внимание, что свойства

scrollLeft

scrollTop

доступны для записи и им можно присваивать значения, чтобы прокрутить содержимое элемента. (HTML-элементы не имеют метода

scrollTo,

как объект

Window

Когда документ содержит прокручиваемые элементы, содержимое которых не умещается в видимой области, объявленный выше метод

getElementPosition

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

function getElementPos(elt) { var х = 0, у = 0;

// Цикл, накапливающий смещения

for(var е = elt; е != null; е = е.offsetParent) {

х += e.offsetLeft;

у += e.offsetTop;

}

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

// Он также вычтет позиции главных полос прокрутки и преобразует

// значения в координаты видимой области.

for(var e=elt.parentNode; е != null && e.nodeType == 1; e=e.parentNode) {

x -= e.scrollLeft; у -= e.scrollTop;

}

return {x:x, y:y};

}

В современных броузерах этот метод

getElementPos

возвращает те же координаты, что и метод

getBoundingClientRect

(но он менее эффективен). Теоретически такая функция, как

getElementPos,

могла бы использоваться в броузерах, не поддерживающих метод

getBoundingClientRect.

Однако броузеры, не поддерживающие

getBoundingClientRect,

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

getBoundingClientRect,

то для этих целей лучше использовать библиотеку, например, jQuery.

15.9. HTML-формы

HTML-элемент

<form>

и различные элементы ввода, такие как

<input>, <select>

<button>

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

Элементы HTML-форм по-прежнему остаются великолепным инструментом получения данных от пользователя, даже когда данные формы целиком обрабатываются JavaScript-сценарием на стороне клиента и не должны отправляться на сервер. С точки зрения программиста, разрабатывающего серверные сценарии, форма оказывается совершенно бесполезной, если в ней отсутствует кнопка отправки формы. Однако с точки зрения программиста, разрабатывающего клиентские сценарии, кнопка отправки вообще не нужна (хотя все еще может использоваться). Серверные программы опираются на механизм отправки форм - они обрабатывают данные порциями, объем которых определяется формой, - и это ограничивает их интерактивные возможности. Клиентские программы опираются на механизм событий - они могут откликаться на события, возникающие в отдельных элементах форм, - и это позволяет обеспечить более высокую степень интерактивности. Например, клиентская программа может проверять ввод пользователя по мере нажатия клавиш. Или откликаться на выбор флажка, разрешая доступ к набору параметров, которые имеют смысл, только когда флажок отмечен.

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

Обратите внимание, что в этом разделе описываются не сам язык разметки HTML, а приемы управления HTML-формами. Здесь предполагается, что вы уже имеете некоторое знакомство с HTML-элементами (

<input>, <textarea>, <select>

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

Form, Input, Option, Select

TextArea