Мой первый JS

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"fbrhh"},{"data":{"image":{"id":"6982fa9edb2e39562ee89fd7"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dqgs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что значит сделать JavaScript — понятная карта вариантов","type":"header-two","key":"1vor8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Запрос «как сделать JavaScript» звучит так, будто JavaScript — это отдельная программа, которую нужно «установить» или «создать». На практике речь почти всегда о другом: вы хотите написать код на JavaScript, подключить его к странице или приложению и запустить так, чтобы он выполнялся предсказуемо. Важно сразу развести три разных смысла слова «сделать» — тогда вы быстрее выберете правильную среду, инструменты и подход.","type":"unstyled","key":"2a34v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать интерактивность на сайте — написать скрипт, который реагирует на клики, ввод, прокрутку, меняет DOM и стили, работает с формами и запросами.","type":"unordered-list-item","key":"dost2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать серверную логику — написать JavaScript под Node.js, чтобы обрабатывать запросы, работать с файлами, базами данных, очередями и задачами по расписанию.","type":"unordered-list-item","key":"3u9oo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сделать приложение — использовать JavaScript как язык логики в десктопе, мобайле, расширениях браузера или кроссплатформенных оболочках.","type":"unordered-list-item","key":"d6vno"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript — это язык программирования, а «движок» для выполнения — это среда. В браузере код исполняет движок (например, V8, SpiderMonkey, JavaScriptCore) вместе с Web API, а вне браузера — Node.js (тоже на базе движка V8, но с другим набором API). Поэтому один и тот же синтаксис может работать по-разному в зависимости от окружения.","type":"unstyled","key":"9gjb8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в браузере — скрипты для интерактивности страниц","type":"header-three","key":"7krac"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере JavaScript обычно решает задачи интерфейса. Вы пишете код, который взаимодействует с документом HTML через DOM, подписывается на события (click, input, submit), делает HTTP-запросы (fetch), сохраняет данные в хранилищах (localStorage, cookies) и управляет отображением. Самое важное слово здесь — «интерактивность». Если пользователь нажал кнопку, ваш код должен сработать за миллисекунды, не «подвесив» страницу.","type":"unstyled","key":"ca902"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типовые задачи — всплывающие окна, раскрывающиеся меню, валидация форм, галереи, фильтры, сортировка, бесконечная прокрутка.","type":"unordered-list-item","key":"890go"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты — DevTools, консоль, вкладки Sources и Network, профилировщики.","type":"unordered-list-item","key":"3s4al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограничения — безопасность (CORS, CSP), отсутствие доступа к файловой системе, разные версии браузеров.","type":"unordered-list-item","key":"4dca"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript на сервере — Node.js для API, бэкенда и утилит","type":"header-three","key":"d6ssr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js позволяет запускать JavaScript как обычную программу на вашем компьютере или сервере. Здесь вы уже не работаете с DOM, зато получаете доступ к файловой системе, сетевым сокетам, процессам, пакетам npm, инструментам сборки и серверным фреймворкам. Node.js особенно удобен для REST API, WebSocket, SSR, CLI-утилит, автоматизации и фоновых задач.","type":"unstyled","key":"36v8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типовые задачи — веб-сервер, прокси, парсинг файлов, обработка изображений, генерация PDF, скрипты деплоя, боты.","type":"unordered-list-item","key":"vkla"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сильные стороны — огромная экосистема npm, хорошая работа с асинхронным вводом-выводом.","type":"unordered-list-item","key":"5kof9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ограничения — CPU-тяжелые вычисления требуют осторожности, иначе будет страдать отзывчивость процесса.","type":"unordered-list-item","key":"92jjj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в приложениях — десктоп, мобильные, расширения","type":"header-three","key":"164nh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript давно вышел за пределы «скриптов для браузера». Десктоп-приложения можно делать на Electron, мобильные — на React Native или через PWA, расширения браузеров — на WebExtensions. При этом важно понимать, что «внутри» обычно всё равно находится браузерный движок или его компоненты, а значит правила безопасности, производительности и асинхронности остаются актуальными.","type":"unstyled","key":"2ep23"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Расширения — контент-скрипты, фоновые скрипты, доступ к вкладкам и сетевым событиям.","type":"unordered-list-item","key":"76qhh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"PWA — офлайн-режим, сервис-воркеры, кэширование, установка «как приложения».","type":"unordered-list-item","key":"9l8kd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Десктоп — доступ к файловой системе и системным API через обертки.","type":"unordered-list-item","key":"166k6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда нужен чистый JS, а когда лучше библиотека или фреймворк","type":"header-three","key":"8gfpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Новички часто бросаются в фреймворки слишком рано и потом не понимают, что происходит «под капотом». Практичное правило такое: если задача маленькая и локальная — берите чистый JavaScript. Если интерфейс сложный, много состояний, маршрутизация, компоненты и повторное использование — тогда оправдан фреймворк. Чем раньше вы научитесь уверенно писать на чистом JS, тем легче будет освоить React, Vue или Angular.","type":"unstyled","key":"38h4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чистый JavaScript — виджеты, лендинги, небольшие формы, простые страницы, учебные проекты.","type":"unordered-list-item","key":"3cpr4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Библиотеки — точечные решения, например для графиков, дат, валидации, запросов.","type":"unordered-list-item","key":"cvs0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фреймворки — сложные SPA, большие команды, масштабирование кода, единая архитектура.","type":"unordered-list-item","key":"ckvqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отдельно стоит помнить про технический долг. Фреймворк даёт структуру, но приносит зависимость от обновлений, сборки, экосистемы и инструментария. Если вы делаете небольшую страницу, то «тяжёлая» инфраструктура может оказаться дороже, чем выгода от удобства.","type":"unstyled","key":"63aht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какие знания нужны до старта — HTML, CSS, основы работы браузера","type":"header-three","key":"912es"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы «сделать JavaScript» на сайте, полезно понимать три слоя веба: структура (HTML), внешний вид (CSS) и логика (JS). Минимальный набор для уверенного старта не огромный, но он должен быть осознанным.","type":"unstyled","key":"41e3u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTML — теги, атрибуты, структура документа, формы, кнопки, поля ввода.","type":"unordered-list-item","key":"10pq6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS — классы, селекторы, базовая раскладка, понимание каскада и наследования.","type":"unordered-list-item","key":"dti1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер — что такое DOM, события, загрузка ресурсов, кэш, консоль ошибок.","type":"unordered-list-item","key":"4g587"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы понимаете, как браузер читает HTML сверху вниз, как строит DOM и когда выполняются скрипты, вы будете реже сталкиваться с ситуацией «всё написано правильно, но ничего не работает».","type":"unstyled","key":"q261"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Быстрый старт без лишней теории — первый рабочий код за 10 минут","type":"header-two","key":"cjfuc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы быстрее почувствовать результат, сделаем минимальный сценарий: напишем код, увидим вывод в консоли и на странице, а затем проверим, как искать ошибки. Даже если вы планируете изучать JavaScript глубоко, этот короткий цикл полезен — он формирует привычку проверять гипотезы и не бояться отладки.","type":"unstyled","key":"a19nb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самый короткий Hello world — alert, console.log и вывод на страницу","type":"header-three","key":"98ut6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самые короткие способы увидеть результат — модальные окна и консоль. Это не продакшен-решения, но идеальные инструменты для первого шага.","type":"unstyled","key":"2q2qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вариант 1 — показать сообщение через alert. Он блокирует страницу, пока пользователь не нажмёт ОК, поэтому в реальных интерфейсах его используют редко, но для обучения он понятен.","type":"unstyled","key":"btnlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alert('Привет, мир!');","type":"unstyled","key":"76v31"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вариант 2 — вывести сообщение в консоль через console.log. Консоль — основной инструмент разработчика для диагностики, логирования и быстрого тестирования.","type":"unstyled","key":"a5djr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.log('Привет, мир!');","type":"unstyled","key":"b0gn3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вариант 3 — вывести текст на страницу. Самый безопасный базовый вариант — менять textContent у элемента, чтобы не вставлять HTML-строки и не создавать риск XSS.","type":"unstyled","key":"csfg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// HTML:

\nconst out = document.querySelector('#out');\nout.textContent = 'Привет, мир!';","type":"unstyled","key":"c3mjv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы видите сообщение в консоли и на странице, значит цепочка «код → выполнение → результат» работает, и дальше можно расширять сценарии.","type":"unstyled","key":"8skpr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где запускать код прямо сейчас — DevTools, песочницы, локальные файлы","type":"header-three","key":"1d6sj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Есть три быстрых пути запуска JavaScript для новичка. Они отличаются скоростью старта и уровнем контроля.","type":"unstyled","key":"29na6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 1 — DevTools в браузере. Вы открываете любую страницу, нажимаете F12 или Ctrl+Shift+I, переходите на вкладку Console и вводите код. Это идеальная среда для коротких экспериментов: переменные, функции, проверки выражений, работа с DOM на текущей странице.","type":"unstyled","key":"4mgnh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Плюсы — мгновенно, без файлов и настроек.","type":"unordered-list-item","key":"2l21e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минусы — код не сохраняется как проект, сложнее структурировать.","type":"unordered-list-item","key":"1o4p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 2 — онлайн-песочницы. В них уже есть заготовка HTML, CSS и JS, а результат виден рядом. Это удобно, когда нужно поделиться ссылкой, показать баг или собрать мини-демо за 15 минут.","type":"unstyled","key":"qo4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CodePen — быстрые демки для интерфейса и простых виджетов.","type":"unordered-list-item","key":"fd7cd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSFiddle — минималистичный вариант для экспериментов.","type":"unordered-list-item","key":"4kktf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"StackBlitz и CodeSandbox — ближе к реальному проекту, часто с npm и сборкой.","type":"unordered-list-item","key":"6tdm0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Способ 3 — локальные файлы. Это самый «правильный» путь, если вы хотите стать разработчиком. Вы создаёте папку проекта, пишете index.html и script.js, подключаете скрипт и открываете страницу в браузере. Так вы учитесь структуре проекта, путям, кэшу и дисциплине разработки.","type":"unstyled","key":"7r26f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\n\n \n Мой первый JS\n \n\n\n \n

\n\n","type":"unstyled","key":"c2l5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// script.js\nconst btn = document.querySelector('#btn');\nconst out = document.querySelector('#out');\n\nbtn.addEventListener('click', () => {\n out.textContent = 'Кнопка нажата';\n});","type":"unstyled","key":"7u1is"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как проверить что все работает — ошибки в консоли и источник проблемы","type":"header-three","key":"c8uto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На старте почти все проблемы сводятся к двум категориям: скрипт не подключился или код упал с ошибкой. Алгоритм проверки один и тот же.","type":"unstyled","key":"5khqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте DevTools и вкладку Console — если есть красные ошибки, прочитайте текст и строку файла.","type":"ordered-list-item","key":"b6bu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перейдите на вкладку Network и обновите страницу — убедитесь, что script.js загружается со статусом 200, а не 404.","type":"ordered-list-item","key":"3m6bc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поставьте в начале файла console.log('script loaded'); — если не видите лог, значит файл не выполняется.","type":"ordered-list-item","key":"d3vsb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте селекторы — document.querySelector возвращает null, если элемент не найден.","type":"ordered-list-item","key":"emed2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверьте порядок загрузки — если код обращается к DOM до того, как DOM построен, используйте defer или перенос подключения вниз body.","type":"ordered-list-item","key":"d32sr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Очень полезная привычка — читать ошибки до конца. В TypeError часто написано, что именно не функция или не объект. В ReferenceError указано, какая переменная не объявлена. В SyntaxError — где синтаксис сломан. Если вы научитесь расшифровывать эти сообщения, скорость обучения вырастет в разы.","type":"unstyled","key":"1l8du"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"8tvg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Среда разработки — чтобы писать быстрее и без мучений","type":"header-two","key":"reae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Среда разработки — это не только редактор. Это связка инструментов, которая ускоряет цикл «написал → проверил → исправил». Для JavaScript ключевые элементы: DevTools, редактор кода, Node.js и удобные песочницы для быстрых экспериментов. Правильно собранная среда экономит часы уже на первой неделе.","type":"unstyled","key":"3grmp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузерные инструменты разработчика — DevTools","type":"header-three","key":"d93hv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DevTools есть в каждом современном браузере. В Chrome и Edge это панель на базе Chromium, в Firefox — своя реализация, в Safari — Web Inspector. Принцип одинаковый: вы получаете доступ к консоли, исходникам, сети и хранилищам. Новичку достаточно уверенно освоить несколько вкладок, потому что они закрывают 80% задач диагностики.","type":"unstyled","key":"7an54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Console — вывод, ошибки, предупреждения, интерактивный запуск","type":"header-three","key":"96ddt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Console — место, где JavaScript разговаривает с разработчиком. Здесь вы видите ошибки, выполняете выражения, проверяете типы и значения, логируете важные шаги. Консоль удобна тем, что позволяет проверить гипотезу за 10–20 секунд без правки файлов.","type":"unstyled","key":"an4mo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.log — обычный вывод для проверки логики и данных.","type":"unordered-list-item","key":"vp2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.warn — предупреждения, когда ситуация нежелательна, но не критична.","type":"unordered-list-item","key":"dk3u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.error — ошибки, которые требуют внимания и обычно должны быть исправлены.","type":"unordered-list-item","key":"fhhsh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.time и console.timeEnd — замер времени выполнения куска кода в миллисекундах.","type":"unordered-list-item","key":"85gfr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практика для новичка: логируйте не «всё подряд», а ключевые точки. Например, «данные загружены», «обработчик клика вызван», «форма валидна». Так вы быстрее понимаете, где цепочка ломается.","type":"unstyled","key":"3st2a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Sources — точки останова, пошаговая отладка, watch и call stack","type":"header-three","key":"3kfft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда логов недостаточно, нужна отладка. Вкладка Sources позволяет поставить breakpoint и выполнить код пошагово. Это особенно важно при работе с событиями и асинхронностью, когда порядок выполнения не очевиден.","type":"unstyled","key":"1jptc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Breakpoint — остановка на строке, чтобы посмотреть значения переменных.","type":"unordered-list-item","key":"7k6gl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Step over — перейти на следующую строку, не заходя внутрь функций.","type":"unordered-list-item","key":"b0gpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Step into — зайти внутрь функции и пройти её пошагово.","type":"unordered-list-item","key":"ffttq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Call stack — стек вызовов, показывает цепочку функций, которые привели к текущей строке.","type":"unordered-list-item","key":"86hg0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Watch — список выражений, которые вы хотите наблюдать в реальном времени.","type":"unordered-list-item","key":"e9qe1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пошаговая отладка экономит время, когда проблема в одном из 10 условий. Вместо того чтобы гадать, вы видите фактические значения и путь выполнения.","type":"unstyled","key":"d9hm1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Network — запросы, статусы, тайминги, CORS и кеширование","type":"header-three","key":"f48qs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Network показывает реальную картину сетевого взаимодействия. Это критично, когда вы подключаете внешние скрипты, шрифты, API, картинки и файлы модулей. Ошибка в URL, статус 404, неправильные заголовки или блокировка CORS — всё это видно здесь.","type":"unstyled","key":"3uhf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"200 — запрос успешен.","type":"unordered-list-item","key":"a8c8g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"304 — ресурс взят из кэша, поэтому вы могли не увидеть обновления.","type":"unordered-list-item","key":"cclje"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"404 — файл или endpoint не найден.","type":"unordered-list-item","key":"e6e1l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"401 и 403 — проблемы с авторизацией и правами доступа.","type":"unordered-list-item","key":"311qa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CORS — политика браузера, запрещающая запросы к чужому домену без разрешающих заголовков сервера.","type":"unordered-list-item","key":"347fh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы работаете с fetch и не понимаете, почему данных нет, начинайте с Network. Там видно, был ли запрос, что отправили, что вернул сервер и сколько заняло по времени.","type":"unstyled","key":"65fi2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Application — localStorage, sessionStorage, cookies, service worker","type":"header-three","key":"a06bj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Application помогает понимать состояние клиента. Здесь вы видите хранилища, куки, кэш и сервис-воркеры. Для новичка это место, где чаще всего «лечат» странное поведение после экспериментов.","type":"unstyled","key":"2ohju"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"localStorage — хранилище «ключ-значение», сохраняется между перезапусками браузера.","type":"unordered-list-item","key":"dd2ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"sessionStorage — живёт только в пределах вкладки и исчезает при закрытии.","type":"unordered-list-item","key":"1q56i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"cookies — небольшие пары данных со сроком жизни и флагами безопасности.","type":"unordered-list-item","key":"1nr1g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"service worker — фоновый скрипт, который может перехватывать запросы и кэшировать ресурсы.","type":"unordered-list-item","key":"7neri"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Performance и Lighthouse — производительность и рекомендации","type":"header-three","key":"1aejo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Performance позволяет записать профиль и увидеть, где тратится время: длинные задачи JavaScript, частые перерасчёты стилей, перерисовки, лишние операции с DOM. Lighthouse делает аудит и выдаёт рекомендации. Для простых проектов достаточно понять, что любое взаимодействие, которое занимает больше 100–200 мс, пользователь начинает ощущать как задержку.","type":"unstyled","key":"2hn45"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактор кода — что поставить и как настроить","type":"header-three","key":"d9h9f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Редактор ускоряет разработку за счёт автодополнения, подсказок, форматирования и удобной навигации. В большинстве учебных сценариев оптимальный выбор — Visual Studio Code.","type":"unstyled","key":"24dji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Visual Studio Code — базовая настройка под JavaScript","type":"header-three","key":"dhipn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минимальная настройка занимает 15–30 минут и быстро окупается.","type":"unstyled","key":"4cd03"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Включите форматирование при сохранении, чтобы код не расползался по стилю.","type":"unordered-list-item","key":"21jj5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настройте автосохранение, если вам важно быстро проверять изменения.","type":"unordered-list-item","key":"4unvj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте встроенный терминал для node и npm, чтобы не переключаться между окнами.","type":"unordered-list-item","key":"5gj3k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полезные расширения — линтер, форматтер, подсказки, сниппеты","type":"header-three","key":"12qa0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Достаточно нескольких расширений, которые дают максимум пользы без перегруза.","type":"unstyled","key":"72t41"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint — предупреждает об ошибках и анти-паттернах до запуска.","type":"unordered-list-item","key":"9tuh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Prettier — приводит формат к единому виду, экономит время на споры о стиле.","type":"unordered-list-item","key":"7lj9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Live Server — запускает локальный сервер и обновляет страницу при изменениях.","type":"unordered-list-item","key":"8mmto"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Path Intellisense — помогает не ошибаться в путях при импортах.","type":"unordered-list-item","key":"1mflu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Горячие клавиши и быстрые приемы — поиск, рефакторинг, мультикурсор","type":"header-three","key":"b0c9k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Быстрые приёмы заметно ускоряют работу уже на проекте из 1 000–3 000 строк. Чем раньше вы их освоите, тем меньше будете уставать от рутины.","type":"unstyled","key":"2u3m7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск по проекту — находит определения и использования за секунды.","type":"unordered-list-item","key":"6annt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переименование символа — меняет имя во всех местах без ручной правки.","type":"unordered-list-item","key":"e7ml0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мультикурсор — редактирует несколько строк одновременно.","type":"unordered-list-item","key":"cp88j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Перемещение строк и блоков — помогает быстро реорганизовать код.","type":"unordered-list-item","key":"271d2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js — как запускать JavaScript вне браузера","type":"header-three","key":"9q519"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js важен даже для фронтенда. Многие инструменты разработки, сборщики и тест-раннеры работают именно в Node.js, поэтому базовые навыки запуска и понимания окружения нужны почти всегда.","type":"unstyled","key":"9q7kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое Node.js и где он реально нужен","type":"header-three","key":"41gig"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js — среда выполнения JavaScript как процесса операционной системы. Внутри — V8 плюс API для работы с файлами, сетью, потоками и процессами. Отсюда основные сценарии: сервер, утилиты, автоматизация, сборка, тестирование.","type":"unstyled","key":"agj1i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Установка и проверка — node, npm, npx","type":"header-three","key":"1mslu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"После установки вам доступны три команды, и каждая решает свою задачу.","type":"unstyled","key":"dssut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"node — запускает файл или интерактивную REPL-сессию.","type":"unordered-list-item","key":"51ipg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm — ставит пакеты и запускает скрипты из package.json.","type":"unordered-list-item","key":"669vh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npx — запускает утилиты из npm-экосистемы без глобальной установки.","type":"unordered-list-item","key":"bjnft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверка: node -v и npm -v должны вернуть версии. Если команд нет, значит PATH настроен неверно.","type":"unstyled","key":"eohgd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как выбрать версию — LTS и совместимость зависимостей","type":"header-three","key":"2tueh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для стабильности выбирайте LTS. В большинстве проектов именно LTS минимизирует конфликты версий и сюрпризы от обновлений.","type":"unstyled","key":"1qv6p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый запуск файла — node app.js и базовые параметры","type":"header-three","key":"f8mbj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте app.js, добавьте вывод и запустите через node. Это базовый шаг, который подтверждает, что окружение готово.","type":"unstyled","key":"atqc0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"console.log('Node.js работает');","type":"unstyled","key":"2lf6m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Онлайн-песочницы — быстро тестировать идеи","type":"header-three","key":"e2epk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Песочницы особенно полезны, когда нужно быстро проверить логику, собрать демо или показать воспроизводимый баг.","type":"unstyled","key":"gkkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CodePen, JSFiddle, StackBlitz, CodeSandbox — когда что удобнее","type":"header-three","key":"2gvmj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если задача про DOM и визуальный результат, удобнее CodePen. Если нужен быстрый минимализм, выбирайте JSFiddle. Если нужен проект с зависимостями и npm, лучше StackBlitz или CodeSandbox.","type":"unstyled","key":"c2sod"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как делиться кодом и воспроизводить баги","type":"header-three","key":"866md"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы получить помощь быстро, делайте минимальный воспроизводимый пример: небольшой код, где проблема проявляется стабильно. Это профессиональный навык, который резко ускоряет обучение.","type":"unstyled","key":"2aurg"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"4b5l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как подключить JavaScript к сайту — все рабочие способы","type":"header-two","key":"3r77o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключение JavaScript — это про порядок выполнения и про то, где лежит код. Ошибки новичков чаще всего связаны с тем, что браузер выполняет скрипт раньше, чем построит DOM, или файл не находится по пути. Разберём варианты от простого к современному.","type":"unstyled","key":"8ljic"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Встроенный скрипт в HTML — когда можно так делать","type":"header-three","key":"7cnel"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Встроенный скрипт — это код прямо в HTML. Он удобен для маленьких примеров и быстрых экспериментов, но плохо масштабируется. Когда кода больше 50–100 строк, его стоит выносить в отдельный файл, иначе будет сложно поддерживать и переиспользовать.","type":"unstyled","key":"aeoek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ardrj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тег script и место подключения — head и body","type":"header-three","key":"7bnom"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если подключить скрипт в head без defer или async, браузер сначала загрузит и выполнит JavaScript, и только потом продолжит строить DOM. Если ваш код ищет элементы, которых ещё нет, вы получите null. Самое простое правило для новичка: либо подключайте скрипт в конце body, либо используйте defer.","type":"unstyled","key":"ap1bm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почему порядок важен — DOM еще не готов и код падает","type":"header-three","key":"cvi8s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM строится постепенно. document.querySelector возвращает null, если элемент не найден. Дальше любая попытка вызвать метод у null приводит к ошибке. Отсюда типичная цепочка: «не сработал обработчик», «в консоли TypeError», «причина — элемент не найден или DOM не готов».","type":"unstyled","key":"9q0nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внешний файл script.js — базовый стандарт проекта","type":"header-three","key":"8peea"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отдельный файл делает проект чище. Вы обновляете только script.js, видите изменения, можете подключать линтер, тесты, модули. Для большинства проектов это стандарт.","type":"unstyled","key":"en8f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как создать файл .js и подключить через src","type":"header-three","key":"fumhd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создайте script.js в папке проекта и подключите в HTML. Если используете defer, скрипт выполнится после построения DOM.","type":"unstyled","key":"6eeq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"ahovl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"defer и async — что ускоряет загрузку и что ломает порядок","type":"header-three","key":"874em"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"defer сохраняет порядок и выполняет скрипты после построения DOM. async выполняет сразу после загрузки и может нарушить порядок. Поэтому для кода интерфейса почти всегда выбирают defer, а async оставляют для независимых виджетов и аналитики.","type":"unstyled","key":"1va79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кеширование — почему изменения не видно и как обновлять","type":"header-three","key":"ajou9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы не видите правки, вероятно, браузер отдал старый файл из кэша. В разработке помогают жесткое обновление, отключение кэша в Network и смена query-параметра версии. Это нормальная часть работы с вебом.","type":"unstyled","key":"f69a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модули ES Modules — современный подход к структуре кода","type":"header-two","key":"bvto5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модули позволяют явно описывать зависимости и разделять ответственность. В результате легче поддерживать проект, повторно использовать функции и снижать риск конфликтов имен.","type":"unstyled","key":"5nvq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"type=\"module\" и базовые правила модулей","type":"header-three","key":"d1n60"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Подключите точку входа как модуль. Браузер будет загружать импорты по указанным путям.","type":"unstyled","key":"3h7ap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2i6hb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"export и import — как делить код на части","type":"header-three","key":"1m4na"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разделяйте утилиты, работу с DOM и сетью по разным файлам и импортируйте их в точке входа.","type":"unstyled","key":"ep07i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// dom.js\nexport function setText(selector, value) {\n const el = document.querySelector(selector);\n if (!el) return;\n el.textContent = value;\n}","type":"unstyled","key":"e0qki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// app.js\nimport { setText } from './dom.js';\nsetText('#out', 'Модули работают');","type":"unstyled","key":"bgns7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Относительные пути и расширения файлов — частые ошибки","type":"header-three","key":"jds4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер часто требует расширение файла в import. Также важен регистр букв в путях. При ошибках смотрите Network и Console: там будет 404, CORS или сообщение о невозможности загрузки модуля.","type":"unstyled","key":"a1lmm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Динамический import — ленивые загрузки и оптимизация","type":"header-three","key":"cgcgg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Динамический import подгружает модуль по требованию и помогает ускорить старт, если часть функциональности нужна редко.","type":"unstyled","key":"fan70"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура проекта — чтобы код не превратился в хаос","type":"header-two","key":"edhpq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чем раньше вы начнете структурировать код, тем легче будет расти. Даже учебный проект на 1 500–2 500 строк быстро превращается в хаос без простых правил.","type":"unstyled","key":"f6b3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минимальная структура для учебного проекта — index.html, style.css, app.js","type":"header-three","key":"cdk79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Три файла достаточно, чтобы освоить связку HTML + CSS + JS и понять, как подключается логика, как устроены события и как меняется DOM.","type":"unstyled","key":"brc4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Структура для модульного проекта — папки, точки входа, общие утилиты","type":"header-three","key":"57o86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда файлов становится больше, выделяйте src и папки по назначению. Полезный ориентир: если вы дважды копируете функцию, скорее всего, ей место в utils.","type":"unstyled","key":"2euga"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Именование файлов и функций — читаемость и поддержка","type":"header-three","key":"dapur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имена — часть архитектуры. Они помогают «держать модель в голове». Для новичка это особенно важно, потому что понятное имя снижает когнитивную нагрузку.","type":"unstyled","key":"86vb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарии — когда помогают, а когда вредят","type":"header-three","key":"7d1fm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Комментарий должен объяснять причину и ограничения, а не пересказывать очевидный код. Если комментарий устаревает, он начинает вредить больше, чем помогает.","type":"unstyled","key":"5gqhj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Основы синтаксиса JavaScript — то, без чего дальше не поедет","type":"header-two","key":"3tpdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дальше в статье будет DOM, события и асинхронность, но без базового синтаксиса вы будете постоянно спотыкаться. Поэтому зафиксируем фундамент: переменные, типы, операторы, условия и циклы.","type":"unstyled","key":"6i0d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные и область видимости","type":"header-three","key":"3o307"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте const по умолчанию и let, когда переменная меняется. Это уменьшает количество ошибок с переназначениями и делает намерения очевидными.","type":"unstyled","key":"5erda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"var, let, const — что использовать в 2026","type":"header-three","key":"400p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы пишете современный код, var лучше воспринимать как «наследие». Его нужно понимать, но редко использовать в новых проектах.","type":"unstyled","key":"cmsii"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Блочная область видимости и замыкания","type":"header-three","key":"77jd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Замыкания часто встречаются в обработчиках событий и фабриках. Они объясняют, почему функция «помнит» переменную count и продолжает увеличивать её между вызовами.","type":"unstyled","key":"dcjm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поднятие hoisting — почему код ведет себя странно","type":"header-three","key":"filmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Hoisting — причина многих новичковых ошибок. Не обращайтесь к переменным до объявления, и ваши программы станут предсказуемыми.","type":"unstyled","key":"45bkf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы данных и преобразования","type":"header-three","key":"a1l3t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript легко получить строку вместо числа или наоборот. Делайте преобразования явно и используйте ===, чтобы сравнения работали так, как вы ожидаете.","type":"unstyled","key":"8l200"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примитивы и объекты — ключевое различие","type":"header-three","key":"12tql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты сравниваются по ссылке, поэтому два одинаковых литерала объекта не равны друг другу. Это важно для работы с состоянием и копированием.","type":"unstyled","key":"8vq6i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"null и undefined — как не путаться","type":"header-three","key":"6m7me"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Договоритесь о смыслах: undefined — нет значения, null — значение намеренно пустое. Тогда проверки станут понятнее.","type":"unstyled","key":"364ji"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неявные преобразования и строгие сравнения","type":"header-three","key":"ccs40"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте === и !==. Это снижает риск скрытых преобразований и неожиданных истин.","type":"unstyled","key":"d09ia"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"NaN и Infinity — ловушки вычислений","type":"header-three","key":"200ie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяйте корректность чисел через Number.isNaN и Number.isFinite, особенно если берете данные из форм и API.","type":"unstyled","key":"428qi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Операторы и выражения","type":"header-three","key":"tai6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выражения возвращают значение. Это важно, потому что многие конструкции в JavaScript можно собирать компактно, но лучше не жертвовать ясностью ради краткости.","type":"unstyled","key":"89uqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Арифметика, строки, шаблонные литералы","type":"header-three","key":"fc1nr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Шаблонные литералы удобны для форматирования строк, а проблемы точности чисел учитывайте в финансовых расчетах, храня значения в минимальных единицах.","type":"unstyled","key":"d8qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравнения и логика — &&, ||, ??, ?.","type":"header-three","key":"esr62"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Помните разницу между || и ??. || воспринимает 0, '' и false как «нет значения», а ?? — только null и undefined. Это влияет на значения по умолчанию.","type":"unstyled","key":"58kbn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Операторы присваивания и деструктуризация","type":"header-three","key":"bkilt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Деструктуризация уменьшает шум и помогает явно назвать поля, которые вы используете. Но не злоупотребляйте, если выражение становится слишком длинным.","type":"unstyled","key":"27c69"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Условия и циклы","type":"header-three","key":"3ei0i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Условия описывают ветвления, циклы — повторения. В реальных проектах вы часто будете использовать методы массивов, но циклы остаются фундаментом.","type":"unstyled","key":"7ekgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if, else, switch — где что удобно","type":"header-three","key":"28lrh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"if удобен для сложных условий, switch — для выбора по одному значению. В switch следите за break.","type":"unstyled","key":"dp2ms"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for, while, do..while — базовые сценарии","type":"header-three","key":"dle1k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for — когда знаете количество повторений, while — когда нужно крутиться до условия, do..while — когда нужен хотя бы один проход.","type":"unstyled","key":"deltl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for..of и for..in — не путать и применять правильно","type":"header-three","key":"2mvj6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"for..of — для значений коллекций, for..in — для ключей объектов. Для объектов часто удобнее Object.keys и for..of.","type":"unstyled","key":"cbi4a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"break, continue — читаемость и контроль потока","type":"header-three","key":"f5vf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"break и continue полезны, но при большом количестве ветвлений лучше выносить логику в функции и упрощать поток выполнения.","type":"unstyled","key":"38jev"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"bvmgn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции — главный инструмент JavaScript","type":"header-two","key":"2vl2b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если описывать JavaScript одним словом, то для практики это будет «функции». Они связывают интерфейс и данные, превращают набор инструкций в повторяемые действия и дают главный строительный блок для архитектуры — от маленького виджета до большого приложения. Функция в JavaScript — это объект, который можно хранить в переменной, передавать как аргумент, возвращать из другой функции и привязывать к событиям. Поэтому JavaScript часто называют языком с «функциями первого класса».","type":"unstyled","key":"73dqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для новичка важно понять три вещи. Во-первых, функция — это не только «кусок кода», но и контракт: что на входе, что на выходе, какие побочные эффекты. Во-вторых, функции помогают управлять сложностью: вы делите задачу на маленькие шаги и тестируете каждый отдельно. В-третьих, почти всё в браузере завязано на колбэках и событиях, а значит умение читать и писать функции определяет скорость вашего роста.","type":"unstyled","key":"37inh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Function declaration и function expression — различия","type":"header-three","key":"4cr0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В JavaScript есть два базовых способа объявить функцию: как декларацию и как выражение. Они похожи по результату, но отличаются поведением при поднятии и удобством композиции.","type":"unstyled","key":"1ib4f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Function declaration — объявление функции отдельной конструкцией. Такая функция поднимается целиком, и её можно вызвать до строки объявления.","type":"unordered-list-item","key":"4fmdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Function expression — функция как значение, присвоенное переменной. Поднимается только переменная, а значение появится после выполнения строки.","type":"unordered-list-item","key":"jhav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"// Function declaration\nsayHi();\nfunction sayHi() {\n console.log('Привет');\n}\n\n// Function expression\nconst sayBye = function () {\n console.log('Пока');\n};\nsayBye();","type":"unstyled","key":"e8kpn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практическое правило: для понятного кода в небольших скриптах декларации удобны, потому что дают ясное «оглавление» функций. Для модульного кода и колбэков чаще используют выражения и стрелочные функции, потому что их проще передавать и комбинировать.","type":"unstyled","key":"1jq9s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стрелочные функции — синтаксис и особенности this","type":"header-three","key":"6n6mc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стрелочная функция сокращает запись и меняет важную семантику: у неё нет собственного this, arguments и прототипа для new. Она «захватывает» this из внешней области видимости. Это особенно полезно в обработчиках и методах, где вы хотите сохранить контекст.","type":"unstyled","key":"1ju25"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const add = (a, b) => a + b;\n\nconst user = {\n name: 'Алекс',\n showNameLater() {\n setTimeout(() => {\n console.log(this.name);\n }, 500);\n }\n};","type":"unstyled","key":"33tb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Где стрелочные функции особенно уместны: короткие колбэки (map, filter), обработчики событий, функции-утилиты без собственного состояния. Где осторожнее: методы объектов, если вы рассчитываете на динамический this, и ситуации, где важен доступ к arguments. В таких случаях лучше обычная функция.","type":"unstyled","key":"a4ffs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стрелка хорошо подходит, когда this должен быть «как снаружи».","type":"unordered-list-item","key":"as66a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обычная функция подходит, когда this зависит от того, как вызвали метод.","type":"unordered-list-item","key":"4hngm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для обработчиков DOM часто лучше обычная функция, если вам нужен this как элемент.","type":"unordered-list-item","key":"4bhp1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const btn = document.querySelector('#btn');\nbtn.addEventListener('click', function () {\n // здесь this указывает на кнопку\n this.classList.add('active');\n});","type":"unstyled","key":"4qr8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры по умолчанию и rest параметры","type":"header-three","key":"bonmd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Параметры по умолчанию делают API функции устойчивым к отсутствующим аргументам. Это снижает количество проверок внутри и делает намерение явным.","type":"unstyled","key":"99uc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function greet(name = 'Гость') {\n return `Привет, ${name}`;\n}","type":"unstyled","key":"bud4j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Rest параметры собирают «хвост» аргументов в массив. Это удобно для функций, которые принимают переменное количество значений: суммирование, логирование, построение строк.","type":"unstyled","key":"c5jrn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function sum(...numbers) {\n return numbers.reduce((acc, n) => acc + n, 0);\n}","type":"unstyled","key":"591qf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важно не путать rest параметры и arguments. arguments — псевдомассив в обычных функциях и отсутствует у стрелочных. Rest — настоящий массив и более предсказуем.","type":"unstyled","key":"arcu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возврат значений и ранний return","type":"header-three","key":"4j1on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функция может возвращать значение через return. Если return не указан, результатом будет undefined. Хорошая практика — всегда понимать, что ваша функция обещает вернуть, и не смешивать в одной функции «возвращает данные» и «меняет внешний мир» без явной причины.","type":"unstyled","key":"e8v8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ранний return упрощает чтение: вместо глубоких вложенных if вы быстро выходите из функции при некорректных условиях. Это улучшает поддержку и снижает риск ошибок.","type":"unstyled","key":"f6q35"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function getDiscount(price, promo) {\n if (typeof price !== 'number' || !Number.isFinite(price)) return 0;\n if (!promo) return 0;\n if (promo === 'SAVE10') return price * 0.10;\n return 0;\n}","type":"unstyled","key":"d0q8u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ранние возвраты сокращают вложенность.","type":"unordered-list-item","key":"eu4aq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверки входных данных лучше держать в начале.","type":"unordered-list-item","key":"b2pv4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возвращаемое значение должно быть одного типа или легко предсказуемым.","type":"unordered-list-item","key":"75sd6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Колбэки — зачем нужны и как не запутаться","type":"header-three","key":"9r2d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Колбэк — это функция, которую вы передаёте другой функции, чтобы она вызвала её позже. В браузере колбэки встречаются повсюду: обработчики событий, таймеры, завершение запроса, перебор массива. Смысл в том, что вы описываете «что сделать», а не «когда именно это произойдёт».","type":"unstyled","key":"1sodb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Главный источник путаницы — контекст и порядок. Чтобы не запутаться, придерживайтесь трёх правил: давайте колбэку понятное имя, не делайте его слишком длинным и следите, что именно он захватывает из внешней области.","type":"unstyled","key":"bpph2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"function onSaveSuccess(result) {\n console.log('Сохранено', result);\n}\n\nsaveData(data, onSaveSuccess);","type":"unstyled","key":"f34vl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если логика колбэка выросла, вынесите её в отдельную функцию. Это улучшает читаемость и снижает риск «пирамиды колбэков», когда вложенность делает код хрупким.","type":"unstyled","key":"2qh79"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Массивы и объекты — хранение и обработка данных","type":"header-two","key":"dufo0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Большая часть кода в JavaScript — это работа с данными: списки товаров, результаты поиска, поля формы, ответы API. Массивы удобны для упорядоченных коллекций, объекты — для сущностей с полями, а Set и Map закрывают специальные сценарии, где важны уникальность и ключи любого типа. Освоив эти структуры, вы начинаете писать «по-взрослому»: меньше ручных циклов, больше декларативной обработки.","type":"unstyled","key":"fbe2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Массивы в практике","type":"header-three","key":"2q2fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Массив — это упорядоченная коллекция. В массиве важно понимать индексы, длину и то, что многие методы либо создают новый массив, либо меняют существующий. Новичкам полезно разделять эти подходы: иммутабельная обработка проще для логики и отладки, а мутабельная иногда быстрее и экономнее по памяти.","type":"unstyled","key":"ddn7f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание, доступ, изменение","type":"header-three","key":"1qd76"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создать массив можно литералом или через Array. Доступ по индексу начинается с 0. При изменении массива учитывайте, что некоторые операции могут быть дорогими для больших коллекций, потому что сдвигают элементы.","type":"unstyled","key":"aqvlh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const list = ['a', 'b', 'c'];\nlist[1] = 'B';\nlist.push('d'); // добавляет в конец\nlist.pop(); // удаляет с конца\nlist.unshift('x'); // добавляет в начало\nlist.shift(); // удаляет с начала","type":"unstyled","key":"t33t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"push и pop обычно быстрые, потому что работают с концом массива.","type":"unordered-list-item","key":"fb17n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"shift и unshift могут быть медленнее на больших массивах, потому что сдвигают индексы.","type":"unordered-list-item","key":"5vbrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"slice делает копию части массива и не меняет оригинал.","type":"unordered-list-item","key":"q4vu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"splice меняет массив на месте и удобен для удаления или вставки в середину.","type":"unordered-list-item","key":"2p5s9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"map, filter, reduce — базовая тройка для данных","type":"header-three","key":"ajt2n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Эти методы помогают мыслить не «как перебрать», а «какой результат получить». map преобразует каждый элемент, filter отбирает элементы по условию, reduce сворачивает массив в одно значение. Они особенно полезны для данных из API и состояния интерфейса.","type":"unstyled","key":"eness"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const prices = [1_200, 3_500, 800];\nconst withTax = prices.map(p => Math.round(p * 1.20));\n\nconst onlyBig = prices.filter(p => p >= 1_000);\n\nconst total = prices.reduce((acc, p) => acc + p, 0);","type":"unstyled","key":"5hhcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический совет: давайте колбэкам понятные имена параметров. Если в reduce вы пишете (a, b), через неделю вы забудете, что такое a и b. Лучше (sum, price) или (acc, item), чтобы смысл читался без комментариев.","type":"unstyled","key":"1c69d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"find, some, every, includes — проверка и поиск","type":"header-three","key":"9esf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"find возвращает первый элемент, который удовлетворяет условию, или undefined. some проверяет, есть ли хотя бы один подходящий элемент, every — подходят ли все. includes проверяет наличие значения, удобно для простых проверок.","type":"unstyled","key":"2pi53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const users = [{id: 1}, {id: 2}];\nconst u2 = users.find(u => u.id === 2);\n\nconst hasAdmin = users.some(u => u.role === 'admin');\nconst allHaveId = users.every(u => typeof u.id === 'number');\n\nconst tags = ['js', 'dom', 'api'];\nconst hasDom = tags.includes('dom');","type":"unstyled","key":"vef1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"sort — сортировка без сюрпризов","type":"header-three","key":"el3r4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Метод sort сортирует массив на месте и по умолчанию сравнивает элементы как строки. Это причина классической ошибки: [2, 10, 3] превращается в [10, 2, 3]. Чтобы сортировать числа, всегда задавайте компаратор.","type":"unstyled","key":"97a1u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const nums = [2, 10, 3];\nnums.sort((a, b) => a - b); // [2, 3, 10]","type":"unstyled","key":"ffocs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для строк стоит учитывать локаль и регистр. В интерфейсах на русском языке используйте localeCompare, чтобы сортировка была ожидаемой для пользователя.","type":"unstyled","key":"4khu4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const names = ['Елена', 'Анна', 'Ян'];\nnames.sort((a, b) => a.localeCompare(b, 'ru'));","type":"unstyled","key":"fkioj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"sort меняет исходный массив — делайте копию через slice, если вам нужен оригинал.","type":"unordered-list-item","key":"4tjnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компаратор должен возвращать отрицательное, ноль или положительное число.","type":"unordered-list-item","key":"btme6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сортировка больших массивов лучше сопровождать профилированием, если есть лаги.","type":"unordered-list-item","key":"1u3cp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты и работа со свойствами","type":"header-three","key":"euok9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объект в JavaScript — это коллекция пар «ключ-значение». Он удобен для описания сущности: пользователь, товар, заказ, настройки. Важно понимать два способа доступа к свойству: через точку и через квадратные скобки. Скобки нужны, когда ключ хранится в переменной или содержит символы, недоступные для точечной записи.","type":"unstyled","key":"31duh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание объектов и чтение свойств","type":"header-three","key":"slpk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const product = {\n id: 101,\n title: 'Наушники',\n price: 3_990\n};\n\nconsole.log(product.title);\nconsole.log(product['price']);","type":"unstyled","key":"1i1k0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если свойства нет, результат будет undefined. Это нормально, но важно отличать «нет свойства» от «свойство есть и оно равно undefined». Для безопасного доступа к вложенным данным используйте опциональную цепочку.","type":"unstyled","key":"dmnu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const city = user.address?.city;","type":"unstyled","key":"9jv98"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сокращенная запись, вычисляемые ключи","type":"header-three","key":"aqa53"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сокращенная запись полезна, когда имя переменной совпадает с именем ключа. Вычисляемые ключи помогают строить объекты динамически, например, из настроек формы.","type":"unstyled","key":"983ep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const name = 'Алекс';\nconst age = 28;\n\nconst person = { name, age };\n\nconst key = 'role';\nconst user = { [key]: 'editor' };","type":"unstyled","key":"bgtr9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Деструктуризация объектов в коде и параметрах функций","type":"header-three","key":"a8u8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Деструктуризация уменьшает шум, когда вы часто обращаетесь к полям. Особенно удобна в параметрах функций: вы явно показываете, какие поля нужны, и можете задавать значения по умолчанию.","type":"unstyled","key":"91t4v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const { title, price } = product;\n\nfunction renderCard({ title, price = 0 }) {\n return `${title} — ${price} руб.`;\n}","type":"unstyled","key":"cvf2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь важно не перестараться. Если объект сложный и вложенный, агрессивная деструктуризация может ухудшить читаемость. В таких случаях лучше вынести промежуточные переменные.","type":"unstyled","key":"eueeb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копирование и сравнение — shallow и deep","type":"header-three","key":"co1hh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Объекты и массивы копируются по ссылке. Это значит, что присваивание не создаёт новую копию, а лишь даёт второе имя тому же объекту. Отсюда много багов в состоянии интерфейса.","type":"unstyled","key":"651mb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const a = { x: 1 };\nconst b = a;\nb.x = 2;\n// a.x тоже станет 2","type":"unstyled","key":"cmifi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поверхностное копирование shallow copy можно сделать через spread или Object.assign. Но оно копирует только верхний уровень, а вложенные объекты остаются общими по ссылке.","type":"unstyled","key":"6q1la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const original = { x: 1, meta: { y: 2 } };\nconst copy = { ...original };\ncopy.x = 10;\n// original.x не изменится\ncopy.meta.y = 20;\n// original.meta.y изменится, потому что meta общая","type":"unstyled","key":"6df3q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Глубокое копирование deep copy зависит от структуры данных. Универсального простого варианта для всех случаев нет, потому что могут быть функции, даты, Map, Set, циклические ссылки. Для простых JSON-данных иногда используют JSON.stringify и JSON.parse, но у подхода есть ограничения: теряются даты и специальные значения, пропадают undefined и функции.","type":"unstyled","key":"774kg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Shallow copy подходит для плоских объектов и массивов без вложенных структур.","type":"unordered-list-item","key":"dt669"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Deep copy нужен, когда вы хотите полностью отделить вложенные данные.","type":"unordered-list-item","key":"7p9l5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сравнение объектов через === сравнивает ссылки, а не содержимое.","type":"unordered-list-item","key":"1dikf"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"6j3cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Set и Map — когда массивов и объектов мало","type":"header-two","key":"c50al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Set и Map решают задачи, которые в массивах и объектах решаются через обходы и костыли. Set хранит уникальные значения и даёт быстрые проверки наличия. Map хранит пары «ключ-значение», где ключом может быть любой тип, включая объект. В интерфейсах это часто упрощает логику и ускоряет работу с большими коллекциями.","type":"unstyled","key":"70iar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Set для уникальных значений и быстрых проверок","type":"header-three","key":"d6lep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Set полезен, когда нужно исключить дубликаты, быстро проверить, был ли элемент уже обработан, или вести список выбранных id. Добавление и проверка обычно выполняются за время, близкое к O(1), что особенно заметно на коллекциях в 10 000–50 000 элементов.","type":"unstyled","key":"803sa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const selected = new Set();\nselected.add(101);\nselected.add(101); // дубликат не добавится\n\nconsole.log(selected.has(101)); // true\nselected.delete(101);","type":"unstyled","key":"ni33"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы убрать дубликаты из массива, можно преобразовать через Set и обратно.","type":"unstyled","key":"fe46u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const arr = [1, 1, 2, 3, 3];\nconst unique = Array.from(new Set(arr)); // [1, 2, 3]","type":"unstyled","key":"8hqrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Map для ключей любого типа и предсказуемого порядка","type":"header-three","key":"ejoki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Map удобен, когда вам нужен словарь, но ключ — не строка. Например, когда вы храните метаданные для DOM-элементов или кешируете результаты для объектов. Также Map сохраняет порядок вставки, что может быть полезно для вывода списка.","type":"unstyled","key":"fqdci"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const cache = new Map();\ncache.set('users', [{ id: 1 }]);\nconsole.log(cache.get('users'));","type":"unstyled","key":"8iqie"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для кейсов «по id» Map часто удобнее объекта: вы можете использовать число как ключ без скрытых преобразований и легко получать size.","type":"unstyled","key":"6rc5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const byId = new Map();\nbyId.set(101, { title: 'Наушники' });\nconsole.log(byId.has(101));\nconsole.log(byId.size);","type":"unstyled","key":"5jq10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типовые кейсы в интерфейсах и обработке данных","type":"header-three","key":"5lcpa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выбор элементов в списке — Set хранит выбранные id, а UI проверяет selected.has(id).","type":"unordered-list-item","key":"2qoim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кеширование запросов — Map хранит ответ по ключу URL, чтобы не дергать сеть повторно.","type":"unordered-list-item","key":"4fnv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нормализация данных — Map byId ускоряет поиск элемента без find по массиву.","type":"unordered-list-item","key":"djck7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Построение индекса — Map позволяет быстро связать ключ и данные без перебора.","type":"unordered-list-item","key":"daaft"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки, даты и числа — повседневные задачи","type":"header-two","key":"7pkb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В реальных проектах вы почти каждый день форматируете строки, преобразуете числа и работаете со временем. Именно здесь появляются «мелкие» ошибки, которые раздражают пользователей: неправильный формат даты, странная сортировка, округление денег, неверная локаль. Поэтому стоит заранее освоить безопасные практики.","type":"unstyled","key":"337ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Строки — поиск, замена, форматирование","type":"header-three","key":"b151e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для строк в JavaScript важны методы includes, startsWith, endsWith, indexOf, slice, replace и шаблонные литералы. Шаблонные строки особенно полезны, когда вы собираете текст из переменных.","type":"unstyled","key":"ddn9d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const name = 'Алекс';\nconst msg = `Привет, ${name}!`;","type":"unstyled","key":"ct0nd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для замены используйте replace или replaceAll. Если вы заменяете множество вариантов, часто проще подготовить функцию нормализации: trim, приведение регистра, удаление лишних пробелов.","type":"unstyled","key":"cbi5b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"trim убирает пробелы по краям, полезно для ввода пользователя.","type":"unordered-list-item","key":"47sda"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"toLowerCase и toUpperCase помогают сравнивать без учета регистра.","type":"unordered-list-item","key":"ah925"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"normalize может понадобиться для работы с диакритикой и разными формами символов.","type":"unordered-list-item","key":"91vm3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Регулярные выражения — где полезны и где опасны","type":"header-three","key":"7qrko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Регулярные выражения хорошо подходят для поиска шаблонов, валидации простых форматов и массовых замен. Но они становятся опасными, когда вы пытаетесь «валидировать всё» одним монстр-выражением или когда выражение плохо читается и его сложно поддерживать.","type":"unstyled","key":"1vkt1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полезные сценарии: проверить, что строка содержит только цифры; найти повторяющиеся пробелы; заменить несколько разделителей на один. Опасные сценарии: строгая валидация e-mail на клиенте, парсинг HTML, сложные правила адресов и ФИО — здесь регулярки чаще ломаются на реальных данных.","type":"unstyled","key":"c52rr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const onlyDigits = /^\\d+$/;\nconsole.log(onlyDigits.test('12345')); // true","type":"unstyled","key":"eb82s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Держите регулярки короткими и объяснимыми.","type":"unordered-list-item","key":"4f0lm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для сложных правил лучше писать последовательные проверки.","type":"unordered-list-item","key":"85l4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используйте регулярки для парсинга HTML в браузере, для этого есть DOM.","type":"unordered-list-item","key":"8nepf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Числа — округление, точность, формат валют","type":"header-three","key":"dibu2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript использует числа с плавающей точкой, поэтому 0.1 + 0.2 может дать 0.30000000000000004. Это не «баг языка», а особенность представления дробей. Для интерфейса важно правильно округлять и форматировать.","type":"unstyled","key":"1uvdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для отображения используйте Intl.NumberFormat. Он умеет форматировать валюты, разделять тысячи пробелами, учитывать локаль и количество знаков после запятой.","type":"unstyled","key":"f2hh5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const rub = new Intl.NumberFormat('ru-RU', {\n style: 'currency',\n currency: 'RUB',\n maximumFractionDigits: 0\n});\n\nconsole.log(rub.format(85000));","type":"unstyled","key":"dgtrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы считаете деньги, безопаснее хранить суммы в минимальных единицах, например в копейках как целое число, и переводить в рубли только для вывода. Тогда вы избегаете накопления ошибок округления.","type":"unstyled","key":"4n552"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Math.round округляет до целого.","type":"unordered-list-item","key":"8qq06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"toFixed возвращает строку и удобно для вывода, но не для дальнейших вычислений.","type":"unordered-list-item","key":"bl0sn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Number.isFinite помогает отсеять NaN и Infinity при вводе.","type":"unordered-list-item","key":"2g4cs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дата и время — Date, Intl, часовые пояса и локали","type":"header-three","key":"d6gcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дата и время — один из самых сложных участков фронтенда. Важно понимать, что Date хранит момент времени, а отображение зависит от часового пояса пользователя. Если вы показываете расписание, дедлайны или таймеры, учитывайте локаль и зону.","type":"unstyled","key":"bmj58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для форматирования используйте Intl.DateTimeFormat. Он умеет корректно выводить дату и время под язык интерфейса.","type":"unstyled","key":"433la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const dt = new Date();\nconst fmt = new Intl.DateTimeFormat('ru-RU', {\n dateStyle: 'long',\n timeStyle: 'short'\n});\nconsole.log(fmt.format(dt));","type":"unstyled","key":"dngkm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Храните дату в ISO-формате на сервере и передавайте как строку, чтобы избежать двусмысленности.","type":"unordered-list-item","key":"da8so"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверяйте, что парсинг даты дает валидный результат, иначе получите Invalid Date.","type":"unordered-list-item","key":"e1069"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для сложных операций с зонами и интервалами часто используют библиотеки, но начинать стоит с понимания Date и Intl.","type":"unordered-list-item","key":"87dep"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как сделать интерактивность на странице — DOM и события","type":"header-two","key":"3n8pf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Интерактивность на сайте строится из двух слоев: работа с DOM и обработка событий. DOM — это объектное представление HTML, а события — механизм, который сообщает вашему коду, что пользователь что-то сделал или что что-то изменилось. В связке это превращается в типовой цикл: найти элементы, подписаться на события, изменить DOM или состояние.","type":"unstyled","key":"6rper"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM простыми словами — как страница становится объектами","type":"header-three","key":"8bcnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда браузер загружает HTML, он строит дерево узлов. Каждый тег превращается в объект с методами и свойствами. Это и есть DOM. Вы можете находить элементы, менять их текст, добавлять классы, создавать новые узлы и удалять старые. Это мощно, но требует аккуратности: лишние операции с DOM могут замедлять страницу.","type":"unstyled","key":"1d8gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск элементов — querySelector и querySelectorAll","type":"header-three","key":"7grb3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"querySelector возвращает первый найденный элемент, querySelectorAll — список элементов. Они принимают CSS-селекторы, поэтому логика выбора совпадает с тем, как вы пишете CSS.","type":"unstyled","key":"cao6n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const button = document.querySelector('#buy');\nconst items = document.querySelectorAll('.item');","type":"unstyled","key":"7sf86"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если элемент не найден, querySelector вернёт null. Поэтому в учебных проектах полезно проверять результат и явно выводить сообщение, иначе вы получите TypeError дальше по цепочке.","type":"unstyled","key":"af2l4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание и вставка — createElement, append, before, after","type":"header-three","key":"501fs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для динамического интерфейса вы часто создаёте элементы на лету: карточки, пункты списка, уведомления. Создавайте элемент, настраивайте текст и атрибуты, затем вставляйте в DOM. Такой подход безопаснее, чем собирать HTML-строки.","type":"unstyled","key":"5s6h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const li = document.createElement('li');\nli.textContent = 'Новый пункт';\ndocument.querySelector('#list').append(li);","type":"unstyled","key":"5tt0k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"append вставляет в конец.","type":"unordered-list-item","key":"ebn22"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"before и after вставляют рядом с элементом.","type":"unordered-list-item","key":"7gpir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"remove удаляет узел из DOM.","type":"unordered-list-item","key":"6v134"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменение текста и HTML — textContent и innerHTML безопасно","type":"header-three","key":"csv6c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"textContent вставляет текст как текст, поэтому безопасен для пользовательского ввода. innerHTML вставляет строку как HTML и может создать риск XSS, если в строке есть данные от пользователя. В интерфейсах с формами и комментариями это критично.","type":"unstyled","key":"543l7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте textContent для пользовательских данных.","type":"unordered-list-item","key":"693u5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используйте innerHTML только для заранее подготовленных шаблонов, которые вы полностью контролируете.","type":"unordered-list-item","key":"bf7n2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужно собрать сложную разметку, чаще безопаснее создавать элементы через createElement.","type":"unordered-list-item","key":"a683p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Классы и стили — classList и style","type":"header-three","key":"274l0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"classList позволяет добавлять, удалять и переключать классы без ручной работы со строками. Это удобнее и меньше ломается при изменениях CSS.","type":"unstyled","key":"fgcck"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const card = document.querySelector('.card');\ncard.classList.add('active');\ncard.classList.toggle('hidden');","type":"unstyled","key":"78sqi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инлайн-стили через style подходят для редких случаев, например, вычисляемой позиции или ширины. Но если стиль можно описать классом, лучше использовать классы — так код и дизайн остаются раздельными.","type":"unstyled","key":"92p0q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"События пользователя — клики, ввод, отправка форм","type":"header-three","key":"d9qb4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"События — это сигналы, которые браузер отправляет, когда что-то происходит: клик, ввод, прокрутка, фокус, отправка формы. Вы подписываетесь на событие через addEventListener и получаете объект event с деталями.","type":"unstyled","key":"37tg5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"addEventListener — базовый шаблон","type":"header-three","key":"ds1rj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const btn2 = document.querySelector('#buy');\nbtn2.addEventListener('click', (event) => {\n console.log('Клик', event.type);\n});","type":"unstyled","key":"fk3lt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следите за тем, чтобы элемент существовал в момент подписки. Если вы создаете кнопку динамически, подписку нужно делать после создания или использовать делегирование.","type":"unstyled","key":"7vkpb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"event.target и currentTarget — что вы на самом деле нажали","type":"header-three","key":"fl6ln"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"target — элемент, по которому кликнули фактически. currentTarget — элемент, на котором висит обработчик. Они часто совпадают, но не всегда. Например, если обработчик висит на карточке, а вы кликнули по кнопке внутри карточки, target будет кнопкой.","type":"unstyled","key":"6h970"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.querySelector('#list').addEventListener('click', (e) => {\n console.log('target', e.target);\n console.log('currentTarget', e.currentTarget);\n});","type":"unstyled","key":"bjcs2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всплытие и погружение — как работает propagation","type":"header-three","key":"7j6j0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"События проходят по дереву DOM. Сначала этап погружения, затем целевой элемент, затем всплытие. По умолчанию addEventListener слушает всплытие. Это объясняет, почему клик по кнопке может вызвать обработчики на родителях.","type":"unstyled","key":"9ij9n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"stopPropagation останавливает дальнейшее распространение события.","type":"unordered-list-item","key":"f7s1o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"capture позволяет слушать событие на этапе погружения.","type":"unordered-list-item","key":"dirsn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понимание всплытия — ключ к делегированию событий.","type":"unordered-list-item","key":"eaq87"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делегирование событий — меньше обработчиков, больше контроля","type":"header-three","key":"d180i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делегирование — техника, когда вы вешаете один обработчик на общий контейнер и обрабатываете клики по его детям. Это экономит память и упрощает логику, особенно если элементы списка создаются и удаляются динамически. Вместо 1 000 обработчиков на 1 000 кнопках вы держите один на контейнере.","type":"unstyled","key":"a0gdd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const listEl = document.querySelector('#list');\nlistEl.addEventListener('click', (e) => {\n const btn = e.target.closest('button[data-action]');\n if (!btn) return;\n const action = btn.dataset.action;\n console.log('Действие', action);\n});","type":"unstyled","key":"1fmld"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"preventDefault — формы и ссылки без сюрпризов","type":"header-three","key":"9buso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Форма по умолчанию перезагружает страницу при submit, а ссылка переходит по адресу. Для SPA и интерактивных виджетов это часто не нужно. preventDefault отменяет действие по умолчанию, и вы берёте контроль на себя.","type":"unstyled","key":"bivb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const form = document.querySelector('form');\nform.addEventListener('submit', (e) => {\n e.preventDefault();\n});","type":"unstyled","key":"4eeau"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"enkd0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формы и валидация — чтобы данные были корректными","type":"header-two","key":"dmki4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формы — главный источник «грязных» данных: лишние пробелы, неверный формат, пустые поля, непредвиденные символы. Клиентская валидация нужна для удобства пользователя и быстрого фидбэка, но не заменяет серверную проверку. Всегда исходите из того, что данные могут быть подделаны, а значит сервер обязан валидировать всё.","type":"unstyled","key":"6tk9b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Считывание значений и обработка submit","type":"header-three","key":"301hq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значения берутся из input.value, select.value и textarea.value. Перед проверками полезно нормализовать строку: trim, приведение регистра, удаление повторяющихся пробелов. Это снижает ложные ошибки и улучшает UX.","type":"unstyled","key":"crjp3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Проверки на клиенте — что можно и чего нельзя","type":"header-three","key":"e3slc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно — проверять обязательность, длину, базовый формат, совпадение пароля, диапазоны чисел.","type":"unordered-list-item","key":"udhm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Можно — подсвечивать ошибки рядом с полем и объяснять, что исправить.","type":"unordered-list-item","key":"busfo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нельзя — считать клиентскую валидацию защитой, потому что её обходят за секунды.","type":"unordered-list-item","key":"33kc8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нельзя — блокировать пользователя без понятного сообщения и пути исправления.","type":"unordered-list-item","key":"db9hu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сообщения об ошибках и UX без раздражения","type":"header-three","key":"7ligt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошее сообщение об ошибке отвечает на три вопроса: что не так, где не так и как исправить. Плохое сообщение выглядит как «Ошибка 123» или «Неверный ввод». Делайте подсказки конкретными: «Введите минимум 8 символов», «Используйте только цифры», «Укажите e-mail в формате name@example.com».","type":"unstyled","key":"189ed"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с сетью — запросы к API и данные JSON","type":"header-two","key":"dfe0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современные интерфейсы редко живут без API. Вы отправляете формы, загружаете списки товаров, получаете профиль пользователя, сохраняете настройки. Ключевой инструмент в браузере — fetch. Он возвращает Promise и идеально сочетается с async await.","type":"unstyled","key":"bctus"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetch — GET, POST, заголовки и тело запроса","type":"header-three","key":"s0mf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"GET используют для получения данных, POST — для отправки и создания. Для JSON обычно задают заголовок Content-Type и сериализуют тело через JSON.stringify.","type":"unstyled","key":"9rrv7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async function loadUsers() {\n const res = await fetch('/api/users');\n if (!res.ok) throw new Error('Не удалось загрузить пользователей');\n return res.json();\n}\n\nasync function saveUser(user) {\n const res = await fetch('/api/users', {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(user)\n });\n if (!res.ok) throw new Error('Не удалось сохранить пользователя');\n return res.json();\n}","type":"unstyled","key":"499v8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSON.stringify и JSON.parse — безопасная сериализация","type":"header-three","key":"3r6rc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSON.stringify превращает объект в строку, JSON.parse — обратно. JSON удобен тем, что это простой текстовый формат, совместимый с большинством языков. Но JSON не хранит функции и теряет некоторые типы, например Date превращается в строку. Поэтому дату лучше передавать как ISO-строку и на клиенте явно превращать в Date, если нужно.","type":"unstyled","key":"1f7c5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обработка статусов — 200, 400, 401, 403, 404, 500","type":"header-three","key":"aej48"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetch не считает 404 или 500 ошибкой на уровне Promise. Ошибка будет только при сетевом сбое. Поэтому проверяйте res.ok или res.status.","type":"unstyled","key":"cuo2j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"200 — успешно, данные можно читать.","type":"unordered-list-item","key":"23dlp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"400 — ошибка запроса, часто проблемы в данных формы.","type":"unordered-list-item","key":"av0h5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"401 — не авторизован, нужно логиниться или обновить токен.","type":"unordered-list-item","key":"fe464"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"403 — доступ запрещён, прав нет.","type":"unordered-list-item","key":"89a6j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"404 — ресурс не найден, неправильный URL или удалённая сущность.","type":"unordered-list-item","key":"c69b4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"500 — ошибка сервера, ваша логика на сервере упала.","type":"unordered-list-item","key":"1n48n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В интерфейсе статусы надо превращать в понятные сценарии: показать сообщение, предложить повторить, отправить на страницу логина, сохранить черновик.","type":"unstyled","key":"7tmvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CORS — почему запрос не проходит и что делать","type":"header-three","key":"16rk2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CORS — это политика браузера, которая блокирует запросы к другому домену, если сервер не разрешил их специальными заголовками. Важно: это не «проблема JavaScript», а защита браузера. Если API находится на другом домене, сервер должен вернуть Access-Control-Allow-Origin и другие нужные заголовки. На фронтенде вы обычно не можете «починить CORS», вы можете только правильно настроить запрос и обратиться к бэкенду за настройкой.","type":"unstyled","key":"eh4qh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Признак CORS — запрос виден в Network, но браузер блокирует ответ и пишет ошибку в Console.","type":"unordered-list-item","key":"at3qp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типовое решение — прокси через ваш сервер или настройка CORS на API.","type":"unordered-list-item","key":"919vg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В разработке иногда используют dev proxy в Vite или аналогах.","type":"unordered-list-item","key":"2s915"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таймауты и повтор — как сделать надежнее","type":"header-three","key":"8ep3p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У fetch нет встроенного таймаута, поэтому его часто реализуют через AbortController. Повтор запросов нужен, когда сеть нестабильна. Но повторять бесконечно нельзя — нужен лимит попыток и пауза, иначе вы создадите лишнюю нагрузку и ухудшите UX.","type":"unstyled","key":"f07ch"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async function fetchWithTimeout(url, ms = 8_000) {\n const controller = new AbortController();\n const id = setTimeout(() => controller.abort(), ms);\n\n try {\n const res = await fetch(url, { signal: controller.signal });\n return res;\n } finally {\n clearTimeout(id);\n }\n}","type":"unstyled","key":"4s9fn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронность — чтобы приложение не зависало","type":"header-two","key":"134k8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронность — это причина, почему интерфейс может оставаться отзывчивым, пока выполняются запросы, таймеры и ожидание событий. Но это же и источник сложностей: порядок выполнения не всегда совпадает с порядком строк в файле. Чтобы писать надежный код, важно понимать event loop, Promise и async await.","type":"unstyled","key":"7tvb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Event loop — почему JS однопоточный, но не тормозит всегда","type":"header-three","key":"35s3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в браузере обычно выполняется в одном потоке, то есть одна инструкция за другой. Если вы делаете тяжелый цикл на 200 000 итераций и внутри сложные операции, вы блокируете поток и интерфейс «замерзает». Но операции ввода-вывода — запросы, таймеры, события — выполняются через механизм очередей. Event loop берёт задачи из очередей и выполняет их, когда поток свободен.","type":"unstyled","key":"3m0fp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический вывод: не делайте долгие синхронные вычисления в основном потоке. Разбивайте работу на части, используйте requestAnimationFrame для UI-циклов, Web Worker для тяжелых вычислений и профилируйте в Performance, если видите лаги больше 100–200 мс.","type":"unstyled","key":"abicn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise — состояния, цепочки, ошибки","type":"header-three","key":"4iegr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise — объект, который представляет результат асинхронной операции. У него есть состояния: pending, fulfilled, rejected. Вы можете строить цепочки then, обрабатывать ошибки catch и выполнять действия в любом случае через finally. Важно помнить, что ошибка внутри then превращается в rejected и уйдёт в ближайший catch.","type":"unstyled","key":"5btj9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetch('/api/users')\n .then(res => {\n if (!res.ok) throw new Error('HTTP ' + res.status);\n return res.json();\n })\n .then(data => console.log('Данные', data))\n .catch(err => console.error('Ошибка', err))\n .finally(() => console.log('Готово'));","type":"unstyled","key":"8cc38"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async await — как писать асинхронный код читаемо","type":"header-three","key":"6n5qb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async await — синтаксический сахар над Promise, который делает код похожим на последовательный. Это проще читать новичкам и легче отлаживать. Но правила остаются: await ждёт Promise, ошибки ловятся через try catch, а параллельность нужно организовывать явно.","type":"unstyled","key":"c2m58"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async function init() {\n try {\n const res = await fetch('/api/users');\n if (!res.ok) throw new Error('HTTP ' + res.status);\n const data = await res.json();\n console.log(data);\n } catch (e) {\n console.error(e);\n }\n}","type":"unstyled","key":"c53f3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise.all и Promise.race — параллельные запросы и скорость","type":"header-three","key":"3b8i3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вам нужно несколько независимых запросов, не делайте await последовательно, иначе вы теряете время. Promise.all запускает все операции параллельно и ждёт, пока завершатся все. Promise.race завершится, когда завершится первый Promise. Это помогает ускорять загрузку интерфейса и строить стратегию «кто ответит быстрее».","type":"unstyled","key":"7gnmo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const [users, stats] = await Promise.all([\n fetch('/api/users').then(r => r.json()),\n fetch('/api/stats').then(r => r.json())\n]);","type":"unstyled","key":"4vnfd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise.all падает целиком, если любой Promise будет rejected.","type":"unordered-list-item","key":"brk9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для частичных результатов применяют Promise.allSettled.","type":"unordered-list-item","key":"6r7al"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promise.race полезен для таймаутов и выбора первого ответа.","type":"unordered-list-item","key":"54ekn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Микро и макрозадачи — когда важно понимать порядок","type":"header-three","key":"f246g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Микрозадачи — это очередь Promise, макрозадачи — таймеры и события. Иногда порядок важен, например, когда вы ожидаете, что setTimeout выполнится раньше, а он выполняется после микрозадач. В большинстве проектов достаточно помнить простое правило: обработчики Promise обычно выполняются раньше, чем setTimeout с задержкой 0 мс, потому что они идут в микрозадачах. Если вы видите «странный порядок логов», причина часто здесь.","type":"unstyled","key":"6fq6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ошибки и отладка — как находить причину за минуты","type":"header-two","key":"2nprv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ошибки в JavaScript неизбежны даже у опытных разработчиков, потому что среда меняется, данные приходят из внешних источников, а пользовательский ввод всегда непредсказуем. Разница между новичком и практиком не в том, кто ошибается, а в том, кто быстро локализует причину. Цель отладки — не «поправить наугад», а построить короткий маршрут от симптома к источнику и проверить гипотезу фактами.","type":"unstyled","key":"a805o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Базовый алгоритм одинаковый почти всегда. Сначала вы видите симптом — кнопка не работает, запрос не приходит, страница зависает. Потом фиксируете точку наблюдения — Console, Network, Sources. Затем подтверждаете, что код вообще выполняется, и только после этого анализируете данные и порядок выполнения. Этот алгоритм экономит часы и помогает не увязнуть в хаотичных правках.","type":"unstyled","key":"5tlvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы ошибок — SyntaxError, ReferenceError, TypeError","type":"header-three","key":"51m06"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Понимание трёх самых частых классов ошибок даёт мгновенную пользу. Их тексты в консоли обычно достаточно информативны, если читать их до конца и смотреть номер строки.","type":"unstyled","key":"bdhdv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SyntaxError — синтаксис сломан, движок не может прочитать файл. Часто это пропущенная скобка, лишняя запятая, неверная кавычка. Пока SyntaxError не исправлен, скрипт может не выполниться вообще.","type":"unordered-list-item","key":"dfp1j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ReferenceError — обращение к переменной, которой не существует в текущей области видимости. Типичный кейс — опечатка в имени или использование переменной до объявления.","type":"unordered-list-item","key":"6d70d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"TypeError — попытка вызвать не-функцию или обратиться к свойству у null или undefined. Это самый частый тип в DOM-коде, когда querySelector вернул null.","type":"unordered-list-item","key":"7t29"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический приём: если вы видите TypeError вида «Cannot read properties of null», сразу ищите место, где ожидается элемент, и проверяйте селектор, момент выполнения и наличие defer. Если видите ReferenceError, ищите область видимости и имя переменной. Если SyntaxError, смотрите на ближайшую строку выше, потому что ошибка может быть «сдвинута» из-за незакрытой конструкции.","type":"unstyled","key":"9ttn1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"try catch finally — где оправдано","type":"header-three","key":"ag8aa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"try catch нужен там, где вы ожидаете, что операция может завершиться ошибкой, и хотите перевести её в контролируемое поведение для пользователя. Это особенно полезно при работе с сетью, JSON, локальными хранилищами и нестабильными источниками данных. Но try catch не должен превращаться в «ковёр», который прячет проблемы. Если вы ловите ошибку и ничего не делаете, вы усложняете диагностику.","type":"unstyled","key":"9t3pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оправдано — парсинг JSON, когда сервер может вернуть неожиданный формат.","type":"unordered-list-item","key":"9uq54"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оправдано — async await для запросов, чтобы показать сообщение и не сломать интерфейс.","type":"unordered-list-item","key":"8fm4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оправдано — работа с localStorage в приватных режимах и ограничениях браузера.","type":"unordered-list-item","key":"q8ov"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Неудачно — оборачивать весь файл в try catch и «глотать» ошибки без логов.","type":"unordered-list-item","key":"8vv4l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"finally удобно использовать для снятия индикаторов загрузки и разблокировки кнопок. Это делает интерфейс устойчивым: даже при ошибке вы возвращаете приложение в рабочее состояние.","type":"unstyled","key":"f4dts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логиирование — уровни, формат, полезные контексты","type":"header-three","key":"59f2t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Логи — это ваши «следы» в момент, когда проблема появляется. Хорошее логирование не значит «логировать всё». Оно значит логировать ключевые состояния и входные данные там, где логика может сломаться. В интерфейсе это обычно обработчики событий, точки входа в асинхронные цепочки и места, где данные нормализуются.","type":"unstyled","key":"d787u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Уровни — log для обычных событий, warn для подозрительных ситуаций, error для сбоев.","type":"unordered-list-item","key":"dg3do"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Формат — короткое сообщение плюс объект контекста, чтобы в консоли раскрывать детали.","type":"unordered-list-item","key":"47nht"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контексты — идентификатор пользователя, id сущности, URL запроса, статус ответа, время выполнения в мс.","type":"unordered-list-item","key":"8pid6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полезная практика: добавляйте уникальные маркеры шагов, чтобы видеть порядок. Например, «handler submit start», «request sent», «response ok», «render done». Это особенно помогает при асинхронности, где события могут завершаться в неожиданном порядке.","type":"unstyled","key":"davue"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пошаговая отладка — breakpoints, step over, step into","type":"header-three","key":"9mhjl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда логи не помогают, включайте пошаговую отладку в Sources. Это самый быстрый способ увидеть реальные значения переменных и путь выполнения условий. Breakpoint ставится на строке, после чего код останавливается, и вы можете исследовать состояние без догадок.","type":"unstyled","key":"cfbth"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Breakpoints — остановка на строке, чтобы изучить переменные и контекст.","type":"unordered-list-item","key":"a1rh4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Step over — пройти на следующую строку без захода внутрь функций.","type":"unordered-list-item","key":"6gc5e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Step into — зайти в функцию и пройти её пошагово.","type":"unordered-list-item","key":"c4duf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Call stack — понять, какие вызовы привели к текущему месту.","type":"unordered-list-item","key":"4i0pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Watch — наблюдать важные выражения и сравнивать их по шагам.","type":"unordered-list-item","key":"1b0o8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если ошибка появляется только иногда, используйте conditional breakpoint — остановку по условию. Это особенно полезно при обработке массивов, когда проблема возникает на одном из 1 000 элементов, и вы хотите остановиться только на нужном кейсе.","type":"unstyled","key":"7rocg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Частые причины багов у новичков — undefined, области видимости, асинхронность","type":"header-three","key":"fkm88"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Три причины встречаются чаще всего и образуют «треугольник новичка».","type":"unstyled","key":"f2tpf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"undefined и null — неправильные ожидания. Вы думаете, что данные есть, а они ещё не пришли или поле отсутствует. Лечится проверками, значениями по умолчанию, опциональной цепочкой и валидацией входных данных.","type":"unordered-list-item","key":"1ui8p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Области видимости — переменная объявлена не там, где вы пытаетесь её использовать, или переопределена внутри блока. Лечится дисциплиной let и const, минимизацией глобальных переменных, ясной структурой функций.","type":"unordered-list-item","key":"2pe4h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронность — вы думаете, что строка ниже выполнится после запроса, а запрос ещё не завершён. Лечится async await, Promise.all для параллельных операций и ясными точками «загрузка началась» и «загрузка завершилась».","type":"unordered-list-item","key":"c8mgp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Профессиональный приём: прежде чем чинить, сформулируйте ожидание и измерьте реальность. Что должно быть в переменной? В какой момент? Какая ветка условия должна сработать? Такой подход превращает хаос в проверяемую гипотезу.","type":"unstyled","key":"e00on"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"6rp2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код без боли — стиль, качество и поддержка","type":"header-two","key":"2jm2q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код живёт дольше, чем кажется. Даже учебный скрипт часто превращается в основу проекта, а через 2–3 недели вы сами перестаёте помнить детали. Поэтому качество — это не «перфекционизм», а экономия времени. Хороший стиль делает код предсказуемым, снижает количество ошибок и облегчает командную работу.","type":"unstyled","key":"bgbr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чистые функции и маленькие модули — проще тестировать","type":"header-three","key":"285la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чистая функция возвращает результат, опираясь только на входные параметры, и не меняет внешний мир. Такие функции легко тестировать и переиспользовать. Чем больше логики вы выносите в чистые функции, тем меньше у вас «магии» в обработчиках событий.","type":"unstyled","key":"uin9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выносите расчёты, форматирование и преобразования данных в отдельные функции.","type":"unordered-list-item","key":"6206v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Оставляйте в обработчиках событий только чтение ввода, вызов логики и обновление UI.","type":"unordered-list-item","key":"1n6d3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Делите код по ответственности — сеть отдельно, DOM отдельно, бизнес-правила отдельно.","type":"unordered-list-item","key":"78h7t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даже без тестов такой подход облегчает отладку: если ошибка в результате, вы проверяете функцию преобразования, а не весь интерфейс целиком.","type":"unstyled","key":"42j5a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint и Prettier — единые правила команды","type":"header-three","key":"f5s8k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint помогает ловить ошибки и плохие практики до запуска. Он предупреждает о неиспользуемых переменных, сомнительных сравнениях, теневых объявлениях, неверных зависимостях хуков в React и многих других вещах. Prettier отвечает за форматирование, чтобы код выглядел одинаково у всех.","type":"unstyled","key":"f2jg3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"ESLint снижает количество багов и делает ревью быстрее.","type":"unordered-list-item","key":"ec2pp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Prettier экономит время на спор о пробелах и переносах.","type":"unordered-list-item","key":"1gpnj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Связка ESLint + Prettier создаёт стабильный «почерк» проекта.","type":"unordered-list-item","key":"92lnk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для новичка это ещё и учебный инструмент: вы видите подсказку, почему конструкция сомнительна, и постепенно формируете правильные привычки.","type":"unstyled","key":"f4bdb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типизация и договоренности — JSDoc и TypeScript","type":"header-three","key":"8fi89"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript динамический, но это не значит, что типы не важны. Типы — это договорённость о форме данных. В реальности большая часть ошибок — это несоответствие структуры: ожидали массив, пришёл объект; ожидали число, получили строку; ожидали поле, а оно отсутствует.","type":"unstyled","key":"90jkb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JSDoc помогает документировать типы и получать подсказки редактора без миграции на другой язык.","type":"unordered-list-item","key":"5t8lr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"TypeScript добавляет строгую проверку и особенно полезен в больших проектах и командах.","type":"unordered-list-item","key":"42l6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Даже минимальная типизация снижает риск TypeError и упрощает рефакторинг.","type":"unordered-list-item","key":"26gli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практический подход: начните с ясных контрактов функций и структур данных, затем добавляйте JSDoc, а TypeScript подключайте, когда проект вырастет до нескольких модулей и постоянных изменений.","type":"unstyled","key":"2houe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как писать понятные имена — переменные, функции, файлы","type":"header-three","key":"3n4cc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имена — это «документация в коде». Хорошее имя отвечает на вопрос «что это» и «зачем». Плохое имя заставляет читать реализацию и держать в голове контекст.","type":"unstyled","key":"4g3ee"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переменные — существительные и ясный смысл: totalPrice, userId, isLoading.","type":"unordered-list-item","key":"6ai6q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Функции — глагол и действие: fetchUsers, validateEmail, renderList.","type":"unordered-list-item","key":"ajg2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Булевы значения — is, has, can: isValid, hasAccess, canSubmit.","type":"unordered-list-item","key":"5g5fk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Файлы — по ответственности: api.js, dom.js, storage.js, formatters.js.","type":"unordered-list-item","key":"405rd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы замечаете переменные вида a, b, tmp, data1, data2 в финальном коде, это сигнал, что читаемость можно улучшить без изменения логики.","type":"unstyled","key":"du2fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Антипаттерны — магические числа, глобальные переменные, копипаст","type":"header-three","key":"e8enb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Антипаттерны редко ломают код сразу, но создают накопительный эффект. Через месяц они превращаются в технический долг, который тормозит развитие проекта.","type":"unstyled","key":"bh9i2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Магические числа — 17, 0.13, 999 без объяснения. Заменяйте на константы с именем и комментарием причины.","type":"unordered-list-item","key":"9peu3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Глобальные переменные — засоряют пространство имён и приводят к конфликтам. Держите код в модулях и функциях.","type":"unordered-list-item","key":"pbq9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Копипаст — одинаковые блоки логики в нескольких местах. Выносите общие части в функцию.","type":"unordered-list-item","key":"b36vd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Слишком длинные функции — тяжело читать и тестировать. Разбивайте по шагам.","type":"unordered-list-item","key":"dc4u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хорошая метрика для самопроверки: если вам сложно объяснить кусок кода за 20–30 секунд, он, вероятно, слишком сложный и требует упрощения.","type":"unstyled","key":"276b4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Безопасность на практике — что важно знать сразу","type":"header-two","key":"718q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Безопасность в фронтенде — это не паранойя, а базовая гигиена. Большинство уязвимостей появляется не из-за сложных атак, а из-за простых ошибок: вставили пользовательский ввод в HTML, сохранили токен в небезопасном месте, забыли ограничения политики. Даже маленький виджет может стать точкой входа.","type":"unstyled","key":"7hfe2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XSS — почему innerHTML опасен и как безопаснее","type":"header-three","key":"4vcks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"XSS — это внедрение вредоносного скрипта через данные, которые отображаются на странице. Если вы берёте текст пользователя и вставляете его через innerHTML, злоумышленник может подставить HTML и JavaScript. В результате код выполнится в контексте вашего сайта.","type":"unstyled","key":"9vj0e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Безопаснее — textContent для вывода пользовательских строк.","type":"unordered-list-item","key":"9nb4g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Опасно — innerHTML с данными, которые вы не контролируете.","type":"unordered-list-item","key":"ellqj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужен HTML — используйте шаблоны, которые вы формируете из безопасных частей, или специализированную санитизацию.","type":"unordered-list-item","key":"2lssn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Правило, которое стоит запомнить: «Пользовательский ввод никогда не является HTML». Считайте его текстом, пока не доказано обратное.","type":"unstyled","key":"5s6q0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с пользовательским вводом — экранирование и валидация","type":"header-three","key":"eje8o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ввод нужно валидировать и нормализовать. Валидация — проверка соответствия правилам. Нормализация — приведение к стандартному виду: trim, единый регистр, удаление лишних пробелов. Экранирование актуально, когда вы формируете строки для вывода или отправки, и хотите исключить интерпретацию специальных символов.","type":"unstyled","key":"ah869"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Валидация на клиенте — для удобства и быстрого фидбэка.","type":"unordered-list-item","key":"agocr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Валидация на сервере — обязательна, потому что клиент можно обойти.","type":"unordered-list-item","key":"dc6sp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нормализация — снижает количество «ложных ошибок» и улучшает качество данных.","type":"unordered-list-item","key":"74mcu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хранение токенов — localStorage, cookies, httpOnly и риски","type":"header-three","key":"alcvq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Токены авторизации и секреты нельзя хранить «как удобно». localStorage доступен JavaScript, а значит при XSS атакующий сможет его прочитать. Cookies могут быть безопаснее, если настроены правильно: httpOnly делает cookie недоступной для JavaScript, Secure требует HTTPS, SameSite снижает риск CSRF.","type":"unstyled","key":"13qng"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"localStorage — удобно, но рискованно при XSS, потому что доступен скриптам.","type":"unordered-list-item","key":"dt355"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Cookies без httpOnly — тоже читаются из JavaScript, что плохо.","type":"unordered-list-item","key":"2k91k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"httpOnly cookie — часто лучший вариант для сессионной авторизации, если архитектура позволяет.","type":"unordered-list-item","key":"802eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В реальных системах выбор зависит от модели авторизации и требований, но базовая идея проста: чем меньше секретов доступно фронтенду, тем лучше.","type":"unstyled","key":"93ku9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Политики безопасности — CSP и базовые принципы","type":"header-three","key":"dbpu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSP — Content Security Policy — набор правил, который ограничивает, откуда можно загружать скрипты, стили и ресурсы. Он снижает риск XSS, потому что даже если злоумышленник вставил script, политика может запретить его выполнение. CSP настраивается на сервере, но фронтенд должен быть готов к правилам: отказаться от инлайновых скриптов, использовать безопасные источники, избегать небезопасных eval.","type":"unstyled","key":"f97jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Минимизируйте инлайновые скрипты и стили, отдавайте их как файлы.","type":"unordered-list-item","key":"2j1aj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не используйте eval и похожие конструкции без крайней необходимости.","type":"unordered-list-item","key":"4i0bo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Следите за источниками сторонних библиотек и виджетов.","type":"unordered-list-item","key":"db3os"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Производительность — чтобы все работало быстро","type":"header-two","key":"7vjao"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Производительность — это ощущение качества. Если интерфейс отвечает за 50–100 мс, пользователь считает его «быстрым». Если задержка 300–500 мс, появляется раздражение. Если 1 000 мс и больше, интерфейс воспринимается как «тормозит». На фронтенде производительность чаще всего упирается в DOM-операции, перерисовки, неумеренные обработчики событий и тяжёлый JavaScript в главном потоке.","type":"unstyled","key":"bhrlb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как не перегружать DOM — пакетные обновления и минимизация перерисовок","type":"header-three","key":"e3ubf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM-операции дорогие, потому что браузер может пересчитывать стили и выполнять layout. Если вы в цикле 1 000 раз меняете textContent и классы, вы рискуете получить лаги. Лучше собирать изменения и применять их пакетно.","type":"unstyled","key":"3uaio"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Изменяйте DOM реже, объединяйте правки в одну операцию.","type":"unordered-list-item","key":"b1i9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создавайте элементы в памяти и вставляйте один раз, а не по одному.","type":"unordered-list-item","key":"59r74"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чаще используйте классы вместо множества инлайновых стилей.","type":"unordered-list-item","key":"cgksi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы рендерите список из 5 000 элементов, подумайте о виртуализации или пагинации. Это не «усложнение», а нормальная практика, когда объёмы растут.","type":"unstyled","key":"4gn2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дебаунс и троттлинг — скролл, ресайз, ввод","type":"header-three","key":"4q2l9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"События scroll, resize и input могут срабатывать десятки раз в секунду. Если на каждое срабатывание вы делаете тяжёлый расчёт или запрос, приложение начинает «задыхаться». Дебаунс запускает действие после паузы, троттлинг ограничивает частоту выполнения.","type":"unstyled","key":"f329t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Дебаунс — поиск по вводу, автосохранение, подсказки. Типичная пауза 250–400 мс.","type":"unordered-list-item","key":"au363"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Троттлинг — скролл и ресайз, измерения, ленивые подгрузки. Типичный интервал 100–200 мс.","type":"unordered-list-item","key":"20uj3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Всегда измеряйте эффект в Performance, чтобы не оптимизировать «в пустоту».","type":"unordered-list-item","key":"5grpm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка — модульный import и разделение кода","type":"header-three","key":"1vii5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ленивая загрузка помогает ускорить первый показ страницы. Вместо того чтобы грузить весь функционал сразу, вы подгружаете модули по требованию: открыли модалку — загрузили модуль модалки, перешли в раздел графиков — подгрузили библиотеку графиков. Это снижает размер initial bundle и улучшает метрики.","type":"unstyled","key":"4o8lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Динамический import — подгрузка модулей по событию.","type":"unordered-list-item","key":"8p2m2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Code splitting — разбиение кода на чанки сборщиком.","type":"unordered-list-item","key":"1eqi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отложенные виджеты — загрузка после первого взаимодействия пользователя.","type":"unordered-list-item","key":"49hl4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Профилирование — Performance в DevTools","type":"header-three","key":"9jrir"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не угадывайте. Записывайте профиль в Performance и смотрите, что реально занимает время: долгие задачи JavaScript, layout, style recalculation, paint. Ищите «красные флаги»: long task на 200–500 мс, слишком частые обработчики, повторяющиеся перерисовки. После исправления повторите запись и сравните результаты.","type":"unstyled","key":"e1arl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Инструменты современного фронтенда — npm, сборка, деплой","type":"header-two","key":"8bjdh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Современный JavaScript редко живёт без инструментов: зависимости, сборка, локальный сервер, транспиляция, оптимизация. Даже если вы пишете «чистый JS», вы почти неизбежно столкнётесь с npm, потому что это стандарт экосистемы. Важно освоить минимум, чтобы уверенно запускать проекты и не бояться ошибок установки.","type":"unstyled","key":"e1sf1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm и package.json — основа управления зависимостями","type":"header-three","key":"771l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"npm управляет пакетами, а package.json описывает проект: имя, версии, зависимости, скрипты. Правильно настроенный package.json делает проект воспроизводимым: другой человек сможет поставить зависимости и запустить так же, как вы.","type":"unstyled","key":"ejvbc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"init, install, scripts — что нужно новичку","type":"header-three","key":"5b4on"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"init — создаёт package.json и задаёт основу проекта.","type":"unordered-list-item","key":"1pqcf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"install — ставит зависимости и формирует node_modules и lock-файл.","type":"unordered-list-item","key":"9o779"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"scripts — команды вроде dev, build, test, lint, которые запускают инструменты проекта.","type":"unordered-list-item","key":"c9iar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привычка держать команды в scripts экономит время: вы не вспоминаете длинные параметры, а запускаете «npm run dev» и получаете одинаковое поведение у всех участников.","type":"unstyled","key":"p57m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dependencies и devDependencies — логика разделения","type":"header-three","key":"13v0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"dependencies — то, что нужно приложению в работе. devDependencies — то, что нужно только для разработки и сборки. Это разделение помогает деплою: на продакшене вы ставите только нужное для выполнения, а инструменты разработки остаются на этапе сборки.","type":"unstyled","key":"7rvfm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"semver — почему версии ломают проект","type":"header-three","key":"a5p7n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"semver — семантическое версионирование вида major.minor.patch. В теории patch — багфиксы без поломок, minor — новые возможности без поломок, major — потенциальные несовместимости. В реальности обновления иногда ломают проект, поэтому lock-файлы важны. Они фиксируют точные версии, чтобы сборка сегодня и через неделю была одинаковой.","type":"unstyled","key":"3gmrd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Обновляйте зависимости осознанно и проверяйте изменения.","type":"unordered-list-item","key":"4on5g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если проект сломался после install, сравните lock-файл и версии.","type":"unordered-list-item","key":"4rkf6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Не гонитесь за самыми новыми версиями без причины, особенно в учебных проектах.","type":"unordered-list-item","key":"7fdg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сборщики и dev server — когда проект вырос","type":"header-three","key":"6i2eb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда вы переходите к модулям, стилям, ассетам и оптимизации, удобнее использовать dev server и сборщик. Он даёт горячую перезагрузку, удобные ошибки, сборку в продакшен и оптимизацию ресурсов.","type":"unstyled","key":"fm82e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vite — быстрый старт и сборка","type":"header-three","key":"9tj7h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vite ценят за скорость старта и удобный дев-сервер. Для новичка это хорошая точка входа в «инструментальный фронтенд», потому что вы быстро получаете рабочий проект с модулями, сборкой и понятной структурой.","type":"unstyled","key":"3fcai"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Webpack — гибкость и когда он оправдан","type":"header-three","key":"7i4qj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Webpack мощный и настраиваемый, но требует больше знаний. Он оправдан в больших проектах, сложных пайплайнах и специфичных требованиях. Для старта лучше выбрать более простой инструмент, а к Webpack переходить, когда вы понимаете, что именно хотите настроить.","type":"unstyled","key":"23bnc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Babel — совместимость со старыми окружениями","type":"header-three","key":"1227c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Babel превращает современный синтаксис в более совместимый. Это актуально, если вы поддерживаете старые браузеры или специфичные окружения. Но важно помнить, что Babel не всегда добавляет полифиллы автоматически, и часть возможностей зависит от runtime и настроек.","type":"unstyled","key":"f8nnj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Деплой — как показать проект людям","type":"header-three","key":"7o3jh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Деплой — это момент, когда ваш JavaScript перестаёт быть «у меня работает» и становится доступным другим. Здесь всплывают вопросы путей, кеша, HTTPS и корректной сборки. Чем раньше вы освоите базовый деплой, тем быстрее сможете собирать портфолио и получать обратную связь.","type":"unstyled","key":"3ejdo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Статический хостинг — GitHub Pages и аналоги","type":"header-three","key":"37but"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для простых проектов часто достаточно статического хостинга: вы публикуете HTML, CSS, JS и ассеты. Это быстро, дешево и удобно для портфолио. Важно лишь правильно настроить пути и убедиться, что сборка кладёт файлы в нужную папку.","type":"unstyled","key":"3orks"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Домен и HTTPS — что реально важно","type":"header-three","key":"4f18o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"HTTPS — не «опция», а стандарт. Многие Web API, включая часть возможностей PWA, геолокацию и современные ограничения браузеров, требуют защищённого контекста. Домен важен для доверия и удобства, но на старте можно жить на поддоменах хостинга. Когда проект становится серьёзнее, домен и корректные сертификаты повышают надёжность.","type":"unstyled","key":"as9b9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кеш и обновления — почему пользователи видят старую версию","type":"header-three","key":"97m6e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Браузер активно кеширует ресурсы, и пользователь может продолжать видеть старый script.js. Решения: правильные заголовки кеширования, хешированные имена файлов в сборке, версионирование ассетов. В разработке помогает отключение кеша в Network, но в продакшене нужно архитектурное решение.","type":"unstyled","key":"f9uqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в браузере и вне браузера — ключевые отличия","type":"header-two","key":"2gudo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Одна из главных ошибок новичка — переносить ожидания из браузера в Node.js и наоборот. Синтаксис один, но окружение разное, а значит разные глобальные объекты, разные API и разные ограничения безопасности.","type":"unstyled","key":"63ha8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM и Web API доступны только в браузере","type":"header-three","key":"8ea59"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере есть document, window, события, DOM, CSSOM, fetch, localStorage и множество Web API. Именно они делают JavaScript «языком интерактивности». В Node.js этого нет по умолчанию. Если вы пытаетесь запустить браузерный код в Node.js, вы увидите ReferenceError на document или window.","type":"unstyled","key":"ftr0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js модули, файловая система и серверные задачи","type":"header-three","key":"67m0s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Node.js даёт доступ к файловой системе, процессам, сетевым соединениям и серверным сценариям. Здесь типовые задачи — читать и писать файлы, поднимать сервер, делать CLI, работать с потоками. В браузере это запрещено по соображениям безопасности.","type":"unstyled","key":"e6b9j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Окружение, глобальные объекты и совместимость пакетов","type":"header-three","key":"7ofa2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В браузере глобальный объект — window, в Node.js — global. Модель модулей может отличаться, хотя ES Modules постепенно унифицируют подход. Также библиотеки делятся на «browser-only», «node-only» и «универсальные». Перед установкой пакета полезно понимать, где он должен работать, иначе вы получите ошибки сборки и runtime.","type":"unstyled","key":"8lc10"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда подключать библиотеки и фреймворки — честный разбор","type":"header-two","key":"bgni2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фреймворк не делает вас разработчиком автоматически. Он ускоряет работу там, где уже есть понимание основ: события, состояние, модули, асинхронность, работа с API. Если основы не закреплены, фреймворк превращается в магию. Поэтому критерий выбора — не «что популярнее», а «какая задача и какой масштаб».","type":"unstyled","key":"dsrav"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jQuery — где еще может быть полезен, а где нет смысла","type":"header-three","key":"di62s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"jQuery исторически решал проблемы совместимости браузеров и упрощал DOM-манипуляции. Сегодня большинство возможностей закрыто стандартным JavaScript, поэтому в новых проектах jQuery обычно не нужен. Но он может встречаться в поддержке старых сайтов, админок и легаси-проектов. Там знание jQuery помогает, но начинать обучение с него обычно не стоит.","type":"unstyled","key":"1avf9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React, Vue, Angular — в каких задачах они выигрывают","type":"header-three","key":"e67cn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Фреймворки выигрывают, когда интерфейс сложный: много компонентов, состояния, маршрутизация, повторное использование, работа с формами на десятки полей, согласованность команды. Они дают структуру и предсказуемую архитектуру, уменьшая хаос в проекте на 20 000–200 000 строк.","type":"unstyled","key":"e0pkv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"React — компонентный подход и большая экосистема, часто выбирают для сложных SPA.","type":"unordered-list-item","key":"bma3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Vue — более низкий порог входа и удобные шаблоны, популярен в продуктовых интерфейсах.","type":"unordered-list-item","key":"fbsmv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Angular — мощный «фреймворк-комбайн» с жёсткой структурой, часто в корпоративных системах.","type":"unordered-list-item","key":"aia44"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как не переусложнить — критерии выбора под задачу","type":"header-three","key":"ds0qq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если страница простая и логики мало — чистый JS даст меньше веса и меньше инфраструктуры.","type":"unordered-list-item","key":"csbli"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если логика растёт и повторяется — подключайте библиотеки точечно.","type":"unordered-list-item","key":"f1lfe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если нужна архитектура, компоненты и масштабирование — выбирайте фреймворк.","type":"unordered-list-item","key":"6aitl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вы учитесь — сначала закрепите DOM, события, модули и асинхронность.","type":"unordered-list-item","key":"723qj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хороший маркер: если вам нужна сборка, маршрутизация, управление состоянием и много переиспользуемых компонентов, то фреймворк может сэкономить недели. Если нет, он может добавить лишние слои и замедлить обучение.","type":"unstyled","key":"f1ads"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Мини-проекты для практики — от простого к продающему результату","type":"header-two","key":"75rjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Практика в JavaScript эффективнее, когда проект имеет измеримый результат: кнопка меняет состояние, форма валидируется, данные сохраняются, список фильтруется, запросы показывают реальную сеть. Ниже набор мини-проектов, которые закрывают ключевые навыки. Делайте их последовательно и усложняйте: добавляйте обработку ошибок, состояние загрузки, хранение, оптимизацию. Так вы растёте быстрее, чем от чтения теории.","type":"unstyled","key":"3sqbu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Кнопка и счетчик — события и состояние","type":"header-three","key":"9r9p2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — освоить addEventListener, хранение состояния в переменной и обновление DOM. Усложнение: ограничение по максимуму, кнопка сброса, сохранение в localStorage, отображение последнего времени изменения.","type":"unstyled","key":"bnvdg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Модальное окно — классы, доступность и обработчики","type":"header-three","key":"744lc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — управление классами, закрытие по клику на фон, по Escape, запрет скролла фона. Усложнение: фокус-ловушка, чтобы Tab не уходил за пределы модалки, корректные aria-атрибуты.","type":"unstyled","key":"1iau8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Валидация формы — UX и проверки","type":"header-three","key":"1eep5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — обработка submit, подсказки рядом с полями, нормализация ввода, блокировка отправки при ошибках. Усложнение: асинхронная проверка уникальности, дебаунс, состояние «проверяем».","type":"unstyled","key":"dq9e6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Список задач ToDo — CRUD, хранение и структура","type":"header-three","key":"8v0el"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — создать, прочитать, обновить, удалить задачи. Усложнение: фильтры «все», «активные», «выполненные», сортировка по дате, хранение в localStorage, экспорт и импорт JSON.","type":"unstyled","key":"7fpfc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Поиск по списку — фильтрация и дебаунс","type":"header-three","key":"6p5dc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — фильтрация массива по вводу, обновление DOM, дебаунс 300 мс. Усложнение: подсветка совпадений, поиск без учета регистра, нормализация пробелов.","type":"unstyled","key":"dord0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Калькулятор — условия и аккуратные вычисления","type":"header-three","key":"ael2c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — обработка кнопок и операций, работа со строкой ввода, предотвращение ошибок деления на ноль. Усложнение: поддержка десятичных, приоритет операций, история вычислений.","type":"unstyled","key":"bhpeh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таймер и часы — Date и интервалы","type":"header-three","key":"4tiq3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — setInterval, корректное форматирование времени, остановка и сброс. Усложнение: таймер обратного отсчёта, звуковой сигнал, сохранение состояния между перезагрузками.","type":"unstyled","key":"3nss3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Квиз — логика, данные, рендер, результат","type":"header-three","key":"ebkc6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — хранение вопросов массивом объектов, подсчет баллов, переход между экранами, блокировка кнопки без ответа. Усложнение: перемешивание вариантов, таймер на вопрос, разбор ошибок по итогам.","type":"unstyled","key":"a0489"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Погода через API — fetch, статусы, ошибки","type":"header-three","key":"7654t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — запрос к API, состояние загрузки, обработка 404 и сетевых ошибок, отображение результата. Усложнение: кеширование на 10 минут, отмена запросов при быстром вводе, отображение по геолокации при разрешении.","type":"unstyled","key":"5u76m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Галерея изображений — DOM, события, оптимизация","type":"header-three","key":"charn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель — рендер списка, модальный просмотр, переключение стрелками, ленивая загрузка. Усложнение: IntersectionObserver для подгрузки, предзагрузка следующего изображения, оптимизация перерисовок.","type":"unstyled","key":"ed4cf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"План обучения JavaScript — как не бросить через неделю","type":"header-two","key":"4ct6f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Самая частая причина «бросил» — слишком много теории без результата и отсутствие системы. Работает простая модель: короткие циклы, измеримая практика, регулярный разбор ошибок. Лучше заниматься 30–60 минут 5 раз в неделю, чем 6 часов раз в две недели. Регулярность формирует навыки быстрее, чем редкие марафоны.","type":"unstyled","key":"6tc0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как поставить цель — сайт, виджет, портфолио, работа","type":"header-three","key":"c17q5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Цель должна быть конкретной и проверяемой. Например, «сделать виджет формы с валидацией и отправкой на API», «собрать 5 мини-проектов в портфолио», «научиться уверенно отлаживать DOM-ошибки». Чем яснее цель, тем легче выбирать темы и не распыляться.","type":"unstyled","key":"434f4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как распределить теорию и практику — правило коротких итераций","type":"header-three","key":"b28ne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рабочая пропорция для новичка — примерно 30% теории и 70% практики. Вы читаете небольшой блок, сразу применяете, фиксируете ошибки, переписываете чище. Итерация может занимать 40–90 минут. В конце каждой итерации должен быть результат: кнопка работает, запрос приходит, список фильтруется.","type":"unstyled","key":"fpok4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как закреплять — задачи, разбор ошибок, рефакторинг","type":"header-three","key":"a4o2g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Закрепление — это повтор в новом контексте. Сделайте похожую задачу иначе: другая форма, другой список, другое API. Потом вернитесь и улучшите код: вынесите функции, добавьте обработку ошибок, примените ESLint, переименуйте переменные, уменьшите вложенность. Это и есть рост.","type":"unstyled","key":"12pi2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как читать документацию — MDN, спецификации, примеры","type":"header-three","key":"62ind"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Документация — навык, который окупается всю жизнь. Начинайте с MDN для понимания методов, событий и API. Читайте разделы «Parameters», «Return value», «Examples», «Browser compatibility». Если видите незнакомое слово, ищите его определение и проверяйте примеры в консоли.","type":"unstyled","key":"1vmsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как задавать вопросы — минимальный воспроизводимый пример","type":"header-three","key":"fpeki"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чтобы получать помощь быстро, делайте минимальный пример, где ошибка воспроизводится. Уберите всё лишнее, оставьте 20–60 строк, добавьте шаги воспроизведения и ожидаемое поведение. Такой подход полезен даже без внешней помощи: пока вы упрощаете пример, вы часто сами находите ошибку.","type":"unstyled","key":"apeim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чек-лист готового проекта на JavaScript — чтобы не стыдно показать","type":"header-two","key":"58o2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Чек-лист помогает довести работу до уровня, который можно показать в портфолио, отправить заказчику или использовать как основу. Это не бюрократия, а страховка от типичных провалов: непонятные имена, отсутствие обработки ошибок, лаги и уязвимости.","type":"unstyled","key":"6hueb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код читаемый — имена, модули, отсутствие лишних зависимостей","type":"header-three","key":"bjvlf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Имена отражают смысл, нет хаоса из tmp и data1.","type":"unordered-list-item","key":"5e6m9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Код разделён на модули по ответственности.","type":"unordered-list-item","key":"221qv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет глобальных переменных без причины.","type":"unordered-list-item","key":"bm340"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зависимости минимальны и оправданы задачей.","type":"unordered-list-item","key":"fa9vc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ошибки обработаны — пользователь видит понятные сообщения","type":"header-three","key":"g4e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сеть и JSON обрабатываются через try catch или проверки статуса.","type":"unordered-list-item","key":"9laoo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Показаны состояния загрузки, ошибки и повтор.","type":"unordered-list-item","key":"4g0df"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Нет «тихих» падений, которые ломают интерфейс без объяснения.","type":"unordered-list-item","key":"3lu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Производительность нормальная — нет лишних перерисовок и лагов","type":"header-three","key":"ip20"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Тяжелые операции не выполняются на каждое событие без ограничений.","type":"unordered-list-item","key":"44ge"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Используются дебаунс и троттлинг там, где нужно.","type":"unordered-list-item","key":"a2nhq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM-обновления объединены и не создают заметных задержек.","type":"unordered-list-item","key":"da6kv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Безопасность учтена — ввод пользователя не ломает страницу","type":"header-three","key":"3lk6v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Пользовательский ввод выводится через textContent.","type":"unordered-list-item","key":"2qkk9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Данные валидируются и нормализуются.","type":"unordered-list-item","key":"ecc5d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Секреты не хранятся в небезопасных местах без необходимости.","type":"unordered-list-item","key":"3102k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"README — как запустить, что делает, какие технологии","type":"header-three","key":"5ln1n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"README — это ваша визитка. В нём должны быть понятные шаги запуска, описание функциональности, список технологий и ограничений. Если проект требует Node.js, укажите версию, например LTS, и команды npm. Если проект статический, опишите деплой и где посмотреть результат. Такой README повышает доверие и экономит время тем, кто будет проверять вашу работу.","type":"unstyled","key":"9ntd8"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":42,"offset":0}],"inlineStyleRanges":[{"length":38,"offset":0,"style":"BOLD"},{"length":3,"offset":39,"style":"BOLD"}],"text":"\uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0 ВЫБЕРИТЕ ЛУЧШИЙ КУРС по JAVASCRIPT \uD83D\uDFE0\uD83D\uDFE0\uD83D\uDFE0","type":"unstyled","key":"5d2m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важная подборка","type":"header-two","key":"a465"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":21,"offset":0}],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Объекты в JavaScript ","type":"unordered-list-item","key":"ejacv"},{"data":{},"depth":0,"entityRanges":[{"key":2,"length":18,"offset":0}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Методы JavaScript ","type":"unordered-list-item","key":"3vnql"},{"data":{},"depth":0,"entityRanges":[{"key":3,"length":24,"offset":0}],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Как запустить JavaScript","type":"unordered-list-item","key":"7u7lr"},{"data":{},"depth":0,"entityRanges":[{"key":4,"length":26,"offset":0}],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Как установить JavaScript ","type":"unordered-list-item","key":"57daq"},{"data":{},"depth":0,"entityRanges":[{"key":5,"length":33,"offset":0}],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"Java и JavaScript — в чем разница","type":"unordered-list-item","key":"f40vt"},{"data":{},"depth":0,"entityRanges":[{"key":6,"length":23,"offset":0}],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Как написать JavaScript","type":"unordered-list-item","key":"13m89"},{"data":{},"depth":0,"entityRanges":[{"key":7,"length":18,"offset":0}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"JavaScript что это","type":"unordered-list-item","key":"48uot"},{"data":{},"depth":0,"entityRanges":[{"key":8,"length":25,"offset":0}],"inlineStyleRanges":[{"length":25,"offset":0,"style":"BOLD"}],"text":"Для чего нужен JavaScript","type":"unordered-list-item","key":"3d1e0"},{"data":{},"depth":0,"entityRanges":[{"key":9,"length":27,"offset":0}],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Где используется JavaScript","type":"unordered-list-item","key":"avr1v"},{"data":{},"depth":0,"entityRanges":[{"key":10,"length":23,"offset":0}],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Как работает JavaScript","type":"unordered-list-item","key":"aj0aq"},{"data":{},"depth":0,"entityRanges":[{"key":11,"length":23,"offset":0}],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"Как включить JavaScript","type":"unordered-list-item","key":"9fkuj"},{"data":{},"depth":0,"entityRanges":[{"key":12,"length":24,"offset":0}],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Как исправить JavaScript","type":"unordered-list-item","key":"fqc17"},{"data":{},"depth":0,"entityRanges":[{"key":13,"length":18,"offset":0}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Функции JavaScript","type":"unordered-list-item","key":"8cfnr"},{"data":{},"depth":0,"entityRanges":[{"key":14,"length":18,"offset":0}],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"JavaScript runtime","type":"unordered-list-item","key":"90vmb"},{"data":{},"depth":0,"entityRanges":[{"key":15,"length":20,"offset":0}],"inlineStyleRanges":[{"length":20,"offset":0,"style":"BOLD"}],"text":"JavaScript и Node.js","type":"unordered-list-item","key":"4mptg"},{"data":{},"depth":0,"entityRanges":[{"key":16,"length":41,"offset":0}],"inlineStyleRanges":[{"length":41,"offset":0,"style":"BOLD"}],"text":"JavaScript — какой браузер у пользователя","type":"unordered-list-item","key":"3igjt"},{"data":{},"depth":0,"entityRanges":[{"key":17,"length":45,"offset":0}],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"JavaScript — какие приложения можно создавать","type":"unordered-list-item","key":"9d163"},{"data":{},"depth":0,"entityRanges":[{"key":18,"length":34,"offset":0}],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"JavaScript как скачать и запустить","type":"unordered-list-item","key":"5ogmv"},{"data":{},"depth":0,"entityRanges":[{"key":19,"length":22,"offset":0}],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Как удалить JavaScript","type":"unordered-list-item","key":"1dmnl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2qq7e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"M7Qc3rBoeRNwxBvPaANc"}],"entityMap":{"11":{"data":{"href":"https://dzen.ru/a/aXnFWmiZZjCgirg0","badSeoLink":"true","url":"https://dzen.ru/a/aXnFWmiZZjCgirg0"},"mutability":"MUTABLE","type":"LINK"},"12":{"data":{"href":"https://dzen.ru/a/aYMIte1b7EvwkaZv","badSeoLink":"true","url":"https://dzen.ru/a/aYMIte1b7EvwkaZv"},"mutability":"MUTABLE","type":"LINK"},"13":{"data":{"href":"https://dzen.ru/a/aYNoarZOIQ7JTSpD","badSeoLink":"true","url":"https://dzen.ru/a/aYNoarZOIQ7JTSpD"},"mutability":"MUTABLE","type":"LINK"},"14":{"data":{"href":"https://dzen.ru/a/aYN_lfEUuBtAaedB","badSeoLink":"true","url":"https://dzen.ru/a/aYN_lfEUuBtAaedB"},"mutability":"MUTABLE","type":"LINK"},"15":{"data":{"href":"https://dzen.ru/a/aYRAxswX5zgE2Lug","badSeoLink":"true","url":"https://dzen.ru/a/aYRAxswX5zgE2Lug"},"mutability":"MUTABLE","type":"LINK"},"16":{"data":{"href":"https://dzen.ru/a/aYRnFoqSeTiF5boU","badSeoLink":"true","url":"https://dzen.ru/a/aYRnFoqSeTiF5boU"},"mutability":"MUTABLE","type":"LINK"},"17":{"data":{"href":"https://dzen.ru/a/aYR4MPFAKmpXB8o4","badSeoLink":"true","url":"https://dzen.ru/a/aYR4MPFAKmpXB8o4"},"mutability":"MUTABLE","type":"LINK"},"18":{"data":{"href":"https://dzen.ru/a/aYSDlAQ591SJqK3T","badSeoLink":"true","url":"https://dzen.ru/a/aYSDlAQ591SJqK3T"},"mutability":"MUTABLE","type":"LINK"},"19":{"data":{"href":"https://dzen.ru/a/aYV06yJPDjbCecTj","badSeoLink":"true","url":"https://dzen.ru/a/aYV06yJPDjbCecTj"},"mutability":"MUTABLE","type":"LINK"},"0":{"data":{"badSeoLink":"true","url":"https://dzen.ru/a/aNtzwEorFByIm9DY"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://dzen.ru/a/aYLeKV2122ZjPFIm","badSeoLink":"true","url":"https://dzen.ru/a/aYLeKV2122ZjPFIm"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"href":"https://dzen.ru/a/aYLMO2kn51mJlxgS","badSeoLink":"true","url":"https://dzen.ru/a/aYLMO2kn51mJlxgS"},"mutability":"MUTABLE","type":"LINK"},"3":{"data":{"href":"https://dzen.ru/a/aYHfH4614jQsnFDI","badSeoLink":"true","url":"https://dzen.ru/a/aYHfH4614jQsnFDI"},"mutability":"MUTABLE","type":"LINK"},"4":{"data":{"href":"https://dzen.ru/a/aYCKIY3GZTGYZJrS","badSeoLink":"true","url":"https://dzen.ru/a/aYCKIY3GZTGYZJrS"},"mutability":"MUTABLE","type":"LINK"},"5":{"data":{"href":"https://dzen.ru/a/aYBDhwVgQmAod2PV","badSeoLink":"true","url":"https://dzen.ru/a/aYBDhwVgQmAod2PV"},"mutability":"MUTABLE","type":"LINK"},"6":{"data":{"href":"https://dzen.ru/a/aXyjQHdjTjfGM5iT","badSeoLink":"true","url":"https://dzen.ru/a/aXyjQHdjTjfGM5iT"},"mutability":"MUTABLE","type":"LINK"},"7":{"data":{"href":"https://dzen.ru/a/aXw9fr6oxnqfLYmu","badSeoLink":"true","url":"https://dzen.ru/a/aXw9fr6oxnqfLYmu"},"mutability":"MUTABLE","type":"LINK"},"8":{"data":{"href":"https://dzen.ru/a/aXt-30Q3gztGyVFj","badSeoLink":"true","url":"https://dzen.ru/a/aXt-30Q3gztGyVFj"},"mutability":"MUTABLE","type":"LINK"},"9":{"data":{"href":"https://dzen.ru/a/aXs1237GbWT5654t","badSeoLink":"true","url":"https://dzen.ru/a/aXs1237GbWT5654t"},"mutability":"MUTABLE","type":"LINK"},"10":{"data":{"href":"https://dzen.ru/a/aXr6fG0DeUci95nz","badSeoLink":"true","url":"https://dzen.ru/a/aXr6fG0DeUci95nz"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}