{"id":19925139,"url":"https://github.com/sa2kasov/javascript-reference-guide","last_synced_at":"2025-03-01T10:28:40.103Z","repository":{"id":218301689,"uuid":"746094952","full_name":"sa2kasov/javascript-reference-guide","owner":"sa2kasov","description":"Reference Guide of JavaScript, DOM, BOM","archived":false,"fork":false,"pushed_at":"2024-04-13T14:04:48.000Z","size":102,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-14T16:22:05.106Z","etag":null,"topics":["bom","dom","javascript","javascript-guide","javascript-references"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sa2kasov.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-01-21T03:07:39.000Z","updated_at":"2024-04-16T10:36:23.722Z","dependencies_parsed_at":"2024-01-21T04:22:21.573Z","dependency_job_id":"30db926a-9220-4c80-9128-bfa1e9c43486","html_url":"https://github.com/sa2kasov/javascript-reference-guide","commit_stats":null,"previous_names":["sa2kasov/javascript-guide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sa2kasov%2Fjavascript-reference-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sa2kasov%2Fjavascript-reference-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sa2kasov%2Fjavascript-reference-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sa2kasov%2Fjavascript-reference-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sa2kasov","download_url":"https://codeload.github.com/sa2kasov/javascript-reference-guide/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241352397,"owners_count":19948833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bom","dom","javascript","javascript-guide","javascript-references"],"created_at":"2024-11-12T22:20:33.425Z","updated_at":"2025-03-01T10:28:40.081Z","avatar_url":"https://github.com/sa2kasov.png","language":null,"readme":"\u003cp align=\"center\"\u003e\n \u003cimg\n src=\"https://upload.wikimedia.org/wikipedia/commons/archive/6/6a/20120221235432%21JavaScript-logo.png\"\n height=\"400\" width=\"400\" alt=\"JavaScript Logo\"\n /\u003e\n\u003c/p\u003e\n\n# JavaScript: Справочное руководство\n\n### Содержание\n\n1. [История появления](#история-появления)\n\t1. [Создатель языка о его происхождении](#создатель-языка-о-его-происхождении)\n2. [Введение в JavaScript](#введение-в-javascript)\n3. [Комментарии](#комментарии)\n4. [JavaScript в HTML](#javascript-в-html)\n5. [Переменные](#переменные)\n\t1. [let](#let)\n\t2. [const](#const)\n\t3. [var](#var)\n6. [Операторы](#операторы)\n\t1. [Арифметические](#арифметические-операторы)\n\t2. [Операторы сравнения](#операторы-сравнения)\n\t3. [Логические операторы](#логические-операторы)\n7. [Выражения и инструкции](#выражения-и-инструкции)\n8. [Типы данных](#типы-данных)\n\t1. [Логический тип](#логический-тип)\n\t2. [Числа](#числа)\n\t3. [Строки](#строки)\n\t\t1. [Экранирование символов](#экранирование-символов)\n\t\t2. [Конкатенация](#конкатенация)\n\t\t3. [Сравнение строк](#сравнение-строк)\n\t\t4. [Шаблонные литералы](#шаблонные-литералы)\n\t4. [Манипуляции с типами](#манипуляции-с-типами)\n\t5. [Приведение типов](#приведение-типов)\n\t\t1. [Таблица преобразования типов](#таблица-преобразования-типов)\n9. [Управляющие конструкции](#управляющие-конструкции)\n\t1. [if](#if)\n\t2. [Тернарный оператор](#тернарный-оператор)\n\t3. [switch](#switch)\n\t4. [for](#for)\n\t5. [while](#while)\n\t6. [do..while](#dowhile)\n\t7. [for..in](#forin)\n\t8. [Метки](#Метки)\n\t9. [try..catch..finally](#trycatchfinally)\n10. [Функции](#функции)\n\t1. [Области видимости](#области-видимости)\n\t2. [Функция как тип данных](#функция-как-тип-данных)\n\t3. [Свойства функций](#свойства-функций)\n\t4. [Анонимная функция](#анонимная-функция)\n\t5. [Стрелочные функции](#стрелочные-функции)\n\t6. [Замыкания](#замыкания)\n\t7. [Рекурсия](#рекурсия)\n\t7. [Поднятие (Hoisting)](#поднятие-hoisting)\n11. [Объекты](#объекты)\n\t1. [Создание объекта](#создание-объекта)\n\t2. [Свойства объекта](#свойства-объекта)\n\t\t1. [Работа свойствами объекта](#работа-свойствами-объекта)\n\t\t2. [Перебор свойств объекта](#перебор-свойств-объекта)\n\t3. [Сравнение объектов](#сравнение-объектов)\n\t4. [Создание методов в объекте](#создание-методов-в-объекте)\n\t5. [Методы объекта Object](#методы-объекта-object)\n\t\t1. [Доступ к свойствам объекта](#доступ-к-свойствам-объекта)\n\t\t2. [Управление свойствами объекта](#управление-свойствами-объекта)\n 3. [Прочие методы объекта](#прочие-методы-объекта)\n\t6. [Создание метода из имеющейся функции](#создание-метода-из-имеющейся-функции)\n\t7. [call / apply](#call--apply)\n12. [Массивы](#массивы)\n\t1. [Создание и работа с массивами](#создание-и-работа-с-массивами)\n\t2. [Добавление элементов в созданный массив](#добавление-элементов-в-созданный-массив)\n\t3. [Перебор элементов массива](#перебор-элементов-массива)\n\t4. [Удаление элемента массива](#удаление-элемента-массива)\n\t5. [Методы для работы с массивами](#методы-для-работы-с-массивами)\n\t\t1. [Создание массивов](#создание-массивов)\n\t\t2. [Доступ к элементам массива](#доступ-к-элементам-массива)\n\t\t3. [Поиск элементов массива](#поиск-элементов-массива)\n\t\t4. [Получение строки из массива](#получение-строки-из-массива)\n\t\t5. [Конкатенация массивов](#конкатенация-массивов)\n\t\t6. [Получение части массива](#получение-части-массива)\n\t\t7. [Вставка и удаление в любом месте](#вставка-и-удаление-в-любом-месте)\n\t\t8. [Сортировка массива](#сортировка-массива)\n\t\t9. [Работа с началом массива](#работа-с-началом-массива)\n\t\t10. [Работа с концом массива](#работа-с-концом-массива)\n\t\t11. [Поиск элементов массива](#поиск-элементов-массива)\n\t\t12. [Итерация по элементам массива](#итерация-по-элементам-массива)\n\t\t13. [Сведение массива к одному значению](#сведение-массива-к-одному-значению)\n\t\t14. [Преобразование массива](#преобразование-массива)\n\t\t15. [Другие методы массива](#другие-методы-массива)\n13. [Встроенные объекты](#встроенные-объекты)\n\t1. [Глобальный объект](#глобальный-объект)\n\t\t1. [Глобальные свойства](#глобальные-свойства)\n\t\t2. [Глобальные методы](#глобальные-методы)\n\t\t3. [Примеры использования](#примеры-использования)\n\t2. [Number](#number)\n\t\t1. [Свойства](#свойства-number)\n\t\t2. [Методы](#методы-number)\n\t3. [String](#string)\n\t\t1. [Свойства](#свойства-string)\n\t\t2. [Методы](#методы-string)\n\t\t3. [Примеры](#примеры-string)\n\t4. [Math](#math)\n\t\t1. [Свойства](#свойства-math)\n\t\t2. [Методы](#методы-math)\n\t5. [Date](#date)\n\t\t1. [Создание даты](#создание-даты)\n\t\t2. [Методы](#методы-date)\n\t6. [RegExp: Регулярные выражения](#регулярные-выражения)\n\t\t1. [Создание](#создание-regexp)\n\t\t2. [Специальные последовательности](#специальные-последовательности)\n\t\t3. [Позиции соответствия](#позиции-соответствия)\n\t\t4. [Операторы регулярного выражения](#операторы-регулярного-выражения)\n\t\t5. [Квантификаторы](#квантификаторы)\n\t\t6. [Методы регулярного выражения](#методы-регулярного-выражения)\n\t\t7. [Примеры использования](#примеры-regex)\n\t7. [Error](#error)\n\t\t1. [Инициирование исключения](#инициирование-исключения)\n14. [Объектно-ориентированное программирование](#объектно-ориентированное-программирование)\n\t1. [Принципы ООП](#принципы-ооп)\n\t2. [Функция-конструктор](#функция-конструктор)\n\t3. [Прототипы](#прототипы)\n\t4. [Классы](#классы)\n15. [BOM (Объектная модель браузера)](#bom-Объектная-модель-браузера)\n\t1. [Свойства и методы объекта Window](#свойства-и-методы-window)\n\t2. [Фреймы](#фреймы)\n\t\t1. [Работа с окнами](#работа-с-окнами)\n\t3. [navigator](#navigator)\n\t4. [history](#history)\n\t5. [location](#location)\n\t6. [screen](#screen)\n16. [Клиентский JavaScript](#клиентский-javascript)\n\t1. [Управление загрузкой скриптов. Атрибуты aync и defer](#управление-загрузкой-скриптов.-атрибуты-aync-и-defer)\n17. [DOM (Объектная модель документа)](#dom-объектная-модель-документа)\n\t1. [Свойства](#свойства-document)\n\t2. [Методы](#методы-document)\n\t3. [Типы узлов документа](#типы-узлов-документа)\n\t4. [Связи между DOM-элементами](#связи-между-dom-элементами)\n\t5. [Свойства и методы типов узлов DOM](#свойства-и-методы-типов-узлов-dom)\n\t\t1. [Node](#node)\n\t\t2. [Element](#element)\n\t\t3. [HTMLElement](#htmlelement)\n\t\t4. [Document](#document)\n\t\t5. [Примеры свойств и методов](#примеры-свойств-и-методов-узлов-dom)\n18. [События](#события)\n\t1. [Обработчики событий](#обработчики-событий)\n\t2. [Объект события](#объект-события)\n\t3. [Отмена действия по умолчанию](#отмена-действия-по-умолчанию)\n\t4. [Распространенные типы событий](#распространенные-типы-событий)\n\n\n## История появления\n\nОснователь языка, Брендан Айк (англ. Brendan Eich) – программист и создатель языка программирования JavaScript. На момент 2024 года исполнительный директор _Brave Software_. Был нанят в компанию _Netscape_ 4 апреля 1995 года, где была поставлена задача внедрить язык программирования _Scheme_ или что-то похожее в браузер Netscape. Поскольку требования были размыты Айка перевели в группу ответственную за серверные продукты, где он проработал месяц занимаясь улучшением протокола HTTP. В мае разработчик был переброшен обратно, в команду, занимающуюся клиентской частью (браузером), где он немедленно начал разрабатывать концепцию нового языка программирования.\n\nПервоначально язык назывался _LiveScript_ и предназначался как для программирования на стороне клиента, так и для программирования на стороне сервера.\n\n_JavaScript_ изначально был придуман для браузера _Netscape Navigator_. Microsoft первый кто позаимствовал этот язык для своего браузера _Internet Explorer_, добавив в него свои новые возможности. На что Netscape подала в суд в результате чего компания Microsoft выпустила аналог языка _JavaScript_, названный под именем _JScript_. Первым браузером, поддерживающим эту реализацию, был _Internet Explorer 3.0_.\n\nПо инициативе компании Netscape была проведена стандартизация языка ассоциацией ECMA. Стандартизированная версия имеет название _ECMAScript_. Первой версии спецификации соответствовал _JavaScript_ версии 1.1. _JavaScript_ после своего появления отличался оригинальностью и настолько понравился, что его начали портировать не только в браузеры, но и в другие среды.\n\n### Создатель языка о его происхождении\n\nСоздатель языка JavaScript Brendan Eich [поделился](https://www.jwz.org/blog/2010/10/every-day-i-learn-something-new-and-stupid/) историей происхождения языка и объяснил почему он такой, какой есть:\n\n\u003e JS был обязан «выглядеть как Java», только поменьше, быть эдаким младшим братом-тупицей для Java. Кроме того, он должен был быть написан за 10 дней, а иначе мы бы имели что-то похуже JS.\n\n\u003e что-то вроде PHP, только еще хуже. Его босс Netcsape быстро «зарубил» (в июле 1995, если мне не изменяет память; я сдлелал JS в начале/середине мая), т.к. это был уже третий язык после Java и JS. Было и так трудно обосновать то, что у нас 2 новых языка программирования для web.\n\n\u003e В то время мы должны были двигаться очень быстро, т.к. знали, что Microsoft идет за нами.\n\n\u003e Считайте, что JavaScript (пожалуйста, только не «JScript») спас вас от VBScript.\n\n\u003e 10 дней на то, чтобы сделать лексер, парсер, компилятор в байткод (bytecode emitter), интерпретатор, встроенные классы и декомпилятор. Помощь была только с файлом jsdate.c — от Ken Smith из Netscape (который, по нашему излишне оптимистичному соглашению, склонировал java.util.Date — Y2K баги и т.д. Джеймс Гослинг...).\n\n\u003e Простите, времени было мало для того, чтобы сделать правильную оптимизацию хвостовой рекурсии. 10 дней почти без сна, чтобы сделать JS с чистого листа, заставить его «выглядеть как Java» (я сделал, чтобы он выглядел как C), и тайком протащить туда его спасительные фишки: first class functions (замыкания сделал позже, но они были частью плана сразу) и прототипы (примерно как в языке Self).\n\n\u003e I'll do better in the next life.\n\n## Введение в JavaScript\n\n_JavaScript_ – алгоритмический язык программирования, интерпретируемый язык сценариев, основан на синтаксисе _C_ и _Java_.\n\n_JavaScript_ является объектно-ориентированным языком, но используемое в языке прототипирование обуславливает отличия в работе с объектами по сравнению с традиционными класс-ориентированными языками. Кроме того, _JavaScript_ имеет ряд свойств, присущих функциональным языкам: функции как объекты первого класса, объекты как списки, каррирование, анонимные функции, замыкания, ..., что придаёт языку дополнительную гибкость.\n\n**Популярность языка**\n\n_JavaScript_ является самым популярным языком программирования, используемый для frontend-разработки на стороне клиента. Согласно [рейтингу TIOBE Index](https://www.tiobe.com/tiobe-index), базирующемуся на данных поисковых систем Google, Bing, Yahoo!, Wikipedia, Amazon, YouTube и Baidu, на начало 2023 года JavaScript находится на :trophy: 7 месте, постоянно улучшая свои позиции за последние несколько лет. :trophy: 1 место в [рейтинге GitHub](https://octoverse.github.com/#top-languages-over-the-years) 2021 года. :trophy: 7 место в [рейтинге IEEE](https://spectrum.ieee.org/top-programming-languages-2022) (Институт инженеров электротехники и электроники) в 2022 году. По опросам разработчиков на [StackOverflow](https://survey.stackoverflow.co/2022/#section-most-popular-technologies-programming-scripting-and-markup-languages) в 2022 году JavaScript занимает :trophy: 1 место уже 10 лет подряд как самый часто используемый язык программирования.\n\n**Некоторые отличительные особенности JavaScript:**\n\n- Регистрозависимые конструкции, функции и операторы;\n- Все идентификаторы чувствительны к регистру;\n- В названиях переменных можно использовать буквы, символ подчёркивания, символ доллара, арабские цифры;\n- Названия переменных не могут начинаться с цифры.\n\n**Нотация – устоявшиеся правила записи**\n\n* Все имена маленькими буквами;\n* На стыке слов большая буква (camelStyleNotation);\n* Переменные и свойства — существительные;\n* Массивы и коллекции — существительные во множественном числе;\n* Функции и методы — глаголы;\n* Названия классов с Большой буквы.\n\n## Комментарии\n\nКомментарии в JavaScript могут быть строчными – начинаются с `//` и блочными (многострочными) – начинаются с `/*` и заканчиваются с `*/`.\n\n```js\n// Однострочный комментарий\n\n/*\nМногострочный\nкомментарий\n*/\n```\n\n## JavaScript в HTML\n\nJavaScript может быть встроен в код HTML с помощью тега `\u003cscript\u003e`. Если подключается внешний файл скриптов, то используется атрибут `src` в котором указывается ссылка на файл скрипта.\n\n```html\n\u003cscript src=\"outer.js\"\u003e\u003c/script\u003e\n```\n\nВстроенный JavaScript-код заключается между тегами `\u003cscript\u003e\u003c/script\u003e`. Встроенный JavaScript-код будет игнорироваться если у тега указан атрибут `src`.\n\n```html\n\u003cscript\u003e\n// Код на JavaScript\n\u003c/script\u003e\n```\n\n## Переменные\n\n- Переменная – именованный участок памяти;\n- Переменные объявляются ключевыми словами `let`, `const` и `var`;\n- Переменные принимают тот тип данных, который в них присваивается;\n- В JavaScript допускается присваивать значение переменной, которая еще не определена, но считается хорошим тоном сначала объявить переменную одним из ключевых слов (пункт 2);\n- JavaScript язык с динамической типизацией и переменные являются универсальными для всех типов данных, т.е. способны хранить значения любого типа.\n\n**Объявление и инициализация переменных**\n\n```js\n// Объявление переменных\nconst a\nlet b, c, d\nvar e\n\n// Иницилизация переменных\nconst a = 15\nlet b = c = d = 50\nvar e = 'string', f = false, g\n\n// Сокращенная запись\nx += 1 // Сокращенная запись x = x + 1\n// Доступна и для операторов \"+\", \"-\", \"*\", \"/\", \"%\"\ni++ // инкремент\ni-- // декремент\n++i // преинкремент\n--i // постдекремент\n\n// Пример\nvar i = 1\nlet a = i++ // -\u003e a = 1; i = 2;\nlet b = ++i // -\u003e b = 3; i = 3;\n```\n\n### let\n\n- Имеет блочную область видимости (как и [const](#const));\n- Переменная объявляемая как `let` ожидает, что её значение может изменяться;\n- Переменные `let` и `const` не участвуют в механизме [\"поднятия\" (hoisting)](#поднятие-hoisting).\n\n### const\n\n- Переменные `const` (как и [let](#let)) доступны только внутри блока, в котором они были объявлены (например, внутри цикла или условного оператора);\n- Главное отличие `const` в том, что значение переменной присваивается один раз и не может быть изменено позже;\n- В то же время для сложных типов данных таких как массив или объект допускается изменение содержимого, неизменным остаётся лишь ссылка на эту переменную;\n- Использование `const` для любой объявляемой переменной, если её значение не должно изменяться, является хорошей практикой, т.к. явно указывает на константное поведение переменной.\n\n```js\nconst arr = [1, 2, 3]\narr.push(4)\nconsole.log(arr) // -\u003e [1, 2, 3, 4]\n```\n\n### var\n\n- `var` был первым способом объявления переменных в JavaScript, до появления стандарта ECMAScript 6 (ES6) в котором были добавлены `let` и `const`;\n- При использовании `var` переменная может быть объявлена повторно без выдачи ошибки;\n- Имеют функциональную область видимости (function scope), что означает, что они доступны только внутри функции, в которой они были объявлены;\n- Если переменная объявлена внутри блока кода (например, внутри цикла или условного оператора), она все равно будет доступна за пределами этого блока;\n- Переменные `var` участвуют в механизме [\"поднятия\" (hoisting)](#поднятие-hoisting);\n- Используйте `var` только в случаях, когда вы знаете, что вам нужна функциональная область видимости, и вам нужно поведение _поднятия (hoisting)_. В остальных случаях рекомендуется использовать `let` и `const`.\n\n## Операторы\n\n### Арифметические операторы\n\n- `+` – плюс\n- `-` – минус\n- `*` – умножить\n- `/` – разделить\n- `%` – целочисленный остаток от деления\n\n### Операторы сравнения\n\n- `==` – сравнение\n- `===` – сравнение с учетом типа\n- `!=` – не равно\n- `!==` – не равно с учетом типа\n- `\u003e` – больше\n- `\u003c` – меньше\n- `\u003e=` – больше или равно\n- `\u003c=` – меньше или равно\n\n### Логические операторы\n\n_(в порядке приоритета)_\n- `!` НЕ (отрицание)\n- `\u0026\u0026` И (конъюнкция)\n- `||` ИЛИ (дизъюнкция)\n\n```js\n1 \u0026\u0026 2 // -\u003e 2, значение на котором скрипт остановился\n1 \u0026\u0026 0 // -\u003e 0\n0 \u0026\u0026 1 // -\u003e 0, т.к. первый операнд false и нет смысла идти дальше\n0 || 'false' // -\u003e \"false\"\n```\n\nОператоры сравнения возвращают булево значение либо `true` либо `false`.\n\nПараметры операторов называются _операндами_. Операторы у которых два операнда называются _бинарными_, один операнд — _унарными_, три — _тернарными_ (только один унарный оператором `!` (логическое \"не\"));\n\n## Выражения и инструкции\n\n### Выражения\n\n_Expression_\n\n```js\n5 + 10\n'John'\n!false\n```\n\n### Инструкции\n\n_Statement_\n\n```js\n5 + 10\n'John'\n!false\n```\n\n## Типы данных\n\n_Тип данных_ – набор операций, которые можно выполнить над данными. В JavaScript есть формально 8 типов:\n\n1. Boolean – логический;\n2. Number – числовой;\n3. BigInt – числа произвольной длины;\n4. String – строковый;\n5. Array – массив;\n6. Object – объект;\n\nТривиальные типы:\n\n7. undefined – неопределенный тип, любая необъявленная переменная имеет такой тип, а также объявленные переменные, которым еще не присвоено значение или несуществующие свойства объекта;\n8. null – отсутствие значения. Если переменная имеет значение _null_, то это означает, что в ней ничего не хранится.\n\n### Логический тип\n\nМожет принимать константу `true` или `false`. При проверке значения операндов преобразуются в логический тип.\n\n**Создание**\n\n```js\nconst b = new Boolean(value) // где value значение для булева типа\n```\n\nВ JavaScript есть как _Boolean-объекты_, так и примитивные _Boolean_ значения. Не смешивайте их. Объект – это объект. В частности, JavaScript любой объект считается `true`, например при неявном приведении типа в операторе `if`.\n\n```js\nconst x = new Boolean(false)\n\nif(x) {\n // этот код будет выполнен\n}\n```\n\nНе используйте объект _Boolean_ для преобразования к булеву значению. Вместо этого, используйте _Boolean_ как функцию.\n\n```js\nconst x = Boolean(expression) // предпочтительно\nconst y = new Boolean(expression) // не используйте\n\n// с использованием двойного отрицания:\nconst z = !!expression \n```\n\nНа основании «правила лжи» происходит приведение к логическому типу:\n\n* само значение `false`\n* `0` или `-0` (число ноль)\n* `''` (пустая строка)\n\nТривиальные типы\n\n* Значение `NULL`\n* `undefined`\n* `NaN` (Not a Number)\n\nВ современном JavaScript-программировании `new Boolean` не используется.\n\n### Числа\n\n**Создание**\n\n```js\n// Полня форма\nlet n = new Number(value) //где value — числовое значение\n//Литеральная форма записи\nlet n = 25\n//Приведение к Number\nlet n = '123'\nNumber(n) //123\nlet n = '132A'\nNumber(n) //NaN\n```\n\nВ числовой тип входят как целые числа, так и дробные. Экспоненциальные: $5E3$ (пять на 10 в третьей степени).\n\nВ JavaScript можно записать числа в 16-ричной или 8-ричной системе счисления, но только с целыми числами. Например, `const y = 0xFF;`. Префиксом числа восьмеричной системой счисления является цифра `0`. Пример: `const z = 040;` будет 32 (в 10-тичной).\n\n**Особые числовые значения**\n\nВ тип `Number` входят не только числа, но и еще три значения:\n\n- +бесконечность (`Infinity`);\n- -бесконечность (`-Infinity`);\n- особое значение `NaN` (Not a Number – значение числового типа не число). Возникает когда вычисление просто не может быть. Например:\n\n```js\nconst x = 0 / 0 // -\u003e NaN, деление на ноль\nconst y = Math.sqrt(-1) // -\u003e NaN, отрицательная степень\n\n// Является ли значение числового типа не числом?\nisNaN('x' * 10) // -\u003e true\n\n// Является ли значение бесконечным?\nisFinite() // false, если значение NaN или ±Infinity, иначе true\n```\n\n### Строки\n\n_Строка_ – набор символов, обрамляется в апострофы или двойные кавычки.\n\n#### Экранирование символов\n\n_Экранирование символов_ – вставка специальных символов через знак обратного слэша после которого идет определенный символ.\n\n* `\\'` – одинарные кавычки (апостроф);\n* `\\\"` – двойные кавычки;\n* `\\\\` – обратный слэш (`\\u005C`);\n* `\\b` – backspace;\n* `\\f` – form feed;\n* `\\n` – переход на новую строку (`\\u000A`);\n* `\\r` – возврат каретки (`\\u000D`);\n* `\\t` – табуляция (`\\u0009`);\n* `\\v` – вертикальная табуляция;\n* `\\0` – символ NULL (`\\u0000`);\n* `\\ddd` – octal sequence (3 digits: ddd);\n* `\\xdd` – hexadecimal sequence (2 digits: dd). Символ Latin-1, заданный двумя шестнадцатеричными цифрами;\n* `\\udddd` – unicode sequence (4 hex digits: dddd). Символ Unicode, заданный четырьмя шестнадцатеричными цифрами.\n\nВ JavaScript все хранится в кодировке _Unicode_. Это означает, что мы можем использовать любые символы _Unicode_ прямо в строке (в Юникоде первые 128 символов совпадают с соответствующими символами в ASCII).\n\n```js\n// Полное обозначение символа Unicode\nconst s1 = '\\u2014' // Длинное тире (—)\n'\\u2564' // Денежный знак валюты тенге (₸)\n\n// Шестнадцатеричное\nconst s2 = '\\x20' // Пробел\n```\n\n#### Конкатенация\n\n_Конкатенация_ – объединение (сцепление) строк.\n\n```js\n\"I \" + 'am ' + `in ` + \"love \" + 'with ' + ` JavaScript`\n```\n\n#### Сравнение строк\n\nСтроки сравниваются в соответствии со своей позицией в Unicode.\n\n```js\n'a' \u003e 'A' // -\u003e true\n```\n\n#### Шаблонные литералы\n\nШаблонные литералы (англ. _Template Literals_, неоф. _Template Strings_ или \"шаблонные строки\") – способ создания строк, позволяющий встраивать переменные и выражения непосредственно в строку, а также писать многострочные строки и теговые шаблоны.\n\nСинтаксис создания таких строк определяется использованием обратных кавычек (англ. _backticks_), для вставки выражений используется конструкция `${выражение}`:\n\n```js\nconst name = 'John'\nlet age = 33\n\nconsole.log(`Hi, My name is ${name}. Next year I'll turn ${age + 1} years old!`)\n```\n\n_Шаблонные литералы_ появились в стандарте ECMAScript 2015 (ES6) и призваны обеспечить более удобный и гибкий способ создания строк благодаря лучшей читабельности и простотой работы с динамическими данными по сравнению с традиционными двойными и одинарными кавычками.\n\nСинтаксис создания таких строк определяется использованием обратных кавычек (англ. _backticks_), для вставки выражений используется конструкция `${выражение}`:\n\n```js\nconst name = 'John'\nlet age = 33\n\nconsole.log(`Hi, My name is ${name}. Next year I'll turn ${age + 1} years old!`)\n```\n\n**Интерполяция** в шаблонных строках позволяет легко вставлять любые выражения, включая вызовы функций и переменные.\n\n_Шаблонные литералы_ появились в стандарте ECMAScript 2015 (ES6) и призваны обеспечить более удобный и гибкий способ создания строк благодаря лучшей читабельности и простотой работы с динамическими данными по сравнению с традиционными двойными и одинарными кавычками.\n\n**Многострочный текст**\n\nШаблонные литералы поддерживают многострочный текст без необходимости использования спецсимволов для перевода строки. Это делает их более удобными для написания кода, особенно для создания HTML-шаблонов или SQL-запросов.\n\n```js\n// Создание HTML-кода\nconst term = 'Template Literals'\nconst description = 'are literals enclosed by backtick (`` ` ``)'\n\nconst html = `\n\u003cdl\u003e\n \u003cdt\u003e${term}\u003c/dt\u003e\n \u003cdd\u003e${description}\u003c/dd\u003e\n\u003c/dl\u003e`\n\n// Создание SQL-запросов\nconst id = 123\nconst sql = `SELECT *\nFROM users\nWHERE id = ${id}`\n```\n\n**Тегированные шаблонные строки**\n\nШаблонные строки могут быть \"тегированы\" функцией, которая позволяет обрабатывать строку и выражения перед их объединением. Первый аргумент функции тега содержит массив строковых значений. Остальные аргументы относятся к выражениям.\n\n```js\nfunction highlight(strings, nameExp, ...values) {\n // Обработка строк и значений\n strings[0] // -\u003e \"Hello, \"\n strings[1] // -\u003e \"! You're \"\n strings[2] // -\u003e \"years old\"\n values[0] // -\u003e 32\n nameExp // \"Jane\"\n return `${strings[0]}${nameExp} and Welcome${strings[1]}turning ${values[0] + 1}${strings[2]} next year.`\n}\n\nlet name = 'Jane'\nlet age = 32\nlet message = highlight`Hello, ${name}! You're ${age} years old`\nconsole.log(message)\n// Hello, Jane and Welcome! You're turning 33 years old next year.\n```\n\n**Безопасность**\n\nИспользование шаблонных литералов делает код более безопасным, так как автоматически осуществляется экранирование символов. Это помогает предотвратить некоторые виды атак, такие как атаки внедрения SQL.\n\nВ шаблонных строках, как и в обычных строках, также можно использовать спецсимволы, такие как перенос строки `\\n` или символ возврата каретки `\\r`. Над шаблонными строками, как и с обычными, по-прежнему можно использовать встроенные функции JavaScript или методы строк, такие как `.slice()` или `.toLowerCase()`.\n\n### Манипуляции с типами\n\n```js\n'2' + '2' // -\u003e строка \"22\"\n2 + '2' // -\u003e строка \"22\" (строка приоритетнее числа)\n'' + true // -\u003e строка \"true\" (строка приоритетнее булев типа)\n2 + true // -\u003e число 3 (число приоритетнее булев типа)\n'2' * 10 // -\u003e число 20 (если строка может быть преобразована в число)\n'x' * 10 // -\u003e NaN (Not a Namber)\n\nconst x = 'x' * 10 // -\u003e NaN\nconst y = 'y' * 10 //-\u003e NaN\n// Однако\nx == y // -\u003e false, т.к. NaN != NaN\n```\n\nДля проверки типа есть оператор определения типа typeof возвращающая строку соответствующего типа.\n\n```js\ntypeof 5 // \"number\"\ntypeof true // \"boolean\"\ntypeof '5' // \"string\"\n```\n\n### Приведение типов\n\nВ JavaScript основными преобразованиями типов являются строковые, числовые и логические.\n\n**Преобразование в число**\n\nЧисловое значение дают следующие преобразования:\n\n* Умножение строки (которая состоит только из чисел) на число;\n* Передать значение как аргумент функции `Number`;\n* `parseInt()` – целое число из значения до тех пор, пока не встретится нечисловое значение;\n* `parseFloat()` – дробное число из нечислового значения, тоже что и `parseInt()`, но допускается вхождение символа точки.\n\n```js\n'5' * 1 // -\u003e целое число 5\n'5.5' * 1 // -\u003e дробное число 5.5\n\nparseInt('100.1JS') + 1 // -\u003e целое число 101\nparseFloat('10.5JS') // -\u003e дробное число 10.5\n\nNumber(true) // -\u003e число 1\nNumber(false) // -\u003e число 0\n```\n\n**Преобразование в строку**\n\n* Строковое преобразование имеет приоритет при попытке сложения двух значений;\n* Передача значения как аргумент функции `String`;\n* Если в объекте реализован метод `toString()` он будет использован при попытке преобразования объекта в строку.\n\n```js\n5 + '' // -\u003e строка '5'\nString(true) // -\u003e строка \"true\"\nfalse + '' // -\u003e строка \"false\"\n```\n\n**Логическое преобразование**\n\n* Логическое сравнение преобразуется для значений при попытке их логического сравнения (`==`, `===`, `\u0026\u0026`, `||` и `!`), в условных конструкциях `if`, `while`, `switch`;\n* В логическое значение преобразует функция `Boolean()`.\n\n```js\n!!5; // -\u003e true\nBoolean(15); // -\u003e true\n```\n\n#### Таблица преобразования типов\n\n| Значение | Boolean | Number | String |\n|----------------|---------|-----------|-------------------|\n| true | true | 1 | \"true\" |\n| false | false | 0 | \"false\" |\n| 0 | false | 0 | \"0\" |\n| 1 | true | 1 | \"1\" |\n| \"0\" | true | 0 | \"0\" |\n| \"1\" | true | 1 | \"1\" |\n| NaN | false | NaN | \"NaN\" |\n| Infinity | true | Infinity | \"Infinity\" |\n| -Infinity | true | -Infinity | \"-Infinity\" |\n| \"\" | false | 0 | \"\" |\n| \"строка\" | true | NaN | \"строка\" |\n| [ ] | true | 0 | \"\" |\n| { } | true | NaN | \"[object Object]\" |\n| [10] | true | 10 | \"10\" |\n| [10,20] | true | NaN | \"10,20\" |\n| [\"строка\"] | true | NaN | \"строка\" |\n| [\"один\",\"два\"] | true | NaN | \"один,два\" |\n| function(){} | true | NaN | \"function(){}\" |\n| null | false | 0 | \"null\" |\n| undefined | false | NaN | \"undefined\" |\n\n## Управляющие конструкции\n\n### if\n\nУправляющая конструкция `if` выполняет инструкции если условие истинно.\n\nВ `if` может быть сколько угодно `else if`. Последнее `else` (без условий) можно опустить, хотя рекомендуется его использовать как «отстойник».\n\n```js\nif (condition) {\n statement1\n statement2\n} else if (condition 2) {\n statement3\n statement4\n} else {\n statement5\n statement6\n}\n```\n\n### Тернарный оператор\n\n_Тернарный оператор_ – это оператор с тремя операндами. В JavaScript единственный тернарный оператор это сокращенный вариант записи условной конструкции `if..else..`.\n\n```js\nconst result\n\n// Обычная условная конструкция\nif (условие)\n result = 'условие истинно'\nelse\n result = 'условие ложно'\n\n// То же условие через тернарный оператор\nb = (a \u003e 1) ? 'условие истинно' : 'условие ложно'\n```\n\nСкобки в условии тернарного оператора можно опустить, но для лучшей читаемости не рекомендуется.\n\n### switch\n\nОператор переключения `switch` позволяет проанализировать множество вариантов значений, используя для анализа числовое или строковое значение.\n\nВнутри конструкции `switch` обычно применяют оператор `break`, т.к. в отсутствии данного оператора если `switch` встретит значение которое соответствует значению в `case`, он выполнить все последующие (нижележащие) инструкции игнорируя все `case` словно их нет.\n\nОператор `default` сработает если интерпретатор не попадет ни в один `case`.\n\n```js\nconst a = 2\n\nswitch (a) {\n case 0:\n case 1:\n case 2:\n console.log('Two')\n break;\n case 3:\n case 4:\n case 5:\n default:\n alert(\"It's many!\")\n}\n```\n\n### for\n\nЦикл `for` – многократное выполнение одних и тех же действий заранее известное количество раз.\n\n_Итерация_ – однократное выполнение (шаг) цикла.\n\n**Как работает цикл for**\n\n```js\nfor (часть A; часть B; часть C)\n часть D (тело цикла)\n```\n\nКогда интерпретатор встречает цикл `for`, он сперва заходит в `часть А` и выполняет то, что там написано ровно один раз. `часть В` выступает как условие, если оно истинно, то интерпретатор заходит в `часть D` (тело цикла), после выполнения которого переходит в `часть С`. Потом возвращается в `часть В` (проверяет условие) и если там истина, то переходит в `часть D` и далее как по треугольнику происходит переход:\n\n\u003e часть В =\u003e часть D (тело цикла) =\u003e часть С\n\u003e\n\u003e До тех пор пока часть В не вернет false\n\nЛюбую из частей цикла for можно опустить, главное чтобы присутствовали точки с запятой как часть синтаксиса.\n\nЕсли в `часть А` необходимо выполнить несколько инструкций, то разделять их следует запятой.\n\n**Цикл for с пустым телом**\n\nНиже цикл возводит значение переменной `result` в 10-ую степень.\n\n```js\nfor (let i = 1, result = 2, exp = 10; i \u003c exp; result += result, i++){}\nconsole.log(result) // -\u003e 1024\n```\n\n**Цикл for с continue и break**\n\n`continue` в циклах `for`, `while` и `do..while` прерывает текущую итерацию и переход к следующей.\n\n`break` немедленно заканчивает цикл и выходит за операторные скобки.\n\n```js\nfor (let i = 0; i \u003c 10; i++) {\n if (i == 4)\n continue\n\n if (i == 8)\n break\n}\n```\n\n### while\n\n* Условие проверяется ПЕРЕД очередным проходом;\n* Выполняется пока условие истинно;\n* Если условие изначально ложно – не выполнится ни разу.\n\n```js\nlet num = 1\n\nwhile (num \u003c 1000) {\n num *= 2\n if(num == 32) continue\n if(num == 512) break\n console.log(num)\n}\n```\n\n### do..while\n\n* Условие проверяется ПОСЛЕ очередного прохода;\n* Выполняется пока условие истинно;\n* Если условие изначально ложно – выполнится хотя бы один раз.\n\n```js\nlet num = 1\n\ndo {\n num *= 2\n if (num == 32) continue\n else if (num == 512) break\n console.log(num)\n} while (num \u003c 1000)\n```\n\nЕсли в теле цикла `do..while` все лишь одна инструкция, то операторные скобки можно опустить.\n\n```js\nlet a = 0\ndo a++\nwhile (a \u003c= 5) // Одна инструкция в теле цикла\nconsole.log(a) // -\u003e 5\n```\n\n### for..in\n\nПредназначен для прохода по массивам, коллекциям, объектам.\n\n```js\nfor (let prop in navigator) {\n console.log(prop)\n}\n```\n\n### Метки\n\nИногда бывает нужно прервать вложенный цикл или цикл с n-количеством вложенности. В JavaScript это можно организовать с помощью меток. Названия меток не должны начинаться с цифры.\n\n```js\nlet i = 1\n\nouter: while (i \u003c 10) {\n inner: for (let j = 1; j \u003c= i; j++) {\n if (j \u003e 2)\n continue inner\n if (i * j \u003e 10) {\n console.log(i, j)\n break outer\n }\n }\n i++\n} // -\u003e 6, 2\n```\n\n### try..catch..finally\n\n`try..catch..finally` – оператор обработки исключений служит для написания кроссбраузерных приложений. Так как при возникновении ошибки в JavaScript исполнение программы останавливается, конструкция `try..catch..finally` позволяет пропустить ошибочную конструкцию и перейти к следующей.\n\nСначала JavaScript пытается выполнить все что находится в блоке `try`, если внутри блока `try` ошибки не возникнет, то содержимое блока `catch` игнорируется.\n\nСодержимое блока `finally` выполняется при любом случае, вне зависимости от того возникла ошибка или нет.\n\nРазница между кодом в блоке `finally` и кодом в блоке всей этой конструкции проявляется в JavaScript только в случае если в блоке `catch` произойдет ошибка.\n\nВ случае возникновения ошибки в `catch` программа остановится за исключением если есть блок `finally`. В таком случае блок `finally` выполнится, а все что после него нет.\n\nДопускается вкладывать конструкции `try..catch..finally` внутри друг друга.\n\n```js\ntry {\n console.log('До ошибки в блоке try')\n throw new Error() // В случае ошибки попадаем в блок catch\n console.log('После ошибки в блоке try')\n} catch(e) { // В переменную \"e\" заносится информация об ошибке\n console.log('Сообщение об ошибке: ' + e.message)\n} finally {\n console.log('Сообщение из блока «finally»')\n}\n\nconsole.log('Сообщение после конструкции try..catch..finally')\n```\n\n## Функции\n\n_Функция_ – некоторый именованный набор кода, который определяется один раз и может вызываться многократно.\n\n* Имена функций чувствительны к регистру;\n* Если какой-либо фрагмент кода повторяется или предполагается использовать несколько раз, то это явный признак того, чтобы завести функцию (подпрограмму);\n* Внутри функции доступен массив `arguments`, в котором находятся переданные аргументы функции, а сама функция может быть продекларирована без единого аргумента;\n* Если функция ожидает два параметра, а передаем мы только один, то второй аргумент будет иметь значение `undefined`.\n\n```js\nfunction sayHello(name) { // Формальные параметры\n if (name == null)\n name = 'Stranger'\n console.log('Hello, ' + name)\n}\n\nsayHello('John') // -\u003e Hello, John\nsayHello('Jane') // -\u003e Hello, Jane\nsayHello() // -\u003e Hello, Stranger\n```\n\n### Области видимости\n\n* Глобальные переменные объявляются до описания функций, объявляются вне тела функции и могут быть причиной сложно находимых ошибок;\n* Локальные переменные явно объявляются в теле функции и аргументы функции всегда локальные переменные;\n* У каждой функции своя область видимости;\n* Локальные переменные «живут» столько сколько живет функция.\n\nВ примере ниже в функции `foo()` произойдёт перезапись глобальной переменной `x`. В функции же `bar()` с использованием ключевых слов `var`, `let`, `const`.\n\n```js\nvar x = 'x-global'\n\nfunction foo () {\n x = 'x-local-foo'\n return x // Возвратит глобальную переменную \"x\"\n}\n\nfoo() // -\u003e x-local-foo\n\nfunction bar () {\n var x = 'x-local-bar'\n return x // Возвратит локальную переменную \"x\"\n}\n\nbar() // -\u003e x-local-bar\n```\n\nСкорее правильней считать переменные не как глобальные или локальные, а в контексте вложенных функций, как родитель-ребенок. В примере ниже вызов переменной `x` в функции `inner()` произойдет из глобальной области видимости, т.к. переменная `x` не продекларирована внутри самой функции `inner()` и её родительской функции `outer()`. Вызов переменной `y` произойдет из родительской функции `outer()`, что касается переменной `z`, то она передается как аргумент функции `inner()`, что сама по себе является локальной.\n\n```js\nfunction echo (str) {\n console.log(str.toString())\n}\n\nlet x = 'x-global', y = 'y-global', z = 'z-global'\n\nfunction outer() {\n let y = 'y-local'\n function inner(z) {\n echo(x) // -\u003e x-global\n echo(y) // -\u003e y-local\n echo(z) // -\u003e z-local\n return 'inner function'\n }\n return inner('z-local')\n}\n\nouter() // -\u003e inner function\n```\n\nВ этом примере нельзя вызвать функцию `inner()` из глобальной области видимости. Она может быть вызвана только внутри функции родителя — `outer()`.\n\n**Засада с областью видимости**\n\nВ коде ниже можно предположить, что внутри тела функции мы изменим значение глобальной переменной.\n\n```js\nvar x = 100\n\nfunction foo(x) {\n if(x)\n x = 10\n else\n var x = 20\n}\n\nfoo(true)\nconsole.log(x) // -\u003e 100\n```\nНо при выполнении кода мы получим значение `100`, т.к. JavaScript перед исполнением кода, помимо синтаксической проверки также исправляет код и выполнит его так, как если бы он выглядел следующим образом:\n\n```js\nvar x = 100\n\nfunction foo(x) {\n var x\n if (x)\n x = 10 // это и\n else\n x = 20 // это относится к локальной области видимости\n}\n\nfoo(true)\nconsole.log(x) // -\u003e 100\n```\n\n### Функция как тип данных\n\nФункция в JavaScript является таким же типом данных, как Boolean, String, Number, Object, ... Это значит, что с функциями можно производить такие же действия, как и с обычными типами.\n\n```js\nfunction echo(str) {\n console.log(str.toString())\n}\n\nlet print = echo\nprint('Теперь «print» это точная копия функции «echo»')\n```\n\n### Свойства функций\n\n`имя_функции.length` – возвратит количество ожидаемых параметров функции.\n\n```js\nfunction foo(arg1, arg2, arg3) {}\n// Сколько параметров ожидает функция?\nconsole.log(foo.length); // -\u003e 3\n```\n\nПри создании функции автоматически создается объект `arguments`. Свойство `arguments.length` возвращает количество фактически переданных параметров.\n\n```js\nfunction getArgs() {\n return arguments.length\n}\n\ngetArgs(1, 2, 3, 4, 5, 6, 7, 8, 9) // -\u003e 9\n```\n\nВсе переданные параметры функции доступны в объекте `arguments` каждый под своим порядковым номером начиная с нуля.\n\n```js\nfunction sum() {\n let i = result = 0\n while (arguments[i]) {\n result += arguments[i]\n i++\n }\n return result\n}\n\nconsole.log(sum(1, 2, 3, 4, 5, 6, 7, 8, 9)) // -\u003e 45\n```\n\n### Анонимная функция\n\n_Анонимная функция_ – функция, объявляемая без определённого имени, который мог бы служить идентификатором для доступа к ней. В примере ниже анонимная функция присваивается переменной `sum` после чего, `sum()` становится функцией.\n\n```js\nconst sum = function(val) {\n return val + val;\n}\n\nsum(5) // -\u003e 10\n```\n\nРазница между функциями декларированные словом `function` и функциями присваиваемые переменным в том, что первых можно вызывать до её объявления, т.к. в этом случае сработает механизм _hoisting_ (поднятие).\n\nВ коде ниже вызов функции `foo()` не вызовет ошибку, в то время как вызов `bar()` выдаст ошибку:\n\n```console\nTypeError: bar is not a function\n```\nТак как на момент выполнения скрипта функция `bar()` не была создана, а появилась только как результат выражения присваивания переменной.\n\n```js\nfoo()\nbar() // -\u003e TypeError: bar is not a function\n\nconst bar = function(args) {\n statements\n}\n\nfunction foo(parameters) {\n statements\n}\n```\n\n### Стрелочные функции\n\nСтрелочные функции предоставляют более краткую форму записи функций.\n\n```js\n// Стандартная функция\nfunction sum(a, b) {\n return a + b\n}\n\n// Стрелочная функция\nconst add = (a, b) =\u003e a + b\n```\n\n**Особенности стрелочных функций**\n\n* Если функция принимает только один параметр, скобки вокруг параметров можно опустить;\n* Если тело функции состоит из одного выражения, то его не обязательно заключать в фигурные скобки, а оператор `return` можно также опустить;\n* Стрелочные функции не создают собственный контекст `this`, вместо этого они заимствуют контекст от родительской области видимости;\n* Стрелочные функции не могут быть использованы с оператором `new` для создания экземпляров объектов;\n* Стрелочные функции не имеют доступа к объекту `arguments`.\n\n### Замыкания\n\n_Замыкания_ – способность функции захватывать переменные родительского контекста.\n\n```js\nfunction makeAdd(base) {\n return function(num) {\n return num + base;\n }\n}\n\nconst addTen = makeAdd(5)\naddTen(10) // -\u003e 15\n```\n\n**Пример со сравнением чисел**\n\nПри первом вызове `compare(10)` функция возвратит внутреннюю функцию при этом сохранив в переменной `x` значение `10`.\n\n```js\nfunction compare(x) {\n return function innerCompare(y) {\n if (x === y) return null\n return x \u003c y\n }\n}\n\nconst checkNum = compare(10) // -\u003e function \"innerCompare\"\ncheckNum(9) // -\u003e false\ncheckNum(10) // -\u003e null\ncheckNum(11) // -\u003e true\n```\n\n### Рекурсия\n\n_Рекурсия_ – вызов функции саму себя. Нахождение факториала числа наиболее распространённый пример рекурсивного вызова функции.\n\n```js\nfunction factorial(n) {\n if(n === 0) return 1\n return n * factorial(n - 1)\n}\n\nfactorial(5) // -\u003e 120\n```\n\n### Поднятие (Hoisting)\n\nПод поднятием (hoisting) в JavaScript называют механизм поднятия в начало кода объявленных переменных и функций, чтобы они могли быть использованы до своего фактического объявления в коде.\n\nНа практике переменные и функции остаются на том же месте, где вы их объявили. Вместо этого, интерпретатор JavaScript сначала сканирует код и создает переменные и функции в памяти на этапе компиляции (до фактического выполнения кода). Это позволяет JavaScript использовать переменные и функции до их фактического объявления в коде без выдачи ошибок.\n\nЗдесь следует уточнить, что \"поднимаются\" только объявления, но не инициализация (присваивание значений).\n\n**Поднятие функций**\n\nФункция `hi()` исполняется без ошибок невзирая на позднее объявление:\n\n```js\nhi() // -\u003e \"Greetings\"\n\nfunction hi() {\n return \"Greetings\"\n}\n```\n\n**Поднятие имён переменных**\n\nОдно из отличий `var` перед `let` и `const` в том, что последние имеют блочную область видимости:\n\n```js\nconsole.log(x) // -\u003e undefined\nvar x = 1\n\nconsole.log(y) // -\u003e ReferenceError:\n// Cannot access 'y' before initialization\nconst y = 2\n```\n\n## Объекты\n\n* Объектный тип данных – входят все объекты JavaScript (свойства, методы);\n* Объект – коллекция данных (свойств), функций (методов), и, возможно, других объектов;\n* Объект явно создается с помощью оператора `new`, литерала объекта `{}` или метода `Object.create()`;\n* Объект явно уничтожается при уничтожении переменной или присваивании переменной значения `null`;\n* Когда мы присваиваем значение некоему свойству объекта, которого нет в объекте, происходит создание свойства;\n* В JavaScript почти всё является объектом. Даже примитивные типы данных при необходимости могут \"упаковываться\" в объекты-обёртки. Например, `const x = 17.5` эквивалентно `const x = new Number(17.5)`.\n\n### Создание объекта\n\n```js\n// Создание объекта с помощью конструктора Object()\nlet Book = new Object()\n\n// Сокращённая запись с помощью литерала объекта\nlet User = {\n say() {\n console.log('Hello!')\n\t}\n}\n\n// Создание объекта с методом Object.create() на основе прототипа (User)\nconst John = Object.create(User)\nJohn.say() // -\u003e \"Hello!\"\n\n// Создание свойств\nBook.title = 'JavaScript. Подробное руководство' // String\nBook['author'] = 'Дэвид Флэнаган' // Имя как ключ массива\nBook.year = 2021 // Number значение\nBook.isAvailable = true // Boolean значение\nBook.order() // вызов метода\n\n// Недопустимая форма записи\nobj.word1-word2 = true // -\u003e Ошибка, SyntaxError\nobj.'property' = true // -\u003e Ошибка, SyntaxError\n```\n\nДругие способы создания объекта с помощью функции-конструктора и синтаксиса классов рассмотрены далее в разделе [Объектно-ориентированное программирование](##объектно-ориентированное-программирование).\n\n### Свойства объекта\n\nЕсли имя свойства содержит символы недопустимые в названии переменной (пробелы, дефисы) или оно совпадает с зарезервированным словом (например: `var`, `for`, `instanceof`, ...), то необходимо имя свойства заключить в кавычки. В этом случае обращаться к свойству нужно с помощью квадратных скобок. Например, `objName['object\\'s property']`.\n\nЕсли свойство состоит из одного слова, то можно не заключать его в кавычки. Названия свойств с пробелами также обрамляются кавычками.\n\n```js\nconst Car = {\n speed: 220,\n color: 'orange',\n 'year': 2025,\n 'sport car': false\n}\n\nconst Audi = Car // копия объектв\nAudi['car-body'] = 'coupe'\n```\n\n#### Работа со свойствами объекта\n\nМетоды для работы со свойствами объекта рассмотрены в разделе [Управление свойствами объекта](#управление-свойствами-объекта)\n\n_Удаление свойства объекта_\n\n```js\ndelete Audi['car-body']\ndelete Audi.color\n```\n\n_Проверка на наличие свойств в объекте_\n\n```js\n'color' in Audi // -\u003e false\n'sport car' in Audi // -\u003e true\n```\n\n_Динамическое обращение к свойствам объекта_\n\nНазвания свойств могут формироваться динамически путём результата выражения.\n\n```js\nconst User = {\n isAdmin: 'yes',\n '2': 0\n}\n\nconsole.log(User[1 + 1]) // -\u003e 0, обращение к свойству '2'\nconst x = 'is'\nconsole.log(User[x + 'Admin']) // -\u003e \"yes\"\n```\n\n#### Перебор свойств объекта\n\nВ принципе, если бы названия свойств объекта состояли только из чисел, то можно было бы воспользоваться циклом `for`. Например:\n\n```js\nconst NumberObject = {\n 1 : 'свойство 1',\n 2 : 'свойство 2',\n 3 : 'свойство 3',\n 4 : 'свойство 4',\n}\n\nfor (let i = 1; i in NumberObject; i++) {\n console.log(NumberObject[i])\n}\n```\n\nДля прохода по объектам или коллекциям используется конструкция `for..in`.\n\n```js\nconst AssocObj = {\n 0 : 'male',\n age : 21,\n 'name' : 'John',\n true : false\n}\n\nfor (let current in AssocObj) { // где current – имя свойства\n console.log(current + ': ' + AssocObj[current])\n}\n```\n\n### Сравнение объектов\n\nПри присваивании переменной, которая хранит в себе объект происходит ссылка на этот самый объект. И при сравнении двух переменных возвратится значение `true` не по причине одинакового содержимого двух объектов, а потому, что обе переменные являются ссылкой на один и тот же объект. Так, в примере ниже объект `o1` возвратит `true` при сравнении с объектом `o2`. И все дальнейшие изменения с объектов `o2` отобразятся и на объекте `o1`.\n\nВ то же время, несмотря на одинаковое содержимое объектов `o1` и `o3` они возвратят `false` при сравнении, т.к. с точки зрения ООП это разные объекты.\n\n```js\nconst o1 = { x: 150 }\nconst o2 = o1 // -\u003e ссылка на объект o1\nconst o3 = { x: 150 }\n\nconsole.log(o1 == o2) // -\u003e true\nconsole.log(o1 == o3) // -\u003e false\n\n// Измение значение свойства \"x\" объекта \"o2\"\no2.x = 200\n// Значение свойства \"x\" объекта \"o1\" также изменилось\nconsole.log(o1.x)\n```\n\n### Создание методов в объекте\n\nМетоды создаются путем присваивания анонимной функции.\n\n```js\nconst Methods = {\n one: function() {\n console.log('This is method \"one\"')\n },\n two: function(param) {\n console.log('I am a ' + param)\n }\n}\n\nmethods.one() // -\u003e This is method \"one\"\nmethods.two('JavaScript Student') // -\u003e I am a JavaScript Student\n```\n\n**Ключевое слово `this`?**\n\nКлючевое слово `this` используется в объектах для передачи ссылки на объект внутри которого он вызывается. Вместо `this` сработало бы и имя объекта, но принято использовать именно `this`.\n\n```js\nconst MyObject = {\n property: 'property value',\n method: function() {\n console.log(this.property)\n },\n}\n\nMyObject.method() // -\u003e \"property value\"\n```\n\n### Методы объекта Object\n\n#### Доступ к свойствам объекта\n\n* `Object.keys(obj)` – возвращает массив ключей объекта.\n\n```js\nconst person = {\n name: 'John',\n age: 32,\n city: 'Almaty'\n}\n\nconst keys = Object.keys(person)\nconsole.log(keys) // -\u003e [\"name\", \"age\", \"city\"]\n```\n\n* `Object.values(obj)` – возвращает массив значений объекта.\n\n```js\nconst person = {\n name: 'Jane',\n age: 31,\n city: 'Astana'\n}\n\nconst values = Object.values(person)\nconsole.log(values) // -\u003e [\"Jane\", 31, \"Astana\"]\n```\n\n* `Object.entries(obj)` – возвращает массив пар \"ключ-значение\" объекта.\n\n```js\nconst person = {\n name: 'John',\n age: 32,\n city: 'Shymkent'\n}\n\nconst entries = Object.entries(person)\nconsole.log(entries) // -\u003e [[\"name\", \"John\"], [\"age\", 33], [\"city\", \"Shymkent\"]]\n```\n\n* `hasOwnProperty(prop)` – проверяет, принадлежит ли свойство непосредственно объекту.\n\n```js\nconst person = {\n name: 'Jane',\n age: 31\n}\n\nconsole.log(person.hasOwnProperty('name')) // -\u003e true\nconsole.log(person.hasOwnProperty('toString')) // -\u003e false\n```\n\n* `valueOf()` – возвращает примитивное значение объектов Number, Boolean, ...\n\n```js\nconst n = new Number(5) \nn.valueOf() // -\u003e 5\n\nconst obj = {\n name: 'John',\n age: 32,\n valueOf: function() {\n return this.age;\n }\n}\n\nconsole.log(obj + 10) // -\u003e 42 (valueOf() преобразует объект в число)\n```\n\n* `имяОбъекта.hasOwnProperty(имяСвойства)` – является ли свойство/метод унаследованным.\n\n```js\nconst user = {\n id: 123,\n login: 'Jane',\n password: '******',\n}\n\nconsole.log(user.hasOwnProperty('login')) // -\u003e true\nconsole.log(user.hasOwnProperty('toString')) // -\u003e false (унаследовано от прототипа)\n\nObject.prototype.myProperty = 'myValue'\n\n// Напечатает только собственные свойства и методы\nfor (let i in user) {\n if (user.hasOwnProperty(i)) {\n console.log(user[i])\n }\n} // -\u003e 123, Jane, ******\n```\n\n* `имяОбъекта.propertyIsEnumerable(имяСвойства)` – является ли свойство перечисляемым.\n\n```js\nconst user = {\n name: \"John\"\n}\n\nObject.defineProperty(user, 'age', {\n value: 32,\n enumerable: false\n})\n\nconsole.log(user.propertyIsEnumerable('name')) // -\u003e true\nconsole.log(user.propertyIsEnumerable('age')) // -\u003e false (свойство не перечисляемое)\n```\n\n* `Object.prototype.isPrototypeOf(объект)` – является ли прототип прототипом объекта.\n\n```js\nconst proto = {\n greet: function() {\n console.log('Hello! World')\n }\n}\n\nconst obj = Object.create(proto)\n\nconsole.log(proto.isPrototypeOf(obj)) // -\u003e true\n```\n\n#### Управление свойствами объекта\n\n* `Object.defineProperty(obj, prop, descriptor)` – определяет новое свойство или изменяет существующее.\n\n```js\nconst person = {}\n\nObject.defineProperty(person, 'name', {\n value: 'John',\n writable: false, // Нельзя изменить значение\n enumerable: true, // Можно перечислить свойство\n configurable: false // Нельзя удалить или изменить конфигурацию свойства\n})\n\nconsole.log(person.name) // -\u003e \"John\"\n\nperson.name = 'Jane' // Ошибка, свойство name не перезаписывается\n```\n\n* `Object.defineProperties(obj, props)` – определяет несколько свойств.\n\n```js\nconst person = {}\n\nObject.defineProperties(person, {\n name: {\n value: 'John',\n writable: false\n },\n age: {\n value: 32,\n writable: true\n }\n})\n\nconsole.log(person.name) // -\u003e \"John\"\nconsole.log(person.age) // -\u003e 32\n\nperson.age = 33 // Изменение значения свойства age\nconsole.log(person.age) // 33\n```\n\n* `delete obj.prop` – удаляет свойство из объекта.\n\n```js\nconst person = {\n name: 'John',\n age: 32\n}\n\ndelete person.age\n\nconsole.log(person.name) // \"John\"\nconsole.log(person.age) // undefined\n```\n\n#### Прочие методы объекта\n\n* `Object.assign(target, ...sources)` – копирует свойства из исходных объектов в целевой объект.\n\n```js\nconst target = { name: 'John' }\nconst source1 = { age: 32 }\nconst source2 = { city: 'Almaty' }\n\nObject.assign(target, source1, source2)\nconsole.log(target) // -\u003e { name: 'John', age: 32, city: \"Almaty\" }\n```\n\n* `Object.freeze(obj)` – делает объект неизменяемым.\n\n```js\nconst user = {\n\tname: 'Jane',\n\tage: 31\n}\n\nObject.freeze(user)\nuser.age = 30 // -\u003e false\nconsole.log(user) // { name: \"Jane\", ag }\n```\n\n* `Object.seal(obj)` – запрещает добавление новых свойств, но разрешает изменение существующих.\n\n```js\nconst user = {\n\tname: 'John',\n\tage: 32\n}\n\nObject.seal(user)\nuser.age = 31 // Свойство \"age\" будет изменено\nuser.sex = 'male' // Свойство \"sex\" не будет добавлено\ndelete user.name // Свойство \"name\" не будет удалено\n\nconsole.log(user) // -\u003e { name: \"John\", age: 32 }\n```\n\n* `Object.is(value1, value2)` – определяет, являются ли два значения одинаковыми.\n\n```js\nconsole.log(Object.is(10, 10)) // -\u003e true\nconsole.log(Object.is('hello', 'world')) // -\u003e false\nconsole.log(Object.is(NaN, NaN)) // -\u003e true\nconsole.log(Object.is(0, -0)) // -\u003e false\n```\n\n### Создание метода из имеющейся функции\n\n```js\nfunction foo() {\n console.log(this.name)\n}\n\nconst users = {\n name: 'John',\n getName: foo, // Присваивание имеющейся функции\n}\n\nusers.getUserName = foo // Присваивание имеющейся функции\nusers.getName() // -\u003e John\n```\n\n### call / apply\n\nЛюбую функцию в JavaScript можно вызывать в контексте любого объекта. Это нужно когда нет необходимости громоздить объект лишними функциями. Для этого есть методы `call` и `apply`. Метод `apply` очень похож на `call`, за исключением передачи аргументов. В `apply` используется массив аргументов вместо списка именованных параметров.\n\n```js\nfunction outer(x, y) {\n return this.num + x + y\n}\n\nconst ObjectOne = {\n num: 10,\n}\n\n// Первый аргумент задает значение this внутри функции\nouter.call(ObjectOne, 50, 190); // -\u003e 250\n\n// Вызов функции внутри объекта\nconst ObjectTwo = {\n num: 15,\n method: function() {\n return outer.apply(this, [12, 8])\n },\n}\n\nObjectTwo.method() // -\u003e 35\n```\n\n## Массивы\n\n* Массив – упорядоченный набор данных;\n* Доступ к элементам массива осуществляется по его номеру (индексу);\n* Элементы массива нумеруются с нуля.\n\nЭлементы массива доступны по их индексу (порядковым номером) и могут содержать что угодно (числовые, строковые данные, функции, и т.д.). В этом плане массивы в JavaScript похожи на объекты с той разницей, что элементы не именованные, а индексированные.\n\n### Создание и работа с массивами\n\n```js\n// С помощью литерала\nlet arr = [] // Иницилизация пустого массива\narr = ['string', 1, true]\ntypeof arr // -\u003e \"object\" (массив это Объект)\n\n// С помощью конструктора Array\nlet arr2 = new Array(5) // -\u003e [undefined × 5]\narr2 = new Array(5, 10, 15, 20, 25, 30)\n\n// Заполнение уже созданного массива\narr['name'] = 'John'\narr['surname'] = 'Doe'\narr.age = 30\n\n// Создадим пару функций для последующего добавления их в массив\nfunction sayHello() {\n return 'Hello! World'\n}\n\nconst multiple = function() {\n let result = 1, i = 0\n\n do {\n result *= arguments[i]\n i++\n } while(arguments[i])\n\n return result\n}\n\n// Добавление данных при иницилизации массива\nconst user = [30, 'male', sayHello, multiple, true]\n\n// Обращение к элементам массива\nuser[0] // -\u003e 30\nuser[2]() // -\u003e \"Hello! World\", произошел вызов функции «sayHello»\nuser[3](2, 2, 4, 2, 5, 3, 10) // -\u003e 4800, вызов функции «multiple»\n```\n\n### Добавление элементов в созданный массив\n\nЧтобы безошибочно добавить элемент в существующий массив, можно воспользоваться свойством `length`, который возвращает количество(длину) элементов массива. Здесь действует аксиома:\n\n\u003e _Индекс последнего элемента массива на единицу меньше длины массива_\n\nИнициализируемый массив `myArray` имеет длину `length = 3`, т.к. последний занятый индекс 2.\n\nПосле присваивания значения ячейке массива с индексом `10`, в массиве `myArray` хранятся 11 элементов. Элементы с порядковым номером с 4 по 9 имеют значение `undefined`.\n\n```js\nconst myArray = [0, false, '25']\nmyArray[myArray.length] = 'еще один элемент в массиве'\nconsole.log(myArray[3]) // -\u003e \"еще один элемент в массиве\"\n\n// Длина массива\nmyArray.length // -\u003e 4\nmyArray[10] = 'x'\nmyArray.length // -\u003e 11\nmyArray // [0, false, '25',\n// 'еще один элемент в массиве', undefined × 4, 'x']\n```\n\nСвойство `length` у массивов доступны не только на чтение, но и на запись. Таким же образом можно сократить количество элементов в массиве.\n\n```js\nmyArray.length = 3\nmyArray // -\u003e [0, false, '25']\n```\n\n### Перебор элементов массива\n\n```js\nconst array = ['Jane', 36, true]\narray.length = 2 // Сокращение массива (3-ий элемент будет удален)\narray[7] = 'z'\n\nfor(let i = 0; i \u003c array.length; i++) {\n console.log(i + ': ' + array[i])\n /* Напечатает:\n 0: Jane\n 1: 36\n 2-6: undefined (x5)\n 7: z\n */\n}\n\nfor(let j in array) {\n console.log(j + ': ' + array[j])\n /* Напечатает:\n 0: John\n 1: 25\n 7: z\n */\n}\n```\n\nЦикл `for..in` чаще всего оказывается наиболее предпочтительным. В примере выше он опустил все элементы со значением `undefined`, однако он выведет элемент со значением `undefined` если таковой был присвоен явно, например, `array[25] = undefined`.\n\nПри удалении элемента массива, индекс массива принимает значение `undefined`. Причем есть разница от `undefined` который произошел в результате удаления и явно присваиваемого `undefined`. В первом случае, значение `undefined` рассматривается как неизвестное(неопределенное) значение, во втором случае, как конкретное значение типа `undefined`.\n\n### Удаление элемента массива\n\n```js\ndelete array[2]\narray // [\"Jane\", 36, undefined]\narray[array.length] = undefined\narray // [\"Jane\", 36, undefined, undefined]\n```\n\n### Методы для работы с массивами\n\n#### Создание массивов\n\n* `Array.from()` – создает новый массив из итерируемого объекта или псевдомассива.\n\n```js\n// Массив из строки\nArray.from('hello') // -\u003e [\"h\", \"e\", \"l\", \"l\", \"o\"]\n\n// Массив из NodeList\nlet paragraphs = document.querySelectorAll('p')\nArray.from(paragraphs) // -\u003e массив элементов \u003cp\u003e\n\n// Создание массива с преобразованием элементов\nlet numbers = [1, 2, 3]\nArray.from(numbers, n =\u003e n * 2) // -\u003e [2, 4, 6]\n```\n\n* `Array.fromAsync()` – создает новый массив из асинхронного итерируемого объекта.\n\n```js\nasync function getFiles() {\n let dir = await openDir('.')\n let files = []\n for await (let file of dir) {\n files.push(file)\n }\n return files\n}\n\nlet filesArr = await Array.fromAsync(getFiles()) // -\u003e массив файлов в директории\n```\n\n* `Array.of()` – создает новый массив из переданных аргументов.\n\n```js\nArray.of('Hi', true, 3, [4], {5: 6}) // -\u003e ['Hi', true, 3, [4], {5: 6}]\n```\n\n#### Доступ к элементам массива\n\n* `at()` – возвращает элемент массива по заданному индексу.\n\n```js\n// Получение первого элемента\nlet arr = [1, 2, 3]\nlet firstElement = arr.at(0) // -\u003e 1\n\n// Получение последнего элемента\nlet arr = [1, 2, 3]\nlet lastElement = arr.at(-1) // -\u003e 3\n```\n\n* `entries()` – возвращает итератор, который содержит пары `[ключ, значение]` для каждого элемента массива.\n\n```js\nlet arr = ['a', 'b', 'c']\nfor (let [index, value] of arr.entries()) {\n console.log(index, value)\n}\n// Напечатает:\n// 0 \"a\"\n// 1 \"b\"\n// 2 \"c\"\n```\n\n* `keys()` – возвращает итератор, который содержит ключи (индексы) элементов массива.\n\n```js\nlet arr = ['a', 'b', 'c']\nfor (let key of arr.keys()) {\n console.log(key)\n}\n// Напечатает:\n// 0\n// 1\n// 2\n```\n\n* `values()` – возвращает итератор, который содержит значения элементов массива.\n\n```js\nlet arr = ['a', 'b', 'c']\nfor (let value of arr.values()) {\n console.log(value)\n}\n// Напечатает:\n// \"a\"\n// \"b\"\n// \"c\"\n```\n\n#### Поиск элементов массива\n\n* `every()` – проверяет, удовлетворяют ли все элементы массива заданному условию.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\nconst allPositive = numbers.every(number =\u003e number \u003e 0) // -\u003e true\nconst allEven = numbers.every(number =\u003e number % 2 === 0) // -\u003e false\n```\n\n* `filter()` – создает новый массив с элементами, которые прошли проверку заданным условием.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\nconst evenNumbers = numbers.filter(number =\u003e number % 2 === 0) // -\u003e [2, 4]\n```\n\n* `findLast()` – возвращает последний элемент массива, который удовлетворяет заданному условию.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\nconst lastEvenNumber = numbers.findLast(number =\u003e number % 2 === 0) // -\u003e 4\n```\n\n* `findLastIndex()` – возвращает индекс последнего элемента массива, который удовлетворяет заданному условию.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\nconst lastEvenNumberIndex = numbers.findLastIndex(number =\u003e number % 2 === 0) // -\u003e 3\n```\n\n* `some()` – проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\nconst hasEvenNumber = numbers.some(number =\u003e number % 2 === 0) // -\u003e true\nconst allNegative = numbers.some(number =\u003e number \u003c 0) // -\u003e false\n```\n\n#### Получение строки из массива\n\n* `toString()` – приводит к строке массив, разделяя элементы запятыми;\n* `join()` – делает то же самое, что и toString() за тем исключением, что в join() в качестве параметра можно передать разделитель.\n\n```js\nconst foo = () =\u003e 'Hello! World'\nconst bar = [20, 2, 25, foo]\nconst baz = bar.toString()\nconst qux = bar.join(' • ')\n\nconsole.log(baz) // -\u003e \"20,2,25,() =\u003e 'Hello! World'\"\nconsole.log(qux) // -\u003e \"20 • 2 • 25 • () =\u003e 'Hello! World'\"\n```\n\n#### Конкатенация массивов\n\n* `concat()` – возвращает новый массив в котором объеденины все перечисленные через запятую параметры. При этом исходный массив остаётся неизменным.\n\n```js\nconst foo = [1, 2]\nconst foo = [3, 4]\nfoo.concat(foo, 5, 6) // -\u003e [1, 2, 3, 4, 5, 6]\nfoo // -\u003e 1, 2; Массив foo остается неизменным\n```\n\nОператор `+` в контексте массива приводит каждый массив к строке.\n\n```js\nconst bar = [1, 2] + [3, 4] // -\u003e \"1,23,4\"\n```\n\n#### Получение части массива\n\n* `slice()` – вырезает часть массива. Функция `slice` не изменяет массив на котором вызывается эта функция, а в качестве результата возвращает копию массива.\n\nВ функциях для получения части массива (функции `slice`, `splice`) первый параметр (или если передается только один параметр) отсчет позиции начинается с нуля, если передается отрицательное значение, то отсчет начинается с конца и с единицы.\n\nЕсли передается один параметр, то возвратит часть массива начиная с позиции переданного параметра и до конца массива.\n\n```js\nconst array = [23, 11, 5, 16, 98, 55]\n\narray.slice(3) // -\u003e 16, 98, 55\n```\n\nМожно передать отрицательное значение, тогда отсчет элементов массива начнется с конца.\n\n```js\narray.slice(-2) // -\u003e 98, 55\n```\n\nВернется часть массива с позиции первого параметра до позиции второго параметра. Отсчет позиции второго параметра начинается сначала.\n\n```js\narray.slice(2, 4) // -\u003e 5, 16\n```\n\nВ случае передачи неверных данных возвратится пустой массив.\n\n```js\narray.slice(5, 2) // -\u003e []\n```\n\n#### Вставка и удаление в любом месте\n\n* `splice()` – вырезает или вставляет элементы в массив.\n\n_С одним параметром_. Если передается один параметр, то возвратится часть массива начиная с начала и длиной переданного параметра. Отсчет начинается с единицы.\n\n```js\nconst array = [14, 22, 'third', true, ['array']]\narray.splice(3) // -\u003e [\"14, 22, third\"]\n```\n\n_С двумя параметрами_. Если передается два параметра, то возвратится часть массива начиная с позиции первого параметра и длиной второго параметра.\n\n```js\narray = [14, 22, 'third', true, ['array']]\nconst third = array.splice(2, 1) // -\u003e [\"third\"]\narray\t// -\u003e [\"14, 22, true, array\"]\n```\n\n_С тремя параметрами_. Если передается три и более параметра, то произойдет вставка всех элементов, переданные третьим (и более если есть) параметром(ов). Первый параметр означает перед каким элементом массива произойдет вставка, второй параметр – количество элементов, которые необходимо вырезать.\n\n```js\nconst sourceArray = ['1st', '2nd', '4th', '5th']\nsourceArray.splice(2, 0, '3rd') // -\u003e [\"1st\", \"2nd\", \"4th\", \"5th\"] \nsourceArray.join() // -\u003e [\"1st,2nd,3rd,4th,5th\"]\n```\n\nФункции `slice()` и `splice()` отличаются тем, что в функции `splice()` второй параметр отсчитывается не с начала массива, а с позиции равной первому параметру. Также в функции `splice()` можно передать три и более параметра. В этом случае происходит вставка новых элементов в массив.\n\n#### Сортировка массива\n\n* `revers()` – реверс массива, функция ничего не возвращает и применяется непосредственно к самому массиву.\n\n```js\nconst array = [23, 11, 5, 16, 98, 55]\narray.reverse() // -\u003e 55, 98, 16, 5, 11, 23\n```\n\n* `sort()` – сортирует массив как строки (даже если массив имеет только числовые значения). Функция `sort()` может принимать необязательный параметр — имя функции. Если функция указана, то элементы массива будут отсортированы согласно значениям, возвращаемых функцией. Если параметр не указан, массив будет отсортирован в лексикографическом порядке (возрастающий порядок следования символов в таблице ASCII).\n\n```js\nconst array = [23, 11, 5, 16, 98, 55]\narray.sort() // -\u003e 11, 16, 23, 5, 55, 98\n\n// sort(функция_сортировки)\nconst mySort = (a, b) =\u003e a - b\narray.sort(mySort) // -\u003e 5, 11, 16, 23, 55, 98\n```\n\n#### Работа с началом массива\n\n* `shift()` – извлекает и возвращает первый элемент массива. Исходный массив также смещается (остается без первого элемента).\n\n```js\nconst array = ['1st', '2nd', '3rd']\narray.shift() // -\u003e '1st'\narray // -\u003e ['2nd', '3rd']\n```\n\n* `unshift()` – добавляет элементы в начало массива со смещением. Возвращает новую длину массива.\n\n```js\nconst array = ['3rd', '4th', '5th', 'last']\narray.unshift('1st', '2nd') // -\u003e 6 \narray // -\u003e ['1st', '2nd', '3rd', '4th', '5th', 'last']\n```\n\n#### Работа с концом массива\n\n* `pop()` – извлекает и возвращает последний элемент массива. Исходный массив также изменяется (остается без последнего элемента).\n\n```js\nconst array = [10, 'JavaScript', 101]\narray.pop() // -\u003e 101\narray // -\u003e [10, 'JavaScript']\n```\n\n* `push()` – добавляет элементы в конец массива. Возвращает новую длину массива.\n\n```js\nconst array = ['Ecma']\narray.push('Script', 2015) // -\u003e 3\narray.join() // -\u003e 'Ecma,Script,2015'\n```\n\n#### Поиск элементов массива\n\n* `indexOf(searchElement, fromIndex)` – возвращает индекс первого найденного элемента, соответствующего `searchElement`.\n\n```js\nconst drinks = ['water', 'tea', 'coffee', 'cacao']\nconst firstAppleIndex = drinks.indexOf('water') // -\u003e 0\nconst secondAppleIndex = drinks.indexOf('water', 2); // -\u003e 3\n```\n\n* `lastIndexOf(searchElement, fromIndex)` – возвращает индекс последнего найденного элемента, соответствующего `searchElement`.\n\n```js\nconst vegetables = ['tomato', 'cucumber', 'carrot', 'eggplant']\nconst lastAppleIndex = vegetables.lastIndexOf('tomato') // -\u003e 3\n```\n\n* `includes(searchElement, fromIndex)` – определяет, содержит ли массив `searchElement`.\n\n```js\nconst fruits = ['apple', 'banana', 'orange']\nconst hasApple = fruits.includes('apple') // -\u003e true\nconst hasMango = fruits.includes('mango') // -\u003e false\n```\n\n* `find(callbackFn, thisArg)` – возвращает первый элемент, удовлетворяющий условию, заданному `callbackFn`.\n\n```js\nconst numbers = [5, 12, 8, 130, 44]\nconst foundNumber = numbers.find(element =\u003e element \u003e 10) // -\u003e 12\n```\n\n* `findIndex(callbackFn, thisArg)` – возвращает индекс первого элемента, удовлетворяющего условию, заданному `callbackFn`.\n\n```js\nconst numbers = [5, 12, 8, 130, 44]\nconst foundIndex = numbers.findIndex(element =\u003e element \u003e 10) // -\u003e 1\n```\n\n#### Итерация по элементам массива\n\n* `forEach(callbackFn, thisArg)` – выполняет `callbackFn` для каждого элемента массива.\n\n```js\nconst numbers = [1, 2, 3, 4]\nnumbers.forEach(element =\u003e console.log(element * 2)) // -\u003e 2, 4, 6, 8\n```\n\n* `map(callbackFn, thisArg)` – создает новый массив с результатами вызова `callbackFn` для каждого элемента.\n\n```js\nconst numbers = [1, 2, 3, 4]\nconst doubledNumbers = numbers.map(element =\u003e element * 2) // -\u003e [2, 4, 6, 8]\n```\n\n#### Сведение массива к одному значению\n\n* `reduce(callbackFn, initialValue)` – применяет `callbackFn` к аккумулятору и каждому элементу массива, чтобы получить одно значение.\n\n```js\nconst numbers = [1, 2, 3, 4]\nconst sum = numbers.reduce((accumulator, element) =\u003e accumulator + element, 0) // -\u003e 10\n```\n\n* `reduceRight()` – то же, что и `reduce()`, но применяет callback-функцию к элементам массива в обратном порядке (справа-налево).\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\n// Вычисление факториала 5 (5! = 5 * 4 * 3 * 2 * 1)\nconst factorial = numbers.reduceRight((acc, number) =\u003e acc * number, 1)\nconsole.log(factorial) // -\u003e 120\n```\n\nВ примере выше callback-функция умножает аккумулятор `acc` на каждый элемент массива, начиная с последнего элемента `5` и заканчивая первым `1`.\n\n#### Преобразование массива\n\n* `copyWithin()` – копирует часть элементов массива в другую позицию внутри того же массива, перезаписывая существующие элементы.\n\n```js\n// Копируем элементы с индекса 1 (включительно)\n// начиная с позиции индекса 0\n// до индекса 3 (не включительно)\n[1, 2, 3, 4, 5].copyWithin(1, 0, 3) //-\u003e [1, 1, 2, 3, 5]\n```\n\n* `fill()` – заполняет элементы массива статическим значением.\n\n```js\nconst numbers = [1, 2, 3, 4, 5]\n\n// Заполнит все элементы массива значением 0\nnumbers.fill(0) // -\u003e [0, 0, 0, 0, 0]\n\n// Заполнит значением 9\n// элементы с индекса 1 (включительно)\n// до индекса 4 (не включительно)\nnumbers.fill(9, 1, 4) // -\u003e [0, 9, 9, 9, 0]\n```\n\n* `flat()` – создает новый массив, рекурсивно объединяя элементы вложенных массивов.\n\n```js\nconst nestedArray = [1, 2, [3, 4], [5, [6, 7]]]\n\nconst flatArray = nestedArray.flat(2) // Уровень вложенности 2\n\nconsole.log(flatArray) // [1, 2, 3, 4, 5, 6, 7]\n```\n\n* `flatMap()` – сначала применяет функцию к каждому элементу массива, а затем объединяет результаты в новый массив.\n\n```js\nconst numbers = [1, 2, 3, 4]\n\nconst doubledAndFlattened = numbers.flatMap(number =\u003e [number, number * 2])\n\nconsole.log(doubledAndFlattened) // [1, 2, 2, 4, 3, 6, 4, 8]\n```\n\n#### Другие методы массива\n\n* `isArray(obj)` – определяет, является ли объект массивом.\n\n```js\nArray.isArray([]) // -\u003e true\nArray.isArray({}) // -\u003e false\n```\n\n* `toLocaleString()` – возвращает строковое представление массива с учетом локали.\n\n```js\nprices = [7890, 120.31]\n\n// Форматирование цен с учетом локали\nformattedPrices = prices.toLocaleString('kk', {\n style: 'currency', currency: 'KZT'\n})\n\nconsole.log(formattedPrices) // -\u003e 7 890,00 KZT, 120,31 KZT\n```\n\n* `toReversed()` – создает новый массив с элементами в обратном порядке по сравнению с исходным массивом.\n\n```js\n[1, 2, 3, 4, 5].toReversed() // -\u003e [5, 4, 3, 2, 1]\n```\n\n* `toSorted()` – создает новый отсортированный массив на основе исходного массива.\n\n```js\n[3, 1, 4, 2, 5].toSorted() // -\u003e [1, 2, 3, 4, 5]\n```\n\n* `toSpliced()` – создает новый массив, применяя операцию `splice()` к исходному массиву.\n\n```js\n// Начиная с индекса 1\n// удаляем 2 элемента\n// и вставляем элементы 10 и 20\n[1, 2, 3, 4, 5].toSpliced(1, 2, 10, 20) // -\u003e [1, 10, 20, 4, 5]\n```\n\n## Встроенные объекты\n\nВ JavaScript все на самом деле является объектом или связано с объектом. Даже примитивные типы данных (числа, строки, логические значения, ...) наследуют свойства и методы от своих соответствующих глобальных объектов – Number, String и Boolean, а те в свою очередь являются унаследованными объектами глобального объекта, который так и называется Object.\n\n### Глобальный объект\n\n_Глобальный объект_ (Global Object) в JavaScript представляет собой специальный объект, доступный в любой точке кода и содержащий набор встроенных свойств и методов.\n\n_Глобальный объект_ также содержит ряд других встроенных объектов, таких как Object, Array, Date и Math, которые представляют собой конструкторы объектов и предоставляют различные методы для работы с соответствующими объектами.\n\nВажно отметить, что в браузерной среде глобальный объект `window` представляет собой глобальный объект JavaScript, который содержит все встроенные свойства и методы, а также предоставляет доступ к DOM (Document Object Model) и BOM (Browser Object Model).\n\n#### Глобальные свойства\n\n| Свойство | Определение |\n|:-----------:|-------------------------------------------------------------------------------|\n| `±Infinity` | больше/меньше чем любое положительное/отрицательное число включая самого себя |\n| `NaN` | тоже что и `Number.NaN`. Значение NaN не равно самому себе, т.е. `NaN != NaN` |\n| `undefined` | неопределенное значение |\n\n#### Глобальные методы\n\n| Метод | Описание |\n|:--------------:|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `alert()` | выводит модальное окно с сообщением |\n| `isFinite()` | проверяет, является ли аргумент конечным числом. Возвращает `false`, если аргумент является `NaN`, `Infinity` или `-Infinity` |\n| `isNaN()` | является ли аргумент значением `NaN`. Метод пытается преобразовать переданный параметр в число и если это удается, то возвращается `true` |\n| `parseInt()` | преобразует аргумент в целое число. Также можно передать вторым параметром основание для преобразования в систему счисления. Если в преобразуемом значении (первом параметре) встретится число или буква не входящая в диапазон системы счисления, то возвращается преобразованное значение полученное на данный момент (по умолчанию преобразует в 10-ую с.с.) |\n| `parseFloat()` | преобразует аргумент в число, но допускает одно вхождение точки |\n| `prompt()` | выводит окно для ввода пользовательского текста. Используется когда необходим ввод каких-нибудь данных от пользователя |\n| `encodeURI()` | кодирует URI, заменяя каждое вхождение определенных символов на escape-последовательности, представляющие символ в кодировке UTF-8 |\n| `decodeURI()` | декодирует закодированную методом `encodeURI()` строку |\n| `eval()` | переданный параметр рассматривается как код на JavaScript |\n\n#### Примеры использования\n\n```js\nisNaN(0) // -\u003e false\nisFinite(Math.sqrt(-1)) // -\u003e false\n\n// Преобразование строки в число\nconst distance = '95.5km'\nparseInt(distance) // -\u003e 95\nparseFloat(distance) // -\u003e 95.5\nparseFloat('$9000') // -\u003e NaN\nparseInt('ff', 16) // -\u003e 255\nconst digits = 255\ndigits.toString(16) // -\u003e 'ff', не имзеняет исходное значение,\n// а возвращает новое в виде строки\n\n// prompt всегда возвращает значение типа String\nconst myPrompt = prompt('Подсказка', 'значение') \n\n// encodeURI\nconst uri = encodeURI('http://example.com/phones?item=Apple%20iPhone')\n// Декодирование закодированных методом encodeURI() строки\ndecodeURI(uri)\n\n// eval переданный параметр рассматривает как код на JavaScript\neval('alert(\"Hello\")')\n```\n\n### Number\n\n#### Свойства Number\n\nУ объекта _Number_ есть статические свойства (константы):\n\n| Свойство | Определение |\n|:------------------------:|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `Number.MAX_VALUE` | возвращает наибольшее число, которое может быть использовано в JavaScript. Зависит от машины которая в данный момент исполняет скрипт. Примерно равно 1.7976931348623157e+308 |\n| `Number.MIN_VALUE` | обратное `Number.MAX_VALUE`. Примерно равно 5E-324 |\n| `Number.POSITIVE_INFINITY` | возвращает `Infinity` (+бесконечность). Значение большее любого положительного числа |\n| `Number.NEGATIVE_INFINITY` | возвращает `-Infinity` (-бесконечность). Значение, которое меньше любого отрицательного числа |\n| `Number.NaN` | особое значение Not a Number, которое сообщает что результатом арифметического выражения является не число |\n\n#### Методы Number\n\nМетоды объекта _Number_ возвращают строку, содержащее новое число, при этом не изменяют исходное значение.\n\n| Метод | Описание |\n|:----------------------:|----------------------------------------------------------------|\n| `Number.toFixed()` | округляет число на длину переданного параметра _после запятой_ |\n| `Number.toExponential()` | экспоненциальное представление того же числа |\n| `Number.toPrecision()` | округляет число на длину переданного параметра |\n| `Number.toString()` | преобразования числа в строку |\n\nМетод `toString()` объекта `Number` перегружен от глобального метода `toString()` и может принимать параметр (число или строку значением от 2 до 36), который будет использован как основание для преобразования в переданную параметром систему счисления.\n\n```js\nconst digits = 12.3456789\ndigits.toFixed(3) // -\u003e 12.346\ndigits.toExponential(5) // -\u003e 1.23457e+1\ndigits.toPrecision(5) // -\u003e 12.346\n\nconst numbers = 255\nnumbers.toString(16) // -\u003e ff (255 в 16-ричной системе счисления)\n```\n\n### String\n\n#### Свойства String\n\n_length_ – длина строки на единицу превосходящее максимальный индекс строки. Свойство `length` у строк доступно только для чтения и недоступно для записи, как например, свойство `length` типа Array.\n\n```js\n'Строка длиной 25 символов'.length; // -\u003e 25\n```\n\n#### Методы String\n\nВсе методы объекта _String_ не изменяют исходную строку, а возвращают новую. Отсчет позиции начинается с нуля. Если аргумент отрицателен (и метод принимает отрицательные значения), то отсчет начинается с конца и с единицы.\n\n| Метод |Описание|\n|:------------------:|---|\n| `concat()` |возвращает новую конкатенированную строку не изменяя исходную|\n| `toLowerCase()` |переводит строку в нижний регистр|\n| `toUpperCase()` |переводит строку в верхний регистр|\n| `charAt()` |возвращает символ указанной позиции. Отсчет позиции начинается с нуля|\n| `charCodeAt()` |возвращает число, соответствующее позиции в таблице кодировки Unicode|\n| `fromCharCodeAt()` |возвращает символ, соответсвующий указанной позиции в таблице кодировки Unicode. Статический метод, обращение к нему происходит через сам объект `String.fromCharCodeAt()`|\n| `slice()` |возвращает часть строки. Отсчет позиции второго аргумента начинается с начала строки, если аргумент отрицательный, то отсчет начинается с единицы от конца строки|\n| `substring()` |возвращает подстроку строки. Если параметр меньше нуля, то он считается как нуль, т.е. метод `substring()` отрицательных значений не принимает. Отсчет позиции второго аргумента начинается с начала строки, если второй аргумент оказывается меньше первого аргумента, то значения параметров меняются местами|\n| `substr()` |возвращает подстроку строки (метод не описан в стандарте языка). Отсчет второго аргумента начинается с позиции первого аргумента. Если второй аргумент меньше нуля, то он считается как нуль, т.е. метод не принимает отрицательных значений|\n| `indexOf()` |находит и возвращает позицию первого вхождения подстроки. Если найти не удается, то возвращает `-1`. Второй параметр (если передается) указывает с какой позиции начинать поиск|\n| `lastIndexOf()` |находит и возвращает позицию первого вхождения подстроки с конца. Второй параметр (если передается) ограничивает поиск от начала до указанной позиции. Возвращает `-1` если искомая подстрока не найдена|\n| `replace()` |заменяет совпадение(-ия) регулярного выражения или подстроки в строке. Метод применяется к строке к которой нужно произвести замену. Первый параметр — искомая подстрока или регулярное выражение, второй параметр — строка на которую будут заменены все совпадения|\n| `split()` |разбивает строку на массив по указанной подстроке или регулярному выражению. Если в качестве разделителя передать пустую строку, то возвратится массив из элементов строки (символов). Второй параметр — максимальное количество кусков, на которые может быть разбита строка|\n| `search()` |возвращает позицию первого вхождения совпадающее с регулярным выражением или с подстрокой. Если совпадений нет, то возвращает `-1`|\n| `match()` |возвращает массив, содержащий результаты поиска. Если в регулярном выражении установлен флаг `g`, метод возвращает массив всех соответствий, присутствующих в строке. Например: `\"1 плюс 2 равно 3\".match(/\\d+/g)` вернет `[\"1\", \"2\", \"3\"]`. Возвращает `null` если совпадений нет|\n\n#### Примеры String\n\nКонкатенация\n\n```js\nconst str1 = 'строка '\n\nstr1.concat('была', ' конкатенирована')\n// -\u003e \"строка была конкатенирована\"\n\nString.concat('Метод ', 'concat() ', 'объекта ', 'String')\n// -\u003e \"Метод concat() объекта String\"\n```\n\nРегистр символов\n\n```js\nconst str2 = 'эта в нижнем регистре, А ЭТО В ВЕРХНЕМ'\n\nstr2.toLowerCase()\n// -\u003e \"это в нижнем регистре, а это в верхнем\"\n\nstr2.toUpperCase()\n// -\u003e \"ЭТО В НИЖНЕМ РЕГИСТРЕ, А ЭТО В ВЕРХНЕМ\"\n```\n\nПолучение символа из строки\n\n```js\nconst str3 = 'Получение символа из строки'\n\nstr3.charAt(12) // -\u003e \"м\"\n// если указанная позиция превышает длину строки,\n// то возвратится пустая строка\nstr3.charAt(120) // -\u003e \"\" (пустая строка)\n\nstr3.charCodeAt(12) // -\u003e 1084\n// если указанная позиция превышает длину строки,\n// то возвратится NaN\nstr3.charCodeAt(120) // -\u003e NaN\n\nString.fromCharCode(83, 99, 114, 105, 112, 116) // -\u003e \"Script\"\n```\n\nПолучение части строки\n\n```js\nconst str4 = 'строка для примера'\n\n// без параметров\nstr4.slice() // -\u003e \"строка для примера\"\nstr4.substring() // -\u003e \"строка для примера\"\nstr4.substr() // -\u003e \"строка для примера\"\n\n// с одним положительным параметром\nstr4.slice(11) // -\u003e \"примера\"\nstr4.substring(11) // -\u003e \"примера\"\nstr4.substr(11) // -\u003e \"примера\"\n\n// с одним отрицательным параметром\nstr4.slice(-7) // -\u003e \"примера\"\nstr4.substring(-7) // -\u003e \"строка для примера\"\nstr4.substr(-7) // -\u003e \"примера\"\n\n// первый параметр \u003c второго параметра\nstr4.slice(7, 10) // -\u003e \"для\"\nstr4.substring(7, 10) // -\u003e \"для\"\n// отсчет 2-го параметра substr() начинается с начала строки\nstr4.substr(7, 10) // -\u003e \"для пример\"\n\n// первый параметр \u003e второго параметра\nstr4.slice(10, 7) // -\u003e \"\"\n// substring() поменяет местами аргументы, все равно что 7, 10\nstr4.substring(10, 7) // -\u003e \"для\"\nstr4.substr(10, 7) // -\u003e \" пример\"\n\n// варианты с положительными и отрицательными параметрами\nstr4.slice(7, -8) // -\u003e \"для\"\nstr4.slice(-11, 10) // -\u003e \"для\"\nstr4.slice(-11, -8) // -\u003e \"для\"\n// substring() поменяет местами аргументы\nstr4.substring(6, -5) // -\u003e \"строка\", все равно что 0, 6\nstr4.substring(-10, 6) // -\u003e \"строка\", все равно что 0, 6\nstr4.substring(-10, -6) // -\u003e \"\", все рано что 0, 0\nstr4.substr(7, -8) // -\u003e \"\", все равно что 7, 0\nstr4.substr(-11, 3) // -\u003e \"для\"\nstr4.substr(-11, -8) // -\u003e \"\", все равно что -11, 0\n```\n\nПоиск подстроки в строке\n\n```js\nconst str5 = 'это — просто пример'\n\nstr5.indexOf('пр') // -\u003e 6\n// поиск подстроки начнется с указанной позиции – 7\nstr5.indexOf('пр', 7) // -\u003e 13\n// если указанный набор символов не найден, то возвратится -1\nstr5.indexOf('г') // -\u003e -1\n\nstr5.lastIndexOf('пр') // -\u003e 13\n// второй аргумент ограничивает поиск от начала до указанной позиции\nstr5.lastIndexOf('пр', 7) // -\u003e 6\n```\n\nЗамена в строке\n\n```js\nconst str6 = 'Это строка для замены некой подстроки'\n\nstr6.replace('строк', 'линейк')\n// -\u003e \"Это линейка для замены некой подстроки\"\n\nstr6.replace(/строк/g, 'линейк')\n// -\u003e \"Это линейка для замены некой подлинейки\"\n\nconst str7 = 'Моя кошка любит есть рыбу и молоко'\nconst str8 = str7.replace(\n /кошка|рыбу/g,\n match =\u003e match === 'кошка' ? 'собака' : 'мясо'\n)\nstr8 // -\u003e \"Моя собака любит есть мясо и молоко\"\n```\n\nРазбиение строки на массив\n\n```js\nconst str9 = 'Эта строка будет разбита на мелкие кусочки'\nstr9.split(' ')\n// -\u003e [\"Эта\", \"строка\", \"будет\", \"разбита\", \"на\", \"мелкие\", \"кусочки\"]\n\n// второй аргумент указывает максимальное количество кусков\n// на которые может быть разбита строка\nstr9.split('', 10)\n// -\u003e [\"Э\", \"т\", \"а\", \" \", \"с\", \"т\", \"р\", \"о\", \"к\", \"а\"]\n```\n\nПоиск в строке по регулярному выражению\n\n```js\nconst mail = 'example@gmail.com'\nconst re = 'protonmail|gmail|hotmail|yahoo|live'\n\nmail.search(re) // -\u003e 8\n\n// Возврат совпадений с шаблоном регулярного выражения\n'ABCDEF'.match(/(ABC)(DE)(F)/) // -\u003e [\"ABCDEF, ABC, DE, F\"]\n```\n\n### Math\n\nВ отличие от других глобальных объектов, _Math_ не является конструктором. Все свойства и методы _Math_ статичны.\n\n#### Свойства Math\n\n| Свойство | Определение |\n|:-------------:|-----------------------------------------------------------------------------------------|\n| `Math.E` | константа Эйлера, основание натурального логарифма, приблизительно 2.718 |\n| `Math.LN2` | натуральный логарифм 2, приблизительно 0.693 |\n| `Math.LOG2E` | логарифм E по основанию 2, приблизительно 1.442 |\n| `Math.LOG10E` | логарифм E по основанию 10, приблизительно 0.434 |\n| `Math.PI` | отношение длины окружности к ее диаметру, приблизительно 3.14159 |\n| `Math.SQRT12` | квадратный корень из 1/2; иначе говоря, 1 поделить на корень из 2, приблизительно 0.707 |\n| `Math.SQRT2` | квадратный корень из 2, приблизительно 1.414 |\n| `Math.LN10` | натуральный логарифм 10, приблизительно 2.302 |\n\n#### Методы Math\n\n| Свойство | Определение |\n|:---------------:|-----------------------------------------------------------------------------------------------------|\n| `Math.abs()` | возвращает абсолютное значение числа |\n| `Math.acos()` | возвращает арккосинус (в радианах) от числа |\n| `Math.asin()` | возвращает арксинус (в радианах) от числа |\n| `Math.atan()` | возвращает арктангенс (в радианах) от числа |\n| `Math.atan2()` | возвращает арктангенс частного аргументов |\n| `Math.ceil()` | округляет в большую сторону |\n| `Math.floor()` | округляет в меньшую сторону |\n| `Math.cos()` | вычисляет косинус числа |\n| `Math.sin()` | вычисляет синус числа |\n| `Math.exp()` | возвращает `Ex`, где `x` - аргумент, а `E` - основание натуральных логарифмов |\n| `Math.log()` | возвращает натуральный (по основанию `E`) логарифм числа |\n| `Math.pow()` | возводит число в степень, возвращает `base exponent` |\n| `Math.max()` | возвращает наибольший из списка аргументов |\n| `Math.min()` | возвращает наименьший из списка аргументов |\n| `Math.random()` | возвращает псевдослучайное число в интервале `[0, 1]`, т.е. между 0 (включительно) и 1 (не включая) |\n| `Math.round()` | возвращает значение, округленное до ближайшего целого числа |\n| `Math.sqrt()` | возвращает квадратный корень из числа |\n| `Math.tan()` | возвращает тангенс числа |\n\n### Date\n\nОбъект _Date_ – содержит методы для работы с датой и временем.\n\n* Время в JavaScript измеряется в миллисекундах, начиная от полуночи 01 января 1970 года GMT+0. День содержит 86,400,000 миллисекунд.\n\nДата в JavaScript поддерживается в двух форматах:\n* _Greenwich Mean Time (GMT)_\n\t* Дата и время указывается в соответствии с местным часовым поясом;\n\t* Указывается смещение относительно Гринвичского меридиана;\n\t* Смещение зависит от переходов на летнее и зимнее время.\n* _Universal Time Coordinated (UTC)_\n\t* Дата и время в любой точке планеты одинаково;\n\t* Точка отсчета совпадает с точностью до долей секунды с точкой отсчета GMT;\n\t* Никаких переходов на летнее и зимнее время в UTC нет.\n\n#### Создание даты\n\n```js\nconst now = new Date() // Местное время в момент иницилизации\nconst newDate = new Date(dateVal)\n```\n\nЕсли параметр `dateVal` является числовым, то он интерпретируется как количество миллисекунд от `1-Янв-1970 00:00`. Если строкой, то она разбирается и интерпретируется как дата по стандартным правилам `Date.parse`.\n\nКонструктору объекта _Date_ можно передать конкретное время в виде (год, месяц с нуля, день, часы, минуты, секунды, миллисекунды).\n\n```js\nconst date = new Date(year, month, date[, hours, minutes, seconds, ms])\nconst date1 = new Date('Jan 01 2024 01:00:00')\nconst date2 = new Date(1682995487612) // Временая метка\nconst date3 = new Date(2025, 5) // обязательные параметры: год и номер месяца\nconst date4 = new Date(2025, 5, 21)\nconst date5 = new Date(2024, 12, 120) // -\u003e 30 апреля 2025\nconst date6 = new Date(2025, -1) // -\u003e декабрь, 2014\n```\n\n#### Методы Date\n\n| Метод | Описание |\n|:------------------------:|---------------------------------------------------------------------------------------------------------------------------------------------|\n| `Date.UTC()` | Вычисляет количество миллисекунд, истекших с полуночи 1 января 1970 года до указанной даты, используя время в диапазоне формата UTC | \n| `Date.parse()` | Анализирует строку, содержащую дату, и возвращает количество миллисекунд, прошедших с полуночи 1 января 1970 г. UTC до указанной даты | \n| `toLocaleString()` | Возвращает дату, преобразованную в строковую величину в соответствии с текущими локальными установками | \n| `getDate()` | Возвращает день месяца для указанной даты (согласно местному времени) | \n| `getDay(0-6)` | где, 0 — воскресенье. Возвращает день недели для указанной даты (согласно местному времени) |\n| `getFullYear()` | Возвращает год для указанной даты (согласно местному времени) | \n| `getMilliseconds()` | Возвращает количество миллисекунд для указанной даты (согласно местному времени) | \n| `getMinutes()` | Возвращает значение минут для указанной даты (согласно местному времени) | \n| `getMonth()` | Возвращает месяц для указанной даты (согласно местному времени) | \n| `getSeconds()` | Возвращает значение секунд для указанной даты (согласно местному времени) | \n| `getTime()` | Возвращает численное значение для указанной даты (согласно универсальному времени) | \n| `getTimezoneOffset()` | Возвращает смещение универсального времени относительно местного в минутах | \n| `getUTCDate()` | Возвращает день месяца для указанной даты (согласно универсальному времени) | \n| `getUTCDay()` | Возвращает день недели для указанной даты (согласно универсальному времени) | \n| `getUTCHours()` | Возвращает час для указанной даты (согласно универсальному времени) | \n| `getHours()` | Возвращает час для указанной даты (согласно местному времени) | \n| `getUTCMilliseconds()` | Возвращает количество миллисекунд для указанной даты (согласно универсальному времени) | \n| `getUTCMonth()` | Возвращает месяц для указанной даты (согласно универсальному времени) | \n| `getUTCMinutes()` | Возвращает значение минут для указанной даты (согласно универсальному времени) | \n| `getUTCSeconds()` | Возвращает значение секунд для указанной даты (согласно универсальному времени) | \n| `getYear()` | Возвращает сокращённое значение года для указанной даты (согласно местному времени) | \n| `setSeconds(0-59)` | Устанавливает для указанной даты значение секунд равным указанному (согласно местному времени) | \n| `setFullYear()` | Устанавливает для указанной даты год равным указанному значению (согласно местному времени) | \n| `setMilliseconds(0-999)` | Устанавливает для указанной даты значение миллисекунд равным указанному (согласно местному времени) | \n| `setTime()` | Устанавливает численное значение для указанной даты в миллисекундах, прошедших после полночи 1 января 1970 года (по универсальному времени) | \n| `setYear()` | Устанавливает для указанной даты год равным указанному значению (согласно местному времени) | \n| `setDate(1-31)` | Устанавливает день месяца равным указанному значению (согласно местному времени) | \n| `setUTCDate()` | Устанавливает день месяца равным указанному значению (согласно местному времени) | \n| `setUTCHours()` | Устанавливает для указанной даты час равным указанному значению (согласно универсальному времени) | \n| `setHours()` | Устанавливает для указанной даты час равным указанному значению (согласно местному времени) | \n| `setUTCMilliseconds()` | Устанавливает для указанной даты значение миллисекунд равным указанному (согласно местному времени) | \n| `setUTCMinutes()` | Устанавливает для указанной даты значение минут равным указанному (согласно универсальному времени) | \n| `setMinutes(0-59)` | Устанавливает для указанной даты значение минут равным указанному (согласно местному времени) | \n| `setMonth(0-11)` | Устанавливает для указанной даты месяц равным указанному значению (согласно местному времени) | \n| `setUTCSeconds()` | Устанавливает для указанной даты значение секунд равным указанному (согласно местному времени) | \n| `setUTCFullYear()` | Устанавливает для указанной даты год равным указанному значению (согласно универсальному времени) | \n| `setUTCMonth()` | Устанавливает для указанной даты месяц равным указанному значению (согласно местному времени) | \n| `toGMTString()` | Преобразовывает дату в строку (согласно времени по Гринвичу) | \n| `toLocaleFormat()` | Преобразовывает дату в строку согласно текущим языковым настройкам и указанному формату | \n| `toLocaleTimeString()` | Возвращает информацию о дате в виде текстовой строки согласно языковым настройкам системы | \n| `toLocaleDateString()` | Возвращает информацию о дате в виде текстовой строки согласно языковым настройкам системы | \n| `toString()` | Возвращает строку, представляющую текущий объект Date. | \n| `toTimeString()` | Возвращает информацию о дате в виде текстовой строки в американском формате записи даты | \n| `toDateString()` | Возвращает информацию о дате в виде текстовой строки в американском формате записи даты | \n| `toUTCString()` | Преобразовывает дату в строку (согласно универсальному времени) | \n| `valueOf()` | Возвращает примитивное значение объекта Date | \n| `getUTCFullYear()` | Возвращает год для указанной даты (согласно универсальному времени) |\n\n### Регулярные выражения\n\n#### Создание RegExp\n\n```js\n// Полная форма\nconst pattern1 = new RegExp(pattern [, flags])\n\n// Сокращенная форма (литеральный формат)\nconst pattern2 = /pattern/flags\n\n// Динамическое создание регулярного выражения\nconst emails = ['gmail', 'yahoo', 'hotmail', 'live', 'outlook']\nconst re = new RegExp(emails.join('|', 'i'))\n// -\u003e /gmail|yahoo|hotmail|live|rambler/i\n```\n\nгде,\n- `pattern` – шаблон регулярного выражения;\n- `flags` – способ поиска по шаблону, порядок указания флагов не имеет значения, может принимать следующие значения:\n\n| Флаг | Значение |\n|:----:|--------------------------------------------------------------------|\n| `g` | глобальный поиск (обрабатываются все совпадения с шаблоном поиска) |\n| `i` | поиск без учета регистра |\n| `m` | многострочный поиск |\n\n#### Специальные последовательности\n\n| Последовательность | Описание |\n|:------------------:|------------------------------------------------------------------------------------------------|\n| `\\'` | одинарные кавычки (апостроф) |\n| `\\\"` | двойные кавычки |\n| `\\\\` | обратный слеш (`\\u005C`) |\n| `\\b` | backspace |\n| `\\f` | form feed |\n| `\\n` | переход на новую строку (`\\u000A`) |\n| `\\r` | возврат каретки (`\\u000D`) |\n| `\\t` | табуляция (`\\u0009`) |\n| `\\v` | вертикальная табуляция |\n| `\\0` | символ NULL (`\\u0000`) |\n| `\\ddd` | octal sequence (3 digits: ddd) |\n| `\\xdd` | hexadecimal sequence (2 digits: dd). Символ Latin-1, заданный двумя шестнадцатеричными цифрами |\n| `\\u{X...X}` | символ Unicode с кодом от `X...X` (от 1 до 6 шестнадцатеричных цифр) |\n\n#### Позиции соответствия\n\n| Знак | Значение |\n|:----:|--------------------------------------------------------------------------------------------------------------------|\n| `^` | соответствует началу строки, т.е. выражение `/^a/` найдет соответствие если строка начинается строго с символа `а` |\n| `$` | соответствует концу строки, т.е. выражение `/b$/` найдет соответствия только если строка заканчивается на `b` |\n| `\\b` | позиция между символом ASCII `[a-zA-Z0-9_]` и не символом ASCII `[^a-zA-Z0-9_]` (граница слова) |\n| `\\B` | позиция между двумя символами ASCII (не граница слова) |\n\n#### Операторы регулярного выражения\n\n| Оператор | Значение |\n|:--------:|---------------------------------------------------------------------------------------------------------------|\n| `\\` | обратный слеш, экранирует спецсимволы `*`, `+`, `?`, `❘`, `(`, `)`, `[`, `{`, `}`, `.`, `$` и `\\`. |\n| `.` | любой символ, кроме перевода строки (`\\n`) |\n| `[]` | перечень символов перечисленных в наборе |\n| `-` | указывается в диапазоне символов |\n| `[a-e]` | диапазон символов, тоже что и `[abcde]` |\n| `[^a-e]` | перечень символов, не входящие в набор, тоже что и `[^abcde]` |\n| `()` | выделение групп регулярных выражений с присвоением порядкового номера для извлечения подстроки |\n| `(?:x)` | захватывает соответствующее выражение без присваивания порядкового номера |\n| `x(?=y)` | соответствует `x`, только если за ним следует `y` |\n| `x(?!y)` | соответствует `x`, только если за ним НЕ следует `y` |\n| `❘` | оператор ИЛИ |\n| `{}` | находит повторения (примеры ниже) |\n| `{n}` | шаблон повторяется точно `n` раз. Например, `/a{3}/` найдет ровно три символа `а` идущих один за другим |\n| `{n,}` | шаблон повторяется не менее `n` раз. Например, `/a{3,}/` найдет 3 или более идущих один за другим символов `а` |\n| `{n,m}` | шаблон повторяется не менее `n`, но и не более `m` раз. Например, `/a{5,10}/` ищет от 5 до 10 символов `а` |\n| `\\b` | соответствует границе слова |\n| `\\B` | соответствует любому месту, где нет границы слова |\n| `\\d` | любая цифра `[0-9]` |\n| `\\D` | противоположное `\\d` `[^0-9]` |\n| `\\s` | любой символ-разделитель Unicode (`\\r`, `\\n`, `\\t`, `\\v`, пробел, ...) |\n| `\\S` | противоположное `\\s` |\n| `\\w` | любой символ ASCII `[a-zA-Z0-9_]` |\n| `\\W` | противоположное `\\w` (`[^a-zA-Z0-9_]`) |\n\n#### Квантификаторы\n\n| Вид | Значение |\n|:---:|------------------------------------------------------------------|\n| `*` | эквивалентно `{0,}` (может не быть, а может сколько угодно быть) |\n| `+` | эквивалентно `{1,}` (минимум одно вхождение, но должно быть) |\n| `?` | эквивалентно `{0,1}` (может быть, а может не быть) |\n\n#### Методы регулярного выражения\n\n| Метод | Значение |\n|:--------:|---------------------------------------------------------------------------------------------------------------------------------------------------|\n| `test()` | обратно методу `search()` проверяет совпадение регулярного выражения в передаваемой строке. Возвращает `true` если есть совпадения, иначе `false` |\n| `exec()` | возвращает массив с результатами поиска по шаблону, если совпадений нет, то возвращается `null` |\n\n#### Примеры RegEx\n\nЭкранирование и перечисления\n\n```js\n'folder/file.js'.search(/\\//) // -\u003e 6, экранирование прямого слеша\n/[abcde]/.test('protocol') // -\u003e true, найден символ \"c\" указанный в наборе\n'ecmascript'.search(/[^a-e]/) // -\u003e 2, найден символ \"m\", первый символ не входящий в набор\n```\n\nПовторения `{n}`, `{n,m}`, `{n,}`\n\n```js\nconst str = `JavaScript – объектно-ориентированный язык.\nНо используемое в языке прототипирование обуславливает\nотличия в работе с объектами по сравнению с традиционными\nкласс-ориентированнннными языками`\n\nstr.search(/н{1}/) // -\u003e 19, позиция символа \"н\", который встречается в 1-ый раз\nstr.search(/н{2,5}/) // -\u003e 33, позиция символа \"н\", который впервые встречатся после 2 до 5 раз\nstr.search(/н{5,}/) // -\u003e 174, позиция символа \"н\", который встречается после 5 раз и более раза\n/js{3}/.test('jsjsjs') // -\u003e false, на самом деле будет искаться вхождение подстроки \"jsss\"\n```\n\nПозиции соответствия\n\nСпецсимвол `^` в начале и спецсимвол `$` в конце, говорят что строка должна строго начинаться и заканчиваться в соответствии с шаблоном регулярного выражения.\n\n```js\n/^\\d\\d?-\\d\\d?-\\d{4}$/\n/\\bJava\\b/.test('Java Script') // -\u003e true\n/\\BScript\\b/.test('JavaScript') // -\u003e true\n```\n\nФлаги\n\n```js\nconst str = 'JavaScript\\nis\\nthe\\nprogramming\\nlanguage\\nof\\nthe\\nWeb'\nstr.search(/s/i) // -\u003e 4, ищется как \"s\", так и \"S\"\nstr.search(/^language/m) // -\u003e 30, многострочный поиск\n```\n\nГруппировка и ссылки\n\n```js\n// Внутренние ссылки (ссылка в шаблоне регулярного выражения)\nconst str1 = 'JavaScript is using the \"Unicode\\' character set'\nconst str2 = 'JavaScript is using the \"Unicode\\\" character set'\nstr1.search(/[\"'][^\"']*[\"']/) // -\u003e 24\nstr1.search(/([\"'])[^\"']*\\1/) // -\u003e -1\nstr2.search(/([\"'])[^\"']*\\1/) // -\u003e 24\n\n// Внешние ссылки (ссылка вне шаблона регулярного выражения)\n'Script Java'.replace(/(\\w+) (\\w+$)/, '$2$1') // -\u003e \"JavaScript\"\nconst beatles = `\n Lennon, John\n McCartney, Paul\n Harrison, George\n Starr, Ringo`\nbeatles.replace(/([\\w ]+), ([\\w ]+)/g, '$2 $1')\n// -\u003e \"John Lennon\\nPaul McCartney\\nGeorge Harrison\\nRingo Starr\"\n \n// Возврат совпадений с шаблоном регулярного выражения\n/(ABC)(DE)(F)/.exec('ABCDEF') // -\u003e [\"ABCDEF, ABC, DE, F\"]\n```\n\n### Error\n\nОбъект _Error_ служит для генерации ошибок возникающих в ходе выполнения JavaScript кода. Имеет следующие подклассы _Error_:\n* _EvalError_ – ошибка при выполнении `eval()`;\n* _RangeError_ – эта ошибка происходит, когда переданный параметр лежит за границами допустимого диапазона;\n* _ReferenceError_ – ошибка при разыменовании неверной ссылки;\n* _SyntaxError_ – синтаксическая ошибка, которая произошла при разборе кода, переданного `eval()`;\n* _TypeError_ – переменная или параметр неправильного типа;\n* _URIError_ – ошибка происходит, когда `encodeURI()` или `decodeURI()` вызваны с неправильными параметрами.\n\nЧтобы отловить ошибку применяется конструкция [try..catch..finally](#trycatchfinally).\n\n```js\ntry {\n const x = 10\n console.log(y)\n} catch(e) {\n console.error(e.name) // -\u003e ReferenceError\n console.error(e.message) // -\u003e y is not defined\n} finally {\n console.info('Содержимое конструкции finally выполнится всегда')\n}\n\nconsole.info('Эта инструкция также выполнится')\n```\n\n#### Инициирование исключения\n\nИспользуйте `throw` для генерации исключения, аналогично Java/PHP и другим языкам. В отличие от них, JavaScript позволяет бросать исключение любого формата:\n\n```js\ntry {\n const x = 10\n const y = 0\n\n if (y == 0) {\n throw RangeError('деление на ноль')\n }\n\n const z = x / y\n} catch(e) {\n\tconsole.error(e.name) // -\u003e RangeError\n\tconsole.error(e.message) // -\u003e деление на ноль\n}\n```\n\nЕще один вариант использование конструкции `throw`.\n\n```js\ntry {\n throw {\n name: 403,\n message: 'Access denied'\n }\n} catch(e) {\n console.error(e.name) // -\u003e 403\n console.error(e.message) // -\u003e Access denied\n}\n```\n\n## Объектно-ориентированное программирование\n\nJavaScript, хоть и не является \"классическим\" объектно-ориентированным языком программирования (ООП), поддержка принципов ООП в нём обеспечена на основе прототипного наследования.\n\n### Принципы ООП\n\n1. **Инкапсуляция** – объединение данных и методов в единую структуру, скрывая внутреннюю реализацию и предоставляя интерфейс для взаимодействия;\n2. **Наследование** – создание новых классов (дочерних) на основе существующих (родительских), наследуя их свойства и методы;\n3. **Полиморфизм** – способность объектов разных классов с одинаковым интерфейсом иметь различную реализацию, т.е. реагировать на один и тот же вызов метода по-разному. Это может быть достигнуто через перегрузку методов, переопределение методов и использование абстрактных классов и интерфейсов;\n4. **Классы** – шаблоны для создания объектов с определенными свойствами и методами;\n5. **Объекты и сообщения** – основные строительные блоки, представляющие сущности с данными (свойства) и поведением (методы). ООП сосредотачивается на обмене сообщениями между объектами, что способствует модульности и повышает уровень абстракции в программировании.\n\nВ общем и целом, ООП это подход разработки, где программа рассматривается как набор объектов, взаимодействующих друг с другом.\n\n### Функция-конструктор\n\n_Функции-конструкторы_ могут быть использованы для создания объектов с определёнными методами и свойствами. Имена таких функций принято писать с большой буквы.\n\n* Ключевое слово `this` в пределах функции-конструктора ссылается на создаваемый объект;\n* Оператор `new` создаёт новый объект путём инициализации функции-конструктора;\n* Все типы данных в JavaScript, кроме тривиальных типов (`null`, `undefined`) имеют собственные классы-конструкторы.\n\n```js\nfunction User(name) {\n this.name = name\n this.age = null\n this.greetings = function(word) {\n if (typeof word == 'string') {\n console.info(`Hello, ${word} from ${this.name}`)\n }\n return false\n }\n}\n\n// Иницилизация объектов от конструктора \"User\"\nconst user1 = new User('John')\nconst user2 = new User('Jane')\n\nuser1.age = 30\nuser1.greetings('Alice') // -\u003e \"Hello, Alice from John\"\nuser2.greetings('Bob') // -\u003e \"Hello, Bob from Jane\"\n```\n\nСвойство _constructor_ позволяет узнать какой конструктор был использован при создании какой-либо переменной.\n\n* `ИмяОбъекта.constructor` – возвращает конструктор объекта, т.е. функцию-конструктор от которой был создан объект;\n* Оператор `instanceof` проверяет принадлежность объекта к цепочке прототипов другого объекта. Другими словами, он проверяет, является ли объект экземпляром определенного класса или его потомков. Оператор не работает с примитивами.\n\n```js\nlet x = 5\nx.constructor; // -\u003e function Number(){[native code]}\nuser1.constructor // -\u003e код функции-конструктора User\n\n// Оператор instanceof\nx instanceof Number // -\u003e false, x здесь примитив\nx = new Number(5)\nx instanceof Number // -\u003e true, x здесь объект конструктора Number\nx instanceof Object // -\u003e true, все объекты наследуются от Object\n```\n\n### Прототипы\n\nВ JavaScript другой механизм наследования в отличие от других класс-ориентированных языков программирования. В основе ООП в JavaScript лежит _прототипное наследование_, когда каждый объект имеет свойство `prototype`, которое в свою очередь ссылается на другой объект (прототип). Новый объект наследует свойства и методы своего прототипа.\n\n_Прототипное программирование_ – стиль объектно-ориентированного программирования, при котором отсутствует понятие класса, а наследование производится путём клонирования существующего экземпляра объекта (прототипа).\n\nУ любой функции определено свойство `prototype` и вступает оно в действие при использовании этой функции с оператором `new`, то есть при использовании ее в качестве функции-конструктора. Это свойство ссылается на так называемый «объект-прототип» – виртуальный предок всех экземпляров этого класса-конструктора. С помощью данного свойства можно создать любое другое свойство или метод, который будет наследоваться всеми экземплярами этого класса-конструктора.\n\nТаким образом, создание свойств и методов с использованием `prototype` автоматически делает их видимыми даже для всех ранее созданных экземпляров.\n\nДобавление свойства к [вышеописанному](#функция-конструктор) прототипу `User`:\n\n```js\nUser.prototype.married = false\n```\n\nТеперь наследуемые от класса-конструктора `User` объекты `user1` и `user2` имеют свойство `married` со значением `false`.\n\nАльтернативный способ добавления свойств/методов в класс-конструктор через наследуемый от этого конструктора объект.\n\n```js\nuser1.constructor.prototype.info = function() {\n return `Name: ${this.name};\n Age: ${this.age};\n ${this.married ? 'Married: Yes' : 'Married: No'}`\n}\n```\n\n### Классы\n\n_Классы_ называют синтаксическим сахаром поверх прототипного наследования в JavaScript, делающий код более читаемым и похожим на другие ООП языки.\n\n```js\nclass Animal {\n constructor(species) {\n this.species = species\n }\n \n breathe() {\n console.log('The animal is breathes')\n }\n}\n\nclass Dog extends Animal {\n bark() {\n console.log('Woof! Woof!')\n }\n}\n\nconst Rex = new Dog('canids')\nRex.breathe() // -\u003e The animal is breathes\nRex.bark() // -\u003e Woof! Woof!\n```\n\n## BOM (Объектная модель браузера)\n\n_BOM (Browser Object Model)_ – объектная модель браузера, набор объектов предоставляющий JavaScript доступ к свойствам и методам браузера.\n\nОбъект `window` – глобальный объект, корневой узел в браузерной среде свойства и методы которого, являются узлами первого уровня. Фактически, глобальная переменная это свойство данного объекта.\n\n_DOM (Document Object Model)_ – объектная модель документа, представляет содержимое веб-страницы в виде иерархической структуры узлов, с которыми можно взаимодействовать.\n\n_DOM_ является частью _BOM_, поскольку `document` является дочерним объектом корневого объекта BOM — `window`.\n\nСтандартные объекты JavaScript (Function, Object, Date, Math, String, Number, RegExp и т.д.) в браузерной среде также являются частью BOM и могут быть рассмотрены как дочерние узлы объекта `window`. Однако, по сравнению с _DOM_, эти объекты находятся на более низком уровне и не являются частью структуры веб-страницы.\n\nЕсли изобразить дочерние узлы _BOM_ в общей схеме браузерного окружения в виде древовидной структуры, то получится следующее:\n\n```text\nwindow\n│\n├── JavaScript\n│ ├── Object\n│ ├── Number\n│ ├── String\n│ ├── ...\n├── BOM\n│ ├── navigator\n│ │ ├── geolocation\n│ ├── location\n│ ├── history\n│ ├── screen\n├── DOM\n│ ├── document\n│ │ ├── html\n│ │ ├── head\n│ │ │ ├── title\n│ │ │ ├── meta\n│ │ │ ├── ...\n│ │ ├── body\n│ │ │ ├── header\n│ │ │ ├── main\n│ │ │ ├── ...\n├── XMLHttpRequest\n├── setTimeout\n├── setInterval \n└── ...\n```\n\n### Свойства и методы Window\n\nРабота с окнами и фреймами\n\n| Свойство/Метод | Значение |\n|:----------------:|--------------------------------------------------------|\n| `window.frames` | коллекция фреймов на текущей странице |\n| `window.parent` | ссылка на родительское окно текущего фрейма |\n| `window.opener` | ссылка на окно, которое открыло текущее окно или фрейм |\n| `window.open()` | открывает новое окно браузера или фрейм |\n| `window.close()` | закрывает текущее окно браузера |\n\nРабота с окном браузера\n\n| Свойства | Значение |\n|:--------------------------:|-------------------------------------------------------------------------------|\n| `innerWidth`/`innerHeight` | содержат текущую ширину и высоту окна браузера без учета панелей инструментов |\n| `outerWidth`/`outerHeight` | содержат текущую ширину и высоту окна браузера вместе с панелями инструментов |\n\nПоложение и размеры окна\n\n| Метод | Описание |\n|:----------------:|-----------------------------------------------------------------------------------------------------|\n| `moveTo(x, y)` | перемещает окно в абсолютную позицию на экране |\n| `resizeTo(x, y)` | устанавливает абсолютные размеры окна |\n| `scrollTo(x, y)` | выполняет смещение в указанную позицию координат |\n| `moveBy(x, y)` | перемещает окно на x пикселей по горизонтали и y пикселей по вертикали относительно текущей позиции |\n| `resizeBy(x, y)` | расширяет или сжимает окно на указанное аргументами количества пикселей |\n| `scrollBy(x, y)` | выполняет смещение на указанное количество пикселей |\n\nРабота с диалоговыми окнами\n\n| Метод | Значение |\n|:-----------:|----------------------------------------------------------------------------------------|\n| `alert()` | выводит модальное диалоговое окно с заданным текстом |\n| `prompt()` | выводит модальное диалоговое окно с текстовым полем для ввода пользовательского текста |\n| `confirm()` | выводит модальное диалоговое окно с двумя кнопками \"ОК\" и \"Отмена\" |\n\nРабота с таймерами\n\n| Метод | Значение |\n|:-----------------:|---------------------------------------------------------------------------------|\n| `setTimeout()` | вызывает функцию один раз через определенный промежуток времени |\n| `setInterval()` | вызывает функцию каждый раз через определенный промежуток времени |\n| `clearTimeout()` | отменяет запланированный вызов функции, установленный с помощью `setTimeout()` |\n| `clearInterval()` | отменяет запланированный вызов функции, установленный с помощью `setInterval()` |\n\nВспомогательные методы\n\n| Метод | Значение |\n|:--------------:|---------------------------------------------------|\n| `isNaN` | проверяет, является ли значение `NaN` (не числом) |\n| `isFinite()` | проверяет, является ли значение конечным числом |\n| `parseInt()` | преобразует строку в целое число |\n| `parseFloat()` | преобразует строку в число с плавающей точкой |\n\nРабота с событиями\n\n| Метод | Описание |\n|:-----------------------:|-----------------------------------------------------------------|\n| `addEventListener()` | регистрирует функцию обработчика событий на объекте Window |\n| `removeEventListener()` | удаляет зарегистрированный обработчик событий из объекта Window |\n| `dispatchEvent()` | инициирует событие определенного типа на объекте Window |\n\nЭто далеко не полный список всех свойств и методов объекта Window, полный список доступен в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Window).\n\n### Фреймы\n\nСвойство `window.frames` содержит коллекцию всех дочерних фреймов, загруженных в текущую страницу сайта, в том числе и вложенные фреймы в других фреймах.\n\nВнутри каждого фрейма находится собственный `window` с дочерними объектами также, как и в родительском окне. Доступ к фреймам из родительского окна будет иметь в случае только если эти фреймы имеют тот же домен и порт, что и родительское окно.\n\nПо соображениям безопасности действует политика _Same Origin Policy (Одинаковый источник)_, которая запрещает скриптам из одной страницы взаимодействовать со страницами, расположенными на других доменах или портах.\n\n#### Работа с окнами\n\n_Создание фреймов на странице_\n\n```html\n\u003ciframe name=\"top\" src=\"top.html\"\u003e\u003c/iframe\u003e\n\u003ciframe name=\"bottom\" src=\"bottom.html\"\u003e\u003c/iframe\u003e\n```\n\n_Обращение к элементам фреймов_\n\n* `frameElement` – ссылка на HTML-элемент, содержащий текущий фрейм;\n* `frames[\u003cindex\u003e]` – обращение к фрейму по индексу;\n* `frames[\u003cname\u003e]` – обращение к фрейму в коллекции по имени;\n* `frames.namedItem(\u003cname\u003e)` – обращение к фрейму по имени;\n* `frames.length` – количество фреймов в коллекции;\n* `frames.parent` – родительское окно `window`;\n* `frames.self` – ссылка на текущий `window`;\n* `frames.top` – родительский `window` верхнего уровня.\n\nИспользование фреймов на веб-сайтах не рекомендуется, из-за сложностей в доступности, SEO и безопасность сайта.\n\n### navigator\n\nОбъект `window.navigator` содержит информацию о браузере и операционной системе устройства пользователя. В зависимости от этих двух вещей некоторые из свойств этого объекта могут быть недоступны. Следующие свойства одни из наиболее часто используемых:\n\n| Свойство | Описание |\n|:---------------------:|------------------------------------------------------------------------------------------------------------|\n| `connection` | предоставляет информацию о типе подключения пользователя к интернету (например, Wi-Fi, мобильный интернет) |\n| `cookieEnabled` | возвращает булево значение, указывающее, включены ли cookie в браузере |\n| `geolocation` | предоставляет доступ к геопозиции пользователя |\n| `hardwareConcurrency` | возвращает количество логических процессоров, доступных на устройстве пользователя |\n| `mediaDevices` | предоставляет доступ к устройствам ввода, таким как камера и микрофон |\n| `onLine` | возвращает булево значение, указывающее, находится ли устройство пользователя в режиме онлайн или офлайн |\n| `platform` | возвращает строку, содержащую информацию об операционной системе устройства пользователя |\n| `plugins` | возвращает коллекцию объектов `Plugin` с информацией о плагинах, установленных в браузере пользователя |\n| `userAgent` | возвращает строку, содержащую информацию о браузере, версии браузера и операционной системе |\n\nБолее подробную информацию обо всех свойствах можно найти в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Navigator).\n\n### history\n\nОбъект `window.history` предоставляет историю посещений пользователя в текущей вкладке браузера. В целях безопасности объект `window.history` не позволяет получить доступ к хранящимся в объекте URL-адресам, а лишь перемещаться вперед и назад по истории посещений и добавлять в нее новые записи.\n\n| Свойства | Значение |\n|:--------:|---------------------------------------|\n| `length` | количество записей в истории браузера |\n\n| Методы | Описание |\n|:-----------:|----------------------------------------------------------------|\n| `back()` | переход на предыдущую страницу в истории браузера |\n| `forward()` | переход на следующую страницу в истории браузера |\n| `go(n)` | переход на страницу `n` от текущей страницы в истории браузера |\n\nЕсли `n` в методе `go()` отрицательное, то произойдёт переход на предыдущие страницы, если положительное, то на следующие.\n\n### location\n\nСвойство `window.location` ссылается на объект _Location_, представляющий текущий URL-адрес документа, и определяющий методы для изменения этого адреса. Свойство `document.location` также ссылается на объект _Location_ (`window.location === document.location`).\n\n| Свойство | Значение |\n|:----------:|--------------------------------------------------------------------------|\n| `href` | полный URL-адрес текущей страницы |\n| `protocol` | протокол текущей страницы (например, `http:`, `https:`, `file:`, `ftp:`) |\n| `host` | хост и порт текущей страницы (например, `www.example.com:80`) |\n| `hostname` | имя хоста текущей страницы (например, `www.example.com`) |\n| `port` | порт текущей страницы (например, `80`) |\n| `pathname` | путь к текущей странице на сервере (например, `/path/to/page.html`) |\n| `search` | строка запроса текущей страницы (например, `?id=123\u0026name=John`) |\n| `hash` | якорь текущей страницы (например, `#section1`) |\n\n| Метод | Описание |\n|:--------------:|----------------------------------------------------------------|\n| `assign(url)` | переход по указанному `url` |\n| `replace(url)` | переходит и заменяет текущий `url` на новый в журнале браузера |\n| `reload()` | перезагрузка страницы |\n\nПо умолчанию метод `reload()` перезагружает документ из кэша, но если передать в качестве параметра `reload(true)`, то страница будет запрошена с сервера, как если было нажато `Ctrl + F5`.\n\n### screen\n\nСвойство `window.screen` ссылается на объект _Screen_, предоставляющий информацию о характеристиках экрана пользователя на котором в данный момент открыта страница.\n\n| Свойство | Значение |\n|:-------------:|----------------------------------------------------------------------------------|\n| `height` | разрешение экрана по вертикали в пикселях |\n| `width` | разрешение экрана по горизонтали в пикселях |\n| `colorDepth` | количество битов, используемых для хранения цветовой информации |\n| `pixelDepth` | количество битов, используемых для представления цвета каждого пикселя на экране |\n| `availHeight` | высота экрана пользователя в пикселях без учета элементов оформления окна |\n| `availWidth` | ширина экрана пользователя в пикселях без учета элементов оформления окна |\n\n## Клиентский JavaScript\n\n### Управление загрузкой скриптов. Атрибуты aync и defer\n\nВ примере ниже:\n\n* `analytics.js` загрузится и выполнится асинхронно, как только будет доступен.\n* `library.js` и `script.js` загрузятся асинхронно, но выполнятся только после завершения парсинга HTML, в указанном порядке.\n\n```html\n\u003c!-- Загружается и выполняется асинхронно --\u003e\n\u003cscript src=\"analytics.js\" async\u003e\u003c/script\u003e\n\n\u003c!-- Загружается асинхронно, выполняется после парсинга HTML --\u003e\n\u003cscript src=\"library.js\" defer\u003e\u003c/script\u003e\n\n\u003c!-- Загружается асинхронно, выполняется после парсинга HTML --\u003e\n\u003cscript src=\"script.js\" defer\u003e\u003c/script\u003e\n\n\u003cscript\u003e // Встроенный скрипт, не использует async или defer\n// console.log(\"Этот скрипт выполняется сразу же\");\n\u003c/script\u003e\n```\n\n**Важно:**\n\n* Не используйте `async` и `defer` для встроенных скриптов (скриптов, написанных непосредственно в HTML).\n* Оба атрибута игнорируются для скриптов с атрибутом `src`, содержащим пустую строку.\n* Выбор между `async` и `defer` зависит от конкретных потребностей вашего скрипта и его взаимодействия с DOM.\n\n## DOM: Объектная модель документа\n\n_DOM (Document Object Model)_ – объектная модель документа, стандартная спецификация JavaScript, определяющая структуру и способ доступа к элементам и содержимому веб-страницы.\n\nС помощью _DOM_ можно получать доступ к элементам страницы, создавать, изменять и удалять элементы, атрибуты и содержимое, а также обрабатывать события, происходящие на странице, например, клики мыши или нажатия клавиш.\n\n_DOM_ также используется для создания динамических веб-приложений и интерактивных пользовательских интерфейсов, где элементы страницы могут изменяться и обновляться без перезагрузки всей страницы.\n\nОбъект `document` является главным объектом в объектной модели документа (DOM) и представляет веб-страницу, загруженную в браузере. Он предоставляет доступ к содержимому документа, его структуре и свойствам, и может быть использован для манипуляции с элементами страницы.\n\n### Свойства document\n\nЭлементы документа\n\n| Свойство | Значение |\n|:--------------------------:|--------------------------------------------------|\n| `document.URL` | возвращает текущий URL документа |\n| `document.title` | устанавливает или возвращает заголовок документа |\n| `document.body` | возвращает объект тела документа |\n| `document.head` | возвращает объект заголовка документа |\n| `document.documentElement` | возвращает объект корневого элемента документа |\n\nИнформация о документе\n\n| Свойство | Значение |\n|:-----------------------:|------------------------------------------------------------|\n| `document.defaultView` | ссылка на глобальное окно, в котором отображается документ |\n| `document.lastModified` | дата последней модификации документа |\n| `document.readyState` | статус загрузки документа |\n| `document.cookie` | устанавливает или возвращает cookie для текущего документа |\n\n### Методы document\n\nРаботы с элементами страницы\n\n| Метод | Описание |\n|:--------------------------:|---------------------------------------------------------------------|\n| `getElementById()` | возвращает элемент на странице с указанным идентификатором |\n| `getElementsByTagName()` | возвращает массив элементов на странице с указанным тегом |\n| `getElementsByClassName()` | возвращает массив элементов на странице с указанным классом |\n| `querySelector()` | возвращает первый элемент, соответствующий указанному селектору CSS |\n| `querySelectorAll()` | возвращает все элементы, соответствующие указанному селектору CSS |\n\nРабота с содержимым страницы\n\n| Метод | Описание |\n|:------------------:|--------------------------------------------------------------------------------------|\n| `write()` | выводит текст или HTML на страницу в место вызова |\n| `createElement()` | создает новый элемент на странице |\n| `createTextNode()` | создает новый текстовый узел |\n| `appendChild()` | добавляет новый элемент в конец дочерних элементов указанного родительского элемента |\n| `replaceChild()` | заменяет указанный дочерний элемент новым элементом |\n| `remove()` | удаляет элемент со страницы |\n\nРабота с событиями\n\n| Метод | Описание |\n|:-----------------------:|------------------------------------------------------------------------------|\n| `addEventListener()` | регистрирует функцию обработчика событий для указанного элемента на странице |\n| `removeEventListener()` | удаляет ранее зарегистрированный обработчик событий |\n| `createEvent()` | создает новый объект события |\n| `dispatchEvent()` | вызывает указанное событие на элементе на странице |\n\n### Типы узлов документа\n\nВ _DOM (Document Object Model)_ существуют различные виды узлов, которые представляют разные типы элементов в документе. Некоторые из них перечислены в таблице ниже:\n\n| Код типа | Тип узла | Описание | Пример |\n|:--------:|:--------------------------:|------------------------------------------------------------------------------------|------------------------------------|\n| 1 | **ELEMENT_NODE** | Узел, который представляет элемент на странице, такой как `div`, `p`, `img` и т.д. | `\u003cp\u003e...\u003c/p\u003e` |\n| 2 | **ATTRIBUTE_NODE** | Узел, который представляет атрибут элемента, такой как `class`, `id`, `src` и т.д. | `align=\"center\"` |\n| 3 | **TEXT_NODE** | Узел, который представляет текстовое содержимое элемента | `просто текст` |\n| 8 | **COMMENT_NODE** | Узел, который представляет комментарий в HTML-коде | `\u003c!--comment--\u003e` |\n| 9 | **DOCUMENT_NODE** | Корневой узел, который представляет весь документ | `document.nodeType === 9` |\n| 10 | **DOCUMENT_TYPE_NODE** | Узел, который представляет объявление типа документа (doctype) в начале HTML-кода | `\u003c!DOCTYPE html\u003e` |\n| 11 | **DOCUMENT_FRAGMENT_NODE** | Узел, который представляет фрагмент документа, который не имеет корневого узла | `document.createDocumentFragment() |\n\n_Код типа узла_ – это числовое значение, которое указывает на тип конкретного узла в документе. Это свойство `nodeType` доступно для всех узлов в DOM и используется для определения типа узла. Для каждого типа узла существуют свои методы и свойства, которые могут быть использованы в JavaScript. Эти свойства и методы рассмотрены ниже.\n\n### Связи между DOM-элементами\n\nРазберём связи следующих DOM-элементов:\n\n```html\n\u003cp\u003eЭто \u003cem\u003eпростой\u003c/em\u003e пример\u003c/p\u003e\n```\n\nСхематично их можно представить так:\n\n```text\n \u003cp\u003e\n ┌────── parentNode ─────\u003e├───── childNodes ─────\u003e\n │ │ │\nЭто \u003c─ previousSibling ─ \u003cem\u003e ─ nextSibling ─\u003e пример\n │\n firstChild\n │\n простой\n```\n\nВ данном случае:\n\n* `parentNode` для элементов `Это`, `\u003cem\u003e` и `пример` является элемент `\u003cp\u003e`;\n* `childNodes` для элемента `\u003cp\u003e` включает элементы `Это`, `\u003cem\u003e` и `пример`;\n* `previousSibling` для элемента `\u003cem\u003e` является текстовый узел, содержащий слово `Это`;\n* `nextSibling` для элемента `\u003cem\u003e` является текстовый узел, содержащий слово `пример`;\n* `firstChild` для элемента `\u003cem\u003e` является текстовый узел, содержащий слово `простой`.\n\n### Свойства и методы типов узлов DOM\n\n_DOM (Document Object Model)_ – это иерархическая структура, которая представляет HTML-документ в виде дерева объектов. Каждый узел в дереве представляет отдельный элемент документа, который может иметь разные типы.\n\nНиже представлены свойства и методы основных типов узлов DOM.\n\n#### Node\n\n`Node` – является базовым типом узлов и представляет общие свойства и методы, которые присутствуют у всех типов узлов.\n\n| Свойство | Значение |\n|:-------------:|--------------------------------------------------------------------------------|\n| `childNodes` | возвращает коллекцию всех дочерних узлов данного узла |\n| `firstChild` | возвращает первый дочерний узел у данного узла |\n| `lastChild` | возвращает последний дочерний узел у данного узла |\n| `nextSibling` | возвращает следующий соседний узел от данного узла |\n| `nodeName` | возвращает имя узла в виде строки |\n| `nodeType` | возвращает тип узла в виде числа |\n| `nodeValue` | возвращает или устанавливает значение узла |\n| `parentNode` | возвращает родительский узел данного узла |\n| `textContent` | возвращает текстовое содержимое всех дочерних узлов данного узла в виде строки |\n\n| Метод | Описание |\n|:-----------------------------------:|--------------------------------------------------------------------------------------------|\n| `appendChild(node)` | добавляет узел `node` в конец списка дочерних узлов данного узла |\n| `cloneNode(deep)` | создает копию данного узла. Если deep равен `true`, то будут скопированы все дочерние узлы |\n| `hasChildNodes()` | возвращает `true`, если данный узел имеет дочерние узлы |\n| `insertBefore(node, referenceNode)` | вставляет узел `node` перед узлом |\n| `removeChild(node)` | удаляет узел `node` из списка дочерних узлов данного узла |\n| `replaceChild(newNode, oldNode)` | заменяет узел `oldNode` на узел `newNode` в списке дочерних узлов данного узла |\n\nПолный список свойств и методов Node в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Node).\n\n#### Element\n\n`Element` является подтипом типа `Node` и расширяет его свойства и методы. Этот тип представляет HTML-элементы и имеет ряд специфичных свойств и методов. Ниже приведены наиболее распространенные свойства и методы класса `Element`:\n\n| Свойство | Значение |\n|:-----------:|--------------------------------------------------------------------------------------------|\n| `classList` | возвращает коллекцию классов данного элемента |\n| `className` | возвращает или устанавливает атрибут `class` элемента |\n| `id` | возвращает или устанавливает атрибут `id` элемента |\n| `innerHTML` | возвращает или устанавливает содержимое элемента в виде HTML-кода |\n| `outerHTML` | возвращает или устанавливает содержимое элемента в виде HTML-кода вместе с самим элементом |\n| `tagName` | возвращает имя тега элемента в верхнем регистре |\n\n| Метод | Описание |\n|:------------------------------:|------------------------------------------------------------------------------------|\n| `getAttribute(name)` | возвращает значение атрибута элемента с именем `name` |\n| `setAttribute(name, value)` | устанавливает значение атрибута элемента с именем `name` на `value` |\n| `hasAttribute(name)` | возвращает `true`, если элемент имеет атрибут с именем `name` |\n| `removeAttribute(name)` | удаляет атрибут элемента с именем `name` |\n| `getElementsByTagName(name)` | возвращает коллекцию элементов с заданным именем тега `name` |\n| `getElementsByClassName(name)` | возвращает коллекцию элементов с заданным именем класса `name` |\n| `querySelector(selector)` | возвращает первый элемент, который соответствует заданному CSS-селектору |\n| `querySelectorAll(selector)` | возвращает коллекцию всех элементов, которые соответствуют заданному CSS-селектору |\n\nПолный список свойств и методов Element в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Element).\n\n#### HTMLElement\n\n`HTMLElement` – это подтип класса Element, который расширяет его свойства и методы, предоставляя дополнительные свойства и методы, специфичные для HTML элементов. Ниже приведены наиболее распространенные свойства и методы класса HTMLElement:\n\n| Свойство | Значение |\n|:-----------------:|-------------------------------------------------------------------------------------------------------------------|\n| `contentEditable` | возвращает или устанавливает значение, указывающее, может ли содержимое элемента быть редактируемым пользователем |\n| `draggable` | возвращает или устанавливает значение, указывающее, может ли элемент быть перетаскиваемым пользователем |\n| `hidden` | возвращает или устанавливает значение, указывающее, должен ли элемент быть скрытым отображением |\n| `hidden` | возвращает или устанавливает значение, указывающее, должен ли элемент быть скрытым отображением |\n| `offsetHeight` | возвращает высоту элемента включая высоту границы |\n| `offsetWidth` | возвращает ширину элемента включая ширину границы |\n| `scrollHeight` | возвращает высоту содержимого элемента включая содержимое, которое не отображается в окне просмотра |\n| `scrollWidth` | возвращает ширину содержимого элемента включая содержимое, которое не отображается в окне просмотра |\n\n| Метод | Описание |\n|:---------:|-----------------------------------|\n| `click()` | имитирует щелчок мыши на элементе |\n| `focus()` | устанавливает фокус на элементе |\n| `blur()` | снимает фокус с элемента |\n\nПолный список свойств и методов HTMLElement в [документации](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).\n\n#### Document\n\nОбъект `Document` представляет собой HTML или XML документ и предоставляет доступ к элементам и свойствам документа. Ниже приведены наиболее распространенные свойства, методы и коллекции объекта `Document`.\n\n| Коллекция | Описание |\n|:---------:|--------------------------------------------------------|\n| `images` | коллекция изображений (объектов Image) на странице |\n| `links` | коллекция ссылок (объектов Link) на странице |\n| `forms` | коллекция форм (объектов Form) на странице |\n| `scripts` | коллекция скриптов на странице |\n| `anchors` | коллекция якорных ссылок (объектов Anchor) на странице |\n| `all` | коллекция всех элементов на странице |\n\n| Свойство | Значение |\n|:-----------------:|------------------------------------------------------------------------------------------|\n| `cookie` | возвращает или устанавливает значение cookie для документа |\n| `defaultView` | возвращает объект `window`, связанный с документом |\n| `documentElement` | возвращает корневой элемент документа |\n| `domain` | возвращает или устанавливает доменное имя сервера, который отдает документ |\n| `location` | возвращает объект `Location`, который содержит информацию о текущем URL-адресе документа |\n| `referrer` | возвращает URL-адрес документа, который вызвал текущий документ |\n| `head` | возвращает элемент `\u003chead\u003e` документа |\n| `title` | возвращает или устанавливает значение тега `\u003ctitle\u003e` документа |\n| `body` | возвращает элемент `\u003cbody\u003e` документа |\n\n| Метод | Описание |\n|:-----------------------------------:|------------------------------------------------------------------------------------|\n| `appendChild(node)` | добавляет узел в конец списка дочерних элементов указанного родительского элемента |\n| `createElement(tagName)` | создает новый элемент с указанным именем тега |\n| `createTextNode(text)` | создает новый текстовый узел с указанным текстом |\n| `getElementById(id)` | возвращает элемент с указанным идентификатором |\n| `getElementsByTagName(tagName)` | возвращает коллекцию элементов с заданным именем тега |\n| `getElementsByClassName(className)` | возвращает коллекцию элементов с заданным именем класса |\n| `replaceChild(newNode, oldNode)` | заменяет дочерний элемент `oldNode` на `newNode` |\n| `removeChild(node)` | удаляет узел из списка дочерних элементов указанного родительского элемента |\n\nПолный список свойств и методов Document в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Document).\n\n#### Примеры свойств и методов узлов DOM\n\nСоздание элемента и текстовых узлов\n\n```js\n// Создание нового элемента \u003cp\u003e\nconst p = document.createElement('p')\n// Создание текстового узла\nconst txt = document.createTextNode('Это новый параграф в конце')\n// Вставка в элемент\np.appendChild(txt)\n// Вставить в конец элемента body\ndocument.body.appendChild(e)\n```\n\nСпособ с `insertBefore()`\n\n```js\nconst p = document.createElement('p')\np.appendChild(document.createTextNode('Это новый параграф вначале'))\n// Второй аргумент – перед каким элементом\ndocument.body.insertBefore(e, document.body.firstChild)\n```\n\nСоздание фрагмента\n\n```js\nconst p = document.createElement('p')\np.textContent = '... fragment text ...'\n\n// Создание фрагмента\nconst fragment = document.createDocumentFragment()\n// Вставка в фрагмент\nfragment.appendChild(p)\n// Вставка клонированного фрагмента в \u003cdiv\u003e\nconst div = document.getElementById('div')\n// Параметр true скопирует элемент с содержимым\ndiv.appendChild(fragment.cloneNode(true))\n```\n\nУдаление элементов\n\n```js\n// Последний дочерний элемент в секции body\nconst lastElement = document.body.lastChild\n// Фильтруем текстовые узлы\nwhile (lastElement.nodeType == 3)\n // Присвоение предыдущего соседнего узла\n lastElement = lastElement.previousSibling\n\n// Если в body есть дочерние узлы\nif (document.body.hasChildNodes())\n // Удаляем последний дочерний элемент\n document.body.removeChild(lastElement)\n```\n\nМодифицирование элемента\n\n```js\n// Первыый попавшийся элемент h1\nconst e = document.getElementsByTagName('h1')[0]\n// Изменение стилей\ne.style.font = '28px Impact, Tahoma, Segoe, monospace'\ne.style.color = '#45D'\ne.style.textShadow = '#A2C 0 0 5px'\ne.innerHTML = '\u003cem\u003einnerText\u003c/em\u003e' // Вставит как код HTML\ne.childNodes[0].nodeValue = '\u003cem\u003einnerText\u003c/em\u003e' // Вставит как текст\n```\n\nМанипуляция атрибутами элемента\n\n```js\n// Формируем массив абзацев\nconst paragraphes = document.getElementsByTagName('p')\n\n// Смена атрибута align на противоположный\nfor (let i in paragraphes) {\n if (paragraphes[i].getAttribute('align') == 'right')\n paragraphes[i].setAttribute('align', 'left')\n else if (paragraphes[i].getAttribute('align') == 'left')\n paragraphes[i].setAttribute('align', 'right')\n else\n paragraphes[i].removeAttribute('align') // Пример удаления\n}\n```\n\n## События\n\nСобытия в JavaScript позволяют реагировать на различные пользовательские действия и изменения состояния страницы. События могут быть связаны как с HTML-элементами (кнопки, ссылки, формы), так и непосредственно с изменением самой страницы (её загрузка/выгрузка, изменение размера окна, скроллинг).\n\n### Обработчики событий\n\nДля обработки событий JavaScript использует слушатели событий (Event Listeners) – это функции JavaScript, которые вызываются в ответ на определённое действие. Эти функции могут быть назначены различным HTML-элементам либо другим состояниям веб-страницы. Пример обработчика события `onlclik` (одинарный щелчок мыши):\n\n```html\n\u003cbutton class=\"btn\"\u003eНажми меня\u003c/button\u003e\n```\n\n```js\n// Получаем ссылку на кнопку\nconst button = document.querySelector('btn')\n\n// Создаем функцию-обработчик события onclick\nfunction handleClick() {\n console.log('Кнопка была нажата!')\n}\n\n// Регистрируем обработчик события onclick для кнопки\nbutton.onclick = handleClick\n```\n\nТакже обработчик события может быть назначен с помощью HTML-атрибута, например атрибутом `onclick`.\n\n### Объект события\n\nJavaScript создает объект события (Event) в момент его возникновения. Этот объект передается в обработчик события и содержит всю информацию о событии, например, координаты мыши, нажатые клавиши и т.д.\n\nСоздание объекта события:\n\n```js\nelement.addEventListener('click', function(event) {\n // event – объект события\n})\n```\n\nВ примере выше `event` и есть объект события, который будет передан обработчику события `click`. Название события `event` может быть любым каким зададите.\n\nСвойства объекта события:\n\n| Свойство | Значение |\n|:---------------------------:|------------------------------------------------------------|\n| `event.type` | тип события, например, `click`, `keydown` и т.д. |\n| `event.target` | элемент, на котором произошло событие |\n| `event.currentTarget` | элемент, на котором был зарегистрирован обработчик события |\n| `event.keyCode` | (устарел) код клавиши, нажатой при событии клавиатуры. |\n| `event.pageX`/`event.pageY` | координаты указателя мыши относительно документа |\n\nСвойства объекта события могут варьироваться в зависимости от типа события. Полный их список доступен в [документации](https://developer.mozilla.org/en-US/docs/Web/API/Event).\n\n### Отмена действия по умолчанию\n\nВ JavaScript можно отменить действие по умолчанию, связанное с определенным событием. Например, при обработке события `submit` формы можно отменить отправку формы на сервер, чтобы выполнить дополнительные действия с данным событием.\n\nОднако, иногда требуется отменить это стандартное действие и предотвратить его выполнение. Чтобы прервать действие по умолчанию и отменить отправку формы можно возвратить `false` из обработчика события:\n\n```js\nelement.addEventListener('submit', function(event) {\n // Некоторые проверки и логика...\n if (неудовлетворяет условию) {\n return false // Отменяет отправку формы\n }\n})\n```\n\nДругой способ заключается в вызов метода `preventDefault()` в обработчике события.\n\nМетоды объекта события\n\n| Метод | Описание |\n|:----------------------------:|-----------------------------------------------------------------------------------------------------------------------|\n| `preventDefault()` | предотвращает стандартное действие, связанное с событием |\n| `stopPropagation()` | останавливает дальнейшее распространение события по дереву элементов. Предотвращает всплытие события |\n| `stopImmediatePropagation()` | останавливает дальнейшее распространение события и предотвращает вызов других обработчиков событий для этого элемента |\n\n### Распространенные типы событий\n\nСобытия мыши\n\n| Событие | Описание |\n|:-----------:|-----------------------------------------------------------|\n| `click` | происходит при клике на элементе |\n| `dblclick` | при двойном клике на элементе |\n| `mousedown` | при нажатии кнопки мыши на элементе |\n| `mouseup` | при отпускании кнопки мыши на элементе |\n| `mousemove` | при перемещении мыши над элементом |\n| `mouseover` | происходит, когда курсор мыши пересекает границу элемента |\n| `mouseout` | когда курсор мыши покидает границу элемента |\n\nСобытия клавиатуры\n\n| Событие | Описание |\n|:----------:|----------------------------------------------|\n| `keydown` | происходит при нажатии клавиши на клавиатуре |\n| `keyup` | при отпускании клавиши на клавиатуре |\n| `keypress` | клавиша нажата и отпущена |\n\nСобытия формы\n\n| Событие | Описание |\n|:--------:|-----------------------------------------------------------------------|\n| `submit` | происходит при отправке формы |\n| `input` | при изменении значения элемента ввода (`input`, `textarea`, `select`) |\n| `change` | при изменении значения элемента формы (`input`, `select`, `textarea`) |\n\nСобытия окна и документа\n\n| Событие | Описание |\n|:--------:|-----------------------------------------------------------|\n| `load` | при полной загрузке веб-страницы или ресурса |\n| `unload` | перед закрытием страницы или переходом на другую страницу |\n| `resize` | при изменении размеров окна браузера |\n| `scroll` | при прокрутке содержимого страницы |\n\nСобытия фокуса\n\n| Событие | Описание |\n|:-------:|--------------------------------|\n| `focus` | при получении элементом фокуса |\n| `blur` | при потере элементом фокуса |\n\nСобытия навигации\n\n| Событие | Описание |\n|:------------:|----------------------------------------------------------------------------------------------|\n| `hashchange` | при изменении URL-фрагмента (хэша) в адресной строке браузера |\n| `popstate` | при изменении истории переходов (например, при нажатии кнопок \"назад\" и \"вперед\" в браузере) |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsa2kasov%2Fjavascript-reference-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsa2kasov%2Fjavascript-reference-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsa2kasov%2Fjavascript-reference-guide/lists"}