УРОК 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 имеет четыре свойства. Обратите внимание на заглавные буквы!

Иногда важно знать версию браузера. Чуть позже мы изучим команды 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. Здесь я перечислил девять. На самом деле их тринадцать, но остальные четыре вам пока не нужны. Я перечислю их ниже:

Опять же, воспользовавшись командой 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, в зависимости от сервера. Но...

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

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

Ваше задание

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

Получившийся скрипт

Здесь возможный ответ




<<назад на урок 6>>

<<Содержание>>

<<вперед на урок 8>>

Сайт создан в системе uCoz