Лекция 6. Концепция и иерархия в программировании на JavaScript

---

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

Существуют объекты, например, document, и методы, например, write, которые воздействуют на объекты. Рассмотрим концепцию свойств. Свойства представляют собой часть или качество объекта.

Множество скриптов в основном составляются по одной схеме: создается переменная для каждой команды объект.свойство, затем переменные помещаются в 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>

- appName сообщает название браузера, например, Netscape или Explorer.

- appVersion сообщает версию браузера и платформу, на которой он работает.

- appCodeName сообщает кодовое имя, данное браузеру, например, Netscape называет свой браузер Mozilla.

- userAgent сообщает заголовок протокола, используемого браузером во время работы с серверами.

Свойства объекта 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.

Существует множество способов использовать свойства документа.

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

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

Данный объект позволяет иметь возможность вернуть пользователя на посещенные им страницы, то есть, воспроизвести кнопки "Вперед" и "Назад" на панели браузера.

Объектом является журнал посещений 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.

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

Результат

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

Вы пользуетесь Microsoft Internet Explorer, версия 4.0 (compatible; MSIE 6.0; Windows NT 5.1).

Кодовое название Mozilla, заголовок Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1).

Цвет фона этой страницы #334775.

Цвет текста этой страницы #334775.

Цвет ссылок этой страницы #fbbcac.

Цвет активной ссылки этой страницы #d0550b.

Цвет посещенной ссылки этой страницы #fbbcac.

URL этой страницы file:///D:/Мои%20документы/Дария/направление/WEB-дизайн/Самоучитель%20JS_Yes/Урок%207.htm.

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

Заголовок этой страницы Урок 7. Концепция свойств.

Последние изменения внесены: 10/01/2004 03:32:52.

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

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

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

6.2 Иерархия объектов

В JavaScript есть объекты, похожие на существительные или предметы. У объектов есть свойства, которые описывают их, как прилагательные описывают существительные. Мы пользуемся схемой oбъект.свойство.

Еще у объектов есть методы, или действия, которые можно к ним применить. После метода ставятся скобки по схеме oбъект.мeтoд(). У разных объектов разные свойства и методы. При программировании на JavaScript необходимо знать иерархию объектов, что упростит понимание данного языка.

Все команды начинаются с наивысшего объекта, window (окно браузера), и идут по нисходящей. Окна и рамки (frames) принадлежат объекту window. Их не нужно перечислять, если только их не больше одного. Top, self, parent и frames - "встроенные" имена для окон.

Вот несколько примеров. Обратите внимание на иерархию.

document.pic.src = "pic1.gif"	window не нужно ставить в самом начале. Предполагается, что это все и так внутри окна. Команда document.pic.src указывает на рисунок, которому дано имя pic. Документ - это страница, pic - имя элемента, а SRC - источник элемента, "pic1.gif".
document.write(location.href)	write() — это метод объекта document.Location.href показывает полный URL окна. Обратите внимание, что location и dосument находятся на одном уровне (оба выделены зеленым цветом). Это значит, что вы получаете адрес документа того же уровня.

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

 Window — только объект.

 Document является свойством окна, но в свою очередь и объектом.

 Form — это свойство документа, но также и объект со своими свойствами!

 Value (значение) и SRC (источник) — только свойства!

 Здесь представлены не все объекты и свойства. Все команды начинаются сверху от window и идут по нисходящей. То есть, нельзя написать document.text.form или pic.src.document. Это неправильный порядок, следует писать слева направо от главного к второстепенному.

Важно: чтобы показать содержимое поля формы, существует свойство value (значение), например,

document.form.text.value

Если вы просто напишете document.form.text, это даст информацию о поле формы, но не о его содержании!

Поле с флажком может иметь value "on" или "off". Текстовое поле может иметь value "hidden" (скрытое), если вы не хотите, чтобы пользователь его видел.

6.3 Создание функции

Cоздавая переменную, присваивается имя результату команды или события JavaScript. Создавая функцию, вы делаете почти то же самое, только имя присваивается целой серии команд. Множество команд JavaScript вы комбинируете в одну.

Сам скрипт состоит из двух частей: собственно функции и команды onLoad, которая ее запускает. Вот обе части:

<SCRIPT LANGUAGE="javascript">
    <!-- Скрыть от браузеров, не читающих Javascript
    function dateinbar()
    {
        var d = new Date();
        var y = d.getFullYear();
        var da = d.getDate();
        var m = d.getMonth() + 1;
        var t = da + '/' + m + '/' + y;

        defaultStatus = "Вы прибыли на страницу " + t + ".";
    }
    // не скрывать -->
</SCRIPT>

<!-- Это текст комментария, не видимый на странице -->

В мире все еще существуют браузеры, не понимающие JavaScript. Если браузер не читает JavaScript, он воспринимает его как текст, который нужно напечатать на странице. Выглядит это неразумно. Но если пользоваться этими командами, тогда браузер успешно проигнорирует незнакомый текст и покажет страницу.

Нужно соблюдать несколько правил:

- Команды комментария должны находиться между <SCRIPT> и </SCRIPT>. Если вы поставите их снаружи, то браузер посчитает комментарием весь скрипт и ничего не выйдет.

- Текст после команды <!-- должен находиться на одной строке.

- Перед заключительной командой --> должна стоять двойная дробь //, иначе JavaScript примет ее за часть скрипта. Ошибка.

- Совсем не обязательно писать текст к этим командам.

Сначала первая часть скрипта устанавливает функцию. Потом команда в строке <BODY> ее запускает. Давайте сначала разберем функцию.

Схема довольно понятная. Вы пишете "function" и даете ей любое имя, какое вашей душе угодно, точно так же, как мы делали с переменными. Оно может быть какой угодно длины, если в нем нет пробелов и это слово уже не участвует в JavaScript. Но обратите внимание, что после имени функции стоят круглые скобки, как и после метода. То есть, создавая функцию, мы как бы создаем новый метод для выполнения задачи. Имя функции "dateinbar()" (дата в строке состояния), потому что это функция помещает дату в строку состояния.

Команды, из которых состоит функция, должны быть заключены в фигурные скобки {}.

Текст внутри фигурных скобок.

- создается переменная для года;

- еще одна для числа;

- еще одна для месяца;

- затем четвертая для даты целиком.

Последняя команда новая:

defaultStatus = "Вы прибыли на страницу " + t + ".";

"defaultStatus" (строка состояния по умолчанию) — свойство объекта window. Его цель — поместить текст в строку состояния внизу окна браузера.

Но почему не написать просто window.status?

Этого нельзя сделать, потому что такая схема используется для события, например, с командой onClick. Раз строка состояния не находится внутри команды HTML, используем defaultStatus. Есть только одна строка состояния — она же и по умолчанию.

Команда onLoad (на вход, загрузку) (обратите внимание на заглавные буквы) говорит браузеру, что, загружая страницу, он должен выполнить следующее. В нашем случае следует функция dateinbar{}. Эта команда почти всегда располагается в строке <BODY> документа HTML. И почти всегда за ней следует функция, но это необязательно. Можно с таким же успехом поместить туда и команду объект.метод.

Расположение элементов.

Это имеет не последнее значение. Вы знаете, что onLoad идет в строку BODY. Скрипт с функцией должен находиться между командами <HEAD> и </HEAD>. Хотя на самом деле его можно поместить где угодно, но если вы расположите его после команды onLoad, он заработает только после того, как загрузится вся страница. Поместив скрипт перед командой onLoad, вы помещаете его в память компьютера, и когда onLoad вызовет его, он будет готов к работе.

Практически любой набор команд JavaScript можно записать в виде функции.