JavaScript

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

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

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

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

В JavaScript let и const имеют блочную область видимости, а var ограничен функцией и может объявляться повторно. Переменной const нельзя присвоить новое значение, хотя объект внутри const все равно можно изменять. Современный JavaScript по умолчанию использует const, let тогда, когда значение должно меняться, и избегает var.

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

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

Для запроса данных из API в JavaScript используют функцию fetch, а тело ответа читают методом json. Функция fetch возвращает промис, поэтому код обычно ждет результат с помощью async и await. Проверка статуса ответа и перехват ошибок сохраняют работоспособность страницы при сбоях сети.

Промис в JavaScript это объект, который представляет значение, готовое позже, например результат сетевого запроса. Промис может быть в состоянии ожидания, выполнен или отклонен. Код реагирует на результат через then и catch или с помощью async и await.

Async и await позволяют коду JavaScript ждать промис так, что код читается как обычная пошаговая программа. Функция, помеченная async, всегда возвращает промис, а await приостанавливает ее, пока промис не завершится. Ошибки внутри async-функций обрабатываются обычным блоком try и catch.

ES6, или ECMAScript 2015, это крупное обновление стандарта языка JavaScript, вышедшее в 2015 году. ES6 добавил let и const, стрелочные функции, классы, шаблонные строки, деструктуризацию, модули и промисы. ES6 поддерживается всеми современными браузерами, а новые возможности JavaScript с тех пор добавляются каждый год.

Стрелочные функции в JavaScript это более короткая запись функций с синтаксисом =>. У стрелочной функции нет собственного this, поэтому this сохраняет значение из окружающего кода. Стрелочные функции часто используют для коротких колбэков, например тех, что передают в map и filter.

JSON, JavaScript Object Notation, это текстовый формат для хранения и обмена данными в виде пар ключ и значение. JavaScript превращает объект в JSON-текст функцией JSON.stringify, а JSON-текст обратно в объект функцией JSON.parse. Большинство веб-API отправляют и принимают данные в формате JSON.

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

Да, если сначала выучить чистый JavaScript, понять React или Vue будет гораздо проще. Оба фреймворка построены на базовых возможностях JavaScript: функциях, массивах, объектах, модулях и промисах. Разработчики, знающие основы, могут отлаживать код фреймворка, а не гадать.

TypeScript это JavaScript с добавленной статической типизацией, разработанный Microsoft и компилируемый в обычный JavaScript. Типы позволяют редактору кода находить многие ошибки еще до запуска. TypeScript популярен в крупных проектах, где с одним кодом работает много разработчиков.

Страницы на JavaScript загружаются быстрее, если отправлять меньше JavaScript, подключать скрипты с defer или async и разбивать большие бандлы так, чтобы каждая страница загружала только нужное ей. Минификация и сжатие файлов уменьшают объем загрузки. Вынос тяжелой работы из основного потока сохраняет отзывчивость страницы на клики и ввод.

В JavaScript оператор === сравнивает и значение, и тип, а == перед сравнением приводит типы. Например, 0 == "0" дает true, а 0 === "0" дает false. Использование === избавляет от неожиданных результатов и считается обычным правилом в современном JavaScript.

Модули в JavaScript это отдельные файлы, которые экспортируют функции или значения и импортируют нужное из других файлов. Модули упорядочивают код, избавляют от глобальных переменных и упрощают поддержку больших проектов. Браузер загружает модуль через тег script с атрибутом type, равным module.

JavaScript отлаживают в браузере с помощью инструментов разработчика, которые открываются клавишей F12 или пунктом «Просмотреть код» в контекстном меню. Консоль показывает ошибки и выведенные значения, а панель Sources позволяет ставить точки останова и проходить код построчно. Панель Network показывает каждый запрос страницы и ответ на него.

Цикл событий, или event loop, это механизм, который позволяет однопоточному JavaScript выполнять множество задач, не зависая. Медленные операции, такие как таймеры и сетевые запросы, ждут в фоне, а цикл событий запускает каждый готовый колбэк, когда стек вызовов пуст. Долго выполняющийся код все равно блокирует цикл событий, поэтому тяжелые циклы делают страницу неотзывчивой.

Да, JavaScript работает на сервере в средах выполнения Node.js, Deno и Bun. Серверный JavaScript позволяет создавать API, читать файлы и подключаться к базам данных. Один язык и в браузере, и на сервере позволяет команде делиться кодом и навыками.

Безопасность кода на JavaScript обеспечивают так: не вставляют непроверенный текст на страницу через innerHTML, повторно проверяют все входные данные на сервере и не хранят секреты во фронтенд-коде. Все, что отправлено в браузер, пользователи могут прочитать, включая ключи API. Политика Content Security Policy и актуальные зависимости блокируют многие распространенные атаки.

В JavaScript localStorage хранит данные только в браузере, а cookie отправляются на сервер с каждым запросом. Хранилище localStorage вмещает больше данных и подходит для настроек вроде выбранной темы. Cookie с флагами HttpOnly и Secure надежнее для сессий входа, потому что скрипты не могут их прочитать.

Поддерживаемый код на JavaScript пишут небольшими функциями с понятными именами, разбивают на модули, единообразно форматируют и проверяют линтером вроде ESLint. Избегайте глобальных переменных и отделяйте код, меняющий DOM, от кода, работающего с данными. Автоматические тесты делают последующие изменения безопасными.