Как выполняется JavaScript

Язык, движок и среда выполнения

Представьте страницу со списком покупок. HTML описывает поле ввода и список, CSS задаёт их внешний вид, а JavaScript добавляет поведение: считывает текст, создаёт покупку, пересчитывает сумму. Сам язык не знает, что такое кнопка или вкладка браузера. Он предоставляет значения, выражения, условия, функции и объекты. Возможность работать с документом предоставляет браузер через свои API. Это различие важно с первого урока: одинаковая программа может вычислять сумму и в браузере, и на сервере, но обратиться к document в обычном Node.js нельзя.

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

Среда выполнения окружает движок возможностями ввода и вывода. Браузер предоставляет DOM, события, fetch и хранилища. Node.js предоставляет доступ к файлам, процессам и серверному HTTP. Многие API, например fetch, сегодня встречаются в обеих средах, однако это не означает полной взаимозаменяемости программ. При чтении примера всегда выясняйте, где он должен запускаться и откуда берутся используемые им имена.

Первая программа и порядок инструкций

Начните с консоли инструментов разработчика браузера или создайте файл hello.js и выполните его командой node hello.js в установленном Node.js. Консоль удобна для небольшого эксперимента, файл — для воспроизводимой программы. Сначала выводите понятные подписи вместе со значениями: так легче отличить результат вычисления от промежуточной проверки.

const course = 'JavaScript';
const lessons = 22;
console.log('Курс:', course);
console.log('Количество уроков:', lessons);
console.log('Через один урок:', lessons - 1);

Курс: JavaScript
Количество уроков: 22
Через один урок: 21

Здесь инструкции выполняются сверху вниз. Сначала создаются две переменные, затем вызывается console.log. Выражение lessons - 1 вычисляется до передачи аргумента в console.log. Само исходное число не меняется: мы вычислили новое значение, но не присвоили его переменной. Круглые скобки после имени функции означают вызов, а значения внутри них — аргументы. Точки в console.log показывают обращение к свойству объекта console.

Выражение, инструкция и результат

Выражение производит значение: 2 + 3 даёт число 5, а 'JS' + 'lab' даёт строку. Инструкция задаёт действие программы: объявление переменной, ветвление или возврат из функции. Не путайте значение выражения с тем, что показывается пользователю. Если написать арифметическое выражение в файле, оно вычислится, но среда не обязана его вывести. Интерактивная консоль часто показывает результат последнего выражения сама — это удобство консоли, а не правило вывода JavaScript.

function total(price, quantity) {
  return price * quantity;
}

const result = total(120, 3);
console.log(result);

Функция возвращает 360 вызывающему коду. Только следующая инструкция отправляет число в консоль. Это разделение позволяет использовать результат повторно: сохранить его, сравнить с бюджетом или показать на странице. В практических задачах платформы проверяется именно возвращённое значение функции solve. Один только console.log правильного числа не заменяет return.

Подключение скрипта в браузере

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

<p id="status">Ожидание</p>
<script type="module" src="./app.js"></script>

// app.js: этот пример запускается в браузере
const status = document.querySelector('#status');
if (status) status.textContent = 'JavaScript работает';

Открытие HTML напрямую через file:// иногда приводит к ограничениям загрузки модулей. Для проекта используйте локальный HTTP-сервер своего инструмента разработки. Сервер раздаёт файлы браузеру, а браузер выполняет полученный JavaScript. Код клиента не становится серверным только потому, что файл отдал HTTP-сервер.

Как читать сообщения об ошибках

У ошибки обычно есть название, сообщение и стек вызовов. SyntaxError указывает на нарушение грамматики, ReferenceError — на недоступное имя, TypeError часто означает неподходящий тип операции. Начинайте с первой относящейся к вашему коду строки, а не с последнего красного сообщения: несколько ошибок могут быть следствием одной причины. Проверьте имя файла, номер строки, правильность скобок и регистр букв.

Названия score и Score различаются. Кавычки вокруг имени превращают обращение к переменной в строковый текст. Комментарий после // не выполняется и заканчивается переводом строки. Не исправляйте ошибку случайной заменой символов: сформулируйте ожидаемое поведение, посмотрите фактическое и найдите первую точку расхождения.

Практическая проверка понимания

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

Самостоятельно измените число уроков в первом примере и предскажите все три вывода до запуска. Затем удалите кавычки у слова JavaScript и объясните получившийся ReferenceError. Наконец, замените return на console.log внутри total: сравните вывод консоли с содержимым result. Если вы можете объяснить, почему result стал undefined, различие между возвратом и выводом уже понятно.