Урок 10 - Ещё о массивах
- многомерные массивы;
- встроенные массивы;
- усовершенствованный фотоальбом;
- оператор-помощник with
Многомерные массивы
Многомерные массивы в JavaScript — это массивы, содержащие внутри себя другие массивы.
Чтобы это проиллюстрировать, представим себе заготовку двухуровнего меню в виде списка.
Сначала объявим массив:
Теперь объявим его первый элемент как массив из трёх элементов — наших основных пунктов меню.
В этом «массиве в массиве» у нас три элемента, которые можно вызвать как 0, 1 и 2 (помним, что отсчёт ведётся с нуля).
Теперь, вызывая list[0][0], мы получим «Меню 1», вызывая list[0][1] — «Меню 2», и т.д.
Следующие элементы главного массива заготавливаем как массивы пунктов подменю:
Теперь формируем список:
Результат:
Для чего это нужно?
Чтобы для настройки и «оживления» меню можно было программно обращаться к его пунктам как к элементам массива.
Таким же образом можно загнать в многомерный массив, скажем, таблицу и написать скрипт, который при нажатии определённых кнопок или заголовков будет выполнять сортировку (по алфавиту, по величине и т.д.).
О методах сортировки элементов массива я расскажу, когда мы будем говорить о методах 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.
А также научились:
делать не самое простое слайд-шоу, а возможно, даже подгонять его под разные браузеры.
(© А. Фролов)