JS intensive

1. Что такое ООП

Это парадигма программирования, основанная на представлении программы в виде совокупности объектов и их взаимодействии. Выделяют 3 основных принципа:

• Инкапсуляция: Свойство системы позволяющее объединить данные и методы внутри класса и скрыть реализацию от пользователя.

• Наследование: Возможность создавать класс(наследник) на основе другого класса(родитель).

• Полиморфизм: Возможность объектов с одинаковой спецификацией иметь различную реализацию.

• А также выделяют и 4й принцип : Абстракция:

  разделении несущественных деталей реализации подпрограммы и характеристик существенных для корректного ее использования.

2. Что такое функциональное программирование

Это парадигма программирования, предполагающая обходиться вычислением результатов функций от исходных данных и результатов других функций, и не предполагает явного хранения состояния программы(в отличии от императивного ООП, где описывается процесс вычислений как последовательное изменение состояний. Основные концепции ФП:

• Чистые функции - это функции, которые не содержат побочных эффектов, не изменяют данные и при передаче одних и тех же аргументов выдают один и тот же результат.
• Иммутабельность данных - аргументы, переданные в функцию не изменяются
• Композиция - это подход в функциональном программировании, который подразумевает вызов одних функций в качестве аргументов других, для создания сложных составных функций из более простых.
• Функции высшего порядка - это функция принимающая, создающая внутри себя и/или возвращающая другую функцию.
• Каррирование — это преобразование функции с множеством аргументов в набор вложенных функций с одним аргументом.
• Частичное применение - это преобразовании функции в другую функцию, обладающую меньшим числом аргументов. Некоторые аргументы такой функции оказываются зафиксированными.

3. Типы данных в JS

Примитивные типы:

• number - включает в себя как целочисленные значения (integer, int), так и значения с плавающей точкой (float, double).
• string - являются просто последовательностью символов. Иммутабельны.
• boolean - имеет в своём арсенале лишь два допустимых значения. Эти значения true и false.
• bigint - это тип данных способный содержать в себе целые числа любых размеров без потери точности.
• symbol - это уникальный идентификатор.
• undefined - Специальный тип данных, содержащий всего одно значение. Это значение отражает то, что значение не задано.
• null - специальный тип данных, содержащий всего одно значение - null. По сути данное значение обозначает “пустоту” или “ничего”.

Ссылочные:

• object - работа со всеми объектами в JavaScript ведётся по ссылке. Ни одна переменная в JavaScript не содержит объектов. Все они лишь ссылаются на них в памяти. Данные в объектах хранятся в виде пар “ключ: значение”, где ключ - это строка (или symbol), а значение может являться чем угодно (в том числе другим объектом).

4. Создание переменных с помощью var

• Изменяемость: Значение переменной может изменяться;
• Инициализация: При создании переменная может не инициализироваться;
• Область видимости: Функциональная;
• Сторонние эффекты: При создании переменных они “оседают” в глобальном объекте браузера (window);
• Многократное создание: Возможно;
• Всплытие: Есть, без ограничений.

5. Создание переменных с помощью let

• Изменяемость: Значение переменной может изменяться;
• Инициализация: При создании переменная может не инициализироваться;
• Область видимости: Блочная;
• Сторонние эффекты: -;
• Многократное создание: Невозможно;
• Всплытие: Есть, но с мёртвой зоной.

6. Создание переменных с помощью const

• Изменяемость: Значение переменной неизменяемо;
• Инициализация: При создании переменная обязательно должна инициализироваться;
• Область видимости: Блочная;
• Сторонние эффекты: -;
• Многократное создание: Невозможно;
• Всплытие: Есть, но с мёртвой зоной.

7. Приведение типов:

• Число к строке:

  • С помощью вызова встроенной функции String();
  • С помощью вызова метода .toString() у числа напрямую или у переменной, содержащей число.
  • С помощью “прибавления” к числу пустой строки.

• Строка к числу:

  • С помощью вызова встроенной функции Number();
  • С помощью вызова встроенных функций parseInt() и parseFloat().
  • С помощью унарного оператора ‘+’;
  • Во время сравнения
  • При использовании арифметических операторов

• К логическому типу:

  • С помощью вызова встроенной функции Boolean()
  • С помощью двойного использования унарного оператора ‘!’ (не);
  • В условном операторе if;
  • При использовании логических операторов.

8. Сравнение в JavaScript

• Сравнение с приведением типа: == (равно), != (не равно);
• Сравнение без приведения типа: === (равно), !== (не равно).

9. Встроенные методы Object

• Object.keys(object) - возвращает массив (о них позже) собственных перечисляемых свойств объекта;
• Object.values(object) - возвращает массив значений собственных перечисляемых свойств объекта;
• Object.entries(object) - возвращает массив собственных перечисляемых свойств объекта в виде пар [ключ, значение].
• Object.is(value1, value2) - определяет, являются ли оба значения одинаковыми.

10. Что такое итерируемые сущности

это такие сущности, по которым возможно осуществить проход (или перебрать). Любая сущность, корректно реализующая функцию итерации по ключу [Symbol.iterator], является итерируемой. В той же спецификации появилась новая реализация цикла for, специально предназначенная для таких сущностей: for .. of.

11. Встроенные методы массивов

• push(item) - добавления нового элемента в конец массива мы можем воспользоваться методом.
• pop() - удаляет последний элемент массива и возвращает его.
• unshift(elem) - добавить элемент в начало.
• shift() - удаление первого элемента массива. (который, как и .pop(), возвращает удаляемый элемент).
• indexOf(item) - возвращает индекс вхождения элемента или значение -1 в случае отсутствия такого элемента
• forEach() - просто выполняет переданную функцию для каждого элемента массива;
• filter() - в качестве результата возвращает новый массив, состоящий только из тех элементов, для которых переданная функция вернула значение true;
• map() - в качестве результата возвращает новый массив, состоящий из возвращенных значений вызова переданной функции;
• find() - возвращает первый элемент массива, для которого переданная функция вернула значение true (или undefined, если для всех элементов функция вернула значение false);
• reduce() - во время выполнения сохраняет промежуточный результат, а в конечном итоге его возвращает;
• every()/some() - возвращает true, если функция для каждого/любого элемента вернула значение true, иначе false.

12. Приведение объектов

Когда объект “понимает”, что ему нужно привестись к числу или строке, он, опираясь на необходимый тип приведения, пытается вызвать внутренний метод по ключу [Symbol.toPrimitive] и в качестве параметра передаёт этот тип приведения. Возможные типы:

• ‘string’ - явное или неявное преобразование к строке;
• ‘number’ - явное или неявное преобразование к числу;
• ‘default’ - в случаях, когда оператор “не уверен”, какой тип данных ожидать (например, во время сложения, т.к. оно может использоваться и для чисел, и для строк; при сравнении с приведением типа (==) и др.

13. Автобоксинг

Автобоксинг - это внутренний механизм JavaScript, суть которого заключается в обёртке примитива в объект соответствующего типа (Number для чисел, String для строк) в момент попытки обращения к “его внутренним свойствам или методам”. Под этим страшным определением скрывается довольно простой процесс. Всякий раз, обращаясь к свойствам/методам нашего примитива, мы на самом деле работаем со свойствами/методами временного объекта-обёртки, который создаётся лишь на момент осуществления доступа и тут же уничтожается.

14. Типы функций

В JavaScript существует три основных типа функций:

• Объявляемая функция (function declaration);

• Функциональное выражение (function expression);

• Стрелочная функция (arrow function, ES6).

  И ещё один специфичный тип:

• Именованное функциональное выражение (named function expression, NFE).

  Кроме этого есть ещё некоторые “состояния” функций:

• Анонимная функция  (anonymous function);

• Callback-функция (callback function);

• Функция-конструктор (constructor function);

• Функция высшего порядка (higher-order function).

15. Особенности стрелочных функций

Стрелочные функции появились в JavaScript в стандарте ES6 и сами по себе существенно отличаются от остальных типов. Во-первых, краткий и более удобный синтаксис. Во-вторых, отсутствие псевдомассива arguments. В-третьих, нет своего this (он берётся сверху), отчего стрелочные функции не могут быть использованы как функции-конструкторы. В-четвёртых, нет super (как и в случае с this, он берётся сверху). В-пятых, если тело стрелочной функции состоит всего из одного выражения, то фигурные скобки можно опустить, а возвращаемым значением функции будет результат этого выражения.

16. Функции-конструкторы

Функции-конструкторы – специальные функции, предназначенные для создания (конструирования) новых объектов. Такие функции, как правило, не предназначены для прямого вызова, ибо толку с этого будет не много (хотя делать это всё ещё можно). Эти функции нужны для вызова со специальным оператором new.

17. Лексическое окружение

Лексическое окружение – это специальный объект, хранящий в себе информацию обо всех локальных переменных и ссылку на внешнее окружение (внешний lexical environment). Данный объект скрыт и получить к нему прямой доступ нельзя. Тем не менее в нынешних реалиях можно чётко обозначить его две ключевые составляющие: Environment Record – объект, хранящий в себе все локальные переменные (и ещё некоторую другую информацию, как, например, значение this) и outer – ссылку на внешнее лексическое окружение.

По сути все локальные переменные – это переменные скрытого объекта внутри лексического окружения. То есть при попытке получения доступа к какой-то переменной, первым делом идёт обращение к этому объекту, чтобы достать значение с таким именем оттуда, а затем (в случае неудачи), идёт обращение по скрытой ссылке outer к объекту переменных внешнего окружения. Цикл повторяется до тех пор, пока: а) переменная не будет найдена, б) не закончится цепочка внешних окружений.

** Каждое приложение также имеет глобальное лексическое окружение, выше которого ничего нет (outer ссылается на null).

18. Замыкания

1. Замыкание – это функция, которая запоминает свои внешние переменные и может получить к ним доступ.

2. Замыкание - это комбинация функции и лексического окружения, в котором эта функция была определена. В JavaScript почти(1) все функции являются замыканиями.

19. Как работает JavaScript

JavaScript – это синхронный и однопоточный язык программирования. Что значит синхронный? Предположим, что у нас есть две строки кода. Первая идёт за второй. Синхронность означает то, что 2 строка не может начать выполняться до тех пор, пока 1 строка не завершит свою работу. Что значит однопоточный? Тут всё ещё проще. Однопоточность в JavaScript выражается тем, что лишь один блок кода может запускаться за раз.

20. Promises

Промис – это объект, представляющий асинхронную задачу и результат её выполнения. Он может находиться в одном из трёх состояний: ожидание (pending), завершён успешно (fulfilled), завершён с ошибкой (rejected).

Экземпляр промиса содержит три метода:

• .then(callbackOnResolve, callbackOnReject);
• .catch(callbackOnReject);
• .finally(callback)

Кроме методов экземпляров промисов есть ещё и ряд статических методов объекта Promise, что помогают в работе с ними:

• Promise.all([promise1, value, …, promiseN]); — запускает несколько промисов параллельно, возвращая результат в виде массива результатов всех промисов или первую из возникших ошибок.
• Promise.race([promise1, value, …, promiseN]); — запускает несколько промисов параллельно, возвращая результат первого завершенного промиса или первую из возникших ошибок.
• Promise.allSettled([promise1, value, …, promiseN]); — запускает несколько промисов параллельно, возвращая результат в виде массива объектов вида: { status: “fulfilled”, value: результат } или { status: “rejected”, reason: ошибка }.
• Promise.resolve(value); — создаёт успешно выполненный промис с заданным значением.
• Promise.reject(reason); — создаёт неудачно выполненный промис с заданной ошибкой.

21. Event loop

В Event Loop есть две очереди задач: мАкрозадачи (tasks/macrotasks) и мИкрозадачи (jobs/microtasks).

• Макрозадачи выполняются по очереди, по одной за раз (т.е. за одну итерацию Event Loop). В качестве примеров макрозадач можно привести callback-функции, переданные в качестве параметров для setTimeout, обработки браузерных событий, XMLHttpRequest или fetch. Каждая из этих задач является асинхронной и по готовности будет добавлена в очередь макрозадач.

  Одна задача — это всегда какая-то функция, подлежащая выполнению где-то в будущем. Каждая новая задача может быть взята на выполнение только тогда, когда стек вызова пуст. Задача может считаться завершённой, когда стек вызова снова становится пустым.

• Микрозадачи выполняются также по очереди, но в отличие от макрозадач все за раз (то есть за одну итерацию Event Loop). Причём даже если некоторые из микрозадач были добавлены в процессе выполнения предыдущих, они всё равно будут выполнены в текущей итерации(1). Примеры микрозадач: callback-функции для обработки Promise и Mutation Observer.
  Отдельного внимания заслуживает порядок выполнения задач. Event Loop “заглядывает” в очередь микрозадач после каждого выполнения макрозадачи. Т.е. по сути для перехода к следующей макрозадаче должны выполнится все существующие микрозадачи.

22. Основные HTTP-методы

• GET — метод для получения данных с сервера. Для передачи параметров в рамках GET-запроса используется адресная строка.
• POST — метод для отправки данных на сервер. Часто вызывает изменение состояние сервера. В отличие от GET-запросов имеет тело.
• PUT — метод для замены или создания (в случае отсутствия) сущности на сервере. В отличие от POST- и PATCH-запросов является идемпотентным. Также, как и POST-запрос, имеет тело.
• PATCH — метод для частичного изменения сущности на сервере. Как правило содержит в себе информацию для изменений на сервере. Также, как и POST-запрос, имеет тело.
• DELETE — метод для удаления (если существует) сущности на сервере. Может иметь тело, но в подавляющем большинстве случаев обходится параметрами адресной строки.

23. HTTP-запросы в JavaScript

Способов отправки HTTP-запросов в JavaScript несколько. Можно воспользоваться HTML-формами (хоть это и не совсем JavaScript, но всё же). Или же воспользоваться встроенными в браузер инструментами, такими как: объект XMLHttpRequest или метод fetch (наиболее предпочтительный вариант).

Также есть несколько популярных сторонних библиотек, предоставляющих функциональность для осуществления HTTP-запросов. Самые популярные из них Axios и jQuery. XMLHttpRequest, fetch, Axios и jQuery.ajax для осуществления HTTP-запросов используют подход AJAX (Asynchronous JavaScript and XML — “асинхронный JavaScript и XML”). Данный подход подразумевает выполнение HTTP-запросов без перезагрузки страницы с изменениями, производимыми прямо “на лету”. Все самые популярные JavaScript-фреймворки, (React, Angular, Vue) продвигающие идею одностраничных приложений (SPA — Single Page Application), полностью строятся на подходе AJAX.

24. Классы

В ES6 в JavaScript появились классы. Это был довольно мощный шаг в сторону ООП и с тех пор данный синтаксис стал основным для работы с ними [классами].

Классы в JavaScript — это просто одна из разновидностей функций. Если мы попробуем вызвать typeof для класса, то получим ‘function’.

Довольно часто можно услышать, что классы ES6 – это просто "синтаксический сахар” над прототипной реализацией ООП в JavaScript. Отчасти это так, но не до конца.

• Весь код внутри классов всегда работает в строгом режиме!
• Все методы класса по умолчанию являются неперечисляемыми. Т.е. для всех методов в prototype автоматически выставляется конфигурация { enumerable: false }.
• Мы не можем вызвать класс без ключевого слова new, т.е. просто как обычную функцию.

25. Браузерное окружение

Получить доступ к браузерному API можно с помощью глобального объекта window. При этом данный объект включает в себя и объектную модель документа (DOM), и объектную модель браузера (BOM), а также объекты и функции JavaScript. По итогу выходит, что window — это и объект браузерного окружения, и глобальный объект для JavaScript. DOM — это объектная модель документа, создаваемая в процессе загрузки веб-страницы на основе специальных объектов.

BOM — совокупность инструментов, поставляемых браузером.

26. Объектная модель документа (DOM)

DOM представляет собой всё содержимое html-страницы в виде иерархии специальных объектов, которые можно менять. Особое место в этой модели занимает объект document. Он является ключевым объектом для работы с DOM.

С помощью document мы можем обратиться к любому элементу страницы. Document включает в себя исчерпывающий набор функций для создания, удаления и изменения контента на странице. Кроме этого с помощью document можно получить некоторую информацию о самом документе (тип, адрес, домен и т.п.).

27. Объектная модель браузера (BOM)

BOM представляет собой набор функций и объектов, предоставленных браузером.

Например, из упомянутого ранее объекта navigator можно достать много информации о приложении, запустившем скрипт (например, браузере, операционной системе и много о чем ещё). Объект location содержит информацию о текущем URL-адресе и позволяет производить некоторые манипуляции с ним.

BOM является частью общей спецификации HTML. Из этого следует, что спецификация HTML на самом деле является не только описанием того, как работает сам язык разметки HTML, но и ряда инструментов для работы с ним.

28. DOM-дерево

Основой любого HTML-документа являются теги. При этом, согласно объектной модели документа, каждый тег является объектом. Также каждый тег является элементом в DOM-дереве (об этом позже). Вложенные теги являются «детьми» родительских элементов. У последних, в свою очередь, могут быть свои вложенные элементы и так далее. Таким образом выстраивается иерархия (дерево) элементов HTML-страницы. Текстовые фрагменты и комментарии также являются узлами DOM-дерева. При этом содержимое тега script с точки зрения документа также является текстом.

29. Узлы

В DOM-дереве есть два основных типа узлов: обычные узлы и узлы-элементы (или просто элементы). Абсолютно всё, что вы видите на странице HTML-документа, состоит из узлов (частные случаи которых представлены элементами). Ещё раз, узлом является всё: фрагмент текста, поле для ввода (input), комментарий, переход на новую строку, любой блок (например, div) и так далее-далее. Элементы также являются узлами, но с расширенным кругом возможностей. В WebAPI узлы представлены интерфейсом Node. От этого интерфейса наследуются все остальные узлы и элементы в том числе (опять же узлы-комментарии, текстовые узлы, фрагменты документа (DocumentFragment) и т.д.). Каждый объект узла имеет свойства для получения коллекции (перебираемого псевдомассива) дочерних узлов (childNodes), типа узла (nodeType) и многие другие. Кроме того, объекты узлов содержат целый ряд методов среди которых есть методы для вставки (appendChild), удаления (removeChild), клонирования (cloneNode) узлов и т. д.

30. Элементы

Элементами являются все наши теги. В целом в рамках разработки приложений мы в 99.99% случаев хотим работать только с элементами, а не со всеми узлами. Как и узлы, элементы имеют своё представление в WebAPI, а именно: интерфейс Element. Данный интерфейс предоставляет расширенный набор свойств, включающий в себя свойства, направленные на работу исключительно с элементами. Например, свойство children возвращает коллекцию (перебираемый псевдомассив), содержащую все дочерние элементы. Свойство nextElementSibling содержит ссылку на следующий элемент в дереве или null, если такой отсутствует. Использовать его “старшего брата” nextSibling в большинстве случаев неудобно, т.к. в качестве значения можно получить абсолютно любой узел (даже текстовый узел или комментарий). Элементы составляют костяк интерфейса и возможностей работы с ним. Мы можем навешивать на них обработчики событий, менять их содержимое и внешний вид. Для назначения обработчиков есть встроенный метод addEventListener (подробнее об этом мы поговорим на соответствующей лекции). Для задания инлайновых стилей есть специальное свойство style.

31. Поиск элементов DOM

Методы семейства getElementsBy* возвращают “живые" коллекции, в то время как метод querySelectorAll возвращает “неживые” (статические).

• Document.getElementById(id) - Результатом вызова будет элемент, имеющий переданный в качестве параметра идентификатор или null, если такого не найдётся. В рамках всего документа ни один идентификатор не должен повторяться. В ином случае результат вызова метода getElementById будет непредсказуем, т.к. у каждого браузера описано своё поведение на такой случай.

• Document.getElementsByName(name) - почти не используется. Результатом вызова будет коллекция элементов (перебираемый псевдомассив), в атрибуте name со значением, переданным в качестве параметра. Если таковых не найдётся, то в качестве результата мы получим пустую коллекцию.

• Element.getElementsByClassName(className) - Результатом вызова метода будет коллекция (перебираемый псевдомассив) из дочерних элементов любой вложенности, которые имеют переданный в качестве параметра класс. Если таковых не найдётся, то в качестве результата мы получим пустую коллекцию.

• getElementsByTagName - результатом вызова метода будет коллекция (перебираемый псевдомассив) из дочерних элементов любой вложенности, которые имеют переданный в качестве параметра тег. Если таковых не найдётся, то в качестве результата мы получим пустую коллекцию.

• Element.querySelector(cssSelector) - Результатом вызова метода будет первый элемент среди дочерних на любой вложенности, который соответствует переданному css-селектору, или же null, если такого не найдётся.

• querySelectorAll - результатом будет коллекция (перебираемый псевдомассив) из дочерних элементов любой вложенности, которые соответствуют переданному css-селектору. Если таковых не найдётся, то в качестве результата мы получим пустую коллекцию.

32. Стадии события

У каждого события есть три стадии (фазы):

• Стадия погружения (перехвата);
• Стадия цели;
• Стадия всплытия.

По умолчанию все обработчики событий вызываются на стадии всплытия. Т.е. в момент возникновения события на элементе, обработчики сначала срабатывают на нём, затем на его родителе, затем на родителе родителя и так далее. Данный процесс и называется всплытием.

На стадии цели мы добираемся до целевого элемента. Получить доступ к этому элементу можно через свойство event.target. Тут стоит обратить внимание, что в некоторых случаях event.target может быть равен event.currentTarget, однако в конечном итоге эти свойства говорят нам о разном, так что использовать их нужно всегда по прямому назначению. Event.currentTarget всегда ссылается на элемент, на котором сработал обработчик. Event.target — это элемент, который является инициатором события.

33. Обработчики событий

Обработчик события — это функция, которая срабатывает в момент возникновения события. В JavaScript обработчики событий можно навешивать несколькими способами. Первый способ — это назначение обработчика прямо в HTML. Делается это при помощи присваивания атрибутам, имена которых складываются из ‘on’ + ‘название события’, фрагментов JavaScript-кода.

Самым удобным способом назначить обработчик события является использование метода addEventListener. Данный способ позволяет назначить неограниченное число обработчиков на одно и то же событие элемента. Метод addEventListener принимает три аргумента: eventName – название события, на которое назначается обработчик (например, ‘click’ или ‘mouseout’); eventHandler – функция-обработчик; ?options – необязательный параметр, который может быть или объектом со свойствами { ?capture, ?once, ?passive }, или значением true/false, что будет аналогично записи { capture: true/false }.

Объект события в функцию-обработчик всегда поступает в качестве первого параметра. Объекты события могут быть разными. Например, упомянутый ранее объект события нажатия клавиши клавиатуры отличается от объекта нажатия клавиши мыши. Тем не менее каждый из них содержит ряд общих свойств и методов. Некоторые из этих свойств:

• event.target – элемент, который является инициатором события (или целевой элемент);
• event.currentTarget – элемент, на котором непосредственно задан обработчик события(1);
• event.type – тип события в виде строки (например, ‘click’).

Объект события помимо встроенных свойств также имеет и некоторые методы. Рассмотрим самые популярные из них:

• event.preventDefault() — отмена действия по умолчанию (например, добавления символа в поле для ввода на ‘keydown’ или появления контекстного меню в браузере на ‘contextmenu’);
• event.stopPropagation() — прекращение дальнейшего распространения события. Т.е. после вызова этого метода, event завершит погружение (или всплытие) и ни один из оставшихся обработчиков на других событиях вызван не будет;
• event.stopImmediatePropagation() — тоже, что и event.stopPropagation(), но в дополнение предотвращение вызова других обработчиков на текущем элементе. Т.е. если на одном элементе висит сразу три обработчика на ‘click’, вызов event.stopImmediatePropagation() в одном из них предотвратит вызов оставшихся.

34. Создание узлов

У объекта document есть встроенный метод createElement(tagName, ?options), который нужен, очевидно, для создания элементов. Данный метод принимает два аргумента(1), но в нативном JavaScript в большинстве случаев используется только первый из них. В качестве результата мы получаем специальный объект нашего элемента. Таким образом мы можем создавать любые элементы. Однако, когда нам нужно создать текстовый узел или комментарий, можно также воспользоваться встроенными методами объекта document: document.createTextNode(data) и document.createComment(data). Названия этих методов говорят сами за себя. Первый даёт нам возможность создавать текстовые узлы, а второй – комментарии.

(1) Второй аргумент options в методе createElement содержит всего одно поле is и нужен только в случаях использования пользовательских веб-компонентов.

35. Вставка узлов в документ

мы создаём новые узлы и элементы, чтобы позже вставить их в наш документ. Автоматически при создании в DOM-дерево они не вставляются. Однако для этого существует много разных способов, а самые современные из них следующие:

• node.append(…nodes или strings) - вставляет переданные узлы/строки после всех дочерних узлов node;
• node.prepend(…nodes или strings) - вставляет переданные узлы/строки перед всеми дочерними узлами node;
• node.before(…nodes или strings) - вставляет переданные узлы/строки прямо перед узлом node;
• node.after(…nodes или strings) - вставляет переданные узлы/строки сразу после узла node;
• node.replaceWith(…nodes или strings) - вставляет переданные узлы/строки вместо узла node.

36. Селекторы CSS

Основных видов селекторов всего несколько:

• * – любые элементы.
• div – элементы с таким тегом.
• #id – элемент с данным id.
• .class – элементы с таким классом.
• [name="value"] – селекторы на атрибут.
• :visited – «псевдоклассы», остальные разные условия на элемент.

Селекторы можно комбинировать, записывая последовательно, без пробела:

• .c1.c2 – элементы одновременно с двумя классами c1 и c2
• a#id.c1.c2:visited – элемент a с данным id, классами c1 и c2, и псевдоклассом visited

В CSS3 предусмотрено четыре вида отношений между элементами. Самые известные вы наверняка знаете:

• div p – элементы p, являющиеся потомками div.
• div > p – только непосредственные потомки

Есть и два более редких:

• div ~ p – правые соседи: все p на том же уровне вложенности, которые идут после div.
• div + p – первый правый сосед: p на том же уровне вложенности, который идёт сразу после div (если есть).

Селекторы атрибутов:

На атрибут целиком:

• [attr] – атрибут установлен,
• [attr="val"] – атрибут равен val.

На начало атрибута:

• [attr^="val"] – атрибут начинается с val, например "value".
• [attr|="val"] – атрибут равен val или начинается с val-, например равен "val-1".

На содержание:

• [attr*="val"] – атрибут содержит подстроку val, например равен "myvalue".
• [attr~="val"] – атрибут содержит val как одно из значений через пробел.

На конец атрибута:

• [attr$="val"] – атрибут заканчивается на val, например равен "myval".

Псевдокласы:

• :not(селектор) – все, кроме подходящих под селектор.

• :focus – в фокусе.

• :hover – под мышью.

• :empty – без детей (даже без текстовых).

• :checked, :disabled, :enabled – состояния INPUT.

• :target – этот фильтр сработает для элемента, ID которого совпадает с анкором #... текущего URL.

37. Что такое IndexedDB

JavaScript-интерфейс прикладного программирования (API) клиентского хранилища большого объема структурированных данных, в том числе файлы/blobs. Другими словами, это NoSQL-хранилище данных в формате JSON внутри браузера. Стандарт разработан W3C и внедрен в браузерах с 2011 года.

38. Git

Git — это система контроля версий, которая позволяет удобно организовать рабочий процесс для команды разработчиков. Основные команды:

• git init — инициализация нового репозитория;
• git add — поэтапное добавление изменений;
• git commit — регистрация некоторого перечня изменений с описанием и назначением уникального ID этим изменениям;
• git status — отслеживание текущего состояния репозитория;
• git config — запись и чтение конфигурации Git;
• git branch — отображение текущей ветки, создание новых веток, удаление веток;
• git checkout — переключение на другие ветки;
• git merge — слияние веток, т.е. соединение изменений двух веток в одну.
• git remote — создание связи между локальным и удалённым репозиториями;
• git clone — создание локальной копии существующего удалённого репозитория;
• git fetch — получение данных об изменениях в ветке;
• git pull — получение самой последней версии репозитория;
• git push — отправка локальных изменений в виде перечня коммитов на удалённый репозиторий.
• git stash — сохранение текущего состояния репозитория и очищение директории от всех изменений;
• git cherry-pick — вставка отдельного (-ых) коммита (-ов) в свою ветку;
• git rebase — перемещение нескольких коммитов к новому базовому коммиту.