JavaScript для браузера: что это и как запустить первый прим

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

Для первого примера достаточно HTML-файла и script.js

Содержание

Минимальный пример
Что здесь делает браузер
Console — главный инструмент проверки
Отличие от Node.js
Нужно ли включать JavaScript
Какие возможности доступны в браузере
Как запускать пример без сервера
Частые ошибки
Путать JavaScript и Java
Писать скрипт до элементов без defer
Ждать, что Console выведет текст на страницу
Мини-задание
Что почитать дальше по JavaScript

Минимальный пример

Создайте структуру:

site/
  index.html
  script.js

Файл index.html:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>JavaScript в браузере</title>
  <script src="script.js" defer></script>
</head>
<body>
  <h1 id="title">До JavaScript</h1>
  <button id="button">Нажать</button>
</body>
</html>

Файл script.js:

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

button.addEventListener("click", () => {
  title.textContent = "JavaScript работает в браузере";
});

Откройте index.html в браузере и нажмите кнопку

Что здесь делает браузер

Браузер загружает HTML, строит DOM-дерево, подключает script.js и выполняет JavaScript. Через DOM код может находить элементы и менять страницу

Например:

document.querySelector("#title")

находит элемент с id="title", а:

title.textContent = "Новый текст";

меняет текст на странице

Console — главный инструмент проверки

Добавьте в script.js:

console.log("Скрипт загружен");

Откройте DevTools и вкладку Console. Если сообщение появилось, файл подключен. Если нет, проверьте путь в src, название файла и расширение

Отличие от Node.js

Браузерный JavaScript работает со страницей: document, window, кнопки, формы, DOM. Node.js запускает JavaScript вне браузера: серверы, скрипты, работа с файлами, npm

Пример браузерного кода:

document.querySelector("button");

Пример Node.js-кода:

const fs = require("node:fs");

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

Нужно ли включать JavaScript

Обычно JavaScript включен в браузере по умолчанию. Если сайт пишет, что JavaScript отключен, проверьте настройки браузера и исключения для сайта. Но для написания собственного первого примера чаще достаточно открыть HTML-файл

Какие возможности доступны в браузере

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

document — поиск и изменение элементов страницы;
addEventListener — реакция на клики, ввод, отправку формы;
fetch — запросы к серверу;
localStorage — небольшое хранение настроек в браузере;
setTimeout и setInterval — задержки и повторяющиеся действия;
console — отладка.

Это не значит, что JavaScript может свободно читать любые файлы на компьютере. Браузер ограничивает доступ ради безопасности. Поэтому код сайта работает с HTML-страницей, пользовательскими действиями и разрешенными веб-API

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

Простые примеры с HTML, CSS и script.js можно открыть двойным кликом по index.html. Для учебного старта этого достаточно. Но если вы используете fetch, модули или сложную работу с файлами, лучше запускать локальный сервер

В VS Code удобно поставить расширение Live Server или использовать любой простой dev server. Признак, что все хорошо: адрес начинается с http://localhost, а не с file://

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

Путать JavaScript и Java

JavaScript для браузера — не Java. Не нужно ставить JDK, чтобы кнопка на сайте заработала

Писать скрипт до элементов без defer

Если скрипт в head без defer, элементы могут еще не существовать. Используйте defer или ставьте script в конец body

Ждать, что Console выведет текст на страницу

console.log пишет в DevTools, а не в HTML. Чтобы показать текст на странице, меняйте textContent

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

Сделайте страницу с кнопкой «Показать сообщение». По клику добавьте в абзац текст Готово. Потом откройте Console и убедитесь, что ошибок нет

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

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

JavaScript для браузера: что это и как запустить первый пример