Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#База знаний</a>

2 <ul><li>4 июн 2025</li>

3 <li>0</li>

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

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

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

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

8 Содержание

9 <ul><li><a>Почему способов запуска JavaScript так много</a></li>

10 <li><a>Способы запуска JavaScript</a></li>

11 <li><a>Как запустить JavaScript в браузере</a></li>

12 <li><a>Как запустить JavaScript с помощью Visual Studio Code</a></li>

13 <li><a>Практика: запуск кода разными способами</a></li>

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

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

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

17 <ul><li>Читать код и строить внутреннее "дерево" всех инструкций.</li>

18 <li>Компилировать часто повторяющиеся куски в быстрый машинный код (это называется JIT-компиляция, от Just-In-Time).</li>

19 <li>Передавать команды на исполнение процессору компьютера.</li>

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

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

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

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

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

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

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

27 <ul><li>Через консоль разработчика в браузере.</li>

28 <li>С помощью отдельного файла .js, подключённого к странице.</li>

29 <li>С помощью редактора кода, например Visual Studio Code. Среду выполнения Node.js можно довольно легко к нему подключить.</li>

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

31 <ul><li><a>codepen.io</a></li>

32 <li><a>jsfiddle.net</a></li>

33 <li><a>flems.io</a></li>

34 <li><a>codesandbox.io</a></li>

35 <li><a>jsbin.com</a></li>

36 <li><a>replit.com</a></li>

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

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

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

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

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

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

43 <!DOCTYPE html>  <html>  <head>  <script> //Начало блока JavaScript-кода alert('Привет!'); // Показываем всплывающее окно с текстом "Привет!" </script>  </head>  <body>  </body>  </html> Этот код выведет сообщение сразу при открытии страницы.

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

45 <ul><li>В редакторе нажмите Файл → Сохранить как.</li>

46 <li>В поле Имя файла напишите index.html.</li>

47 <li>Нажмите Сохранить.</li>

48 </ul>4. Откройте файл в браузере.

49 <ul><li>Найдите файл index.html на компьютере.</li>

50 <li>Запустите его, он откроется в браузере.</li>

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

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

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

54 <ul><li>Когда JavaScript-код хранится отдельно от HTML-разметки, его легче редактировать и в нём проще искать ошибки.</li>

55 <li>Один и тот же файл .js можно подключать на несколько страниц.</li>

56 <li>Браузер может кэшировать внешний скрипт - при следующем визите он не станет загружаться заново, и страница будет работать быстрее.</li>

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

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

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

60 <!DOCTYPE html> <html> <head> <title>Внешний JavaScript</title>  <script src="script.js"></script> </head> <body> <button id="myButton">Нажми меня</button> </body> </html>3. Создайте JavaScript-файл. Откройте новый файл в том же редакторе и вставьте следующий код:

61 document.addEventListener('DOMContentLoaded', function() { // Ждём, пока вся HTML-страница полностью загрузится document.getElementById('myButton').addEventListener('click', function() { // Находим кнопку по id "myButton" alert('Привет из внешнего файла!'); // При клике показываем всплывающее окно с сообщением }); }); // Закрываем обе функции: сначала ту, что реагирует на клик, затем ту, что ждёт загрузки страницы.4. Сохраните файл с именем<a>script.js</a>. Убедитесь, что файл сохранён в ту же папку my-project.

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

63 <ul><li>Откройте папку my-project.</li>

64 <li>Запустите файл index.html. Страница откроется в браузере.</li>

65 <li>Нажмите кнопку - появится всплывающее сообщение.</li>

66 </ul>Если не работает:

67 <ul><li>Убедитесь, что оба файла находятся в одной папке.</li>

68 <li>Проверьте, что файлы называются правильно: index.html и script.js (без .txt в конце).</li>

69 <li>В HTML-файле строка подключения должна быть такая:</li>

70 </ul><script src="script.js"></script>Консоль - это встроенный в браузер инструмент для работы с JavaScript. Здесь можно писать команды, сразу видеть результат, а также искать ошибки на странице. В консоли удобно тренироваться и отлаживать код. Изменения, внесённые через консоль, временные - они не сохраняются и исчезают при перезагрузке страницы.

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

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

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

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

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

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

77 console.log('Привет из консоли!');НажмитеEnter - результат появится сразу.

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

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

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

81 // Создаем объект let user = { name: "Анна", age: 25 }; // Модифицируем его свойства user.profession = "Программист"; // Проверяем результат console.log(user);Экспериментировать с элементами веб-страницы.Допустим, вы их изучаете и хотите закрепить на практике основные свойства и методы.

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

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

84 // Воплощаем в жизнь миф о том, что фронтендеры только кнопочки перекрашивают. // Создаём кнопку 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);Отлаживать код.Если нужно проверить работу некоторой функции, которая есть в вашем проекте, её можно вызвать прямо из консоли.

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

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

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

88 <ul><li>LTS- стабильная версия.</li>

89 <li>Current - последняя версия с новыми фичами, может быть нестабильной.</li>

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

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

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

93 <ul><li>Windows: нажмитеWin + R, введите cmd и нажмитеEnter.</li>

94 <li>macOS: нажмитеCmd + Space, введите Терминал, нажмитеEnter.</li>

95 <li>Linux: нажмитеCtrl + Alt + T.</li>

96 </ul>Введите команду:

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

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

99 1. Установите редактор<a>Visual Studio Code</a>.

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

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

102 Скриншот:<a>Visual Studio Code</a>/ Skillbox Media4. Создайте новый документ.

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

104 Скриншот:<a>Visual Studio Code</a>/ Skillbox Media6. Введите во вкладку любой код, например такой:

105 // Выводим текст в консоль 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, установите и перезапустите редактор - интерфейс станет русскоязычным.

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

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

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

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

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

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

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

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

114 <ul><li><a>Browser Event loop: micro and macro tasks, call stack, render queue: layout, paint, composite</a> - статья о цикле событий, порядке выполнения кода и о том, как разработчики могут его оптимизировать.</li>

115 <li><a>Node.js Best Practices</a> - крупнейшая подборка лучших практик работы с <a>Node.js</a>: архитектурные паттерны, полезные советы и прочее.</li>

116 </ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>