Концепция свойств

Концепция

Иерархия объектов JavaScript играет настолько важную роль, что мы посвятим ей отдельный урок, но мы уже и так начинаем понемногу ее осваивать.

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

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

Сценарий

Ниже вы увидите несколько сценариев, но все они составлены по одной схеме: для каждой команды объект.свойство ( object.property ) создается переменная, затем переменные помещаются в команду 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>Заголовок этой страницы (TITLE) <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>

Результат работы сценариев (возможный)

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

Вы пользуетесь Opera, версия 9.01 (Windows NT 5.1; U; ru).
Кодовое название Mozilla, заголовок Opera/9.01 (Windows NT 5.1; U; ru).

Цвет фона этой страницы #334775.
Цвет текста этой страницы #334775.
Цвет ссылок этой страницы #fbbcac.
Цвет активной ссылки этой страницы #d0550b.
Цвет посещенной ссылки этой страницы #fbbcac.
URL этой страницы http://jsp.newmail.ru/les7.htm.

До этого вы были на странице .

Заголовок этой страницы Урок 7. Концепция свойств.
Последние изменения внесены: Fri, 27 Jun 2003 00:09:36 GMT.

До этой страницы вы посетили 1 страниц.

Страница находится на  www.mail.ru.

Страница находится на www.mail.ru.

Разбор сценария

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

Почему в некоторых местах шрифт жирный?

Да в общем-то так, ради забавы. Найдите в сценарии элементы, которые выводятся жирным шрифтом. Как можно видеть, были просто добавлены команды <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 имеет четыре свойства. Обратите внимание на заглавные буквы!

Иногда важно знать версию браузера. Чуть позже мы изучим команды 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>

Снова напоминаем, что текст выше в скобках должен целиком располагаться в одной строке.

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

В данном случае также с помощью команды 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.

Если вы получаете одинаковый результат от обеих команд, значит, ваш сервер не соединил вас со специальным портом. Говоря техническим языком, свойство "порта" — null.

Кстати, эти две команды не работают, если просматривать страницу с жесткого диска. Результат может быть только в том случае, если она размещается на сервере, так как сценарию требуется URL для анализа.

Существует множество других свойств, с которыми вы встретитесь во время уроков. Здесь даны общие представление о свойствах — как они используются и что делают наиболее часто используемые.

Задание

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

Также, какое бы свойство ни использовалось, присвойте ему имя переменной.

Возможное решение

Это можно было сделать по-разному, например, так:

<script LANGUAGE="javascript">

var dr = location.host;
document.write("<a HREF=http://" +dr+ "/index.htm>
   Щелкните, чтобы попасть куда-нибудь</a>")

</SCRIPT>

Имейте в виду, что страница должна находиться на сервере, на жестком диске сценарий не работает, так как там нет никакого location.host.