Как запустить JS файл: через браузер и через Node.js

JS-файл запускают двумя способами. Если код работает со страницей, подключите script.js к HTML и откройте HTML в браузере. Если файл не использует HTML, DOM и document, установите Node.js и запустите командой node script.js

Главное правило:

script.js для страницы -> через index.html в браузере
script.js для терминала -> node script.js

Содержание

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

Вариант 1: через 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 = "JS файл запущен через браузер";

Откройте index.html в браузере. Если заголовок изменился, файл подключен и выполнен

Вариант 2: через Node.js

Если файл выглядит так:

const a = 5;
const b = 7;

console.log(a + b);

его можно запустить через Node.js:

node script.js

Перед этим проверьте, установлен ли Node.js:

node -v

Если команда не найдена, установите Node.js с официального сайта и откройте терминал заново

Как выбрать способ

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

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

ReferenceError: document is not defined

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

Как запустить файл в папке проекта

Для Node.js важно, чтобы терминал был открыт в правильной папке:

cd path/to/demo
node script.js

На Windows путь может выглядеть так:

cd C:\Users\User\Desktop\demo
node script.js

Если в пути есть пробелы, удобнее открыть папку проекта в VS Code и запустить терминал уже оттуда. Так меньше шансов ошибиться с директорией и получить сообщение, что файл не найден

Где смотреть результат

В браузерном варианте результат может быть:

на странице;
во вкладке Console;
в сетевых запросах;
в измененном HTML.

В Node.js результат обычно виден в терминале:

console.log в браузере пишет в DevTools Console, а в Node.js — в терминал

Проверка пути к файлу

Если HTML открылся, но JavaScript не работает, проверьте путь в src:

<script src="script.js" defer></script>

Если файл лежит в папке js, путь должен быть другим:

<script src="js/script.js" defer></script>

Откройте DevTools, вкладку Network и обновите страницу. Если рядом с script.js статус 404, браузер не нашел файл. Это одна из самых частых причин, почему кажется, что JS-файл «не запускается»

Для Node.js похожая проверка: команда должна выполняться из папки, где лежит файл. Если файл называется app.js, команда node script.js его не найдет

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

Открыть script.js двойным кликом

Браузер может просто показать текст файла. Для сайта открывайте index.html, а не script.js

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

Если терминал пишет, что файл не найден, проверьте текущую папку. В VS Code удобнее открыть всю папку проекта через Open Folder

Подключить файл без defer

Если скрипт в head без defer, HTML-элементы могут еще не существовать. Используйте:

<script src="script.js" defer></script>

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

Сделайте два файла: browser.js для HTML-страницы и terminal.js для Node.js. Первый должен менять текст на странице, второй — выводить сумму чисел в терминал