Урок 10 - Ещё о массивах

• многомерные массивы;
• встроенные массивы;
• усовершенствованный фотоальбом;
• оператор-помощник with.

Многомерные массивы

Многомерные массивы в JavaScript — это массивы, содержащие внутри себя другие массивы.

Чтобы это проиллюстрировать, представим себе заготовку двухуровнего меню в виде списка.

Сначала объявим массив:

Теперь объявим его первый элемент как массив из трёх элементов — наших основных пунктов меню.

В этом «массиве в массиве» у нас три элемента, которые можно вызвать как 0, 1 и 2 (помним, что отсчёт ведётся с нуля).

Теперь, вызывая list[0][0], мы получим «Меню 1», вызывая list[0][1] — «Меню 2», и т.д.

Следующие элементы главного массива заготавливаем как массивы пунктов подменю:

Вызываются аналогично: например, list[1][2] («Меню 1.3») или list[2][0] («Меню 2.1»).

Теперь формируем список:

Результат:

• Меню 1
  • Меню 1.1
  • Меню 1.2
  • Меню 1.3
• Меню 2
  • Меню 2.1
  • Меню 2.2
• Меню 3
  • Меню 3.1
  • Меню 3.2
  • Меню 3.3
  • Меню 3.4

Для чего это нужно?

Чтобы для настройки и «оживления» меню можно было программно обращаться к его пунктам как к элементам массива.

Таким же образом можно загнать в многомерный массив, скажем, таблицу и написать скрипт, который при нажатии определённых кнопок или заголовков будет выполнять сортировку (по алфавиту, по величине и т.д.).

О методах сортировки элементов массива я расскажу, когда мы будем говорить о методах JavaScript.

Встроенные массивы

Поскольку JavaScript предназначен прежде всего для web-страниц, некоторые элементы HTML встроены в него как массивы (иногда их называют коллекциями).

К таким массивам-коллекциям относятся формы — forms() и изображения — images().

Допустим, на нашей web-странице несколько раз встречается тэг <img>. Первый <img> будет автоматически определяться какimages[0], и т.д. по порядку появления в коде. То же и с формами.

Иногда это бывает удобно, но не всегда.

В Ассоциации «Русская Традиция» при Питерском Союзе композиторов, в которой я состою, двое из музыкантов являются также и одарёнными художниками. Я сделал на сайте Ассоциации маленькую галерею (можете посмотреть) и использовал эту встроенную коллекцию. А потом решил резко поменять дизайн всего сайта. Но поскольку в элементах дизайна тоже есть графика, то нумерация сбилась, и я двое суток сидел и правил цифры. А на третьи сутки до меня дошло, что лучше это сделать, например, через getElementById() — помните? — присваиваем тэгу id и обращаемся к нему этим методом.

Но есть от встроенных массивов и настоящая польза. У элементов этих массивов есть свойства, присущие их объектам-прототипам. Так, элементы коллекции forms() имеют свойства method, action, name, а элементы images() — свойства src, width,height. Таким образом, мы можем создавать некие «абстрактные» элементы массива, а потом определять для них конкретный тэг. Это хорошо работает в слайд-шоу, когда в одном тэге программно заменяются картинки, определённые в скрипте.

Чтобы создать такой элемент, нужно объявить обычный массив и переопределить его элементы:

Обратите внимание: элементы называются в единственном числе — Image() (и с большой буквы), а не images() (с маленькой буквы), как вся коллекция.

Усложняем слайд-шоу № 9

В «Диких уроках HTML» урок № 9 посвящён созданию слайд-шоу на JavaScript. Мы немного усложним этот скрипт.

Там фотоальбом посвящён кошкам. Я тоже люблю и кошек, и собак, но ещё больше — друзей. Есть у меня друг Гена Змитрович, талантливый скульптор и художник. И в нашем уроке я хочу представить несколько его работ. А поскольку он выступает в двух ипостасях — как художник и как скульптор — у нас будет два слайд-шоу, с картинами и скульптурами, но управляться они будут одним скриптом.

Этот скрипт — своего рода контрольное задание. Кроме массивов, в нём используется ряд операторов, которые мы изучили, а также он продемонстрирует, как можно использовать логический (булев) тип данных.

Если Вы сможете сами соорудить подобный скрипт, значит, уже перешли из категории «чайников» в категорию «кофейников»:)

Объявим две переменных счётчика и два массива — для картин и для скульптур. Элементы массивов сразу объявим как images.

(В первоначальном варианте я для простоты дал один счётчик, но с ним функция работала не совсем корректно. Так что пусть будет немного сложнее, но без халтуры.)

Высота у всех изображений одинаковая — 300 px. А вот ширина немножко разная. Воспользуемся свойствами элементов встроенного массива. Кроме ширины width укажем имена и пути файлов src.

Что, так и будем по два раза каждый элемент прописывать?

Для сокращения кода существует вспомогательный оператор with. Сейчас научу, как им пользоваться.

Один раз упомянув в круглых скобках объект, в фигурных можно выписать все его свойства и методы через точку с запятой:

Теперь наш код приобретёт более компактный вид:

Все картины и скульптуры как-то называются. Картины у Змитровича философские. А среди скульптур есть и памятник, и кубок, и просто миниатюры. С названиями легче. Давайте сделаем, чтобы и названия выпрыгивали.

Для этого заготовим ещё два массива — тоже для картин и для скульптур.

Принцип работы будет такой: в левой половине — слайд с картинами и под ним две кнопки: «вперёд» и «назад». Под кнопками — меняющееся название. Справа — аналогичная конструкция для скульптур (всё это можно поместить в таблицу с двумя <td> по 50%). Кнопки мы возьмём из стандартного элемента form.

Сейчас напишем этакую многофункциональную функцию, которая отрегулирует работу всей этой системы.

Сначала сформулируем задачи:

Кнопка «вперёд» должна «бесконечно» прокручивать картинки вперёд, то есть, дойдя до конца, возвращаться к началу.
Кнопка «назад» должна делать то же самое, но в обратном направлении.
Пары кнопок должны работать автономно, прокручивая только свой слайд.

Вот сейчас и пора вспомнить гениального Джорджа Буля, который утверждал, что самые сложные проблемы можно решить через последовательность цепочек «да» и «нет».

Нам нужны всего две таких цепочки:

вперёд-назад — да-нет;
картины-скульптуры — да-нет.

Эти два булевых выражения и станут аргументами нашей функции. Поскольку это «родная дочь» функции dem(n) из Дикого урока № 9, назовём её dem_plus(n,k). Приведу её всю, а дальше будем разбираться, что к чему.

Количество картин и скульптур в нашем примере одинаково. Но оно может быть и разным. Для этого нам и нужны два счётчика. Но это ещё не всё. Для правильной работы функция должна «знать» фактическую длину каждого массива. Поэтому объявим в ней переменную dlina, чтобы, воспользовавшись свойством массива length, динамически определить «потолок» для каждой группы слайдов.

(Вспомните, что переменная, объявленная внутри функции, «живёт» только в теле этой функции. Но здесь нам этого вполне достаточно.)

Сначала разнесём разные слайды. С этим управится второй аргумент — k. Тут никаких особых действий — просто «да» и «нет». Не будем конструировать «если бы да кабы», а используем простой переключатель switch. И в случае true (картины) будем использовать счётчик i, а в случае false (скульптуры) — j.

Аргумент n отвечает за «вперёд-назад». Если он true, то вперёд. Счётчик (i или j) будет считать картинки по возрастающей.

Теперь внимание: пошла арифметика, в которой можно и запутаться.

Какова размерность массива картин (скульптур)? Как мы помним, это составит их реальное количество + 1 (см. прошлый урок). Значит, dlina даст нам на 1 номер больше, чем их количество.

Значит, когда счётчик перейдёт на значение dlina (элемента с таким номером уже нет, понятно, почему?), нужно взмахнуть волшебной палочкой и превратить его в 0. Вот видите, можно и так циклы делать, не используя специальных операторов. Но здесь нам не нужен самодвижущийся цикл. «Движок» — это «юзер» с мышкой.

В противном случае (else) делаем «пач-пач-пач» (назад). За нулём — что там в школе проходили? Минус единичка. Её-то мы и превращаем в...

Будьте внимательны! В dlina - 1. Именно это и будет номером последней картинки, который нам нужен.

Кончилась абстракция, теперь мы имеем дело с конкретными объектами на web-странице. Давайте отвлечёмся от функции и подготовим плацдарм.

Вот наши окошки для слайдов. Можно воспользоваться и порядковыми номерами из коллекции. Но давайте дадим дизайнеру возможность оформить страницу, не заморачиваясь сохранностью её содержимого. Поэтому лучше дадим нашим окошкам имена собственные: pic и sculp.

Да, у нас же ещё и названия! Так что зададим имена и тем абзацам или заголовкам (у меня <h3>), в которых эти названия должны появляться.

Теперь вернёмся к функции. Зададим для подготовленных окошек имя файла и ширину картинки (можно опять через with), а также текст названия (из массивов imgname и imgname2). В качестве номера элемента указываем счётчик. Если счётчик будет работать правильно, он сам будет подставлять нужные номера.

Метод innerHTML возвращает то, что находится внутри указанного тэга HTML (в данном случае — текст). Подробнее об этих методах будем говорить позже.

Разбросаем всё по случаям true (картины) false (скульптуры).

Не забудем поставить break!

Нам нужно либо одно, либо другое, а не всё сразу!

Аккуратно закрываем все скобки. Функция готова.

Вызывать её будем из кнопок формы (из атрибута onClick) с нужными аргументами (true или false).

В реальные тэги HTML (по умолчанию) вставим параметры нулевых слайдов.

Вот примерно что должно быть в <body> (проанализируйте, как расподожены аргументы true и false в вызовах функции):

А теперь смотрим, как это работает.

Не работает?..

Ага, значит, у Вас браузер Netscape, Mozilla или Firefox. Они не всегда понимают document.images (впрочем, иногда и понимают, но действуют непредсказуемо).

Как это исправить?

Так Вы уже знаете, как.

У наших тэгов <img> есть id? А знаем мы, что такое getElementById? Ну так полный вперёд!

Это будет Вашим самостоятельным домашним заданием. А чтобы проверить себя и заглянуть в ответ... у Вас есть мышка с двумя, по крайней мере, кнопками. Поняли, где лежит ответ?

Геннадий Змитрович

скульптор и художник

Живопись	Скульптура
Плаха	Девочка с яблоком

Подробнее с работами автора можно познакомиться на сайте Геннадия Змитровича

После небольших каникул приступим ко второй фазе знакомства с JavaScript.

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

какие бывают массивы и как их можно использовать, а также как использовать вспомогательный оператор with.

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

делать не самое простое слайд-шоу, а возможно, даже подгонять его под разные браузеры.

источник http://www.dikarka.ru/