JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016

3. Массивы
65
Случайный выбор
Используя массивы, можно написать программу, которая выдает случайные варианты из заданного списка (наподобие «шара судьбы»). Однако сначала нужно разобраться, откуда нам брать случайные числа.
Использование Math.random()
Случайные числа можно генерировать с помощью специального метода
Math.random(), который при каждом вызове возвращает случайное число от 0 до 1:
Math.random();
0.8945409457664937
Math.random();
0.3697543195448816
Math.random();
0.48314980138093233
Важно помнить, что
Math.random() всегда возвращает число меньше 1, то есть никогда не возвращает собственно 1.
Если вам нужно число побольше, просто умножьте полученное из метода
Math.random() значение на подходящий коэффициент. Например, если нужно случайное число от 0 до 10, умножьте
Math.random() на 10:
Math.random() * 10;
7.648027329705656
Math.random() * 10;
9.7565904534421861
Math.random() * 10;
0.21483442978933454
Округление с помощью Math.fl oor()
И все же эти случайные значения нельзя использовать как индексы в массиве, поскольку индексы должны быть целыми числами, а не десятичными дробями. Чтобы исправить этот недостаток, нужен метод
Math.fl oor(), округляющий число до ближайшего снизу целого значения (по сути, он просто отбрасывает все знаки после запятой).
Math.floor(3.7463463);
3
Math.floor(9.9999);
9
Math.floor(0.793423451963426);
0
Math random
— случайное число
Math floor
— целая часть числа

66
Часть I. Основы
Давайте используем оба метода, чтобы получить случайный индекс.
Нужно лишь умножить
Math.random() на длину массива и затем округлить полученное число методом
Math.fl oor(). Например, если в массиве четыре элемента, это можно сделать так:
Math.floor(Math.random() * 4);
2
// может выпасть 0, 1, 2 или 3
При каждом запуске этот код будет возвращать случайное число от 0 до 3 (включая 0 и 3). Поскольку
Math.random() всегда возвращает значение меньше 1,
Math.random() * 4 никогда не вернет 4 или большее число.
Используя это случайное число как индекс, можно получить случайный элемент массива:
var randomWords = ["Взрыв", "Пещера", "Принцесса", "Карандаш"];
var randomIndex = Math.floor(Math.random() * 4);
randomWords[randomIndex];
"
Пещера "
С помощью
Math.fl oor(Math.random() * 4); мы получили случайное число от 0 до 3. Сохранив это число в переменной randomIndex, мы использовали его как индекс для получения строки из массива randomWords.
В сущности, можно сделать этот код короче, избавившись от переменной randomIndex:
randomWords[Math.floor(Math.random() * 4)];
"
Принцесса "
Программа случайного выбора вариантов
Теперь давайте создадим массив с фразами, чтобы случайным образом выбирать их с помощью написанного ранее кода. Это и будет наш компьютерный «шар судьбы»! В комментариях указаны примеры вопросов, которые можно задать нашей программе. var phrases = [
"Звучит неплохо",
"Да, это определенно надо сделать",
"Не думаю, что это хорошая идея",
"Может, не сегодня?",
"Компьютер говорит нет"
];
// Мне выпить еще молочного коктейля?
Random words
— случайные слова
Random index
— случайный индекс
Phrases
— фразы

3. Массивы
67
phrases[Math.floor(Math.random() * 5)];
"
Не думаю, что это хорошая идея "
// Мне пора делать домашнюю работу?
phrases[Math.floor(Math.random() * 5)];
"
Может, не сегодня?
”
Мы создали массив phrases, в котором хранятся различные советы.
Теперь, придумав вопрос, можно запросить случайный элемент из массива phrases, и полученный совет поможет принять решение!
Обратите внимание: поскольку в массиве с советами пять элементов, мы умножаем
Math.random() на 5. Таким образом, мы всегда получим одно из пяти значений индекса: 0, 1, 2, 3 или 4.
Генератор случайных дразнилок
Можно усовершенствовать код выбора вариантов, создав программу, которая при каждом запуске генерирует случайную дразнилку!
var randomBodyParts = ["глаз", "нос", "череп"];
var randomAdjectives = ["вонючая", "унылая", "дурацкая"];
var randomWords = ["муха", "выдра", "дубина", "мартышка", "крыса"];
// Выбор случайной части тела из массива randomBodyParts:

var randomBodyPart = randomBodyParts[Math.floor(Math.random() * 3)];
// Выбор случайного прилагательного из массива randomAdjectives:

var randomAdjective = randomAdjectives[Math.floor(Math.random() * 3)];
// Выбор случайного слова из массива randomWords:

var randomWord = randomWords[Math.floor(Math.random() * 5)];
// Соединяем случайные строки в предложение:
var randomInsult = "У тебя " + randomBodyPart + " словно " +

randomAdjective + " " + randomWord + "!!!";
randomInsult;
"
У тебя нос словно дурацкая выдра!!!
"
У нас есть три массива со словами, и в строках

,

и

мы с помощью трех индексов берем из каждого массива по случайному слову. Затем мы склеиваем их, помещая результат в переменную randomInsult, — это и есть готовая дразнилка. В строках

и

мы используем множитель 3, поскольку и в randomAdjective, и в randomBodyPart по три элемента. Аналогично в строке

мы умножаем на 5, ведь в randomWords пять элементов. Обратите внимание, что мы добавили между randomAdjective и randomWord
Random body part
— случайная часть тела
Random adjective
— случайное прилагательное
Random insult
— случайная дразнилка

68
Часть I. Основы строку с единственным пробелом. Запустите этот код несколько раз — при каждом запуске получится новая случайная дразнилка!
ПОПР ОБУ ЙТЕ !
Если хотите сделать все действительно по-умному, замените строку

на вот такую:
var randomWord = randomWords[Math.floor(Math.random() *

randomWords.length)];
В этой программе всегда нужно умножать
Math.random() на длину массива; использование randomWords.length как множителя означает, что нам не понадобится менять этот код, если длина массива изменится.
Вот еще один способ составления случайной дразнилки:
var randomInsult = ["У тебя", randomBodyPart, "словно",

randomAdjective, randomWord + "!!!"].join(" ");
"
У тебя череп словно дурацкая дубина!!!
"
В этом варианте каждое слово дразнилки — это отдельный элемент массива, и мы соединяем все эти элементы методом join с разделителем-пробелом. Лишь в одном случае пробел не нужен — между randomWord и «!!!». В этом случае мы используем оператор +, чтобы соединить строки без пробела.
Что мы узнали
Как мы теперь знаем, массивы JavaScript предназначены для хранения списка значений. Мы научились создавать массивы и работать с ними и освоили много способов доступа к их элементам.
Массивы JavaScript — один из способов хранения множества значений в одном месте. В следующей главе мы познакомимся с объектами — другим способом объединения значений в единую сущность. Для доступа к элементам объектов используются строковые ключи, а не индексы.

УПРА ЖНЕНИЯ
Чтобы укрепить знания, полученные в этой главе, выполните эти упражнения.
#1. Новые дразнилки
Сделайте генератор случайных дразнилок со своим набором слов.
#2. Изощренные дразнилки
Усовершенствуйте генератор дразнилок, чтобы он создавал дразнилки такого типа: «У тебя [часть тела] еще более [прилагательное], чем [часть тела животного] у [животное]».
Подсказка: нужно будет создать еще один массив.
#3. Оператор + или join?
Сделайте две версии своего генератора дразнилок: одна пусть использует для составления дразнилки оператор +, а другая создает массив со словами и соединяет их через пробел с помощью join. Какой вариант вам больше нравится и почему?
#4. Соединение чисел
Как с помощью метода join превратить массив [3, 2, 1] в строку "3 больше, чем 2 больше, чем 1"?

70 4
О Б Ъ Е К Т Ы
Объекты JavaScript очень похожи на массивы, но для доступа к элементам объектов используются строки, а не числа. Эти строки называют
ключами, или свойствами, а элементы, которые им соответствуют, —
значениями. Вместе эти фрагменты информации образуют пары «ключ-
значение». Причем если массивы используются главным образом как списки, хранящие множество элементов, то объекты часто применяют как одиночные сущности с множеством характеристик, или атрибутов.
Например, в третьей главе мы создали несколько массивов, хранящих названия разных животных. Но что если нужно хранить набор различных сведений об одном конкретном животном?
Создание объектов
Для хранения всевозможной информации об одном животном подойдет
JavaScript-объект. Вот пример объекта, где хранятся сведения о трехногой кошке по имени Гармония.
var cat = {
"legs": 3,
"name": "Гармония",
"color": "Черепаховый"
};
Мы создали переменную под названием cat и присвоили ей объект с тремя парами «ключ-значение» (лапы, имя, окрас). При создании объекта используются фигурные скобки {} вместо квадратных, к которым
Cat
— кошка
Legs
— ноги
Color
— цвет, окрас

71
мы привыкли, создавая массивы. Внутри фигурных скобок можно вводить пары «ключ-значение», а вместе скобки и пары значений называются литералом объекта. Литерал объекта — это быстрый способ создания объекта вместе с его содержимым.
!
Мы уже встречались с литералами массивов (например, ["a","б",
"в"]), числовыми литералами (например, 37), строковыми литера-
лами (например, "лось") и булевыми литералами (true и false).
Литерал — это когда значение записывается сразу и целиком,
а не составляется постепенно, шаг за шагом.
Например, чтобы создать массив с числами от 1 до 3, можно вве-
сти литерал массива [1,2,3]. Альтернативный способ — создать
пустой массив и методом push добавить в него значения 1, 2 и 3.
Не всегда заранее известно, что за данные будут храниться в мас-
сиве или объекте, поэтому создавать массивы и объекты с помощью
одних лишь литералов не получится.
На рис. 4.1 показан базовый синтаксис создания нового объекта.
При создании объекта ключ записывается перед двоеточием (:), а значение — после. Это двоеточие напоминает знак «равно», поскольку значения, стоящие слева, присваиваются именам (ключам), стоящим справа, что похоже на создание переменных со значениями. Все пары
«ключ-значение» должны быть разделены запятыми — в нашем примере эти запятые стоят в конце строк. И обратите внимание, что после завершающей пары «ключ-значение» (
"color": "Черепаховый") запятую ставить не нужно — следом за этой парой ставится закрывающая фигурная скобка.
Ключи без кавычек
Создавая первый объект, мы писали имена ключей в кавычках, однако это не обязательно. Следующая запись тоже является допустимым литералом объекта:
Key
— ключ
{
"key1"
:
99
}
Ключ, обязательно строковый
Значение любого типа
Рис. 4.1. Общий синтаксис создания объекта

72
Часть I. Основы var cat = {
legs: 3,
name: "Гармония",
color: "Черепаховый"
};
JavaScript знает, что ключи всегда строковые, поэтому можно обходиться без кавычек. В этом случае имена ключей должны соответствовать тем же правилам, что и имена переменных: например, в них не должно быть пробелов. Но если ключ указан в кавычках, пробелы в его имени допустимы: var cat = {
legs: 3,
"full name": "Гармония Филомена Уси-Пусечка Морган",
color: "Черепаховый"
};
Помните, что, хотя ключ всегда является строковым (в кавычках он записан или без), значение, соответствующее этому ключу, может быть любого типа — даже переменной, в которой хранятся данные.
Кроме того, весь объект можно записать одной строкой, хотя читать такую программу будет, пожалуй, не слишком удобно:
var cat = { legs: 3, name: "Гармония", color: "Черепаховый" };
Доступ к значениям внутри объектов
Хранящиеся в объектах значения можно получить с помощью квадратных скобок — так же, как элементы массива. Единственное различие в том, что вместо индекса (число) используется ключ (строка).
cat["name"];
"
Гармония "
Точно так же, как необязательны кавычки при записи литерала объекта, их можно опускать и при доступе к значениям по ключу. Однако в этом случае код будет немного другим:
Full name
— полное имя

4. Объекты
73
cat.name;
"
Гармония "
Такую запись называют точечной нотацией. Вместо того чтобы писать имя ключа в кавычках внутри квадратных скобок, мы просто ставим точку, после которой пишем имя ключа, без кавычек. И, аналогично ключам без кавычек при записи литерала, такой прием сработает, только если ключ не содержит специальных символов — например, пробелов.
Теперь предположим, что вы хотите узнать, какие вообще ключи есть у данного объекта. Для этого в JavaScript есть удобное средство — команда
Object.keys():
var dog = { name: "Оладушек", age: 6, color: "белый",

bark: "Гав тяф тяф!" };
var cat = { name: "Гармония", age: 8, color: "черепаховый" };
Object.keys(dog);
["
name
", "
age
", "
color
", "
bark
"]
Object.keys(cat);
["
name
", "
age
", "
color
"]
Object.keys(anyObject) возвращает массив, содержащий все ключи объекта anyObject.
Добавление элементов объекта
Пустой объект похож на пустой массив, только вместо квадратных скобок при его создании используются фигурные:
var object = {};
Добавлять элементы объекта можно так же, как элементы массива, — но используя строки вместо чисел:
var cat = {};
cat["legs"] = 3;
cat["name"] = "Гармония";
cat["color"] = "Черепаховый";
cat;
{ color:
"
Черепаховый ", legs:
3
, name:
"
Гармония " }
Мы начали с пустого объекта под названием cat, а затем поочередно добавили к нему три пары «ключ-значение». Потом мы ввели cat;,
Object key
— ключ объекта
Dog
— пес
Bark
— лай

74
Часть I. Основы и браузер отобразил содержимое объекта. Тут надо отметить, что разные браузеры могут показывать объекты по-разному. Например, Chrome
(на момент написания этих строк) выводит объект cat в консоли следующим образом:
Object {
legs
: 3
,
name
:
"
Гармония ",
color
:
"
Черепаховый "}
Chrome перечисляет ключи в таком порядке —
(legs, name, color), но другие браузеры могут выводить их в другой очередности. Дело в том, что JavaScript хранит ключи объектов, не упорядочивая их.
В массивах элементы расположены строго один за другим: индекс 0 перед индексом 1, индекс 3 после индекса 2; однако в случае объектов неясно, как расположить элементы друг относительно друга. Должен ли ключ color стоять перед legs или после? «Правильного» ответа на этот вопрос нет, поэтому объекты хранят свои ключи без конкретной очередности, в результате чего разные браузеры показывают ключи в разном порядке. Так что никогда не полагайтесь в своих программах на тот или иной порядок ключей.
Добавление ключей через точку
Новые ключи также можно добавлять через точечную нотацию. Давайте перепишем этим способом предыдущий пример, то есть создадим пустой объект и заполним его данными:
var cat = {};
cat.legs = 3;
cat.name = "Гармония";
cat.color = "Черепаховый";
Если обратиться к несуществующему свойству объекта, JavaScript вернет специальное значение undefi ned, сообщая таким образом: «здесь ничего нет». Например:
var dog = {
name: "Оладушек",
legs: 4,
isAwesome: true
};
dog.isBrown;
undefined
Is awesome
— классный
Is brown
— коричневый

4. Объекты
75
Здесь мы определили три свойства объекта dog: name, legs и isAwesome.
Свойства isBrown среди них нет, поэтому dog.isBrown возвращает undefi ned.
Массивы объектов
До этого момента мы рассматривали только массивы и объекты, в которых содержатся данные простых типов, такие как числа и строки. Однако ничто не мешает сделать элементом массива или объекта другой массив или объект. Например, так может выглядеть массив с объектами, описывающими динозавров:
var dinosaurs = [
{ name: "Тираннозавр рекс", period: "Верхнемеловой" },
{ name: "Стегозавр", period: "Верхнеюрский" },
{ name: "Платеозавр", period: "Триасовый" }
];
Получить сведения о первом динозавре можно уже известным нам способом — указав индекс в квадратных скобках:
dinosaurs[0];
{ name:
"
Тираннозавр рекс ", period:
"
Верхнемеловой " }
А если нужно только название первого динозавра, достаточно указать ключ объекта в еще одних квадратных скобках, следом за индексом:
dinosaurs[0]["name"];
"
Тираннозавр рекс "
Другой вариант — воспользоваться точечной нотацией:
dinosaurs[1].period;
"
Верхнеюрский "
!
Точечную нотацию можно использовать только с объектами, для
массивов она не подходит.
Period
— период

76
Часть I. Основы
Массив друзей
Давайте рассмотрим более сложный пример — массив объектов со сведениями о друзьях, где в каждый из объектов вложено по еще одному массиву. Сначала создадим объекты, а затем поместим их в массив.
var anna = { name: "Анна", age: 11, luckyNumbers: [2, 4, 8, 16] };
var dave = { name: "Дэйв", age: 5, luckyNumbers: [3, 9, 40] };
var kate = { name: "Кейт", age: 9, luckyNumbers: [1, 2, 3] };
Мы создали три объекта, сохранив их в переменных anna, dave и kate. У каждого из этих объектов есть по три свойства: name, age и luckyNumbers. Каждому ключу name соответствует строковое значение, ключу age — числовое, а ключу luckyNumbers — массив, содержащий несколько чисел.
Теперь создадим массив друзей:
var friends = [anna, dave, kate];
Итак, в переменной friends находится массив с тремя элементами: anna, dave и kate (каждый из них является объектом). Мы можем получить любой из объектов по его индексу в массиве:
friends[1];
{ name: "
Дэйв ", age:
5
, luckyNumbers:
Array[3] }
Здесь мы извлекли из массива второй объект, dave (по индексу 1).
Вместо массива luckyNumbers Chrome напечатал Array[3], что означает «это массив с тремя элементами» (можно изучить содержимое этого массива с помощью Chrome, см. раздел «Исследование объектов в консоли»
в объекте, указав индекс объекта в квадратных скобках, поставив точку и написав соответствующий ключ: friends[2].name
"
Кейт "
Этот код запрашивает элемент по индексу 2 (что соответствует переменной kate), а затем — свойство этого объекта, хранящееся по ключу "name" (это "Кейт"). Можно даже получить значение из массива, находящегося в объекте, который, в свою очередь, находится в массиве friends:
Lucky numbers
— счастливые числа
Friends
— друзья
Array
— массив

4. Объекты
77
friends[0].luckyNumbers[1];
4
Использованные в этом примере индексы показаны на рис. 4.2. friends[0] — это элемент по индексу 0 из массива friends, то есть объект anna.friends[0].luckyNumbers — это массив [2, 4, 8, 16] из объекта anna. И наконец, friends[0].luckyNumbers[1] — это значение по индексу 1 из массива luckyNumbers — то есть число 4.
Исследование объектов в консоли
Chrome позволяет изучать содержимое объектов, показанных в консоли.
Например, если вы введете friends[1];
Chrome отобразит то, что показано на рис. 4.3.
var friends = [
anna
, dave, kate];
friends[0]
{ name: "Аннa", age: 11, luckyNumbers:
[2,
4
, 8, 16]
};
friends[0].luckyNumbers friends[0].luckyNumbers[1]
Рис. 4.2. Доступ ко вложенным значениям
Рис. 4.3. Отображение объекта в интерпретаторе Chrome

78
Часть I. Основы
Треугольник слева обозначает, что объект можно раскрыть. Для этого кликните мышкой по объекту, и увидите то, что показано на рис. 4.4.
Рис. 4.4. Раскрытие объекта
Массив luckyNumbers также можно раскрыть, кликнув по нему
(рис. 4.5).
Рис. 4.5. Раскрытие вложенного в объект массива
Не беспокойтесь о свойствах с названием
__proto __, они относятся к прототипу объекта. Мы поговорим о прототипах позже, в главе 12.
Обратите внимание, что помимо элементов массива интерпретатор показывает его свойство length.
Также вы можете просмотреть массив friends целиком и раскрыть каждый его элемент, как показано на рис. 4.6.
Рис. 4.6. Все три объекта из массива
friends, как отображает их интерпретатор Chrome
Length
— длина

4. Объекты
79
Что полезного можно сделать с объектами
Теперь, когда вам известны разные способы создания объектов и добавления к ним свойств, давайте применим эти знания на практике, введя несколько простых программ.
Учет долгов
Предположим, вы решили открыть банк. Вы одолжили друзьям денег и теперь думаете, как вести учет того, кто и сколько вам должен.
Можно использовать объект как способ связать строку с числом.
Строкой в нашем случае будет имя друга, а числом — сумма, которую вам должны:

var owedMoney = {};

owedMoney["Джимми"] = 5;

owedMoney["Анна"] = 7;

owedMoney["Джимми"];
5

owedMoney["Элис"];
undefined
В строке

мы создали пустой массив owedMoney.
В строке

мы присвоили ключу "Джимми" значение 5, а в строке

присвоили значение 7 ключу "Анна".
В строке

, запросив значение, связанное с ключом "Джимми", мы получили 5. Затем в строке

, пытаясь узнать значение, связанное с ключом "Элис", мы получили ответ undefi ned, поскольку такой ключ не задан.
Теперь представим, что Джимми занял у вас еще немного денег (скажем, 3 доллара). Пора обновить данные в нашем объекте, добавив 3 к долгу Джимми — используем для этого оператор
«плюс равно»
(+=), речь о котором шла во второй главе. owedMoney["Джимми"] += 3;
owedMoney["Джимми"];
8
Это примерно то же самое, что и owedMoney["Джимми"] = owedMoney["Джимми"] + 3. Также можно посмотреть на объект целиком, чтобы выяснить, сколько денег задолжал каждый из друзей:
Owed money
— одолженная сумма денег

80
Часть I. Основы owedMoney;
{
Джимми:
8
,
Анна:
7
}
Хранение информации о фильмах
Предположим, у вас большая коллекция кино на DVD и Bluray. Правда было бы здорово хранить информацию об этих фильмах на компьютере, чтобы в случае чего быстро найти сведения о том или ином фильме?
Для этого можно создать объект, каждый ключ в котором — это название фильма, а каждое значение — другой объект, в котором содержится информация об этом фильме. Да, хранящиеся в объекте значения тоже могут быть объектами! var movies = {
"В поисках Немо": {
releaseDate: 2003,
duration: 100,
actors: ["Альберт Брукс", "Эллен Дедженерес",

"Александр Гоулд"],
format: "DVD"
},
"Звездные войны: Эпизод VI — Возвращение джедая": {
releaseDate: 1983,
duration: 134,
actors: ["Марк Хэмилл", "Харрисон Форд", "Кэрри Фишер"],
format: "DVD"
},
"Гарри Поттер и Кубок огня": {
releaseDate: 2005,
duration: 157,
actors: ["Дэниел Рэдклифф", "Эмма Уотсон", "Руперт Гринт"],
format: "Blu-ray"
}
};
Наверное, вы заметили, что названия фильмов (ключи внешнего объекта) я поставил в кавычки, но ключи внутренних объектов записал без кавычек. Дело в том, что в названиях нужны пробелы — иначе пришлось бы писать нечто вроде ЗвездныеВойныЭпизодVIВозвращениеДжедая, а это уж совсем нелепо. Для ключей вложенных объектов кавычки необязательны, поэтому я их и не ставил. Код выглядит аккуратнее, когда в нем нет излишних знаков пунктуации.
Теперь, если вы захотите что-то узнать о фильме, это легко сделать:
Movies
— фильмы
Release date
— дата выхода
Duration
— продолжительность
Actors
— в ролях
Format
— формат

4. Объекты
81
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 — языке разметки веб-страниц.

УПРА ЖНЕНИЯ
Попрактикуйтесь в использовании объектов, выполнив эти упражнения.
#1. Подсчет очков
Представьте, что вы играете в какую-нибудь игру со своими друзьями и вам нужно вести счет. Создайте для этого объект и назовите его scores. Пусть ключами будут имена ваших друзей, а значениями — набранные ими очки (0 или больше). Счет игроков надо будет увеличивать по мере того, как они зарабатывают новые очки. Как вы будете менять счет игрока, хранящийся в объекте scores?
#2. Вглубь объектов и массивов
Пускай у вас есть такой объект:
var myCrazyObject = {
"name": "Нелепый объект",
"some array": [7, 9, { purpose: "путаница", number: 123 }, 3.3],
"random animal": "Банановая акула"
};
Как одной строкой JavaScript-кода извлечь из этого объекта число 123? Проверьте свое решение, запустив его в консоли.
My crazy object
— мой нелепый объект
Some array
— какой-то массив
Purpose
— цель
Random animal
— случайное животное

83 5
О С Н О В Ы H T M L
Встроенная в браузер JavaScript-консоль, которой мы до сих пор пользовались, хороша, когда нужно протестировать небольшой фрагмент кода, но для создания более масштабных программ понадобится чуть более гибкое и универсальное средство — вроде веб-страницы со встроенным
JavaScript-кодом. В этой главе мы как раз и научимся создавать несложные странички на языке HTML.
Гипертекстовый язык разметки HTML предназначен специально для создания веб-страниц. Слово гипертекстовый означает, что фрагменты текста связаны между собой гиперссылками — то есть ссылками в документе на другие объекты. А язык разметки — это способ встраивать в текст дополнительную информацию. Разметка указывает программам (таким как браузер), как отображать текст и что с ним делать.
В этой главе я покажу, как создавать HTML-документы в текстовом
редакторе — программе, предназначенной для работы с простым текстом без форматирования, в отличие от текстовых процессоров вроде
Microsoft Word. Документы текстовых процессоров содержат формати-
рованный текст (с различными типами и размерами шрифтов, цветами и т. п.), и устроены эти программы так, чтобы форматирование было легко менять. Кроме того, многие текстовые процессоры позволяют вставлять в текст картинки и другие графические элементы.
Простой же текст является только текстом — без цветов, стилей, размеров и т. д. Вставить в такой текст картинку не выйдет, разве только составить ее из символов — скажем, как этого котика справа.
/\_/\
=( °w° )=
) ( //
(__ __)//

84
Часть I. Основы
Текстовые редакторы
Мы будем создавать HTML-документы в кросс-платформенном (совместимом с Windows, Mac OS и Linux) редакторе Sublime Text. Скачать
Sublime Text можно бесплатно, однако спустя некоторое время вас попросят приобрести лицензию. На случай, если вам такой вариант не по нраву, я отобрал несколько полностью бесплатных альтернатив.
Хотя в этой главе я буду ориентироваться на Sublime Text, работа с другими редакторами будет не сильно отличаться — благодаря относительной простоте текстовых редакторов как таковых.
• Gedit — кросс-платформенный текстовый редактор, часть проекта GNOME (https://wiki.gnome.org/Apps/Gedit/).
• Для Microsoft Windows хорошей альтернативой будет
Notepad++ (https://notepad-plus-plus.org/).
• В Mac OS вы можете воспользоваться TextWrangler
(https://www.barebones.com/products/textwrangler/).
для каждой из операционных систем, но написаны просто и понятно.
В случае каких-либо проблем загляните в раздел Support («Поддержка») на сайте приложения.
ПОДСВЕ ТК А СИНТАКСИС А
Sublime Text будет отображать ваши программы в цвете — это называется
подсветкой синтаксиса. Смысл в том, что программы легче читать, когда разные конструкции языка выделены разными цветами. Например, строки могут отображаться зеленым цветом, а ключевые слова вроде var — оранжевым.
Sublime Text позволяет выбрать одну из множества схем подсветки.
В этой книге используется схема IDLE — вы можете включить ее, войдя в меню
Preferences
Color Scheme и выбрав там IDLE, чтобы у вас в редакторе программы выглядели так же, как примеры кода в этой главе и далее.
Наш первый HTML-документ
Установив Sublime Text, запустите его и создайте новый файл, выбрав
File
New File. Затем выберите File
Save, чтобы сохранить новый, пустой файл; назовите его page.html и сохраните на рабочий стол.
Настало время писать HTML-код. Введите в файл page.html следующий текст:
Page
— страница

5. Основы HTML
85

перейти в каталог файлов