Как запустить JS код в Visual Studio Code

JS код в Visual Studio Code можно запустить двумя способами. Если код работает со страницей, открывайте index.html в браузере. Если это отдельный файл без HTML, установите Node.js и запустите файл в терминале командой node file.js

Главное не путать среды: браузер понимает document, button, window; Node.js запускает JavaScript вне браузера и не знает HTML-страницу

Содержание

Вариант 1: запустить JavaScript через HTML
Вариант 2: запустить файл через Node.js
Как выбрать правильный способ
Как открыть папку проекта правильно
Проверочный сценарий на 2 минуты
Частые ошибки
Node не установлен
Запуск не из той папки
Ожидать вывод на странице от console.log
Запускать HTML командой node
Мини-задание
Что почитать дальше по JavaScript

Вариант 1: запустить JavaScript через HTML

Создайте папку проекта:

demo/
  index.html
  script.js

Файл index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Запуск JS</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1 id="title">Текст до запуска</h1>
</body>
</html>

Файл script.js:

const title = document.querySelector("#title");
title.textContent = "JavaScript запущен";

Откройте index.html в браузере. Если заголовок изменился, JavaScript работает

Этот способ нужен, когда вы работаете с DOM: кнопками, формами, текстом на странице, стилями, событиями

Вариант 2: запустить файл через Node.js

Если у вас обычный файл hello.js:

const name = "JavaScript";
console.log(`Привет, ${name}`);

Установите Node.js с официального сайта. Затем откройте терминал в Visual Studio Code и проверьте:

node -v

Если версия выводится, запустите файл:

node hello.js

Ожидаемый вывод:

Привет, JavaScript

Терминал в Visual Studio Code открывается через меню Terminal -> New Terminal. Важно, чтобы терминал был открыт в папке, где лежит hello.js

Как выбрать правильный способ

Что в коде	Как запускать
`document.querySelector`	через HTML в браузере
`addEventListener` для кнопки	через HTML в браузере
`console.log`, массивы, функции	можно через Node.js
работа с файлами через `fs`	через Node.js
`alert`, `window`, `localStorage`	через браузер

Если вы запускаете браузерный код через Node.js, получите ошибку вроде:

ReferenceError: document is not defined

Это не значит, что JavaScript сломан. Это значит, что код предназначен для браузера

Как открыть папку проекта правильно

Новички часто открывают один файл, а не папку. Для JavaScript это неудобно: терминал может стартовать в другой директории, а относительные пути к файлам будут путать

Правильный порядок:

Создайте папку проекта, например js-demo.
Откройте Visual Studio Code.
Выберите File -> Open Folder.
Откройте именно папку js-demo.
Создайте внутри index.html, script.js или hello.js.
Откройте Terminal -> New Terminal.

Теперь команда:

node hello.js

будет выполняться из папки проекта, а не из случайного места на компьютере

Проверочный сценарий на 2 минуты

Сделайте оба запуска подряд

Сначала браузерный файл:

document.body.insertAdjacentHTML("beforeend", "<p>JS работает в браузере</p>");

Этот код должен быть подключен к HTML через script.js. Он изменит страницу

Потом Node.js-файл:

console.log("JS работает в Node.js");

Этот код запустите командой:

node hello.js

Если первый пример меняет страницу, а второй пишет в терминал, вы поняли главное различие сред

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

Node не установлен

Если команда node -v не работает, установите Node.js и заново откройте терминал. Иногда Windows не видит новую команду, пока терминал не перезапущен

Запуск не из той папки

Если терминал пишет, что файл не найден, проверьте текущую папку:

pwd

Get-Location

Перейдите в папку проекта или откройте ее через File -> Open Folder

Ожидать вывод на странице от console.log

console.log выводит сообщение в Console или терминал, а не в HTML. Чтобы изменить страницу, используйте DOM:

document.querySelector("#title").textContent = "Готово";

Запускать HTML командой node

Команда node index.html не нужна. HTML открывается браузером, а Node.js запускает JavaScript-файлы .js

Мини-задание

Создайте файл sum.js:

const a = 5;
const b = 7;

console.log(a + b);

Запустите:

node sum.js

Если увидели 12, запуск через Node.js настроен. Потом повторите похожую задачу через HTML и кнопку, чтобы почувствовать разницу между браузером и Node.js