Урок 9 - Массивы
- объявление массивов;
- работа с массивами на примере несложного меню.
Как и многое другое, массив в JavaScript является объектом. Но это с точки зрения архитектуры языка. С нашей же точки зрения его можно представить как объединённую группу переменных, где мы можем работать как с каждой переменной в отдельности, так и со всей группой.
Массив (по-английски array) объявляется так:
Правила для имён массивов такие же, как и для имён переменных (см. урок 1).
В скобках можно
а) указать количество элементов массива — new
Array(8);
б) перечислить элементы массива (в кавычках и через запятую) —
new Array("эники", "беники", "ели", "вареники");
Примечание: перечисляемые элементы массива являются строками, а не именами переменных. Поэтому необходимы кавычки и поэтому же можно не придерживаться правил имён и даже писать русскими буквами.
в) не указывать ничего (чтобы сделать назначения в дальнейшем).
У массива есть свойство length — длина, или, как говорят программисты, размерность. Это свойство указывает количество элементов массива. У массива с пустыми скобками размерность равна нулю.
Размерность можно динамически изменять. Определив «пустой» массив, можно потом присвоить значение и порядковый номер одному из его элементов. Как только мы это сделаем, изменится и размерность массива:
Обратите внимание на квадратные скобки, в которые заключается порядковый номер массива.
Теперь, даже если другие элементы не определены, массив имеет размерность в 4 элемента.
Yoklmn, почему четыре?
О программистах ходит много анекдотов, например, такой:
— По порядку рррас-считайсь!
— Нулевой!..
Первый элемент массива всегда имеет нулевой номер.
Теперь смотрите:
Длина пустого массива == 0
Длина массива с одним (нулевым) элементом == 1
Длина массива с двумя элементами ([0], [1]) == 2
И т.д.
То есть размерность массива всегда на один номер больше номера последнего элемента.
Не вру, можете проверить.
Скопируйте этот код в <body> пустой страницы HTML и посмотрите, что получится.
Кстати, иногда бывает очень удобна такая вот «динамически создаваемая шпаргалка». Когда затрудняетесь определить какое-нибудь значение в Вашем скрипте, выведите его через document.write. JavaScript не ошибётся.
Создание меню
Чтобы понять, как работают массивы, давайте создадим простенькое меню для домашней страницы, которое будет отображаться на всех страницах сайта.
Вот так, предположим, выглядело бы это меню в коде HTML.
Но мы придумаем одну хитрость: Ссылка страницы на саму себя будет неактивна. То есть тэг <a> на свою страницу выводиться не будет. Обратите внимание, стиль color для <div> определён тот же, что и для ссылки при наведении мышкой, розовенький, #FF8080. Лишённый тэга <a>, пункт меню всё время будет отображаться этим цветом.
Для решения этой задачи нам понадобится скрипт, в котором будут использованы массивы. Скрипт будет состоять из двух файлов.js. В первом будут заданы все параметры, и ссылка на него будет находиться в <head> наших web-страниц, а во втором файле будет скрипт, выводящий готовое меню на страницу, и ссылка на него будет там, где это меню должно появиться.
Как это будет работать?
Скрипт будет определять <title>заголовок</title> каждой страницы (не поленитесь тщательно прописать их), а потом через if будет решать, какой из пунктов меню нужно выводить без ссылки.
Сначала загоним в переменные повторяющийся текст тэгов, отграничив ссылки от остального (двойные кавычки в тэгах превратим в одиночные):
Пункт меню со ссылкой будет выглядеть так:
Без ссылки — так:
Напоминаю: всё, что находится внутри document.write(), вводится без перевода каретки. Переносы строк, которые Вы можете увидеть в примерах кода, — результат автопереноса в браузере. Если Вы скопируете эти коды, то ненужных переносов не будет.
В первом файле скрипта объявляем и назначаем переменные для тэгов и создаём три массива.
Первый — для заголовков в тэге< <title>.
Второй — для URL-адресов страниц.
Третий — для заголовков пунктов меню.
Вот как этот файл будет выглядеть:
Сохраним его и приступиь к созданию второго. Не забудьте, что помимо <td> у таблицы имеются <tr> и <table>. Сразу откроем и закроем таблицу:
А теперь будем заполнять середину.
Первый пункт меню.
Если
(заголовок страницы — «Мой сайт - Главная страница»)
{выводим меню без ссылки}
В противном случае
{выводим меню со ссылкой}
Заголовок страницы достаётся через document.title.
Переводим это на JavaScript:
Всё это копируем и для остальных пунктов меню, только соответственно меняем номера элементов массива. Целиком второй файл выглядит так:
Не забудьте пристегнуть к web-страницам и файл со стилями CSS.
Меню готово.
Итак, мы узнали:
как работать с массивами.
А также научились:
делать простое меню на все страницы.
(© А. Фролов)