Привет, мир!

Браузер сам по себе умеет показывать разметку и стили, а оживает страница благодаря скриптам. Чтобы браузер выполнил JavaScript, код помещают в тег <script> — всё, что находится внутри, движок воспринимает как программу и запускает. Стоит этот тег в том же HTML-файле, что и остальная разметка: из чего такой файл складывается и чем служебный <head> отличается от видимого <body>, разобрано в прологе, в статье про скелет страницы.

У тега два режима работы. Можно писать код прямо между <script> и </script> — удобно для пары строк. А можно вынести программу в отдельный файл и подключить его атрибутом src: <script src="app.js"></script>. Совмещать нельзя: если указан src, код внутри тега игнорируется.

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

Браузер читает страницу сверху вниз и, встретив <script>, останавливается: сначала выполнить код, потом читать дальше. Если тяжёлый скрипт стоит в начале, посетитель смотрит на пустой экран. Поэтому классический приём — ставить скрипты в самый конец, перед </body>.

Современный способ — оставить тег в <head>, но добавить атрибут defer: <script src="app.js" defer></script>. Браузер скачает файл в фоне, а выполнит после того, как разберёт всю разметку. Пока запомните это как готовый рецепт, а чем defer отличается от async и почему важен порядок скриптов, разбирает статья «defer, async и куда ставить скрипт» в части II.

defer = «скачай сейчас, запусти после разметки»

По традиции первая программа на любом языке печатает «Привет, мир!». Наша уложится в одну строку: команда console.log выводит текст в консоль — служебную панель браузера для разработчика.

console.log("Привет, мир!");

Здесь, в учебнике, результат виден прямо под примером, но привычку заглядывать в настоящую консоль браузера стоит завести с первого дня — как её открыть и что она ещё умеет, разбирает статья «Консоль браузера: первый инструмент отладки». Оттуда нам понадобится одно: значений в console.log можно передать сколько угодно — через запятую, и печатаются они в одну строку через пробел.

console.log("Привет,", "мир!");
console.log(123);

alert("Привет, мир!");

Комментарий — текст, который движок пропускает, не выполняя. Однострочный начинается с // и тянется до конца строки. Многострочный открывается /*, закрывается */ и может занимать сколько угодно строк.

// эту строку движок пропустит целиком
console.log("работаю");
/* а этот комментарий
   растянулся на две строки */
console.log("и я работаю");

Хороший комментарий объясняет «почему», а не пересказывает код: причину неочевидного решения, обход бага, ссылку на задачу. Второе применение — временно выключить кусок кода при отладке: закомментировал, проверил, вернул обратно. Одна ловушка: /* */ не бывает вложенным — первый же */ закрывает комментарий.

Программа — это список инструкций: сделай раз, сделай два. Друг от друга их отделяет точка с запятой. Каждый наш вызов console.log(...) — отдельная инструкция, поэтому в конце строки стоит ;. Технически можно записать несколько инструкций и в одну строку, но читать такое тяжело.

console.log("первая инструкция");
console.log("вторая инструкция");

Формально JavaScript умеет расставлять точки с запятой сам: в большинстве случаев перенос строки он считает концом инструкции. Но именно «в большинстве»: если следующая строка начинается со скобки ( или [, движок склеит её с предыдущей — и получится ошибка, которую трудно заметить глазами. Поэтому правило простое: точку с запятой ставим всегда и не тратим силы на пограничные случаи.

try {
  const text = "Привет"
  [1, 2, 3].forEach(n => console.log(n))
} catch (err) {
  console.log(err.name);
}