Как запустить JavaScript-код: в браузере, консоли и редакторе кода
2026-02-21 18:00 Diff
https://skillbox.ru/media/base/kak-zapustit-javascript-kod-v-brauzere-konsoli-i-redaktore-koda/

#База знаний

  • 4 июн 2025
  • 0

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

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

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Самый распространённый способ запустить JavaScript в браузере — добавить код в тег <script>. Это можно сделать двумя способами: встроить код прямо в 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. Здесь можно писать команды, сразу видеть результат, а также искать ошибки на странице. В консоли удобно тренироваться и отлаживать код. Изменения, внесённые через консоль, временные — они не сохраняются и исчезают при перезагрузке страницы.

Как открыть консоль

1. Откройте браузер (Chrome, Firefox или любой другой).

2. Нажмите F12 или Ctrl + Shift + I (Cmd + Option + I на Mac). В Safari нажмите ⌘ + Option + I (предварительно включите режим разработчика в настройках).

3. Перейдите на вкладку Console.

Консоль будет работать со страницей того сайта, где вы её открыли. Если хотите работать на пустой странице, введите в адресной строке about: blank.

Вы увидите в консоли мигающий курсор. Введите туда:

console.log('Привет из консоли!');

Нажмите Enter — результат появится сразу.

При попытке вставить скопированный код в консоль браузер может не дать этого сделать из-за политики безопасности. В этом случае нужно написать там же, в консоли, allow pasting.

Откройте консоль на своём любимом сайте и перекрасьте его. Для этого введите:

document.body.style.backgroundColor = "green"

Быстро запускать код. Консоль можно использовать как тестовый полигон для быстрого запуска и отладки кода, проверки гипотез и экспериментов. Допустим, вы готовитесь к собеседованию и хотите вспомнить синтаксис объектов. Можно быстро нажать 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();

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

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

Зайдите на 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, — это значит, что всё работает правильно.

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

1. Установите редактор Visual Studio Code.

2. Зайдите в раздел Extensions (Расширения) — наберите Ctrl + Shift + X или найдите раздел в левой панели.

3. Найдите и установите расширение Code Runner.

Скриншот: Visual Studio Code / Skillbox Media

4. Создайте новый документ.

5. В нижней правой части экрана найдите кнопку смены языка и выберите JavaScript.

Скриншот: Visual Studio Code / Skillbox Media

6. Введите во вкладку любой код, например такой:

// Выводим текст в консоль console.log("Привет из Node.js!"); // Создаем функцию function calculateSum(a, b) { return a + b; } // Используем функцию const result = calculateSum(5, 7); console.log(`Сумма чисел: ${result}`);

Русификация: откройте 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 необходимо учитывать особенности каждой среды выполнения.

Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе