[{"data":1,"prerenderedAt":1710},["ShallowReactive",2],{"topic:aidt-bac-webdev:topic-01":3},{"content":4,"pz":602,"lr":614,"additional":602,"courseMeta":1663},{"id":5,"title":6,"body":7,"course_slug":601,"description":17,"env_label":602,"env_url":602,"extension":603,"group":602,"is_course_project":604,"is_index":604,"level":602,"meta":605,"navigation":606,"path":607,"section":608,"seo":609,"stem":610,"topic_number":611,"topic_slug":612,"__hash__":613},"courses\u002Fcourses\u002Faidt-bac-webdev\u002Ftopic-01-content.md","Веб, HTTP и устройство веб-приложения",{"type":8,"value":9,"toc":577},"minimark",[10,14,18,23,28,45,48,52,65,68,71,75,79,92,103,148,161,172,195,199,212,259,268,379,388,393,397,406,415,421,425,429,442,445,454,457,460,464,471,474,478,491,494,498,502,505,508,517,520,524,527,530,534,537,540,543,547],[11,12,6],"h1",{"id":13},"веб-http-и-устройство-веб-приложения",[15,16,17],"p",{},"Курс посвящён веб-приложениям: программам, которые пользователь открывает в браузере, а данные которых живут на сервере. Прежде чем написать первую строку разметки, разберём механику, на которой держится всё остальное: что происходит между вводом адреса и появлением страницы на экране. Адрес, запрос, ответ, разбор документа, запросы за ресурсами, отрисовка — эта цепочка повторяется при каждом открытии любой страницы, и каждое её звено в дальнейшем получит отдельную тему. Здесь мы пройдём цепочку целиком, чтобы дальше было видно, какое место занимает HTML, где вступает в дело CSS и зачем странице скрипт.",[19,20,22],"h2",{"id":21},"гипертекст-и-всемирная-паутина","Гипертекст и Всемирная паутина",[24,25,27],"h3",{"id":26},"гипертекст-и-гипермедиа","Гипертекст и гипермедиа",[15,29,30,31,44],{},"Гипертекст — текст, содержащий ссылки на другие тексты, по которым читатель переходит в выбранном им порядке. Обычная книга читается от начала к концу; гипертекст не имеет единственного порядка чтения, его задаёт сам читатель, выбирая ссылку за ссылкой. Термин предложил Тед Нельсон в 1965 году, описывая файловую структуру для документов, которые меняются и связаны друг с другом ",[32,33,36],"sup",{"className":34},[35],"cite",[37,38,40],"a",{"href":39},"#ref-1",[41,42,43],"span",{},"1",". Он же ввёл слово «гипермедиа» — то же самое, но для изображений, звука и видео; в обиходе закрепился первый термин, хотя современный веб гипермедийный по существу.",[15,46,47],{},"Ссылка — основная операция гипертекста, и на ней держится вся дальнейшая конструкция. Если связанные документы лежат на одной машине, ссылке достаточно имени файла. Если на разных, потребуются две вещи: способ назвать документ так, чтобы имя было понятно на любой машине сети, и способ доставить документ по этому имени. Первая задача решается адресом, вторая — протоколом передачи.",[24,49,51],{"id":50},"от-идеи-до-современного-состояния","От идеи до современного состояния",[15,53,54,55,64],{},"В 1989 году Тим Бернерс-Ли, работавший в Европейской организации по ядерным исследованиям (CERN), предложил систему для хранения служебной документации, в которой документы были бы связаны ссылками и доступны с любого компьютера сети ",[32,56,58],{"className":57},[35],[37,59,61],{"href":60},"#ref-2",[41,62,63],{},"2",". Из этого предложения выросли три составляющие, определяющие веб до сих пор: единообразный адрес ресурса (URL), протокол передачи гипертекста (HTTP) и язык разметки гипертекста (HTML). К концу 1990 года были написаны первый сервер и первый браузер, а в 1991 году система стала доступна за пределами CERN.",[15,66,67],{},"Веб часто отождествляют с интернетом, и это неточно. Интернет — сеть сетей, обеспечивающая доставку пакетов между машинами; он существовал за двадцать лет до веба и обслуживает электронную почту, передачу файлов и многое другое. Веб — один из сервисов поверх интернета: набор соглашений о том, как называть документы, как их запрашивать и как записывать. Именно эти соглашения мы будем изучать.",[15,69,70],{},"Базовая механика веба за тридцать лет не изменилась: пользователь называет адрес, браузер отправляет запрос, сервер возвращает документ, браузер его отображает. Изменилось содержание документа. Первые страницы были статичными: сервер отдавал файл как есть. С появлением форм страница научилась отправлять данные обратно, и сервер стал собирать документы на лету. С появлением скриптов страница научилась меняться прямо в браузере и запрашивать данные, не перезагружаясь. Так документ превратился в приложение: программу, которая выполняется в браузере и разговаривает с сервером. Механика запроса и ответа осталась прежней, и потому начинать надо с неё.",[19,72,74],{"id":73},"адресация-и-протокол","Адресация и протокол",[24,76,78],{"id":77},"url","URL",[15,80,81,82,91],{},"Единообразный указатель ресурса (Uniform Resource Locator, URL) — строка, по которой браузер находит ресурс в сети. Правила её записи закреплены стандартом ",[32,83,85],{"className":84},[35],[37,86,88],{"href":87},"#ref-3",[41,89,90],{},"3",". Рассмотрим адрес, в котором присутствуют все составляющие:",[93,94,99],"pre",{"className":95,"code":97,"language":98},[96],"language-text","https:\u002F\u002Ftasks.example.ru:8080\u002Fapi\u002Ftasks?status=active&page=2#top\n","text",[100,101,97],"code",{"__ignoreMap":102},"",[15,104,105,106,109,110,113,114,117,118,121,122,125,126,121,129,131,132,135,136,139,140,143,144,147],{},"Схема ",[100,107,108],{},"https"," называет протокол, по которому следует обращаться к ресурсу. Хост ",[100,111,112],{},"tasks.example.ru"," — имя машины в сети; перед отправкой запроса браузер переводит его в числовой адрес, обращаясь к системе доменных имён (DNS). Порт ",[100,115,116],{},"8080"," — номер, по которому операционная система сервера различает программы, принимающие соединения; если порт не указан, он подразумевается схемой: ",[100,119,120],{},"80"," для ",[100,123,124],{},"http",", ",[100,127,128],{},"443",[100,130,108],{},". Путь ",[100,133,134],{},"\u002Fapi\u002Ftasks"," указывает ресурс внутри хоста; исторически он совпадал с путём к файлу на диске, у приложения же путь — имя, которое сервер истолковывает сам. Параметры запроса после ",[100,137,138],{},"?"," — пары «имя — значение», соединённые знаком ",[100,141,142],{},"&","; так странице передают уточнения: фильтр, номер страницы, поисковую строку. Фрагмент после ",[100,145,146],{},"#"," адресует часть документа и на сервер не отправляется: с ним работает только браузер, прокручивая страницу к нужному месту.",[149,150,151,152,151,157],"figure",{},"\n  ",[153,154],"img",{"src":155,"alt":156},"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Furl_anatomy.svg","Составляющие URL: схема, хост, порт, путь, параметры запроса, фрагмент",[158,159,160],"figcaption",{},"Составляющие адреса: схема, хост, порт, путь, параметры запроса и фрагмент",[15,162,163,164,167,168,171],{},"В адресе допустимы латинские буквы, цифры и небольшой набор знаков. Всё остальное — кириллица, пробел, сами служебные знаки внутри значений — передаётся в закодированном виде: каждый байт представления UTF-8 записывается как знак ",[100,165,166],{},"%"," и два шестнадцатеричных разряда. Слово «задачи» превращается в ",[100,169,170],{},"%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8",", по два байта на букву. Адресная строка браузера показывает адрес в раскодированном виде для удобства чтения, но на сервер уходит закодированный.",[15,173,174,175,178,179,182,183,186,187,190,191,194],{},"Адрес может быть относительным: ссылка ",[100,176,177],{},"tasks.html"," в документе ",[100,180,181],{},"https:\u002F\u002Fexample.ru\u002Fapp\u002Findex.html"," разрешается в ",[100,184,185],{},"https:\u002F\u002Fexample.ru\u002Fapp\u002Ftasks.html",", а ",[100,188,189],{},"\u002Ftasks.html"," — в ",[100,192,193],{},"https:\u002F\u002Fexample.ru\u002Ftasks.html",", от корня хоста. Разметка документа почти целиком состоит из относительных адресов, и правила их разрешения понадобятся уже в теме 2.",[24,196,198],{"id":197},"http-запрос-и-ответ","HTTP: запрос и ответ",[15,200,201,202,211],{},"Протокол передачи гипертекста (HyperText Transfer Protocol, HTTP) устроен по схеме «запрос — ответ»: клиент отправляет запрос, сервер возвращает ответ, после чего обмен завершён. Актуальное описание семантики протокола содержится в стандарте ",[32,203,205],{"className":204},[35],[37,206,208],{"href":207},"#ref-4",[41,209,210],{},"4",". Сообщения обоих направлений имеют одинаковое строение: стартовая строка, заголовки, пустая строка, тело.",[15,213,214,215,218,219,222,223,226,227,230,231,234,235,238,239,242,243,246,247,250,251,254,255,258],{},"Стартовая строка запроса содержит метод, адрес ресурса и версию протокола: ",[100,216,217],{},"GET \u002Fapi\u002Ftasks?status=active HTTP\u002F1.1",". Метод называет действие. ",[100,220,221],{},"GET"," запрашивает ресурс и не имеет тела; такой запрос не должен ничего менять на сервере, поэтому его можно повторять и кешировать. ",[100,224,225],{},"POST"," передаёт данные в теле запроса: отправка формы, создание записи. ",[100,228,229],{},"PUT"," заменяет ресурс целиком, ",[100,232,233],{},"PATCH"," изменяет его часть, ",[100,236,237],{},"DELETE"," удаляет. Заголовки запроса уточняют, кто и что просит: ",[100,240,241],{},"Host"," называет хост из адреса, ",[100,244,245],{},"User-Agent"," — программу-клиент, ",[100,248,249],{},"Accept"," и ",[100,252,253],{},"Accept-Language"," — предпочтительные формат и язык ответа, ",[100,256,257],{},"Cookie"," возвращает серверу ранее выданные им данные.",[149,260,151,261,151,265],{},[153,262],{"src":263,"alt":264},"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Fhttp_exchange.svg","Строение HTTP-запроса и ответа: стартовая строка, заголовки, пустая строка, тело",[158,266,267],{},"Запрос клиента и ответ сервера имеют одинаковое строение: стартовая строка, заголовки, пустая строка и тело",[15,269,270,271,274,275,278,279,282,283,286,287,290,291,294,295,250,298,301,302,305,306,309,310,313,314,317,318,250,321,324,325,328,329,332,333,336,337,250,340,343,344,346,347,349,350,353,354,125,357,125,360,125,363,366,367,370,371,374,375,378],{},"Стартовая строка ответа содержит версию протокола, код состояния и его словесное пояснение: ",[100,272,273],{},"HTTP\u002F1.1 200 OK",". Код — трёхзначное число, первая цифра которого задаёт класс. Класс ",[100,276,277],{},"2xx"," означает успех: ",[100,280,281],{},"200"," — ресурс в теле ответа, ",[100,284,285],{},"201"," — ресурс создан, ",[100,288,289],{},"204"," — выполнено, тела нет. Класс ",[100,292,293],{},"3xx"," — перенаправление: ",[100,296,297],{},"301",[100,299,300],{},"302"," сообщают, что ресурс находится по адресу из заголовка ",[100,303,304],{},"Location",", и браузер переходит по нему сам; ",[100,307,308],{},"304"," означает, что ресурс не изменился и браузер может взять копию из своего кеша. Класс ",[100,311,312],{},"4xx"," — ошибка на стороне клиента: ",[100,315,316],{},"400"," — запрос составлен неверно, ",[100,319,320],{},"401",[100,322,323],{},"403"," — требуется вход или доступ запрещён, ",[100,326,327],{},"404"," — по такому адресу ничего нет. Класс ",[100,330,331],{},"5xx"," — ошибка на стороне сервера: ",[100,334,335],{},"500"," — сбой программы, ",[100,338,339],{},"502",[100,341,342],{},"503"," — сервер недоступен. Важная особенность: код ",[100,345,327],{}," или ",[100,348,335],{}," — это полноценный ответ с заголовками и, как правило, с телом; с точки зрения протокола обмен состоялся, просто результат отрицательный. Заголовки ответа описывают тело: ",[100,351,352],{},"Content-Type"," называет формат (",[100,355,356],{},"text\u002Fhtml",[100,358,359],{},"text\u002Fcss",[100,361,362],{},"application\u002Fjson",[100,364,365],{},"image\u002Fsvg+xml","), ",[100,368,369],{},"Content-Length"," — размер, ",[100,372,373],{},"Cache-Control"," — как долго ответ можно хранить в кеше; ",[100,376,377],{},"Set-Cookie"," передаёт клиенту данные, которые тот будет возвращать в последующих запросах.",[15,380,381,382,384,385,387],{},"Последний заголовок отвечает на вопрос, который протокол иначе оставляет открытым. HTTP не хранит состояния: сервер не помнит предыдущих запросов клиента, и каждый запрос для него самостоятелен. Чтобы сервер узнавал вернувшегося пользователя, состояние переносится в самом обмене: сервер выдаёт клиенту метку в ",[100,383,377],{},", клиент прикладывает её к каждому следующему запросу в ",[100,386,257],{},". На этом устроены сеансы и вход в систему, к чему мы вернёмся в теме 9.",[15,389,105,390,392],{},[100,391,108],{}," означает тот же HTTP, но поверх шифрованного соединения (TLS). Шифрование скрывает содержимое обмена от посредников, а сертификат сервера подтверждает, что клиент разговаривает именно с тем хостом, который назван в адресе. Строение сообщений при этом не меняется. Не меняется оно и в новых версиях протокола: HTTP\u002F2 и HTTP\u002F3 передают те же методы, коды и заголовки в двоичном виде и эффективнее используют соединение, но для автора приложения выглядят так же, как текстовый HTTP\u002F1.1.",[24,394,396],{"id":395},"цикл-загрузки-страницы","Цикл загрузки страницы",[15,398,399,400,402,403,405],{},"Соединим адрес и протокол в последовательность действий, которую браузер выполняет при открытии страницы. Получив адрес, браузер узнаёт у системы доменных имён числовой адрес хоста, устанавливает с ним соединение — для ",[100,401,108],{}," ещё и согласует шифрование — и отправляет запрос ",[100,404,221],{}," с путём из адреса. Сервер отвечает документом. Браузер начинает разбирать документ, не дожидаясь его конца, и по мере разбора обнаруживает ссылки на ресурсы: таблицы стилей, скрипты, изображения, шрифты. За каждым ресурсом отправляется отдельный запрос, нередко к другим хостам: библиотеки и шрифты часто лежат в сетях доставки содержимого, счётчики посещений — на серверах аналитики. Получив стили, браузер вычисляет раскладку и отрисовывает страницу; получив скрипты, выполняет их, и скрипты, в свою очередь, могут отправить новые запросы уже за данными.",[149,407,151,408,151,412],{},[153,409],{"src":410,"alt":411},"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Fpage_load_sequence.svg","Последовательность запросов при загрузке страницы: документ, затем ресурсы, позже данные по действию пользователя",[158,413,414],{},"Загрузка одной страницы: запрос документа, затем запросы за ресурсами, указанными в нём, позже запросы за данными без перезагрузки",[15,416,417,418,420],{},"Из этой последовательности следуют два наблюдения. Первое: одна страница — это десятки запросов, и перечень их определяет документ: браузер запрашивает ровно то, на что документ ссылается. Второе: повторное открытие той же страницы обходится дешевле. Ресурсы, для которых сервер разрешил кеширование, браузер берёт из локальной копии, не обращаясь к сети, либо спрашивает сервер, изменились ли они, и получает короткий ответ ",[100,419,308],{}," вместо тела. Так протокол без состояния обеспечивает быстрый повторный доступ, не храня ничего о клиенте.",[19,422,424],{"id":423},"браузер-как-среда-выполнения","Браузер как среда выполнения",[24,426,428],{"id":427},"архитектура-браузера","Архитектура браузера",[15,430,431,432,441],{},"Браузер — программа, которая получает документы по HTTP и превращает их в изображение на экране и в среду для выполнения скриптов. Внутри он состоит из нескольких подсистем, и их разделение объясняет многое из того, что встретится в курсе ",[32,433,435],{"className":434},[35],[37,436,438],{"href":437},"#ref-5",[41,439,440],{},"5",".",[15,443,444],{},"Сетевой слой выполняет запросы и принимает ответы: именно он реализует протокол, разобранный выше. Разборщик HTML превращает текст документа в дерево элементов — объектную модель документа (DOM), с которой затем работают остальные подсистемы и скрипты. Разборщик CSS строит из таблиц стилей набор правил и сопоставляет их элементам дерева. Движок отрисовки вычисляет по дереву и стилям положение и размер каждого элемента (раскладку) и рисует результат. Интерпретатор JavaScript выполняет скрипты, которые читают и изменяют дерево документа, отчего движок перерисовывает страницу. Хранилище держит cookies и данные, которые страница сохраняет между посещениями.",[149,446,151,447,151,451],{},[153,448],{"src":449,"alt":450},"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Fbrowser_architecture.svg","Подсистемы браузера: сетевой слой, разбор HTML и CSS, раскладка и отрисовка, интерпретатор JavaScript, хранилище",[158,452,453],{},"Подсистемы браузера: сетевой слой доставляет документ и ресурсы, разборщики строят дерево и стили, движок отрисовывает страницу, интерпретатор выполняет скрипты",[15,455,456],{},"Ключевые подсистемы объединяют в движок, и движков в современных браузерах три. Blink с интерпретатором V8 лежит в основе Chrome, а также Edge, Opera и Яндекс Браузера; WebKit с JavaScriptCore — в основе Safari; Gecko со SpiderMonkey — в основе Firefox. Для автора приложения это означает, что проверять страницу достаточно в трёх браузерах разных семейств, а не во всех существующих.",[15,458,459],{},"Каждая вкладка современного браузера выполняется в отдельном процессе, изолированном от других вкладок и от операционной системы. Страница не может читать файлы на диске пользователя, обращаться к другим вкладкам или к произвольным программам: всё, что ей доступно, — это набор интерфейсов, предоставленных браузером. Ограничение распространяется и на сеть: скрипт со страницы одного хоста по умолчанию не может читать ответы другого хоста. Это правило одного источника ещё встретится в теме 8, когда клиент и сервер данных окажутся на разных портах.",[24,461,463],{"id":462},"инструменты-разработчика","Инструменты разработчика",[15,465,466,467,470],{},"Все перечисленные подсистемы браузер показывает изнутри через инструменты разработчика, встроенные в каждый современный браузер и открываемые клавишей ",[100,468,469],{},"F12",". Панель Elements отображает дерево документа — то, что построил разборщик, а не исходный текст; дерево живое, его можно править на месте и видеть результат. Панель Console выполняет команды JavaScript в контексте страницы и показывает ошибки скриптов. Панель Network перечисляет все запросы страницы с методом, кодом ответа, типом и размером, а по щелчку раскрывает заголовки и тело; здесь протокол виден без посредников. Панель Application показывает хранилище: cookies и сохранённые страницей данные.",[15,472,473],{},"Инструменты разработчика — рабочий инструмент курса на всём его протяжении. Проверять разметку, отлаживать стили, исследовать поведение скриптов и наблюдать обмен с сервером мы будем в них, а не догадками.",[19,475,477],{"id":476},"стандартизация","Стандартизация",[15,479,480,481,490],{},"Соглашения, из которых состоит веб, закреплены в открытых стандартах, и знать, где они лежат, полезно с первого дня. Адрес и протокол описаны документами RFC, которые выпускает Инженерный совет интернета (IETF): URL — в RFC 3986, семантика HTTP — в RFC 9110. Язык HTML и объектная модель документа развиваются в группе WHATWG как «живой стандарт» без номеров версий: спецификация обновляется непрерывно, а привычное обозначение HTML5 осталось от последней нумерованной редакции ",[32,482,484],{"className":483},[35],[37,485,487],{"href":486},"#ref-6",[41,488,489],{},"6",". Консорциум W3C, основанный в 1994 году Бернерсом-Ли, с 2019 года отвечает за CSS, доступность (WCAG) и ряд программных интерфейсов. Язык JavaScript стандартизирован под именем ECMAScript организацией Ecma International, редакции выходят ежегодно.",[15,492,493],{},"Стандарты не гарантируют одинакового поведения: браузеры реализуют их с разной полнотой и в разное время. Поэтому рядом со спецификациями существуют таблицы совместимости, показывающие, какая возможность в каком браузере поддерживается, и справочники, пересказывающие стандарты человеческим языком, — среди них Mozilla Developer Network (MDN). В курсе мы будем опираться на спецификации и MDN как на источники, которым можно верить, и с осторожностью относиться к случайным руководствам, часть которых описывает веб десятилетней давности.",[19,495,497],{"id":496},"веб-приложение-и-его-части","Веб-приложение и его части",[24,499,501],{"id":500},"клиент-и-сервер","Клиент и сервер",[15,503,504],{},"Вернёмся к тому, с чего начали: веб-приложение — программа, разделённая на две части, работающие на разных машинах. Клиентская часть выполняется в браузере пользователя: она отображает данные, принимает ввод и выполняет ту часть логики, которую можно доверить браузеру. Серверная часть принимает запросы, применяет правила, хранит данные и отвечает документами или данными. Между ними — только HTTP: клиент ничего не знает об устройстве сервера, кроме адресов и формата ответов, сервер ничего не знает о клиенте, кроме содержания запросов.",[15,506,507],{},"Разделение обязанностей удобно рассмотреть на трёх поколениях веб-приложений. У статического сайта сервер — хранилище файлов: он отдаёт документы как есть, все данные записаны в самих документах, а любое изменение требует правки файлов. Приложение первого поколения отправляет ввод пользователя формой, сервер собирает новый документ на каждый запрос и возвращает его целиком; данные живут в базе на сервере, а каждое действие перезагружает страницу. Приложение с интерфейсом данных (API) разделяет обязанности иначе: сервер отдаёт данные в формате JSON, а страницу строит скрипт в браузере, запрашивая данные по мере надобности и меняя страницу без перезагрузки. Данные при этом по-прежнему хранятся на сервере, у клиента — только копия, которую он может дополнительно сохранить в браузере между посещениями.",[149,509,151,510,151,514],{},[153,511],{"src":512,"alt":513},"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Fclient_server_roles.svg","Три поколения веб-приложений: статический сайт, страницы и формы, клиент и API — распределение обязанностей между сервером и клиентом",[158,515,516],{},"Три поколения веб-приложений: как распределены обязанности сервера и клиента, где хранятся данные и что происходит при действии пользователя",[15,518,519],{},"Из разделения следует правило, к которому курс будет возвращаться. Клиентская часть работает на машине пользователя и целиком ему подконтрольна: он может изменить скрипт, отправить запрос в обход страницы, подставить любые значения. Всё, что важно для целостности данных, проверяет сервер; клиент делает проверки ради удобства, а не ради защиты. В теме 9 эта граница между доверенной и недоверенной частью будет рассмотрена подробно.",[24,521,523],{"id":522},"ориентиры-курса","Ориентиры курса",[15,525,526],{},"Курс охватывает клиентскую часть веб-приложения. Мы будем писать документы на HTML, оформлять их на CSS, программировать поведение на JavaScript и обмениваться данными с сервером по HTTP. Серверную часть мы получим готовой: программа, отдающая данные в формате JSON по заранее известным адресам, будет запускаться одной командой, а её устройство рассмотрим обзорно в заключительной теме. Программирование серверной части, развёртывание и клиентские фреймворки остаются за рамками курса и лишь упоминаются там, где без этого не обойтись.",[15,528,529],{},"Учебное приложение курса — список задач. Оно пройдёт три состояния, повторяющие три поколения веб-приложений: сначала страница, размеченная и оформленная; затем приложение, работающее целиком в браузере и хранящее задачи локально; наконец, клиент, получающий и изменяющий задачи на сервере по HTTP. Инструменты на всём пути одни и те же: браузер с инструментами разработчика, текстовый редактор и локальный сервер, отдающий файлы по HTTP так же, как это делает настоящий.",[19,531,533],{"id":532},"итоги-темы","Итоги темы",[15,535,536],{},"Веб — сервис поверх интернета, построенный на трёх соглашениях: адресе ресурса, протоколе передачи и языке разметки. Адрес состоит из схемы, хоста, порта, пути, параметров запроса и фрагмента; всё, что выходит за пределы латиницы и цифр, кодируется побайтно. HTTP — протокол без состояния по схеме «запрос — ответ»; сообщения состоят из стартовой строки, заголовков и тела, метод называет действие, код состояния — результат, а ответ с кодом ошибки остаётся полноценным ответом.",[15,538,539],{},"Загрузка страницы — не один запрос, а последовательность: документ, затем ресурсы, на которые он ссылается, позже данные, запрошенные скриптом. Браузер разбирает документ в дерево, применяет стили, отрисовывает результат и выполняет скрипты в изолированном процессе; инструменты разработчика показывают каждую из этих подсистем.",[15,541,542],{},"Веб-приложение разделено на клиент в браузере и сервер, связанные только HTTP. Клиент отображает и принимает ввод, сервер хранит данные и проверяет всё, что важно. В курсе мы строим клиентскую часть: от документа на HTML до приложения, обменивающегося данными с готовым сервером.",[19,544,546],{"id":545},"литература","Литература",[548,549,552,557,561,565,569,573],"ol",{"className":550},[551],"references",[553,554,556],"li",{"id":555},"ref-1","Nelson T. H. Complex Information Processing: A File Structure for the Complex, the Changing and the Indeterminate. — Proceedings of the 1965 20th National Conference, 1965, С. 84–100, DOI: 10.1145\u002F800197.806036.",[553,558,560],{"id":559},"ref-2","Berners-Lee T. Information Management: A Proposal. — 1989, https:\u002F\u002Fwww.w3.org\u002FHistory\u002F1989\u002Fproposal.html.",[553,562,564],{"id":563},"ref-3","Berners-Lee T., Fielding R. T., Masinter L. Uniform Resource Identifier (URI): Generic Syntax. — 2005, DOI: 10.17487\u002FRFC3986.",[553,566,568],{"id":567},"ref-4","Fielding R. T., Nottingham M., Reschke J. HTTP Semantics. — 2022, DOI: 10.17487\u002FRFC9110.",[553,570,572],{"id":571},"ref-5","Kosaka M. Inside look at modern web browser. — 2018, https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Finside-browser-part1.",[553,574,576],{"id":575},"ref-6","{WHATWG}. HTML Living Standard. — 2026, https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002F.",{"title":102,"searchDepth":578,"depth":578,"links":579},2,[580,585,590,594,595,599,600],{"id":21,"depth":578,"text":22,"children":581},[582,584],{"id":26,"depth":583,"text":27},3,{"id":50,"depth":583,"text":51},{"id":73,"depth":578,"text":74,"children":586},[587,588,589],{"id":77,"depth":583,"text":78},{"id":197,"depth":583,"text":198},{"id":395,"depth":583,"text":396},{"id":423,"depth":578,"text":424,"children":591},[592,593],{"id":427,"depth":583,"text":428},{"id":462,"depth":583,"text":463},{"id":476,"depth":578,"text":477},{"id":496,"depth":578,"text":497,"children":596},[597,598],{"id":500,"depth":583,"text":501},{"id":522,"depth":583,"text":523},{"id":532,"depth":578,"text":533},{"id":545,"depth":578,"text":546},"aidt-bac-webdev",null,"md",false,{},true,"\u002Fcourses\u002Faidt-bac-webdev\u002Ftopic-01-content","content",{"title":6,"description":17},"courses\u002Faidt-bac-webdev\u002Ftopic-01-content",1,"topic-01","yWl-0wSEirT8jkh5zz6jFj8EerRu6NSrdN4uV5AM1ds",{"id":615,"title":616,"body":617,"course_slug":601,"description":102,"env_label":602,"env_url":602,"extension":603,"group":602,"is_course_project":604,"is_index":604,"level":602,"meta":1657,"navigation":606,"path":1658,"section":1659,"seo":1660,"stem":1661,"topic_number":611,"topic_slug":612,"__hash__":1662},"courses\u002Fcourses\u002Faidt-bac-webdev\u002Ftopic-01-lr.md","Лабораторная работа 1. HTTP-обмен глазами браузера",{"type":8,"value":618,"toc":1642},[619,622,644,648,651,654,658,661,664,708,712,715,740,763,783,824,830,1007,1010,1016,1020,1047,1051,1054,1058,1064,1092,1098,1107,1113,1117,1141,1157,1166,1175,1195,1203,1207,1219,1227,1233,1286,1305,1317,1321,1327,1356,1361,1365,1376,1407,1413,1417,1420,1582,1585,1589,1638],[11,620,616],{"id":621},"лабораторная-работа-1-http-обмен-глазами-браузера",[623,624,625,632,638],"ul",{},[553,626,627,631],{},[628,629,630],"strong",{},"Объём:"," 6 академических часов",[553,633,634,637],{},[628,635,636],{},"Раздел курса:"," тема 1 «Веб, HTTP и устройство веб-приложения»",[553,639,640,643],{},[628,641,642],{},"Формируемые компетенции:"," ПК-2, ПК-6",[19,645,647],{"id":646},"введение","Введение",[15,649,650],{},"Лекция по теме 1 описала веб-приложение как обмен запросами и ответами между браузером и сервером. Пока это описание остаётся словесным, оно легко принимается на веру и так же легко забывается. В настоящей работе обмен предстоит увидеть: каждая загрузка страницы раскладывается на десятки запросов, у каждого есть метод, адрес, код ответа и заголовки, и всё это браузер показывает в инструментах разработчика.",[15,652,653],{},"Вторая половина работы переносит наблюдение на собственную страницу. Мы развернём локальный сервер, получим от него документ по HTTP и убедимся, что механика та же, что у крупного сайта. Каталог, созданный в этой работе, станет приложением «Список задач», которое будет расти до конца практикума.",[19,655,657],{"id":656},"цель-работы","Цель работы",[15,659,660],{},"Освоить чтение HTTP-обмена в инструментах разработчика браузера на материале реального сайта и собственной страницы, обслуживаемой локальным сервером.",[15,662,663],{},"После выполнения работы студент сможет:",[623,665,666,672,675,689,692,698],{},[553,667,668,669,671],{},"разобрать URL на составляющие и указать, какая из них попадает в стартовую строку HTTP-запроса, а какая — в заголовок ",[100,670,241],{},";",[553,673,674],{},"по панели Network определить для любого запроса метод, код ответа, тип и размер содержимого и отличить запрос документа от запросов ресурсов;",[553,676,677,678,125,680,682,683,125,685,250,687,671],{},"объяснить на примерах из собственного отчёта коды ",[100,679,281],{},[100,681,297],{},"\u002F",[100,684,300],{},[100,686,308],{},[100,688,327],{},[553,690,691],{},"показать, как символы кириллицы кодируются в адресе, и раскодировать фрагмент вручную;",[553,693,694,695,671],{},"развернуть локальный статический сервер и получить свою страницу по адресу ",[100,696,697],{},"http:\u002F\u002F127.0.0.1:\u003Cпорт>\u002F",[553,699,700,701,704,705,441],{},"показать на уровне запросов разницу между открытием файла по ",[100,702,703],{},"file:\u002F\u002F"," и по ",[100,706,707],{},"http:\u002F\u002F",[19,709,711],{"id":710},"теоретический-минимум","Теоретический минимум",[15,713,714],{},"Устройство URL, методы и коды состояния HTTP, цикл загрузки страницы и архитектура браузера изложены в учебном пособии, тема 1. Ниже — только то, что потребуется руками.",[15,716,717,720,721,723,724,727,728,731,732,735,736,739],{},[628,718,719],{},"Инструменты разработчика."," Открываются клавишей ",[100,722,469],{}," или сочетанием ",[100,725,726],{},"Ctrl+Shift+I"," (",[100,729,730],{},"Cmd+Option+I"," на macOS). Панель Network показывает запросы, сделанные страницей, начиная с момента открытия панели: если страница уже загружена, её нужно перезагрузить при открытой панели. Флажок ",[628,733,734],{},"Disable cache"," заставляет браузер запрашивать все ресурсы заново, флажок ",[628,737,738],{},"Preserve log"," сохраняет список при переходах между страницами. Кнопки фильтра по типу — Doc, CSS, JS, Img, Font, Fetch\u002FXHR, Other — оставляют в списке запросы одного вида. Строка состояния внизу панели показывает число запросов, переданный объём и время завершения загрузки. Щелчок по запросу открывает его карточку: раздел Headers содержит общие сведения (адрес, метод, код ответа, адрес сервера), заголовки ответа и заголовки запроса; раздел Response — тело ответа как текст, Preview — тело в разобранном виде. В Firefox панель называется так же и устроена аналогично.",[15,741,742,745,746,748,749,250,751,753,754,756,757,759,760,762],{},[628,743,744],{},"Коды состояния, которые встретятся в работе."," ",[100,747,281],{}," — запрос выполнен, тело содержит запрошенное. ",[100,750,297],{},[100,752,300],{}," — ресурс находится по другому адресу, который указан в заголовке ",[100,755,304],{},"; браузер переходит по нему сам. ",[100,758,308],{}," — ресурс не изменился с прошлого раза, тело не передаётся, браузер берёт копию из своего кеша. ",[100,761,327],{}," — по такому адресу на сервере ничего нет. Полная классификация — в пособии.",[15,764,765,768,769,771,772,250,775,778,779,782],{},[628,766,767],{},"Кодирование адреса."," В URL допустимы только символы латинского алфавита, цифры и небольшой набор знаков. Всё остальное, включая кириллицу и пробел, передаётся в виде байтов UTF-8, каждый байт записывается как ",[100,770,166],{}," и два шестнадцатеричных знака. Буква «г» занимает в UTF-8 два байта, ",[100,773,774],{},"D0",[100,776,777],{},"B3",", и в адресе выглядит как ",[100,780,781],{},"%D0%B3",". Адресная строка браузера показывает адрес в раскодированном виде для удобства чтения; в панели Network виден адрес, который ушёл на сервер.",[15,784,785,788,789,792,793,796,797,800,801,804,805,808,809,812,813,816,817,820,821,441],{},[628,786,787],{},"Локальный сервер, localhost и порт."," Адрес ",[100,790,791],{},"127.0.0.1"," и имя ",[100,794,795],{},"localhost"," обозначают саму машину, на которой запущен браузер. Порт — число, по которому операционная система различает программы, принимающие соединения; два сервера не могут одновременно слушать один порт. Локальный статический сервер отдаёт файлы из выбранного каталога по HTTP, ничего в них не меняя. В работе используется расширение ",[628,798,799],{},"Live Server"," для VS Code: после установки в строке состояния редактора появляется кнопка ",[628,802,803],{},"Go Live",", которая запускает сервер на порту 5500 и открывает в браузере адрес ",[100,806,807],{},"http:\u002F\u002F127.0.0.1:5500\u002F"," (в некоторых сборках отображается как ",[100,810,811],{},"http:\u002F\u002Flocalhost:5500\u002F","). Сервер отдаёт файл ",[100,814,815],{},"index.html"," из открытой в редакторе папки и перезагружает страницу при каждом сохранении файла. Если VS Code недоступен, подойдёт любой статический сервер, например ",[100,818,819],{},"python -m http.server 8000",", выполненный в каталоге проекта; тогда адрес будет ",[100,822,823],{},"http:\u002F\u002F127.0.0.1:8000\u002F",[15,825,826,829],{},[628,827,828],{},"Минимальный документ."," Устройство HTML-документа подробно разбирается в теме 2. В этой работе документ используется как готовая заготовка:",[93,831,835],{"className":832,"code":833,"language":834,"meta":102,"style":102},"language-html shiki shiki-themes github-light github-dark","\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n\u003Chead>\n  \u003Cmeta charset=\"utf-8\">\n  \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n  \u003Ctitle>Список задач\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n  \u003Ch1>Список задач\u003C\u002Fh1>\n  \u003Cp>Приложение курса «Разработка Web-приложений».\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html",[100,836,837,855,874,883,902,927,942,952,962,975,989,998],{"__ignoreMap":102},[41,838,840,844,848,852],{"class":839,"line":611},"line",[41,841,843],{"class":842},"sVt8B","\u003C!",[41,845,847],{"class":846},"s9eBZ","DOCTYPE",[41,849,851],{"class":850},"sScJk"," html",[41,853,854],{"class":842},">\n",[41,856,857,860,862,865,868,872],{"class":839,"line":578},[41,858,859],{"class":842},"\u003C",[41,861,834],{"class":846},[41,863,864],{"class":850}," lang",[41,866,867],{"class":842},"=",[41,869,871],{"class":870},"sZZnC","\"ru\"",[41,873,854],{"class":842},[41,875,876,878,881],{"class":839,"line":583},[41,877,859],{"class":842},[41,879,880],{"class":846},"head",[41,882,854],{"class":842},[41,884,886,889,892,895,897,900],{"class":839,"line":885},4,[41,887,888],{"class":842},"  \u003C",[41,890,891],{"class":846},"meta",[41,893,894],{"class":850}," charset",[41,896,867],{"class":842},[41,898,899],{"class":870},"\"utf-8\"",[41,901,854],{"class":842},[41,903,905,907,909,912,914,917,920,922,925],{"class":839,"line":904},5,[41,906,888],{"class":842},[41,908,891],{"class":846},[41,910,911],{"class":850}," name",[41,913,867],{"class":842},[41,915,916],{"class":870},"\"viewport\"",[41,918,919],{"class":850}," content",[41,921,867],{"class":842},[41,923,924],{"class":870},"\"width=device-width, initial-scale=1\"",[41,926,854],{"class":842},[41,928,930,932,935,938,940],{"class":839,"line":929},6,[41,931,888],{"class":842},[41,933,934],{"class":846},"title",[41,936,937],{"class":842},">Список задач\u003C\u002F",[41,939,934],{"class":846},[41,941,854],{"class":842},[41,943,945,948,950],{"class":839,"line":944},7,[41,946,947],{"class":842},"\u003C\u002F",[41,949,880],{"class":846},[41,951,854],{"class":842},[41,953,955,957,960],{"class":839,"line":954},8,[41,956,859],{"class":842},[41,958,959],{"class":846},"body",[41,961,854],{"class":842},[41,963,965,967,969,971,973],{"class":839,"line":964},9,[41,966,888],{"class":842},[41,968,11],{"class":846},[41,970,937],{"class":842},[41,972,11],{"class":846},[41,974,854],{"class":842},[41,976,978,980,982,985,987],{"class":839,"line":977},10,[41,979,888],{"class":842},[41,981,15],{"class":846},[41,983,984],{"class":842},">Приложение курса «Разработка Web-приложений».\u003C\u002F",[41,986,15],{"class":846},[41,988,854],{"class":842},[41,990,992,994,996],{"class":839,"line":991},11,[41,993,947],{"class":842},[41,995,959],{"class":846},[41,997,854],{"class":842},[41,999,1001,1003,1005],{"class":839,"line":1000},12,[41,1002,947],{"class":842},[41,1004,834],{"class":846},[41,1006,854],{"class":842},[15,1008,1009],{},"Файл сохраняется в кодировке UTF-8 — иначе кириллица отобразится знаками вопроса. VS Code по умолчанию сохраняет в UTF-8; текущая кодировка видна в правой части строки состояния.",[15,1011,1012,1015],{},[628,1013,1014],{},"Консоль."," Панель Console выполняет команды JavaScript в контексте открытой страницы. Язык разбирается начиная с темы 5; здесь достаточно ввести три готовые команды и записать, что они вернули.",[19,1017,1019],{"id":1018},"перечень-оснащения","Перечень оснащения",[623,1021,1022,1025,1031,1037,1044],{},[553,1023,1024],{},"Браузер Chrome, Chromium-совместимый или Firefox актуальной версии.",[553,1026,1027,1028,441],{},"Доступ в интернет к сайту из перечня вариантов и к ",[100,1029,1030],{},"ru.wikipedia.org",[553,1032,1033,1034,441],{},"Для части 3: VS Code (обычная установка либо portable-сборка, не требующая прав администратора) с расширением Live Server; при отсутствии — Python 3 с модулем ",[100,1035,1036],{},"http.server",[553,1038,1039,1040,1043],{},"Каталог проекта ",[100,1041,1042],{},"tasks-app\u002F",", создаваемый в части 3.",[553,1045,1046],{},"Части 1 и 2 выполняются в браузере и не требуют установки чего-либо.",[19,1048,1050],{"id":1049},"порядок-выполнения-работы","Порядок выполнения работы",[15,1052,1053],{},"Сайт для частей 1 и 2 назначается по номеру варианта (см. «Варианты заданий»). Все скриншоты делаются с собственного экрана: в отчёте должны быть видны адрес сайта варианта и панель Network целиком.",[24,1055,1057],{"id":1056},"часть-1-загрузка-страницы-как-последовательность-запросов","Часть 1. Загрузка страницы как последовательность запросов",[15,1059,1060,1063],{},[628,1061,1062],{},"Задание 1.1."," Откройте инструменты разработчика, перейдите на панель Network, включите Disable cache. Загрузите главную страницу сайта варианта. По строке состояния панели запишите число запросов, переданный объём и время завершения загрузки. Сделайте скриншот панели.",[15,1065,1066,1069,1070,125,1072,346,1074,125,1077,1080,1081,1083,1084,125,1086,125,1088,125,1090,441],{},[628,1067,1068],{},"Задание 1.2."," Найдите в списке запрос самого документа — как правило, он первый и имеет тип document. Откройте его карточку и заполните таблицу 1: полный адрес запроса, метод, код ответа, адрес сервера с портом, значения заголовков ответа ",[100,1071,352],{},[100,1073,369],{},[100,1075,1076],{},"Content-Encoding",[100,1078,1079],{},"Server"," (если есть), ",[100,1082,373],{}," (если есть) и заголовков запроса ",[100,1085,241],{},[100,1087,245],{},[100,1089,249],{},[100,1091,253],{},[15,1093,1094,1097],{},[628,1095,1096],{},"Задание 1.3."," Пользуясь фильтрами по типу, посчитайте число запросов и суммарный объём для каждого вида: документ, стили, скрипты, изображения, шрифты, Fetch\u002FXHR, прочее. Результат оформите таблицей 2. Отдельно укажите самый большой по объёму и самый долгий по времени ресурс. Выпишите все хосты, с которых загружались ресурсы, помимо основного: для каждого предположите, что он обслуживает (сеть доставки содержимого, счётчик посещений, шрифты, реклама).",[15,1099,1100,1103,1104,1106],{},[628,1101,1102],{},"Задание 1.4."," Выберите три адреса из списка запросов: адрес документа, адрес ресурса с параметрами запроса после ",[100,1105,138],{}," и адрес ресурса с другого хоста. Разберите каждый на составляющие: схема, хост, порт (явный или подразумеваемый схемой), путь, параметры запроса, фрагмент.",[15,1108,1109,1112],{},[628,1110,1111],{},"Результат."," Скриншот панели, таблицы 1 и 2, перечень хостов с предположениями, разбор трёх адресов.",[24,1114,1116],{"id":1115},"часть-2-коды-состояния-перенаправления-и-кодирование-адреса","Часть 2. Коды состояния, перенаправления и кодирование адреса",[15,1118,1119,1122,1123,1125,1126,1129,1130,346,1132,1134,1135,1137,1138,441],{},[628,1120,1121],{},"Задание 2.1."," Введите адрес сайта варианта со схемой ",[100,1124,707],{}," вместо ",[100,1127,1128],{},"https:\u002F\u002F",". Найдите в панели запрос с кодом ",[100,1131,297],{},[100,1133,300],{},", запишите его заголовок ",[100,1136,304],{}," и адрес, на котором браузер в итоге оказался. Если сайт варианта не перенаправляет, повторите опыт с ",[100,1139,1140],{},"http:\u002F\u002Fcchgeu.ru\u002F",[15,1142,1143,1146,1147,1150,1151,1153,1154,1156],{},[628,1144,1145],{},"Задание 2.2."," Запросите заведомо несуществующий путь на сайте варианта, например ",[100,1148,1149],{},"\u002Fno-such-page-lr01\u002F",". Запишите код ответа и заголовок ",[100,1152,352],{},". Откройте раздел Response и убедитесь, что вместе с кодом ",[100,1155,327],{}," сервер прислал тело — как правило, страницу с сообщением. Сохраните первые строки тела в отчёт.",[15,1158,1159,1162,1163,1165],{},[628,1160,1161],{},"Задание 2.3."," Снимите флажок Disable cache и перезагрузите главную страницу дважды. Найдите ресурсы, для которых во второй раз в колонке Size стоит «(memory cache)», «(disk cache)» или код ответа ",[100,1164,308],{},". Запишите три примера с адресами и объясните, чем повторная загрузка отличалась от первой.",[15,1167,1168,1171,1172,1174],{},[628,1169,1170],{},"Задание 2.4."," Выполните на сайте варианта поиск по слову «гипертекст»; если поиска на сайте нет, используйте ",[100,1173,1030],{},". Сравните адрес в адресной строке с адресом запроса в панели Network. Выпишите закодированный фрагмент и раскодируйте вручную первые две буквы, показав соответствие байтов и символов.",[15,1176,1177,1180,1181,1183,1184,1187,1188,1191,1192,1194],{},[628,1178,1179],{},"Задание 2.5."," Откройте ",[100,1182,1030],{},", включите фильтр Fetch\u002FXHR и начните набирать слово в поле поиска. Найдите запросы к ",[100,1185,1186],{},"api.php"," с параметром ",[100,1189,1190],{},"action=opensearch",". Для одного из них запишите метод, параметры адреса, код ответа, ",[100,1193,352],{}," и содержимое раздела Preview. Страница при этом не перезагружалась — зафиксируйте это наблюдение: именно так приложение тем 8–9 будет получать данные.",[15,1196,1197,1199,1200,1202],{},[628,1198,1111],{}," Таблица наблюдавшихся кодов с адресами и пояснениями, первые строки тела ответа ",[100,1201,327],{},", раскодированный фрагмент, скриншот раздела Preview с JSON.",[24,1204,1206],{"id":1205},"часть-3-рабочее-место-и-первая-страница-по-http","Часть 3. Рабочее место и первая страница по HTTP",[15,1208,1209,1212,1213,1215,1216,1218],{},[628,1210,1211],{},"Задание 3.1."," Установите или распакуйте VS Code, установите расширение Live Server. Создайте каталог ",[100,1214,1042],{},", откройте его в редакторе как папку, создайте файл ",[100,1217,815],{}," с содержимым из теоретического минимума. Убедитесь, что файл сохранён в UTF-8.",[15,1220,1221,1180,1224,1226],{},[628,1222,1223],{},"Задание 3.2.",[100,1225,815],{}," двойным щелчком из проводника. Запишите адрес из адресной строки и содержимое панели Network после перезагрузки: какие запросы видны, есть ли у них код ответа и заголовки. Сделайте скриншот.",[15,1228,1229,1232],{},[628,1230,1231],{},"Задание 3.3."," Нажмите Go Live. Запишите адрес, который открылся, и заполните для запроса документа ту же таблицу, что в задании 1.2. Сравните карточку запроса с результатом задания 3.2 и с карточкой документа сайта варианта.",[15,1234,1235,1238,1239,1241,1242,1245,1246,1248,1249,1252,1253,1255,1256,1259,1260,1263,1264,1267,1268,1271,1272,346,1275,1278,1279,1282,1283,1285],{},[628,1236,1237],{},"Задание 3.4."," Добавьте в ",[100,1240,880],{}," строку ",[100,1243,1244],{},"\u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\">",", а в ",[100,1247,959],{}," — строку ",[100,1250,1251],{},"\u003Cimg src=\"\u002Fimg\u002Faidt-bac-webdev\u002Ftopic-01\u002Flogo.svg\" alt=\"Логотип\">",", не создавая самих файлов. Сохраните документ и зафиксируйте в панели Network два запроса с кодом ",[100,1254,327],{},". Затем создайте каталог ",[100,1257,1258],{},"css\u002F"," с файлом ",[100,1261,1262],{},"style.css",", содержащим одно правило ",[100,1265,1266],{},"h1 { color: #6940ee; }",", и каталог ",[100,1269,1270],{},"img\u002F"," с любым небольшим изображением ",[100,1273,1274],{},"logo.svg",[100,1276,1277],{},"logo.png"," (поправьте ",[100,1280,1281],{},"src"," под фактическое имя). Убедитесь, что коды сменились на ",[100,1284,281],{},", и запишите порядок, в котором браузер сделал три запроса.",[15,1287,1288,1291,1292,1294,1295,125,1298,250,1301,1304],{},[628,1289,1290],{},"Задание 3.5."," Измените текст заголовка ",[100,1293,11],{}," в редакторе и сохраните файл — страница перезагрузится сама. Затем в панели Console выполните по очереди ",[100,1296,1297],{},"document.title",[100,1299,1300],{},"location.href",[100,1302,1303],{},"document.querySelector('h1').textContent",", записав результат каждой команды. В панели Elements измените текст заголовка прямо в дереве, убедитесь, что страница отобразила изменение, перезагрузите её и зафиксируйте, что изменение исчезло.",[15,1306,1307,1309,1310,250,1312,1314,1315,441],{},[628,1308,1111],{}," Скриншоты панели Network для ",[100,1311,703],{},[100,1313,707],{},", таблица для запроса документа с локального сервера, список трёх запросов с кодами до и после создания файлов, результаты трёх команд консоли, каталог ",[100,1316,1042],{},[24,1318,1320],{"id":1319},"часть-4-выводы","Часть 4. Выводы",[15,1322,1323,1326],{},[628,1324,1325],{},"Задание."," Ответьте письменно на четыре вопроса, опираясь на собственные наблюдения и цифры из частей 1–3.",[548,1328,1329,1332,1341,1344],{},[553,1330,1331],{},"Из скольких запросов и к скольким хостам состояла загрузка одной страницы сайта варианта? Кто решает, какие запросы будут сделаны после запроса документа?",[553,1333,1334,1335,1337,1338,1340],{},"Чем ответ ",[100,1336,327],{}," отличается от ситуации «сервер недоступен»? Что именно прислал сервер в теле ответа ",[100,1339,327],{}," и зачем?",[553,1342,1343],{},"Почему при повторной загрузке часть ресурсов не запрашивалась с сервера? В чём выгода для пользователя и в чём — для сервера?",[553,1345,1346,1347,1349,1350,1352,1353,1355],{},"Чем открытие ",[100,1348,815],{}," по ",[100,1351,703],{}," отличается от открытия по ",[100,1354,807],{}," с точки зрения панели Network? Почему для следующих работ понадобится именно сервер?",[15,1357,1358,1360],{},[628,1359,1111],{}," Письменные ответы на четыре вопроса.",[19,1362,1364],{"id":1363},"форма-отчёта","Форма отчёта",[15,1366,1367,1368,1371,1372,1375],{},"Отчёт — один файл в формате Markdown ",[100,1369,1370],{},"lr01_\u003Cфамилия>.md"," и каталог ",[100,1373,1374],{},"lr01_\u003Cфамилия>_img\u002F"," со скриншотами, на которые файл ссылается. В отчёте должны присутствовать:",[623,1377,1378,1381,1384,1390,1401,1404],{},[553,1379,1380],{},"номер варианта и адрес сайта;",[553,1382,1383],{},"таблицы 1 и 2 части 1, перечень хостов, разбор трёх адресов;",[553,1385,1386,1387,1389],{},"таблица кодов состояния части 2 с адресами, первые строки тела ответа ",[100,1388,327],{},", раскодированный фрагмент адреса;",[553,1391,1392,1393,1395,1396,1398,1399,671],{},"скриншоты: панель Network при загрузке сайта варианта, ответ ",[100,1394,327],{},", Preview с JSON, панель Network для ",[100,1397,703],{}," и для ",[100,1400,707],{},[553,1402,1403],{},"таблица запроса документа с локального сервера, результаты команд консоли;",[553,1405,1406],{},"ответы на четыре вопроса части 4.",[15,1408,1409,1410,1412],{},"Вместе с отчётом сдаётся каталог ",[100,1411,1042],{}," — в следующей работе он продолжается. Способ передачи файлов преподавателю объявляется на занятии.",[19,1414,1416],{"id":1415},"варианты-заданий","Варианты заданий",[15,1418,1419],{},"Номер варианта — порядковый номер студента в журнале группы; при числе студентов больше шестнадцати нумерация идёт по кругу.",[1421,1422,1423,1441],"table",{},[1424,1425,1426],"thead",{},[1427,1428,1429,1434,1437,1439],"tr",{},[1430,1431,1433],"th",{"align":1432},"right","Вариант",[1430,1435,1436],{},"Сайт",[1430,1438,1433],{"align":1432},[1430,1440,1436],{},[1442,1443,1444,1462,1478,1495,1512,1529,1546,1564],"tbody",{},[1427,1445,1446,1449,1454,1457],{},[1447,1448,43],"td",{"align":1432},[1447,1450,1451],{},[100,1452,1453],{},"cchgeu.ru",[1447,1455,1456],{"align":1432},"9",[1447,1458,1459],{},[100,1460,1461],{},"lenta.ru",[1427,1463,1464,1466,1470,1473],{},[1447,1465,63],{"align":1432},[1447,1467,1468],{},[100,1469,1030],{},[1447,1471,1472],{"align":1432},"10",[1447,1474,1475],{},[100,1476,1477],{},"python.org",[1427,1479,1480,1482,1487,1490],{},[1447,1481,90],{"align":1432},[1447,1483,1484],{},[100,1485,1486],{},"habr.com",[1447,1488,1489],{"align":1432},"11",[1447,1491,1492],{},[100,1493,1494],{},"github.com",[1427,1496,1497,1499,1504,1507],{},[1447,1498,210],{"align":1432},[1447,1500,1501],{},[100,1502,1503],{},"developer.mozilla.org",[1447,1505,1506],{"align":1432},"12",[1447,1508,1509],{},[100,1510,1511],{},"w3.org",[1427,1513,1514,1516,1521,1524],{},[1447,1515,440],{"align":1432},[1447,1517,1518],{},[100,1519,1520],{},"gosuslugi.ru",[1447,1522,1523],{"align":1432},"13",[1447,1525,1526],{},[100,1527,1528],{},"hh.ru",[1427,1530,1531,1533,1538,1541],{},[1447,1532,489],{"align":1432},[1447,1534,1535],{},[100,1536,1537],{},"rzd.ru",[1447,1539,1540],{"align":1432},"14",[1447,1542,1543],{},[100,1544,1545],{},"mos.ru",[1427,1547,1548,1551,1556,1559],{},[1447,1549,1550],{"align":1432},"7",[1447,1552,1553],{},[100,1554,1555],{},"ozon.ru",[1447,1557,1558],{"align":1432},"15",[1447,1560,1561],{},[100,1562,1563],{},"nodejs.org",[1427,1565,1566,1569,1574,1577],{},[1447,1567,1568],{"align":1432},"8",[1447,1570,1571],{},[100,1572,1573],{},"kinopoisk.ru",[1447,1575,1576],{"align":1432},"16",[1447,1578,1579],{},[100,1580,1581],{},"ietf.org",[15,1583,1584],{},"Если сайт варианта недоступен из аудитории, студент сообщает об этом преподавателю и получает сайт из свободного варианта.",[19,1586,1588],{"id":1587},"контрольные-вопросы","Контрольные вопросы",[548,1590,1591,1599,1602,1611,1617,1623,1629,1635],{},[553,1592,1593,1594,1596,1597,138],{},"Какие части URL попадают в стартовую строку HTTP-запроса, какая — в заголовок ",[100,1595,241],{},", и что происходит с фрагментом после ",[100,1598,146],{},[553,1600,1601],{},"Почему браузер делает десятки запросов ради одной страницы и откуда он узнаёт, какие именно?",[553,1603,1604,1605,1607,1608,1610],{},"Чем ",[100,1606,297],{}," отличается от ",[100,1609,300],{}," с точки зрения браузера и его кеша?",[553,1612,1613,1614,1616],{},"Сервер ответил кодом ",[100,1615,327],{}," и прислал страницу с текстом. Считать ли запрос выполненным? Что увидит программа, а что — человек?",[553,1618,1619,1620,1622],{},"Что означает код ",[100,1621,308],{}," и кому он выгоден?",[553,1624,1625,1626,1628],{},"Почему кириллица в адресе превращается в последовательности вида ",[100,1627,781],{}," и сколько байтов занимает одна русская буква?",[553,1630,1631,1632,1634],{},"Что обозначают ",[100,1633,795],{}," и порт, и почему два сервера не могут слушать один порт?",[553,1636,1637],{},"Что показывает панель Elements — файл на диске или что-то другое? Как это было проверено в работе?",[1639,1640,1641],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":102,"searchDepth":578,"depth":578,"links":1643},[1644,1645,1646,1647,1648,1654,1655,1656],{"id":646,"depth":578,"text":647},{"id":656,"depth":578,"text":657},{"id":710,"depth":578,"text":711},{"id":1018,"depth":578,"text":1019},{"id":1049,"depth":578,"text":1050,"children":1649},[1650,1651,1652,1653],{"id":1056,"depth":583,"text":1057},{"id":1115,"depth":583,"text":1116},{"id":1205,"depth":583,"text":1206},{"id":1319,"depth":583,"text":1320},{"id":1363,"depth":578,"text":1364},{"id":1415,"depth":578,"text":1416},{"id":1587,"depth":578,"text":1588},{},"\u002Fcourses\u002Faidt-bac-webdev\u002Ftopic-01-lr","lr",{"title":616,"description":102},"courses\u002Faidt-bac-webdev\u002Ftopic-01-lr","TQ8EVWtY3I3WE44PpxVnkzvCZsSnoORPJBaa8OaSsZk",{"id":1664,"title":1665,"body":1666,"course_slug":601,"description":102,"env_label":602,"env_url":602,"extension":603,"group":1701,"is_course_project":604,"is_index":606,"level":1702,"meta":1703,"navigation":606,"path":1706,"section":602,"seo":1707,"stem":1708,"topic_number":602,"topic_slug":602,"__hash__":1709},"courses\u002Fcourses\u002Faidt-bac-webdev\u002Findex.md","Разработка Web-приложений",{"type":8,"value":1667,"toc":1698},[1668,1671,1675],[11,1669,1665],{"id":1670},"разработка-web-приложений",[19,1672,1674],{"id":1673},"документы","Документы",[623,1676,1677,1684,1691],{},[553,1678,1679,1680,441],{},"Требования к содержанию и оформлению — ",[37,1681,1683],{"href":1682},".\u002Fshared\u002FSTYLEGUIDE","shared\u002FSTYLEGUIDE.md",[553,1685,1686,1687,441],{},"Содержание курса — ",[37,1688,1690],{"href":1689},".\u002Ftopics","topics.md",[553,1692,1693,1694,441],{},"Отклонения от общих правил и рамки курса — ",[37,1695,1697],{"href":1696},".\u002F.claude\u002FCLAUDE",".claude\u002FCLAUDE.md",{"title":102,"searchDepth":578,"depth":578,"links":1699},[1700],{"id":1673,"depth":578,"text":1674},"bachelor","бакалавриат",{"topics_count":964,"has_lr":606,"has_pz":604,"has_course_project":606,"final_assessment":1704,"tech_focus":1705},"экзамен","HTML, CSS, JavaScript, Fetch, REST API (json-server)","\u002Fcourses\u002Faidt-bac-webdev",{"title":1665,"description":102},"courses\u002Faidt-bac-webdev\u002Findex","Eg-Fy-Q5txiKorp__R7r9qvHTH9-4sLZty-4p0NRxVM",1789142470233]