DHTML — динамический язык разметки


Содержание

DHTML — динамический язык разметки

Ниже приведены учебники, пособия и различные справочные материалы по DHTML, которые можно просмотреть или скачать бесплатно.

Существование языка DHTML не похоже на существование HTML и JavaScript, которые представляют собой определенные технологии для интернет. Динамический HTML — это коммерческий термин, придуманный Netscape и Microsoft для описания технологий, которые были введены в Web-браузерах для расширения их динамических возможностей. Эти технологии были созданы или добавлены для того, чтобы обойти те ограничения, которые существовали при разработке Web-страниц при помощи HTML. Internet хорошо взаимодействовал как с текстом, так и с графикой, но люди, привыкшие к мультимедиа, ждали большего.

Созданная на основе DHTML страница может изменяться, не обращаясь к серверу за дополнительными данными. DHTML предсавляет собой комбинацию Web-технологий, основанных на различных стандартах (CSS, DOM, JavaScript и языки разметки). Комбинация этих стандартов позволяет существенно увеличить интерактивность вашей Web-страницы.

Динамическое содержание HTML

Термин динамическое содержание (dynamic contents) подразумевает возможность доступа и изменения части содержания документа без необходимости загрузки или создания новой страницы. Хорошим примером динамического содержания являются электронные часы, которые автоматически обновляются в HTML-документе каждую секунду без необходимости генерации нового документа.

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

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

Манипулирование содержанием. В данном разделе кратко вводятся три метода манипулирования содержанием, поддерживаемые динамическим HTML.

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

Динамическое содержание и метод document.write. Метод document.write позволяет вставлять содержание на страницу во время ее загрузки.

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

Манипулирование содержанием

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

Запись содержания в поток во время загрузки страницы.

Манипулирование содержанием при помощи свойств и методов, представленных для всех элементов в теле документа.

Программирование объекта TextRange, который представляет объектную модель для текста документа.

Первый подход использует методы write и writeln объекта document, которые могут вставлять содержание в текущий документ при его загрузке и могут конструировать документы, но они не могут изменять содержание, которое уже было проанализировано.

В главе 6 обсуждались методы write документа. Методы write и writeln поддерживаются в браузерах Netscape Navigator версии 2.0 и более поздних и Microsoft Internet Explorer 3.0.

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

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

В главе 14 рассматриваются сильные и слабые стороны объектной модели TextRange.

Свойства динамического содержания

Элемент Body и все элементы, находящиеся внутри него, представляют четыре свойства для доступа и изменения содержания HTML: innerHTML, innerText, outerHTML и outerText. Свойство innerHTML элемента представляет его содержание, включая разметку HTML для всех дочерних элементов. Свойство innerText представляет содержащийся текст без тегов HTML. Присвоение нового значения одному из внутренних свойств элемента заменяет содержание документа. Свойства outerHTML и outerText сходны со свойствами innerHTML и innerText, но они обращаются ко всему элементу, а не к его содержанию. Присвоение значения одному из внешних свойств элемента заменяет весь элемент. В приведенном ниже примере нажатие кнопки заменяет кнопку на полужирный текст Blown away!:

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

Свойства динамического содержания используют достаточно строгие правила для определения действительности HTML. Эти правила более конкретны, чем правила, используемые для исходного анализа страницы, но они не настолько строги как определение типа документа (DTD) HTML. Если вы назначаете недействительный HTML одному из данных свойств, то может возникнуть ошибка и новое содержание не будет вставлено. Хотя свойства принимают некоторые недействительные теги HTML, вам следует всегда указывать разрешенный синтаксис HTML для получения предсказуемых результатов.

Кроме данных свойств каждый элемент в теле документа также представляет два метода для вставки содержания до или после открывающего или закрывающего тега: insertAdjacentHTML и insertAdjacentText. Эти два метода полезны для быстрой вставки новых параграфов или элементов списков в документ. На рис. 13.1 показаны все способы манипулирования содержанием элемента.

Рис. 13.1. Все точки доступа и изменения HTML и текста

HTML и свойства текста

Главное различие между свойствами HTML innerHTML и outerHTML с одной стороны и текстовыми свойствами innerText и outerText с другой заключается в том, что свойства HTML представляют разметку целиком, тогда как свойства текста представляют содержание без разметки. Рассмотрим следующий фрагмент HTML:

Для элемента H1 в данном фрагменте в табл. 13.1 перечислены значения каждого из четырех свойств.

Таблица 13.1. Свойства HTML и свойства текста

Welcome to Scott’s Home Page

Свойства innerText и outerText всегда возвращают одинаковое значение, но ведут себя по-разному при назначении им новых значений. Установка значения для свойства innerText заменяет только содержание элемента H1 новым содержанием. Установка значения для свойства outerText заменяет элемент H1 и его содержание новым текстом. Например, установка значения «Thank you for visiting» (Спасибо, что зашли) для этих свойств будет иметь различный результат: для свойства innerText будет получен результирующий

Thank you for visiting

Разметка в значениях свойств innerHTML и outerHTML необязательно совпадает с разметкой в исходном коде. Напротив, удаляются избыточные пробелы и порядок атрибутов может быть изменен. Присваивая значения свойствам, связанным с HTML, убедитесь в использовании соответствующих escape-последовательностей любых компонентов (entity). Угловые скобки интерпретируются как разделители тегов. Если угловые скобки должны быть включены в содержание и не должны анализироваться как HTML, то они должны быть определены как компоненты: &#38lt; и &#38gt;. Когда вы присваиваете значения текстовым свойствам, то данные скобки автоматически преобразуются в эквиваленты escape-последовательностей.

Неразрывные пробелы (nonbreaking spaces) (пробелы, в которых запрещены символы перехода строки) и обычные пробелы считаются разными символами в объектной модели, где они представлены значениями ASCII 160 и 32, соответственно. Сравнение двух символов дает значение false, как показано в приведенном ниже примере:

Для проверки наличия в содержании элемента неразрывного пробела проверьте непосредственно значение ASCII или сравните свойство HTML с самим компонентом, как показано ниже:

Любой определенный компонент, который совпадает со значением внутреннего компонента, преобразуется во внутреннее имя. Компонент неразрывного пробела может быть определен как &#38#160; вместо идентифицирующего его ключевого слова. Динамический HTML распознает данное значение как неразрывный пробел и преобразует его в &#38nbsp;.

Применение свойств динамического содержания

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

В примере электронных часов из главы 4 для обновления значения времени было использовано свойство innerText. Элемент Span с идентификатором clock содержит текст с текущим временем. Каждую секунду сценарий вызывает функцию buildTime для создания строки со значением текущего времени и затем выводит строку в элементе Span с идентификатором clock, используя следующую инструкцию:

Игра в крестики-нолики

Данный пример является интерактивной игрой в крестики-нолики с использованием динамического содержания. Таблица разделена на игровые ячейки. Когда пользователь выполняет щелчок в ячейке, то ее содержание заменяется на Х или О, для чего применяется свойство innerText. Размер игровой доски может динамически изменяться путем вставки новой таблицы вместо имеющейся при помощи свойства outerHTML.

На рис. 13.2 показана игра в крестики-нолики в действии.


Рис. 13.2. Крестики-нолики

Использование методов Adjacent

Методы insertAdjacentHTML И insertAdjacentText вставляют HTML и текст до или после открывающего или закрывающего тегов. Оба метода принимают два аргумента: первый аргумент определяет место вставки содержания, а второй определяет реальное содержание.

Четыре действительных значения для первого аргумента представляют соответственно четыре места вставки: beforeBegin, afterBegin, beforeEnd и afterEnd, где слово Begin представляет открывающий тег, а слово End — закрывающий. Эти методы полезны для вставки содержания, которое не оказывает влияния на текущее содержание документа.

В данном примере продемонстрировано добавление на страницу всплывающих примечаний. Приведенный ниже код размещает все элементы, которые определены как примечания, и вставляет номера примечаний в документ. Автор определяет примечание, добавляя элемент Span с именем класса footnote. Таблица стилей определяет элементы Span как невидимые. Окно сообщения, содержащее текст примечания, отображается при щелчке по номеру примечания.

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

Создание полей со списком в формате HTML

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

В следующем примере с использованием элементов DIV с прокручиванием создаются два поля со списками. Каждый элемент в полях со списками является стандартным элементом маркированного списка. Щелчок по элементу вызывает изменение цвета фона. Двойной щелчок по элементу или по одной из кнопок со стрелками вызывает удаление элемента из одного списка и помещает его в конец другого списка с помощью метода insertAdjacentHTML.

На рис. 13.3 показаны индивидуальные поля со списками.

Рис. 13.3. Два поля со списками, созданными на основе существующих HTML-элементов

Доступ к содержанию

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

Обработка ошибок изображений

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

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

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

Если замена изображения на текст невозможна, то можно легко изменить атрибут title, добавив сообщение об ошибке. (Атрибут title в Internet Explorer 4.0 отображается как всплывающая подсказка). Данная модификация может быть реализована без создания очереди ошибок, потому что атрибуты элементов могут быть изменены до загрузки страницы. Приведенный ниже фрагмент кода демонстрирует добавление данного элемента. Эта схема работает без дополнительного кода:

Динамическое содержание и метод document.write

Модель динамического содержания является мощным инструментом манипулирования загруженным изображением, но не исключает необходимости применения метода document.write. Эти два элемента очень хорошо дополняют друг друга. В приведенных ниже примерах методы динамического содержания используются для размещения определенного текста, который затем при помощи метода document.write выводится в новом окне. Первая схема создает фрейм баннера (banner — в переводе с английского означает: знамя, лозунг, шапка, заголовок. — Примеч. ред.), когда документ находится внутри набора фреймов, а вторая демонстрирует два метода индексирования страницы.

Создание строки заголовка

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

Элемент DIV баннера может содержать любой код HTML, включая сценарии. Все содержание будет скопировано в другой фрейм.

Приведенный ниже документ с набором фреймов содержит код, который автоматически изменяет размер набора фреймов после загрузки баннера. Данный код изменяет размеры строк, устанавливая для свойства scrollHeight баннера значение высоты фрейма, так что фрейм баннера имеет соответствующую высоту.

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

Расширенные индексы и таблицы содержания

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

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

Индексы ссылок и закладок

Приведенный ниже код создает окно индекса, содержащее копии всех элементов Anchor документа. Код использует свойства innerHTML всех якорей для копирования их содержания, поэтому изображения корректно воспроизводятся в окне индекса.

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

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

На рис. 13.4 показана работа приложения Table of Contents. Таблица содержания и нумерованные заголовки автоматически генерируются после загрузки страницы.

Рис. 13.4. Таблица содержания и нумерованные заголовки

Свойство Значение
innerText Welcome to Scott’s Home Page
innerHTML Welcome to Scott’s Home Page
outerText Welcome to Scott’s Home Page
outerHTML
НОВОСТИ ФОРУМА
Рыцари теории эфира
01.10.2020 — 05:20: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ — Upbringing, Inlightening, Education ->
[center][Youtube]69vJGqDENq4[/Youtube][/center]
[center]14:36[/center]
Osievskii Global News
29 сент. Отправлено 05:20, 01.10.2020 г.’ target=_top>Просвещение от Вячеслава Осиевского — Карим_Хайдаров.
30.09.2020 — 12:51: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ — Upbringing, Inlightening, Education ->
[center][Ok]376309070[/Ok][/center]
[center]11:03[/center] Отправлено 12:51, 30.09.2020 г.’ target=_top>Просвещение от Дэйвида Дюка — Карим_Хайдаров.
30.09.2020 — 11:53: ВОСПИТАНИЕ, ПРОСВЕЩЕНИЕ, ОБРАЗОВАНИЕ — Upbringing, Inlightening, Education ->
[center][Youtube]VVQv1EzDTtY[/Youtube][/center]
[center]10:43[/center]

интервью Раввина Борода https://cursorinfo.co.il/all-news/rav.
мой телеграмм https://t.me/peshekhonovandrei
мой твиттер https://twitter.com/Andrey54708595
мой инстаграм https://www.instagram.com/andreipeshekhonow/

[b]Мой комментарий:
Андрей спрашивает: Краснодарская синагога — это что, военный объект?
— Да, военный, потому что имеет разрешение от Росатома на манипуляции с радиоактивными веществами, а также иными веществами, опасными в отношении массового поражения. Именно это было выявлено группой краснодарцев во главе с Мариной Мелиховой.

[center][Youtube]CLegyQkMkyw[/Youtube][/center]
[center]10:22 [/center]

Доминико Риккарди: Россию ждёт страшное будущее (хотелки ЦРУ):
https://tainy.net/22686-predskazaniya-dominika-rikardi-o-budushhem-rossii-sdelannye-v-2000-godu.html

Завещание Алена Даллеса / Разработка ЦРУ (запрещено к ознакомлению Роскомнадзором = Жид-над-рус-надзором)
http://av-inf.blogspot.com/2013/12/dalles.html

[center][b]Сон разума народа России [/center]

[center][Youtube]CLegyQkMkyw[/Youtube][/center]
[center]10:22 [/center]

Доминико Риккарди: Россию ждёт страшное будущее (хотелки ЦРУ):
https://tainy.net/22686-predskazaniya-dominika-rikardi-o-budushhem-rossii-sdelannye-v-2000-godu.html

Завещание Алена Даллеса / Разработка ЦРУ (запрещено к ознакомлению Роскомнадзором = Жид-над-рус-надзором)
http://av-inf.blogspot.com/2013/12/dalles.html

[center][b]Сон разума народа России [/center]

Динамический HTML. DOM и клиентские скрипты


По мере развития индустрии создания веб-сайтов возникла потребность расширить возможности использовать мультимедиа как инструмента дизайнера для создания интерактивных страниц. Эта возможность появилась с внедрением технологии, получившей название Dynamic HTML (DHTML).

Dynamic HTML (DHTML) — это обообщающий термин для набора технологий, используемых совместно для создания интерактивных и анимированных веб-сайтов. Обычно под DHTML подразумевается комбинация из статического языка разметки (HTML), клиентского языка сценариев (JavaScript), языка описания представлений (CSS) и объектной модели документа (DOM). Т.е., DHTML — не особый язык, а совокупность клиентских технологий веб-разработки, которую можно представить в виде такой условной «формулы»:

DHTML = HTML + CSS + DOM + JavaScript.

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

О многозначности термина

С другой стороны, «динамическая веб-страница» — более широкое понятие, охватывающее любую веб-страницу, сгенерированную по-разному для каждого пользователя или набора исходных данных. Оно включает и те страницы, что созданы сценариями на стороне клиента, и те, что созданы серверными приложениями (на языках PHP, Perl, JSP, Ruby и проч.), когда веб-сервер генерирует содержимое перед отправкой клиенту.

В теме «Основы HTML» была рассмотрена обобщенная структура гипертекстового документа, которая может быть представлена в виде дерева элементов разметки. Проиллюстрируем сказанное на простом примере веб-страницы, исходный код которой приведен в Листинге 1, а структура — на рис. 1.

Рис. 1. Дерево элементов гипертекста

Архитектура DOM 3

Document Object Model (DOM)

В браузере дерево элементов разметки (рис. 1) преобразуется в структуру данных, подобную приведенной на рис. 2. Это представление основывается на спецификации Объектной Модели Документа (DOM ), разработанной и поддерживаемой W3C (актуальная версия стандарта — DOM Level 3). DOM описывает веб-страницу в виде иерархии объектов, наделенных набором обязательных и опциональных свойств и методов. В нотации DOM эти объекты, представляющие теги разметки, называются узлами.

Архитектура модели DOM состоит из трех частей: ядра (Core)​​, HTML и XML. Ядро DOM обеспечивает низкоуровневый набор объектов, которые могут представлять любой структурированный документ. Однако, непосредственное обращение к объектам ядра не всегда оправданно. Спецификации HTML и XML обеспечивают дополнительные, более удобные интерфейсы верхнего уровня, которые представляют более простой и прямой доступ к документам определенного типа.

Рис. 2. Представление DOM

Каждый узел DOM имеет, по меньшей мере, следующие свойства:

  • nodeName — имя узла в соответствии со спецификацией: тег разметки HTML или XML в заданном пространстве имен, предопределенное имя в нотации DOM (#text, #comment и т.д.);
  • localName — локальное имя узла (если не переопределено, то соответствует nodeName);
  • prefix — имя (не адрес) пространства имен, описывающего узел (см. лекцию Расширяемый язык разметки XML);
  • namespaceURI — адрес файла описания спецификации (например, http://www.w3.org/1999/xhtml);
  • nodeType — целочисленный идентификатор типа узла (1 — элемент; 3,8 — содержимое, 9 — документ, 10 — тип документа и т.п.);
  • nodeValue — содержимое элемента (непосредственно данные);
  • id — уникальный в пределах документа идентификатор узла;
  • class — имя класса CSS.

Атрибуты тегов в DOM представлены в виде атрибутов же узлов в формате «name=value» (рис. 3).

Рис. 2. Атрибуты узлов

API DOM

Для обращения к DOM из скриптов и внешних программ используется стандартизованный объектно-ориентированный интерфейс (API ), в котором каждый узел представлен в виде объекта с набором публичных свойств, методов и событий.

«Dynamic HTML is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated.» W3C

В этом определении DHTML, данном Консорциумом W3C не указывается, какой именно скриптовый язык должен быть использован в качестве инструмента доступа к DOM при разработке динамических страниц. В общем смысле, для управления поведением веб-страницы может быть использован любой код, который позволяет изменять содержание и внешний вид документа, или иным образом взаимодействовать с пользователем через веб-браузер. Тем не менее, исторически сложилось так, что основным языком разработки динамических страниц стал JavaScript и многое из того, что относится к DHTML вращается вокруг этого скриптового языка. В результате, браузерные плагины для веб-разработки (например, DOM Inspector для FireFox) представляют узлы DOM не иначе, как в виде объектов JavaScript (рис. 4).

Рис. 4. Представление узла DOM в виде объекта JavaScript

Правила CSS

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

Рис. 5. DOM и CSS

Вычисленные стили, так же как и атрибуты, доступны через интерфейсы DOM как свойства объектов JavaScript.

DHTML в действии

После загрузки этой страницы в браузере будет выстроена модель DOM, приведенная на рис. 5а. Однако, после того как пользователь кликнет на тексте, документ изменится и его структура станет такой, как на рис. 5б.

Рис. 5. Изменение DOM после выполнения скрипта

Практическое применение DHTML

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

Динамический HTML

Динамический HTML (DHTML) — это набор новых функциональных возможностей, которые изначально были представлены в веб-браузере Microsoft Internet Explorer 4.0. С помощью динамического HTML разработчики могут создавать привлекательные веб-сайты, которые не увеличивают нагрузку на сервер. Отображение и контент веб-страницы изменяются динамически при выполнении пользователем определенных действий.

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

Например, можно выполнять следующие задачи:

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

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

Вставка бегущей строки, которая автоматически обновляет контент, например новости, котировки акций или другие данные.

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

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

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

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

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

Компоненты динамического HTML.
Динамический HTML имеет четыре компонента: content (содержание), structure (структура), style (стиль) и interaction (взаимодействие). Ниже рассмотрены эти компоненты.

Content.
Главным различием между динамическим НТМL и обычным HTML-документом является способ представления его содержания. Динамическое представление предполагает реакцию на действия пользователя, например, на нажатие кнопки или перемещение указателя мыши.


Structure.
Структурное иерархическое дерево документа обычно отбрасывается браузером при выводе документа на экран. Динамический HTML на основе структуры документа создает группу (коллекцию) данных и держит ее постоянно наготове как ссылку на другие страницы и объекты, загружаемые по определенным событиям и действиям пользователя. В табл. 14.1 показаны дополнительные элементы, связанные с компонентом structure.

Элемент Описание
Structure Структура динамического HTML-документа.
Event Событие, обрабатываемое скриптом.
Object Контейнер для элементов HTML.
Collection Группа элементов и объектов, используемая для ссылок.

70. Корпоративный и фирменный стиль. Соотношение понятий.

Корпоративный стиль (англ. corporate identity) — набор графических форм и принципов построения визуальной коммуникации, объединённых одной идеей, основная задача которых — выделить компанию среди себе подобных и создать узнаваемый образ в глазах потребителей. «Корпоративный» или «фирменный» стиль часто понимается как набор словесных и визуальных констант, обеспечивающих единство восприятия товаров, услуг, информации, исходящих от фирмы или торговой марки к потребителю. Корпоративный дизайн наряду с корпоративной философией, корпоративной культурой и корпоративным поведением является одним из элементов корпоративной идентичности.

Корпоративный стиль разрабатывается на основе логотипа и знака. Вначале проводится общий анализ компаний, аналогичных той, которая заказала логотип или фирменный знак. Затем вычленяются отличительные особенности данной компании. После этого формируется идея «смыслового образа», который впоследствии станет основополагающим в фирменном стиле данной компании. В этот образ вкладываются не только графические элементы, но и психология продаж (например, агрессивный маркетинг) и географическое местоположение компании, социологические образы общественной среды. Затем разрабатывается логотип. В начале разработки определяются основные элементы: стилеобразующая идея, цветовая гамма, шрифты. Разрабатываются стандарты и рекомендации по нанесению корпоративной символики на носители стиля. Носителем стиля может быть всё что угодно: внутренняя документация, наружная реклама, веб-сайт, здание офиса. После окончания работы по разработке стиля составляется руководство по его применению. Руководство называют по-разному: брендбук, гайдлайн, стандарты оформления.

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

БИЛЕТ

30. Современные технологии разработки web-приложений. Принципы использования СУБД в web-приложениях.

Задачи, решаемые web-сервером, в основном сводятся к поддержке протокола HTTP и передаче клиенту запрашиваемых информационных ресурсов. Однако часто возникает необходимость выполнения каких-либо нестандартных действий, расширяющих возможности web-сервера. В этом случае используются специальные программы, выполняемые на WWW-сервере и взаимодействующие как с web-сервером, так и с клиентом.Эти программы принято называть расширениями web-сервера, или web-приложениями.Существует много различных типов приложений, использующихся в качестве расширений web-серверов.

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

Размеры паутины тоже накладывают серьезные ограничения на веб-приложения — они должны легко масштабироваться и оставаться надежными под любой нагрузкой.

Основные требования:

-Расширяемость, быстрая разработка. Быстрое и несложное добавление нового функционала. Компонентная структура front- и back-office.

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

-Масштабируемость, желательна совместимость кода с промышленными серверами приложений.

-Безопасность системы — в частности, поддержка транзакций, криптозащиты, работа по защищенным каналам.

-Поддержка нескольких языков (i18n & l10n).

Поддержка нескольких выходных форматов. Например, система может выдавать результат в XML-формате (стилизация может производиться как у клиента, так и на сервере, последнее пока надежнее), HTML, WML, предоставлять пользователю несколько переключаемых цветовых стилей или частные настройки, иметь версию для печати, генерировать на лету документы PDF и т.п.

-Поддержка тонкого разграничения доступа к функционалу веб-приложения и обеспечение возможности персонализации пользователей (customization).

Язык Java отлично подходит для быстрой разработки масштабируемых, надежных сетевых бизнес-приложений, он универсален, переносим, обладает синтаксисом, сразу понятным для большинства программистов, выросших на C/C++, имеет мощную корпоративную поддержку и удобные средства локализации, доступа к базам данных и обработки XML-документов. Java — это даже не орудие, это целый арсенал. Вдобавок в Java изначально поддерживается Unicode.

Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Сдача сессии и защита диплома — страшная бессонница, которая потом кажется страшным сном. 8771 — | 7143 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

DHTML

одна из возможностей создания интерактивного веб-сайта при помощи языка разметки HTML, встраиваемого скриптового языка JavaScript, CSS и DOM.

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

DHTML приложения, как вполне автономные в браузере и без серверной поддержки, такой как база данных, иногда бываю вынуждены обращаться к Single Page Applications, или SPA.

S5 является DHTML-презентацией, выполняющейся в современных веб-браузерах. Единый XHTML-файл включает набор слайдов, которые могут просматриваться в режиме слайд-шоу (кадр за кадром, в полноэкранном представлении), а также распечатаны как пресс-релиз.

Синонимы: нет
Все термины на букву «D»
Все термины в глоссарии

DHTML для разработки динамических сайтов

Много лет назад, когда в конкурентной борьбе схватились два ведущих браузера Internet Explorer и Netscape Navigator, программисты и разработчики отчаянно ломали свои ученые головы в поисках некой фишки, изюминки, с помощью которой можно было бы привлечь основную массу тогдашних пользователей Интернета. Так возникла перспективная идея сделать сайты интерактивными, динамичными, активно реагирующими на действия посетителей и практически вступающими с людьми в своеобразный диалог.

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

Хотя идея динамических сайтов принадлежала разработчикам компании Netscape, в итоге победил правильный маркетинг и массированная рекламная компания. Замечательный браузер Netscape Navigator благополучно почил. А простые юзеры получили хорошее наследство: динамические сайты на основе DHTML.

Особая хитрость метода состоит в том, что для воспроизведения динамических сайтов потребовались специальные браузеры. Обработка сайта происходит “на стороне клиента”. То есть, в самом браузере. С сервера хостинг-провайдера, где хранится сайт, на жесткий диск пользовательского компьютера загружается программный элемент, например на языке Java Script, и различные временные файлы. Затем в браузере производится слияние всех разрозненных элементов динамической страницы в действующий интерактивный сайт. За счет того, что некоторая часть файлов сайта уже сохранена на локальном компьютере, достигается существенное ускорение загрузки веб-страниц и происходящих на сайте событий. DHTML сайты намного шустрее статических, тем более сайтов на движках, где все происходит со знаком “наоборот”: все файлы хранятся на удаленном сервере, там же и собираются в единую страницу непосредственно перед загрузкой в браузер.

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

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

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

Правда, в 2013 году и прогрессивный когда-то язык DHTML признан устаревшим. Сегодня на смену ему идет HTML5, стандарт, который является попыткой объединить воедино все лучшие находки последних лет.

Microsoft Office

Основы Excel (2007) в примерах

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

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

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

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


Основы Word (2007) в примерах

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

Word 2007 — это революционный шаг в развитии текстового процессора. Интерфейс программы продуман таким образом, чтобы эффективно использовать рабочее пространство и всегда иметь быстрый доступ именно к тем инструментам, которые нужны для решения конкретной задачи.

Основы Visual Basic Application (VBA) в примерах

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

Программинг

Основы DHTML в примерах

DHTML, Dynamic Hyper Text Markup Language (динамический язык разметки гипертекста) — расширение языка HTML, которое позволяет создавать web-страницы с такими интерактивными элементами, как движущийся фон, расположенный под статичным содержимым документа, движущиеся объекты, выпадающее меню, кнопки, подсвечивающиеся при наведении курсора мыши, анимация, бегущие титры, реагировать на действия пользователей, добавляет новые возможности для отображения элементов, используя каскадные таблицы стилей и многое другое.

Основы JavaScript в примерах

JavaScript — язык написания программ, исполняемых браузером. Является стандартом для Dynamic HTML. Из соображений безопасности, он лишен возможности повлиять на что либо, кроме браузера. Он не имеет средств обращения к диску компьютера, за исключением записи cookie.

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

Основы PHP

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

Знакомство с CMS

CMS — система управления контентом сайта. Это своеобразная оболочка (управляющая среда) для сайта. Устанавливается на сервер подобно скриптам. После этого производится настройка согласно требованиям и задачам будущего ресурса.

На данный момент существует довольно большое количество как платных, так и бесплатных CMS. Главная задача вебмастера — выбрать «нужную» ему CMS и научиться эффективной работе с ней.

Свой сайт

Основы HTML в примерах

HTML (HyperText Markup Language, язык гипертекстовой разметки) — специальные инструкции браузеру, с помощью которых создаются Вэб-страницы. Язык HTML является простым и, в то же время, очень гибким инструментом создания веб-страниц. Зная все его тонкости и нюансы, за короткий промежуток времени можно создать качественный и удобный сайт.

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

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

Как сделать свой сайт

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

Для более продвинутых вебмастеров подробно рассказано как можно использовать внешний лист стилей css.

Раскрутка сайта от «А» до «Я» шаг за шагом. + Как сделать сайт от «А» до «Я» — руководство для чайников. Что делать после того как сайт создан и выложен на сервер? Надо приступать к раскрутке сайта. В этом разделе сайта подробно на доступном языке рассказано как раскрутить сайт и получить с него прибыль.

Новости SEO

SEO (Search Engine Optimization, оптимизация ресурсов для поисковых систем) — но, просто создать сайт и разместить его в сети недостаточно. Чобы привлечь на сайт большое количество целевых посетителей, необходимо правильно вести его раскрутку и поисковую оптимизацию.

Основы OpenOffice в примерах

Комплект программ, входящих в состав OpenOffice, аналогичен программным продуктам, входящим в MS Office: это редактор текстовых документов — Writer, программа по созданию электронных таблиц — Calc, создатель презентаций — Impress, программа для создания баз данных — Base. Кроме этого в комплект Open Office входят редактор изображений — Draw, и программа по работе с формулами — Math. Несмотря на все «косяки», Open Office является реальной альтернативой своему «старшему собрату», поскольку Open Office полностью бесплатен.

«Железо» компьютера и его настройки

Раздел Что такое ПК? предназначен для «компьютерных чайников» — пользователей с нулевыми познаниями. Простым понятным языком изложены азы «компьютерной грамотности»: что внутри компьютера; как функционирует компьютер; что такое операционная система; азы работы Windows.

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

В 70-х годах прошлого столетия появились первые персональные компьютеры, четкого понимания — каким должен быть персональный компьютер, какие задачи он должен решать не было. Появилось множество архитектур и еще больше конкретных моделей. В результате естественного отбора жизнеспособными оказались два направления, представляемые фирмами IBM и Apple. IBM-совместимые компьютеры, благодаря «открытой архитектуре», заняли господствоющее положение на мировом рынке, заняв около 90% мирового производства компьютеров.

В разделе Железо ПК рассказано об истории создания комьютера; его эволюции; принципах функционирования компьютерной системы в целом и ее отдельных устройствах. Материал рассчитан на подготовленных пользователей.

BIOS (Basic Input/Output System) — базовая система ввода-вывода. БИОС — это набор инструкций для компьютера, определяющих как происходит взаимодействие различных частей компьютера при его включении.

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

Введение в язык динамической разметки WEB-страниц

Всемирная Паутина (World Wide Web) спровоцировала революцию в информатике, предоставив любому пользователю возможность публикации HTML-документов. До недавнего времени информация в этих документах была в большинстве случаев статической, что требовало реакции сервера на действия пользователя. С введением динамического HTML парадигма Web сместилась от взаимодействия с сервером в сторону создания интерактивных Web-узлов и Web-приложений. Поскольку динамический HTML обеспечивает возможность взаимодействия HTML-документов с пользователем и полного их изменения на клиентском компьютере, вы можете создавать Web-приложения с богатыми возможностями.

Динамический HTML построен на объектной модели, которая расширяет традиционный статический HTML-документ. С помощью данных лекций вы изучите динамический HTML и научитесь создавать страницы, которые будут в интерактивном режиме взаимодействовать с пользователем. Материал лекций предполагает, что читатель знаком с HTML и основными принципами программирования. В лекциях нет описания HTML или основ программирования на языках JavaScript, JScript или VBScript. Данные языки рассматриваются как инструменты для манипулирования страницами в динамическом режиме.

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

Создание интерактивных страниц

Концепция создания интерактивных Web-страниц не является новой — компании Microsoft и Netscape изначально определили простую объектную модель, которая была представлена как способ создания интерактивных страниц. При более внимательном рассмотрении объектная модель оказалась более эффективной только для базовой проверки форм. Динамические документы были по большей части мифом до появления Microsoft Internet Explorer 4.0, поскольку страница могла быть изменена только при ее создании. Интерактивные документы моделировались путем полной перезагрузки страницы или внедрения объектов на страницу. Многие апплеты Java, элементы управления ActiveX и даже анимированные изображения в формате GIF были разработаны для выполнения операций, аналогичных тексту, что позволяло преодолеть статическую природу HTML. Однако использование объектов вместо стиля и элементов управления содержанием представляет собой не самое лучшее решение.

После изучения множества схем для данных объектов и анимированных изображений GIF, разработчики Internet Explorer пришли к выводу, что для манипулирования документами необходим более мощный прикладной интерфейс программирования (application programming interface, API) . С помощью объектной модели, которая обеспечивает полный доступ к документу, Web-мастеры могут использовать встроенные возможности размещения объектов в HTML и каскадные таблицы стилей (Cascading Style Sheets, CSS) . Такая модель существенно улучшает производительность, сокращая необходимость загрузки больших анимированных изображений GIF и апплетов. Информация становится доступной мгновенно, поскольку она больше не спрятана внутри изображений или объектов.

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

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

Языки программирования


Язык программирования используется для манипулирования объектной моделью динамического HTML, но динамический HTML разработан как независимый от платформы и языка программирования. Поэтому могут быть использованы языки программирования JavaScript, JScript, VBScript, C++, Java, а также другие языки.

В данном курсе используется преимущественно язык JScript для доступа к объектной модели документа. JScript является реализацией компании Microsoft стандарта ЕСМА262 (European Computer Manufacturers Association — европейская ассоциация производителей компьютеров), разработанного компаниями Microsoft, Netscape и другими организациями. Данный стандарт формализует языковые конструкции JavaScript и JScript, так что могут быть созданы реализации, допускающие совместное взаимодействие. Важно помнить, что данный стандарт определяет только конструкции языка. Несмотря на то, что язык часто ассоциируется с объектной моделью, данный стандарт не определяет объектную модель. Поэтому, когда вы определяете, поддерживает ли браузер версию JavaScript или JScript, следует четко различать объектную модель и элемент языка. JScript в Internet Explorer 4.0 совместим со стандартом ЕСМА, но реализация JavaScript 1.2 в Netscape 4.0 с ним не совместима.

Примечание: Термины JavaScript и JScript могут быть в общем случае использованы как синонимы при обсуждении языков программирования. В данном курсе используется JavaScript, поскольку он более известен.

Апплеты и объекты на странице могут взаимодействовать с ней. Например, в Internet Explorer объект, написанный на C++ или другом языке, реализует взаимодействие со страницей посредством объектной модели. Описание метода создания апплетов, использующих динамический HTML, выходит за рамки этого курса. Однако данный курс содержит основы для понимания возможностей взаимодействия динамического HTML с такими объектами.

Если вы знакомы с языком JavaScript и существующей объектной моделью, то обнаружите, что расширения объектной модели динамического HTML совместимы со всеми предыдущими версиями. Все страницы, написанные для предыдущих версий Internet Explorer или Netscape Navigator 3.0, будут выполняться в Internet Explorer 4.0. Такая совместимость позволяет Web-мастерам использовать имеющиеся знания при изучении данных нововведений. Тем, кто не знаком с JavaScript, изучение методов программирования HTML-страницы позволит расширить и улучшить работу создаваемых страниц и приобрести некоторый опыт.

Новые элементы

Динамический HTML снимает все ограничения на доступ к документу. Динамический HTML в Internet Explorer 4.0 предоставляет в распоряжение разработчиков ряд новых элементов, которые обсуждаются в следующих разделах.

HTML 4.0 и расширенная поддержка CSS. Браузер Internet Explorer поддерживает последний стандарт HTML 4.0, CSSI и множество новых элементов в CSS. Эти стандарты HTML и CSS определяют элементы, представляемые объектной моделью динамического HTML.

Полный доступ к структуре документа. Доступ к элементам в документе поддерживается объектной моделью динамического HTML. Вы больше не ограничены программированием элементов форм. Стиль и содержание любого элемента могут быть изменены в динамическом режиме, и данные изменения будут немедленно отражены в документе.

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

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

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

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

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

Эффекты мультимедиа и анимации. Браузер Internet Explorer 4.0 тесно интегрирует эффекты мультимедиа и анимации с содержанием документа. Данные эффекты включают фильтры, которые могут моделировать источники света, тени и другие эффекты, которые реализуются непосредст-венно в тексте или других элементах управления. Могут быть также добавлены эффекты перехода между изображениями и текстом, и даже между страницами.

Все эти элементы основаны на текущем обсуждении внутри рабочих групп консорциума W3C (World Wide Web Consortium). Объектная модель динамического HTML рассматривается рабочей группой объектной модели документа (Document Object Model). Цель этой группы заключается в определении объектной модели, которая является независимой от языка и платформы и удовлетворяет ряду требований для структурированных документов. Объектная модель, которая определена в Internet Explorer 4.0, удовлетворяет всем требованиям, изложенным рабочей группой объектной модели документа.

Определение HTML-документа

HTML является приложением языка SGML (Standard Generalized Markup Language — общий стандартный язык разметки). В документе HTML/SGML теги определяют структуру содержания документа. Традиционный SGML-документ имеет три различных компонента: структура, стиль и содержание. С введением динамического HTML был добавлен четвертый компонент: модель поведения. Термин модель поведения (behavior) определяет взаимодействие между пользователем и HTML-страницей. Основное внимание в данном курсе сосредоточено на создании HTML-приложений путем манипулирования различными компонентами документа. Структура представлена рядом семейств элементов; стиль представлен для каждого элемента и во всех семействах таблиц стилей. Содержание представлено посредством всех элементов и объекта TextRange. Сценарии (скрипты) манипулируют структурой, стилем и содержанием в ответ на события для создания модели поведения документа.

Структура и стиль

Структура обеспечивает контекст для информации, которая содержится внутри документа. Например, элементы Header с H1 по H6 предназначены для определения различных заголовков и их относительного значения. После элемента H1 может находиться другой элемент H1 или элемент H2, но не элемент H3. Однако HTML быстро развивается и разделение между структурой и представлением часто игнорируется. Web-мастеры используют теги HTML не для создания структуры, а для определения стиля. Элемент H1 часто используется для отображения текста крупным шрифтом полужирного начертания, а не для определения заголовка высшего уровня. По мере дальнейшего отклонения от SGML были изобретены теги стилей. Например, были введены теги и для выделения текста полужирным начертанием и курсивом.

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

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

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

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

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

В середине 90-х был введен новый язык SGML — каскадные таблицы стилей (Cascading Style Sheets) для определения стиля в HTML. Спецификация CSS была разработана с участием Берт Хос и Хекен Лью из консорциума W3C, а также с участием многих других членов W3C и была принята большинством браузеров. По существу, элементы Strong в CSS (и даже элемент Bold в данном случае) больше не служат для выделения текста полужирным начертанием. Вместо этого элемент Strong используется традиционным образом для выделения важного слова. Таблица стилей теперь определяет, что элемент Strong должен быть выделен полужирным начертанием:

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

Структура курса

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

Часть I. HTML и программирование сценариев

В главах с 1 по 5 рассматриваются отношения между программированием сценариев и HTML-документом, описывается окно браузера и объясняется использование модели событий динамического HTML. Предполагается, что читатель знаком с основами HTML и программирования на языках JavaScript или VBScript.

В части I вводится понятие иерархии объектов, которая представляет четыре компонента документа: структуру, стиль, содержание и модель поведения. Компоненты подробно обсуждаются в частях II-IV, а поскольку данные вопросы тесно связаны, многие объяснения частично повторяются.

Часть II. Структура документа

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

Часть III. Стиль документа и анимация

Основной темой обсуждения в части III является концепция стиля, которая тесно связана с индивидуальными элементами. Используя таблицы стилей, Web-мастер определяет внешний вид документа, пробелы, цветовую гамму и так далее.

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

Часть IV. Содержание документа и связывание данных

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

В главе 15 показано, как использовать динамический HTML для создания Web-страниц клиент/сервер, включая связывания HTML-таблицы с набором данных, которым можно манипулировать локально. Данная возможность позволяет создавать быстро загружаемые страницы с данными, которые можно легко сортировать, отбирать и редактировать на стороне клиента.

DHTML — динамический язык разметки

Wikimedia Foundation . 2010 .

Смотреть что такое «DHTML» в других словарях:

DHTML — kalba statusas T sritis informatika apibrėžtis Dinaminė ↑HTML kalba, patobulintas HTML kalbos variantas, kai galima atsižvelgiant į skaitytojo veiksmus keisti ↑tinklalapio turinį, vaizduojamą ↑naršykle, iš naujo neatsiunčiant tinklalapio iš… … Enciklopedinis kompiuterijos žodynas

DHTML — [Abk. für dynamisches HTML], HTML … Universal-Lexikon

DHTML — (Dynamic HTML) type of HTML language that includes additional options for HTML documents and allows flexible design and immediate interaction with the user … English contemporary dictionary


DHTML — DEFINICIJA krat. int. prošireni programski jezik za Internet s ubačenim skriptnim programima za postizanje interaktivnosti i dinamičnosti; dinamički HTML, usp. HTML, XML ETIMOLOGIJA engl. Dynamic Hypertext Markup Language … Hrvatski jezični portal

DHTML — HTML dynamique HTML dynamique, de l anglais Dynamic HTML, souvent abrégé DHTML, est un nom générique donné à l ensemble des techniques utilisées par l auteur d une page web pour que celle ci soit capable de se modifier elle même en cours de… … Wikipédia en Français

DHTML — In diesem Artikel oder Abschnitt fehlen folgende wichtige Informationen: Beispiel (englische Wikipedia) und Quellen Du kannst Wikipedia helfen, indem du sie recherchierst und einfügst. DHTML, Dynamic … Deutsch Wikipedia

DHTML — ● ►en sg. m. ►WEB Dynamic HyperText Markup Language. HTML dynamique, ayant été présenté sous diverses formes au fil du temps: d abord un simple SSI vous qualifiait pour un expert du DHTML, puis ce fut du HTML 4, utilisant les CSS (feuilles de… … Dictionnaire d’informatique francophone

DHTML — Dynamic HTML, mit CSS und/oder JavaScript erweitertes HTML. DHTML ist der Sammelbegriff für Lösungen, bei denen beliebige Elemente einer Webseite dynamisch verändert werden können. Beispielsweise können Ebenen (Layers) frei angeordnet und… … Online-Wörterbuch Deutsch-Lexikon

DHTML — Abk. von Dynamic HTML . Zusammenfassung verschiedener Sprachen wie HTML und CSS, JavaScript usw. unter einem einheitlichen Begriff. DHTML also keine eigene Programmiersprache, sondern eher ein Marketingkonstrukt … SEO Wörterbuch

DHTML — Dynamic Hyper Text Markup Language (Computing » General) … Abbreviations dictionary

Глава 13

Данная глава предназначена для того, чтобы познакомить вас с применением сценариев для создания динамических HTML?документов на примере языка программирования JavaScript.

13.1. Основы использования сценариев в HTML-документе

Помещение сценария в документ

Для помещения сценария в документ достаточно использовать HTML?элемент SCRIPT. Этот элемент задается парными тегами и имеет следующие атрибуты:

• src – URI файла, в котором записан код внешнего сценария;

• type – задает тип содержимого элемента SCRIPT или файла, определенного атрибутом src, принимает значения вида text/язык_сценария (например, text/javascript, text/vbscript);

• language – задает язык сценария (например, javascript или vbscript); при использовании атрибута type этот атрибут излишен.

Элемент SCRIPT может появляться как в заголовке, так и в теле документа произвольное количество раз. Рассмотрим пример внедрения в документ простейшего сценария на JavaScript (язык рассмотрим чуть позже) (пример 13.1).

Простейшая страница со сценарием

Страница, содержащая сценарий

Прочий текст страницы.

Участки кода между , начинающиеся с document.write(), должны быть записаны в одну строку, иначе пример работать не будет. Что же делает сценарий в приведенном примере? Да ничего особенного, просто при загрузке страницы печатает в правом верхнем углу приветствие, цвет и текст которого зависят от времени суток.

Стоит сказать несколько слов о еще одном HTML?элементе, имеющем отношение к сценариям, – это NOSCRIPT. Этот HTML?элемент задается парными тегами и полезен, когда автор документа хочет подстраховаться на случай, если его документ будет открыт в браузере, не поддерживающем сценарии вообще или не поддерживающем сценарии на используемом языке программирования. Итак, если сценарий не может быть выполнен, то браузер отобразит содержимое элемента NOSCRIPT (в нем может быть, например, гиперссылка на версию документа, не использующую сценарии).

Скрытие сценария

Рассмотрим прием, который часто применяется для того, чтобы браузер, вообще «не знающий» HTML?элемента SCRIPT, не показал пользователю текст сценария. Это может случиться, если сценарий помещен в тело документа.

Для предотвращения возникновения такой ситуации текст сценария помещают в HTML?комментарий следующим образом:

Браузеры, поддерживающие элемент SCRIPT, должны проигнорировать HTML?комментарий внутри этого элемента (хотя некоторые версии браузера Netscape Navigator не воспринимали сценарий, заключенный в комментарий HTML).

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

13.2. Исполнение сценария

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

Исполнение при загрузке документа

Интерпретатор браузера выполняет операторы языка JavaScript, записанные вне тела какой?либо функции, только один раз по мере загрузке документа. Причем положение HTML?элемента SCRIPT с текстом сценария определяет момент времени, в который сценарий будет выполняться. Так, сценарий в примере 13.1 выполнялся именно до того, как было загружено остальное содержимое документа, поэтому выведенный им текст и появился раньше основного содержимого документа.

Чтобы при загрузке HTML?документа выполнялась какая?либо функция, в нужном месте сценария должен быть записан вызов функции. Так, пример 13.1 можно переписать следующим образом (пример 13.2 сокращен).

Пример 13.2. Вызов функции при загрузке документа

Страница, содержащая сценарий

Прочий текст страницы.

Если бы в коде сценария не было явного вызова функции greeting(), то на странице не появилось бы приветствие.

Реакция на события

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

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

Таблица 13.1. Атрибуты для назначения обработчиков событий

Значениями приведенных в таблице атрибутов могут быть фрагменты кода сценариев, например:

//Аккуратно оформленный блок кода, ведь строки HTML-разметки можно

alert(‘Лучше нажимайте на соседний абзац.’);

Обратите внимание, что поскольку текст обработчика помещается в двойные кавычки, то сами кавычки в тексте сценария использовать не следует. Обычной практикой является создание функций?обработчиков события (обычной функции JavaScript) вместо записи действий по обработке события прямо в теге элемента. В таком случае в атрибут onСобытие записывается код вызова функции?обработчика.

События, возникающие в дочерних элементах, передаются вверх по иерархии родительским элементам. Так, например, если над текстом элемента B в приведенном ниже примере произойдет щелчок кнопкой мыши, то событие получит сначала элемент B, потом элемент P, а затем и элемент BODY:

13.3. Объектная модель документа


Чтобы можно было успешно применить полученные значения по программированию на JavaScript, нужно рассмотреть еще один специфический момент – это то, как сценарии могут воздействовать на HTML?документ. Для этого необходимо изучить технологию представления HTML?документа в виде совокупности объектов – объектную модель документа (DOM, Document Object Model). DOM включает не только объекты, из которых состоит документ, но и объекты, позволяющие получать различную информацию о браузере, системе (в частности, о видеосистеме компьютера), работать с окнами и многое другое.

Объект document

Для программиста на JavaScript HTML?документ представляется в виде объекта document. Этот глобальный объект существует в единичном экземпляре. О создании объекта document заботится интерпретатор.

Свойства и методы объекта document

Итак, объект document предоставляет ряд свойств и методов, позволяющих осуществлять практически любые манипуляции с HTML?документом. Основные свойства объекта document приведены в табл. 13.2.

Таблица 13.2. Свойства объекта document

Свойства, отвечающие за цветовое оформление, хранят целочисленные значения. Другие свойства, кроме возвращающих коллекции, хранят строки. Особо следует рассмотреть свойства, которые возвращают коллекции: all, anchors, forms, frames, images и links. В этих коллекциях находятся объекты, описывающие соответствующие элементы HTML?документа.

Коллекции – это тоже объекты, во многом похожие на массивы. Однако коллекции предоставляют доступ к своим элементам c помощью метода item(). Причем доступ может осуществляться как по номеру элемента в коллекции, так и по его имени (задается атрибутом id или name элемента). Нумерация элементов в коллекциях начинается с нуля. Кроме того, для коллекций предусмотрено свойство length, хранящее количество элементов в коллекции.

В качестве примера рассмотрим, как получить доступ к элементам следующего HTML?документа (пример 13.3).

Пример 13.3. HTML-документ, к элементам которого нужно получить доступ

Главный заголовок документа

Если осуществлять доступ к элементам документа при помощи коллекции all с использованием номеров, то доступ ко всем элементам документа будет выглядеть следующим образом:

var elements = []; //Массив, в который скопируем ссылки на объекты страницы

Пример модифицирования таблицы сценарием

Путь к изображению:

Код Описание Просмотр

В приведенном примере обратите внимание на элемент TBODY таблицы. Присвоив ему имя, вы можете работать с телом таблицы как с самостоятельной таблицей. Это же справедливо для THEAD и TFOOT. Обратите также внимание на получение значений, введенных в текстовые поля: в большинстве случаев можно пользоваться не методами getAttribute() и setAttribute(), а свойствами, которые имеют такие же названия, как и соответствующие атрибуты.

Теперь очередь файла с кодом сценария. В примере он имеет имя script_13_4.js (JS – стандартное расширение для файлов со сценариями на JavaScript) (пример 13.5).

//Функция принимает код, название, путь изображения и добавляет

//запись в таблицу function add_image(code, imagename, path)<

if (valid_data(code, imagename, path))<

//Формирование строки таблицы (в части TBODY)

var row = mytable.insertRow();

//Ячейка с кодом рисунка row.insertCell().innerHTML = » » + code + » «;

//Ячейка с названием row.insertCell().innerHTML = imagename;

//Ячейка с изображением row.insertCell().innerHTML = ‘ ‘;

//Функция проверяет правильность введеных данных function valid_data(code, imagename, path)<

//Проверка, введены ли все значения if (code == «» || imagename == «» || path == «»)<

alert(«Введите значения во все поля»);

//Проверим, чтобы код изображения не дублировался var i;

Страница с меню

Первый пункт меню

Второй пункт меню

Третий пункт меню

Четвертый пункт меню

Пятый пункт меню

Из приведенного текста можно увидеть, каким образом используется таблица: пунктами меню являются строки таблицы. Чтобы строки таблицы подсвечивались при наведении указателя мыши, их стилевой класс динамически изменяется при обработке событий onMouseOver, onMouseOut. Изменив определения стилевых классов item, selected, menu, можно легко добиться нужного вида меню.

При выборе каждого из пунктов меню вызывается соответствующая функция?обработчик (см. значения атрибутов onClick для элементов TR). Все функции?обработчики собраны в файле menu.js, текст которого приводится ниже (пример 13.7).

В этом файле содержатся функции-обработчики для каждого пункта меню

alert(«Вы выбрали первый пункт меню»);

alert(«Вы выбрали второй пункт меню»);

alert(«Вы выбрали третий пункт меню»);

alert(«Вы выбрали четвертый пункт меню»);

alert(«Вы выбрали пятый пункт меню»);

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

Объект navigator


Глобальный объект navigator позволяет получить некоторую информацию о браузере, в котором происходит просмотр страницы со сценарием. Свойства объекта navigator, поддерживаемые большинством браузеров (по крайней мере, не только браузером Internet Explorer), приведены в табл. 13.5.

Таблица 13.5. Свойства объекта navigator

Часто использовать объект navigator нет необходимости, однако он может очень пригодиться при создании достаточно продвинутых и «живучих» веб?страниц, способных выбирать сценарии для выполнения в зависимости от браузера, в котором они открываются. Простейший код, позволяющий отличить браузер Internet Explorer, приведен ниже (пример 13.8).

if (navigator.appName == «Microsoft Internet Explorer»)<

//Код для Internet Explorer.

//Код для другого браузера.

Объект window

Глобальный объект window предоставляет возможности по манипулированию окном браузера или окном фрейма, в котором открыт документ со сценарием. Кроме того, при помощи объекта window можно открывать новые окна, манипулировать фреймами, создавать таймеры (что очень нужно для анимации) и делать еще много полезного.

Свойства и методы объекта window

Основные свойства объекта window приводятся в табл. 13.6.

Таблица 13.6. Свойства объекта window

В табл. 13.7 приведены основные методы объекта window.

Таблица 13.7. Методы объекта window

Как было сказано при описании метода open() в табл. 13.7, для этого метода предусмотрено несколько дополнительных параметров. Основные параметры перечислены в табл. 13.8.

Таблица 13.8. Параметры метода open()

Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 ? 400 можно использовать следующий вызов метода open():

Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open() в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open() окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.

Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.

Примеры использования объекта window

Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.

Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).

Рис. 13.3. Изображения-кадры

Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML?документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).

Страница с анимацией

В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames и имеют имена вида номер.gif.

Создание всплывающих окон

Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком?то веб?архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open() объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.

Пример 13.10. Создание и закрытие всплывающего окна

чтобы открыть новое окно на 5 секунд.

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

Объект style

Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.

Свойства объекта style

Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:

Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».

В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:

el.style.borderStyle = «solid»; //свойство border-style

el.style.borderColor = «blue»; //свойство border-color

el.style.borderBottomW ; //свойство border-bottom-width

Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.

Таблица 13.9. Дополнительные свойства объекта style

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

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

В первом примере реализуется перемещение изображений«шариков» внутри рамки (элемент DIV). Шарики имеют случайные первоначальные скорости и направления движения. Кроме того, при достижении стенок (рамки элемента DIV) они упруго он них отталкиваются. Страница примера выглядит так, как показано на рис. 13.4.

Рис. 13.4. Перемещение «шариков» внутри элемента DIV

Ниже приведен текст HTML?документа, который показан на рис. 13.4 (пример 13.11).

Илон Маск рекомендует:  Что такое код ncurses_mouseinterval
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL