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

Обратите внимание, что помимо элементов массива интерпретатор

показывает его свойство length.

Также вы можете просмотреть массив friends целиком и раскрыть

каждый его элемент, как показано на рис. 4.6.

Рис. 4.6. Все три объекта из массива friends , как отображает их интерпретатор Chrome 78 Часть I. Основы

Что полезного можно сделать с объектами

Теперь, когда вам известны разные способы создания объектов и добав-

ления к ним свойств, давайте применим эти знания на практике, введя

несколько простых программ.

Учет долгов

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

и теперь думаете, как вести учет того, кто и сколько вам должен.

Можно использовать объект как способ связать строку с числом.

Строкой в нашем случае будет имя друга, а числом — сумма, которую

вам должны:

 var owedMoney = {};



Owed money —

owedMoney["Джимми"] = 5;



одолженная

owedMoney["Анна"] = 7;



сумма денег

owedMoney["Джимми"];

5

 owedMoney["Элис"];

undefined

В строке  мы создали пустой массив owedMoney.

В строке  мы присвоили ключу "Джимми" значение 5,

а в строке  присвоили значение 7 ключу "Анна".

В строке , запросив значение, связанное с ключом

"Джимми", мы получили 5. Затем в строке , пытаясь

узнать значение, связанное с ключом "Элис", мы полу-

чили ответ undefi ned, поскольку такой ключ не задан.

Теперь представим, что Джимми занял у вас

еще немного денег (скажем, 3 доллара). Пора

обновить данные в нашем объекте, добавив 3

к долгу Джимми — используем для этого оператор

«плюс равно» (+=), речь о котором шла во второй

главе.

owedMoney["Джимми"] += 3;

owedMoney["Джимми"];

8

Это примерно то же самое, что и owedMoney["Джимми"] =

owedMoney["Джимми"] + 3. Также можно посмотреть на объект цели-

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

4. Объекты 79

owedMoney;

{ Джимми: 8, Анна: 7 }

Хранение информации о фильмах

Предположим, у вас большая коллекция кино на DVD и Blu-

ray. Правда было бы здорово хранить информацию об этих

фильмах на компьютере, чтобы в случае чего быстро найти

сведения о том или ином фильме?

Для этого можно создать объект, каждый ключ в кото-

ром — это название фильма, а каждое значение — другой объ-

ект, в котором содержится информация об этом фильме. Да,

хранящиеся в объекте значения тоже могут быть объектами!

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 предназначен специально

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

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

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

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

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