Начнём изучение языка с рассмотрения основных «строительных блоков» кода.
Инструкции
Инструкции – это синтаксические конструкции и команды, которые выполняют действия.
Мы уже видели инструкцию alert('Привет, мир!')
, которая отображает сообщение «Привет, мир!».
В нашем коде может быть столько инструкций, сколько мы захотим. Инструкции могут отделяться точкой с запятой.
Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:
alert('Привет'); alert('Мир');
Обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:
alert('Привет');
alert('Мир');
Точка с запятой
В большинстве случаев точку с запятой можно не ставить, если есть переход на новую строку.
Так тоже будет работать:
alert('Привет')
alert('Мир')
В этом случае JavaScript интерпретирует перенос строки как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.
В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!
В некоторых ситуациях новая строка всё же не означает точку с запятой. Например:
alert(3 +
1
+ 2);
Код выведет 6
, потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком "+"
, значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.
Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.
Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.
Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:
alert('Hello');
[1, 2].forEach(alert);
Пока нет необходимости знать значение скобок []
и forEach
. Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится Hello
, затем 1
, затем 2
.
А теперь давайте уберем точку с запятой после alert
:
alert('Hello')
[1, 2].forEach(alert);
Этот код отличается от кода, приведенного выше, только в одном: пропала точка с запятой в конце первой строки.
Если мы запустим этот код, выведется только первый alert
, а затем мы получим ошибку (вам может потребоваться открыть консоль, чтобы увидеть её)!
Это потому что JavaScript не вставляет точку с запятой перед квадратными скобками [...]
. И поэтому код в последнем примере выполняется, как одна инструкция.
Вот как движок видит его:
alert('Hello')[1, 2].forEach(alert);
Выглядит странно, правда? Такое слияние в данном случае неправильное. Мы должны поставить точку с запятой после alert
, чтобы код работал правильно.
Это может произойти и в некоторых других ситуациях.
Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно не ставить точку с запятой. Но безопаснее, особенно для новичка, ставить её.
Комментарии
Со временем программы становятся всё сложнее и сложнее. Возникает необходимость добавлять комментарии, которые бы описывали, что делает код и почему.
Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.
Однострочные комментарии начинаются с двойной косой черты //
.
Часть строки после //
считается комментарием. Такой комментарий может как занимать строку целиком, так и находиться после инструкции.
Как здесь:
// Этот комментарий занимает всю строку
alert('Привет');
alert('Мир'); // Этот комментарий следует за инструкцией
Многострочные комментарии начинаются косой чертой со звёздочкой /*
и заканчиваются звёздочкой с косой чертой */
.
Как вот здесь:
/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
alert('Привет');
alert('Мир');
Содержимое комментария игнорируется, поэтому, если мы поместим код внутри /* … */
, он не будет исполняться.
Это бывает удобно для временного отключения участка кода:
/* Закомментировали код
alert('Привет');
*/
alert('Мир');
В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl+/ для однострочного комментария и что-то вроде Ctrl+Shift+/ – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl и Option вместо Shift.
Не может быть /*...*/
внутри /*...*/
.
Такой код «умрёт» с ошибкой:
/*
/* вложенный комментарий ?!? */
*/
alert( 'Мир' );
Не стесняйтесь использовать комментарии в своём коде.
Комментарии увеличивают размер кода, но это не проблема. Есть множество инструментов, которые минифицируют код перед публикацией на рабочий сервер. Они убирают комментарии, так что они не содержатся в рабочих скриптах. Таким образом, комментарии никоим образом не вредят рабочему коду.
Позже в учебнике будет глава Качество кода, которая объяснит, как лучше писать комментарии.
Комментарии вернулись :)
<code>
, для нескольких строк кода — тег<pre>
, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)