✅ Вопрос с собеседования

Что такое чистая функция в JavaScript?

Ответ:

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

Условия существования чистой функции:

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

В данном примере представленная простейшая чистая функция и нечистая функция, принимающая значение сторонней переменной и зависящая от него

👉 @code_ready | #собеседование

✅ Как сделать красивый скролл страницы?

Библиотека aos предоставляет широкий функционал для проработки анимации прокрутки страницы на JavaScript.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

AOS.init({
   duration: 1000,
   easing: 'ease-out-cubic',
   once: true,
   startEvent: 'load',
});

Элементы указываются следующим образом:

<div class="card" data-aos="fade-up" data-aos-duration="1000">1</div>

👉 @code_ready | #обучение #js

✅ Как работает IIFE?

IIFE (Immediately Invoked Function Expression) в JavaScript - это функция, которая вызывается сразу же после своего определения. Она позволяет создавать локальную область видимости, чтобы избежать конфликта имен в глобальной области видимости.

IIFE определяется как анонимная функция, которая вызывается с помощью оператора () или new.

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

👉 @code_ready | #функция #js

✅ Свойство animation-direction

С помощью свойства animation-direction, можно изменять направление воспроизведения анимации.

Принимает следующие значения:

• normal — анимация воспроизводится в нормальном направлении (по умолчанию)
• reverse — анимация воспроизводится в обратном направлении
• alternate — анимация воспроизводится в нормальном направлении, затем в обратном направлении
• alternate-reverse — анимация воспроизводится в обратном направлении, затем в нормальном направлении

Применяется к элементам, которые имеют свойство animation со значением, отличным от none.

👉 @code_ready | #свойство #css

✅ Создание карусели с контентом

Данный пример представляет собой реализацию простой карусели, для прокрутки изображений на сайте.

Чтобы сделать карусель бесконечной, можно продублировать основные div с изображениями. Так, по завершению одной прокрутки, сразу начнется следующая

<div class="brand-list">
  <div class="wrapper">
    <div><img src="img1.png" alt="img1"></div>
    <div><img src="img2.png" alt="img2"></div>
    <div><img src="img3.png" alt="img3"></div>
  </div>
</div>

Ну а Css код я оставил в комментариях, т.к много кода в посте смотрится не очень)

👉 @code_ready | #обучение #css

✅ Переносим html элементы в JavaScript одной командой

Плагин Selector Js предоставляет функционал из нескольких команд, позволяющих переносить html элементы по именам классов, id, имени тега.

Для его работы необходимо установить плагин, выделить нужный фрагмент html и выбрать подходящую команду

👉 @code_ready | #плагин

✅ Псевдоэлемент ::spelling-error

Данный псевдоэлемент используется для выделения слов с ошибками в орфографии. Он позволяет стилизовать текст, который был отмечен браузером как неправильно написанный.

Принимаемые свойства:

• background-color — цвет фона
• color — цвет текста
• text-decoration — текстовое оформление (подчеркивание, перечеркивание)
• box-shadow — тень вокруг элемента

Важно не забыть указать spellcheck="true" в нужном теге для работы псевдоэлемента

👉 @code_ready | #псевдоэлемент #css

✅ Вопрос с собеседования

Что такое switch/case в JavaScript?

Ответ:

Switch/case — это конструкция в JavaScript, которая позволяет выбирать между несколькими вариантами выполнения кода в зависимости от значения выражения.

1. Выражение в switch может быть любым выражением, которое возвращает значение. Значения case должны быть константами или литералами.

• Когда выполняется switch, JavaScript сравнивает значение выражения с каждым значением case.
• Если значение выражения совпадает с каким-либо значением case, то выполняется код в этом блоке case.
• Если ни один из блоков case не совпадает, то выполняется код в блоке default (если он есть).

2. Ключевое слово break используется для прерывания выполнения switch после выполнения кода в соответствующем блоке case.

• Если break не использовать, то выполнение кода будет продолжаться и в следующих блоках case, даже если они не совпадают со значением выражения.

👉 @code_ready | #собеседование

✅ Методы Set в JavaScript

Set – это коллекция уникальных значений любого типа данных. Используется для хранения уникальных элементов в произвольном порядке.

👉 @code_ready | #шпаргалка

✅ Создание неонового текста

При правильном использовании, неоновое свечение добавляет приятные футуристические нотки дизайну сайта, при этом магию неоновых вывесок можно воссоздать с помощью CSS.

К text-shadow мы можем применить к нему несколько теней, просто разделив их запятыми.

body {
  background-color: #000;
}
h1 {
  font-size: 100px;
  color: #fff;
  text-transform: uppercase;
  font-family: sans-serif;
  text-shadow: 0 0 5px #ffffff, 0 0 10px #ffffff, 0 0 20px #ffffff, 0 0 40px #b303f8, 0 0 80px #b303f8, 0 0 90px #b303f8, 0 0 100px #b303f8, 0 0 150px #b303f8;
  text-align: center;
}

👉 @code_ready | #обучение #css

✅ Дополнительные фильтры для картинок

Свойство filter в CSS предлагает еще несколько фильтров, которые можно применить к изображениям.

• Атрибут opacity изменяет прозрачность изображения. Он принимает значения от 0 (полностью прозрачно) до 1 (полностью непрозрачно).
• Атрибут hue-rotate позволяет вращать цветовой круг изображения, тем самым изменяя его цвет. Он принимает значения в градусах (deg).

Эти фильтры можно использовать по отдельности или комбинировать для создания различных визуальных эффектов.

👉 @code_ready | #свойство #css

✅ Вопрос с собеседования

Разница между event.target и event.currentTarget?

Ответ:

В JavaScript, при обработке событий, объект event предоставляет нам доступ к различным свойствам и методам, связанным с этим событием.
Свойства event.target и event.currentTarget часто путают, но между ними есть существенная разница:

1. event.target:

— Это ссылка на элемент, на котором произошло событие. То есть, это фактический элемент, который вызвал событие.
— event.target будет ссылаться на элемент button, если кликнуть по нему, так как именно он вызвал событие.

2. event.currentTarget

— Это ссылка на элемент, на котором обработчик события был прикреплен. То есть, это элемент, который мы использовали для прикрепления обработчика события.
— event.currentTarget будет ссылаться на элемент div, так как именно на него мы прикрепили обработчик события.

В примере кода видно, что при клике на кнопку внутри div, event.target будет ссылаться на элемент button, а event.currentTarget на элемент div.

👉 @code_ready | #собеседование