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

Содержание

14. Динамический html и Объектная Модель Документа

Содержание

Программный доступ к элементам

Объект window

Объект document

Объект body
Коллекция all
Коллекция anchors
Массив images
Коллекция forms
Свойство cookie
Поиск элемента по id
Поиск групп элементов
Программное создание, удаление и модификация HTML-элементов

Вопросы

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

DHTML не является технологией самой по себе, это продукт взаимодействия трех родственных и взаимодополняющих технологий: языка HTML, каскадных таблиц стилей (CSS) и языка сценариев (JavaScript или VBScript). Для предоставления сценариям доступа к HTML и CSS содержимое документа представляется в виде дерева объектов в программной модели, известной под названием Объектная Модель Документа (Document Object Model, DOM).

Динамические стили – одно из ключевых преимуществ DHTML, и DOM модель предоставляет программный доступ к стилям, позволяя изменять стили элементов и создавать новые стилевые правила.

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

Программный доступ к элементам

HTML-тэг элемента определяет тип сопоставленного ему объекта. Отдельные экземпляры объектов в документе могут идентифицироваться по их уникальному идентификатору (атрибуту/свойству id), имени (атрибуту/свойству name) или положению в дереве элементов DOM модели. Кроме этого есть ряд важнейших объектов, которые не имеют собственных тэгов. Это такие объекты как window (окно браузера), document (HTML-документ, загруженный в окно или фрейм), event (событие).

Объект window

Объект window является вершиной иерархии. Все остальные объекты являются дочерними или более отдаленными потомками объекта window. Браузер создает, как правило, единственный объект window, когда открывает документ в окне, однако если документ содержит фреймы (элементы frame и iframe), то дочерние объекты window создаются также для каждого фрейма. Доступ к дочерним окнам возможен через коллекцию frames родительского окна. Дочерние окна зависимы от состояния родительского окна. Например, закрытие родительского окна приводит к закрытию всех дочерних окон. Нет необходимости указывать объект window для вызова его свойств или методов, если вызов относится к текущему окну. Например, инструкции window.close() и close() идентичны.

Многие свойства объекта window сами являются объектами. Рассмотрим важнейшие из них.

studfiles.net

Глава 10 Введение в динамический HTML. HTML, XHTML и CSS на 100%

Глава 10

Введение в динамический HTML

10.1. Браузер и HTML-документ

10.2. Родительские и дочерние объекты

10.3. Объекты браузера

10.4. Объектная модель документа (DOM)

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

JavaScript – это объектно-ориентированный язык программирования. Это означает, что каждый элемент на веб-странице и в окне вашего браузера предстает в виде некоего объекта, доступного для управления из программного кода. Кнопки и поля формы, гиперссылки, изображения, цвет фона веб-страницы и даже само окно браузера с точки зрения программирования на JavaScript являются объектами.

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

Поделитесь на страничке

Следующая глава >

it.wikireading.ru

Documents войти Загрузить ×

Технологии

Веб-дизайн

advertisement advertisement

Классы в C#. Состав класса.

Вопрос № 1 Разберите работу гальванического элемента,

Алгоритм характеристики химического элемента на основании

Document 4784951

6А 6Б Свойства веществ(форма, объём,цвет,запах)

Лабораторная работа №11. Визуальное форматирование Цель работы Основные понятия

Протокол экспертизы ЭУМКД 2016

Кризисное состояние культуры общества, определяемое как

Крепеж — Portal Engineering

алгоритм алгоритм характеристики химического элемента на

studydoc.ru

Иллюстрированный самоучитель по Adobe GoLive 6 › Динамический HTML › Динамический HTML [страница — 113] | Самоучители по работе в Internet

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

Итак, изучив первые главы книги, мы научились разрабатывать HTML-документы, предназначенные для отображения в браузерах, и управлять стилевым оформлением элементов содержимого этих документов: Для получения еще более интересных возможностей следует сделать еще один шаг вперед – изучить технологию динамического HTML, которую часто обозначают как DHTML (Dynamic HTML). Но прежде чем мы узнаем, в чем же суть, следует сделать маленькое техническое отступление.

Существует такое понятие, как языки сценариев, или, как их еще называют, скриптовые языки. Среди них есть такие языки, которые распознаются и обрабатываются непосредственно браузером. Это VBScript и JavaScript. Язык VBScript ведет свою родословную от языка Visual Basic, развиваемого и поддерживаемого корпорацией Microsoft. Язык JavaScript унаследовал свои конструкции от языка Java, который усиленно продвигает корпорация Sun. Как мы уже говорили, эти скриптовые языки распознаются и обрабатываются непосредственно браузерами то есть в тело HTML-документа мы внедряем код программы, написанной на одном из этих языков, а браузер сам выполнит все действия, предписанные этой программой.

Эта простота использования и обусловила столь высокую популярность скриптовых языков. Однако создатели программ-браузеров являются конкурентами по отношению друг к другу. И получилось так, что компания Netscape, являющаяся изготовителями достаточно популярного браузера Netscape Navigator, не включила в состав своего браузера блок обработки языка VBScript. Это был серьезный удар по конкуренту. Результатом его явился тот факт, что подавляющее число разработчиков использует для своих нужд язык JavaScript. Несколько позже компания Microsoft нанесла «ответный удар», создав новую и очень интересную технологию, опирающуюся на язык VBScript, но эти и последующие события уже выходят за рамки нашей книги.

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

Сплав HTML, CSS, скриптовых языков, объектных моделей браузеров и получил наименование DHTML. Вся эта технология, которая выглядит гораздо «ложнее, чем есть на самом деле, предоставила разработчикам поистине огромные возможности. Если говорить максимально точно и правильно, то DHTML– это технология;динамического изменения содержимого Web-страниц при помощи скриптовых языков.

Как видно из приведенного определения, изменения содержимого Web-страниц мы можем производить только при помощи скриптовых языков. А значит, нам необходимо будет узнать, как ими пользоваться. Как видно, для того, чтобы получить возможность пользоваться самыми заманчивыми средствами создания Web-страниц все-таки придется немного программировать. Однако, в следующих главах мы увидим, как Adobe GoLive позволяет создавать сценарии практически без программирования. Но все-таки следует знать, как работают скриптовые языки, чтобы иметь возможность контролировать процесс создания сценариев Adobe GoLive. Для работы мы выберем JavaScript, так как сценарии, написанные на этом языке, будут гарантированно выполнены любым браузером. Итак, прежде чем переходить к технологии DHTML, следует рассмотреть язык JavaScript. Этому и будут посвящены несколько следующих разделов этой главы.

samoychiteli.ru

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

Documents войти Загрузить ×

Технологии
Веб-дизайн

advertisement advertisement

С использованием таблиц CSS — свойств позиционирования

ПРИЗНАКИ СТИЛЕЙ Определите стили по их характеристикам

Технологии Web-программирования

жем — претенциозных, стилизаторских, безвкусных. В

Лабораторная работа №10. Каскадные таблицы стилей Цель работы Основные понятия

CSS используется создателями веб

Введение в CSS

Структура и оформление текстового документа

Каскадные листы стилей (CSS). Свободное позиционирование

Основы веб

studydoc.ru

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

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

Может также быть очень хорошей идея использовать внешний источник как содержание уровня, когда Вы желаете обеспечить альтернативное содержание для броузеров, которые не поддерживают уровни. В этом случае, Вы можете использовать тэг <NOLAYER>, чтобы приложить содержание, которое будет отображено в броузерах, которые не поддерживают уровни, как проиллюстрировано в разделе «Тэг <NOLAYER>».

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

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

Если атрибут CLIP опущен, прямоугольник отсечения уровня определяется значениями WIDTH, HEIGHT и содержанием уровня. Если ни одно из этих значений не дано, по умолчанию значение левого отсечения уровня равно 0; верхнее отсечение равно 0; правое отсечение это ширина обертывания, и высота отсечения это высота, требуемая для отображения всего содержания.

Параметр VISIBILITY определяет является ли уровень видимым или нет. Значение HIDE скрывает уровень; SHOW показывает уровень; INHERIT заставляет уровень иметь ту же видимость, как у его родительского уровня. Для самых верхних уровней (то есть уровней, которые не вложены внутрь других уровней), значение INHERIT имеет тот же эффект, как и SHOW, так как документ тела всегда видим.

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

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

ianpage.narod.ru

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

Недоделанность JavaScript пришлась как нельзя более на руку компании Microsoft, как раз в это время бросившей все усилия на завоевание рынка броузеров. Еще в третьей версии Microsoft Internet Explorer язык сценариев (который фирме пришлось назвать JScript, так как марка JavaScript принадлежала Netscape) отличался от своего конкурента разве что тем, что многочисленные ошибки и упущения в его реализации были расположены в непривычных местах. В четвертой версии, однако, фирма Microsoft решила уйти в отрыв.

Как известно маркетологам, одно из главных условий успеха любой новинки — запоминающееся название. Чтобы не раздражать пользователей путаницей между JScript и JavaScript, фирма Microsoft окрестила комбинацию, включающую расширенный язык сценариев, частичную поддержку CSS2 и несколько мелких усовершенствований, словосочетанием «динамический HTML», — развернув, по своему обыкновению, массированную рекламную кампанию, подающую его как средство от всех без исключения болезней «обычного» HTML. Netscape волей-неволей должна была ответить на вызов и, скрепя сердце, объявила о поддержке динамического HTML в четвертой версии своего броузера, — хотя его возможности имели довольно мало общего с набором технологий Microsoft.

Основную идею динамического HTML можно сформулировать очень просто: полный контроль языка сценариев над всеми без исключения элементами документа, параметрами их оформления и размещения (как подразумеваемыми в HTML, так и задаваемыми с помощью CSS) и даже над самим текстом страницы. Благодаря этому любой элемент HTML-документа сможет двигаться в произвольном направлении, как угодно изменять свое форматирование и буквально переписываться — как в ответ на действия пользователя, так и по собственной инициативе. В сочетании с абсолютным позиционированием элементов средствами CSS (стр. 241) это позволяет реализовать на веб-странице почти полноценный программный интерфейс с выпадающими многоуровневыми меню (стр. 214), перетаскиванием объектов мышью и т. п.

До сих пор, впрочем, динамический HTML особого распространения в Интернете не получил, и для этого есть объективные причины. Главную роль играет, конечно, несовместимость броузеров-конкурентов, из-за которой очень трудно, а в некоторых случаях и невозможно создать одну версию динамической страницы, которая сохраняла бы работоспособность в обоих броузерах. Сказывается также конкуренция со стороны формата Shockwave Flash, в котором можно реализовать не менее интерактивные эффекты, чем в динамическом HTML, который притом полностью застрахован от несовместимостей (существует только один, разработанный самой фирмой Macromedia подключаемый модуль для просмотра Flash-вставок) и имеет стандартную специализированную среду разработки. Конечно, с доступностью информации в неграфических средах (стр. 34) у Flash дела обстоят куда хуже, чем у динамического HTML, но графические дизайнеры, к сожалению, редко задумываются о таких вещах.

Динамический html – Иллюстрированный самоучитель по Adobe GoLive 6 › Динамический HTML › Динамический HTML [страница — 113] | Самоучители по работе в Internet