Начнём изучение языка с рассмотрения основных «строительных блоков» кода.

Инструкции

Инструкции – это синтаксические конструкции и команды, которые выполняют действия.

Мы уже видели инструкцию alert('Привет, мир!'), которая отображает сообщение «Привет, мир!».

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

Например, здесь мы разделили сообщение «Привет Мир» на два вызова alert:

alert('Привет'); alert('Мир');

Обычно каждую инструкцию пишут на новой строке, чтобы код было легче читать:

alert('Привет');
alert('Мир');

Точка с запятой

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

Так тоже будет работать:

alert('Привет')
alert('Мир')

В этом случае JavaScript интерпретирует перенос строки, как «неявную» точку с запятой. Это называется автоматическая вставка точки с запятой.

В большинстве случаев новая строка подразумевает точку с запятой. Но «в большинстве случаев» не значит «всегда»!

В некоторых ситуациях новая строка не означает точку с запятой. Например:

alert(3 +
1
+ 2);

Код выведет 6, потому что JavaScript не вставляет здесь точку с запятой. Интуитивно очевидно, что, если строка заканчивается знаком "+", значит, это «незавершённое выражение», поэтому точка с запятой не требуется. И в этом случае всё работает, как задумано.

Но есть ситуации, где JavaScript «забывает» вставить точку с запятой там, где она нужна.

Ошибки, которые при этом появляются, достаточно сложно обнаруживать и исправлять.

Пример ошибки

Если вы хотите увидеть конкретный пример такой ошибки, обратите внимание на этот код:

[1, 2].forEach(alert)

Пока нет необходимости знать значение скобок [] и forEach. Мы изучим их позже. Пока что просто запомните результат выполнения этого кода: выводится 1, а затем 2.

А теперь добавим alert перед кодом и не поставим в конце точку с запятой:

alert("Сейчас будет ошибка")

[1, 2].forEach(alert)

Теперь, если запустить код, выведется только первый alert, а затем мы получим ошибку!

Всё исправится, если мы поставим точку с запятой после alert:

alert("Теперь всё в порядке");

[1, 2].forEach(alert)

Теперь мы получим сообщение «Теперь всё в порядке», следом за которым будут 1 и 2.

В первом примере без точки с запятой возникает ошибка, потому что JavaScript не вставляет точку с запятой перед квадратными скобками [...]. И поэтому код в первом примере выполняется, как одна инструкция. Вот, как движок видит его:

alert("Сейчас будет ошибка")[1, 2].forEach(alert)

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

Мы рекомендуем ставить точку с запятой между инструкциями, даже если они отделены переносами строк. Это правило широко используется в сообществе разработчиков. Стоит отметить ещё раз – в большинстве случаев можно опускать точку с запятой. Но безопаснее, особенно для новичка – ставить её.

Комментарии

Со временем программы становятся всё сложнее и сложнее. Возникает необходимость добавлять комментарии, которые бы описывали, что делает код и почему.

Комментарии могут находиться в любом месте скрипта. Они не влияют на его выполнение, поскольку движок просто игнорирует их.

Однострочные комментарии начинаются с двойной косой черты //.

Часть строки после // считается комментарием. Такой комментарий может, как занимать строку целиком, так и находиться после инструкции.

Как здесь:

// Этот комментарий занимает всю строку
alert('Привет');

alert('Мир'); // Этот комментарий следует за инструкцией

Многострочные комментарии начинаются косой чертой со звёздочкой /* и заканчиваются звёздочкой с косой чертой */.

Как вот здесь:

/* Пример с двумя сообщениями.
Это - многострочный комментарий.
*/
alert('Привет');
alert('Мир');

Содержимое комментария игнорируется, поэтому, если мы поместим внутри код /* … */, он не будет исполняться.

Это бывает удобно для временного отключения участка кода:

/* Закомментировали код
alert('Привет');
*/
alert('Мир');
Используйте горячие клавиши!

В большинстве редакторов строку кода можно закомментировать, нажав комбинацию клавиш Ctrl+/ для однострочного комментария и что-то, вроде Ctrl+Shift+/ – для многострочных комментариев (выделите кусок кода и нажмите комбинацию клавиш). В системе Mac попробуйте Cmd вместо Ctrl.

Вложенные комментарии не поддерживаются!

Не может быть /*...*/ внутри /*...*/.

Такой код «умрёт» с ошибкой:

/*
  /* вложенный комментарий ?!? */
*/
alert( 'Мир' );

Не стесняйтесь использовать комментарии в своём коде.

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

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

Карта учебника

Комментарии

перед тем как писать…
  • Если вам кажется, что в статье что-то не так - вместо комментария напишите на GitHub.
  • Для одной строки кода используйте тег <code>, для нескольких строк кода — тег <pre>, если больше 10 строк — ссылку на песочницу (plnkr, JSBin, codepen…)
  • Если что-то непонятно в статье — пишите, что именно и с какого места.