Как открыть файл JavaScript на компьютере

Файл JavaScript на компьютере обычно имеет расширение .js. Открыть его можно как обычный текстовый файл в редакторе кода: Visual Studio Code, Sublime Text, WebStorm, Notepad++ или даже стандартным блокнотом. Но важно не путать два действия: открыть файл, чтобы посмотреть код, и выполнить файл, чтобы код заработал

Содержание

Если нужно просто посмотреть код
Как открыть JavaScript через HTML
Как запустить .js файл без HTML
Почему файл не открывается
Чем открывать JS-файл новичку
Что почитать дальше по JavaScript
Что почитать дальше по JavaScript

Если нужно просто посмотреть код

Самый правильный вариант — открыть .js файл в редакторе кода. В редакторе будет подсветка синтаксиса, нумерация строк, поиск, форматирование и подсказки. Для учебных задач этого достаточно

На macOS и Windows можно нажать правой кнопкой по файлу и выбрать «Открыть с помощью». Если система не знает, чем открыть файл, выберите редактор вручную. Если файл открывается в браузере как текст, это не ошибка: JavaScript-файл действительно является текстовым файлом с кодом

Пример содержимого script.js:

const message = "JavaScript файл открыт";
console.log(message);

Такой файл можно читать и редактировать, но двойной клик по нему не всегда даст ожидаемый результат. В большинстве учебных случаев JavaScript запускают через браузерную страницу

Как открыть JavaScript через HTML

Если код должен работать на странице, создайте рядом два файла: index.html и script.js

<!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 подключен и выполняется. Если ничего не произошло, откройте Console в инструментах разработчика и проверьте ошибки

Как запустить .js файл без HTML

Если JavaScript-файл не работает со страницей, а просто выводит результат в Console, его можно запустить через Node.js. Сначала установите Node.js с официального сайта. Затем откройте терминал в папке с файлом и выполните команду:

node script.js

Если внутри есть console.log, результат появится в терминале

const a = 10;
const b = 5;

console.log(a + b);

Этот способ подходит для учебных задач, маленьких скриптов, работы с файлами на компьютере и серверного JavaScript. Но браузерные команды вроде document.querySelector в Node.js не работают без дополнительной среды, потому что document относится к веб-странице

Почему файл не открывается

Частая причина — файл на самом деле называется не script.js, а script.js.txt. Windows иногда скрывает расширения, и новичок думает, что создал JS-файл, хотя это текстовый файл. Включите показ расширений файлов и проверьте имя

Вторая причина — неправильная кодировка или поврежденный файл. Если вместо текста видны странные символы, попробуйте открыть файл в редакторе кода и выбрать UTF-8

Третья причина — путь в HTML указан неверно. Если index.html и script.js лежат в одной папке, достаточно src="script.js". Если файл лежит в папке js, путь будет src="js/script.js"

Чем открывать JS-файл новичку

Для учебы удобнее редактор кода. Блокнот подходит только для быстрого просмотра. Браузер подходит для выполнения кода, подключенного к HTML. Node.js подходит для запуска отдельных файлов через терминал

Мини-задача: создайте папку demo-js, внутри файлы index.html и script.js. Подключите скрипт через defer, измените текст заголовка, затем откройте Console и убедитесь, что ошибок нет. После этого создайте отдельный файл sum.js и запустите его через node sum.js