Первая программа на JavaScript: как код превращается в действие

Программа — это текст с инструкциями для компьютера. Компьютер не догадывается, что вы имели в виду, и не пропускает «очевидные» шаги: он делает ровно то, что написано, и в том порядке, в каком написано. Почти любая программа устроена одинаково: получает данные, что-то с ними делает и выдаёт результат. Калькулятор чаевых получает сумму счёта и процент, умножает и делит, а затем показывает чаевые и итог.

JavaScript — интерпретируемый язык: браузер или Node.js получает исходный текст программы и выполняет его без отдельного шага сборки. Как поясняет MDN, современные движки ускоряют работу JIT-компиляцией — переводят код в быстрый двоичный вид прямо во время выполнения, — но для вас это незаметно: написали строку, запустили, увидели результат. Поэтому JavaScript удобен для первой программы.

Язык один, а мест выполнения — сред — два основных. В браузере JavaScript управляет страницей: реагирует на клики, меняет текст, отправляет формы. Node.js — открытая кроссплатформенная среда, которая запускает тот же движок V8, что и Chrome, но вне браузера: на вашем компьютере или на сервере. В уроке о том, как устроен сайт, это две половины одной системы — фронтенд и бэкенд.

Сам язык стандартизирован в спецификации ECMAScript (ECMA-262), и всё, что в этой траектории касается языка — переменные, условия, циклы, функции, — одинаково работает в обеих средах. Различаются только встроенные объекты окружения: в Node.js нет document, а в браузере нет process. Если пример обращается к одному из них, он запустится только в своей среде.

console.log("Привет, InterLAB!"); // → Привет, InterLAB!
console.log(2 + 3);               // → 5
console.log("2" + "3");           // → 23

console.log — команда «покажи значение». В скобках — что показать: текст в кавычках, число или выражение. Выражение 2 + 3 сначала вычисляется, и в консоль попадает 5. А "2" + "3" даёт 23: в кавычках это не числа, а строки, и плюс их склеивает. Разницу между числами и строками подробно разберём в следующем уроке — пока просто запомните, что кавычки меняют смысл.

После каждой строки с console.log консоль покажет ещё и серое undefined. Это не ошибка: консоль выводит значение последнего выполненного выражения, а сама console.log ничего не возвращает — по документации MDN её результат равен undefined. Если ввести просто 2 + 3 без console.log, консоль покажет 5 — значение выражения.

Консоль удобна для проб, но программа, которую нужно запускать снова и снова, живёт в файле. Для этого понадобится Node.js и терминал — окно, где команды вводятся текстом.

$ node --version
v24.18.0

$ node hello.js
Привет, InterLAB!
5
23

Комментарии после // Node.js пропускает — они для людей. Расширение .js означает обычный файл JavaScript. В документации Node.js встречается и .mjs — так обозначают файлы-модули с командой import; к модулям вернёмся позже, первым программам они не нужны.

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

const bill = 12500;    // сумма счёта, ₸
const percent = 10;    // процент чаевых

const tip = bill * percent / 100;
const total = bill + tip;

console.log(`Чаевые: ${tip} ₸`);          // → Чаевые: 1250 ₸
console.log(`Итого к оплате: ${total} ₸`); // → Итого к оплате: 13750 ₸

• const bill = 12500; — даём значению имя. Дальше в программе можно писать bill вместо числа. Подробно о const и let — в следующем уроке.
• * и / — умножение и деление. Как в математике, они выполняются раньше сложения, поэтому bill * percent / 100 даёт 10% от счёта.
• Текст в обратных кавычках — шаблонная строка: вместо ${tip} в неё подставляется значение. Обратная кавычка набирается клавишей Ё в английской раскладке.
• Точка с запятой завершает инструкцию. JavaScript часто расставляет их сам, но явная точка с запятой избавляет от редких сюрпризов.

Программа с данными внутри кода считает только один счёт. Сделаем так, чтобы сумма и процент приходили снаружи — из командной строки. В Node.js для этого есть process.argv: список аргументов, с которыми запущена программа. По документации Node.js первый элемент — путь к самому node, второй — путь к файлу программы, а дальше идут значения, которые вы написали после имени файла. Нумерация начинается с нуля, поэтому сумма — это process.argv[2], процент — process.argv[3].

// tip.js — калькулятор чаевых
// Запуск: node tip.js <сумма счёта> <процент>
const bill = Number(process.argv[2]);
const percent = Number(process.argv[3]);

const tip = Math.round(bill * percent / 100);
const total = bill + tip;

console.log(`Счёт: ${bill} ₸`);
console.log(`Чаевые ${percent}%: ${tip} ₸`);
console.log(`Итого: ${total} ₸`);

$ node tip.js 12500 10
Счёт: 12500 ₸
Чаевые 10%: 1250 ₸
Итого: 13750 ₸

$ node tip.js 8990 15
Счёт: 8990 ₸
Чаевые 15%: 1349 ₸
Итого: 10339 ₸

Аргументы командной строки всегда приходят текстом, поэтому их оборачивают в Number(...) — превращают строку «12500» в число 12500. Math.round округляет до ближайшего целого: 15% от 8990 — это 1348,5, а в чеке будет 1349 ₸.

Ошибки — нормальная часть работы, и сообщение об ошибке — подсказка, а не приговор. Для начала важно различать два вида. Синтаксическая ошибка (SyntaxError) возникает, когда движок не может разобрать текст программы: по MDN, он встретил символы или их порядок, не соответствующие правилам языка. В таком случае не выполняется ни одна строка — даже те, что стоят выше ошибки.

const bill = 12500;
console.log("Считаю чаевые…");
console.log(`Итого: ${bill * 1.1} ₸`;

$ node broken.js
…\first-js\broken.js:3
console.log(`Итого: ${bill * 1.1} ₸`;
                                ^^^^

SyntaxError: missing ) after argument list
    at …

Node.js v24.18.0

Читайте сообщение сверху вниз. Первая строка — файл и номер строки (broken.js:3). Дальше — сама строка кода, а значки ^ под ней показывают место, где движок понял, что что-то не так. Затем тип и описание ошибки: missing ) after argument list — «не хватает ) после списка аргументов». Строки, начинающиеся с at, — стек вызовов внутри Node.js; при синтаксической ошибке их можно не читать. В консоли браузера то же сообщение выглядит как Uncaught SyntaxError: missing ) after argument list.

Второй вид — ошибка во время выполнения. Синтаксис правильный, программа запустилась, но на какой-то строке не смогла продолжить. Самый частый случай у новичков — опечатка в имени:

$ node typo.js
Считаю чаевые…
…\first-js\typo.js:3
console.log(`Итого: ${totl} ₸`);
                      ^

ReferenceError: totl is not defined
    at …

Node.js v24.18.0

В этом уроке const мелькал как «имя для значения», а "2" + "3" превратилось в 23. Следующий шаг траектории — переменные и типы данных: чем let отличается от const, какие бывают типы значений, откуда берётся NaN и как сравнивать значения без сюрпризов. Работа в терминале подробнее разобрана в отдельном уроке о командной строке, а чтение длинных сообщений об ошибках со стеком вызовов — в материале об отладке.