👁‍🗨 CODORUM

Рассмотрим тип объекта Date в JavaScript ⚜️ Date – это тип объекта, который позволяет создавать, представлять и взаимодействовать с датами и временем (год, месяц, день, час, минута и другие) ⏰ Существуют методы для получения и изменения даты и времени (детальнее на скрине) ⏲️ Стоит учесть, что отсчёт месяцев начинается с нуля, где январь - 00, февраль - 01 и так далее. Поэтому при выводе месяца можно добавить "+1", чтобы месяц отображался со своим привычным номером 👁‍🗨

console.log(`Сегодня ${day}.${month + 1}, ${year} год`);

Ранее был пост про методы Push и Pop, которыми можно добавить элемент в конец массива и удалить последний элемент массива 🟨 Есть аналогичные этим методам методы Shift и Unshift, но: 👉 метод Shift удаляет первый элемент массива 👉 метод Unshift добавляет элемент или элементы в начало массива Применение методов стандартное: указывается название массива и метод через точку. В скобках к методу Unshift можно указать 1 или несколько элементов через запятую, а скобки к методу Shift оставляем пустые (в любом случае он удалит первый элемент массива, независимо от того что мы там укажем) 👁‍🗨

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨 👉 Какие есть способы копирования простого объекта типа obj = {a: 1, b: 2} Есть несколько популярных способов создать копию объекта: 🔸 Spread-оператор (чаще всего)

const copy = { ...obj };

🔸 Object.assign()

const copy = Object.assign({}, obj);

🔸 structuredClone() (подходит и для глубокого копирования)

const copy = structuredClone(obj);

⚠️ Spread и Object.assign() создают поверхностную (shallow) копию. Если в объекте есть вложенные объекты или массивы, они останутся общими. Если требуется независимая копия вложенных данных, стоит использовать structuredClone()

Идея уникальной стилизации списка. attr функция передаёт атрибуты из html-кода и таким образом можно установить свой эмодзи для каждого пункта списка 🔥 Каждому пункту списка задаём класс (в нашем случае custom-marker), в котором значение свойства content должно быть равно селектору attr, принимающего атрибут (в нашем случае emoji) ℹ Псевдоэлемент ::marker напрямую не принимает атрибуты, поэтому свойство content внутри оставляем пустым, а уже в отдельном классе custom-marker указываем что свойство content должно отображать наше значение в виде эмодзи через атрибут emoji 👁‍🗨 Код из гиф:

// ✦ index.js

<div class="main">
  <ol>
    <li class="custom-marker" emoji="🔥 ">Первый пункт</li>
    <li class="custom-marker" emoji="💎 ">Второй пункт</li>
    <li class="custom-marker" emoji="⚡ ">Третий пункт</li>
  </ol>
</div>


// ✦ index.css

.main {
  font-size: 12px;
  font-weight: 600;
}

.main ::marker {
  content: "";
}

.main .custom-marker::before {
  content: attr(emoji);
  font-size: 16px;
}

Промис — это инструмент, позволяющий обрабатывать асинхронные операции, такие как запросы в базу данных и определять условия для решения или отклонения промиса в зависимости от результата операций 🚥 👉 Основные функции промисов: ➖ конструктор Promise для создания нового промиса ➖ метод resolve решающий промис, передавая ему значение результата ➖ метод reject отклоняющий промис, передавая ему значение ошибки ➖ метод then добавляющий обработчик для решения промиса ➖ метод catch добавляющий обработчик для отклонения промиса ✅ Если в следствии выполнения операции внутри промиса мы получаем значение true, которое свидетельствует о выполнении какого-то нашего условия - то срабатывает метод resolve, который передает результат в метод then. С этим результатом мы можем продолжить какие-то дальнейшие операции ❌ Если же получаем false - срабатывает метод reject, передающий значение error в метод catch. Но и с этим значением мы также можем проводить какие-то дальнейшие манипуляции

Что такое конструктор в JS? 🏗 Конструктор – это специальная функция, которая используется для создания и инициализации разных объектов. Основная идея конструкторов заключается в возможности создавать много объектов с одинаковыми свойствами и методами по определенному шаблону 🃏 На скрине пример создания объекта Homer с помощью конструктора Person 🍩 👉 Теперь у объекта есть: ➖ два свойства/параметра: age и hometown ➖ метод speak Но на практике удобнее пользоваться классами, использование которых в разы проще 👁‍🗨 Код со скрина:

// ✦ объявление конструктора
function Person(age, hometown) {
  this.age = age;
  this.hometown = hometown;
  this.speak = function() {
    console.log(`Hi, I'm ${this.age} years old, my hometown is ${this.hometown}`)
  };
}

// ✦ создание объекта с помощью конструктора
let Homer = new Person(40, 'Springfield')

Homer.speak();

С помощью метода Object.assign можно продублировать свойства одного объекта в другой без необходимости объявления дополнительного объекта (для последующего сложения двух объектов или применения Spread оператора для развертывания) 👯‍♀️ Метод применяется просто: первым значением в скобках выступает объект, в который мы хотим добавить свойства из второго объекта. Вторым значением выступает объект, свойства из которого мы хотим добавить *️⃣ В результате первый объект (в который мы копировали свойства с другого объекта) помимо своих свойств теперь будет иметь и свойства второго объекта. Второй же объект останется исходным 👁‍🗨

В JavaScript существует множество различных конструкций 🟨 Конструкции в JavaScript – это общее понятие, охватывающее различные типы синтаксических элементов для управления логикой программы 🚟 👉 Рассмотрим основные условные конструкции, которые помогают выполнять разный код в зависимости от условий: ➖ if...else – абсолютно всеми знакомая конструкция, которая проверяет условие и выполняет код в зависимости от результата. (Тернарный оператор "? :" – более короткая альтернатива конструкции if...else) ➖ switch – удобная конструкция для проверки нескольких значений

componentDidMount – это метод жизненного цикла в компонентах React, срабатывающий сразу после добавления какого-либо компонента (в который был добавлен метод) на страницу (или в DOM) ⚛️ То есть код внутри метода не срабатывает при полном запуске и работе React проекта, а только после встраивания компонента на страницу, в следствие выполнения какого-то действия пользователем, например 🏌️‍♂️ В примере на скрине: когда выбирается категория "Одежда", компонент Clothes добавляется на страницу, и вызывается componentDidMount 👁‍🗨 👉 На практике метод используется для: ➖ загрузки данных с сервера ➖ настройки подписок или таймеров ➖ выполнения действий, требующих доступа к DOM

at-правилa (At-rules) – это CSS правила, определяющие специальные инструкции для обработки стилей, производят изменения в различных аспектах CSS или вводят определенные функциональности 🛃 В видео мы рассмотрели как реализовать анимацию переливания градиента фона текста в CSS, задав правило поведения свойства background-position в @keyframes и задав определенное значение в свойстве animation класса текста 👁‍🗨 Код из видео:

.gradientText {
  background: linear-gradient(to right, #b685ff, #85ebff, #85ffde, #85aeff, #b685ff);
  background-clip: text;
  color: transparent;
  background-size: 200%;
  animation: gradientAnimation 3s linear infinite;
}

@keyframes gradientAnimation {
  0% { background-position: 200% 50%; }
  100% { background-position: 0% 50%; }
}

Рассмотрим тип объекта Function в JavaScript ⚜️ Function – это тип объекта, который используется для определения и вызова функций 💡 Определить функцию можно с помощью выражения и с помощью конструктора 👁‍🗨 👉 Некоторые тонкости типа объектов Function: ➖ функции могут принимать аргументы и их параметры через список аргументов ➖ функции можно вызвать с помощью оператора вызова ➖ объект Function позволяет использовать замыкание для сохранения доступа к переменным с более высокого уровня

Scope – это область видимости для переменных и функций 🔳 Есть три типа Scope: глобальный Scope, локальный (функциональный) и блочный ℹ️  Переменные объявленные на уровень выше будут видны также в скоупе на уровень ниже. То есть, например, переменная "a" с кода на гиф изображении будет доступна в локальном скоупе (области видимости функции Local), но переменная "b", которая объявлена внутри скоупа функции не будет видна в глобальном скоуп 👁‍🗨 Границы скоуп уровней определяются фигурными скобками. И, обычно, в редакторах кода можно увидеть характерную вертикальную линию, которая подсказывает границы внутренних Scope ☑️

Благодаря методу endsWith можно проверить заканчивается ли строка на заданную букву в JavaScript ✏ Применение стандартное: указываем строку и метод endsWith через точку, затем букву в скобках, наличие которой необходимо проверить в конце строки 🔦 Метод возвращает boolean значения true / false в зависимости от результата 🚥 Стоит учитывать регистр, в которой находится буква, которую мы проверяем. Если буква будет правильной, но регистр будет неверный - мы получим значение false 👁‍🗨

Как клиент взаимодействует с сервером с помощью JavaScript 🟨 Запрос от клиента 📨 Когда пользователь нажимает кнопку или выполняет какое-либо действие на веб-странице, браузер (клиент) отправляет запрос на сервер. Это может быть HTTP-запрос, например GET или POST. Обработка на сервере ⚙️ Сервер получает запрос и выполняет необходимые действия: может обратиться в базу данных, обработать данные или выполнить другие операции. После этого сервер формирует ответ. Ответ от сервера 📥 Сервер отправляет ответ к клиенту. Это может быть HTML-страница, JSON-данные или другой тип данных. Обработка ответа в клиенте 🔄 Клиент получает ответ и с помощью JavaScript может обновить пользовательский интерфейс. К примеру, отобразить новые данные без перезагрузки страницы. В видео мы рассмотрели пример запроса с помощью Fetch API 👁‍🗨

Как можно добавить тень от элемента по контуру в CSS? 🔵🕳 Если использовать стандартное свойство для тени box-shadow будет добавлена тень от блока/контейнера/зоны элемента, но благодаря свойству filter со значением drop-shadow можно добиться тени именно по контуру объекта, будь-то неквадратное изображение или текст 🧩 Применяется свойство filter со значением drop-shadow почти так же как и свойство box-shadow, а разница очевидна (пример применения обоих свойств на скрине) 👁‍🗨