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

26
Часть I. Основы
Пример булева значения:
true;
С данными разных типов и обращаться следует по-разному.
Например, перемножить два числа можно, а перемножить две строки — нет. Зато, имея строку, можно выделить пять ее первых символов. Взяв два булевых значения, можно проверить, являются ли они оба «истиной»
(
true). Вот все эти действия на примере:
99 * 123;
12177
"Вот длинная строка".slice(0, 3);
"
Вот "
true && false;
false
Любые данные в JavaScript — не более чем сочетание этих основных типов. Далее мы по очереди рассмотрим каждый тип данных и изучим различные способы работы с ними.
!
Наверное, вы заметили, что все эти команды оканчиваются
на точку с запятой (;). Этим символом обозначают конец каждой
отдельной команды или инструкции языка JavaScript — примерно
так же, как точка отмечает конец предложения.
Числа и операторы
JavaScript позволяет выполнять основные математические операции, такие как сложение, вычитание, умножение и деление. Для их записи используются символы +, −, * и /, которые называют
опе раторами.
Консоль JavaScript можно использовать как калькулятор. Один из примеров — сложение 3 и 4 — нам уже знаком. Давайте вычислим что-нибудь посложнее: сколько будет 12345 плюс 56789?
12345 + 56789;
69134
Посчитать это в уме не так уж просто, а JavaScript мгновенно справился с задачей.

2. Типы данных и переменные
27
Можно сложить несколько чисел с помощью нескольких знаков «плюс»:
22 + 33 + 44;
99
Также JavaScript умеет вычитать...
1000 - 17;
983
умножать (с помощью символа «звездочка»)...
123 * 456;
56088
и делить (с помощью косой черты — слэша)...
12345 / 250;
49.38
Кроме того, можно объединять эти простые операции, составляя более сложные выражения, вроде такого:
1234 + 57 * 3 - 31 / 4;
1397.25
Есть один нюанс — результат вычислений зависит от порядка, в котором JavaScript выполняет отдельные операции. В математике существует правило, по которому умножение и деление выполняются прежде, чем сложение и вычитание, и JavaScript ему следует.
Порядок, в котором интерпретатор JavaScript выполняет эти операции, показан на рис. 2.1. Сначала он умножает
57 * 3, получая 171 (выделено красным). Затем делит 31 / 4, получая 7.75 (выделено синим). Затем складывает 1234 + 171, получая 1405 (выделено зеленым). И наконец, вычитает
1405 − 7.75, что дает 1397.25 — окончательный результат.
Но как быть, если вы хотите выполнить сложение и вычитание до умножения и деления? Для примера предположим, что у вас есть 1 брат, 3 сестры и 8 карамелек, которые
1397.25 1234 + 171
-
7.75 1234 +
171
-
31 / 4 1234 +
57 * 3
- 31 / 4 1405
- 7.75
Рис. 2.1. Очередность выполнения
операций: умножение, деление,
сложение, вычитание

28
Часть I. Основы вы решили поровну разделить между ними (свою долю вы уже прикарманили). Нужно разделить 8 на общее количество братьев и сестер.
Попытаемся это сделать:
8 / 1 + 3;
11
Это не может быть верным ответом! Не получится дать каждому родственнику по 11 карамелек, если у вас всего-то
8 конфет! Проблема в том, что JavaScript выполняет деление прежде, чем сложение, то есть он делит 8 на 1 (что равно 8) и затем прибавляет 3, получая в результате 11. Чтобы исправить эту ошибку, заставим JavaScript сначала выполнить сложение, воспользовавшись скобками:
8 / (1 + 3);
2
Так гораздо лучше — вышло по две карамельки каждому из родственников. Скобки вынудили JavaScript сложить 1 и 3 до деления 8 на 4.
ПОПР ОБУ ЙТЕ !
Предположим, ваша подруга пытается подсчитать с помощью JavaScript, сколько ей нужно купить воздушных шаров. Она устраивает вечеринку и хочет, чтобы каждый из гостей смог надуть по 2 шарика. Сначала было приглашено 15 человек, но потом ваша подруга позвала еще 9.
Она написала такой код:
15 + 9 * 2;
33
Однако ответ, судя по всему, неверен.
Где надо поставить скобки, чтобы JavaScript сначала складывал, а потом умножал, и сколько шариков нужно вашей подруге на самом деле?
Переменные
Значениям в JavaScript можно давать имена, используя переменные.
Переменная похожа на ящичек, в который помещается лишь один предмет. Чтобы положить туда что-то еще, прежнее содержимое придется заменить.
Чтобы создать новую переменную, используйте ключевое слово var, после которого укажите имя переменной. Ключевое слово — это слово,

2. Типы данных и переменные
29
обладающее для JavaScript особым значением. В данном случае, когда
JavaScript встречает слово var, он понимает, что следом указано имя новой переменной. Например, вот как создать переменную с именем nick:
var nick;
undefined
Мы создали новую переменную под названием nick. В ответ консоль выдала undefi ned — «значение не определено». Однако это не ошибка!
JavaScript всегда так делает, если команда не возвращает какого-либо значения. Вы спросите, а что такое «возвращать значение»? Вот пример: когда вы ввели
12345 + 56789;, консоль вернула значение 69134. Однако в JavaScript команда создания переменной никакого значения не возвращает, поэтому интерпретатор печатает undefi ned.
В этом примере и дальше мы будем давать переменным англоязычные имена, потому что английский — основной язык всей IT-области и программы принято писать только латиницей (кроме комментариев и строковых значений). Использовать русскоязычные имена переменных — это как если при составлении математических уравнений вместо x и y вы использовали бы русские буквы. Можно, но не принято.
Итак, чтобы задать переменной значение, используйте знак «равно»:
var age = 12;
undefined
Задание значения переменной называют присваиванием (здесь мы присваиваем значение 12 переменной age). И опять в консоли появляется undefi ned, поскольку мы только что создали новую переменную.
(В дальнейших примерах я буду пропускать это undefi ned.)
Теперь в интерпретаторе есть переменная age, которой присвоено значение 12. И если ввести в консоли имя age, интерпретатор выдаст значение этой переменной:
age;
12
Здорово! При этом значение переменной не высечено в камне (пере-
менные потому так и зовутся, что могут менять значения), и, если вам вздумается его обновить, просто используйте знак «равно» еще раз. age = 13;
13
Undefined
— значение не определено
Аge
— возраст

30
Часть I. Основы
На этот раз я не использовал ключевое слово var, поскольку переменная age уже существует. Писать var нужно только при создании переменной, а не при ее использовании. И обратите внимание: поскольку мы не создавали новой переменной, команда присваивания вернула значение 13, которое и было напечатано в следующей строке.
Вот чуть более сложный пример — решение задачи про карамельки без помощи скобок:
var numberOfSiblings = 1 + 3;
var numberOfCandies = 8;
numberOfCandies / numberOfSiblings;
2
Сначала мы создали переменную с именем numberOfSiblings
(количество братьев и сестер) и присвоили ей значение выражения
1 + 3 (которое JavaScript вычислил, получив 4). Потом мы создали переменную numberOfCandies (количество карамелек) и присвоили ей значение 8. И наконец, мы ввели: numberOfCandies / numberOfSiblings. Поскольку переменная numberOfCandies содержит значение 8, а numberOfSiblings — 4, JavaScript вычислил, сколько будет 8 / 4, вернув в результате 2.
Имена переменных
Вводя имена переменных, будьте внимательны и не допускайте опечаток. Даже если вы перепутаете строчные и заглавные буквы, интерпретатор JavaScript не поймет, чего вы от него хотите! Например, если вы случайно введете имя numberOfCandies со строчной буквой c, возникнет ошибка:
numberOfcandies / numberOfSiblings;
ReferenceError: numberOfcandies is not defined
Увы, JavaScript следует вашим указаниям буквально. Если вы неправильно ввели имя переменной, JavaScript не поймет, что вы имели в виду, и выдаст сообщение об ошибке.
Еще один нюанс именования переменных в JavaScript — в именах не должно быть пробелов, из-за чего они могут оказаться сложными для чтения. Если бы я назвал переменную numberofcandies, без заглавных букв, читать программу стало бы труднее, поскольку неясно, где в этом имени заканчиваются отдельные слова.
Один из обычных способов решения этой проблемы — писать каждое слово с заглавной буквы:
NumberOfCandies. Такую манеру именования
Number of siblings
— число братьев и сестер
Number of candies
— число конфет
Reference error
— ошибка данных

2. Типы данных и переменные
31
называют верблюжьей записью, поскольку выпирающие заглавные буквы напоминают верблюжьи горбы.
Имена переменных принято начинать со строчной буквы, поэтому с заглавной буквы обычно пишут все слова имени, кроме самого первого: numberOfCandies. В этой книге я также использую эту форму верблюжьей записи; впрочем, вы можете называть свои переменные как вам угодно!
Создание новых переменных на основе вычислений
Можно создавать новые переменные, выполняя математические действия с переменными, созданными ранее.
Давайте с помощью переменных выясним, сколько секунд в году и каков ваш возраст в секундах! Но для начала разберемся, сколько секунд в одном часе.
Сколько секунд в часе
Сначала создадим две новые переменные — secondsInAMinute
(количество секунд в минуте) и minutesInAHour (количество минут в часе) — и присвоим им обеим значение 60 (поскольку, как мы знаем, в минуте 60 секунд, а в часе 60 минут). Теперь создадим переменную secondsInAHour (количество секунд в часе), и пусть ее значение равняется secondsInAMinute умножить на minutesInAHour. И наконец в строке  введем secondsInAHour, что означает «покажи мне содержимое переменной secondsInAHour», и JavaScript тут же выдаст ответ: 3600.
var secondsInAMinute = 60;
var minutesInAnHour = 60;
var secondsInAnHour = secondsInAMinute * minutesInAnHour;

secondsInAnHour;
3600
Сколько секунд в сутках
Теперь создадим переменную hoursInADay (количество часов в сутках) и присвоим ей значение 24. Затем создадим переменную secondsInADay (количество секунд в сутках), и пусть она равняется secondsInAHour умножить на hoursInADay. Запросив в строке  значение secondsInADay, получим 86 400 — именно столько секунд в сутках.
Seconds in a minute
— секунд в минуте
Minutes in a hour
— минут в часе
Hours in a day
— часов в день

32
Часть I. Основы var hoursInADay = 24;
var secondsInADay = secondsInAnHour * hoursInADay;

secondsInADay;
86400
Сколько секунд в году
И наконец, создадим переменные daysInAYear (количество дней в году) и secondsInAYear (количество секунд в году): daysInAYear присвоим значение 365, а secondsInAYear пусть равняется secondsInADay умножить на daysInAYear. Запрашиваем значение secondsInAYear и видим, что это число 31 536 000 (более 31 миллиона секунд!).
var daysInAYear = 365;
var secondsInAYear = secondsInADay * daysInAYear;
secondsInAYear;
31536000
Возраст в секундах
Теперь, зная, сколько секунд в году, вы можете запросто узнать свой возраст в секундах (с точностью до последнего дня рождения). К примеру, когда я пишу эти строки, мне 29 лет:
var age = 29;
age * secondsInAYear;
914544000
Чтобы вычислить свой возраст в секундах, введите тот же самый код, но замените значение переменной age на ваш возраст. Или просто замените эту переменную на число, соответствующее вашему возрасту:
29 * secondsInAYear;
914544000
Смотрите-ка, мне исполнилось больше 900 миллионов секунд!
А вам?
Инкремент и декремент
Вам как программисту понадобится увеличивать или уменьшать значения числовых переменных на единицу. Например, у вас в программе может быть переменная для подсчета, сколько раз за день вам сказали
Days in a year
— дней в году

2. Типы данных и переменные
33
«Дай пять!». И при каждом новом приветствии эту переменную надо будет увеличить на 1.
Увеличение на 1 называют инкрементом, а уменьшение на 1 —
декрементом. Выполняются инкремент и декремент с помощью операторов
++ и --.
var highFives = 0;
++highFives;
1
++highFives;
2
--highFives;
1
После выполнения оператора
++ значение highFives (количество приветствий) увеличится на 1, а после выполнения оператора
-- уменьшится на 1. Также эти операторы можно писать после имени переменной — эффект будет прежним, однако после выполнения такой команды
JavaScript вернет первоначальное значение переменной, каким оно было
до инкремента или декремента.
highFives = 0;
highFives++;
0
highFives++;
1
highFives;
2
В этом примере мы сначала обнулили значение highFives.
Команда highFives++ увеличивает переменную на 1, но число, которое печатает после этого JavaScript, является значением до инкремента. Однако, запрашивая значение highFives в самом конце (после двух инкрементов), мы получаем 2.
+= (плюс-равно) и –= (минус-равно)
Чтобы увеличить значение переменной на заданное число, можно написать такой код:
var x = 10;
x = x + 5;
x;
15
High fives
— дай пять!

34
Часть I. Основы
Сначала мы создаем переменную x и даем ей значение 10. Затем присваиваем x значение x + 5 — то есть используем старое значение x, чтобы получить новое значение. Таким образом, выражение x = x + 5 по сути означает «увеличить x на 5».
В арсенале JavaScript есть более простой способ увеличения или уменьшения переменной на заданную величину: это операторы
+= и −=.
Пусть у нас есть переменная x, тогда команда x += 5 означает то же самое, что и x = x + 5. Оператор −= работает аналогично, то есть x −= 9 соответствует x = x – 9 (уменьшить x на 9). С помощью этих операторов можно, например, управлять подсчетом очков в игре:
var score = 10;
score += 7;
17
score -= 3;
14
В этом примере мы сначала присваиваем переменной score (счет игры) начальное количество очков (10). Потом, победив монстра, мы увеличиваем счет на 7 очков с помощью оператора
+= (score += 7 соответствует score = score + 7). Поскольку изначально в score было число 10, а 10 + 7 = 17, этой командой мы установили счет в 17 очков.
После победы над монстром мы столкнулись с метеоритом, и счет уменьшился на 3 очка. Опять же, score -= 3 это то же самое, что и score = score - 3. Поскольку перед этим в score было 17, score - 3 равняется 14; это число и будет новым значением score.
ПОПР ОБУ ЙТЕ !
Есть и другие операторы, похожие на
+= и -=. Например, *= и /=. Как вы думаете, для чего они? Опробуйте их в деле с воздушными шариками:
var balloons = 100;
balloons *= 2;
???
Что делает команда balloons *= 2? А теперь попробуйте такой код:
var balloons = 100;
balloons /= 4;
???
Что делает команда balloons /= 4?
Score
— счет
Balloon
— воздушный шар

2. Типы данных и переменные
35
Строки
До сих пор мы имели дело только с числами. Пора познакомиться с еще одним типом данных — со строками. В JavaScript (как и в большинстве других языков программирования) строка является набором символов — букв, цифр, знаков пунктуации и пробелов. Чтобы JavaScript знал, где начинается и заканчивается строка, ее берут в кавычки. Вот классический пример с фразой «Привет, мир!»:
"Привет, мир!";
"Привет, мир!"
Чтобы создать строку, поставьте знак двойной кавычки (
"
), затем введите какой-нибудь текст и закройте строку еще одной двойной кавычкой. Можно пользоваться и одинарными кавычками (
'
), однако, чтобы не путаться, все строки в этой книге будут в двойных кавычках.
Строки можно хранить в переменных, так же как числа:
var myAwesomeString = "Что-то ОЧЕНЬ крутое!!!";
Также ничто не мешает присвоить строковое значение переменной, где раньше хранилось число:
var myThing = 5;
myThing = "это строка";
"это строка"
А что если записать в кавычках число? Строка это будет или число?
В JavaScript строка остается строкой, даже если там хранятся цифровые символы. Например:
var numberNine = 9;
var stringNine = "9";
В переменной numberNine (число девять) хранится число, а в переменной stringNine (строка девять) — строка. Чтобы выяснить, в чем их различие, посмотрим, как они реагируют на сложение:
My awesome string
—
Моя крутая строка
My thing
— моя штука
Number nine
— номер девять
String nine
— строка девять

36
Часть I. Основы numberNine + numberNine;
18
stringNine + stringNine;
"
99
"
Сложив числовые значения 9 и 9, мы получили 18. Однако при использовании оператора + со строками "9" и "9" эти строки просто склеиваются воедино, образуя "99".
Объединение строк
Как мы только что убедились, оператор + можно использовать и со строками, однако действует он при этом совсем иначе, чем с числами. С помощью оператора + строки можно объединять: результатом будет новая строка, состоящая из первой строки, к концу которой присоединена вторая: var greeting = "Привет";
var myName = "Ник";
greeting + myName;
"
ПриветНик "
Здесь мы создали две переменные (
greeting и myName) и присвоили каждой из них строковое значение (
"Привет" и "Ник" соответственно).
При сложении этих переменных строки объединяются, образуя новую строку —
"ПриветНик".
Впрочем, не все тут идеально — между "Привет" и "Ник" должен стоять пробел и запятая. JavaScript не ставит пробелов по собственной инициативе, зато его можно попросить его об этом, добавив пробел к одной из первоначальных строк:

var greeting = "Привет, ";
var myName = "Ник";
greeting + myName;
"
Привет, Ник "
Дополнительный пробел перед закрывающей кавычкой в строке  дает пробел в середине результирующей строки.
Помимо их объединения, со строками можно выполнять множество разных действий. Вот несколько примеров.
Greeting
— приветствие
My name
— мое имя

2. Типы данных и переменные
37
Как узнать длину строки
Чтобы узнать длину строки, достаточно добавить к ее концу
.length:
"Суперпупердлиннаястрока".length;
23
Можно добавлять
.length к концу как самой строки, так и переменной, содержащей строку: var java = "Java";
java.length;
4
var script = "Script";
script.length;
6
var javascript = java + script;
javascript.length;
10
Здесь мы присвоили строковое значение "Java" переменной java, а значение "Script" — переменной script. Затем мы добавили
.length к концу каждой из переменных, узнав таким образом длины отдельных строк, а также длину составленной из них новой строки.
Обратите внимание: я говорил «можно добавлять
.length к концу как самой строки, так и переменной, содержащей строку». Это касается очень важного свойства переменных: в любом месте программы, где допустимо использовать число или строку, можно также использовать переменную, в которой хранится число или строка.
Получение отдельного символа строки
Иногда требуется получить из строки одиночный символ. Например, вы можете зашифровать в наборе слов тайное послание, состоящее из вторых символов каждого слова. Тогда, чтобы узнать это послание, нужно получить все вторые символы и объединить их в новую строку.
Чтобы получить символ, стоящий в определенной позиции строки, используйте квадратные скобки —
[]. Возьмите строку (или переменную, в которой хранится строка) и поставьте сразу после нее квадратные скобки, в которых указана позиция нужного символа. Например, чтобы получить первый символ строковой переменной myName, используйте запись myName[0]:
Length
— длина

38
Часть I. Основы var myName = "Ник";
myName[0];
"
Н
"
myName[1];
"
и "
myName[2];
"
к "
Обратите внимание — чтобы получить первый символ, мы указали в скобках позицию 0, а не 1. Дело в том, что JavaScript (как и многие другие языки программирования) ведет отсчет символов с нуля. Таким образом, для получения первого символа строки указывайте позицию 0, второго — 1 и т. д.
Попробуем разгадать наш тайный шифр, где во вторых буквах некоторого набора слов скрыто послание. Вот как это сделать:
var codeWord1 = "обернись";
var codeWord2 = "неужели";
var codeWord3 = "огурцы";
var codeWord4 = "липкие";
var codeWord5 = "?!";
codeWord1[1] + codeWord2[1] + codeWord3[1] + codeWord4[1] +

codeWord5[1];
"
беги!
"

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