Материал: Язык JavaScript. учеб.-методич. пособие. Деревянко В.Н
Рис. 2. Тегам HTML соответствуют элементы
HTML-документа в окне браузера
Другими словами, достаточно записать выражение:
document.forms(0).elements(1) // второй элемент формы
А обращение к ссылке записывается так:
document.links(0)
Добавим к HTML-документу сценарий, выводящий окно с информацией о тегах (см. рис. 3).
Пример. Код с информацией о тегах
<html>
<!-- <h1>добавление атрибутов id</h1> -->
<h1>Моя веб-страница</h1>
<img src="pict.jpg">
<a href = "www.admiral.ru/~dunaev">Caйт В.Дунаева</A>
<form>
<input type="text" value="">
<p>
<button onclick="mу()">Нажми здесь </button>
</form>
<script>
msg = ""
for(i = 0; i < document.all.length; i++){
msg += i+" "+document.all[i].tagName+"\n"
}
alert (msg)
</script>
</html>
Рис. 3. Окно с информацией о тегах
Хотя теги <head>, <title> и <body> в приведенном документе явно не упоминаются, соответствующие им объекты присутствуют в объектной модели этого документа и, следовательно, в коллекции all. Если при вызове метода объект не указан, то браузер предполагает, что метод относится к объекту window (alert (msg) в данном примере). Вместо объекта window можно указывать объект self, так как это синоним текущего окна.
Ссылки на объекты можно сохранять в переменных, которые потом можно использовать для обращения к свойствам и методам.
Добавим к основным тегам атрибуты id:
<img id = "myimage" src = "pict.jpg">
<a id = "myref" HREF= "www.admiral.ru/~dunaev"> Caйт В.Дунаева</A>
<form id = "myform">
<input id = "myinput" type = "text" value ="qewe">
<p>
<button id = "mybutton" onclick = "my()"> Нажми здесь
</button>
</form>
В приведенном выше примере элемент изображения, созданный с помощью тега
<img id = "myimage" src = "pict.jpg"> , имеет атрибуты id и src. Этим атрибутам соответствуют свойства id и src объекта этого изображения. Ниже приведены примеры различных вариантов обращения к данным свойствам:
document.images(0).id // "myimage"
document.images("myimage").id
document.all("myimage").id
document.all.myimage.id
var x = document.all.myimage // объект
x.id // "myimage"
document.images(0).src /* строка URL, например,
filе:///С:/Мои%20документы/рict.jpg */
document.images("myimage").src
document.all("myimage").src
document.all.myimage.src
var x = document.all.myimage // объект
X.Src /* строка url, например, file:///с:/Мои%20документы/pict.Jpg */
Получение имени тега для i-го элемента коллекции all:
document.all[i].tagName
Создание фреймов
Напомним, что в HTML-документе с фреймами вместо тега <body> используется тег <frameset>. Содержимым каждого фрейма можно управлять по отдельности. Можно связать документы разных фреймов.
Пример. Cоздание фреймов
<html>
<head>
<title>Документ с фреймами</title>
</head>
<frameset cols=”20%, 80%”>
<frame src=”frame1.html”>
<frameset rows=”200, *”>
<frame src=”frame2.html”>
<frame src=”frame3.html”>
</frameset>
</frameset>
</html>
Размеры строк (столбцов) указываются количеством пикселов или в процентах от высоты окна для строк (ширины окна для столбцов), или символом * - выделить всё оставшееся пространство (обычно для последнего фрейма).
Таблицы
Таблицы можно использовать для представления данных и как способ организации расположения разнообразных данных на странице. Ячейки могут содержать текст, графику и другую таблицу. Сначала определяется таблица (тег <table>), а затем внутри этого определения задаются строки (тег <tr>) и содержимое ячеек (тег <td> — для данных, тег <th> — для названий заголовков столбцов).
Пример. Простая таблица
<html>
<body>
<table border>
<caption align=top>Список сотрудников</caption>
<tr>
<th>Имя</th><th>Должность</th> <th>Оклад</th>
</tr>
<tr><td>Иван</td><td>Директор</td> <td>1000</td></tr>
<tr><td>Петр</td><td>Бухгалтер</td> <td>600</td></tr>
<tr><td>Федор</td><td>Рабочий</td> <td>150</td></tr>
</table>
</body>
</html>
Атрибут border задаёт вид рамок, атрибут caption описывает заголовок таблицы, изображённой на рис. 4.
-
Список сотрудников
Имя
Должность
Оклад
Иван
директор
1000
Петр
Бухгалтер
800
Федор
Рабочий
50
Рис. 4. Пример простой таблицы
В следующем примере используем таблицу без рамок для размещения различных элементов на странице. В ячейки помещены текстовые ссылки, изображения и число 1000, а некоторые ячейки остались пустыми (рис. 5).
Пример. Применение таблицы для размещения элементов на странице
<html>
<head><title>Таблица</title><head>
<body>
<h2>
Использование таблицы как способа расположения элементов на странице
</h2>
<table>
<tr>
<td><a href="primer1.jpg">Пример 1</a></td>
<td><image src="loglad1.jpg" width=100 height=100></td>
<td>1000</td>
</tr>
<tr>
<td><a href="pict.jpg">Пример 2</a></td>
<td><image src="logo.gif"></td>
</tr>
</table>
</body>
</html>
Рис. 5. Использование таблицы как способа
расположения элементов на странице
Таблицы могут использоваться также для обтекания текстом графики, отображения галереи миниатюр, создания списков с маркерами (в виде таблиц из двух столбцов), бокового навигационного меню, управления границами на Web-странице, привлекательной организации текста в окне браузера, имитации фреймов на странице, управлять расположением элементов и текста формы. Подробно об этом написано в [5].
Динамический html
Динамический HTML состоит из трёх частей: собственно статического языка разметки HTML, каскадных таблиц стилей и языка JavaScript. Страницы могут динамически менять стили, содержание и оформление. Можно создавать интерактивные документы, взаимодействующие с пользователем в реальном масштабе времени. Таблицы стилей позволяют отделить логическую структуру документа от формы его представления.
Каскадные таблицы стилей CSS (Cascading Style Sheets) представляют собой набор спецификаций (называемых правилами), которые позволяют получить полный контроль над расположением элементов на Web-странице и внешним видом ее содержимого.
Каскадные таблицы список стилей (иногда переводится как каскадный список стилей) позволяют задавать параметры тегов не только с помощью атрибутов, но и в строке, являющейся значением специального атрибута style. наряду с атрибутом style был введен в обращение контейнерный тег <style>. в теге <style> можно задать индивидуальные стили для ряда тегов, а также создать произвольные стили и закрепить за ними имена.
Существуют два способа назначения стилей: глобальное и индивидуальное назначение.
С помощью атрибута class = имя_стиля можно свойства стиля с указанным именем придать определённому тегу. Имя класса указывается в селекторе правила после имени тега и отделяется от него точкой. Можно определить несколько правил форматирования для одного элемента и с помощью параметра class соответствующего тега применять разные правила форматирования в документе. Например, можно определить два класса отображения заголовка первого уровня:
<style type="text/css">
<!--
HI.red { color: red; }
Hl.blueBgrd { color: red; background-color: blue}
//-- >
</style>
В тексте документа ссылка на соответствующий класс задается в параметре class:
<h1 class="red">Кpacный шрифт</h1>
<h1 class="bluebgrd">Кpacный шрифт на синем фоне</h1>
В приведенном примере классы задавались для разного отображения конкретных элементов одного типа. Этот метод позволяет указать параметры отображения отдельного элемента, но он трудоёмок.
Если класс должен применяться ко всем элементам документа, то в селекторе задается имя класса с лидирующей точкой без указания конкретного элемента:
<style type="text/css"><!--
.red { color: red; }
.bluebgrd { color: red; background-color: blue}
//--></style>
Теперь два класса red и blueBgrd можно применять к любым элементам документа:
<р class=red>Пepвый абзац</р>
<р class=blueBgrd>Bтopoй абзац</p>
Первый абзац отобразится красным шрифтом, а второй — красным шрифтом на синем фоне.
Для максимальной гибкости рекомендуется создавать внешние таблицы стилей в отдельных файлах. Таблицу стилей можно модифицировать без изменения исходного HTML-документа, и таблица стилей может использоваться несколькими документами. Она связывается с документом с помощью тега <link>, задаваемого в разделе <head>:
<link rel="stylesheet" type="text/css" href="mystyles.css">
Связываемый файл содержит набор правил каскадных таблицей стилей, определяющих форматирование документа, и должен иметь расширение css.
Тег <link> указывает на связь документа, содержащего данный тег, и другого документа или объекта. Он состоит из URL-адреса и параметров, конкретизирующих отношения документов. Параметры тега <link>:
href — указывает на url-адрес другого документа;
rel — определяет отношение между текущим и другим документом;
rev — определяет отношение между другим документом и текущим (отношение, обратное rel);
type — указывает тип и параметры присоединенной таблицы стилей.
Примеры тега <link> с параметрами:
1) <link rel="contents" href = "../toc.html">
2) <head>
<link rel=stylesheet type="text/css"
href="адрес_таблицы_стилей"
<title>="style"
</head>
Первый пример указывает на связь с файлом оглавления документа (toc.html — table of contents) с прямым отношением contents. Второй пример описывает способ использования внешних таблиц стилей, основанный на применении тега <link> внутри тега <head>.
В тэге <style> можно импортировать внешнюю таблицу стилей с помощью свойства @import таблицы стилей:
@import: url(mystyles.css);
С помощью стилей можно определить параметры форматирования текстов, задать фильтры (алгоритмы преобразования) для текстовых и графических элементов, а также задать три координаты позиционирования элементов. Координаты top и left, задаваемые с помощью стиля, определяют положение элемента на плоскости документа, а координата z-index указывает еще и слой документа. Так, задавая значения top и left для различных элементов, можно добиться того, что одни элементы будут накрывать другие. Чтобы указать, какой из них должен быть выше или ниже другого (независимо от порядка следования в HTML-коде), служит параметр z-index.
Пример. Позиционирование изображения
<img id = "myimg" SRC = "picture.jpg"
style = "position:absolute; top:20; left: 50: z-index:3">
Элементы с большим значением этого свойства располагаются над элементами с меньшим, благодаря чему можно управлять порядком наложения.
Объекты сторонних производителей, созданных с помощью различных языков программирования, вставляются в HTML-документ посредством контейнерных тегов <object> и <embed>. С их помощью можно встроить в HTML-документ звук, видео, Flash-анимацию, векторную графику, таблицы базы данных и др.