👉 @frontendInterview

Чем отличаются PUT- и POST-запросы?

PUT-запросы приводят к замене целевого ресурса на данные, передаваемые в запросе. Его можно использовать для обновления содержимого существующего ресурса или для создания нового ресурса.

POST-запросы приводят к специфической для ресурса обработке данных, передаваемых в запросе. Их можно использовать для выполнения различных действий. В том числе — для создания новых ресурсов, для выгрузки файлов на сервер, для отправки форм.

Ещё одно отличие между PUT- и POST-запросами заключается в том, что PUT-запросы являются идемпотентными, а POST-запросы — нет. То есть — если запрос, в котором передаются одни и те же данные, и который выполняется по одному и тому же URL, будет выполнен несколько раз, это равносильно однократному выполнению этого запроса.

Стоит отметить, что описанное выше - это лишь вопрос семантики и договоренностей. На самом деле можно сделать удаление данных на PUT и добавление на DELETE.

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

Какая разница между селекторами идентификаторов и классов в CSS?

Идентификаторы (id) уникальны. У элемента может быть только один идентификатор. На странице может присутствовать лишь один элемент с конкретным идентификатором.

Имена классов (class) не являются уникальными. Один и тот же класс можно назначать множеству элементов. Элементу может быть назначено несколько классов.

Если некий стиль нужно применить к нескольким элементам страницы — эту задачу нужно решать с использованием классов.

👉 @frontendInterview

Оформление программного кода

В пособии изложены основные принципы, применяющиеся для повышения читаемости текстов компьютерных программ и их доступности для анализа человеком. В частности, даются рекомендации по разбиению программ на модули и подсистемы, уделяется много внимания различным стилям расстановки структурных отступов и незначащих (декоративных) пробелов

👉 @frontendInterview

Где мои анаграммы?

Напишите функцию, которая принимает первым аргументом строку и вторым - массив строк. А возвращает массив из анаграмм первого аргумента.

Анаграмма это слово, образованное путем перестановки букв от исходного слова.

Примеры:
anagrams('abba', ['aabb', 'abcd', 'bbaa', 'dada']) => ['aabb', 'bbaa']

anagrams('racer', ['crazer', 'carer', 'racar', 'caers', 'racer']) => ['carer', 'racer']

anagrams('laser', ['lazing', 'lazy', 'lacer']) => []

👉 @frontendInterview

input

Событие input возникает, когда пользователь изменяет содержимое поля для ввода информации.
Примеры таких полей:

 <textarea>;
 <input> с текстовым содержимым (атрибуты type="text" или type="number");
 <input> с нетекстовым содержимым (атрибуты type="file" или type="image");
 <input> в виде чекбокса (type="checkbox") или радиокнопки (type="radio");
 <select>.

Событие input возникает когда DOM-дерево обновляется или вот-вот обновится. Если пользователь вставит текст из буфера обмена, то событие input возникнет один раз. Если же пользователь печатает текст, то событие input возникает после добавления (и удаления) каждого символа.

👉 @frontendInterview

👉 @frontendInterview

​Напишите свой класс, который бы являлся стратегией к функции split, используя Symbol.

Стратегия (Strategy) — это ООП поведенческий шаблон проектирования, который позволяет расширять базовый класс или метод новым функционалом. Для этого нужно передать в него, так называемый, конкретный класс.

Чтобы написать такой класс нам понадобится специальный well-known символ [Symbol.split]. Метод split() вызывает функцию Symbol.split, а результат вызова возвращает как результат split(). У строк это уже реализовано:
"123,4,56".split(",") // ["123", "4", "56]

Мы можем добавить такое же поведение к своему классу. Разобьём строку при помощи регулярного выражения:
[Symbol.split](string) {
// Заменяем все вхождения this.value на /${this.value}/
let index = string.replace(new RegExp(this.value, "g"), `/${this.value}/`);

// убираем первый слэш, /url/Path -> url/Path
if (index[0] === "/") index = index.substr(1)
// Строка должна начинаться с url/, даже если его не было в начале
if (!index.startsWith(this.value)) index = `${this.value}/` + index;

return index;
}

Пример работы
"foobarfoobaz".split(new MySplit("foo")) // "foo/var/foo/baz"
"foobarfoobaz".split(new MySplit("bar")) // "bar/foo/bar/foobaz"

👉 @frontendInterview

👉 @frontendInterview

👉 @frontendInterview

​.preventDefault()

На каждое действие пользователя на сайте, браузер создаёт события. Это наш главный способ в коде понимать, что происходит на странице. Событие — это объект, который имеет набор свойств и методов для взаимодействия с ним.
preventDefault() — метод события. Этот метод отменяет поведение браузера по умолчанию, которое происходит при обработке события.
Например, при нажатии на ссылку, мы переходим по адресу этой ссылки. Вызов preventDefault() отменит это поведение.

Давайте разберём код из примера:
const runTimer = (inputElement) => {
setTimetout(() => {
inputElement.focus()
}, 5000)
}

const inputElement = document.querySelector('.input')
inputElement.addEventListener('mousedown', (event) => {
event.preventDefault()
runTimer(inputElement)
});

Когда пользователь нажимает на инпут элемент, генерируется цепочка событий в следующем порядке: mousedown -> mouseup -> click.
Когда происходит событие mousedown, браузер устанавливает фокус на поле ввода. Вызовом event.preventDefault() мы отменили это поведение. Затем мы запустили таймер, который установит фокус на инпут через 5 секунд с помощью вызова метода focus().

👉 @frontendInterview

Learning JavaScript Design Patterns: A JavaScript and React Developer's Guide (2023)

Вы хотите писать красивый, структурированный и удобный JavaScript, применяя современные паттерны проектирования? Вам нужен чистый, эффективный, управляемый код? Хотите быть в курсе последних передовых практик? Если да, то это обновленное второе издание книги - идеальное место для начала работы.

👉 @frontendInterview