4. Содержание отчёта
Отчёт должен содержать название и цель. Выполненное задание.
Выполненный вариант задания. Выводы.
5. Контрольные вопросы
1. Какие арифметические операторы вам известны.
2. Как в JavaScript происходит приведение типов.
3. Расскажите о объекте Math.
4. Для чего и как используется свойство With.
5. Метод round.
6. Метод min и max.
7. Метод floor.
Варианты заданий:
№ варианта |
Задание |
1 |
|
2 |
|
3 |
|
4 |
|
5 |
|
6 |
|
7 |
|
8 |
|
9 |
|
10 |
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 |
|
Лабораторная работа №10 Объект JavaScript – document.
1. Цель Изучить свойства, методы и наборы объект document, научиться применять их на практике.
2. Методические указания
1. При изучении конструкций языка HTML можно использовать любой
текстовый редактор. Для получения HTML файла, сохраняйте свои
изменения как текстовые, для файла используйте расширение *.htm или
*.html.
2. Более опытные пользователи могут воспользоваться любым
специализированным редактором HTML страниц (Macromedia
Dreamweaver, HomeSite, FrontPage, AceHTML, Web Development Studio)
3. Создаваемые файлы необходимо тестировать в основных браузерах Internet
Explorer, Mazilla Firefox, Opera.
4. Отлаженные файлы необходимо сохранять в отдельном каталоге.
5. По окончанию работы сохраните все созданные файлы на своих носителях.
3. Теоретические сведения
Объект Document особенно важен при разработке сценариев. Приведенная
здесь схема иерархии объектов включает только основные свойства этого
объекта, определенные в базовой объектной модели документа (Document
Object Model Level 0 - DOM0). На поддержку этих свойств можно смело
рассчитывать при использовании любого относительно современного браузера.
Более поздние стандарты DOM1 и DOM2 представляют документ HTML в
виде дерева и дают доступ ко всем элементам, несравненно расширяя
возможности разработчика. Однако, в этом разделе рассмотрим лишь базовые
возможности.
Свойства объекта Document
Начнем со скалярных свойств, общих для всех браузеров. Большинство их доступны как для
чтения, так и для изменения. Отметим, что значения свойств, связанных с цветами текста,
фона и гиперссылок, можно изменять динамически лишь в тех случаях, когда не заданы
соответствующие описания CSS, которые имеют больший приоритет. Все значения свойств
- строковые.
• title - текст заголовка документа (содержимое элемента title);
• fgColor и bgColor - цвет текста и цвет фона документа;
• linkColor, vLinkColor, aLinkColor - цвета непосещенных, посещенных и активных
гиперссылок;
• lastModified (только для чтения) - дата изменения документа;
• referrer (только для чтения) - URL документа, ссылка в котором привела к загрузке
текущего документа;
• URL (и устаревшее location) - URL документа.
Более интересны и полезны для разработчика свойства-массивы объекта Document. Все они,
естественно, имеют свойство length (количество элементов в массиве). Большинство
свойств, специфичных для объектов, хранящихся в этих массивах, ассоциируются с
атрибутами соответствующих элементов HTML. Вот лишь некоторые из них, понятные без
объяснений любому, кто знает HTML:
• объект Form имеет свойства name, action, method;
• объект Anchor имеет единственное свойство name;
• объект Link имеет свойства href, target;
• объект Image имеет свойства src, width, height.
К объектам документа, хранящимся в массивах images, forms и applets, а также к элементам
форм можно обращаться и по имени, если в начальном теге соответствующего элемента
HTML задан атрибу name. Пусть, например, в документе описано изображение
<img src="images/cat.jpg" id="cat_id" name="cat_name">
и оно является n-ым изображением, встречающимся в документе.
Как к элементу массива images , используя его индекс (индексация начинается с 0):
window.document.images[n-1]
1. Как к элементу массива images , используя значение атрибута name как ключ
массива:
window.document.images['cat_name']
2. Используя значение атрибута name как свойство объекта :
window.document.cat_name
3. Используя значение атрибута id и свойство getElementById:
window.document.getElementById('cat_id')
activeElement - определяет, какой элемент документа имеет фокус, то есть активен.
Атрибут только для чтения.
var a = document.activeElement;
alinkColor; linkColor; vlinkColor ;fgColor;bgColor - определяют свойство-цвет,
первые 3 - гиперссылок, 4 - цвет текста, 5 - цвет документа. Атрибут можно считать и
изменить.
var a=document.alinkColor; - получить цвет;
document.bgСolor="#CCCCCC"; - установить цвет;
lastModified - дата последнего изменения документа. Атрибут только для чтения.
var a=document. lastModified;
selection - то, что вы выделили. Имеет свойство type (none, text, control), и методы
clear(), createRange(), empty().
var a=document.selection;
alert(document.selection.type);
a.clear();
title - возвращает название документа (в тэгах <title></title>);
var a=document.title;
alert(a);
url - URL документа.
var a=document.url;
alert(a);
Набор all
Как мы можем изменить свойства (style) отдельного объекта документа, будь
то рисунок или таблица?
1.
В документе могут быть объекты (они, как и all - тоже наборы), к
которым мы обращаемся как к массивам, по их индексу. Это
anchors(якоря), applets(апплеты), forms(формы), frames(фреймы),
images(картнки), links(ссылки), plugins(плаг-ины), scripts(скрипты),
styleSheets(таблицы стилей). То есть мы задаем индекс, например, так:
document.images[2].style.left=100;
Нумерация идет по порядку, сверху, начиная с 0 (как указано в коде
HTML)
2. Чтобы не обращаться по индексу, можно указать для каждого из
вышеуказанных элементов имя (name):
<form name="form1" ...>
<input type="submit" ...>
</form>
<frame name="left" ...>
<img name="img1" src="...">
document.all имеет свойство length, определяющее количество
ВСЕХ элементов документа
for(i=0; i<document.all.length; i++) {
alert(document.all(i).tagName);
}
А также методы
а) item. Для того, чтобы воспользоваться этим методом, мы должны
для каждого элемента документа, к которому мы хотим обратиться,
определить ID, который может быть и одинаковым (в т.ч. для разных
объектов):
<TD ID="ROW">First item</TD>
<TD ID="ROW">Second item</TD>.
Объекты с одинаковым ID могут быть разными:
<TH ID="ROW">First item</TH>
<TD ID="ROW">Second item</TD>
но как правило, одинаковый ID присваивают однотипным элементам.
Также можно воспользоваться и свойством name (см.выше),
используя его вместо ID. Просто не каждому объекту положено иметь
имя, а только вышеперечисленным (frames, applets и т.д). Готово!
Теперь:
var coll = document.all.item("Sample")//-
возвращает объект
if (coll!=null) {
for (i=0; i<coll.length; i++)
alert(document.all.item("Sample",i).tagName);
}
; те в этом документа два объекта - <br> и <td> с ID "Sample"
"Э-э", -скажете,-"почему во вторых скобках какой-то появился индекс?" А
потому, что у нас несколько объектов имеют одинаковый ID - как же мы
будем их различать? А вот по индексу, хотя, если объект с данным ID в
документе один, то индекс можно не указывать. Нумерация, если помните,
начинается с 0.
б) tags. Вот пример:
if (document.all.tags("P")!=null) {
for (i=0; i<document.all.tags("P").length; i++)
document.all.tags("P")[i].style.textDecoration="underl
ine";
}
Т.е, можно прямо обращаться к свойствам объекта, прямо указывая его тэг и
порядковый номер! Безо всяких там ID и прочей американщины.
document.all.tags("hr")[10].style.color="0000FF";
anchors, applets, children, embeds, forms, frames, images, links, plugins, scripts,
styleSheets Те же своиства и те же методы, что и у all (length, item, tags)
Методы объекта Document
• open() - открывает новый документ; при этом все его содержимое
удаляется.
• close() - закрывает ранее открытый документ.
• write() - записывает в документ заданную в качестве аргумента строку.
• writeln() - аналогичен предыдущему, но выведенная в документ строка
заканчивается символом перевода строки.
close() - В отличие от windows.close() не закрывает окно броузера, а
прекращает вывод информации в выходной поток, т. е. на экран
(аналогично нажатию stop в броузере)
createElement(tag) - Создает новый элемент. Можно создать только
<IMG> или <OPTION>.
var newimg=document.createElement("IMG");
newimg.src="...";
open()-document.open("text/html", "replace"); Открывает новый выходной
поток. Первый параметр - тип, второй - необязательный, указывает - хотите
ли вы удалить предыдущий документ из истории.
write(),writeln() - выводит текст в ваш документ.
document.writeln("Hello!");
document.write("<h1>World</h1>"+"<hr>");
первая делает перевод строки, вторая - не делает.
4. Задания:
1. Написать скрипт выполняющий идентификацию браузера Internet Explorer.
2. Написать скрипт, определяющий разрешение экрана и выполняющий загрузку различных документов в зависимости от разрешения экрана
5. Содержание отчёта
Отчёт должен содержать название и цель. Ход работы все свойства, методы
и наборы. Выводы.
6. Контрольные вопросы
1. Объект Document.
2. Свойства объекта Document.
3. Методв объекта Document.
4. Наборы объекта Document.
5. Объектная модель DOM.