Пример html-документа

2c:null 2d:["$","title",null,{"children":"Введение в веб-разработку | Egor Ka | Observable"}] 32:Tda7,md`## Веб-браузер и протокол HTTP Веб-браузер - клиентское приложение, целью которого является общение с различными сетевыми ресурсами при помощи запросов, сформированных по сетевым протоколам, обработка и графическое представление результатов запросов. Сетевые ресурсы в свою очередь - серверные приложения, целью которых является обработка поступающих запросов и ответ пользователю в соответствии с нужным протоколом. Сетевые протоколы задают единообразный способ передачи сообщений между сетевыми устройствами. Протокол HTTP изначально предназначался для передачи гипертекста (текстовых страниц, имеющих перекрестные ссылки), но в настоящее время он активно используется для передачи текстовых документов различных форматов. Основной особенностью протокола HTTP является возможность указания MIME-типа передаваемых данных с указанием кодировки. Предаваемый по протоколу HTTP контент может, например содержать файлы изображений, документов или программный код. Помимо HTTP существует большое количество других сетевых протоколов, предназначенных для различных типов двусторонней передачи данных, таких как аудио и видео сессии. По протокол HTTP также может осуществляться двусторонняя передача данных, но чаще всего объем передаваемых сервером данных значительно превышает объем данных, предаваемый клиентом. Протокол HTTPS семантически не отличается от HTTP, разница между ними заключается в том, что передача данных по протоколу HTTPS осуществляется поверх криптографического протокола TLS. На стороне клиента всю работу с шифрованием берет на себя браузер поэтому в ходе разработки пользовательской части приложения с использованием HTTPS о его специфики задумываться не приходится. В ходе данного курса для передачи данных будет использоваться протокол HTTP. В качестве серверного приложения будет использоваться сервер, реализующих раздачу статического контента (передачу данных из файловой системы). `33:Tde1,md`## HTML HTML – официальный язык разметки документов в Интернете. Данный язык интерпретируется браузером и преобразуется в объектную модель, на основании которой происходит отрисовка и взаимодействие с пользователем в окне браузера. Язык HTML состоит из тегов и специальных символов. Теги выделяют элементы документа, могут содержать в себе текст, специальные символы и другие теги. Специальные символы экранируются амперсандом с левой стороны и содержат имя или код того или иного специального символа. HTML документ должен начинаться со строки объявления версии. Для документов последний версии HTML 5 строка выглядит следующим образом: . Данная строка в отличии от тегов чувствительна к регистру. Содержимое тега head не отображается на странице, он может включать заголовок и ссылку на иконку, размещаемые во вкладке, ссылки на другие ресурсы, например скрипты и таблицы стилей. Все эти ресурсы будут подгружены вместе с данным документом, и метаинформацию, такую как кодировка и информацию для поисковиков. Тег body содержит непосредственно тело документа. Внутри него могут также содержаться ссылки на скрипты и таблицы стилей, содержимое этих тегов не будет отображено на странице. Ввиду того, что многие из тегов содержат предопределенное стилистическое оформление, зависящее от используемого браузера, в данный момент в большая часть тела документа формируется при помощи тега div. Исключения составляют элементы, при взаимодействии с которыми на стороне браузера реализуется определенная логика. Среди таких элементов можно выделить: - iframe – контейнер, содержащий независимый HTML документ; - img – содержит растровое изображение; - canvas – полотно для отрисовки растрового изображения; - svg – контейнер для элементов векторной графики (может содержать внутри себя ряд других тегов из подмножества SVG); - select и option – формирующие выпадающий список; - a – ссылка на другой документ; - input – элемент пользовательского взаимодействия; `34:Tbb0,md`## SVG SVG(Scalable Vector Graphics) – язык описания векторной графики, который является подмножеством HTML и все его элементы также входят в DOM. В перечень SVG элементов входят как некоторые теги из HTML, так и ряд тегов, представленных только в данном подмножестве. Из основных тегов можно выделить: - path – базовый элемент, позволяющий при помощи специальной директивы задавать различные формы объекта; - circle – создает окружность на основе координат центра и радиуса; - ellipse – создает эллипс на основе координат центра и двух радиусов; - rect – создает прямоугольник; - text – содержит текст; - g – группирует объекты. Графические элементы SVG первично отображаются внутри контейнера в том порядке, в котором они были внесены в контейнер. Ко всем элементам SVG могут быть привязаны базовые атрибуты HTML-элементов, такие как class, id и style, а также для них могут быть прописаны стили. Также подмножество SVG включает ряд атрибутов, поддерживаемых определенными SVG элементами. Наиболее часто используемыми атрибутами SVG являются: - transform – определяет перечень преобразований, применяемых к элементу и содержащимся внутри него элементам; - fill – определяет цвет заливки фигуры; - stroke – определяет цвет контура фигуры; - stroke-width – определяет размер контура фигуры. Все элементы SVG изначально позиционируются относительно начала координат SVG контейнера, по умолчанию расположенном в левом верхнего углу контейнера. Оси x и y направлены вниз и влево соответственно. Параметры окна просмотра могут быть изменены при помощи атрибута ViebBox у SVG-контейнера. Задаваемое при помощи данного атрибута соотношение сторон не обязано совпадать с соотношением сторон SVG контейнера.`35:Tbb6,md`При помощи селекторов определяется к каким элементов будет применен следующий набор свойств. Свойства состоят и самого свойства и одного или нескольких значений. При указании набора значений они разделяются запятой или пробелом, свойства разделяются точкой с запятой. Значений у одного свойства может быть несколько в том случае если это свойство является универсальным. К таким свойствам относятся margin, padding, border, font, background. Универсальные свойства могут содержать в себе значения нескольких свойств. Некоторые свойства в CSS также обладают свойством наследования, т. е. эти свойства применяются ко всем элементам, вложенным в элемент, для которого было задано данное свойство. Благодаря такому свойству можно задавать такие параметры как цвет, тип и размер шрифта сразу для всего документа или отдельного блока. Если какие-то элементы внутри блока не должны наследовать данное свойство для них можно отдельно задать те же свойства с необходимыми значениями. Селектор представляет собой строку-правило, с которыми сопоставляются элементы при каждом обновлении DOM и отвечающим условию элементам приписываются указанные свойства. При этом селекторы обладают уровнем приоритетности, который определяет свойства какого селектора будут применены к элементу в случае, если одни и те же свойства указаны сразу в нескольких селекторах, которые ложатся на данный элемент. Перечень селекторов и способов их комбинирования достаточно широк. Основными типами селекторов являются: - name – селектор имени; - #id – селектор id; - .class – селектор класса; - [name=«value»] – селекторы атрибутов; - :visited – псевдоклассы, псевдоэлементы, фильтры, состояния.`36:T7c2,md`## Цвета В веб-среде используется три вида задания цветов: - В шестнадцатеричной(hexadecimal) системе счисления; - В виде триплетов RGB; - В виде имени цвета на латинице. При задании цвета в шестнадцатеричной системе счисления(hex) строка экранируется при помощи #, после чего следует код, отвечающий за три цветовых канала: красного, зеленого и синего, каждый из которых задается на промежутке от 00 до FF или от 0 до F в упрощенной форме, например, #FF0000. При задании цвета с использованием триплета RGB строка начинается с указания на тип кодировки RGB, после чего в круглых скобках следует триплет из трех чисел, задаваемых на промежутке от 0 до 255, каждое число отвечает за соответствующий цветовой канал. В данной нотации может также использоваться альфа-канал, отвечающий за прозрачность, тип кодировки при этом изменится на rgba. Поскольку как в hex так и в rgb каждый канал варьируется от 0 до 255, общее число возможных оттенков составляет больше 16 миллионов. Что касается именных цветов, в современных браузерах поддерживается 140 цветов. Полный список можно посмотреть [тут](https://www.w3schools.com/colors/colors_names.asp).`37:Taeb,md`## Операторы Операторы в JS делятся на унарные и бинарные. Унарные операторы применяются только к одному элементу, а бинарные к двум. Среди унарных операторов стоит знать: - Унарный “-”: меняет знак числа на противоположный; - Унарный “+”: преобразует в число; - Инкремент “++”: увеличивает число на 1; - Декремент “--”: уменьшает число на 1. Операторы инкремента и декремента применяются только к переменным, а также в связи с тем, что каждый оператор в JS возвращает какое-либо значение, стоит обратить внимание на префиксную и постфиксную формы данных операторов. При использовании префиксной формы (например, ++i) оператор возвращает результат операции, а при использовании постфиксной формы (например, i++) оператор возвращает значение i до прибавления к нему единицы, при этом сама операция произойдет в любом случае и i увеличится на единицу. Среди бинарных операторов существуют математические: + – сложение; - – вычитание; \ – деление; * – умножение; ** – возведение в степень: / – оператор деления; = – оператор присвоения; % – остаток от целочисленного деления, а также логические: == – сравнение; === – строгое сравнение; != – не равенств; >= – больше или равно; <= – меньше или равно; && – “И”; || – “ИЛИ”; ! – “НЕ”. Логические операторы && и || при использовании их со значениями не логического типа выполняют несколько иное действие. Оператор || находит первое значение, возвращающее true при переводе его в логический пит и возвращает его исходное значение. Оператор && находит первое ложное значение и возвращает его исходное значение.`38:T96a,md`Однако узлами в DOM также являются текс, содержащийся внутри элемента и комментарии. В связи с этим каждый узел содержит еще ряд ссылок непосредственно на элементы DOM. - children – коллекция детей, которые являются элементами; - firstElementChild, lastElementChild – первый и последний дочерний элемент; - previousElementSibling, nextElementSibling – соседи-элементы; - parentElement – родитель-элемент. Метод document.getElementById(id) позволяет находить элемент в DOM по его уникальному идентификатору. Элементы в DOM также имеют ряд методов для поиска других узлов. Таких как: - elem.querySelectorAll(css) - возвращает все элементы внутри elem, удовлетворяющие данному CSS-селектору. - elem.querySelector(css) - возвращает первый элемент, соответствующий данному CSS-селектору; Поиск осуществляется в глубину от узла, у которого вызван данный метод. Каждый элемент в DOM также содержит в качестве свойств все атрибуты соответствующего HTML элемента и их значения. Можно также свободно добавлять и исключать свойства и методы отдельных элементов DOM. При добавлении свойства к HTML элементу оно не появится в качестве свойства у элемента DOM. Однако с ним можно работать при помощи методов: - elem.hasAttribute(name) – проверяет наличие атрибута; - elem.getAttribute(name) – получает значение атрибута; - elem.setAttribute(name, value) – устанавливает значение атрибута; - elem.removeAttribute(name) – удаляет атрибут. Также они хранятся в свойстве elem.attributes.`39:Td7d,md`### События DOM События в DOM — это сигналы, подаваемые браузером в ответ на действия пользователя или завершения этапов обработки DOM узлов. Обработчики событий можно добавить к элементу несколькими способами: - через задание соответствующих атрибутов HTML; - через соответствующие свойства DOM элемента; - при помощи функций elem.addEventListener(event, handler[, options]) и elem.removeEventListener(event, handler[, options]). Данный подход позволяет добавлять несколько обработчиков для одного и того же события к одному элементу. События бывают разного типа: - события мыши: - click – происходит, когда кликнули на элемент левой кнопкой мыши (на устройствах с сенсорными экранами оно происходит при касании); - contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши; - mouseover / mouseout – когда мышь наводится на / покидает элемент; - mousedown / mouseup – когда нажали / отжали кнопку мыши на элементе; - mousemove – при движении мыши, - события документа: - DOMContentLoaded – когда HTML загружен и обработан, DOM документа полностью построен и доступен, события клавиатуры: - keydown и keyup – когда пользователь нажимает / отпускает клавишу, события на элементах управления: - submit – пользователь отправил форму; - focus – пользователь фокусируется на элементе, например, нажимает на input, - события CSS: - transitionend – когда CSS-анимация завершена. В качестве первого аргумента в функцию-обработчик будет передан объект, отражающий событие. Этот объект содержит свойства с дополнительной информацией о данном событии. Ссылка на элемент, на котором произошло событие, хранится в свойстве target. События в DOM всплывающие, т. е. произошедшие на одно из элементов событие, также произойдет на его предке и на предке его предка и так далее вплоть до document. Это позволяет использовать один обработчики событий для целого ряда элементов. Свойство event.target при этом всегда будет хранить самый нижний элемент в этой цепочки, а event.currentTarget, тот элемент, на котором висит обработчик.`3a:T7f5,md`## Инструмент разработчика Вся обработка и выполнение JS происходит в браузере. В связи с этим отображение и поиск ошибок производится инструментами браузера. Для таких целей большинство браузеров содержат встроенные инструменты для разработки. Наиболее популярными браузерами для тестирования являются Chrome и Firefox. В большинстве браузеров инструмент разработчика открывается при помощи клавиши F12. В Chrome для этого также можно использовать сочетания клавиш Ctrl+Shift+I в Windows и Cmd+Opt+J в MacOs. Инструменты разработчика в различных браузерах как правили содержат следующие основные вкладки: - Elements - позволяет просматривать и редактировать текущее состояние DOM в форме HTML с применяемыми к элементам стилями и двусторонней возможностью выделения элементов в окне просмотра; - Console - позволяет выполнять код в контексте текущего окна браузера и выводить сообщения; - Source - содержит IDE с браузером для просмотра всех подгруженных на данной странице документов и инструментом редактирования JS и CSS и отслеживания ошибок в JS; - Network - содержит инструмент для отслеживания всех сетевых запросов, исходящих с текущей страницы.`3b:[{"id":"2778c3205c7cee9fbdf6e8baed986b8db56279f88528915715ee64698003d2b887d1b01ba19e47ab8c8050a60763257bc4742dcbd1fb10f07e0a642501e19c94","href":"https://static.observableusercontent.com/files/2778c3205c7cee9fbdf6e8baed986b8db56279f88528915715ee64698003d2b887d1b01ba19e47ab8c8050a60763257bc4742dcbd1fb10f07e0a642501e19c94","name":"css@1.png","type":"image/png","lastModified":1617268527958.178,"size":23784},{"id":"c4af79f4199d4373f0f4fda72f44fd05a942fca76de0e6bf8c53663bb6b874fa883c24b6f809d9eca7b93227f380be569d84fae852261a6e11f3303c50fa728f","href":"https://static.observableusercontent.com/files/c4af79f4199d4373f0f4fda72f44fd05a942fca76de0e6bf8c53663bb6b874fa883c24b6f809d9eca7b93227f380be569d84fae852261a6e11f3303c50fa728f","name":"tools.png","type":"image/png","lastModified":1617283904232.006,"size":140117}] 30:{"id":"13fbbb11f00bbe82","slug":"untitled/2","title":"Введение в веб-разработку","thumbnail":"59180ae23c57a7db1455b64ba5f23b1c39fb1e61f087dad335a4fe39dffcead4","access_level":"public","create_time":"$D2021-04-01T08:32:20.354Z","update_time":"$D2021-04-28T13:25:03.042Z","view_time":null,"first_public_time":"$D2021-04-27T10:55:21.130Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"ca32f3e4d1003204","login":"papakkkarlo","name":"Egor Ka","avatar_url":"https://avatars-next.observableusercontent.com/7c59263e32e654da48b55e05242c936505c076ac8e81e774d93d992c9f97dee2","tier":"starter_2024"},"version":431,"publish_version":431,"role":null,"authored":false,"authors":[{"type":"individual","id":"753e9d9e32f50d7b","login":"papakkkarlo","name":"Egor Ka","avatar_url":"https://avatars-next.observableusercontent.com/7c59263e32e654da48b55e05242c936505c076ac8e81e774d93d992c9f97dee2","tier":null}],"members":[{"type":"individual","id":"753e9d9e32f50d7b","login":"papakkkarlo","name":"Egor Ka","avatar_url":"https://avatars-next.observableusercontent.com/7c59263e32e654da48b55e05242c936505c076ac8e81e774d93d992c9f97dee2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Введение в веб-разработку","cells":[{"id":172,"value":"md`# Введение в веб-разработку`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"html`\n\n\n \n \n Пример html-документа\n \n \n \n \n \n \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"md`## CSS\nCSS(Cascading Style Sheets) – формальный язык описания различных свойств элементов языка разметки.\n\nТаблицы стилей состоят из набора пар селектор: набора свойств.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"md`## JavaScript\nJavaScript – мультипарадигменный язык программирования c динамической типизацией, автоматическим управлением памятью, реализующий стиль прототипного программирования, функции в котором являются объектами первого класса.\n\nJS является одной из реализации стандарта “ECMAScript” для встраиваемых скриптовых языков программирования. JavaScript используется в как встроенный язык в браузерах для манипуляции содержимым и функционалом веб-страницы. Он не имеет доступа к чтению и записи, а также запуску скриптов на устройстве пользователя. JS компилируется налету при помощи используемых в браузерах “движков”.\n\nКомментарии в JS бывают двух типов:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// однострочный\n/* \n многострочный\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"md`### Типы данных \nВ JS существует 8 основных типов данных:\n- number – может иметь как целочисленное значение, так и значения с плавающей точкой; \n- bigInt – числа больше 2**53; \n- string – строка; \n- boolean – логический тип; \n- null – сам себе тип. При использовании в математических выражение принимает значение 0;\n- undefined – сам себе тип. Приписывается переменным, инициализированным без значения; \n- object – структура для хранения примитивных типов и других структур; \n- function – функция.\n\nДля определения типа переменной используется оператор typeof. Единственный нюанс касаемо данной операции заключается в том, что в связи с багом в первой версии JS при проверке null возвращается значение object. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"typeof null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"md`## Объекты\nОбъект – коллекция пар ключ/значение, где в качестве ключа может выступать строка или Symbol, а значение может быть любого типа.\n\nОбъект может быть инициирован при помощи литерала: {}, или конструктора: new Object(). При инициации свойства объекта могут быть вычисляемыми, для этого выражение нужно поместить в квадратные скобки: {[fruit]: 5}.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"foo = 'bar';","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"obj = ({[foo]: 5});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"md`Объекты создаются в памяти только один раз при инициации, переменные, которым присваивается данный объект хранят ссылку на него поэтому они могут быть объявлены как константы и с их помощью можно беспрепятственно менять структуру объекта.\n\nПолучить доступ к свойствам объекта можно через точку: obj.property, или при помощи квадратных скобок: obj[«property»]. Удаление свойств из объекта происходит при помощи оператора “delete”.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"obj.bar;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"obj.foo = 6;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"md`Проверка наличия свойства в объекте:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"'bar' in obj;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`Перебор свойств объекта:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"keys = {\n const arr = [];\n for(let key in obj){\n arr.push(key);\n }\n return arr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"Object.entries(obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"md`Внутри функций объекта можно читать и изменять его свойства при помощи this. При этом значение this не привязывается к текущему объекту, а вычисляется при вызове функции. За счет данной особенности одну и ту же функцию можно использовать в разных объектах.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"o = ({\n foo: 'bar',\n change(){\n this.foo = '6';\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"{\n o.change();\n return o;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`Перебор свойств объекта можно осуществлять при помощи цикла или при помощи описанных ниже методов массива, предварительно получив свойства объекта в виде массива при помощи методов стандартного объекта Object: \n- Object.keys(obj) – возвращает массив ключей; \n- Object.values(obj) – возвращает массив значений; \n- Object.entries(obj) – возвращает массив пар [ключ, значение]. `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"Object.keys(obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"Object.values(obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"Object.entries(obj);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"md`Массив является расширением объекта и соответственно принадлежит тому же типу. \n\nМассив может быть инициирован при помощи литерала: [], или конструктора: new Array().\n\nОбращаться к элементам массива можно по индексам, начиная от 0.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"array = new Array(6);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"array[2] = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"array","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"arr = [1,2,3];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"arr[1];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"md`Массив также содержит свойство length, вычисляемое от самого большого индекса массива +1.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"arr.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"array.length = 7;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"array.length;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"array;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"md`Среди методов массивов полезно знать: \n\n- pop – убирает последний элемент из конца массива и возвращает его; \n- push – добавляет переданные элементы в конец массива; \n- shift – убирает первый элемент из массива и возвращает его; \n- unshift – добавиль в начало массива указанные элементы;\n- slice(index, index) – взять срез массива с указанного индекса по указанный или до конца;\n- splice(index, count, item, ...) – начиная с указанного индекса удалить из массива указанное число элементов и поместить указанные;\n- filter(func) – возвращает новый массив с элементами, прошедшими проверку в переданной функции; \n- find(func) – возвращает первый элемент, прошедший проверку в переданной функции; \n- map(func) – создаёт новый массив с результатами вызова указанной функции для каждого элемента массива; \n- forEach(func) – выполняет указанную функцию один раз для каждого элемента в массиве. \n\nПомимо выше указанных методов обход элементов в массиве можно осуществлять при помощи цикла for.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"ar = [1,2,3,4];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"ar.filter(d=>d!==3);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"'' || 'foo'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"'bar' && null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"md`Существует также ряд бинарных операторов заострять внимание на которых в данный момент нет необходимости. \n\nСтоит отметить, что оператор + может быть использован со строками, в таком случае вторая строка будет добавлена в конец первой. Если один из слагаемых будет числом, а второй строкой, они будут также сложены как строки.\n\nПри попытке сравнения переменных разного типа оба значения будут предварительно преобразованы в числа. Исключение составляет строгое сравнение, при расхождении в типах сравниваемых значений оно возвращает false.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"'' == 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"'' === 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"md`Математические операторы можно комбинировать с оператором присвоения, например, +=. При этом сперва будет выполнена первая операция, а затем вторая.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`## Функции\nВ JS существует два подхода к объявлению функций: декларация и выражение. При декларации функции объявляются при помощи ключевого слова function за которым следует имя функции, список аргументов в круглый скобках и тело функции в фигурных. При использовании функционального выражения имя функции игнорируется и возвращаемое значение должно быть присвоено какой-либо переменной для дальнейшего использования.\n\nКлючевое отличие между двумя подходами заключается в том, что интерпретатор JS в начале обработки блока кода ищет все декларации функций и выносит их наверх. Таким образом декларированные функции доступны в любом месте блока, в котором они объявлены, в то время как результат функционального выражения ведет себя как результат выражения.\n\nВызов функции может осуществляться по ее имени или сразу после объявления.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"func = function(){return}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"function bar(d){return d}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"bar('foo');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"// вызов функции после объявления\n(function(name){return `Hello ${name}!`})('world');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"md`Функция имеет полный доступ ко всем внешним переменным, объявленным до вызова этой функции. Внутри функции можно создавать локальные переменные и функции.\n\nВ отличии от объектов, переманенная с функцией хранит саму функцию, а не ссылку на нее. В связи с этим при присвоении ее значения другой переменной происходит копирование данной функции.\n\nАргументы функции могут быть заданы по умолчанию при помощи =. В случае если аргумент не передан и не задан по умолчанию он будет иметь значение undefined.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"(function(name='world'){return `Hello ${name}!`})();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md`Возврат значения из функции выполняется при помощи ключевого слова return. После того как выполнение функции дойдет до этого слова дальнейшее выполнение прекращается и возвращается результат выражение return после или undefined.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md`## Стрелочные функции\nСтрелочные функции объявляются без ключевого слова function, имени и с использованием символа стрелки (=>) после списка аргументов. Стрелочные функции ведут себя как функции выражений за исключением того, что стрелочные функции не имеют своего контекста this и переменной arguments. При наличии большего числа аргументов или их отсутствии нужно использовать круглые скобки.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"(name => `Hello ${name}!`)('world');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"md`## Глобальные объекты и функции\nВ среде браузера существует ряд встроенных объектов и функций, которые доступны на любом уровне выполнения программы. К ним относятся:\n- window - содержит параметры текущего окна;\n- Date - интерфейс для работы с датой и временем;\n- setTimeout(func|code, [delay], [arg1], [arg2], ...) – выполняет переданную функцию или строку кода через указанной время (в миллисекундах). Возвращает timerId;\n- clearTimeout(timerId) - отменяет выполнение кода в таймере;\n- setInterval(func|code, [delay], [arg1], [arg2], ...) – повторяет выполнение переданной функции или строки кода через указанной время (в миллисекундах). Возвращает timerId; \n- clearInterval(timerId) – отменяет выполнение кода в таймере.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"new Date()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"async function func1(){}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"md`## DOM\nDOM — это объектная модель HTML документа. DOM содержит иерархию элементов HTML документа. Во время выполнения в рамках определенного документа JS имеет доступ к DOM через переменную document. При изменении данного объекта соответствующим образом меняется и содержимое страницы. \n\nDOM состоит из “узлов”. Каждому тегу в HTML документе соответствует определенный узел в дом дереве. \n\nПолучить доступ к дочерним узлам можно при помощи свойств childNodes, firstChild, lastChild. К соседним узлам при помощи: nextSibling, previousSibling. К родительскому при помощи: parentNode.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":251,"value":"document","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":267,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"angle = {\n let angle = 0;\n while (true) {\n yield new Promise(resolve => {\n setTimeout(() => resolve(angle++), 10);\n });\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1"}} 31:"$30:body"