Школа Веб - JavaScript
Выпуск 12 от 2001-07-27

Школа Веб ∙ Ведущий рассылки Eris

Приступая к циклу статей о JavaScript я долго бродил по всяческой популярной русскоязычной литературе, с целью посмотреть а что люди пишут. А потом еще большее время - по англоязычной (в основном потому, что ее больше). И пришел к одному любопытному выводу - так, как принято изучать все прочие языки - JavaScript иззучать не стоит, и традиционный, университетский способ изложения материала (когда вначале проходят типы данных, потом функции, потом начинают собирать это в кучу) здесь абсолютно непригоден. И основная причина здесь в том, что этот язык просто не мыслим без объекто-ориентированного подхода. А потому в этой статье мы разберем что такое объектно-ориентированность и классы, а в следующей - как это относится к JavaScript. Кроме того, это поможет нам в дальнейшем работать с объектно-ориентированными языками.

Контейнеры

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

Расположение объектов в объектной модели орисывают подобно тому, как описывают методы и данные класса - с помощью точки. При этом следует учитывать два момента. Более "вместительный" контейнер в записи всегда располагают слева. Каждое поле в записи означает не абстрактый класс, а конкретный объект - экземпляр класса. Я надеюсь следующий пример будет понятен :

Прилавок_при_входе_в_магазин.Ящик_скраю.Первый_лоток_в_ящике.Первое_яйцо_во_втором_ряду

Как видите, все очень просто. С помощью объектной модели можно получить доступ к любому объекту. Не забывайте, что каждая запись в этом поле уже представляет собой готовый к употреблению объект, а следовательно, получив доступ к объекту, мы получаем и доступ к его методам. Например, Данный конкретный прилавок можно очистить, ящик который скраю - передвинуть, первый лоток - вскрыть, яйцо - сварить. И все эти методы будут применяться не к классу вообще а к данному экземпляру этого класса.

Объектная модель документа.

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

Когда-то в доисторические времена (это те времена, когда еще не было войн между броузерами) документ пользователю предоставлялся строго по мере его поступления. Html-код рассматривался как поток команд, который принимался броузером, немедленно обрабатывался и направлялся пользователю.И поступивший в броузер код <h1>Заголовок</h1> заставлял броузер переключить шрифт и немедленно вывести пользователю этот заголовок. Но по мере усложнения документов такой подход перестал себя оправдывать. Тогда работу броузера с документом поделили на несколько этапов. Теперь поступающий код броузер рассматривает как команды создания объектов. Например, код <h1>Заголовок<h1> он воспринимает как команду создать объект заголовка и поместить его в контейнер, предусмотренный для этого объектной моделью. Следующим этапом является механизм рендеринга, который просматривает структуру контейнеров и прорисовывает все это на экране. Броузер стал навороченней, зато стал медленней работать :). Для управления и динамического изменения объектов в структуре был создан скриптовый язык - JavaScript, который как раз и работает с документом согласно объектной модели.

В очень большом приближении объектная модель выглядит так.

Как видно из приведенной таблицы - ничем не отличается от хранения яиц в магазине :) В самом деле объектная модель значительно сложнее, чем я привел в таблице - за счет значительно большего количества классов объектов и их методов. Я сейчас намеренно дал упрощенную картину, что бы не путаться. При рассмотрении каждого объекта я буду давать более детальную объектную модель для него.

Массивы

Некоторое уточнение надо все же привести по поводу массивов. Массив - это контейнер, который содержит множество других, как правило однотипных, объектов. Признаком массива служат квадратные скобки. Если мы имеем массив из трех элементов, то это это может быть записано примерно так

arr[0];
arr[1];
arr[2];

К любому элементу массива можно обратиться по его номеру. Положить что-нибудь в ячейку массива можно просто с помощью знака равенства (правильно эту операцию называют присваиванием):

arr[0]= 10; // мы присвоили значение 10 нулевому элементу массива arr[]
arr[1]= 20;

Извлечь значение из массива и положить его в какую-нибудь переменную можно с помощью того же опертора присваивания - знака равенства.

my_var= arr[0]; // присвоили значение 10 переменной my_var
my_var= arr[0] + arr[1] ; // а сейчас присвоили этой же переменной значение 30

Вернемся, однако, к нашей объектной модели. На примере ссылок мы проследим, как заполняется массив элементов документа. Когда броузеру начинает поступать html-код страницы, и среди этого кода попадается первая в тексте ссылка, броузер выделяет ее и создает для нее объект window.document.links[0]. Следующая встреченная в тексте ссылка попадет в объект window.document.links[1] и так далее.

Таким образом, что бы изменить свойства ссылки, например изменить адрес перехода по ней, надо посчитать все ссылки в документе и выяснить, к какому номеру вы хотите обратиться. Круто? Представьте себе страничку каталога с 200-300 ссылок. Да еще если вы вставите куда-нибудь внутрь этого каталога еще одну ссылку, то весь порядок нумерации изменится. Прям скажем, польза от такого подхода минимальная. К счастью, существует альтернативный способ обращения к элементам массива. Для этого в тег ссылки нужно вставить параметр name:

<a name="my_link_name" href="http://my.location.com">My location</a>

В приведенном примере мы дали нашей ссылке имя my_link_name и теперь можем получить к ней доступ, обращаясь по имени:

window.document.links['my_link_name']

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

Размещение JavaScript-кода в странице

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

Способ 1 - непосредственно вставить JavaScript код в то место страницы, где вы хотите получить соответствующий эффект.

К примеру, нам нужно втавить в текст документа дату последнего изменения странички, которую просматривает пользователь. Для этого открываем страничку (если вы делаете это c с помощью Dreamweaver, не забудте, что приведенные ниже строки нужно печатать в той части окна документа, где расположен html-код) и между тегами <body> и </body> в то место, где вы хотите вставить дату модификации, поместите строки (номера строк набирать не надо, они приведены для удобства обсуждения кода)

1   Дата последней модификации страницы -
2   <SCRIPT language="JavaScript">
3   <!--
4      document.write(document.lastModified);
5   //-->
6   </SCRIPT>

Цветовую подсветку я привел ту, которую дает мой Dreamweaver, у вас могут быть другие цвета. Давайте разберем этот текст. В строке 1 написан обычный текст, который будет выведен без изменения, и который поможет пользователю рассеять недоумение по поводу того, что за дата последует далее. В строке 2 мы объявляем броузеру, что далее последует скрипт на языке JavaScript и все что последует после этого тега и вплоть до тега </SCRIPT> следует не печатать а выполнять. Однако некоторые старые броузеры не понимают тега <SCRIPT> и потому все что находится между <SCRIPT> и </SCRIPT> будет просто напечатано в окно пользователю. Это считается столь же некрасивым, как и прилюдно демонстрировать грязное нижнее белье, и поэтому специально для этих броузеров мы вставляем в строку 3 тег начала комментария в html. На JavaScript этот тег не произведет впечатления, поскольку он в качестве начала комментария использует //, и код, который расположен в строке 4 будет выполнен.

Сам код требует некоторого пояснения. прежде всего, почему я написал document.write, а не window.document.write? Поскольку контейнер самого верхнего уровня у нас всего лишь один, то его присутствие неявно подразумевается, и потому в большинстве случаев его указывать не надо (указывать нужно только там, где вы непосредственно обращаетесь к свойствам и методам объекта window); впрочем если вы напишете window.document..., то все будет работать. Объект document содержит в себе, среди прочих, объект с именем lastModified, который хранит дату последней модификации странички. Теперь эту дату нам нужно напечатать. Для этого у объекта document предусмотрен метод write(), который печатает пользователю все, что ни попадет ему между скобками. Мы попросли его распечатать объект document.lastModified, что он и сделает.

В строке 5 мы закрываем комментарий, который открыли для старых броузеров. Две косые черты необходимы, что бы Netscape не воспринял два дефиса закрытия комментария за оператор декремента. И в строке 6 мы сообщаем броузеру, что скрипт закончился и все что дальше нужно не выполнять, а печатать. Результат будет выглядеть примерно так:

Способ 2 - использование функций

Как и любой другой порядочный язык программирования, JavaScript позволяет вам написать собственную функцию, а затем вызвать ее для выполнения. В этом случае используется следующий трюк. Сама функция определяется в заголовке документа между тегами <head> и <head>. А в том месте, где необходимо вставить результат работы этой функции, мы вставим ее вызов

1   <head>
2   <SCRIPT language="JavaScript">
3   <!--
4      function PrintLastModified()
5      {
6         document.write(document.lastModified);
7      }
8   //-->
9   </SCRIPT>
10  </head>

 ....

100 <body>
101 Дата последней модификации -
102 <script language="JavaScript"> PrintLastModified();</script>
103 ...
104 </body>

Думаю, этод код не потребует больших объяснений. В строке 4 в заголовке мы объявляем функцию, а в строках 5..7 - расписываем, что она должна делать. После этого в нужном месте текста (строка 102) вызываем эту функцию. Вызывать ее можно столько раз сколько вы посчитаете необходимым сообщить пользователю о дате изготовления вашего документа.

Способ 3 - использование библиотек.

Этот способ мы рассмотрим чуть подробнее позже, а вкратце это выглядит так. Все свои полезные функции вы собираете в отдельные файлы с расширением .js В страничке, в которой эти функции должны вызываться вы указываете броузеру на необходимость загрузки нужной библиотеки. а в нужном месте текста просто вызываете необходимые вам функции. Преимущество налицо, поскольку вам не нужно каждый раз переписывать свой код из страницы в страницу.

В следующей статье я подробнее разберу библиотеки и как с их помощью создавать и включать в страницы часто повторяющиеся элементы оформления сайта - меню, заголовки, колонтитулы.

Если вы не получали предыдущих выпусков, найти вы можете в архиве рассылки или на сайте рассылки