👁‍🗨 CODORUM

Как конвертировать массив в объект на JavaScript? Для этого можно воспользоваться обычным развертыванием с участием Spread оператора 🟨 Объявляем объект и в фигурных скобках добавляем Spread оператор (многоточие в данном случае будет считаться Spread оператором) и название массива, который мы хотим конвертировать в объект ✨ 👉 При развертывании: ➖ элементы массива будут конвертированы в свойства объекта ➖ создадутся стандартные ключи для свойств в виде индексов элементов из массива

Благодаря методу parseInt можно проводить вычисления с целыми числами (любые действия будут произведены лишь с целой частью чисел) ⏺️ Обратите внимание на умножение числа 3 на десятичное число со скрина. Десятичная часть числа 3.7 была полностью проигнорирована, то есть число 3 было умножено на целую часть числа 🥚 Следовательно, метод пригодится, если необходимо произвести вычисления с целыми числами и проигнорировать все десятичные части чисел 👁️‍🗨️

Рассмотрим тип объекта Error в JavaScript ⚜️ Error – тип объекта, использющийся для представления исключительных ситуаций и ошибок кода. Он может содержать информацию об ошибке, включая текстовое описание и стек вызовов ❗ Создать новый объект Error можно через конструктор, а вызвать ошибку можно через оператор throw ⛔ В связке со структурой try...catch, которая позволяет обрабатывать ошибки, можно избежать аварийного завершения программы. Она позволяет выполнять блок кода в попытке try и перехватывать любые возникающие в этом блоке ошибки с помощью блока обработки catch 👁️‍🗨️

useState – это React хук, который используется для контролирования какого-либо локального состояния в компоненте и предоставления обновления этого состояния ⚛️ На гифке пример использования хука useState: есть компонент с надписью и кнопкой ⏏️ ➖ "const [count, setCount] = useState(0)" – это состояние, сохраняющее значение переменной count ➖ setCount – функция, обновляющая состояние ➖ значение возле хука "(0)" – это значение переменной count по умолчанию Также кнопке присвоена функция, увеличивающая значение переменной count на единицу – "onClick={() => setCount(count + 1)}" 👁‍🗨 Код из гифки:

import { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  return (
  <div>
      <p>Счетчик: {count}</p>

      <button onClick={() => setCount(count + 1)}>
        добавить
      </button>
  </div>
  );
};

export default MyComponent;

Как сделать поле ввода для регистрации и авторизации как у Google 🔍 Ключевые моменты: ➖ надпись поля ввода (labelline) меняет свое расположение, размер и цвет при нажатии на поле ввода ➖ у неё есть белый фон, благодаря чему при наезде на границу/обводку поля ввода она перекрывает часть линии ➖ сама обводка поля ввода меняет лишь толщину и цвет, а также высоту (height) и ширину (width) лишь на 2 пикселя, благодаря чему создается впечатление что обводка при нажатии на поле ввода "жирнеет" внутрь Классы для анимации надписи поля ввода (больше кода не помещается в пост):

.labelline {
  position: absolute;
  font-size: 2em;
  padding: 0 25px;
  margin: 0 12px;
  background-color: white;
  transition: 0.2s ease;
}

input:focus,
input:valid {
  border: 3px solid blue;
  height: 78px;
  width: 498px;
}

input:focus + .labelline,
input:valid + .labelline{
  color: blue;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  transform: translate(-15px, -16px) scale(0.83);
  z-index: 1111;
}

Через свойство length можно узнать количество элементов в интересующем нас массиве или количество символов в строке JavaScript 🟨 Для этого достаточно дописать length через точку после названия массива или строки, количество элементов которого/которой мы хотим узнать 📐 Ну и вывести в новую переменную или в консоль 👁‍🗨

Скоупинг – понятие, охватывающее несколько аспектов, направленных на правильное управление переменными и функциями кода. Для избежания конфликтов и обеспечения прозрачного и безопасного взаимодействия элементов программы 🧿 Основные аспекты скоупинга: Объявление переменных, Объем видимости, Жизненный цикл, Поднятие, Замыкание 🔹 Рассмотрим аспект – жизненный цикл ⏱️ Все переменные в коде существует определенное время. Жизненный цикл локальных переменных, например, короче чем глобальных переменных. Всё потому, что глобальные переменные существуют в течении всего времени работы программы, а локальные только во время работы функций, например. Жизненный цикл блочных переменных обычно ещё короче 👁‍🗨

В JavaScript существует множество типов операторов 🟨 Рассмотрим такой тип операторов - арифметические операторы 🧮 Они предназначены для работы с числовыми значениями 🔢 А именно для сложения чисел, вычитания, умножения, деления, вычисления остатка от деления, возведения к степени, инкремента и декремента ➗

Указав путь к изображению в значении url свойства cursor можно поменять отображение курсора 🟦 Можно использовать разные форматы импортируемого изображения, но если вы импортируете невекторное изображение, к примеру формат png, то лучше чтобы оно не превышало размер 100х100 пикселей 👆

.body {
  cursor: url(/public/icons/cursor.png), auto;
}

Async await – это функция JavaScript, позволяющая писать асинхронный код с чистой и понятной синтаксической структурой. Слово async определяет асинхронную функцию, а слово await указывает на ожидание выполнения асинхронной операции 🔀 Если простыми словами, то основная функция отмечена ключевым словом async, которая возвращает какой-то объект Promise. А ключевое слово await используется внутри этой функции (функции async) для ожидания результатов выполнения Promise 🎎 В видео мы рассмотрели пример с функцией async await по вычислению количества процентов числа "b" от числа "a". Часть функции percentFromNum (await) вычислила процент от числа "a", а основная часть функции calculate (async) умножила результат полученный с функции percentFromNum на число "b" 👁‍🗨

С помощью метода findLast можно найти последний элемент массива удовлетворяющий определенное условие в JavaScript 🟨 Для этого достаточно задать массив, прописать метод findLast, в скобках которого указать условие для элемента 🔦 Отталкиваясь от этого условия будут поочередно перебираться все элементы с конца массива, пока не будет найден первый с конца массива элемент удовлетворяющий заданное условие 🔬 Когда такой элемент будет найден – он будет выведен в консоль, в случае кода на скрине, и поиск будет остановлен 👁‍🗨

Цикл – это управляющая конструкция, обеспечивающая многократное выполнение блока кода до выполнения заданного условия. Циклы сокращают количество дублирования кода и помогают эффективно работать с данными 🔂 Один из самых распространенных видов циклов – цикл "for" ℹ В следствие выполнения цикла for на скрине было проведено 3 итераций, на каждой из которых значение переменной "i" увеличивалось на единицу (i++), начиная со значения "i = 0", пока значение переменной не достигло максимального допустимого значения для соблюдения условия цикла и цикл прекратил работу (запуск новых итераций) ✋ На каждой итерации в консоль выводилось новое актуальное значение переменной 👁‍🗨

В React существует множество типов компонентов ⚛ Рассмотрим тип компонента - Компонент класса 👤 Компонент класса – один из основных способов создания компонентов, подход которого основан на классах ES6 и использует расширение от базового класса React Component 👥 Можно передавать данные от одного компонента класса к другому компоненту класса 🤝 На примере кода выше есть класс MyComponent который наследует React Component. В конструкторе определяется исходное состояние компонента, а метод render отвечает за отображение элементов в виртуальном DOM 👁‍🗨

Если необходимо распаковать элементы массива таким образом, чтобы каждый элемент массива был присвоен новой самостоятельной переменной – можно воспользоваться Rest оператором 📤 ➖ Такой подход называется деструктивным присваиванием: объявляем сразу несколько новых переменных (перечислив их в квадратных скобках). Элементы, которые не нужно присваивать отдельным переменным можно объединить в массив указав его название в конце конструкции и Rest оператор перед ним 👁‍🗨 Если необходимо распаковать элементы массива в новый массив – можно воспользоваться Spread оператором. Для этого при объявлении нового массива нужно указать название нового массива в квадратных скобках и Spread оператор перед названием 📥

Как реализовать анимацию загрузки контента на странице в виде движения линии по блоку с помощью CSS? 🟦 Для этого нужно определить блок в котором будет происходить анимация и прописать для него псевдоэлемент :before, в котором стилизовать линию 📏 Последнее что понадобится создать анимацию в @keyframes ▶️ Код из видео:

// index.js

<div class="block">
  <div class="ava"/>
  <div style={{ display: "block" }}>
    <div class="name"/>
    <div class="description"/>
  </div>
</div>


/* index.css */

.block {
  display: flex;
  justify-content: center;
  align-items: center;
}

.block:before {
  content: '';
  position: absolute;
  height: 300px;
  width: 40px;
  background: #ffffffdd;
  filter: blur(4px);
  transform: rotate(-20deg) translateX(-200px);
  animation: line 1s linear infinite;
}

@keyframes line {
  25% {
    transform: rotate(-20deg) translateX(300px); ;
  }
  100% {
    transform: rotate(-20deg) translateX(300px); ;
  }
}