Использование JavaScript при оформлении динамических HTML страниц
JavaScript — это язык управления сценариями просмотра гипертекстовых страниц Web на стороне клиента. Основная идея JavaScript состоит в возможности изменения значений атрибутов HTML-контейнеров и свойств среды отображения в процессе просмотра HTML-страницы пользователем. При этом перезагрузки страницы не происходит. На практике это выражается в том, что можно, например, изменить цвет фона страницы или интегрированную в документ картинку, открыть новое окно или выдать предупреждение.
(Язык HTML определяет содержимое веб-страницы, а CSS – оформление. С помощью языка JavaScript программируют поведениевеб-страницы в ответ на действия пользователя.)
Основы Dynamic HTML (DHTML)
Как известно, наибольшими возможностями по оформлению внешнего вида документов HTML обладают каскадные таблицы стилей (CSS). Через каскадные таблицы стилей доступно управление как всеми основными оформительскими параметрами стандартного HTML, так и многими дополнительными параметрами.
Каскадные таблицы стилей (CSS) дают возможность работы со слоями: фрагментами HTML, которые можно размещать на веб-странице путем наложения их друг на друга с точностью до пиксела. Каждый из слоев имеет признак видимости, который позволяет делать слои скрытыми (не отображаемыми на экране).
Из сценария JavaScript имеется возможность динамического управления всеми стилевыми свойствами объектов документа HTML (в том числе и слоев), что позволяет получить на странице самые разнообразные эффекты, такие, как меняющиеся под курсором мыши цвета и шрифты, скроллинг текста и графики, выпадающие меню, перемещение объектов и так далее.
|
|
|
Такое взаимодействие документов HTML, каскадных таблиц стилей и сценариев JavaScript называтеся динамическим HTML (DHTML). При помощи DHTML разработчики могут писать сценарии, меняющие расположение и содержание Web-страниц без необходимости генерации новых страниц или их загрузки с сервера.
Слои
Для создания слоев следует использовать тег <DIV> или <SPAN>. Эти теги взаимозаменяемы и различаются лишь внешним видом в браузере. Если требуются отступы до и после текста, следует использовать элемент <DIV>. При размещении текста внутри параграфа применяется тег <SPAN>.
Пример работы с слоями
<html><body>
Слой 1 наверху<div style="position:relative; font-size:50px; z-index:2; color: navy">Слой 1</div><div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:1">Слой 2</div> Слой 2 наверху<div style="position:relative; font-size:50px; z-index:3; color: navy">Слой 1</div><div style="position:relative; top:-55; left:5; color:orange; font-size:80px; z-index:4">Слой 2</div></body></html>
Задание:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Табличка</TITLE>
</HEAD>
|
|
|
<TABLE BORDER>
<TR>
<TD rowspan=2> table 1</TD>
<td> table 2</td>
<TD> table 3</TD>
</TR>
<TR>
<TD>table 4</TD>
<TD>table 5</TD>
</TR>
</TABLE>
</HTML>
Билет 36
Использование объектной модели документа (DOM) в JavaScript
Объектная модель документа не является частью языка JavaScript. Строго говоря, DOM ( Document Object Model ) – это интерфейс прикладного программирования для представления документа (например, документа HTML , а также иных) и обеспечения доступа к его элементам и интерактивного изменения их свойств. Более того, DOM предоставляет механизмы для изменения самой структуры документа (добавление и удаление элементов, изменение их содержимого). Но это отдельный стандарт , в настоящее время развиваемый под эгидой W3C .
Объектная модель документа — интерфейс программирования приложений для HTML и XML-документов. Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:
· получение узлов,
· изменение узлов,
· изменение связей между узлами,
· удаление узлов.
Иерархия классов DOM
Объектно-ориентированный язык программирования предполагает наличие иерархии классов объектов. В JavaScript такая иерархия начинается с класса объектов Window, т.е. каждый объект приписан к тому или иному окну. Для обращения к любому объекту или его свойству указывают полное или частичное имя этого объекта или свойства объекта, начиная с имени объекта, старшего в иерархии, в который входит данный объект
|
|
|
Объект Screen позволяет узнать (но, разумеется, не изменить) разрешение клиентского экрана и глубину цвета. Определив разрешение экрана, можно предусмотреть разные варианты компоновки страницы, устанавливать размеры и положение новых окон, открывающихся из сценария. Методы для этого объекта не определены, но определен ряд свойств. Наиболее полезные:
width - ширина экрана в пикселах;
height - высота экрана в пикселах;
availWidth - доступная ширина экрана в пикселах;
availHeight - доступная высота экрана в пикселах.
Объект Navigator дает информацию о версии браузера. В принципе, это можно использовать при создании "браузеронезависимого" сценария. Однако, зачастую более удобен другой подход, описанный в разделе "Определение возможностей клиентского JavaScript".
Объект Location дает доступ к URL документа, отображаемого в окне браузера. Позволяет определить полный URL, а также его части: протокол, доменное имя и т.д. В отличие от двух предыдущих объектов, его свойства доступны не только для чтения, но и для изменения. То есть, в зависимости от выполнения условий, определенных в сценарии, мы можем загрузить нужный документ как в текущее окно или его фрейм, так и в любое из окон, открытых из сценария. Этот объект имеет и два метода:
|
|
|
reload() перезагружает указанный в качестве аргумента документ;
replace() загружает указанный документ, который замещает текущий в списке истории просмотра.
Объект History имеет единственное свойство length (количество просмотренных в данном сеансе документов), и три метода, позволяющих перемещаться по истории просмотра:
back() - на один шаг назад по истории просмотра;
forward() - на один шаг вперед по истории просмотра;
go(n) - на n шагов по истории просмотра (если n >0, то вперед, если n <0, то назад).
Объект Document, его свойства и методы предоставляют наиболее богатые возможности для разработчика. Приведенная здесь схема иерархии объектов включает только основные свойства этого объекта, определенные в базовой объектной модели документа (Document Object Model Level 0 - DOM0). На поддержку этих свойств можно смело рассчитывать при использовании любого относительно современного браузера.
Массив frames[] дает доступ к документам, загруженным в фреймы.
Надо отметить, что разные браузеры, поддерживая рассматриваемую иерархию, предлагают и дополнительные свойства почти для каждого объекта. Посмотреть эти свойства можно в разделе "Все о свойствах объектов". Обилие этих свойств и их сравнение для разных браузеров наводит на размышления.
Задание:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Табличка</TITLE>
</HEAD>
<TABLE BORDER>
<TR>
<TD rowspan=2> table 1</TD>
<td colspan=3> table 2</td>
</TR>
<TR>
<TD>table 3</TD>
<TD>table 4</TD>
<TD>table 5</TD>
</TR>
</TABLE>
</HTML>
Билет 37
Дата добавления: 2018-04-04; просмотров: 361; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!