Что такое JavaScript и где он работает

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

HTML, CSS и JavaScript: три слоя страницы

Веб-страницу удобно представлять как три слоя:

Кнопка «лайк», в которой участвуют все три слоя:

<!-- HTML: что есть на странице -->
<button class="like">♥ 0</button>

<!-- CSS: как это выглядит -->
<style>
  .like { padding: 8px 16px; border: none; border-radius: 8px; background: #ffe4ec; }
</style>

<!-- JavaScript: что происходит при клике -->
<script>
  let likes = 0;
  const button = document.querySelector('.like');
  button.addEventListener('click', () => {
    likes = likes + 1;
    button.textContent = '♥ ' + likes;
  });
</script>

HTML создаёт кнопку, CSS делает её розовой и скруглённой, а JavaScript хранит число лайков в переменной likes и при каждом клике увеличивает его и обновляет текст: ♥ 1, ♥ 2 и так далее. Без JavaScript кнопка выглядела бы так же, но ничего бы не делала. Детали (let, document, addEventListener) изучим в следующих темах.

💡 HTML и CSS описывают страницу, JavaScript ею управляет. Если задачу решает CSS (например, эффект :hover), JavaScript для неё не нужен.

Первая строка кода: console.log

Устанавливать ничего не нужно — в каждом браузере есть встроенная консоль. Откройте любую вкладку, нажмите F12 или Ctrl+Shift+J (macOS — Cmd+Option+J), перейдите на вкладку Console, введите строки и нажмите Enter:

console.log('Hello, world!');
console.log(2 + 3);
console.log('Price:', 150, 'AZN');

Hello, world!
5
Price: 150 AZN

console.log() означает «выведи в консоль». Значение в скобках называется аргументом: текст в кавычках выводится как есть, выражение 2 + 3 сначала вычисляется, а несколько значений через запятую выводятся в одну строку через пробел. Возможностям консоли посвящена тема «DevTools и консоль».

⚠️ Серое undefined после команды — не ошибка: консоль сообщает, что console.log() ничего не вернул. Ваш текст выведен строкой выше.

Маленькое демо: JavaScript меняет страницу

В реальных проектах код живёт в HTML-файле или подключается к нему. Минимальная страница, где скрипт меняет текст заголовка:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>First script</title>
</head>
<body>
  <h1 id="title">Hello!</h1>
  <script>
    // находим заголовок и заменяем его текст
    document.getElementById('title').textContent = 'Hello from JavaScript!';
  </script>
</body>
</html>

Браузер строит заголовок «Hello!», доходит до <script> и выполняет код: находит элемент с id="title" и заменяет текст. Пользователь сразу видит «Hello from JavaScript!». Способы подключения скриптов — тема следующего урока, работа с элементами — раздел о DOM.

ECMAScript: стандарт и версии языка

JavaScript создал Брендан Айк в 1995 году в компании Netscape — первая версия была написана примерно за десять дней. Чтобы все браузеры понимали один и тот же код, язык стандартизировали: с 1997 года его спецификация называется ECMAScript (ECMA-262), а развивает её комитет TC39. ECMAScript — это правила языка, а JavaScript — их реализация плюс возможности среды (например, document в браузере).

ES2015 изменил сам стиль языка:

// ES5: так писали раньше
var name = 'Aysel';
var greet = function (user) {
  return 'Hello, ' + user + '!';
};
console.log(greet(name)); // → Hello, Aysel!

// ES2015+: современный синтаксис
const userName = 'Aysel';
const greetUser = (user) => `Hello, ${user}!`;
console.log(greetUser(userName)); // → Hello, Aysel!

Результат одинаковый, но современный вариант короче: const вместо var, стрелочная функция, шаблонная строка вместо склеивания через +. В курсе мы пишем современный код, а старый разбираем, чтобы вы могли читать чужие проекты. Новинки последних лет уже работают в браузерах и в Node.js 22:

// ES2024: группировка массива по признаку
const students = [
  { name: 'Aysel', course: 'js' },
  { name: 'Murad', course: 'php' },
];
console.log(Object.keys(Object.groupBy(students, (s) => s.course))); // → [ 'js', 'php' ]

// ES2025: пересечение двух множеств
const frontend = new Set(['html', 'css', 'js']);
console.log(frontend.intersection(new Set(['php', 'js']))); // → Set(1) { 'js' }

Поддержку возможностей проверяют на caniuse.com и MDN.

Движки и среды выполнения

Код выполняет движок JavaScript: программа, которая читает код, компилирует его в машинные инструкции прямо во время работы (JIT-компиляция) и запускает:

• V8 — Chrome, Edge, Opera, а также Node.js и Deno;
• SpiderMonkey — Firefox;
• JavaScriptCore — Safari и все браузеры на iOS, а также Bun.

Движок знает только сам язык: переменные, функции, объекты. Всё остальное даёт среда выполнения (runtime):

«Чистый» JavaScript работает в обеих средах. Файл hello.js с кодом console.log('Welcome to JavaScript!') запускают в Node.js командой в терминале:

node hello.js

Welcome to JavaScript!

Установку Node.js и VS Code разберём в теме «Рабочее окружение».

Java и JavaScript — не одно и то же

Название «JavaScript» — маркетинговый ход 1995 года: Java тогда была на пике популярности. На деле это разные языки: в Java статическая типизация и компиляция в байт-код для JVM, в JavaScript — динамическая типизация и выполнение движком браузера или Node.js. Программа на Java:

public class Main {
    public static void main(String[] args) {
        String name = "Murad";
        System.out.println("Hello, " + name);
    }
}

В Java даже простейшая программа требует класса, метода main и явного типа String. В JavaScript хватит двух строк: const name = 'Murad'; и console.log('Hello, ' + name);.

⚠️ Ищите материалы по запросам «JavaScript» или «JS» — статьи по Java вам не помогут.

Типичные ошибки

1. Неправильный регистр букв. Console и console — разные имена:

Console.log('Hi'); // ✗ ReferenceError: Console is not defined
console.log('Hi'); // ✓ Hi

2. «Умные» кавычки из Word или мессенджера. Типографские кавычки “…” и «…» JavaScript не понимает:

console.log(“Hello”); // ✗ SyntaxError: Invalid or unexpected token
console.log("Hello"); // ✓ обычные прямые кавычки

3. Ожидание, что изменения из консоли сохранятся. Они живут только в текущей вкладке и исчезают после перезагрузки. Постоянный код пишут в файлах проекта.

Итог

• HTML отвечает за структуру, CSS — за оформление, JavaScript — за поведение.
• Правила языка задаёт стандарт ECMAScript; версии выходят ежегодно, ES2015 стал поворотным моментом.
• Код выполняет движок: V8, SpiderMonkey или JavaScriptCore.
• Среда добавляет свои возможности: в браузере — document и window, в Node.js — файлы и сеть.
• console.log() выводит значения в консоль — главный инструмент первых экспериментов.
• Java и JavaScript — разные языки.

Практика

1. В консоли браузера выведите своё имя, а затем свой город — каждое отдельной командой console.log().
2. Используйте консоль как калькулятор: выведите число секунд в сутках и минут в году с пояснением, например console.log('Seconds per day:', 24 * 60 * 60).
3. Распределите задачи по слоям (HTML, CSS, JavaScript): добавить форму входа; сделать кнопку синей; показать «Неверный пароль» после отправки формы; расположить карточки в три колонки; загрузить курс валют с сервера; плавно подсветить ссылку при наведении.
4. На любой странице с h1 выполните в консоли document.querySelector('h1').textContent = 'Edited by me' и document.body.style.background = 'lightyellow'. Затем перезагрузите страницу и объясните, куда пропали изменения.