Урок 1. Первая программа: где запускать JavaScript

Код на JavaScript выполняет программа-движок. Он есть в каждом браузере: V8 в Chrome и Edge, SpiderMonkey в Firefox, JavaScriptCore в Safari. Node.js — это движок V8, вынутый из браузера и дополненный всем, что нужно программе на компьютере: работой с файлами, сетью, процессами.

Отсюда три места, где можно запустить код: консоль браузера, страница сайта и Node.js. В этом уроке — все три.

Консоль браузера

Самый быстрый способ попробовать JavaScript — ничего не ставить. Откройте любую страницу и нажмите F12: откроются инструменты разработчика. Перейдите на вкладку Console (в русском интерфейсе — «Консоль»). Сразу в консоль открывают сочетания Ctrl+Shift+J в Chrome и Edge и Ctrl+Shift+K в Firefox.

Наберите в консоли и нажмите Enter:

2 + 2

Консоль покажет 4. Теперь первая настоящая команда:

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

console.log выводит в консоль то, что стоит в скобках. Строка текста берётся в кавычки. Под выводом консоль напишет ещё и undefined — это не ошибка: консоль показывает результат каждой команды, а console.log ничего не возвращает. Что такое undefined, разобрано в справке Чем undefined отличается от null.

Чтобы набрать несколько строк, переходите на новую строку сочетанием Shift+Enter: просто Enter сразу выполняет код.

Консоль удобна для проб, но код в ней не сохраняется. Для программ нужен файл.

Страница с тегом script

Браузер выполняет код, который стоит на странице внутри тега <script>. Создайте в редакторе файл index.html с таким текстом:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Первая программа</title>
</head>
<body>
  <h1>Первая программа</h1>
  <script>
    console.log("Привет из файла!");
    document.querySelector("h1").textContent = "JavaScript работает";
  </script>
</body>
</html>

Сохраните файл и откройте его двойным щелчком — он откроется в браузере. Заголовок на странице сменится на «JavaScript работает», а в консоли (F12) появится строка «Привет из файла!».

Вторая строка кода нашла на странице заголовок h1 и поменяла его текст — так JavaScript управляет страницей. Подробно об этом — в уроке DOM: элементы страницы и события.

Проверьте две вещи, если ничего не произошло:

• файл называется index.html, а не index.html.txt: Windows по умолчанию прячет расширения, и Блокнот добавляет своё;
• файл сохранён в кодировке UTF-8, иначе русские буквы превратятся в непонятные значки.

Обычно код держат не внутри страницы, а в отдельном файле .js и подключают его строкой <script src="script.js" defer></script>. Как это сделать правильно — в справке Как подключить JavaScript к HTML.

Node.js

Чтобы запускать JavaScript без браузера, установите Node.js (по шагам — в справке Как установить Node.js). Проверьте установку в терминале: в Windows — PowerShell или командная строка, в Linux и macOS — «Терминал».

node -v

Команда выводит номер версии, например v22.12.0. Если вместо этого — «команда не найдена», Node.js не установлен или терминал открыт до установки: закройте его и откройте снова.

Создайте папку для уроков. В терминале перейдите в неё командой cd, например cd Documents\js в Windows или cd ~/js в Linux. Файл с программой запускается так:

node hello.js

Создайте в папке файл hello.js с тремя строками и запустите его этой командой. Программа и то, что она выводит:

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

Привет, мир!
5
2 + 3 = 5

Через запятую console.log выводит несколько значений подряд, разделяя их пробелом. Строка "2 + 3 =" выводится как есть, а выражение 2 + 3 сначала вычисляется.

Команда node без имени файла открывает такую же консоль, как в браузере: набираете строку — сразу видите результат. Выход — команда .exit или Ctrl+C, нажатое два раза подряд.

В Node.js нет страницы, поэтому нет и document, window, alert: попытка их использовать даёт ошибку ReferenceError: document is not defined. Зато Node.js умеет то, чего браузер не позволяет: читать и писать файлы на диске, запускать программы, принимать подключения по сети.

Комментарии

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

// Это комментарий до конца строки
console.log("Работает"); // и это комментарий

/*
  Многострочный комментарий:
  удобно, чтобы описать, что делает программа.
*/

Комментариями удобно на время «выключать» строки кода, не стирая их.

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

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

Частые ошибки

• Console.log или console.Log — ошибка is not defined или is not a function. Язык различает большие и маленькие буквы: console и Console — разные имена.
• Кавычки-«ёлочки» или “лапки” из Word вместо обычных " или ' — ошибка SyntaxError: Invalid or unexpected token. Набирайте код в редакторе кода, а не в текстовом процессоре.
• Error: Cannot find module при запуске node hello.js — терминал открыт не в той папке, где лежит файл. Перейдите в нужную папку командой cd или укажите полный путь к файлу.
• Окно с ошибкой после двойного щелчка по файлу .js в Windows. Windows открывает такие файлы не через Node.js, а встроенной старой программой Windows Script Host, которая не знает console. Запускайте файлы командой node.
• Строка без кавычек: console.log(Привет) — движок считает Привет именем переменной, которой нет, и пишет ReferenceError: Привет is not defined.

Коротко

• JavaScript запускается в консоли браузера (F12 → Console), на странице внутри <script> и в Node.js (node файл.js).
• console.log(...) выводит значения; несколько значений через запятую выводятся через пробел.
• В браузере есть document и window, в Node.js — работа с файлами и сетью.
• Комментарии — // и /* … */; язык различает регистр букв.
• Чужой код в консоль не вставляют.

Проверьте себя