Ник Морган - JavaScript для детей. Самоучитель по программированию

var movies = {

Movies —

"В поисках Немо": {

фильмы

releaseDate: 2003,

Release date —

duration: 100,

дата выхода

actors: ["Альберт Брукс", "Эллен Дедженерес", 

Duration —

"Александр Гоулд"],

продолжи-

format: "DVD"

тельность

},

"Звездные войны: Эпизод VI — Возвращение джедая": {

Actors —

releaseDate: 1983,

в ролях

duration: 134,

Format —

actors: ["Марк Хэмилл", "Харрисон Форд", "Кэрри Фишер"],

формат

format: "DVD"

},

"Гарри Поттер и Кубок огня": {

releaseDate: 2005,

duration: 157,

actors: ["Дэниел Рэдклифф", "Эмма Уотсон", "Руперт Гринт"],

format: "Blu-ray"

}

};

Наверное, вы заметили, что названия фильмов (ключи внешнего объ-

екта) я поставил в кавычки, но ключи внутренних объектов записал без

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

бы писать нечто вроде ЗвездныеВойныЭпизодVIВозвращениеДжедая,

а это уж совсем нелепо. Для ключей вложенных объектов кавычки нео-

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

в нем нет излишних знаков пунктуации.

Теперь, если вы захотите что-то узнать о фильме, это легко сделать:

80 Часть I. Основы

var findingNemo = movies["В поисках Немо"];

findingNemo.duration;

100

findingNemo.format;

"DVD"

Мы сохранили сведения о фильме «В поисках Немо» в переменной

fi ndingNemo. Теперь достаточно обратиться к свойствам этого объекта

(таким как duration и format), чтобы получить интересующую нас

информацию.

Кроме того, в коллекцию легко добавить новые фильмы:

var cars = {

releaseDate: 2006,

duration: 117,

actors: ["Оуэн Уилсон", "Бонни Хант", "Пол Ньюман"],

format: "Blu-ray"

};

movies["Тачки"] = cars;

Здесь мы создали новый объект со сведениями о мультфильме

«Тачки» (Cars), а затем добавили его в объект movies с ключом "Тачки".

Коллекция растет, и вам может понадобиться простой способ

просмотреть названия всех своих фильмов. Для этого подойдет

Object.keys:

Object.keys(movies);

["В поисках Немо", "Звездные войны: Эпизод VI — Возвращение

джедая", "Гарри Поттер и Кубок огня", "Тачки"]

Что мы узнали

Теперь мы знаем, как устроены объекты JavaScript. Они во многом

похожи на массивы и тоже нужны для хранения множества элементов

данных в одном месте. Но есть важное отличие — для доступа к эле-

ментам объекта используются строки, тогда как элементы массива

расположены по числовым индексам. Поэтому массивы отсортированы

по порядку, а объекты нет.

В дальнейших главах, когда мы больше узнаем о возможностях

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

В следующей главе речь пойдет об HTML — языке разметки веб-страниц.

4. Объекты 81

УПРА ЖНЕНИЯ

Попрактикуйтесь в использовании объектов, выполнив эти

упражнения.

#1. Подсчет очков

Представьте, что вы играете в какую-нибудь игру со своими друзь-

ями и вам нужно вести счет. Создайте для этого объект и назовите

его scores. Пусть ключами будут имена ваших друзей, а значе-

ниями — набранные ими очки (0 или больше). Счет игроков надо

будет увеличивать по мере того, как они зарабатывают новые

очки. Как вы будете менять счет игрока, хранящийся в объекте

scores?

#2. Вглубь объектов и массивов

Пускай у вас есть такой объект:

var myCrazyObject = {

My crazy

"name": "Нелепый объект",

object —

"some array": [7, 9, { purpose: "путаница", number: 123 }, 3.3],

мой нелепый

"random animal": "Банановая акула"

объект

};

Some array —

какой-то

массив

Как одной строкой JavaScript-кода извлечь из этого объекта

Purpose — цель

число 123? Проверьте свое решение, запустив его в консоли.

Random

animal —

случайное

животное

5

О С Н О В Ы H T M L

Встроенная в браузер JavaScript-консоль, которой мы до сих пор пользо-

вались, хороша, когда нужно протестировать небольшой фрагмент кода,

но для создания более масштабных программ понадобится чуть более

гибкое и универсальное средство — вроде веб-страницы со встроенным

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

ные странички на языке HTML.

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

для создания веб-страниц. Слово гипертекстовый означает, что фраг-

менты текста связаны между собой гиперссылками — то есть ссылками

в документе на другие объекты. А язык разметки — это способ встра-

ивать в текст дополнительную информацию. Разметка указывает про-

граммам (таким как браузер), как отображать текст и что с ним делать.

В этой главе я покажу, как создавать HTML-документы в текстовом

редакторе — программе, предназначенной для работы с простым тек-