Введение
Часть I. Знакомство с JavaScript
Глава 1. Введение в JavaScript
Глава 2. Внедрение JavaScript в HTML-документ
Часть II. Уроки языка
Глава 3. JavaScript в действии
Глава 4. Управление данными с помощью переменных
Глава 5. Массивы JavaScript и Escape-последовательности
Глава 6. Выражения, условия, операции, строки и числа
Глава 7. Использование операторов в языке JavaScript
Глава 8. Создание сценариев с помощью функций и событий
Глава 9. Наилучшее использование объектов
Глава 10. Выявление и исправление ошибок
Часть III. Варианты размещения сценария
Глава 11. Расширение кругозора
Часть IV. JavaScript и динамический HTML
Глава 12. Динамический HTML
Глава 13. Каскадные таблицы стилей
Глава 14. Объектная модель документа
Глава 15. Примеры, примеры, примеры

Массивы JavaScript и Escape-последовательности

Как пользоваться массивами
Быстрое создание массива
Размер массива
Вывод на экран всех элементов массива
Интерактивное творчество
Escape-последовательности

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

как пользоваться массивами;
как создаются массивы;
как создаются элементы массива;
как пользоваться знаками переключения кода.

Как пользоваться массивами

Массив (array) - мощное средство программирования для любого языка, в том числе в JavaScript. Массив позволяет сохранять несколько независимых значений в одной переменной. Обычно эти значения как-то связаны (например, названия дней недели). Преимущество массивов заключается в том, что правильное их использование значительно упрощает код и помогает избежать создания множества переменных с похожими именами.

Итак, посмотрим, как следует создавать массивы и пользоваться ими.

Пример. В первую очередь вам нужно создать массив:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Эта простая строка сценария приводит к нескольким различным последствиям:

создается переменная days_of_week;
с помощью new Array() указывает, что новая переменная является массивом;
определяется размер массива (в данном случае - 7).

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

Рис. 5.1. Пустой массив, состоящий из семи элементов

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

days_of_week[x] = значение;

В данном случае х означает номер элемента.

Прежде всего обратите внимание, как JavaScript нумерует элементы. Он рассматривает первый элемент массива не как первый (с номером 1), а как нулевой (с номером 0). То есть в данном примере дням недели будут соответствовать порядковые номера от 0 до 6, а не от 1 до 7 (см. рис. 5.2).

Рис. 5.2. Семь элементов массива с номерами от 0 до 6

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Пример. Следуя этому образцу, вы можете заполнить массив соответствующими значениями (см. рис. 5.3):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Рис. 5.З. Вид массива после присвоения элементам значений

Теперь вы можете извлекать из массива значения элементов. Как ранее элементам присваивались значения посредством имени переменной (в данном случае days_of _week) и указанного в квадратных скобках номера элемента (например, days_of_week [2 ] ), так теперь этот формат используется для извлечения значений из массива.

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

На рис. 5.4 изображен результат выполнения данного сценария.

Рис. 5.4. Окно предупредительных сообщений со значением элемента под номером 2

Примечание Не забывайте, что счет элементов массива начинается с нуля.

Пример. Здесь представлен еще один способ, которым достигается тот же результат:

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Упражнение Создайте массив месяцев года и воспользуйтесь предложенными ме -тодами, чтобы вывести на экран элементы массива, соответствующие февралю и августу. (Про комментарии можно уже не напоминать.)

Быстрое создание массива

Пример. Существует более быстрый способ создания того же массива, что и в предыдущем примере. На этот раз все элементы перечисляются в одной строке.

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

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

Этот массив функционально ничем не отличается от массива в предыдущем примере, и доступ к его элементам осуществляется тем же самым способом.

Размер массива

Ранее вы могли прочитать, что длина массива задается в скрытом виде свойством length (длина). Итак, length - свойство массива, оно может быть скрытым, но это не значит, что оно для вас недоступно.

Чтобы выяснить, сколько элементов содержится в массиве days_of_week, можно воспользоваться следующим выражением:

days_of_week.length

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

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Результат выполнения примера приводится на рис. 5.5.

Рис. 5.5. Окно предупредительных сообщений с количеством элементов массива days_of_week

Упражнение Воспользуйтесь свойством 1 ength, чтобы сосчитать элементы созданного ранее массива, содержащего месяцы года.

Вывод на экран всех элементов массива

Пример. Рассмотрим быстрый и простой способ перечислить значения всех элементов массива. Осуществляется это простым указанием его имени. Следовательно, чтобы извлечь все элементы массива days_of_week и вывести их на экран в окне предупредительных сообщений, надо воспользоваться следующим сценарием (см. рис. 5.6):

<html>
<head>
<title>Простая страница</title>
<script language="JavaScript">

</script>
</head>
<body>
</body>
</html>

Рис. 5.6. Окно предупредительных сообщений со всеми элементами массива days_of_week

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

Интерактивное творчество

Рассмотрим пример использования массива для создания интерактивного стихотворения. Наверное, вы знакомы с игрой, в которой участникам предлагается назвать некоторое количество слов - прилагательных, существительных и т.д. Затем их ответы подставляются в какое-нибудь известное произведение, в результате чего получается уникальный и довольно забавный текст. Далее показано, как создать такую игру.

Пример. Возьмите любую сказку, стихотворение или текст песни. Выберите слова, которые хотите заменить, и подставьте вместо них имена переменных:

У Лукоморья entryl entry2,
entry3 цепь на дубе том.
И днем, и ночью entry4 ученый
все entry5 по цепи кругом.
Идет направо - entry6 заводит,
налево - сказку говорит.
Там entry7, там entry8 бродит,
русалка на ветвях entry9.

Сохраните этот текст, вскоре он вам понадобится.

А теперь составьте список подходящих описаний для замененных слов:

entryl - растение (существительное мужского рода);
entry2 - цвет;
entry3 - прилагательное женского рода (например, интерактивная);
entry4 - животное (существительное мужского рода);
entry5 - глагол (например, делает);
entry6 - существительное в винительном падеже (например, программу);
entгу7 - явление природы;
entry8 - сказочное существо;
entry9 - глагол (например, делает).

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

А пока составьте список слов по умолчанию, которые должны быть вставлены в стихотворение. Если хотите, впишите что-нибудь забавное. Эти слова будут использованы в окончательном варианте стихотворения, если пользователь просто щелкнет по кнопке ОК, ничего не напечатав:

"дуб"
"зеленый"
"латая"
"кот"
"ходит"
"песнь"
"чудеса"
"леший"
"сидит"

Теперь можно приступить к написанию сценария.

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

Затем создайте массив слов, используемых по умолчанию:

А теперь объявите переменные для ответов на запросы:

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

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

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

Если бы внутри текста использовались двойные кавычки, то для их отображения следовало бы воспользоваться знаком соответствующей Escape-последовательности (\"). Тогда двойные кавычки внутри строки будут отображаться без ошибок.

Строки текста и введенные пользователем значения переменных объединяются с помощью операции +.

Предупреждение Пользователи Microsoft Visual Basic или VBScript иногда неправильно употребляют символ & для объединения. Такая ошибка очень распространена.

Сохраните файл и откройте его в браузере, чтобы создать собственное стихотворение. Введите свою информацию в окнах запросов и окнах предупредительных сообщений, посмотрите на полученный результат.

Оптимизация

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

var entryl = prompt(promptmsg[0], defaulttxt[0])
var entry2 = prompt(promptmsg[1], defaulttxt[1])
var entry3 = prompt(promptmsg[2], defaulttxt[2])
var entry4 = prompt(promptmsg[3], defaulttxt[3])
var entry5 = prompt(promptmsg[4], defaulttxt[4])
var entry6 = prompt(promptmeg[5], defaulttxt[5])
var entry7 = prompt(promptmsg[6], defaulttxt[6])
var entry8 = prompt(promptmsg[7], defaulttxt[7])
var entry9 = prompt(promptmsg[8], defaulttxt[8])

Упражнение Как еще можно оптимизировать ваш сценарий ? Воспользуйтесь для этого не переменными, а массивом для сохранения информации, введенной в окнах запросов (от entryl до entry9). Вызовите окно предупредительных сообщений, чтобы проинструктировать пользователя перед началом игры, и создайте комментарии к коду.

Escape-последовательности

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

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

Escape-последовательности перечислены в табл. 5.1.

Таблица 5.1. Escape-последовательности

Последовательность символов	Название
\b	Возврат на одну позицию
\t	Табуляция
\f	Переход на следующую страницу
\n	Новая строка (переход на следующую строку)
\r	Возврат каретки
\"	Двойные кавычки
\'	Одинарные кавычки
\\	Обратная косая черта

Эти символы могут помещаться в любом месте строки. Ставить пробелы перед ними или после них не требуется.

Пример. Ниже приводится несколько примеров использования Escape-последовательностей.

Возврат каретки:

На рис. 5.7 показан результат использования этого символа.

Рис. 5.7. Окно предупредительных сообщений, поясняющее использование возврата каретки

Одинарные и двойные кавычки:

На рис. 5.8 показан результат использования кавычек в строке.

Рис. 5.8. Окно предупредительных сообщений, поясняющее использование одинарных и двойных кавычек

Знаки табуляции:

На рис. 5.9 показан результат использования символа табуляции в строке.

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

Упражнение Измените пример создания интерактивного стихотворения так, чтобы весь текст выводился в одном окне предупредительных сообщений. (Вам понадобится символ возврата каретки \r для разделения строк.)

[ Назад ] [ Вверх ] [ Далее ]