Отправляет email-рассылки с помощью сервиса Sendsay

Программирование на JavaScript

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Июнь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

0 подписчиков
-4 за неделю
←   Все выпуски   →

Азы и секреты программирования на JavaScript.


Информационный Канал Subscribe.Ru
Азы и секреты программирования на JavaScript N 22
Ссылка на архив предыдущих выпусков: http://subscribe.ru/
Статистика рассылки: http://subscribe.ru/

Постановка задачи

Предлагаю на время оставить изучение теоретических основ работы JScript в броузере и построить серьезный практический пример. Меня часто спрашивают, можно-ли построить при помощи технологии JavaScript древовидное меню для навигации по сайту. Имеется в виду меню, аналогичное девовидной структуре заголовков в справочной системе Windows. Проследим работу с таким меню на примере трех последовательных уровней одной ветви. Раскрываем по-очереди все три ветви. Потом свернем ветвь самого верхнего уровня, чтобы дочерние ветви не были видны. Если теперь эту свернутую ветвь снова развернуть - мы увидим ветви подчиненного уровня в том-же состоянии, в котором их оставили перед этим. То-есть дерево, для удобства пользователя, должно отслеживать состояное проматриваемых ветвей в текущем сеансе пользователя.

Естественно, не каждый узел дерева может быть гиперссылкой на какую-то HTML страницу или ее часть. Некоторые ветви могут представлять из себя просто заголовки вложенных уровней для удобства представления логической структуры меню. Ну, и последнее естественное требование - структура программы должна быть модифицируемой и легко настраиваемой. Чтобы без лишнего труда можно было перестроить ее под любую конфигурацию.

Некоторые могут сказать, что нет необходимости "изобретать велосипед". У Microsoft для этого есть готовое решение - элемент ActiveX, который предназначен для организации древовидных структур. Этот элемент довольно просто встраивается в HTML страницу, и уверенно работает в MS-IE. Но... Поставьте себя на место посетителя, первый раз попавшего на Ваш сайт. Если Ваш броузер предложит Вам загрузить на незнакомом сайте элемент ActiveX, будете ли Вы думать - безопасно это или нет, перед тем как ответить? Лично я всегда отвечаю отрицательно. И так поступит 99% процентов ваших посетителей, будьте уверены. А значит, они просто не увидят Ваше меню, и в недоумении покинут страницу. Чтобы этого не призошло - предлагаю воспользоваться мощнейшими возможностями языка сценариев - JavaScript. Хочу заметить, что и объем загружаемого страницей кода будет на порядок меньше, чем в случае использования ActiveX. Да и ассортимент броузеров, поддерживающих JScript, по сравнению с ActiveX, гораздо шире.

Абстрактный код

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

Напишем код для создания универсального объекта, имеющего древовидную структуру. Естественно, это будет некий массив элементов. Это и видно в коде конструктора объекта "Tree()". Для получения значения имени ветви дерева, здесь-же в конструкторе зададим определение метода label:

Файл simptree.js:

function Tree(item){
 this.A = new Array();
 this.A[0]=item;
 this.label=item;
}
function tree_addLeg(sub){this.A[this.A.length]=sub;} //добавляет ветвь, как новый элемент массива
function tree_getSubTree(addr){   //возвращает содержание раскрываемой ветви дерева
  if(addr=="")return this;
  var ob=this;
  addr=addr.split(".");    //адрес ветви в формате 1.2.3. ...
  for(var i=0; i < addr.length;i++)
    ob=ob.getNth(parseInt(addr[i],10)-1);
  return ob;
}
function Tree_numChildren(){return this.A.length-1;}
function Tree_getNth(n){return this.A[n+1];}
// Прототипы методов
Tree.prototype.addLeg = tree_addLeg;   //добавление новой ветви
Tree.prototype.getSubTree = tree_getSubTree;  //получение ветви по ее адресу
Tree.prototype.numChildren = Tree_numChildren; //число ветвей узла
Tree.prototype.getNth = Tree_getNth;   //получение ветви по ее порядковому номеру

Для добавления элементов в дерево, необходимо отдельно предусмотреть метод объекта. В нашем примере за это отвечает метод addLeg, который при помощи метода JScript prototype связывает его с функцией tree_addLeg. Особенности работы с методом prototype описаны в документации по JavaScript. Русский перевод данной статьи Вы можете посмотреть на AllAbout.by.ru. Кроме того, те кто подписался на рассылку "Все о технологиях SCRIPT", уже получили содержание этой статьи по e-mail. Вы тоже можете подписаться, и всю используемую в данной рассылке техническую информацию будете получать заранее.

Для придания функциональности нашему объекту Tree(), надо добавить еще несколько методов, которые дадут возможность получать содержание нужной ветви, число подчиненных ветвей и адрес ветви. Из комментариев к коду все достаточно наглядно видно.

Если кто-то не знает, хочу пояснить работу нескольких встроенных методов JavaScript, используемых в приведенном коде сценария. Метод length возвращает значение длинны массива в виде целого числа. Метод parseInt преобразует строку в целое число. И последний метод - split преобразует строковую переменную в массив элементов, состоящий из частей указанной переменной, разделенных в ней символами-разделителями. В нашем примере это символ точки.

Продолжение в следующем выпуске...

Кстати, если Вы ищете качественный и недорогой web-хостинг, лично я рекомендую PeterHost.Ru. Российский (поддержим наших!), прекрасные каналы, сервис "на уровне".
Автор и ведущий рассылки И. Балезин
Лучший хостинг в Рунете
InterReklama Advertizing
Интерреклама. Интернет
http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное