👁‍🗨 CODORUM — пишу на JavaScript

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

Как сделать чтобы ссылка открывалась в новой вкладке по нажатию на кнопку (html-элемент) в HTML? 🟧 Во-первых, следует использовать html-элемент <a>, предназначенный для создания гиперссылок 🔗 Во-вторых, к нему необходимо добавить атрибут target со значением "_blank" 🔸 В видео мы рассмотрели пример кнопки-ссылки, реализованной с помощью html-элемента <a> 👁‍🗨

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

Принцип работы функции в JS ⚙ Функция – это блок кода, выполняющий определенное действие или вычисление. Функция позволяет сгруппировать определенную функциональность, чтобы использовать её многократно без необходимости повторения кода. Это позволяет создавать многофункциональные программы с меньшим объемом кода и обеспечивает более легкую работу с кодом в большом проекте 🕹 👉 Основные этапы работы функции включают: ➖ определение ➖ вызов ➖ исполнение Функция принимает параметры, которыми выполняет определенные действия внутри функции 👁‍🗨

В JavaScript существует своё разнообразие структур данных. Разберем структуру данных HashMap 🟨 HashMap – структура данных, позволяющая хранить данные в виде пар "ключ-значение", и обеспечивает быстрый доступ к этим данным по ключу 🔑 Роль хэшмапов могут выполнять объекты или Map 🗂 Ключи в HashMap могут быть любого типа (в случае объекта – только символ или строка, а в случае Map – любые типы). Значения привязываются к ключам и для получения значения нужно знать ключ 🔐 Хэшмапы можно использовать вместо switch, как в примере с кодом со скрина 👁‍🗨

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

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
};

На собесах, в дополнение к техническим вопросам и заданию, иногда внезапно задают общие вопросы, поэтому сегодня немного расширим наш общий кругозор, вместо разбора очередного технического вопроса 🙌 👉 Каких известных людей из мира JS вы знаете? Казалось бы вопроса проще некуда не придумать и будет очень хорошо, если мы, как минимум, будем знать самого важного человека из мира JS – самого создателя Брендана Эйха, которому, кстати, завтра (4 июля) день рождения! 🎂 Брендан Эйх – программист, создавший JavaScript в 1995 году всего за 10 дней, работая в компании Netscape. Сначала язык назывался Mocha 🥴 (кофе Моккачино/Мокко с итал. mocaccino ☕), потом LiveScript, и уже впоследствии — JavaScript 🟨 Интересно, что JavaScript задумывался как легкий язык для скриптов в браузере – и никто тогда не представлял и не ожидал, что он станет основой современной веб-разработки 👁‍🗨

Рассмотрим тип объекта 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); });

Рекурсия ‒ это процесс вызова функцией самой себя для решения определенной задачи или вычисления определенного значения до тех пор, пока не будет достигнуто базовое условие или сделано достаточное количество вызовов 🔁 В примере кода на скрине есть рекурсивная функция по нахождению факториала числа 🧮 И эта функция будет выполняться снова и снова пока не будет достигнуто условие в if ⛔ Каждое повторение выполнения функции уменьшает значение n, которое на третьей итерации уменьшится до единицы (до условия прекращения выполнения функции) 👁‍🗨

Как сделать плавное поднятие блока вверх при 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;
}

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

Встроенные функции (built-in functions) — это готовые функции, уже встроенные в JavaScript, которые можно использовать без дополнительного объявления. Они значительно упрощают работу, позволяя быстро выполнять распространенные задачи 🪡 Примеры: 🔸 eval() — выполняет строку как код 🔸 parseInt() — преобразует строку в целое число В JavaScript глобальных встроенных функций – около 12. Но четко зафиксировать их часто бывает тяжело, так как: 👉 стандарт ECMAScript регулярно обновляется и в каждой новой версии могут появляться новые методы и функции; 👉 есть встроенные объекты (Math, String, Array и т. п.), содержащие много своих методов (функции), которые часто называют встроенными (но фактически они не являются глобальными встроенными функциями, позже разберем почему).

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

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

Y