В браузере вывод появляется в консоли JavaScript.

Часть интерфейса браузера по умолчанию скрыта, но большинство браузеров открывают её, если вы нажмёте F12 или на Mac Command-Option-I. Если это не сработает, поищите пункт меню с названием «Инструменты разработчика» или что-то подобное.

При запуске примера (или собственного кода) на англоязычной странице вывод console.log будет отображаться после примера, а не в консоли JavaScript браузера.

let x = 30;
console.log("the value of x is", x);
// → the value of x is 30

Хотя имя привязки не может содержать символ точки, console.log может. Это потому, что console.log — это не просто привязка. На самом деле это выражение, которое извлекает свойство log из значения, хранящегося в привязке console. Мы узнаем, что это значит, в главе 4.

Возвращаемое значение

Отображение диалогового окна или запись текста на экран — побочный эффект. Поскольку они вызывают побочные эффекты, многие функции полезны. Функции также могут возвращать значение, и в этом случае им не нужен побочный эффект, чтобы быть полезными. Например, функция Math.max может принимать любое количество аргументов и возвращать наибольшее значение.

console.log(Math.max(2, 4));
// → 4

Когда функция возвращает значение, говорят, что она возвращает это значение. Всё, что производит значение в JavaScript, является выражением, что означает, что вызовы функций можно использовать в более крупных выражениях. Здесь вызов Math.min (противоположный Math.max) используется как часть выражения сложения:

console.log(Math.min(2, 4) + 100);
// → 102

Мы обсудим, как писать собственные функции, в следующей главе.

Управление потоком

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

let theNumber = Number(prompt("Pick a number"));
console.log("Your number is the square root of " +
            theNumber * theNumber);

Функция Number преобразует значение в число. Нам нужно это преобразование, потому что результатом prompt является строковое значение, а нам нужно число. Есть похожие функции, называемые String и Boolean, которые преобразуют значения в эти типы.

Вот довольно простая схема линейного потока управления:

Условное выполнение

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

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

let theNumber = Number(prompt("Pick a number", ""));
if (!isNaN(theNumber))
  alert("Your number is the square root of " +
        theNumber * theNumber);

После изменения, если вы введёте "parrot", вывода не будет.

Ключевое слово if выполняет или пропускает оператор в зависимости от значения булева выражения. Решающее выражение находится после ключевого слова в скобках, за которым следует оператор для выполнения.

Функция isNaN в Number — стандартная функция JavaScript, которая возвращает true только тогда, когда ей дан аргумент NaN. Когда вы даёте ему строку, которая не представляет собой действительное число, Number функция как раз возвращает NaN. Поэтому условие переводится как «если theNumber является числом, то сделайте это».

В этом примере оператор под if заключён в фигурные скобки ({ и}), которые используются для группировки произвольного количества операторов в один оператор, называемый блоком кода. В данном случае вы можете игнорировать их, поскольку они содержат только один оператор, но для удобства большинство программистов JavaScript используют их в каждом заключённом операторе, который они пишут. За исключением одной строки, мы будем следовать этому соглашению в этой книге.

if (1 + 1 == 2) console.log("It's true");
// → It's true

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

let theNumber = Number(prompt("Pick a number"));
if (!Number.isNaN(theNumber)) {
  console.log("Your number is the square root of " +
              theNumber * theNumber);
} else {
  console.log("Hey. Why didn't you give me a number?");
}

Если вам нужно выполнить более двух путей, вы можете связать вместе несколько пар if/else. Вот пример:

let num = Number(prompt("Pick a number", "0"));

if (num < 10) {
  console.log("Small");
} else if (num < 100) {
  console.log("Medium");
} else {
  console.log("Large");
}

Эта программа сначала проверяет, меньше ли num, чем 10. Если условие истинно, выполняется ветвь, отображающая "Small"; если нет, выбирается ветвь else, которая сама содержит вторую if. Если второе условие, т. е. num меньше 100, истинно и число находится в диапазоне от 10 до 100, выполняется ветвь, отображающая "Medium". Если ни одно из условий не выполняется, выполняется последняя ветвь else.

Шаблон этой программы выглядит так:

Циклы while и do

Рассмотрим программу, которая выводит все чётные числа от 0 до 12. Один из способов написать это:

console.log(0);
console.log(2);
console.log(4);
console.log(6);
console.log(8);
console.log(10);
console.log(12);

Программа работает, но цель программирования состоит в том, чтобы уменьшить работу, а не увеличить её. Если нам нужны все чётные числа меньше 1 000, этот способ не годится. Теперь нам нужен способ повторить некоторый код, который мы называем циклом.

Мы можем использовать цикл для управления потоком, чтобы программа возвращалась к определённой точке и повторяла код в зависимости от состояния программы. Если мы используем счётчик привязки в цикле, мы можем написать код следующим образом:

let number = 0;
while (number <= 12) {
  console.log(number);
  number = number + 2;
}
// → 0
// → 2
//   … etcetera

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

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

Как полезный реальный пример, теперь мы можем написать программу для вычисления и отображения результата 2**10 (2 в степени 10). Мы используем две привязки: одну для отслеживания нашего результата, другую для вычисления того, сколько раз мы умножим наш результат на 2. Цикл проверяет, достигло ли второе приращение 10, и если нет, обновляет обе привязки.

let result = 1;
let counter = 0;
while (counter < 10) {
  result = result * 2;
  counter = counter + 1;
}
console.log(result);
// → 1024

Счётчик также может начинаться с 1 и проверяться на <= 10, но по причинам, которые станут ясны в главе 4, начинать с 0 — хорошая идея.

Цикл do похож на цикл while. Единственное отличие состоит в том, что цикл do всегда выполняет тело цикла хотя бы один раз, и только после этого начинает проверять условие. В цикле do условие помещается после тела цикла, что отражает это:

let yourName;
do {
  yourName = prompt("Who are you?");
} while (!yourName);
console.log(yourName);

Этот код заставляет вас ввести имя. Он будет продолжать спрашивать, пока то, что он получает, не перестанет быть пустой строкой. !-оператор преобразует значение в булевый тип и инвертирует его. Все строки, кроме «»», преобразуются в true. Это означает, что цикл будет продолжаться до тех пор, пока вы не предоставите непустое имя.

Отступ кода

В этих примерах я всегда добавляю пробелы перед операторами, которые являются частью больших операторов. Эти пробелы не обязательны — компьютер примет программу и без них. На самом деле, даже символы перевода строки в программе необязательны. Если хотите, можете написать программу в одной длинной строке.

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

if (false != true) {
  console.log("That makes sense.");
  if (1 < 2) {
    console.log("No surprise there.");
  }
}

Большинство редакторов кода (включая тот, который используется в этой книге) помогут вам с отступом новых строк.

Цикл for

Многие циклы следуют шаблону, который мы видели в примере while. Сначала создаётся счётчик, связанный с отслеживанием прогресса цикла. Затем появляется оператор while, обычно с тестовым выражением, которое проверяет, достиг ли счётчик своего конечного значения. В конце тела цикла счётчик обновляется для отслеживания прогресса.

Поскольку этот шаблон очень распространён, JavaScript и подобные языки предоставляют более короткую и более полную форму, называемую циклом for:

for (let number = 0; number <= 12; number = number + 2)
  console.log(number);
// → 0
// → 2
//   … etcetera

Эта программа полностью эквивалентна предыдущему примеру печати чётных чисел. Единственное отличие состоит в том, что все операторы, связанные с состоянием цикла, объединены после for.

После ключевого слова for должны стоять две точки с запятой. Первая часть перед точкой с запятой — это инициализация цикла, обычно определение привязки. Вторая часть — это выражение проверки, которое определяет, должен ли цикл продолжаться. Последняя часть — это оператор, используемый для обновления состояния после каждой итерации цикла. В большинстве случаев цикл for более краток и понятен, чем оператор while.

Следующий код использует цикл for вместо цикла while для вычисления 2**10:

var result = 1;
for (var counter = 0; counter < 10; counter = counter + 1)
  result = result * 2;
console.log(result);
// → 1024

Выход из цикла

Помимо того, что цикл завершается, когда условие становится ложным, мы также можем использовать специальный оператор break для немедленного выхода из цикла.

Следующая программа демонстрирует использование оператора break. Программа находит первое число больше или равное 20, которое делится на 7.

for (let current = 20; ; current++) {
  if (current % 7 == 0) 
    break;
  }
}
// → 21

Мы можем использовать оператор остатка (%) для определения того, делится ли число на другое число. Если оно делится, остаток равен 0.

Этот пример цикла for опускает тестовое выражение для завершения цикла. Это означает, что если только внутренний оператор break не выполняется, цикл никогда не завершится.

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

Если вы создали бесконечный цикл в одном из примеров на этих страницах, вас обычно спросят, хотите ли вы остановить скрипт через несколько секунд. Если это не удастся, вам придётся закрыть вкладку, которую вы обрабатываете, или в некоторых браузерах закрыть весь браузер, чтобы восстановить работу.

Оператор continue работает аналогично оператору break, влияя на выполнение цикла. Оператор continue в теле цикла может выйти из тела цикла и перейти к следующей итерации.

Удобный способ обновления привязок

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

counter = counter + 1;

JavaScript предоставляет удобный способ записи:

counter += 1;

Другие операторы в JavaScript также имеют аналогичные удобные формы, например, result*=2 может удвоить result, а counter-=1 может уменьшить counter на 1.

Это позволяет немного упростить наш пример кода счёта.

for (let number = 0; number <= 12; number += 2)
  console.log(number);

Для counter+=1 и counter-=1 можно ещё больше упростить код, заменив counter+=1 на counter++ и counter-=1 на counter--.

Условный оператор switch

Мы редко пишем код следующим образом:

if (x == "value1") action1();
else if (x == "value2") action2();
else if (x == "value3") action3();
else defaultAction();

Существует структура под названием switch, которая позволяет выразить такое «распределение» более прямо. К сожалению, синтаксис, используемый JavaScript для этого (унаследованный от языков C/Java), немного неуклюж — операторы if могут выглядеть лучше. Вот пример:

switch (prompt("What is the weather like?")) {
  case "rainy":
    console.log("Remember to bring an umbrella.");
    break;
  case "sunny":
    console.log("Dress lightly.");
  case "cloudy":
    console.log("Go outside.");
    break;
  default:
    console.log("Unknown weather type!");
    break;
}

Вы можете поместить любое количество меток case в блок switch. Программа начнёт выполняться с соответствующей метки case или, если метка не найдена, с default. Она даже продолжит выполнение через другие метки, пока не достигнет break. В некоторых случаях, как в примере «sunny», это можно использовать для совместного использования некоторого кода в разных ситуациях (он предлагает выходить на улицу в облачную погоду и в солнечную погоду). Но будьте осторожны — легко забыть о таком break, что приведёт к выполнению программой кода, которого вы не хотели.

CamelCase

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

fuzzylittleturtle
fuzzy_little_turtle
FuzzyLittleTurtle
fuzzyLittleTurtle

Первый стиль может быть трудным для чтения. Я предпочитаю стиль подчёркивания, хотя он немного неудобен. Стандартный стиль функций JavaScript и большинства программистов JavaScript заключается в использовании заглавных букв для всех слов, кроме первого, как показано ниже. Мы будем следовать этому соглашению.

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

Комментарии

Обычно исходный код не передаёт всю информацию, которую вы хотите передать читателю программы, или он передаёт информацию загадочным образом, и люди могут её не понять. В других случаях вы можете просто захотеть включить некоторые связанные идеи в качестве части вашей программы. Для этого используются комментарии.

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

let accountBalance = calculateBalance(account);
// It's a green hollow where a river sings
accountBalance.adjust();
// Madly catching white tatters in the grass.
let report = new Report();
// Where the sun on the proud mountain rings:
addToReport(accountBalance, report);
// It's a little valley, foaming like light in a glass.

Однострочные комментарии могут доходить только до конца строки. Текст между символами /* и */ будет проигнорирован, независимо от того, содержит ли он перевод строки. Это полезно для добавления информации о файлах или программных блоках.

/*
 I first found this number scrawled on the back of one of
 an old