function WebBrowser(homePage) { this.address = homePage;
}
Таким образом мы можем передать конструктору класса адрес домашней страницы, с которой начнется путешествие по Интернету.
var currentWebBrowser;
currentWebBrowser = new WebBrowser("http://www.server.ru/home_page.htm");
"Но, позвольте! — скажете вы. — А как же создаются методы класса?" Тоже очень просто.
Прежде всего, нам нужно написать функцию, реализующую этот метод.
function fGoTo(pageAddress) { this.address = pageAddress;
Мы назвали эту функцию fGoTo. Это имя состоит из буквы f (от англ. function — функция) и имени метода дото, который она реализует.
Теперь перепишем функцию-конструктор таким образом, чтобы создать новый метод дото.
function WebBrowser(homePage) {
this.address = homePage;
this.goTo = fGoTo; }
Как видите, мы "присваиваем" написанную нами функцию fGoTo свойству дото класса WebBrowser. После этого можно вызывать метод дото этого класса.
var currentWebBrowser;
currentWebBrowser = new WebBrowser("http://www.server.ru/home_jpage.htm");
currentWebBrowser.goTo("http://www.w3c.org");
Только что вы научились создавать простейшие классы. Но на самом деле вам в очень редких случаях придется делать это. Куда чаще вы будете пользоваться уже готовыми системными классами, предоставляемыми самим интерпретатором JavaScript и другими программами, например Web-обозревателем. Поэтому давайте поговорим о системных классах.
Системных классов, предоставляемых программисту интерпретатором, довольно много. Среди них есть, например, класс Date, предназначенный для работы со значениями даты и времени.
var d;
d = new Date () ;
Только что мы создали объект класса Date. Так как мы не передали параметр в функцию конструктора этого класса, интерпретатор поместил в этот объект значение текущей даты. После этого можно, например, узнать номер дня недели:
var dayNumber; dayNumber = d.getDay(};
Или выяснить год:
var year;
year = d.getFullYear();
Некоторые методы класса Date перечислены в табл. 13.1.
Как видите, класс Date предусматривает полный набор методов для работы со значениями даты и времени. Другие системные классы также имеют достаточно большие наборы свойств и методов, которые мы не будем здесь рассматривать.
Таблица 13.1. Некоторые методы класса Da te
| Метод | Описание |
| getDate ( ) | Возвращает число |
| getDay ( ) | Возвращает цифру, обозначающую день недели (0 — воскресенье, 1 — понедельник, 2 — вторник и т. д.) |
| getFullYear() | Возвращает год |
| getHours ( ) | Возвращает час |
| getMilliseconds ( ) | Возвращает миллисекунды |
| getMinutes ( ) | Возвращает минуты |
| getMonth ( ) | Возвращает цифру, обозначающую месяц (от 0 до 11) |
| getSeconds ( ) | Возвращает секунды |
| getTime ( ) | Возвращает время в виде количества миллисекунд, прошедших с полуночи 1 января 1 970 года |
Системный класс Math — другого рода. Он включает набор свойств и методов, реализующих различные математические и тригонометрические функции. Единственный его объект создается самим интерпретатором JavaScript при запуске и уничтожается при завершении работы. Так что вам не нужно самим создавать объекты этого класса. Это как раз типичный случай системного объекта.
var f;
f = Math.sin(Math.PI);
В результате вычисления вышеприведенного выражения в переменной f окажется значение sin (я).
Существуют также системные классы Number и string, служащие для хранения данных соответственно числового и строкового форматов, и несколько других системных классов, используемых значительно реже.
Язык JavaScript имеет одну любопытную особенность. Дело в том, что любая переменная обычного типа данных может быть представлена как объект какого-либо класса. Давайте, например, рассмотрим следующий код:
var s, 1;
s = "JavaScript";
1 = s.length;
Здесь мы сначала помещаем в переменную s строку "JavaScript", а потом вызываем свойство length этой переменной. В таком случае интерпретатор
считает переменную s объектом класса string и беспрепятственно "пускает" нас к свойству length этого класса, возвращающему длину строки текста, которую мы и помещаем в переменную 1.
Аналогичный "финт" можно проделать и с числовой величиной:
var a, s;
а = 16765247;
s = a.toString();
Здесь вызываем метод toString класса Number, возвращающий строковое представление числа.
Раньше говорилось, что, помимо интерпретатора JavaScript, системные классы могут представляться также и другими программами. К числу этих самых "других" программ относится Web-обозреватель. Его классы и системные объекты — это что-то особенное...
Объектная модель документа (DOM)
А теперь настало время поговорить о классах и объектах Web-обозревателя подробнее.
Давайте посмотрим на какую-нибудь Web-страницу. Что она собой представляет? Фактически, иерархию элементов. Мельчайшие элементы страницы, например текстовые абзацы, являются потомками более крупных и сложных элементов, например, свободно позиционируемых элементов. Свободные элементы, в свою очередь, могут находиться в других свободных элементах или непосредственно в самой странице. Получается весьма сложная многоуровневая структура, в которой одни элементы зависят от других.
Описать такую структуру можно с помощью объектов. Точнее, сложной иерархии объектов, вложенных друг в друга и зависящих друг от друга. Такая структура называется объектной моделью документа (Document Object Model, DOM). Все современные программы Web-обозревателей представляют Web-страницу как иерархический набор объектов.
Какое преимущество дает пользователям такой подход? Никакого. Все это рассчитано только на программистов, разрабатывающих Web-сценарии.
Каждый из объектов, из которых состоит Web-страница, имеет набор свойств, предоставляющих доступ к значениям различных атрибутов соответствующего тега, методов, с помощью которых этим объектом можно манипулировать, и событий, которые могут в этом объекте происходить и которые можно обрабатывать. Это позволяет управлять практически любым элементом страницы, самой страницей и даже самим Web-обозревателем, используя специально написанные Web-сценарии.
Например, именно таким образом на Web-странице создаются анимирован-ные элементы (см. главу 12). Также с помощью сценариев можно изменять цвета, параметры шрифта и даже само содержимое элементов страницы. Более того, так можно управлять и самим Web-обозревателем: открывать и закрывать вспомогательные окна, перемещаться взад-вперед по списку "истории" и даже принудительно загружать нужные Web-страницы без участия пользователя.
Неужели вы думали, что Web-программисты пройдут мимо такой возможности! Если вы думаете, что пройдут, — вы плохо их знаете. Вспомните, например, что говорилось в предыдущей главе об анимации. Едва появилась возможность немного подвигать по странице тем или иным рисунком, как Web-программисты эту возможность реализовали. А сейчас анимацию поддерживают даже Web-редакторы, и Dreamweaver тому пример.
Но хватит говорить на отвлеченные темы! Давайте все-таки займемся объектной моделью документа.
Сначала выясним, каким образом можно получить доступ к нужному элементу. Для этого ему необходимо дать уникальное имя. Делается это с помощью атрибута ID или NAME. Атрибут ID поддерживается практически всеми тегами HTML, атрибут NAME — только некоторыми. К тегам, поддерживающим этот атрибут, относятся формы, элементы управления, фреймы, гиперссылки и некоторые другие.
Но почему же нельзя пользоваться только атрибутом ID? Все дело в проклятой несовместимости Navigator 4.x и интернет-стандартов. Старые версии Navigator используют атрибут ID только для присвоения элементам стилей, а для задания имен признают только атрибут NAME. Видите, какая морока!..
Дав с помощью атрибутов ID или NAME элементу страницы уникальное имя. вы можете обращаться к нему из сценария, вызывая его методы и свойства. Интерпретатор сам найдет нужный элемент по его имени. Для доступа к элементу страницы в Internet Explorer используется синтаксис:
<Имя элемента, заданное в атрибутах ID или NAME>.<Свойство или метод>
Если же вы пишете сценарий для Navigator 4.x, делайте так:
document["<Имя элемента, заданное в атрибуте NAME>"].<Свойство или метод>
Давайте приведем небольшой пример, поясняющий вышесказанное.
<Р ID="para" STYLE="color: #0000FF">Некийтекст.</Р>
Сначала мы создали текстовый абзац, назвали его para (обратите внимание на значение атрибута ID) и присвоили ему встроенный стиль, задающий цвет текста. Сейчас мы этот цвет текста изменим, воспользовавшись Web-сценарием.
para.style.color = "#FF0000";
Здесь нужны дополнительные пояснения. Дело в том, что каждый элемент страницы в объектной модели документа имеет внутренний объект style, дающий доступ к его встроенному стилю. Обратиться к этому объекту можно через одноименное свойство, что мы и сделали. А уж объект style предоставляет доступ ко всем атрибутам встроенного стиля через одноименные свойства. В данном примере для получения доступа к значению атрибута стиля color использовалось свойство color.
Вы можете изменить выравнивание текста этого абзаца, обратившись к свойству align:
para. align = "center";
Свойство align предоставляет доступ к значению атрибута ALIGN тега <р>.
К несчастью, вышеприведенный пример будет работать только в самых последних программах Web-обозревателей. Пресловутый Navigator 4.x не позволяет изменять внешний вид и содержимое элементов страницы после ее загрузки. Исключение составляют только графические изображения, фреймы и слои.
А вот этот код будет работать везде:
<IMG NAME=" some Image" SRC="image1.gif ">
document ["someImage"] .src = "image2.gif";
Он меняет файл, содержимое которого отображается в элементе графического изображения, на другой. Для этого он присваивает иное значение свойству src объекта somelmage, предоставляющее доступ к атрибуту SRC тега
<IMG>.
Чтобы получить доступ к самой Web-странице, воспользуйтесь системным объектом document. В частности, вы можете задать цвет гиперссылок, воспользовавшись свойством linkColor, предоставляющим доступ к значению атрибута LINK тега <BODY>: