конспект курса Java Script. Программирование клиентской части Интернет приложений с использованием JavaScript
 Скачать 1.49 Mb.
|
Привет!Это учебная страница HTML. 100 При загрузке документа вызывается функция listOfAllElements(), которая в двух циклах просматривает семейство all объекта document и отображает диалоговое окно со всеми элементами HTML страницы. Отметим, что по второму способу первым "объектом" семейства будет ссылка на свойство length семейства. Иногда необходимо из всего множества объектов страницы выделить подмножество объектов, соответствующих некоторому типу элементов HTML. На странице обычно содержится несколько заголовков, например, первого уровня. В семействе all они расположены вперемежку с остальными объектами, но если необходимо выделить их из всего множества элементов, то подобную операцию можно осуществить, используя метод tags()семейства all: Пример 24. Изменение цвета шрифта всех абзацев страницы var paragraphs = document.all.tags('P') for (i=0; i < paragraphs.length; i++) paragraphs[i].style.color = 'blue'; Метод tags() возвращает семейство, хранящее ссылки на все элементы с указанным в качестве параметра именем тега. В дальнейшем работа со вновь созданным семейством осуществляется обычным способом. Свойства и методы объектов Большинство свойств объектов соответствуют атрибутам представляемых ими элементов HTML документа и имеют такие же имена, что и имена атрибутов. В сценарии можно получить значения интересующих атрибутов элемента или, наоборот, изменить их установку. Динамическое изменение свойств объектов, и, соответственно, представляемых ими элементов HTML, является основной концепцией динамического HTML. Имена некоторых свойств объектов отличаются от имен атрибутов, но обычно достаточно близки к именам представляемых атрибутов. Например, свойство className соответствует атрибуту CLASS. Подобное несоответствие связано, в основном, с именами атрибутов, которые могут конфликтовать с зарезервированными ключевыми словами основных языков сценариев. Некоторые свойства не соответствуют никаким атрибутам тегов. Эти свойства предоставляют дополнительную информацию об элементе и обычно являются свойствами только для чтения. С одним из подобных свойств мы уже знакомы. Свойство tagName не соответствует никакому атрибуту и предоставляет информацию о типе тега элемента. Другим примером является свойство sourceIndex , значением которого является индекс элемента в семействе all. 101 Некоторые свойства объектов доступны только для чтения. Это означает, что можно получить их значение, но нельзя изменить. Примером подобного свойства является свойство tagName, представляющее имя тега HTML элемента. В объектной модели существуют свойства, представляющие целое множество свойств объекта. Они реализованы в виде семейств и к ним применима описанная выше технология работы с любым семейством JavaScript. Свойство style объекта одно из таких свойств. Оно хранит значения всех свойств каскадных таблицей стилей, установленных для соответствующего элемента. Ключом доступа является имя свойства. Например, обратиться к свойству color какого-либо элемента HTML из сценария JavaScript можно с использованием следующего синтаксиса: ссылка_на_объект.style.color ссылка_на_объект.style['color'] В каскадных таблицах стилей свойства форматирования имеют названия, в которых используется дефис: background-color, margin-top, border- left и т.д. Имя такого свойства в сценарии определяется следующим образом: 1. Убирается из названия свойства дефис (-). 2. Часть имени свойства после дефиса присоединяется к предшествующей части с прописной буквы. 3. Предыдущие два пункта повторяются для всех вхождений дефиса в название свойства. Например, свойство border-right-width в сценарии JavaScript будет выглядеть borderRightWidth, на свойство background-color можно ссылаться как backgroundColor. Методы getAttribute(), setAttribute()и removeAttribute() любого элемента HTML позволяют, соответственно, получать, устанавливать значения его атрибутов или удалять их. Для методов getAttribute() и removeAttribute() параметром является строка, задающая имя атрибута, в метод setAttribute() кроме имени атрибута необходимо передать и его значение. Эти три метода не чувствительны к регистру. Если для установки значения атрибута или для задания его имени важен регистр, то дополнительный, последний параметр, принимающий значения true или false, определяет чувствительность этих методов к регистру. Выполнить прокрутку большого документа таким образом, чтобы какой-либо элемент HTML появился в окне браузера, можно методом scrollIntoView() этого элемента. Элемент может появиться вверху или внизу окна. Значение единственного параметра этого метода равное true (умалчиваемое значение) отображает элемент в верхней части области отображения, тогда как значение false соответствует отображению элемента в нижней части окна браузера. 102 Например, в следующем фрагменте сценария осуществляется быстрый переход к третьему заголовку первого уровня документа: var myH1=document.all.tags('H1'); if( myH1.length > 0 ) myH1[2].scrollIntoView(true); Объектная модель позволяет осуществлять доступ к содержимому элементов и даже изменять не только содержимое, но и сами элементы заменять на другие. Эти действия осуществляются с помощью следующих свойств объектов: innerHTML, innerText, outerHTML и outerText. Свойства с префиксом inner отвечают за содержимое элемента HTML и позволяют в сценарии или получить его, или динамически заменить на новое, оставляя неизменными теги разметки самого элемента. Свойства с префиксом outer применяются ко всему элементу HTML (вместе с его открывающим и закрывающим тегами) и используются для замены элемента вместе с его содержимым на некоторый новый элемент. Свойства с суффиксом Text работают с текстовым содержимым элемента HTML с удаленными тегами разметки, тогда как свойства с суффиксом HTML оперируют с размеченным тегами HTML содержимым. На рисунке скобками отмечены "области влияния" рассмотренных четырех свойств элемента на его содержимое: Содержимое элемента innerHTML / innerText outerHTML / outerText Для элемента P, представленного на рисунке, значением свойства innerText будет строка "Содержимое элемента" Тогда как для свойства innerHTML строка "Содержимое элемента" Значение свойства outerText совпадает со значением свойства innerText, а свойство outerHTML хранит полное описание элемента " Содержимое элемента " Изменение в сценарии значений указанных свойств приводит либо к изменению содержимого элемента, либо его полной замене на новый элемент (в случае использования свойства outerHTML). Заметим, что можно задавать значения свойств с суффиксом Text и в виде строки с тегами разметки HTML, но в этом случае теги браузером не интерпретируются, а отображаются как обычный текст. Методы insertAdjacentText и insertAdjacentHTML В объектной модели DHTML для каждого элемента предусмотрены два метода, позволяющие добавить перед открывающим тегом (после закрывающего тега) 103 или в начало (конец) содержимого элемента простой текст или текст с разметкой HTML: insertAdjacentText(положение, текст) insertAdjacentHTML(положение, текст) Параметр текст является строковым литералом или строковой переменной. Для первого метода он содержит обычный простой текст, а для второго метода текст, размеченный тегами HTML, который интерпретируется браузером. Параметр положение может принимать одно из следующих значений — "beforeBegin", "afterBegin", "beforeEnd", "afterEnd". Место вставки текста в соответствии с указанными значениями этого параметра показано на рисунке: Содержимое элемента beforeBegin afterBegin afterEnd beforeEnd Параметр положение Для размеченного текста HTML выполняется синтаксический разбор, и он отображается в соответствии с заданным форматированием. При этом корректируется объектная модель документа для отражения внесенного в документ изменения. Упражнения 1. Разработать страницу для демонстрации возможностей свойств innerText, innerHTML, outerText, outerHTML и методов insertAdjacentText, insertAdjacentHTML. Страница может выглядеть следующим образом: Страница состоит из абзаца и формы с полями, в которых отображаются значения указанных рядом с ними свойств абзаца. В этих же полях можно задать собственные значения свойств и нажатием расположенной слева соответствующей кнопки Изменить действительно изменить значения указанных свойств абзаца. 104 Для демонстрации работы методов в раскрывающемся списке Куда выбираются значения первого параметра, в поле Что задается второй параметр, а при нажатии на кнопку Вставить выполняется соответствующий метод абзаца. 2. Разработать страницу, текст которой представляет 3 главы книги (каждая глава занимает полторы области отображения браузера). В начале страницы поместить содержание, оформленное в виде гиперссылок. При щелчке на гиперссылке методом scrollIntoView() отобразить начало содержимого соответствующей главы. В конце каждой главы поставить ссылку, возвращающую пользователя на начало документа. Посмотреть действие параметра этого метода. 3. Разработать страницу, добавляющую при щелчке на любом элементе HTML к нему границу, определяемую с помощью свойств каскадных таблиц стилей. 4. Разработать страницу, тестирующую работу методов добавления, изменения и удаления атрибутов абзаца. 5. Разработать страницу, при загрузке которой в отдельном окне браузера отображается ее иерархическая структура DHTML со смещением названий тегов вложенных элементов вида: body p img b i p ul li b li p Урок 14. Примеры динамических страниц HTML Раскрывающийся список Создать раскрывающийся список можно разными способами. Мы реализуем его с помощью вложенных элементов HTML UL и свойства display каскадных таблиц стилей, которое позволяет скрывать элементы страницы, не оставляя на ней даже выделенных под них блоков. Поместим на страницу вложенный список: 105
Список idList составлен из трех элементов , который не отображается (его свойство display равно none) и будет использован для создания раскрывающегося списка при щелчке на первом элементе списка. Строка, заданная в атрибуте TITLE, отображается в виде всплывающей подсказки при расположении курсора мыши над элементом. Этот фрагмент отображается как простой статический список из трех элементов (вложенный список не отображается!) с маркерами. Чтобы сделать список раскрывающимся, необходимо запрограммировать действия для первого элемента внешнего списка. Но сначала запрограммируем изменение цвета этого элемента при наведении на него указателя мыши, чтобы пользователь обратил внимание на их "динамичность". Для этого добавим в его открывающий тег обработчики событий: ONMOUSEOVER="flashMe(this,'red')" ONMOUSEOUT="flashMe(this,'black')" Функция flashMe(), изменяющая цвет шрифта элемента, задается следующим кодом: function flashMe(eSrc, sColor) { eSrc.style.color=sColor } Теперь остается добавить обработчик щелчка кнопки мыши в первый элемент списка idList, выполняющий функцию отображения вложенного списка idListOneA , если он скрыт, и скрывающий его, если он видим: ONCLICK="toggleList(this.children[0])" При вызове функции для ссылки на вложенный список idListOneA используется конструкция this.children[0]. В ней this ссылается на элемент LI, а он непосредственно порождает единственный вложенный элемент — требуемый нам список idListOneA. Исходный текст функции toggleList() приведен ниже: 106 function toggleListOneA(eTarget){ eTarget.style.display == "none" ? eTarget.style.display="block": eTarget.style.display="none"; eTarget.style.color = 'black'; } Для того, чтобы раскрывшийся список idListOneA не был красного цвета, как и элемент LI, в который он вложен (свойство color наследуется), в функции toggleList() его цвет устанавливается черным. Окончательно исходный текст сценария раскрывающегося списка выглядит так: Раскрывающийся список |