Код Справочник по фронтенду

#База знаний

4 июн 2025
0

Как запустить JavaScript-код: в браузере, консоли и редакторе кода

Быстрый и понятный гайд для начинающих.

Иллюстрация: Polina Vari для Skillbox Media

Рустам Сабиров

Востоковед, интересующийся IT. В прошлом редактор раздела «Системный блок» журнала «Fакел», автор журналов Computer Gaming World RE, Upgrade Special, руководитель веб-ресурсов компании 1С-Softclub.

JavaScript — один из самых популярных языков программирования. Он лежит в основе интерактивных сайтов, используется для создания веб-приложений, серверов и автоматизации. Но чтобы начать работать c JavaScript, нужно для начала его запустить. В этой статье подробно и с примерами разберём, что происходит при запуске, где можно выполнять код и какие способы подойдут новичкам.

Содержание

Почему способов запуска JavaScript так много
Способы запуска JavaScript
Как запустить JavaScript в браузере
Как запустить JavaScript с помощью Visual Studio Code
Практика: запуск кода разными способами

Почему способов запуска JavaScript так много

JavaScript появился как язык для браузеров. Его задача — делать веб-страницы интерактивными: реагировать на клики, показывать уведомления, менять цвета, стили и тексты. Такой код запускается только внутри браузера, и всё, что он делает, происходит на странице.

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

Чтобы код работал, у браузера есть JavaScript-движок. Например, у Chrome это V8, у Firefox — SpiderMonkey, у Safari — JavaScriptCore. Движок умеет:

Читать код и строить внутреннее «дерево» всех инструкций.
Компилировать часто повторяющиеся куски в быстрый машинный код (это называется JIT-компиляция, от Just-In-Time).
Передавать команды на исполнение процессору компьютера.

Благодаря своей простоте и гибкости, JavaScript оказался удобным не только для работы в браузере. Его захотели использовать и вне браузера: для написания серверной логики, автоматизации задач, тестирования и так далее. Но чтобы запустить код вне браузера, нужна другая среда выполнения.

В 2009 году появилась Node.js — программа, которая использует движок V8 (как в Chrome), но работает вне браузера. Это стало поворотным моментом: JavaScript превратился из языка только для фронтенда в универсальный инструмент для фронта и бэка, сайтов и серверов, автоматизации и приложений.

Способы запуска JavaScript

Программы, которые умеют исполнять JavaScript-код, называются средой выполнения (runtime environment). Есть два основных типа сред для JavaScript: в браузере и вне браузера.

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

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

Важно знать, в какой среде выполняется код, так как некоторые функции работают только в браузере, а другие — только в Node.js. Если перепутать, программа выдаст ошибку.

Где можно запускать JS-код

Самые популярные способы:

Через консоль разработчика в браузере.
С помощью отдельного файла .js, подключённого к странице.
С помощью редактора кода, например Visual Studio Code. Среду выполнения Node.js можно довольно легко к нему подключить.

Также существуют онлайн-среды для работы с JavaScript, HTML и CSS, например:

Они обычно используются в учебных проектах или для обмена кодом с единомышленниками. Мы не будем на них особо останавливаться, в целом они интуитивно понятны.

Как запустить JavaScript в браузере

Самый распространённый способ запустить JavaScript в браузере — добавить код в тег <script>. Это можно сделать двумя способами: встроить код прямо в HTML или подключить внешний файл.

Внутри HTML-файла

Чтобы запустить код внутри файла, следуйте инструкции.

1. Откройте текстовый редактор. Подойдёт обычный «Блокнот» (Notepad) на Windows, но можно использовать более продвинутые редакторы и IDE: VS Code, Sublime Text, Notepad++ и другие.

2. Вставьте HTML-код.

Например, вот базовый код HTML-страницы:

<!DOCTYPE html>
<!-- сообщаем браузеру, что это HTML5-документ -->

<html>
<!-- Начало HTML-страницы -->

<head>
<!-- Начало шапки страницы (здесь обычно служебная информация, не показывается пользователю) -->

    <script>
    //Начало блока JavaScript-кода

        alert('Привет!');
        // Показываем всплывающее окно с текстом "Привет!"

    </script>
    <!-- Конец блока JavaScript-кода -->

</head>
<!-- Конец шапки страницы -->

<body>
<!-- Начало тела страницы (всё, что будет видно пользователю) -->
</body>
<!-- Конец тела страницы -->

</html>
<!-- Конец всей HTML-страницы -->

Этот код выведет сообщение сразу при открытии страницы.

3. Сохраните файл с расширением .html.

В редакторе нажмите Файл → Сохранить как.
В поле Имя файла напишите index.html.
Нажмите Сохранить.

4. Откройте файл в браузере.

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

HTML-файл можно открыть в любом браузере: Chrome, Firefox, Edge, Safari и других.

Для тренировки попробуйте запустить более сложный код, который выдаст сообщение при нажатии на кнопку:

<!DOCTYPE html>
<html>
<head>
    <title>Внутренний JavaScript</title>
    <script>
        // Код JavaScript прямо в HTML-документе
        function sayHello() {
            alert('Привет, мир!');
        }
        // Код выполнится при загрузке страницы
        console.log('Страница загружается...');
    </script>
</head>
<body>
    <button onclick="sayHello()">Нажми меня</button>
    // Теперь, чтобы получить сообщение, надо нажать кнопку
</body>
</html>

Внешний скрипт

Большие скрипты обычно принято выносить в отдельные файлы. Для этого есть несколько причин:

Когда JavaScript-код хранится отдельно от HTML-разметки, его легче редактировать и в нём проще искать ошибки.
Один и тот же файл .js можно подключать на несколько страниц.
Браузер может кэшировать внешний скрипт — при следующем визите он не станет загружаться заново, и страница будет работать быстрее.

Как создать HTML-файл и подключить к нему отдельный JavaScript-файл:

1. На рабочем столе или в удобном месте создайте новую папку — например, с именем my-project.

2. Создайте HTML-файл так же, как описано в предыдущем разделе. Вставьте в него следующий HTML-код:

<!DOCTYPE html>
<html>
<head>
    <title>Внешний JavaScript</title>
    <!-- Подключаем внешний файл JavaScript -->
    <script src="script.js"></script>
</head>
<body>
    <button id="myButton">Нажми меня</button>
</body>
</html>

3. Создайте JavaScript-файл. Откройте новый файл в том же редакторе и вставьте следующий код:

document.addEventListener('DOMContentLoaded', function() {
// Ждём, пока вся HTML-страница полностью загрузится

    document.getElementById('myButton').addEventListener('click', function() {
    // Находим кнопку по id "myButton"

        alert('Привет из внешнего файла!');
        // При клике показываем всплывающее окно с сообщением
    });

});
// Закрываем обе функции: сначала ту, что реагирует на клик, затем ту, что ждёт загрузки страницы.

4. Сохраните файл с именем script.js. Убедитесь, что файл сохранён в ту же папку my-project.

5. Запустите проект:

Откройте папку my-project.
Запустите файл index.html. Страница откроется в браузере.
Нажмите кнопку — появится всплывающее сообщение.

Если не работает:

Убедитесь, что оба файла находятся в одной папке.
Проверьте, что файлы называются правильно: index.html и script.js (без .txt в конце).
В HTML-файле строка подключения должна быть такая:

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

Запуск JavaScript через консоль браузера

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

Что можно делать в консоли

Быстро запускать код. Консоль можно использовать как тестовый полигон для быстрого запуска и отладки кода, проверки гипотез и экспериментов. Допустим, вы готовитесь к собеседованию и хотите вспомнить синтаксис объектов. Можно быстро нажать F12 и набрать код.

// Создаем объект
let user = { name: "Анна", age: 25 };

// Модифицируем его свойства
user.profession = "Программист";

// Проверяем результат
console.log(user);

Экспериментировать с элементами веб-страницы. Допустим, вы их изучаете и хотите закрепить на практике основные свойства и методы.

Или разрабатываете сайт и, прежде чем вносить изменения в код, решили убедиться, что движетесь в верном направлении.

Попробуйте ввести вот такой код:

// Воплощаем в жизнь миф о том, что фронтендеры только кнопочки перекрашивают.
// Создаём кнопку
const btn = document.createElement('button');
btn.textContent = 'Очень важная кнопка';
btn.style.transition = 'background-color 0.5s ease'; 

// Задаем начальные стили
btn.style.backgroundColor = 'white';
btn.style.color = 'black';
btn.style.padding = '10px 20px';
btn.style.border = '2px solid red';
btn.style.borderRadius = '5px';
btn.style.position = 'fixed';
btn.style.top = '10px';
btn.style.left = '10px';
btn.style.zIndex = '9999';
btn.style.cursor = 'pointer';

// Добавляем кнопку на страницу
document.body.appendChild(btn);

// Перекрашиваем
setTimeout(() => {
  btn.style.backgroundColor = 'red';
  btn.style.color = 'white';
  btn.style.borderColor = 'darkred';
}, 1000);

Отлаживать код. Если нужно проверить работу некоторой функции, которая есть в вашем проекте, её можно вызвать прямо из консоли.

calculateTotal();

Наконец, в консоль вашего сайта падают сообщения об ошибках с описанием. Заглядывайте в консоль почаще.

Как запустить JavaScript с помощью Visual Studio Code

Node.js — это среда для серверного JavaScript, без графического интерфейса. Там нет окон, кнопок, HTML-документов и взаимодействия с пользователем, как в браузере. Работа ведётся через командную строку или терминал операционной системы. Но так работать — это задача со звёздочкой, поэтому мы подключим Node.js к интерфейсу популярного редактора кода Visual Studio Code.

Шаг 1: устанавливаем Node.js

Зайдите на https://nodejs.org в раздел Downloads. Там вы увидите две версии:

LTS — стабильная версия.
Current — последняя версия с новыми фичами, может быть нестабильной.

Для серьёзной работы выбирайте LTS.

Выберите свою операционную систему и следуйте инструкциям.

Проверьте, что всё правильно работает. Откройте терминал:

Windows: нажмите Win + R, введите cmd и нажмите Enter.
macOS: нажмите Cmd + Space, введите Терминал, нажмите Enter.
Linux: нажмите Ctrl + Alt + T.

Введите команду:

node -v

Появится версия Node.js, например v22.15.1, — это значит, что всё работает правильно.

Шаг 2: скачиваем и настраиваем Visual Studio Code

Вообще, с Node.js можно работать в терминале операционной системы, где мы проверяли установку, но это задача со звёздочкой. Поэтому удобно подключить программу к редактору кода, где есть графический интерфейс. Во многих редакторах есть такая опция, мы рассмотрим популярный VS Code.

Бонус. Как сделать VS Code удобнее

Русификация: откройте Extensions (Ctrl + Shift + X на Windows/Linux или Cmd + Shift + X на Mac), найдите Russian Language Pack, установите и перезапустите редактор — интерфейс станет русскоязычным.

Смена темы: откройте палитру команд (Ctrl + Shift + P / ⇧ + ⌘ + P), введите Color Theme, выберите понравившуюся тему и нажмите Enter.

Установка плагинов: в разделе Extensions (Ctrl + Shift + X / Cmd + Shift + X) можно найти и установить полезные расширения — от подсветки синтаксиса до автодополнения и сниппетов.

Практика: запуск кода разными способами

В качестве упражнения для тренировки выведем фразу «Привет, мир!» в разных средах. Напишите и запустите простейший скрипт на JavaScript в трёх разных средах: браузере, Node.js и консоли разработчика.

В браузере: создайте HTML-файл, подключите к нему JavaScript-файл и выведите сообщение «Привет, мир!».

В Node.js: создайте файл hello.js, который выводит в консоль сообщение «Привет, мир! (Node.js)», и запустите его через терминал.

В консоли разработчика: откройте консоль разработчика в браузере и напрямую введите команду, которая выведет фразу «Привет, мир!».

Заключение

Код на JavaScript можно запустить в браузере и за его пределами с использованием Node.js, Deno, Bun. Среда выполнения определяет возможности JavaScript. В браузере код взаимодействует с DOM и пользовательским интерфейсом, а в Node.js — с файловой системой и сетевыми запросами.

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

Полезные материалы

Browser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite — статья о цикле событий, порядке выполнения кода и о том, как разработчики могут его оптимизировать.
Node.js Best Practices — крупнейшая подборка лучших практик работы с Node.js: архитектурные паттерны, полезные советы и прочее.

Больше интересного про код — в нашем телеграм-канале. Подписывайтесь!

Читайте также: