Что такое JavaScript и где он используется

Урок: Что такое JavaScript и где он используется

Введение

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

Теперь задай себе вопрос: кто «заставляет» всё это работать?

HTML отвечает за структуру страницы. CSS — за внешний вид. Но именно JavaScript делает страницу «живой».

Если провести аналогию:

  • HTML — это каркас дома;
  • CSS — это дизайн и интерьер;
  • JavaScript — это электричество, вода и всё, что заставляет дом функционировать.

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

Что такое JavaScript простыми словами

JavaScript — это язык программирования, который позволяет:

  • выполнять действия;
  • реагировать на события;
  • изменять страницу в реальном времени.

В отличие от HTML и CSS, JavaScript — это не про описание, а про поведение.

Давай посмотрим на самый простой пример.

Пример

console.log('Привет, мир!');

Что происходит

  • console.log() — это команда, которая выводит текст в консоль браузера;
  • строка 'Привет, мир!' — это данные, которые мы выводим.

Это первый шаг: JavaScript умеет выполнять команды.

Как JavaScript работает в браузере

Когда ты открываешь сайт, браузер загружает HTML, CSS и JavaScript.

JavaScript выполняется внутри браузера и может:

  • находить элементы на странице;
  • изменять их;
  • реагировать на клики, ввод текста и другие действия.

Пример: реакция на кнопку

В браузере на странице с тегом <button> обычно пишут так:

document.querySelector('button').addEventListener('click', () => {
  alert('Кнопка нажата!');
});

Кнопка «Запустить пример» в теории выполняет код в песочнице без document и alert. Ниже — тот же смысл «сделать что-то по действию», но через объявление функции и её вызов, чтобы в выводе сразу было видно результат:

function handleClick() {
  console.log('Кнопка нажата!'); // в браузере здесь часто вызывают alert(...)
}

handleClick();

Разбор

В браузерном варианте:

  • document — объект, который представляет всю страницу;
  • querySelector('button') — находит кнопку;
  • addEventListener('click', ...) — говорит: «сделай что-то при клике»;
  • alert() — показывает всплывающее окно.

В запускаемом примере выше: объявлена функция handleClick, затем она вызывается — так ты сразу видишь в консоли строку, которую в интерфейсе обычно показывают после клика.

Идея простая: пользователь что-то делает → JavaScript реагирует.

Изменение страницы с помощью JavaScript

JavaScript может менять содержимое страницы прямо во время работы.

Пример

В браузере заголовок меняют через DOM:

const title = document.querySelector('h1');
title.textContent = 'Новый заголовок';

В песочнице теории нет настоящего document. Ниже — та же идея «взять объект с текстом и заменить поле», чтобы пример выполнился и показал новое значение в консоли:

const title = { textContent: 'Старый заголовок' };
title.textContent = 'Новый заголовок';
console.log('Текст заголовка сейчас:', title.textContent);

Что здесь происходит

В браузере мы находим элемент <h1> и меняем его текст через textContent. В запускаемом примере вместо DOM-узла использован обычный объект с полем textContent, чтобы показать ту же операцию присваивания и сразу вывести новое значение в консоль.

Страница в браузере при этом меняется без перезагрузки. Это одна из ключевых возможностей JavaScript.

Где используется JavaScript

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

1. Веб-разработка (frontend)

Это основное применение.

JavaScript используется для:

  • интерактивных интерфейсов;
  • форм и валидации;
  • динамического контента;
  • SPA-приложений (React, Vue, Angular).

Практически любой современный сайт использует JavaScript.

2. Серверная разработка (backend)

С помощью Node.js JavaScript можно запускать на сервере.

Пример

Полный сервер на Node.js выглядит так (запуск в терминале: node server.js):

const http = require('http');

const server = http.createServer((req, res) => {
  res.end('Hello from server');
});

server.listen(3000);

В окне «Запустить пример» нет модуля http. Ниже — только то, что уходит клиенту в res.end(...), чтобы увидеть вывод без сервера:

console.log('Hello from server');

Разбор

В Node.js: require('http') подключает модуль, createServer() создаёт сервер, res.end() отправляет ответ клиенту. В консоли теории показана только строка ответа — то, что пользователь или тест увидели бы в теле HTTP-ответа.

То есть JavaScript может не только управлять интерфейсом, но и обрабатывать запросы.

3. Автоматизация и тестирование

Здесь как раз появляется Playwright.

JavaScript используется для:

  • написания автотестов;
  • автоматизации браузера;
  • проверки UI и API.

Пример

В реальном проекте Playwright тест подключает библиотеку и открывает браузер:

import { test, expect } from '@playwright/test';

test('страница открывается', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Здесь нет установленного @playwright/test. Ниже — логика проверки заголовка в миниатюре: строка заголовка и проверка регулярным выражением, как делает toHaveTitle:

const pageTitle = 'Example Domain';
const matches = /Example/i.test(pageTitle);

console.log('Условный заголовок страницы:', pageTitle);
console.log('Проверка «заголовок содержит Example» прошла бы?', matches);

Что происходит

В Playwright: test() описывает тест, page.goto() открывает страницу, expect() проверяет результат. В упрощённом примере с console.log показана только проверка заголовка регулярным выражением — ту же идею выполняет expect(page).toHaveTitle(...).

Здесь JavaScript управляет браузером.

4. Мобильные приложения

С помощью React Native можно писать мобильные приложения на JavaScript.

Это означает, что один язык используется и для веба, и для мобильных платформ.

5. Desktop-приложения

С помощью Electron создаются приложения вроде:

  • VS Code;
  • Slack;
  • Discord.

JavaScript используется для создания интерфейса и логики.

Почему JavaScript стал таким популярным

Есть несколько причин, почему JavaScript используется почти везде:

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

Во-вторых, он универсален. Один и тот же язык можно использовать:

  • на клиенте;
  • на сервере;
  • в тестах;
  • в мобильных приложениях.

В-третьих, у него огромная экосистема — библиотеки, фреймворки, инструменты.

Практический смысл

Если ты изучаешь frontend или автоматизацию (например, Playwright), JavaScript — это основной инструмент.

Он позволяет:

  • управлять страницей;
  • писать тесты;
  • работать с API;
  • строить полноценные приложения.

Без понимания JavaScript невозможно глубоко работать с вебом.

Итоговое понимание

JavaScript — это язык, который делает веб-страницы интерактивными и управляемыми.

Но его роль гораздо шире: это универсальный инструмент, который используется и в браузере, и на сервере, и в тестировании.

Главная идея в том, что JavaScript — это про поведение и логику. Он отвечает на вопрос: «что должно происходить».

Именно поэтому, изучая JavaScript, ты фактически получаешь ключ ко всей современной веб-разработке.