Заголовок

{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript в браузере — это не просто «язык для оживления кнопок». Это полноценная среда выполнения, которая даёт фронтенд-разработчику доступ к структуре страницы, поведению браузера и даже сетевым возможностям. Давай разложим всё по полочкам — от основ до реальных механизмов, которые работают у тебя под капотом.","type":"unstyled","key":"2ceri"},{"data":{"image":{"id":"69e532bff83b6b61f93d8afa"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"eurr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что такое браузер и как он устроен","type":"header-two","key":"e3dsc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Браузер — это программное обеспечение для отображения веб-страниц. Сегодня он есть буквально везде: на компьютерах, смартфонах, телевизорах, игровых консолях и даже в терминалах оплаты.","type":"unstyled","key":"2ibsi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Внутри браузера есть глобальный объект:","type":"unstyled","key":"f4th8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":0,"style":"BOLD"}],"text":"window","type":"unstyled","key":"2qocu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Это точка входа во всё, что происходит на странице. У него есть три ключевых составляющих:","type":"unstyled","key":"flmqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. DOM (Document Object Model)","type":"header-three","key":"22ig7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"DOM — это объектное представление HTML-документа.","type":"unstyled","key":"2dud0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Пример:","type":"unstyled","key":"beepc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"document.body.innerText = \"Привет, мир!\";","type":"unstyled","key":"a27qo"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ты можешь:","type":"unstyled","key":"7j5bb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"менять структуру страницы;","type":"unordered-list-item","key":"1jgmt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"добавлять/удалять элементы;","type":"unordered-list-item","key":"5pnqm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"реагировать на события (клики, ввод).","type":"unordered-list-item","key":"5dmug"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":14,"style":"BOLD"}],"text":"Проще говоря: DOM = работа с содержимым страницы","type":"unstyled","key":"7bpnf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. BOM (Browser Object Model)","type":"header-three","key":"en8a4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"BOM — это API для работы с самим браузером.","type":"unstyled","key":"962pl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":7,"offset":0,"style":"BOLD"}],"text":"Пример:","type":"unstyled","key":"bmq6b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"window.location.href = \"https://dzen.ru\";","type":"unstyled","key":"avop6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что сюда входит:","type":"unstyled","key":"akqa7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"location — управление URL;","type":"unordered-list-item","key":"acvgl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"navigator — информация о браузере;","type":"unordered-list-item","key":"f7sdr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"history — история переходов;","type":"unordered-list-item","key":"egvis"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"alert, confirm — диалоги.","type":"unordered-list-item","key":"9lut6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"BOM = управление браузером","type":"unstyled","key":"67gjp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. JavaScript","type":"header-three","key":"f8e73"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"JavaScript — это связующее звено, которое даёт доступ к DOM и BOM.","type":"unstyled","key":"8vfr6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":63,"style":"BOLD"}],"text":"Важно:\nJavaScript — это не просто язык, а реализация стандарта ECMA-262.","type":"unstyled","key":"fh48f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":41,"style":"BOLD"}],"text":"Актуальная версия стандарта на сегодня — ECMAScript 2024 (ES15).\nНовые версии выходят регулярно, и браузеры постепенно внедряют их в свои движки (например, V8 в Chrome).","type":"unstyled","key":"cm31u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Из-за этого:","type":"unstyled","key":"7g47m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"новые фичи могут не работать в старых браузерах;","type":"unordered-list-item","key":"3t8ih"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"иногда нужен Babel / полифиллы.","type":"unordered-list-item","key":"49bcn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Полифил (полифилл; англ. Polyfill) — код, реализующий какую-либо новую функциональность среды развёртывания в старой версии этой среды, где не поддерживаются новые функции.","type":"blockquote","key":"baaq0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⚙️ Как подключить JavaScript к странице","type":"header-two","key":"dq26l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возьмём базовый HTML:","type":"unstyled","key":"b6d50"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\n\nЗаголовок\n\n\nПривет, Страна!\n\n","type":"unstyled","key":"7dgte"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сейчас тут нет JS — браузер просто отрисует текст: Привет, Страна!","type":"unstyled","key":"9gl9i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDD39 Способ 1: Встроенный ","type":"unstyled","key":"cdrl7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает браузер:","type":"unstyled","key":"3nhae"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Читает HTML до ","type":"unstyled","key":"6vkm4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Типы путей:","type":"unstyled","key":"58bdp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Относительный:","type":"unordered-list-item","key":"3tgut"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" # Этот скрипт мы загружаем с использованием относительного пути, то есть index.js должен быть расположен в той же директории, что и загруженная html страница.","type":"unstyled","key":"21ll4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Абсолютный:","type":"unordered-list-item","key":"4p826"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" # Здесь показан абсолютный путь. Он начинается с / и отсчитывается от корня сайта.","type":"unstyled","key":"e0m51"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Полный URL:","type":"unordered-list-item","key":"35dcv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" # А это полный URL до какого-то скрипта, который, как правило, находится на другом сайте. Он начинается c http:// или https:// , далее идет доменное имя, а затем уже абсолютный путь до файла.","type":"unstyled","key":"509n6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":14,"offset":0,"style":"BOLD"}],"text":"Без протокола:","type":"unordered-list-item","key":"3oun0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" # С помощью этого варианта можно загрузить внешний скрипт с другого сайта, но без точного указания протокола. Скрипт будет загружен по http , если текущая страница открыта с помощью http.","type":"unstyled","key":"1e3io"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Второй способ подключения JavaScript — написать скрипт в отдельном файле, например, index.js и потом подключить его к html странице.","type":"blockquote","key":"2i3ou"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для подключения внешних скриптов необходимо использовать атрибут src тега ","type":"unstyled","key":"d9ngk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"загружается асинхронно;","type":"unordered-list-item","key":"5902f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":20,"offset":12,"style":"BOLD"}],"text":"выполняется после построения DOM;","type":"unordered-list-item","key":"c4t78"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сохраняет порядок.","type":"unordered-list-item","key":"8n1c7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 лучший выбор для большинства случаев","type":"unstyled","key":"bcp7i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDD38 async","type":"header-three","key":"1r115"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6pngi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"загружается асинхронно;","type":"unordered-list-item","key":"akrc7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"выполняется сразу после загрузки;","type":"unordered-list-item","key":"2nu7p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":23,"offset":0,"style":"BOLD"}],"text":"порядок не гарантирован.","type":"unordered-list-item","key":"7541r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 подходит для:","type":"unstyled","key":"fnih0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"аналитики;","type":"unordered-list-item","key":"bqp75"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"сторонних скриптов.","type":"unordered-list-item","key":"brsvn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Возможности JavaScript в браузере","type":"header-two","key":"75nap"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот где начинается самое интересное:","type":"unstyled","key":"cc2er"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Работа с DOM","type":"header-three","key":"4eold"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"создание интерфейсов;","type":"unordered-list-item","key":"dr9la"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"SPA (React, Vue);","type":"unordered-list-item","key":"4f85q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"динамические обновления.","type":"unordered-list-item","key":"fi7d7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сетевые запросы","type":"header-three","key":"al68e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"fetch(\"/api/data\")","type":"unstyled","key":"503v7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 AJAX, REST, GraphQL","type":"unstyled","key":"9o2ad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"GraphQL — это язык запросов к данным и одновременно среда для выполнения этих запросов. Был разработан как альтернатива традиционным REST API.","type":"blockquote","key":"f8cjd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Таймеры","type":"header-three","key":"98svd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"setTimeout()\nsetInterval()","type":"unstyled","key":"1q9hk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"События","type":"header-three","key":"firb1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"button.addEventListener(\"click\", ...)","type":"unstyled","key":"dsb9e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Хранение данных","type":"header-three","key":"7lhu5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"localStorage;","type":"unordered-list-item","key":"cbiad"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"sessionStorage;","type":"unordered-list-item","key":"7d4hg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"IndexedDB.","type":"unordered-list-item","key":"15scd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"API браузера","type":"header-three","key":"9shv6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Canvas (графика);","type":"unordered-list-item","key":"9pn2u"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"WebGL (3D);","type":"unordered-list-item","key":"1s91b"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Web Audio;","type":"unordered-list-item","key":"cer0n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Geolocation.","type":"unordered-list-item","key":"8o139"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Асинхронность","type":"header-three","key":"fap0h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Promises;","type":"unordered-list-item","key":"fpq28"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"async/await;","type":"unordered-list-item","key":"bi460"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Event Loop.","type":"unordered-list-item","key":"fvi0c"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Важный нюанс про стандарты","type":"header-two","key":"bbq9h"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":17,"offset":71,"style":"BOLD"}],"text":"JavaScript развивается по стандарту ECMA-262, но браузеры внедряют его не одновременно, а постепенно и поэтапно, растягивая по времени внедрения.","type":"unstyled","key":"1cr0j"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDC49 Поэтому:","type":"unstyled","key":"1b49t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"проверяй поддержку (caniuse.com);","type":"unordered-list-item","key":"bl5o7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"используй транспиляцию;","type":"unordered-list-item","key":"a3p0v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"не доверяй «работает у меня».","type":"unordered-list-item","key":"4kogj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Транспиляция — преобразование программы, написанной на одном языке программирования в качестве исходных данных, в эквивалентный код другой версии этого языка или в другой язык программирования того же уровня абстракции. ","type":"blockquote","key":"cfrup"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83E\uDDFE Резюме","type":"header-two","key":"5m85p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":5,"style":"BOLD"}],"text":"Есть 2 способа подключения JS:\nвстроенный