Стать программистом. Часть 14. Основы JavaScript для абсолютных новичков!

Доброго времени суток, друзья!

В прошлом уроке мы с Вами познакомились с основными операторами сравнения, рассмотрели их названия, кодовое представление, а также на практике разобрали примеры с их использованием. Надеюсь большинство материала, изложенного в предыдущем уроке, было доступным и не вызвало большого количества вопросов. Если же вопросы возникли, пожалуйста, излагайте их в комментариях и буем разбираться вместе.

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

Поэтому "только сегодня и только сейчас" на очереди у нас сложные переменные типа Object.

Давайте начнем.

УРОК 14. Сложные переменные. Array и Object.

Давайте вспомним список возможных типов переменных из урока №4.

Согласно этому списку мы с Вами уже успели познакомится с различными видами переменных. А вот чего мы точно не делали - не касались типа, расположенного в 4 пункте. Помнится, я тогда обратил на него Ваше внимание и, в силу некоторых обстоятельств, я обещал рассмотреть его чуть позже. Сегодня мне представляется уместным начать восполнять этот пробел, хотя мы и не охватим абсолютно все что касается переменных типа Object. Но нам это и не требуется. Для начала будет достаточно приобрести знания о том, что это вообще за переменные с таким типом, как они выглядят, как их создавать, какими они бывают. А уже более глубоко мы рассмотрим их позже, после темы, которая будет назваться функции.

Для начала немного теории:

Все переменные в JavaScript'e можно условно разделить на три группы. Первая группа — это так называемые примитивы. К ним как раз-таки и относятся все типы переменных, которые мы уже успели рассмотреть. Вот они:

String (Строка).
Number (Число).
Boolean (Логический тип).

Кроме этих типов мы успели затронуть специфические значения переменных, такие как:

Undefined (Неизвестное, неопределенное).
Null (Пустота).

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

Object (Объект).

Именно этот тип переменных мы и будем рассматривать.

Object как тип сложносоставных переменных.

Для того чтобы достичь ясности в вопросе типа сложносоставных переменных, нам для начала потребуется понять, что же именно эти переменные из себя представляют. Давайте освежим нашу память и вспомним самые первые уроки о переменных в принципе. Для понимания сущности переменной в уроке № 3 мы проводили некую параллель и сравнивали переменную с коробочкой, куда мы могли положить вещь (значение).

В общих чертах сложносоставные переменные так же можно сравнить с коробочкой, однако коробочка эта будет состоять из нескольких отделений и в каждом из этих отделений может лежать либо своя вещь, либо еще одна такая же коробочка с множеством отделений. Теоретически, количество таких отделений неограниченно. На практике их число, конечно, имеет свой предел, но действительно может быть очень большим.

Давайте рассмотрим на практике, чтобы закрепить ассоциативный образ с кодовым представлением и начнем мы с первой сложносоставной переменной, которая называется Array или Массив.

Array (Массив).

В своем кодовом представлении самый обычный массив выглядит следующим образом:

// Сложносоставные переменные типа Object
var a = [1, 2, 3, 4, 5];

Мы видим, что создание самой переменной ничем не отличается от того, что нам доводилось видеть ранее. Мы так же используем var чтоб начать создание переменной, так же ка и раньше присваиваем переменной имя a и единственное что отличается это ее значение. Раньше на этом месте мы записывали что-то одно (либо цифру, либо число, либо одно из булевских значений, либо undefined, либо null) теперь же мы видим, что значение у нас тоже одно, но внутри этого значения аж пять цифр. Все они охвачены квадратными скобками [....] и каждая цифра отделена от ругой запятой.

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

Если возвращаться к нашей ассоциации, то квадратные скобки можно сравнить с бортами коробочки, запятые - с перегородками её отделений, а цифры - с вещами.

Безусловно каждая составная часть массива имеет свое название. Но на данном этапе нам не особенно важно углубляться в терминологию. Единственное что нам не будет лишним знать это то, что цифры в данном примере (или любое другое значение вместо этих цифр) называются элементами массива.

Для того, чтобы проверить тип переменной, значением которой является массив мы можем воспользоваться нашими знаниями из предыдущих уроков и вооружится уже знакомым нам помощником typeof.

// Сложносоставные переменные типа Object
var a = [1, 2, 3, 4, 5];

alert(typeof a);

Пройдем в браузер, где открыт наш index.html и обновим окно:

Как мы видим из сообщения, тип переменной в значении которой находится массив - Object. То есть мы лишний раз подтвердили, что тип сложносоставной переменной именно Object (Объект).

Далее, массив может содержать в себе элементы с абсолютно любым значением и как следствие типом этого значения. Например,

// Массив с элементами разных типов
var a = [1, 'привет', null, undefined, true];

В отличие от предыдущего примера var a = [1, 2, 3, 4, 5];, где все элементы являются цифрами с типом Number, масив var a = [1, 'привет', null, undefined, true]; тоже имеет пять значений, но все они разного типа. Массив такого рода называется смешанным.

Более того, как уже было сказано вначале урока, если сравнивать сложносоставную переменную с коробочкой внутри которых есть множество отделений, каждое из которых может содержать какое-либо значение или такую же коробочку с множеством значений внутри, то мы смело можем предположить, что внутрь элемента массива кроме примитивных значений можно положить такой же массив. Такое предположение будет верным и массивы, содержащие внутри себя другие массивы, называются многомерными. Пример:

// Массив с элементами разных типов
var a = [1, [1, true, 'привет' ], null, undefined, true];

В этом примере мы видим, что переменная a в своем значении содержит многомерный массив (обведенный красной рамкой). А многомерным он является потому, что его второй элемент тоже является массивом (обведен зеленой рамкой). И все это не меняет того факта, что оба эти массива в то же самое время являются смешанными, так, как и в первом массиве и во втором присутствуют элементы разных типов.

Представление массива в одну строку, как на примерах выше, встречается только в случае, когда сам массив не большой, то есть имеет маленькой количество элементов внутри себя. Зачастую, для простоты восприятия массивы в коде представляют следующим образом:

// Массив с элементами разных типов
var a = [
    1, 
    'привет', 
    null, 
    undefined, 
    true
];

JavaScript достаточно умен, чтобы проигнорировать переносы строк внутри квадратных скобок и отнести всю запись к одному массиву и одной переменной.

Любая сложносоставная переменная, в том числе и Массив имеет свойства. Свойства содержат в себе дополнительную информацию о переменной. Например, если возвращаться к нашей ассоциации с коробочкой, то мы вполне можем допустить что эта коробочка будет иметь как минимум три параметра: длину, ширину и глубину. Эти три параметра как раз и будут являться свойствами для коробочки.

Подробно свойства сложносоставных переменных мы тоже будем рассматривать позже. А на данный момент, в разрезе темы Массив будет достаточно знать, что он тоже обладает свойствами. Одно из таких свойств называется length - длина. Это свойство появляется сразу же, как только был создан сам массив. Длина содержит цифру. Эта цифра - это общее количество всех элементов первого порядка внутри массива. Что значит первого порядка?

Если взять наш пример с много мерным массивом. Вот он:

То для формирования свойства length массива, обведенного в красную рамку количество элементов внутри массива, обведенного в зеленую рамку учитываться не будет. То есть сам этот "зеленый массив" в общей сумме элементов учтётся, а количество его собственных элементов в формировании длины для "родительского" массива участвовать не будут.

Если посчитать количество элементов массива, приведенного выше, легко вычислить что в свойстве length этого массива будет лежать цифра 5. Кончено мы можем проверить истинность нашего предположения.

Для того, чтобы это сделать, нам необходимо использовать запись следующего вида:

// Массив с элементами разных типов
var a = [1, [1, true, 'привет' ], null, undefined, true];

alert(a.length);

Запись, которую Вы видите на строке №4, вернее та ее часть, которая подчеркнута красной линией, дает нам доступ к значению которое лежит в свойстве length массива a. Разбирать синтаксис (форму представления) этой записи сейчас нам не требуется. Пока просто запомните, как она выглядит. Ну а конструкцию alert(); вы уже знаете.
Проверим в браузере:

Длина смешанного, многомерного массива a действительно равна пяти.

Задача.

Создайте многомерный, смешанный массив.
Создайте многомерный, НЕсмешанный массив так, чтобы его свойство length было на два больше, чем свойство length у массива из первого пункта.

А на сегодня все