LearningApps Логин: stu10b72 Пароль: sonne61

среда, 3 апреля 2019 г.

Объект document

Результаты практической работы "Морфей":

Фамилия, имя
Оценка
Капуста,Болгарова
11
Ермакова
10
Познанский, Терещенко, Андриенко
10
Зима, Кудряшова
9
Савенкова, Ростовцева
8
Куприенко, Кобзева
11
Куц, Листопад
11
Ковалёв, Мажара
???
Искендеров, Ищенко
11



Пройдите курс "Знакомство с JavaScript" на сайте HtmlAcademy

Заготовки к практической работе "Морфей"

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

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

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

Ниже перечислены свойства объекта document, доступные сценарию JavaScript:

Свойство
Описание
alinkColor
Цвет ссылок, выбранных пользователем
anchors
Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа
applets
Массив объектов, соответствующих аплетам Java, расположенным в документе HTML
bgColor
Цвет фона документа
cookie
Значение cookie для текущего документа
fgColor
Цвет текста
forms
Массив, содержащий в виде объектов все формы, расположенные в документе HTML
images
Массив растровых изображений, включенных в документ
lastModified
Дата последнего изменения документа HTML
linkColor
Цвет ссылок, размещенных в документе и еще не посещенных пользователем
links
Массив, содержащий все ссылки в документе HTML
location
Полный адрес URL документа HTML
referrer
Адрес URL вызывающего документа HTML
title
Заголовок документа, заданный с помощью оператора
URL
Полный адрес URL документа HTML
vlinkColor
Цвет ссылок, размещенных в документе и уже посещенных пользователем
Объект document может содержать в себе другие объекты, доступные как свойства:
Свойство
Описание
anchor
Локальная метка, определенная в документе HTML с помощью тэга <A>
form
Форма, определяемая в документе HTML с помощью оператора <FORM>
history
Список адресов URL, посещенных пользователем
link
Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver

Методы объекта document

Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:


Метод
Описание
clear
Удаление содержимого документа из окна просмотра
close
Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока
open
Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln
write
Запись в документ произвольной конструкции языка HTML
writeln
Аналогично предыдущему, но в конце строки добавляется символ новой строки

Сценарии, работающие с объектом document

Цветовое оформление документа

Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. В данном примере попробуем динамически изменить цветовое оформление документа HTML.

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

<HTML>
  <HEAD>
    <TITLE>Color Links</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--

      document.bgColor = "#00FF80";
      document.fgColor = "#800080";
      document.linkColor  = "#000000";
      document.alinkColor = "#FF0000";
      document.vlinkColor = "#4000FF";

    // -->
    </SCRIPT>
  </HEAD>
  <BODY BGCOLOR=white>
    <H1>Изменение цветового оформления</H1>
    <P>Посетите эти серверы:
    <P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
    <P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
    <P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>
    <P><A HREF="#Локальный раздел">Локальный раздел</A>
    <HR>
    <H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
    <P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet
  </BODY>
</HTML>

Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:

document.bgColor = "#00FF80";

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

Ссылки и метки в документе

Как известно, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать тэг <A>. В общем виде этот оператор представлен ниже:
<A HREF=Адрес URL или локальная метка NAME="Имя локальной метки"
 TARGET="Имя окна" onClick="Обработчик события: щелчок по ссылке"
 onMouseOver="Обработчик события: курсор над ссылкой"> Текст ссылки </A>

Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links. Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links. 

Вот список этих свойств:



Свойство
Описание
hash
Имя локальной ссылки, если она определена в адресе URL
host
Имя узла и порт, указанные в адресе URL
hostname
Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP
href
Полный адрес URL
pathname
Путь к объекту, указанный в адресе URL
port
Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке
protocol
Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке
search
Строка запроса, указанная в адресе URL после символа "?"
target
Значение параметра TARGET, заданное в ссылке
length
Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML

Комментариев нет:

Отправить комментарий