О разделе
Длинные листинги (от ~15 строк) вынесены в каталог code.spirzen.ru и подгружаются в статьях через ExternalCodeEmbed — так HTML энциклопедии не раздувается, а код остаётся с подсветкой, вкладками и сериями "шаг 1…N". Короткие фрагменты (одна строка, пара выражений) по-прежнему прямо в markdown. Диаграммы mermaid и интерактив — на месте или в play.spirzen.ru.
JavaScript оживляет страницу в браузере. Это не Java — разные языки.
ECMAScript задаёт стандарт; в браузере и Node.js сверяйтесь с реализацией через MDN и справочники вендоров:
MDN: JavaScript · TypeScript Handbook · Node.js Docs · React · современный учебник JS · подборка документации.
Термины экосистемы
| Термин | Кратко | Статья раздела |
|---|---|---|
| ECMAScript | официальный стандарт языка (TC39, Ecma International) | Основы, История |
| JavaScript | торговое имя реализации ECMAScript в браузерах и Node.js | Основы |
| JScript | реализация Microsoft в Internet Explorer | История |
| ActionScript | язык платформы Adobe Flash (на базе ECMAScript) | История, Экосистема |
| DOM | дерево объектов HTML/XML в браузере | Работа с HTML, Применение в вебе |
| AJAX | обмен данными с сервером без полной перезагрузки страницы | Асинхронность, История |
| Comet | push-модели поверх HTTP (long polling, поток) | Асинхронность, SSE |
| Веб-приложение | интерактивная программа в браузере (часто SPA) | Применение в вебе |
| V8 | движок JavaScript (Chrome, Node.js) | Применение, Node.js |
| Chromium | открытый браузерный проект (рендер + V8) | Применение |
| Node.js | серверная среда на V8 | Node.js |
| Electron | десктоп на Chromium + Node.js | Применение |
| webOS | платформа устройств (TV) на веб-технологиях | Применение |
| jQuery | библиотека DOM и AJAX (2006+) | jQuery — обзор, справочник |
| React, Vue, Angular, Ember, Ext JS | UI-фреймворки и библиотеки | React (карта тем, первая программа, справочник, галерея компонентов), Vue, Angular, Экосистема, Ext JS |
Сначала: Что такое код и как он работает — общая база — код, блок кода, компиляция и интерпретация, исходный, байт- и машинный код; в этом разделе — синтаксис и особенности языка.
В браузере и Node.js основной поток один; параллелизм — через асинхронность и Web Workers.
Теория — процессы и потоки; в Node — worker_threads, child_process.
В основах JavaScript модель Event Loop и асинхронность сначала разбираются псевдокодом, затем — на JS/Node.
Краткие идиоматичные записи (обмен переменных, slice, spread, Set) — в общей таблице однострочников; разворот и методы строк — в типах данных — строки.
Главы по API и расширению возможностей JavaScript
Если вы хотите углубиться именно в тему API, интеграций и расширений, идите по этому маршруту:
| Шаг | Материал | Что изучаете |
|---|---|---|
| 1 | Основы JavaScript | среда выполнения, Web API, Event Loop |
| 2 | Асинхронное программирование | Promise, async/await, fetch, очереди задач |
| 3 | Работа с HTML + События | доступ к DOM, addEventListener, реакция на действия пользователя |
| 3a | Canvas 2D | программируемая графика на <canvas> |
| 3b | Примеры фигур p5.js | квадрат, цветок, фракталы — готовые скетчи с разбором строк |
| 4 | BOM | window, location, history, navigator, geolocation |
| 5 | Практика · curl / fetch — примеры · Fetch / axios — типовые запросы | рабочие сниппеты и галереи: GET/POST, токен, таймаут, React useEffect — с построчным разбором |
| 6 | Web Share API | системное окно "Поделиться" через navigator.share |
| 7 | Notification API | разрешения и нативные уведомления браузера |
| 8 | Первая программа на React | подключение API в компонентном UI |
| 8a | React — компоненты-рецепты | счётчик, todo, формы, modal, Router — готовый код с разбором строк |
Этот маршрут даёт полноценный переход от нативных API браузера к прикладным интеграциям в реальных интерфейсах.
Важно про TypeScript
Если идёте в сторону крупных frontend/backend-проектов, добавьте в маршрут TypeScript (подробнее в отдельном разделе). Для ветки 7.x в экосистеме TypeScript анонсирован нативный компилятор на Go: это ориентировано на более быструю проверку типов и сборку в больших кодовых базах, особенно в CI/CD. Примеры workflow для Node — GitHub Actions — CI/CD рецепты.
Практический вывод: при обновлении toolchain проверяйте официальные release notes TypeScript и совместимость вашей инфраструктуры.
Маршрут по TypeScript
Пошаговое углубление в отдельный раздел TypeScript:
| Шаг | Тема | Раздел |
|---|---|---|
| 1 | Зачем TS, типы и значения | § Типы и значения |
| 2 | Компилятор, tsconfig, strict | § Компилятор, справочник §11 |
| 3 | Функции, полиморфизм, type-driven | § Разработка на основе типов |
| 4 | Классы, примеси, паттерны | § Примеси и паттерны |
| 5 | Продвинутые типы, тотальность | § Продвинутые типы |
| 6 | Ошибки — Option, Result | § Обработка ошибок |
| 7 | Promise, Worker | § Асинхронность с типами, Асинхронное программирование в JavaScript |
| 8 | Миграция JS-проекта | § Поэтапная миграция |
| 9 | Monorepo, NPM | § Monorepo и публикация |
| 10 | Шпаргалка | Справочник TypeScript |
С чего начать
| Шаг | Материал | Зачем |
|---|---|---|
| 0 | Ошибки и исключения (теория) → обработка в JS, типы Error | До углубления в async и фреймворки |
| 1 | Основы JavaScript | Синтаксис, браузер |
| 1a | Типы данных | Примитивы, методы строк (charAt, includes, slice, …) |
| 1b | TypeScript (подробнее в отдельном разделе) | Типизация и масштабирование больших проектов |
| 2 | Первая программа на Node.js → Express | Консоль, npm, http, REST API |
| 2a | Точка входа в Node.js | require.main, ESM и прямой node file.js |
| 3 | React · галерея · Vue · Next | UI |
| 3b | Fullstack | API + фронт, CORS |
| 4 | Angular | Крупные SPA (по желанию) |
| 5 | Electron + React | Десктоп |
| 5a | TypeScript (подробнее в отдельном разделе) → Практикум | Игры на TS (Canvas, онлайн-карты) |
В конце раздела — чек-лист самопроверки.
Последовательность "сервер → браузер → сборка": 262 (Node до Express) → типы и Date → async и fetch → Fetch / axios — типовые запросы → DOM → Canvas → p5.js — фигуры → Webpack / Vite → Express → Fullstack.
Для тем по runtime и фреймворкам используйте отдельную карту: JavaScript экосистема — Runtime и Frameworks. Там собраны ветки Node.js, Frontend Frameworks и Meta Frameworks.
VS Code, встроенный терминал, Live Server и Emmet для HTML/CSS — DevTools в браузере — справочник, общие принципы отладки — Отладка, IDE — редакторы.
Целый index.html с разбором тегов — HTML-страницы целиком.
Макеты до первого скрипта — HTML + CSS — готовые макеты, Tailwind — Tailwind — готовые блоки, анимации — CSS-анимации — готовые эффекты.
Частые ошибки при старте
| Ошибка | Что делать |
|---|---|
| Прыжки между языками | Закройте одну "первую программу", потом сравнивайте |
| Код без запуска | Выполните пример локально |
| Сразу большой фреймворк | Сначала база раздела, потом REST/UI |
Что попробовать
- Шаг 1 из таблицы.
- Три непонятных термина — найдите статьи в оглавлении раздела.
- Другой язык — только после своей рабочей первой программы.
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Play ITЗагрузка интерактивного демо…
Отдельная версия в браузере: WebEditor — Онлайн-редактор HTML, CSS и JavaScript с живым предпросмотром — обновляется при вводе.
JS экосистема — Runtime и Frameworks
5 элементов
Основы JavaScript
Основы JavaScript - стандарт ECMAScript, модель выполнения и базовые конструкции языка.
Что требуется знать перед началом изучения языка программирования JavaScript
JavaScript — это язык программирования, который позволяет создавать интерактивные веб-страницы, серверные приложения и мобильные программы.
Рекомендации по разработке на JavaScript
Для создания массивов используется литеральная нотация. Конструктор Array не применяется.
Работа с HTML в JavaScript
DOM в JavaScript — поиск элементов, classList, видимость, DOMContentLoaded, формы, выделение текста, атрибуты, создание и изменение HTML.
Простые приложения на JavaScript
Простые приложения на JavaScript - базовые сценарии, структура кода и быстрый старт с практическими примерами.
Форматы JavaScript
Расширения файлов определяют способ обработки кода средой выполнения или компилятором.
История языка JavaScript
История JavaScript - происхождение языка, ключевые этапы развития и влияние на современный веб.
Синтаксис и пунктуация в JavaScript
Такое именование представляет собой соглашение между разработчиками. Классический JavaScript не обеспечивает реальной приватности через подчеркивания.
Ключевые слова языка JavaScript
JavaScript содержит набор зарезервированных слов, которые имеют специальное значение в языке. Эти слова нельзя использовать в качестве идентификаторов для переменных, функций или классов.
Встроенные функции JavaScript
Встроенные функции JavaScript - ключевые методы массивов, строк и объектов для повседневной разработки.
Структура и подключение JavaScript-кода
Подключение скриптов в HTML, структура файла, CommonJS и ESM в Node.js, кэш модулей и package.json.
Применение JavaScript в вебе и за его пределами
JavaScript используется для создания кроссплатформенных мобильных приложений, которые работают на iOS и Android с использованием единой кодовой базы.
Функции в JavaScript
Что такое функция, параметры, аргументы, возврат значения.
Область видимости и замыкания в JavaScript
Область видимости и замыкания в JavaScript - `var/let/const`, лексическое окружение и практические паттерны.
Переменные в JavaScript
Для своей работы, функции используют какие-то данные. Эти данные являются по умолчанию чем-то неопределённым.
Типы данных в JavaScript
Динамическая типизация, примитивные и ссылочные типы данных.
Выражения и операторы в JavaScript
Выражения и операторы в JavaScript - вычисления, приоритеты и читаемые правила построения логики.
Циклы в JavaScript
Циклы в JavaScript - `for`, `while`, `do...while`, управление итерациями и типичные ошибки в условиях.
Асинхронное программирование в JavaScript
Promise (от английского) – обещание JavaScript сделать что-то асинхронное и сообщить результат — успех (fulfilled), ошибка (rejected), ожидание (pending) – ещё выполняется.
Массивы в JavaScript
Массивы, Map и Set в JavaScript — сводка операций, методы прототипа и выбор структуры данных.
Работа с объектами и прототипами
Работа с объектами и прототипами в JavaScript - устройство прототипной цепочки и практики безопасной работы с объектной моделью.
События и обработка событий в браузере
События в браузере — `addEventListener`, распространение (capture и bubble), делегирование, `stopPropagation` и drag-and-drop.
Консоль, отладка и боль
Консоль и отладка в JavaScript - инструменты DevTools для диагностики кода, DOM и производительности.
Встроенные типы ошибок и их обработка
AggregateError — используется для представления нескольких ошибок одновременно (например, в Promise.any()).
Обработка исключений в JavaScript
try/catch/finally, throw, cause, async/await, Promise rejection, unhandledrejection и границы Express.
Экосистема JavaScript - инструменты и фреймворки
Модули, tree shaking, Webpack и Vite — экосистема JavaScript, сборка и выбор инструментов.
Справочник по JavaScript
Справочник-шпаргалка по JavaScript — типы, синтаксис, стандартная библиотека, типовые паттерны. Не заменяет пошаговое обучение. Учебный курс — раздел.
TypeScript
Краткий обзор TypeScript в курсе JavaScript: вход в учебный раздел 5.10, отличия от JS и ссылки на статьи.
Шпаргалка по TypeScript
Справочник-шпаргалка по TypeScript — типы, синтаксис, стандартная библиотека, типовые паттерны. Не заменяет пошаговое обучение. Учебный курс — раздел.
JavaScript — практика
Практика JavaScript - реализация логики калькулятора через работу с DOM, событиями и обработкой состояний.
Тестирование JavaScript — Vitest и Testing Library
Unit- и компонентные тесты на Vitest, jsdom, React Testing Library и тесты Node API — с разбором терминов и примеров для новичка.
Виджеты интерфейса на ванильном JavaScript
Промо-карусель на классах ES6 — init, автопрокрутка, DOM, события и жизненный цикл компонента без фреймворков.
Регулярные выражения в JavaScript
Литералы и RegExp, флаги, группы, методы строк и типичные задачи — валидация, поиск, замена.
Валидация форм в JavaScript
Constraint Validation API и свойства полей по типам input — validity, checkValidity, setCustomValidity, reportValidity.
Отмена запросов и поток событий с сервера
AbortController с fetch, таймауты, EventSource (SSE) и отличие от WebSocket.
Наблюдатели DOM — Intersection, Resize и Mutation
Ленивая загрузка, реакция на размер блока и отслеживание изменений DOM без опроса координат на каждом кадре.
Хранение данных в браузере
Cookies, sessionStorage, localStorage и IndexedDB — когда что выбирать, лимиты и риски XSS.
ES-модули в браузере и обзор Temporal API
type="module", import/export в странице, динамический import, import.meta и зачем готовится Temporal вместо Date.
Объектная модель браузера (BOM)
window, location, history, navigator, geolocation, размеры окна и прокрутка — API окружения страницы вне DOM-дерева.
Чтение файлов в браузере
input type="file", объект File, FileReader, предпросмотр и отправка на сервер через FormData.
Web Components — Custom Elements и Shadow DOM
Собственные HTML-теги, изолированная разметка и стили, слоты и когда использовать вместо фреймворка.
Кнопка "Поделиться" — DOM, события и Web Share API
querySelector, addEventListener, async/await и navigator.share — как открыть системное окно "Поделиться" с заголовком, текстом и ссылкой на страницу.
Нативные уведомления в браузере — Notification API
Notification.requestPermission, new Notification, Service Worker showNotification и правила запуска уведомлений в браузере без отдельного приложения.
Canvas 2D — программируемая графика в браузере
Тег canvas, CanvasRenderingContext2D — заливка, контуры, пути, текст, изображения, градиенты, трансформации и работа с пикселями.
JavaScript — итоги
Итоги раздела «JavaScript» — FAQ и краткие ответы по теме.
JavaScript — чек-лист
Вопросы по JavaScript — язык, браузер, Node, React/Vue/Next, Angular и безопасность.
JavaScript — о разделе
JavaScript — браузер, Node.js, TypeScript, React и Vue; npm, Express; сравнение подходов к фронтенду и backend.
В подборках
Статья входит в тематические подборки и блок "С чего начать?" на главной. Соседние шаги того же маршрута:
База программиста — Low-code и No-code платформы, Python — о разделе, Автоматическое управление памятью, Java — о разделе, Разработка и отладка — о разделе, Документация и инструменты Java (Microsoft).
Веб-разработка — HTML — о разделе, CSS — о разделе, Веб-браузеры, PHP — о разделе, Веб-сайты и веб-приложения — о разделе, ASP.NET - веб-платформа Microsoft.
Бэкенд и серверная разработка — SQL — о разделе, Python — о разделе, Контейнеризация и оркестрация — о разделе, Java — о разделе, Микросервисы и интеграция — о разделе, Платформа .NET — о разделе.