Джо Бернс
Урок 7. Концепция свойств.

Концепция

Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.
Нам известно, что существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. В Уроке 6 мы имели дело с переменными. Теперь рассмотрим концепцию свойств. Мы уже слегка касались этой темы. Свойства представляют собой часть или качество объекта. В Уроке 4 мы работали со свойством документа bgColor.

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

Скрипт

Ниже вы увидите множество скриптов, но все они составлены по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в document.write(). Внимание: 1) заголовки жирным шрифтом не являются частью самих скриптов; 2) текст в скобках после document.write() должен располагаться на одной строке.

Свойства объекта navigator (браузер)
<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".
<BR>Кодовое название " +acn+ ", заголовок "
+ua+ "." );
</SCRIPT>

Свойства объекта document
<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"
+bgc+ "</B>.")
document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки этой страницы
<B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки этой страницы
<B>" +vlc+ "</B>.")
document.write("<BR>URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>До этого вы были на странице <B>" +
ref+ "</B>.")
document.write("<BR>Заголовок этой страницы <B>" +t+ "</B>.")
document.write("<BR>Последние изменения внесены: <B>"
+lm+ "</B>.")
</SCRIPT>

Свойства объекта history
<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этой страницы вы посетили" +h+ " страниц.")
</SCRIPT>

Два свойства объекта location (адрес)
<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst +
"</B>." )
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страница находится на <B>" + hstn +
"</B>." )
</SCRIPT>

Эффект

Некоторые сведения о вашем компьютере:









Разбор скрипта

Поговорим о каждой группе отдельно...

Почему местами шрифт жирный?
Да так, ради забавы. Найдите в скрипте элементы, которые написаны жирным шрифтом. Я просто добавил команды <B> и </B> по обеим сторонам от имени переменной. Раз это document.write, в текст можно вписать любые команды HTML, изменяющие текст. Только следите за тем, чтобы команды HTML находились внутри двойных кавычек, иначе браузер посчитает их частью скрипта — это было бы ошибкой.

Вернемся к нашим свойствам...

Свойства объекта navigator
<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;

document.write("Вы пользуетесь <B>" +an+ "</B>,
версия " +av+ ".<BR>Кодовое название " +acn+ ",
заголовок " +ua+ "." );
</SCRIPT>

Люди обожают эти штуки. Объект navigator имеет четыре свойства. Обратите внимание на заглавные буквы!

  • appName сообщает название браузера, например, Netscape или Explorer.
  • appVersion сообщает версию браузера и платформу, на которой он работает.
  • appCodeName сообщает кодовое имя, данное браузеру, например, Netscape называет свой браузер Mozilla.
  • userAgent сообщает заголовок протокола, используемого браузером во время работы с серверами.

Иногда важно знать версию браузера. Чуть позже мы изучим команды If (если). Зная браузер пользователя, можно дать команду: "Если браузер такой-то, сделать то-то."

Свойства объекта document
<SCRIPT LANGUAGE="javascript">
var bgc = document.bgColor;
var fgc = document.fgColor;
var lc = document.linkColor;
var al = document.alinkColor;
var vlc = document.vlinkColor;
var url = document.location;
var ref = document.referrer;
var t = document.title;
var lm = document.lastModified;
document.write("Цвет фона этой страницы <B>"
+bgc+ "</B>.")
document.write("<BR>Цвет текста этой страницы <B>" +fgc+ "</B>.")
document.write("<BR>Цвет ссылок этой страницы <B>" +lc+ "</B>.")
document.write("<BR>Цвет активной ссылки этой страницы
<B>" +al+ "</B>.")
document.write("<BR>Цвет посещенной ссылки этой страницы
<B>" +vlc+ "</B>.")
document.write("<BR>URL этой страницы <B>" +url+ "</B>.")
document.write("<BR>До этого вы были на странице <B>" +
ref+ "</B>.")
document.write("<BR>Заголовок этой страницы <B>" +t+ "</B>.")
document.write("<BR>Последние изменения внесены: <B>"
+lm+ "</B>.")
</SCRIPT>

Свойства документа очень популярны в JavaScript. Здесь я перечислил девять. На самом деле их тринадцать, но остальные четыре вам пока не нужны. Я перечислю их ниже:

  • bgColor сообщает цвет фона в шестизначном коде.
  • fgColor сообщает цвет текста в шестизначном коде.
  • linkColor сообщает цвет ссылки.
  • alinkColor сообщает цвет активной ссылки.
  • vlinkColor сообщает цвет посещенной ссылки.
  • location сообщает URL страницы.
  • referrer сообщает, с какой страницы пришел пользователь. Если информация недоступна, скрипт оставляет пустое место.
  • title сообщает заголовок документа между командами TITLE.
  • lastModified сообщает дату, когда были внесены последние изменения в страницу (на самом деле дату, когда страница была загружена на сервер или сохранена на жестком диске).
  • не показаны: cookie, anchors, forms, links.

Опять же, воспользовавшись командой If, вы можете сказать: "Если время больше 6 вечера, пусть текст будет белый, а фон черный. Если еще нет 6 вечера, то пусть фон будет голубой, а текст зеленый." Существует множество способов использовать свойства документа.

Свойства объекта history
<SCRIPT LANGUAGE="javascript">
var h = history.length;
document.write("До этого вы посетили " +h+ " страниц.")
</SCRIPT>

Это очень популярный объект. Многим хочется иметь возможность вернуть пользователя на посещенные им страницы, то есть, воспроизвести кнопки "Вперед" и "Назад" на панели браузера. Объект history это позволяет.

Объектом является журнал посещений history. Это список страниц, посещенных вашим браузером.
Свойство length (протяженность). Оно тоже популярно. Позже вы узнаете, как можно использовать его с другими командами. Указывая это свойство, вы просите скрипт просто сообщить количество страниц в папке "history".

Существует метод go() (пойти), который позволяет передвигаться по history.length.

Два свойства объекта location
<SCRIPT LANGUAGE="javascript">
var hst = location.host
document.write("Страница находится на <B>" + hst + "</B>.")
</SCRIPT>

<SCRIPT LANGUAGE="javascript">
var hstn = location.hostname
document.write("Страница находится на <B>" + hstn + "</B>.")
</SCRIPT>

Здесь объектом является location. Это URL на языке JavaScript, адрес страницы. Перед вами два свойства объекта location, host, и hostname. Команды выполняют одну и ту же задачу, сообщают URL либо в текстовом формате, либо номером IP, в зависимости от сервера. Но...

  • location.host сообщает URL плюс "порт", к которому прикреплен пользователь.
  • location.hostname сообщает только URL.

Если вы получаете одинаковый результат от обеих команд, значит, ваш сервер не прикрепил вас к специальному порту. Говоря техническим языком, свойство "порта" — ноль.
Кстати, эти две команды не работают, если просматривать страницу с жесткого диска. Результат может быть только в том случае, если она размещается на сервере.

Есть еще множество всяческих свойств, с которыми вы встретитесь во время наших уроков. Это наиболее употребимые.

Ваше задание

Oтлично, умники, сделайте-ка вот что: пользуясь одной из вышеперечисленных команд, напишите JavaScript, который создает ссылку на страницу на вашем сервере. Например, если вы находитесь на www.you.ru, JavaScript создаст ссылку на www.you.ru/index.html.
Также, каким бы свойством вы ни воспользовались, присвойте ему переменную.

Назад | Содержание | Вперед
Джо Бернс
Введение
Сообщения об ошибках
Дата и время
Команда onMouseOver
Еще обработчики событий
Запрос пользователю
Концепция свойств
Иерархия объектов
Создание функции
onUnload и onMouseOut
Новые окна
Новые окна (прод.)
Метод confirm
Математ. переменные
Смена картинки
Смена через функцию
Функция внутри формы
Форма и свойство value
Данные в функцию
Случайные числа
Введение в if
If и Else
Случайный выбор
Введение в FOR
Введение в WHILE
Введение в массивы
Слайд-шоу
Анимация
Подтверждение ввода
механический стимуляторы анальные для нее