JS экосистема — Runtime и Frameworks
5 элементов
Основы JavaScript
Основы JavaScript - стандарт ECMAScript, модель выполнения и базовые конструкции языка.
Что требуется знать перед началом изучения языка программирования JavaScript
JavaScript — это язык программирования, который позволяет создавать интерактивные веб-страницы, серверные приложения и мобильные программы.
Рекомендации по разработке на JavaScript
Для создания массивов используется литеральная нотация. Конструктор Array не применяется.
Работа с HTML в JavaScript
DOM в JavaScript — поиск элементов, формы, выделение текста, атрибуты, создание и изменение 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 - реализация логики калькулятора через работу с 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.