👁‍🗨 CODORUM

Благодаря методу push можно добавить один или несколько элементов в конец массива ⤵️ Применение метода простое: нужно лишь указать массив с новой строки, через точку указать метод push и в скобках указать элемент или элементы, которые мы хотим добавить в массив ℹ️ По сути это единственное предназначение метода и, к сожалению, его нельзя использовать для добавления свойств в объект. Тем не менее метод необходимо знать для работы с массивами 👁‍🗨 Код со скрина:

let persons = ['Heisenberg', 'Pinkman', 'Gustavo'];

persons.push('Saul');

console.log("persons =", persons);



let numbers = [1, 2];

numbers.push(3, 4);

console.log("numbers =", numbers);

Регулярные выражения – это инструмент позволяющий находить, заменять и валидировать текстовые данные ⌨️ Они состоят из символов разных типов, используя которые определяется некий шаблон, по которому и можно найти, заменить или провалидировать данные 🗄 В видео мы рассмотрели как благодаря регулярному выражению можно реализовать функцию для проверки правильности ввода электронной почты 👁‍🗨 Код из видео:

function validateEmail(email) {
  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
  return emailRegex.test(email);
}

// Проверка данных:
const email1 = "example@example.com";
const email2 = "invalid-email";

console.log("Правильность ввода email1:", validateEmail(email1));
console.log("Правильность ввода email2:", validateEmail(email2));

В JavaScript есть метод Number, который конвертирует данные разного типа в числа 🔢 По примеру со скрина у нас были 2 переменные с boolean значениями: a ("true"), b ("false") 🚥 В следствии применения метода boolean значения переменных конвертировались в числовые значения: a ("1"), b ("0") 🔢 Казалось бы, применение метода на этом ограничивается, ведь если конвертировать строковое значение методом Number мы получим NaN, но методом Number мы также можем конвертировать данные связанные с датами в числа или даже объекты в числа 👁‍🗨 Код со скрина:

var a = true; 
console.log('значение переменной "a" до применения метода:', a)

var TrueToNum = Number(a);
console.log('значение переменной "a" после применения метода:', TrueToNum)


var b = false; 
console.log('значение переменной "b" до применения метода:', b)

var FalseToNum = Number(b);
console.log('значение переменной "b" после применения метода:', FalseToNum)

В этом видео я показал как сделать поле ввода для регистрации и авторизации как у 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;
}

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

const obj1 = { name: "Brandon", age: 26 };
const obj2 = { role: "distributor" }

Object.assign(obj1, obj2);


console.log(obj1);

Babel – это JavaScript компилятор, который используется для преобразования современного JavaScript-кода в код, поддерживаемый более старыми браузерами или средами выполнения. Babel помогает разработчикам писать современный код без заботы о совместимости с разными средами выполнения 🅱️ Babel имеет несколько важных ролей: ➖ поддержка современных стандартов JavaScript ➖ совместимость с JSX ➖ транспиляция экспериментальных функций ➖ поддержка полей классов и других новшеств Как это работает? Babel использует плагины для преобразования разных частей современного синтаксиса JavaScript. Каждый плагин отвечает за определенную функциональность, например преобразование стрелочных функций, классов, шаблонных строк и т.д. Babel также может использовать пресеты (наборы плагинов) для комплексной поддержки разных версий JavaScript 👁‍🗨

Благодаря методу pop мы можем удалить последний элемент массива 🔫 Но если мы объявим новую переменную, которая будет равна применению метода pop к массиву с элементами мы можем получить противоположный по сути эффект. То есть последний элемент наоборот будет сохранен, а все остальные элементы будут удалены ↔️ Но, на самом деле, в то же время метод все таки будет применен для массива с элементами. То есть последний элемент все таки будет удален с массива, но одновременно он будет присвоен новой переменной 👁‍🗨 Код со скрина:

// ✦ Удаление последнего элемента массива
let array = ['green', 'blue', 'red'];

array.pop();
console.log("Массив array после применения метода pop:", array)


// ✦ Присвоение последнего элемента массива в переменную
let numbers = [1, 2, 3];

let deleted_num = numbers.pop();
console.log("numbers =", numbers)
console.log("deleted_num =", deleted_num)

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

// ✦ index.js

<div className="main">
  <ol>
    <li className="custom-marker" emoji="🔥 ">Первый пункт</li>
    <li className="custom-marker" emoji="💎 ">Второй пункт</li>
    <li className="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;
}

try...catch – это конструкция, которая позволяет контролировать обработку ошибок во время выполнения кода 👮 Она состоит из двух основных блоков: ➖ try, где выполняется код, который может привести к ошибкам ➖ catch, обрабатывающий ошибку, если она возникает в блоке try Также может быть дополнительный 3-й блок finally, который выполняется всегда, независимо от того, возникла ошибка или нет 👁‍🗨 Код из видео:

try {
  // Блок кода, где возможны ошибки
  let x = y + 10; // Это вызовет ошибку, поскольку переменная "y" не определена
} catch (error) {
  // Блок кода для обработки ошибок
  console.log('Произошла ошибка:', error.message);
}

Одним постом выше мы рассматривали как получить значения свойств объекта благодаря методу Object.values, с помощью же методу Object.keys мы можем узнать ключи этих свойств 🔑 Применяется метод Object.keys аналогично методу Object.values. Только вместо массива значений свойств объекта мы получаем массив с элементами состоящих из ключей свойств объекта 👁‍🗨 Следовательно, метод Object.keys не менее полезен и удобен, чем метод Object.values и тоже часто может пригодится ✔️ Код со скрина:

// ✦ Объект с тремя свойствами
const user = { name: 'Ignat', age: 30, role: 'admin' };

// ✦ Массив с тремя элементами (в качестве элементов
// выступают ключи свойств объекта user)
const array = Object.keys(user);

console.log("array =", array);

Благодаря методу Object.values можно легко конвертировать значения свойств объекта в элементы массива 🌀 У объекта есть, допустим, 3 свойства и с помощью метода мы как бы вытягиваем значения этих свойств делая их самостоятельными элементами, собирая в отдельный массив 👁‍🗨 Метод удобный и часто полезный ✔️ Код со скрина:

// ✦ Объект с тремя свойствами
const user = { name: 'Ignat', age: 30, role: 'admin' };

// ✦ Массив с тремя элементами (в качестве элементов
// выступают значения свойств объекта user)
const array = Object.values(user);

console.log("array =", array);

С помощью анимации, прописанной в правиле @keyframes и индивидуальному значению дополнительного свойства animation-delay для каждой фигуры можно создать волнообразную анимацию загрузки из точек 🪄 В видео я показал как реализовать плавную волнообразную анимацию загрузки из точек и рассказал про свойство animation-delay, в значении которого мы можем прописать вычисление задержки начала анимации фигуры 👁‍🗨 Основной код из видео:

// ✦ index.js

<div className="loader">
  <div class="dot" style={{ animationDelay: "calc(0.1s * 1)" }}/>
  <div class="dot" style={{ animationDelay: "calc(0.1s * 3)" }}/>
</div>



// ✦ index.css

.loader {
  display: flex;
  justify-content: center;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 80px 5px;
  border-radius: 50%;
  background-color: black;
  transform: scale(0.2);
  animation: animationDot 2s linear infinite;
}

@keyframes animationDot {
  0% { transform: scale(0.2) }
  30% { transform: scale(1) }
  70%, 100% { transform: scale(0.2) }
}

Условный рендеринг (conditional rendering) – это отображение компонентов или контента в зависимости от определенных условий или состояний 💎 Реализовать это отображение можно с помощью различных способов, таких как: ➖ применение оператора "if/else" ➖ использование тернарного оператора "? :" ➖ использование метода render в классовых компонентах ➖ использование метода return в функциональных компонентах В видео мы рассмотрели пример отображения разного текста в зависимости от значения состояния "isLoggedIn", которое регулируется кнопкой 👁‍🗨 Код из видео:

import React, { useState } from 'react';

const Component = () => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(prevState => !prevState);
  };

  return (
    <div>
      <h1>{isLoggedIn ? 'Вы успешно авторизованы' : 'Пожалуйста, авторизуйтесь'}</h1>
      <button onClick={handleLoginClick}>
        {isLoggedIn ? 'Выйти' : 'Войти'}
      </button>
    </div>
  );
};

export default Component;

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

function percentFromNum(a) {
  return new Promise
  (resolve => {
  resolve(100/a); // 2
  });
}

async function calculate(a, b) {
  console.log("вычисляем сколько % составляет число", b, "от числа", a) // 1
  let res = await percentFromNum(a);
  let percent = res * b; // 3
  console.log("число", b, "составляет", percent + "% от числа", a); // 4
}

calculate(500, 70);

setTimeout – метод, с помощью которого можно создать задержку выполнения функции на указанное время в милисекундах ⏲ При работе с методом важно правильно определять уровни Scope (зоны видимости) 👇 Если метод лежит на глобальном Scope уровне, то время задержки для выполнения функции начинает отсчет после запуска кода ℹ️ А если метод лежит, к примеру, на дочернем Scopе уровне глобального Scope уровня, то время задержки для выполнения функции начинает отсчет после запуска функции, которая лежит на глобальном Scope уровне ℹ️ 1-й код из видео:

// Функция 1 (выполняется сразу после запуска кода)
console.log("1 функция выполнилась");

// Функция 2 (выполняется через 1 секунду после запуска кода) 
setTimeout(() => {
  console.log("2 функция выполнилась");
}, 1000);

// Функция 3 (выполняется через 2 секунды после запуска кода) 
setTimeout(() => {
  console.log("3 функция выполнилась");
}, 2000);

Сегодня хочу поделится с вами как сделать меню из блоков с помощью html элемента <input> 📑 Для этого мне также понадобился хук useState, так как я пишу в React ⚛️ А также в видео я показал как стилизовал блок и класс input с его псевдоклассом :checked + класс label 👁‍🗨 Основная часть кода из видео:

// ✦ index.js
import React, { useState } from 'react';

const Component = () => {
    const [selected, setSelect] = useState('');

    const ChangeSelect = (event) => {
      setSelect(event.target.value);
    };

    return (
      <div className='main'>
        <input type="radio" id="b1" value="b1"
        checked={selected === 'b1'} onChange={ChangeSelect}/>
        <label htmlFor="b1" className='block'>1 блок</label>

        <input type="radio" id="b2" value="b2"
        checked={selected === 'b2'} onChange={ChangeSelect}/>
        <label htmlFor="b2" className='block'>2 блок</label>
      </div>
    );
};

export default Component;

Cookie – это небольшой фрагмент данных, который хранит веб-сайт на компьютере пользователя 🍪 Cookie используются для сохранения информации о пользователе и его взаимодействии с сайтом 🗄 В видео мы рассмотрели пример создания cookie на странице компонента React ⚛️ В конце видео показал где хранятся cookie страницы в браузере 👁‍🗨 Код из видео:

import React from 'react';

class CookieExample extends React.Component {
  componentDidMount() {
    // Cookie
    this.createCookie('username', 'codorum', 1);
    // '1' - это количество дней, на которое мы сохраняем cookie
  }

  createCookie(name, value, days) {
    const expires = new Date(new Date().getTime() + days * 24 * 60 * 60 * 1000).toUTCString();
    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
  }

  render() {
    return (
      <div>
        <h1>Cтраница</h1>
      </div>
    );
  }
}

export default CookieExample;

С помощью метода every можно проверить удовлетворяет ли каждый элемент массива какому-то условию ⏺ Основная и по сути единственная функция метода every – проверка элементов массива на определенное условие, но метод можно комбинировать с другими методами, такими как map, filter или reduce, чтобы добиться какого-то определенного результата 🔽 Метод возвращает true, если условие выполняется для всех элементов массива, и false, если напротив 👁‍🗨 Код со скрина:

let numbers = [6, 13, 20, 21, 23, 27, 30, 8, 12, 14];

// проверка, все ли элементы больше чем 5
let OverThan5 = numbers.every(num => num > 5);

console.log("Все элементы массива numbers больше пяти:", OverThan5);

Связка метода map с методами toUpperCase и toLowerCase позволяет легко переводить слова предложения в верхний или нижний регистр 🔃 Для этого достаточно объявить новые переменные и через знак равно указать массив с предложениями или словами, которые мы хотим перевести в верхний или нижний регистр 👁‍🗨 Далее указать метод map и в скобках указать, что для слов мы хотим применить метод toUpperCase или toLowerCase ✔️ map – метод позволяющий изменять массив, получая в качестве результата новый массив с изменёнными элементами первоначального массива 🗺 Код из гифки:

let sentence1 = ["Codorum - пишу на JavaScript"];
// перевод слов в верхний регистр
let sentenceUpperCase = sentence1.map(word => word.toUpperCase());

console.log('sentenceUpperCase =', sentenceUpperCase);


let sentence2 = ["ВТОРОЕ ПРЕДЛОЖЕНИЕ"];
// перевод слов в нижний регистр
let sentenceLowerCase = sentence2.map(word => word.toLowerCase());

console.log('sentenceLowerCase =', sentenceLowerCase);

attr функция – это функция, позволяющая использовать значения атрибутов HTML-элементов в качестве значений свойств в CSS 🎏 Функция позволяет динамически использовать значения атрибутов для отображения текста, URL или других значений, определенных в HTML, непосредственно в свойствах CSS 🔷 В видео я показал, как передать переменную count из React компонента в псевдоэлемент ::before 👁‍🗨 Код из видео:

// ✦ index.js

import React from 'react';
  
const Component = () => {
  
  let count = 3;

  return (
    <div>
      <button count={count}>Кнопка</button>
    </div>
  );
};
  
export default Component;

// ✦ index.css

button {
  position: relative;
}

button::before {
  content: attr(count);
  position: absolute;
  top: -0.75em;
  right: -0.75em;
  width: 1.5em;
  height: 1.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background-color: #f74a67;
  color: white;
}