Марк Кан - Основы программирования на JavaScript

// преобразуем myArray снова в строку с помощью запятой,

// так что можно видеть каждый элемент

alert(myArray.join('a'));

// теперь преобразуем myArray снова в строку с помощью символа 'a',

// так что снова получается исходная строка

Еще две полезные функции для работы с массивами - pop и shift . Функция pop удаляет последний элемент из массива и возвращает его. Функция shift удаляет первый элемент из массива и возвращает его.

var students = ['Sam', 'Joe', 'Sue', 'Beth'];

while(students.length>0){

alert(students.pop());

}

К сожалению, при этом массив был уничтожен: он теперь пуст. Иногда именно это и надо сделать. Если требуется просто очистить массив, то проще всего задать его длину ( length ) равной 0 :

students.length = 0

Теперь массив пуст. Даже если снова задать длину массива больше 0 , все данные в массиве уже будут уничтожены.

Все использованные до сих пор массивы называются "индексными массивами", так как каждый элемент массива имеет индекс, который необходимо использовать для доступа к элементу. Существуют также "ассоциативные массивы", в которых каждый элемент массива ассоциирован с именем в противоположность индексу:

var grades = [];

grades['Sam'] = 90;

grades['Joe'] = 85;

grades['Sue'] = 94;

grades['Beth'] = 82;

Ассоциативные массивы действуют немного иначе, чем индексные. Прежде всего, длина массива в этом примере будет равна 0 . Как же узнать, какие элементы находятся в массиве? Единственный способ сделать это - использовать цикл " for-in ":

for(student in grades){

alert("Оценка " + student + "будет: " + grades[student]);

}

Синтаксис цикла for-in следующий: " for(item in object){ ". Цикл пройдет через все элементы в объекте, и элемент будет именем элемента. В данном случае элементом является " Sam ", затем " Joe ", " Sue " и " Beth ".

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

var students = ['Sam', 'Joe', 'Sue', 'Beth'];

students['Sam'] = 90;

students['Joe'] = 85;

students['Sue'] = 94;

students['Beth'] = 82;

alert('Всего имеется '+(students.length)+' студентов: '+students.join(', '));

for(var i=0; i

alert("Оценка " +students[i]+"будет: "+students[students[i]]);

}

Хотя это может показаться немного сложным, здесь нет ничего такого, о чем не говорилось в этой лекции.

Теперь читатель должен достаточно хорошо понимать основные типы данных JavaScript : строки, числа и массивы. В следующей лекциибудет рассмотрена Объектная модель документа, или DOM (Document Object Model).

Эта лекция посвящена Объектной модели документа, или коротко DOM (Document Object Model). DOM является просто специальным термином для "всего на Web-странице". Объектная модель включает каждую таблицу, изображение, ссылку, поле формы и т.д. на Web-странице. JavaScript позволяет манипулировать с любым элементом на странице в реальном времени. Можно скрывать или полностью удалять любой элемент, добавлять элементы, копировать их, изменять такие свойства, как цвет, ширина, высота, и т.д., а при некотором воображении можно даже реализовать функции перетаскивания, анимации и почти все остальное, что можно придумать.

Прежде всего, необходимо понять, что с точки зрения браузера страница HTML является точно тем же, что и документ XML . Если читатель имеет опыт работы с XML , то сможет понять обработку DOM достаточно легко. Но в любом случае это в действительности не сложно. Существует прекрасный справочник по адресу ( http://www.devguru.com/technologies/xml_dom/index.asp), который подробно описывает каждый метод обработки DOM , но к концу этой лекции читатель в основном поймет, как это работает.

Те, кто знает, что такое документ XML , могут пропустить этот раздел. Остальным необходимо его прочитать.

Будем надеяться, что читатель в какой-то степени знаком с HTML . Это то, из чего состоит (почти) каждая Web-страница. Каждое изображение, ссылка, таблица, поле формы и т.д. имеют свой собственный тег. Ниже приведен пример простой страницы HTML :

Это просто обычная страница HTML . Возможно, вы не знаете о том, что это также пример документа XML . Здесь нас интересует то, что каждый элемент является потомком и/или предком другого элемента. Первое изображение находится внутри тега TD , который находится внутри тегов TR , TABLE , BODY и HTML . Двигаясь в другом направлении, можно видеть, что тег BODY имеет одного "потомка" - тег TABLE . Этот тег TABLE имеет в качестве потомков два тега TR и т.д. По сути именно так мы перемещаемся в документе XML или HTML DOM - двигаясь от потомка к предку или от предка к потомку.