Пост для новичков канала 🖖

В сентябре мы написали сайт-визитку на ReactJS. Кому интересно — приглашаем к просмотру ⚛️

Плейлист с частями доступен на нашем ютуб канале 🪪

В рамках частей мы также рассмотрели интересные моменты html верстки 🟧, стилизации и создании разных CSS анимаций 🟦

Подробности в первой части — анонс макета и подготовка среды 👈 жми, чтобы посмотреть.

На финальный результат можно взглянуть в 20-й части 👈

Метасимвол — это один из типов символов, которые в сумме помогают формировать более точные регулярные выражения для поиска групп символов или паттернов в строках 🔍

В видео мы рассмотрели 2 метасимвола, которые присутствуют в регулярном выражении для поиска слов, начинающихся с буквы "a" *⃣

👉 А именно:
➖ \b - метасимвол, указывающий на то, что мы ищем букву в начале слова
➖ \w+ - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком

Код со скрина:

let str = "ah sh*t, here we go again..."

// ✦ Регулярное выражение
let regexp = /\ba\w+/g;

// "/" - символ, в который оборачиваются выражения
// "\b" - метасимвол, указывающий на то, что мы ищем букву в начале слова
// "a" - первая буква слов, которые мы ищем
// "\w+" - метасимвол, требующий показать найденные слова, в которых присутствует искомая буква, целиком
// "/g" - глобальный поиск (флаг)

console.log(str.match(regexp));

Рубрика разборов возможных вопросов из собеседований по JavaScript 🟨

👉 Как проверить, является ли число конечным в JavaScript? Или оно бесконечное? ♾

В JavaScript проверить, является ли число конечным, можно с помощью встроенной функции isFinite()

isFinite() автоматически преобразует аргумент в число, если это возможно. В отличие от метода объекта Number.isFinite() 👁‍🗨

C помощью HTML-тега span можно стилизовать определенный текст или слово в предложении не задев стиль остального текста предложения 🟧

span — это HTML-тег, используемый для определения инлайнового элемента, который может содержать текст или другие встроенные элементы 🎞

👉 В CSS можно использовать селекторы для определения стилей элементов, обернутых в span-теги:
➖ на скрине у нас есть предложение внутри блока div, обернутое в тег <p></p>
➖ внутри этого предложения часть строки, которой присвоен класс accent, обёрнута в тег <span></span>
➖ теперь эту часть строки можно индивидуально стилизовать через класс accent

При помощи Spread оператора можно легко объединить массивы или объекты в JavaScript 🤝

🪵 Для того чтобы объединить массивы, достаточно объявить новую константу и в квадратных скобках перечислить массивы, которые необходимо объединить через запятую, указав перед ними многоточия. В данном случае таким многоточием обозначается Spread оператор.

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

Встроенные функции (built-in functions) — это готовые функции, уже встроенные в JavaScript, которые можно использовать без дополнительного объявления. Они значительно упрощают работу, позволяя быстро выполнять распространенные задачи 🪡

Примеры:
🔸 eval() — выполняет строку как код
🔸 parseInt() — преобразует строку в целое число

В JavaScript глобальных встроенных функций – около 12. Но четко зафиксировать их часто бывает тяжело, так как:
👉 стандарт ECMAScript регулярно обновляется и в каждой новой версии могут появляться новые методы и функции;
👉 есть встроенные объекты (Math, String, Array и т. п.), содержащие много своих методов (функции), которые часто называют встроенными (но фактически они не являются глобальными встроенными функциями, позже разберем почему).

Благодаря методу startsWith можно проверить начинается ли строка с указанной буквы или символа в JavaScript 🔦

Применение метода стандартное: указываем строку и метод startsWith через точку, в скобках указываем букву, наличие которой необходимо проверить в начале строки 🔬

Важно учесть, что нужно уточнять регистр буквы, которую мы проверяем: верхний или нижний. Если буква будет правильной, но регистр будет не тот - получим значение false 👁‍🗨

Как сделать плавное поднятие блока вверх при hover наведении в CSS? 🟦

👉 Для этого нужна комбинация из всего 2-х свойств:
➖ свойство transition в классе блока с указанием значения времени, за которое будет выполнятся анимация смещения блока
➖ свойство transform в псевдоклассе hover для блока с указанием расстояния и направления смещения блока

Код из видео:

.card {
  width: 100px;
  height: 150px;
  display: grid;
  text-align: center;
  place-items: center;
  background-color: #141117;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.5s; /* время, за которое выполняется смещение */
} 

.card:hover {
  transform: translateY(-5px); /* направление и расстояние */
  box-shadow: 0px 5px 5px #14111790;
}

Рекурсия ‒ это процесс вызова функцией самой себя для решения определенной задачи или вычисления определенного значения до тех пор, пока не будет достигнуто базовое условие или сделано достаточное количество вызовов 🔁

В примере кода на скрине есть рекурсивная функция по нахождению факториала числа 🧮

И эта функция будет выполняться снова и снова пока не будет достигнуто условие в if ⛔

Каждое повторение выполнения функции уменьшает значение n, которое на третьей итерации уменьшится до единицы (до условия прекращения выполнения функции) 👁‍🗨

Рассмотрим тип объекта Promise в JavaScript ⚜️

Promise – это тип объекта, который используется для работы с асинхронными операциями и представления результата их выполнения 🔀

Промисы принимают два параметра: "решение" (resolve) и "отклонение операции" (reject) 🚥

А также у Промисов есть методы: then для обработки результата resolve и catch для обработки ошибки reject 👁‍🗨

Код со скрина:

const LoginPromise = new Promise((resolve, reject) => {

   const password = '123';

   if (password === 'codorum') { resolve('success'); }
   else { reject('wrong password'); }
});

LoginPromise
   .then((result) => { console.log(result); })
   .catch((error) => { console.error(error); });

На собесах, в дополнение к техническим вопросам и заданию, иногда внезапно задают общие вопросы, поэтому сегодня немного расширим наш общий кругозор, вместо разбора очередного технического вопроса 🙌

👉 Каких известных людей из мира JS вы знаете?

Казалось бы вопроса проще некуда не придумать и будет очень хорошо, если мы, как минимум, будем знать самого важного человека из мира JS – самого создателя Брендана Эйха, которому, кстати, завтра (4 июля) день рождения! 🎂

Брендан Эйх – программист, создавший JavaScript в 1995 году всего за 10 дней, работая в компании Netscape. Сначала язык назывался Mocha 🥴 (кофе Моккачино/Мокко с итал. mocaccino ☕), потом LiveScript, и уже впоследствии — JavaScript 🟨

Интересно, что JavaScript задумывался как легкий язык для скриптов в браузере – и никто тогда не представлял и не ожидал, что он станет основой современной веб-разработки 👁‍🗨

useContext – это React хук, позволяющий компонентам Реакт проекта принимать данные из контекстов ⚛

👉 useContext лучше использовать:
➖ когда данные используются во многих компонентах на разных уровнях (например: тема, язык, текущий пользователь)
➖ чтобы избавиться от prop drilling (процесс передачи пропсов через несколько уровней вложенных компонентов)
➖ для лучшей структурированности кода

Код из видео:

import React, { createContext, useContext } from 'react';


const Context = createContext();

// основной компонент
const MainComponent = () => {
  const number = 123;

  return (
    <Context.Provider
      value={number}>
      <ChildComponent />
    </Context.Provider>
  );
};

// подкомпонент
const ChildComponent = () => {
  const num = useContext(Context)

  return <p>{num}</p>; // num = number = 123
};

HTML-теги для быстрой стилизации текста в HTML-разметке без задействования CSS 🟧

➖ <b> или же <strong>: <b> — просто визуально выделяет, делая текст жирным, а <strong> — имеет семантическое значение (важно для доступности, SEO).
➖ <i> или же <em>: <i> — лишь стиль, <em> — семантический акцент.
➖ <s> или же <del>: <s> — обозначает устаревшее, но все еще присутствующее (например, старая цена), <del> — текст официально удалён.
➖ <u> или же <ins>: <u> — лишь стиль, <ins> — имеет семантическое значение (для отслеживания изменений, истории правок).

В JavaScript существует своё разнообразие структур данных. Разберем структуру данных HashMap 🟨

HashMap – структура данных, позволяющая хранить данные в виде пар "ключ-значение", и обеспечивает быстрый доступ к этим данным по ключу 🔑

Роль хэшмапов могут выполнять объекты или Map 🗂

Ключи в HashMap могут быть любого типа (в случае объекта – только символ или строка, а в случае Map – любые типы). Значения привязываются к ключам и для получения значения нужно знать ключ 🔐

Хэшмапы можно использовать вместо switch, как в примере с кодом со скрина 👁‍🗨

Принцип работы функции в JS ⚙

Функция – это блок кода, выполняющий определенное действие или вычисление. Функция позволяет сгруппировать определенную функциональность, чтобы использовать её многократно без необходимости повторения кода. Это позволяет создавать многофункциональные программы с меньшим объемом кода и обеспечивает более легкую работу с кодом в большом проекте 🕹

👉 Основные этапы работы функции включают:
➖ определение
➖ вызов
➖ исполнение

Функция принимает параметры, которыми выполняет определенные действия внутри функции 👁‍🗨

С помощью метода filter можно отфильтровать элементы массива в JavaScript 🔽

Метод создает новый массив, в который переносятся элементы, удовлетворяющие заданное условие из основного массива 🤲

Для применения метода: указываем массив с элементами и метод filter, в скобках указываем условие для отбора 🚥

Элементы основного массива могут быть любого типа: числа, строки, объекты, булевые значения, даже undefined или null. Задача метода – оставить только те элементы, для которых условие возвращает true 👁‍🗨

Как сделать чтобы ссылка открывалась в новой вкладке по нажатию на кнопку (html-элемент) в HTML? 🟧

Во-первых, следует использовать html-элемент <a>, предназначенный для создания гиперссылок 🔗

Во-вторых, к нему необходимо добавить атрибут target со значением "_blank" 🔸

В видео мы рассмотрели пример кнопки-ссылки, реализованной с помощью html-элемента <a> 👁‍🗨