🤔 Что такое хостинг js?

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

🟠Хостинг переменных
Переменные, объявленные с помощью var, поднимаются в начало своей функции или глобальной области видимости. При этом они инициализируются значением undefined.

console.log(a); // undefined
var a = 10;
console.log(a); // 10

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

var a;
console.log(a); // undefined
a = 10;
console.log(a); // 10

🟠Хостинг с использованием let и const
Переменные, объявленные с помощью let и const, также поднимаются, но они не инициализируются. Попытка доступа к ним до объявления приведет к ошибке ReferenceError из-за временной мертвой зоны (Temporal Dead Zone, TDZ).

console.log(b); // ReferenceError: Cannot access 'b' before initialization
let b = 20;
console.log(b); // 20

🟠Хостинг функций
Функции, объявленные с помощью Function Declaration, поднимаются полностью, включая тело функции. Это позволяет вызывать функции до их фактического объявления в коде.

console.log(sum(2, 3)); // 5

function sum(a, b) {
  return a + b;
}

На самом деле, вышеуказанный код интерпретируется JavaScript движком следующим образом:

function sum(a, b) {
  return a + b;
}

console.log(sum(2, 3)); // 5

🟠Хостинг функциональных выражений
Функции, объявленные с помощью Function Expression, поднимаются как обычные переменные. То есть их объявления поднимаются, но сами функции остаются неинициализированными до выполнения строки, где они определены.

console.log(subtract); // undefined
console.log(subtract(5, 3)); // TypeError: subtract is not a function

var subtract = function(a, b) {
  return a - b;
};

console.log(subtract(5, 3)); // 2

🚩Важные аспекты хостинга

🟠Понимание и использование хостинга
Хостинг позволяет писать код, который может использовать функции и переменные до их фактического объявления, что может быть полезно в некоторых случаях. Однако злоупотребление этим механизмом может привести к путанице и трудноуловимым ошибкам.
🟠Лучшие практики
Рекомендуется объявлять все переменные и функции в начале их соответствующей области видимости. Это улучшает читаемость и поддержку кода. Используйте let и const вместо var, чтобы избежать проблем с хостингом и повысить безопасность и предсказуемость кода.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое inline стили, и какой они имеют приоритет?

Инлайн-стили — это CSS-правила, прописанные непосредственно в HTML-элементе через атрибут style. Они имеют более высокий приоритет, чем стили из таблиц стилей или встроенные теги <style>, но уступают !important. Использование инлайн-стилей снижает переиспользуемость и усложняет поддержку.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какие отличия между новым и старым js?

JavaScript, как язык программирования, претерпел значительные изменения с момента своего создания. Основные изменения и улучшения в языке были введены с обновлениями спецификации ECMAScript (ES). Давайте рассмотрим ключевые отличия между "старым" JavaScript (ES5) и "новым" JavaScript (ES6 и более поздние версии):

🚩Основные отличия между ES5 и ES6+ (ES2015+)

🟠Объявление переменных: `var` vs `let` и `const`
ES5: Объявление переменных с помощью var. Переменные, объявленные с var, имеют функциональную область видимости (function scope) и подлежат хостингу.

var x = 10;
if (true) {
 var x = 20;
 console.log(x); // 20
}
console.log(x); // 20   

ES6+: Объявление переменных с помощью let и const. Переменные, объявленные с let и const, имеют блочную область видимости (block scope) и не подлежат хостингу в том виде, как var.

let y = 10;
if (true) {
let y = 20;
console.log(y); // 20
}
console.log(y); // 10

const z = 30;
// z = 40; // Ошибка: Assignment to constant variable.

🟠Стрелочные функции
ES5: Определение функций с использованием ключевого слова function.

var add = function(a, b) {
  return a + b;
};   

ES6+: Стрелочные функции, которые предоставляют более краткий синтаксис и не имеют собственного значения this.

const add = (a, b) => a + b;   

🟠Шаблонные строки
ES5: Конкатенация строк с использованием оператора +.

var name = 'Alice';
var greeting = 'Hello, ' + name + '!';   

ES6+: Использование шаблонных строк с обратными кавычками (`` ` ``) и интерполяцией.

const name = 'Alice';
const greeting = `Hello, ${name}!`;   

🟠Деструктуризация
ES5: Извлечение значений из массивов и объектов с использованием точечной нотации.

var arr = [1, 2, 3];
var first = arr[0];
var second = arr[1];

var obj = {a: 1, b: 2};
var a = obj.a;
var b = obj.b;   

ES6+: Деструктуризация массивов и объектов.

const [first, second] = [1, 2, 3];
const {a, b} = {a: 1, b: 2};   

🟠Промисы
ES5: Обработка асинхронных операций с использованием колбэков.

function fetchData(callback) {
setTimeout(function() {
callback('data');
}, 1000);
}

fetchData(function(data) {
console.log(data); // 'data'
});

ES6+: Введение промисов для более удобной работы с асинхронными операциями.

const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
};

fetchData().then(data => {
console.log(data); // 'data'
});

Ставь 👍 и забирай 📚 Базу знаний

🤔 Разница между margin и padding?

Margin — это внешнее пространство между элементом и его соседями, а padding — внутреннее пространство между содержимым элемента и его границей. Margin влияет на положение элемента, а padding на размер его внутренней области. Оба свойства помогают управлять расстояниями в дизайне.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 С каким селектором можно добавлять стили на каждый элемент страницы?

Чтобы добавить стили на каждый элемент страницы, можно использовать универсальный селектор *. Этот селектор выбирает все элементы в документе.

🚩Пример использования

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

🚩Объяснение

🟠Выбор всех элементов
Универсальный селектор * выбирает все элементы в DOM (Document Object Model) структуре. Это включает в себя все теги HTML, такие как <div>, <p>, <span>, <a>, и так далее.

🟠Сброс стилей
Пример кода выше сбрасывает отступы (margin) и внутренние отступы (padding) всех элементов на странице до нуля. Это часто делается для того, чтобы избежать неожиданных отступов, которые могут быть заданы по умолчанию браузером. Также устанавливается box-sizing: border-box, что изменяет модель коробки элемента, позволяя лучше контролировать размеры элементов при добавлении отступов и границ.

🟠Глобальное применение
Использование универсального селектора полезно, когда нужно задать базовые стили для всего документа. Например, это может быть полезно в начале проекта для создания единообразного внешнего вида всех элементов.

🚩Минус

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

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое псевдоклассы?

Псевдоклассы — это специальные ключевые слова в CSS, которые позволяют применять стили к элементам в определённых состояниях или на основе их позиции в документе. Например, `:hover` применяется к элементу, когда на него наведен курсор, а `:nth-child()` используется для стилизации конкретных элементов в последовательности. Они расширяют возможности CSS, добавляя динамическую стилизацию без использования JavaScript.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Какое свойство позволяет вам спрятать элемент, но сохранить занимаемое им пространство на странице?

Это свойство называется visibility. Это свойство может принимать несколько значений, но основными для скрытия элемента являются visible и hidden.

.hidden-element {
    visibility: hidden;
}

🟠visible
По умолчанию, элементы имеют значение visibility: visible;, что означает, что они видимы на странице.
🟠hidden
Когда элементу назначается значение visibility: hidden;, он становится невидимым, но продолжает занимать то же пространство в макете страницы, что и когда он был видимым.

В этом примере, второй <div> с классом hidden-element скрыт, но продолжает занимать место на странице. Третий <div> расположен после него, как если бы скрытый элемент был видимым.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .hidden-element {
            visibility: hidden;
        }
        .visible-element {
            background-color: lightblue;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="visible-element">Этот элемент видим.</div>
    <div class="hidden-element">Этот элемент скрыт, но сохраняет место.</div>
    <div class="visible-element">Этот элемент тоже видим и расположен после скрытого элемента.</div>
</body>
</html>

🚩Зачем это нужно?

🟠Сохранение макета
Когда важно сохранить исходный макет и расположение элементов.
🟠Динамическое управление видимостью
Когда требуется временно скрыть элемент и затем снова сделать его видимым, не изменяя при этом расположение других элементов на странице.

🚩Альтернативы

🟠display: none;
Это свойство полностью удаляет элемент из документа, как если бы его не было, освобождая занимаемое им место.
🟠opacity: 0;
Это свойство делает элемент полностью прозрачным, но элемент остается интерактивным и занимает место.

Ставь 👍 и забирай 📚 Базу знаний

🤔 E.preventDefault() и E.stopPropagation(), для чего нужны?

e.preventDefault() предотвращает стандартное поведение элемента (например, отправку формы при нажатии на кнопку). e.stopPropagation() останавливает дальнейшую передачу события по цепочке DOM, предотвращая его обработку родительскими элементами.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как сделать тень падающую от блока?

Используется свойство CSS box-shadow. Это свойство позволяет добавлять тени к элементам, создавая эффект объема и глубины.

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}

🚩Объяснение

Основной синтаксис

box-shadow: [смещение по горизонтали] [смещение по вертикали] [радиус размытия] [радиус растяжения] [цвет];   

🟠Параметры
Смещение по горизонтали (x-offset): Определяет смещение тени по горизонтали. Положительное значение сдвигает тень вправо, отрицательное — влево.
Смещение по вертикали (y-offset): Определяет смещение тени по вертикали. Положительное значение сдвигает тень вниз, отрицательное — вверх.
Радиус размытия (blur-radius): Определяет, насколько размытой будет тень. Большее значение создаст более размытые края.
Радиус растяжения (spread-radius): Определяет, насколько тень будет увеличена или уменьшена. Положительное значение увеличивает размер тени, отрицательное — уменьшает.
Цвет (color): Определяет цвет тени. Обычно используется полупрозрачный цвет, чтобы тень выглядела естественно.

🚩Пример с разными параметрами

.shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    /* Пример тени с разными параметрами */
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.3);
}

🚩С множественными тенями

Свойство box-shadow также поддерживает добавление нескольких теней к одному элементу. Тени разделяются запятыми.

.multi-shadow-box {
    width: 200px;
    height: 100px;
    background-color: lightblue;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5),
                -5px -5px 10px rgba(0, 0, 0, 0.2);
}

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое JSX?

JSX (JavaScript XML) — это синтаксическое расширение JavaScript, которое позволяет писать HTML-подобный код внутри JavaScript, упрощая создание React-компонентов.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Что такое set и map?

Это встроенные коллекции в JavaScript, введенные в ECMAScript 2015 (ES6), которые предоставляют новые способы хранения и управления данными.

🚩Set

Это коллекция, которая позволяет хранить уникальные значения любого типа, будь то примитивы или объекты.

1⃣Создание Set

const set = new Set();
const setWithValues = new Set([1, 2, 3, 4, 5]);   

2⃣Добавление элементов

set.add(1);
set.add(2);
set.add(2); // Игнорируется, т.к. 2 уже существует
console.log(set); // Set { 1, 2 }   

3⃣Удаление элементов

set.delete(1);
console.log(set); // Set { 2 }   

4⃣Проверка наличия элемента

console.log(set.has(2)); // true
console.log(set.has(3)); // false   

5⃣Размер коллекции

console.log(set.size); // 1   

6⃣Итерация по элементам

set.forEach((value) => {
    console.log(value);
});

for (let value of set) {
    console.log(value);
}   

🚩Map

Это коллекция, которая позволяет хранить пары ключ-значение. В отличие от обычных объектов, ключи в Map могут быть любого типа, включая функции, объекты и примитивы.

1⃣Создание Map

const map = new Map();
const mapWithValues = new Map([
    ['key1', 'value1'],
    ['key2', 'value2']
]);
   

2⃣Добавление элементов

map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map); // Map { 'key1' => 'value1', 'key2' => 'value2' }   

3⃣Удаление элементов

map.delete('key1');
console.log(map); // Map { 'key2' => 'value2' }   

4⃣Получение значения по ключу

console.log(map.get('key2')); // value2   

5⃣Проверка наличия ключа

console.log(map.has('key2')); // true
console.log(map.has('key1')); // false   

6⃣Размер коллекции

console.log(map.size); // 1   

🚩Примеры использования

🟠Уникальные значения с Set
Если вам нужно хранить только уникальные значения, Set идеально подходит:

const numbers = [1, 2, 3, 4, 5, 5, 6, 7, 7, 8];
const uniqueNumbers = new Set(numbers);
console.log(uniqueNumbers); // Set { 1, 2, 3, 4, 5, 6, 7, 8 }

🟠Пары ключ-значение с Map
Если вам нужно хранить данные в формате ключ-значение и вам важна возможность использовать сложные типы данных в качестве ключей, Map — лучший выбор:

const userRoles = new Map();
const admin = { name: 'Admin' };
const editor = { name: 'Editor' };

userRoles.set(admin, 'admin');
userRoles.set(editor, 'editor');

console.log(userRoles.get(admin)); // admin
console.log(userRoles.get(editor)); // editor

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое props?

Props (свойства) — это данные, передаваемые от родительского компонента к дочернему в React, которые используются для конфигурации и не могут быть изменены внутри дочернего компонента.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как бы повернул блок на 45 градусов?

Чтобы повернуть блок на 45 градусов, используется свойство CSS transform с функцией rotate. Это свойство позволяет применять различные трансформации к элементам, включая вращение, масштабирование, смещение и наклон.

🚩Пример использования

.rotated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    transform: rotate(45deg);
}

🚩Объяснение

Основной синтаксис
🟠Угол поворота элемента. Может быть положительным или отрицательным значением в градусах (deg), радианах (rad), градусах (grad) или оборотах (turn).

transform: rotate(угол);   

🟠Параметры
Угол поворота элемента. В данном случае элемент поворачивается на 45 градусов по часовой стрелке.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .rotated-box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="rotated-box"></div>
</body>
</html>

🚩Пояснение

🟠Свойство `transform`
Позволяет применять различные визуальные эффекты к элементу, такие как вращение, масштабирование и смещение.
🟠Функция `rotate`
Используется для вращения элемента на заданный угол. Положительные значения поворачивают элемент по часовой стрелке, отрицательные — против часовой стрелки.

🚩Использование в реальных проектах

🟠Вращение элементов
Вращение элементов может использоваться для создания интересных визуальных эффектов, таких как поворот иконок, изображений или блоков текста.
🟠Анимация
В комбинации с анимацией (@keyframes и transition), вращение может создавать динамичные и интерактивные пользовательские интерфейсы.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое React?

React — это библиотека JavaScript для создания пользовательских интерфейсов, основанная на компонентах и виртуальном DOM, что делает её эффективной и удобной для масштабирования.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как сделать вращения по оси x и y заметными?

Чтобы сделать вращения по осям X и Y заметными, нужно учитывать перспективу. Перспектива добавляет глубину к элементам, позволяя визуально различать вращение по осям X и Y. В CSS для этого используются свойства perspective и transform.

🚩Пример использования

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            perspective: 800px;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            margin: 50px;
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        .rotate-x {
            transform: rotateX(45deg);
        }
        .rotate-y {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box rotate-x"></div>
        <div class="box rotate-y"></div>
    </div>
</body>
</html>

🚩Объяснение

🟠Контейнер с перспективой
Определяет глубину перспективы. Меньшие значения делают перспективу более выраженной, большие значения — более плоской.

.container {
    perspective: 800px;
}
   

🟠Элемент с трехмерной трансформацией
Обеспечивает сохранение трехмерных преобразований для потомков элемента. Добавляет плавный переход при изменении трансформации.

.box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    margin: 50px;
    transform-style: preserve-3d;
    transition: transform 1s;
}   

🟠Вращение по оси X
Вращает элемент на 45 градусов вокруг оси X.

.rotate-x {
    transform: rotateX(45deg);
}   

🟠Вращение по оси Y
Вращает элемент на 45 градусов вокруг оси Y.

.rotate-y {
    transform: rotateY(45deg);
}   

🚩Зачем это нужно

🟠Перспектива
Добавляет визуальную глубину, делая трехмерные эффекты более реалистичными.
🟠Трехмерные эффекты
Вращение по осям X и Y без перспективы не будет выглядеть объемным. Перспектива помогает зрительно отличить, что элемент вращается в трехмерном пространстве.

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое хук?

Хук — это функция в React, которая позволяет использовать состояние и другие возможности React в функциональных компонентах (например, useState, useEffect).

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Как сделать анимацию бесконечно повторяющейся?

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

🚩Основные шаги

1⃣Определение ключевых кадров анимации
с помощью @keyframes.
2⃣Применение анимации к элементу с использованием свойства animation и указанием параметра infinite.

🚩Пример использования

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

@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}

Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}

🚩Зачем это нужно

🟠Эффекты на сайте
Бесконечные анимации могут использоваться для создания привлекательных визуальных эффектов на сайте, таких как мерцание, изменение цвета или вращение элементов.
🟠Интерактивность
Такие анимации могут сделать пользовательский интерфейс более динамичным и интересным.

Ставь 👍 и забирай 📚 Базу знаний

🤔 В чём отличие хранения данных в local storage от сессий?

localStorage сохраняет данные бессрочно, пока их не удалят вручную, а sessionStorage хранит данные только на время текущей сессии браузера.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний

🤔 Для чего используются препроцессоры?

Препроцессоры используются для расширения возможностей CSS, упрощения написания стилей и улучшения организации кода. Они добавляют функциональность, которая отсутствует в стандартном CSS, такую как переменные, вложенные правила, миксины, функции и операции. Основные препроцессоры, такие как Sass, LESS и Stylus, помогают разработчикам писать более чистый, структурированный и поддерживаемый код.

🚩Основные преимущества препроцессоров

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

// Пример на Sass
$primary-color: #3498db;
$font-size: 16px;

body {
    color: $primary-color;
    font-size: $font-size;
}   

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

// Пример на Sass
.nav {
    background: #eee;

    ul {
        margin: 0;
        padding: 0;

        li {
            display: inline-block;

            a {
                color: #333;
            }
        }
    }
}
   

🟠Миксины
Миксины позволяют определять повторяющиеся блоки стилей и использовать их в разных местах кода. Это помогает избежать дублирования и облегчает внесение изменений.

// Пример на Sass
@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
}

.box {
    @include border-radius(10px);
}   

🟠Функции и операции
Препроцессоры поддерживают использование функций и операций для выполнения вычислений и обработки значений непосредственно в CSS-коде.

// Пример на Sass
$base-font-size: 16px;

.large-text {
    font-size: $base-font-size * 1.5;
}   

🟠Импорт файлов
Препроцессоры позволяют разбивать CSS на несколько файлов и импортировать их в основной файл стилей. Это улучшает организацию кода и его поддерживаемость.

// Пример на Sass
@import 'variables';
@import 'mixins';
@import 'base';
@import 'layout';
@import 'components';   

Ставь 👍 и забирай 📚 Базу знаний

🤔 Что такое CSS?

CSS (Cascading Style Sheets) — это язык стилей, используемый для описания внешнего вида и форматирования HTML-элементов, включая цвета, размеры, шрифты и расположение.

Ставь 👍 если знал ответ, 🔥 если нет
Забирай 📚 Базу знаний