Глава 22 · Веб-разработка с Python

JavaScript: программирование в браузере

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

JavaScript (JS) — язык программирования, широко используемый в веб-разработке. Ядро языка стандартизовано спецификацией ECMAScript (ECMA-262). В браузере JavaScript выполняет программную логику страницы: обрабатывает события, работает с DOM, изменяет содержимое страницы и может отправлять сетевые запросы.

JavaScript работает не только в браузере

JavaScript используется не только в браузерах. Он также работает в серверных и других средах выполнения, например Node.js. Поэтому JavaScript — не просто «язык для браузера», хотя именно браузерное применение рассматривается в этом разделе.

Основные свойства JavaScript

Что за язык JavaScript

Типизация и память

Динамическая типизация

Автоматическое управление памятью (сборка мусора)

Модель объектов

Прототипная модель объектов

Функции — значения первого класса

Стили программирования

Императивный стиль

Объектный стиль

Функциональный стиль

ECMAScript, DOM и Web API — не одно и то же

ECMAScript — стандарт, описывающий сам язык: синтаксис, типы, операторы, функции. DOM (Document Object Model) и такие функции, как fetch(), не входят в ECMAScript — это отдельные программные интерфейсы (Web API), которые браузер предоставляет коду JavaScript в дополнение к самому языку.

JavaScript добавляет странице поведение: реакцию на клики, изменение содержимого без перезагрузки страницы, проверку формы перед отправкой. JavaScript нужен не каждой странице: простая статья или документ хорошо работают на одном HTML (плюс CSS для оформления) — браузер отображает такую страницу без единой строчки JavaScript. JavaScript нужен именно там, где странице требуется реагировать на действия пользователя без нового запроса к серверу.

DOM — представление страницы, с которым работает JavaScript

Когда браузер разбирает HTML, он строит из тегов дерево объектов в памяти — DOM (Document Object Model). JavaScript не редактирует исходный текст HTML-файла — он находит нужный узел в этом дереве и меняет его:

povedenie.html

<button id="knopka">Нажми меня</button>
<p id="tekst">Пока ничего не произошло.</p>

<script>
  const knopka = document.getElementById("knopka");
  const tekst = document.getElementById("tekst");

  knopka.addEventListener("click", function () {
    tekst.textContent = "Кнопку нажали!";
  });
</script>

Страница с кнопкой «Нажми меня» и текстом «Пока ничего не произошло.» до клика — До клика: обработчик подписан, но событие ещё не произошло.

Та же страница сразу после клика по кнопке: текст сменился на «Кнопку нажали!» — После клика: та же страница, без перезагрузки — JavaScript просто заменил содержимое узла #tekst.

addEventListener("click", ...) подписывает функцию на событие — клик по кнопке. Событий много: "click", "submit" (отправка формы), "input" (ввод текста) и другие — код выполняется только тогда, когда событие действительно произошло.

Знакомые конструкции в другом синтаксисе

И в Python, и в JavaScript есть переменные, функции, условия и циклы. Но их системы типов, модели объектов и среды выполнения существенно различаются: например, JavaScript использует прототипную модель объектов и фигурные скобки вместо отступов. Если вы понимаете Python, освоить основы JavaScript будет заметно проще, чем начинать с нуля.

Проверка формы прямо в браузере

JavaScript может проверить поле формы ещё до отправки — и сразу показать подсказку, не дожидаясь ответа сервера:

validaciya.js

forma.addEventListener("submit", function (event) {
  if (pole.value.trim() === "") {
    event.preventDefault();
    oshibka.textContent = "Поле не должно быть пустым";
  }
});

event.preventDefault() останавливает обычную отправку формы — страница не перезагрузится, пока ошибка не исправлена. Ту же проверку всё равно необходимо повторить и на сервере (раздел 22.31): пользователь может отправить запрос вообще без браузера, в обход любого JavaScript.

fetch() — запрос к серверу без перезагрузки страницы

Функция fetch() отправляет HTTP-запрос из JavaScript и получает ответ, не перезагружая страницу целиком:

fetch.js

fetch("/api/tasks")
  .then(function (response) { return response.json(); })
  .then(function (data) { console.log(data); });

Что такое /api/tasks и что именно возвращает такой запрос — в разделе 22.16.

Три языка вместе — HTML, CSS и JavaScript — и есть тот самый «фронтенд», который видит и с которым взаимодействует пользователь. Дальше в главе речь пойдёт о том, что происходит на сервере, — то есть о Python.

Официальная документация: MDN — JavaScript, ECMA-262 (ECMAScript).

← Назад

CSS: оформление и расположение элементов веб-страницы

Первое веб-приложение на Flask