Расширение JS: что значит файл .js и как его запускать

Расширение .js означает JavaScript-файл. В таком файле хранится код JavaScript: обработчики кнопок, логика интерфейса, функции, работа с данными, скрипты для Node.js. Например, файл script.js можно подключить к HTML-странице, а файл hello.js можно запустить через Node.js

Важно: .js — это не Java. JavaScript и Java — разные технологии

Содержание

Пример файла script.js для браузера
Пример файла hello.js для Node.js
Как открыть JS-файл
Как понять, куда относится файл
Что лежит внутри .js файла
Как проверить, что файл действительно .js
Частые ошибки
Файл случайно называется script.js.txt
Неверный путь в HTML
Путать .js и .json
Когда нужен type="module"
Мини-задание
Что почитать дальше по JavaScript

Пример файла script.js для браузера

Структура проекта:

site/
  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 = "Файл script.js подключен";

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

Пример файла hello.js для Node.js

Создайте hello.js:

console.log("Привет из JS-файла");

Запустите:

node hello.js

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

Привет из JS-файла

Этот способ нужен, когда JavaScript работает не внутри HTML-страницы, а как отдельный скрипт в Node.js

Как открыть JS-файл

Открывать .js лучше в редакторе кода:

Visual Studio Code;
WebStorm;
Sublime Text;
любой текстовый редактор, если нужно просто посмотреть содержимое.

Не открывайте .js двойным кликом с ожиданием красивого окна. Это файл с кодом, а не документ вроде .docx или картинка

Как понять, куда относится файл

Признак	Скорее всего это
В коде есть `document.querySelector`	браузерный JavaScript
Файл подключается через `<script src>`	браузерный JavaScript
В коде есть `require("node:fs")`	Node.js
В коде есть `import` и `export`	модуль JavaScript
Файл лежит рядом с `package.json`	часть Node.js/npm-проекта

Если браузерный файл запустить через Node.js, может появиться ошибка document is not defined. Если Node.js-файл подключить прямо к HTML, может появиться ошибка про require

Что лежит внутри .js файла

.js файл — обычный текстовый файл. Внутри может быть простой код:

console.log("Hello");

А может быть код для страницы:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  alert("Кнопка нажата");
});

Или модуль с экспортом:

export function sum(a, b) {
  return a + b;
}

Расширение одно и то же, но способ запуска зависит от окружения: браузер, Node.js, сборщик проекта или тестовый инструмент

Как проверить, что файл действительно .js

На Windows включите отображение расширений файлов. Иначе файл может выглядеть как script.js, но фактически называться script.js.txt. В редакторе кода это обычно видно в дереве файлов и в заголовке вкладки

Еще проверка: если HTML подключает script.js, а в DevTools во вкладке Network у файла статус 404, значит путь или имя не совпали

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

Файл случайно называется script.js.txt

На Windows расширения могут быть скрыты. В итоге файл выглядит как script.js, но реально называется script.js.txt. Браузер такой файл не найдет по пути script.js

Проверьте отображение расширений файлов в системе или создавайте файлы прямо в редакторе кода

Неверный путь в HTML

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

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

Если HTML и JS лежат рядом:

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

Путать .js и .json

.js хранит исполняемый JavaScript-код. .json хранит данные в формате JSON. Они похожи текстовой природой, но назначение разное

Когда нужен type="module"

Если в файле используются import и export, подключайте его как модуль:

<script type="module" src="script.js"></script>

Обычный первый файл без модулей можно подключать так:

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

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

Создайте папку site, файл index.html и файл script.js. В script.js добавьте:

console.log("JS-файл работает");

Откройте страницу, затем DevTools и Console. Если сообщение появилось, расширение .js используется правильно

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы: