Урок 9 - Массивы



  • объявление массивов;
  • работа с массивами на примере несложного меню.

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

Массив (по-английски array) объявляется так:

имя_массива = new Array()

Правила для имён массивов такие же, как и для имён переменных (см. урок 1).

В скобках можно
    а) указать количество элементов массива — new Array(8);
    б) перечислить элементы массива (в кавычках и через запятую) — new Array("эники", "беники", "ели", "вареники");

Примечание: перечисляемые элементы массива являются строками, а не именами переменных. Поэтому необходимы кавычки и поэтому же можно не придерживаться правил имён и даже писать русскими буквами.

    в) не указывать ничего (чтобы сделать назначения в дальнейшем).

У массива есть свойство length — длина, или, как говорят программисты, размерность. Это свойство указывает количество элементов массива. У массива с пустыми скобками размерность равна нулю.

Размерность можно динамически изменять. Определив «пустой» массив, можно потом присвоить значение и порядковый номер одному из его элементов. Как только мы это сделаем, изменится и размерность массива:

yoklmn = new Array() yoklmn[3] = "tratata"

Обратите внимание на квадратные скобки, в которые заключается порядковый номер массива.

Теперь, даже если другие элементы не определены, массив имеет размерность в 4 элемента.

Yoklmn, почему четыре?

О программистах ходит много анекдотов, например, такой:

— По порядку рррас-считайсь!
— Нулевой!..

Первый элемент массива всегда имеет нулевой номер.

Теперь смотрите:

Длина пустого массива == 0
Длина массива с одним (нулевым) элементом == 1
Длина массива с двумя элементами ([0], [1]) == 2
И т.д.

То есть размерность массива всегда на один номер больше номера последнего элемента.

Не вру, можете проверить.

Скопируйте этот код в <body> пустой страницы HTML и посмотрите, что получится.

yoklmn = new Array() yoklmn[3] = "tratata" document.write(yoklmn.length)

Кстати, иногда бывает очень удобна такая вот «динамически создаваемая шпаргалка». Когда затрудняетесь определить какое-нибудь значение в Вашем скрипте, выведите его через document.write. JavaScript не ошибётся.

Создание меню

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

Вот так, предположим, выглядело бы это меню в коде HTML.

<style type="text/css"> .txtmenu {text-align: center; color: #FF8080; font-weight: bold; font-family: Arial; font-size: 12pt;} a.lnkmenu:link, a.lnkmenu:visited, a.lnkmenu:active {color: #FFC; text-decoration: none;} a.lnkmenu:hover {color: #FF8080; text-decoration: none;} </style> <table width="600" border="1" cellspacing="0" cellpadding="0" align="center" bgcolor="#800000"> <tr> <td><div class="txtmenu"><a href="index.htm" class="lnkmenu">Главная </a></div></td> <td><div class="txtmenu"><a href="aboutsite.htm" class="lnkmenu">О сайте </a></div></td> <td><div class="txtmenu"><a href="aboutme.htm" class="lnkmenu">Обо мне </a></div></td> <td><div class="txtmenu"><a href="links.htm" class="lnkmenu">Ссылки </a></div></td> <td><div class="txtmenu"><a href="http://адрес_гостевой" class="lnkmenu"> Гостевая книга</a></div></td> </tr> </table>

Но мы придумаем одну хитрость: Ссылка страницы на саму себя будет неактивна. То есть тэг <a> на свою страницу выводиться не будет. Обратите внимание, стиль color для <div> определён тот же, что и для ссылки при наведении мышкой, розовенький, #FF8080. Лишённый тэга <a>, пункт меню всё время будет отображаться этим цветом.

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

Как это будет работать?

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

Сначала загоним в переменные повторяющийся текст тэгов, отграничив ссылки от остального (двойные кавычки в тэгах превратим в одиночные):

var div1 = "<td><div class='txtmenu'>" var lnk1 = "<a href='" var lnk2 = "' class='lnkmenu'>" var lnk3 = "</a>" var div2 = "</div></td>"

Пункт меню со ссылкой будет выглядеть так:

div1 + lnk1 + "URL_страницы" + lnk2 + "текст_меню" + lnk3 + div2

Без ссылки — так:

div1 + "текст_меню" + div2

Напоминаю: всё, что находится внутри document.write(), вводится без перевода каретки. Переносы строк, которые Вы можете увидеть в примерах кода, — результат автопереноса в браузере. Если Вы скопируете эти коды, то ненужных переносов не будет.

В первом файле скрипта объявляем и назначаем переменные для тэгов и создаём три массива.

Первый — для заголовков в тэге< <title>.

Второй — для URL-адресов страниц.

Третий — для заголовков пунктов меню.

Вот как этот файл будет выглядеть:

var div1 = "<td><div class='txtmenu'>" var lnk1 = "<a href='" var lnk2 = "' class='lnkmenu'>" var lnk3 = "</a>" var div2 = "</div></td>" titArray = new Array() titArray [0] = "Мой сайт - Главная страница" titArray [1] = "Мой сайт - О сайте" titArray [2] = "Мой сайт - Обо мне" titArray [3] = "Мой сайт - Ссылки" titArray [4] = "Мой сайт - Гостевая книга" urlArray = new Array() urlArray [0] = "index.htm" urlArray [1] = "aboutsite.htm" urlArray [2] = "aboutme.htm" urlArray [3] = "links.htm" urlArray [4] = "http://адрес_гостевой_книги" mnuArray = new Array() mnuArray [0] = "Главная" mnuArray [1] = "О сайте" mnuArray [2] = "Обо мне" mnuArray [3] = "Ссылки" mnuArray [4] = "Гостевая книга"

Сохраним его и приступиь к созданию второго. Не забудьте, что помимо <td> у таблицы имеются <tr> и <table>. Сразу откроем и закроем таблицу:

document.write("<table width='600' border='1' cellspacing='0' cellpadding='0' align='center' bgcolor='#800000'><tr>") /* скрипт меню*/ document.write("</tr></table>")

А теперь будем заполнять середину.

Первый пункт меню.

Если
(заголовок страницы — «Мой сайт - Главная страница»)
{выводим меню без ссылки}
В противном случае
{выводим меню со ссылкой}
Заголовок страницы достаётся через document.title.

Переводим это на JavaScript:

if (document.title == titArray[0]) {document.write(div1+mnuArray[0]+div2)} else {document.write(div1+lnk1+urlArray[0]+lnk2+mnuArray[0]+lnk3+div2)}

Всё это копируем и для остальных пунктов меню, только соответственно меняем номера элементов массива. Целиком второй файл выглядит так:

document.write("<table width='600' border='1' cellspacing='0' cellpadding='0' align='center' bgcolor='#800000'><tr>") if (document.title == titArray[0]) {document.write(div1+mnuArray[0]+div2)} else {document.write(div1+lnk1+urlArray[0]+lnk2+mnuArray[0]+lnk3+div2)} if (document.title == titArray[1]) {document.write(div1+mnuArray[1]+div2)} else {document.write(div1+lnk1+urlArray[1]+lnk2+mnuArray[1]+lnk3+div2)} if (document.title == titArray[2]) {document.write(div1+mnuArray[2]+div2)} else {document.write(div1+lnk1+urlArray[2]+lnk2+mnuArray[2]+lnk3+div2)} if (document.title == titArray[3]) {document.write(div1+mnuArray[3]+div2)} else {document.write(div1+lnk1+urlArray[3]+lnk2+mnuArray[3]+lnk3+div2)} if (document.title == titArray[4]) {document.write(div1+mnuArray[4]+div2)} else {document.write(div1+lnk1+urlArray[4]+lnk2+mnuArray[4]+lnk3+div2)} document.write("</tr></table>")

Не забудьте пристегнуть к web-страницам и файл со стилями CSS.

Меню готово.

Посмотреть скрипт в работе

Итак, мы узнали:

как работать с массивами.

А также научились:

делать простое меню на все страницы.

К следующему уроку

К списку уроков JavaScript

(© А. Фролов)