Веб-программирование

Обучение программированию

Делаете первые шаги в программировании? Представляем вашему вниманию пошаговое обучение самостоятельного создания сайтов любой сложности на примерах! На страницах сайта KobRU вы найдете все самое необходимое, для того чтобы по праву считаться веб-мастером по созданию привлекательных динамически изменяемых интернет-страниц, используя основные инструменты веб-разработчиков: HTML; CSS; PHP; MySQL; JAVASCRIPT и другие. Сайт KobRU - наиболее полное и качественно структурированное руководство с предельно понятными пояснениями и поэтапным изложением материала, который поможет вам в совершенстве овладеть искусством программирования. Добавьте динамики и интерактивность в свои веб-проекты!

Вход в личный кабинет

Забыли пароль?

Не зарегистрированны?


Конструкторское Web-бюро
6.5 Многомерный массив

Автор: Denisido

Дата: 2010-07-11

Если вы представите массив в массиве, то это и будет многомерный массив. Говоря другими словами, массив, который содержит в себе в качестве элемента другой массив называется двумерным массивом. Как правило, программисты ограничивают себя трехмерными массивами и не усложняют себе жизнь более сложными построениями. Давайте рассмотрим все на примере игральных карт:

Запустить!
/* s - пики
   c - крести
   h - черви
   d - буби   */
 
var cards = ["s", "c", "h", "d"]; // создаем массив с 4 элементами (масти карт)
// ниже присваиваем карточной масти свои карты от 2 до туза
cards[0] = ['2s','3s','4s','5s','6s','7s','8s','9s','Ts','Js','Qs','Ks','As'];
cards[1] = ['2c','3c','4c','5c','6c','7c','8c','9c','Tc','Jc','Qc','Kc','Ac'];
cards[2] = ['2h','3h','4h','5h','6h','7h','8h','9h','Th','Jh','Qh','Kh','Ah'];
cards[3] = ['2d','3d','4d','5d','6d','7d','8d','9d','Td','Jd','Qd','Kd','Ad'];
 
alert(cards[0][0]);  // с помощью модального окна выводим ДВОЙКУ ПИК (2s)
alert(cards[3][12]); // с помощью модального окна выводим ТУЗ  БУБЕЙ (Ad)

Теперь более подробно. Как вы понимаете строки 1-4 это комментарии. В 6 строке нашего кода мы создаем массив карточных мастей, в котором четыре элемента (пики, крести, черви и буби). Если мы захотим их вывести, скажем при помощи нашей команды alert(), то мы подставим соответствующий индекс и получим результат. Например, чтобы вывести первый элемент в массиве подставим 0 - cards[0]. Стоить думать, что вы уже научились выводить каждый элемент массива по индексу, поэтому такое разъяснение должно быть уже понятно. Итак идем далее, в строках 08-11 мы создаем для каждого элемента массива свой массив в виде достоинства карт, их 13. И в конце кода (строки 13 и 14) мы выводим в модальном окне 2 элемента. Вывод осуществляется с использованием квадратных скобок, где в первых пишем [индекс масти карты], во вторых [индекс, отвечающий за достоинство карты].

Усложним задачу. Попробуем вывести все элементы массива с помощью цикла:

var cards = ["s", "c", "h", "d"];
cards[0] = ['2s','3s','4s','5s','6s','7s','8s','9s','Ts','Js','Qs','Ks','As'];
cards[1] = ['2c','3c','4c','5c','6c','7c','8c','9c','Tc','Jc','Qc','Kc','Ac'];
cards[2] = ['2h','3h','4h','5h','6h','7h','8h','9h','Th','Jh','Qh','Kh','Ah'];
cards[3] = ['2d','3d','4d','5d','6d','7d','8d','9d','Td','Jd','Qd','Kd','Ad'];

for (i = 0; i < 4; i++) {
for (j = 0; j < 13; j++) {
			   document.write(cards[i][j] +' '); // выводим цикл
		
				}; // конец встроенного цикла (для j)
			}; // конец основного цикла (для i)
 

В строке 7 мы создаем цикл for для вывода массива мастей, в котором 4 элемента, поэтому индекс счетчика i ставим на 0, а условия - не больше 4 (сколько и элементов в этом массиве), в случае FALSE (ложь) цикл прекратится. В теле цикла создаем похожий вложенный цикл (строка 8), но с другой переменной j, уже для вывода элементов массива с достоинством карт - 13 элементов, поэтому условия не больше этих элементов, иначе цикл прекращается. В теле цикла выводим все элементы из массива с помощью document.write(). Смысл вложенных циклов в том, чтобы они поэтапно выводили карты, т.е. сначала первый элемент для массива масти карт и в нем элементы массива с достоинством карт, потом следующий и т.д.

В нашем примере мы точно знаем количество элементов в массиве, поэтому без всяких сомнений поставили условия i < 4; и j < 13;. Но что, если мы не знаем точного числа элементов в массивах? Попробуем устранить эту проблему и улучшить наш код, сделав его в этом плане автономным:

var cards = ["s", "c", "h", "d"];
cards[0] = ['2s','3s','4s','5s','6s','7s','8s','9s','Ts','Js','Qs','Ks','As'];
cards[1] = ['2c','3c','4c','5c','6c','7c','8c','9c','Tc','Jc','Qc','Kc','Ac'];
cards[2] = ['2h','3h','4h','5h','6h','7h','8h','9h','Th','Jh','Qh','Kh','Ah'];
cards[3] = ['2d','3d','4d','5d','6d','7d','8d','9d','Td','Jd','Qd','Kd','Ad'];

for (i = 0; i < cards.length; i++) {
for (j = 0; j < cards[i].length; j++) {
					document.write(cards[i][j] +' ');

		
				}; // конец встроенного цикла (для j)
			}; // конец основного цикла (для i)
 

В 7 строке мы переписали условие в цикле на i < cards.length;. Как говорилось выше свойство lenght определяет длину массива. В нашем случае длина массива равна 4. В 08 строке чуть посложнее - тут сперва определяется номер основного массива cards[i], где под i понимается число, равное прохождению цикла (от 0 до 3), а затем с помощью свойства lengthопределяется длина вложенного массива cards[i].length

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

Запустить!
var cards = ["s", "c", "h", "d"];
cards[0] = ['2s','3s','4s','5s','6s','7s','8s','9s','Ts','Js','Qs','Ks','As'];
cards[1] = ['2c','3c','4c','5c','6c','7c','8c','9c','Tc','Jc','Qc','Kc','Ac'];
cards[2] = ['2h','3h','4h','5h','6h','7h','8h','9h','Th','Jh','Qh','Kh','Ah'];
cards[3] = ['2d','3d','4d','5d','6d','7d','8d','9d','Td','Jd','Qd','Kd','Ad'];

for (i = 0; i < cards.length; i++) {
if (i >= 1) {document.write(' 
');} for (j = 0; j < cards[i].length; j++) { document.write(cards[i][j] +' '); }; // конец встроенного цикла (для j) }; // конец основного цикла (для i)



Оцените материал по 5-ти бальной шкале: 1 2 3 4 5



Коментарии:

Добавить новый коментарий:

Текст коментария:

Введите результат с картинки

Просмотров: 14741

Метки раздела JavaScript

Основы web программирования, var javascript, javascript функции, javascript обучение, javascript простые примеры, html javascript, javascript примеры, javascript random, уроки сайтостроения, java script, регулярные выражения, appendchild javascript, javascript бесплатно, javascript document write, javascript справочник, javascript примеры.