idk Frontend

🤓 Когда использовать if...else в JS? Всем привет! if...else — это конструкция, которая позволяет выполнять определенный блок кода в зависимости от условия. 🔤 Синтаксис выглядит так:

if (условие) {
    // выполнится, если условие истинно
} else {
    // выполнится, если условие ложно
}

🔤 Основные компоненты if...else: — if: это начало условия, которое проверяет истинность выражения внутри скобок. — Условие: выражение, которое оценивается как true или false. Если условие истинно, будет выполнен код внутри блока if. Если условие ложно, выполнится блок else (если он есть). — else (необязательно): это зарезервированное слово для выполнения кода, если условие в if ложно. ✨ Пример использования:

let x = 10;

if (x > 5) {
    console.log("x больше 5");
} else {
    console.log("x меньше или равен 5");
}

🤔 Так когда использовать if...else? — При необходимости принятия решения в зависимости от определенного условия. Например, когда нужно выполнить разные действия в зависимости от значения переменной, результатов каких-то вычислений или же при проверке пользовательского ввода.

❗️ Если появляется необходимость использовать if...else множество раз, для чистоты и облегчённости кода, можно использовать конструкцию switch. Про неё я тоже рассказывал: Тык!

idk Frontend | #Конспект #js

Senior-разработчик создал крутейший канал про Frontend — просто, понятно, интересно. Подписывайся: @frontend

👨‍💻 Шпаргалка по значениям свойства position в CSS! Свойство position определяет способ позиционирования элемента на странице. Доступны несколько значений, каждое из которых имеет свои особенности: 🔤 static - по умолчанию для всех элементов. Элементы с position: static позиционируются согласно обычному потоку документа. 🔤 relative - элемент позиционируется относительно своего изначального положения. Свойства top, right, bottom, left могут использоваться для смещения элемента. 🔤 absolute - элемент вырывается из обычного потока документа и позиционируется относительно ближайшего родителя с позицией relative, или относительно окна браузера, если у родителя нет позиции relative. 🔤 fixed - элемент позиционируется относительно окна браузера. Он остается на месте при прокрутке страницы. 🔤 sticky - элемент ведет себя как relative до тех пор, пока он видим в окне просмотра. При прокрутке за пределы стики элемента он становится зафиксированным. ✨ Пример синтаксиса:

.element1 {
   position: static; /* по умолчанию */
   left/right/top/bottom: не сработают
}

.element2 {
   position: relative/absolute/fixed/sticky;
   top: 10px;
   left: 20px;
   right: 10px;
   bottom: 20px;
}

😎 Попрактиковаться со значениями свойства position можно на этом тренажёре: Тык!

idk Frontend | #Шпаргалка

let person = {name: 'Anton'};
let member = [person];
person = null;
console.log(member);

idk Frontend | #Викторина

👨‍💻 Зачем нужны вендорные префиксы в CSS? Всем привет! Для начала разберём, что это вообще такое:

Сразу хочу сказать, что с развитием CSS и улучшением поддержки стандартов префиксы стали мало востребованными, но знание и умение их использовать не будет лишним для веб-разработчиков. Ну а вдруг на собесе спросят? 🥰

✨ Так вот, вендорные префиксы — это специальные приставки, добавляемые к CSS-свойствам для обеспечения совместимости с различными браузерами на этапе внедрения новых возможностей в язык стилей. 🔤 Основные префиксы: -webkit-: используется браузерами на базе WebKit или Blink (Chrome, Safari и другие). -moz-: используется браузером Firefox. -ms-: используется браузером Internet Explorer и Edge (до перехода на движок Chromium). -o-: используется браузером Opera (до перехода на движок Chromium). 🔤 Пример синтаксиса: Допустим, я хочу использовать свойство border-radius, чтобы создать скругленные углы у элементов. Сейчас это свойство поддерживается всеми современными браузерами, но раньше, когда оно только было внедрено, нужно было использовать вендорные префиксы. Рассмотрим пример кода:

.box {
  -webkit-border-radius: 10px;
  /* Для браузеров на базе WebKit или Blink */
  -moz-border-radius: 10px;
   /* Для Firefox */
  -ms-border-radius: 10px;
   /* Для Internet Explorer и Edge */
  -o-border-radius: 10px;
   /* Для Opera */
}

🤔 Когда используются эти префиксы? — Когда свойство находится на стадии эксперимента или раннего стандарта, оно может быть поддержано браузерами только с использованием префиксов. — Если вы хотите обеспечить совместимость с браузерами прошлых версий, которые еще не полностью поддерживают новые свойства CSS без префиксов. — Для обеспечения более широкой поддержки и предсказуемого поведения стилей в разных браузерах. idk Frontend | #Конспект

let sum = 0.1 + 0.2;
let result = 0.3;

console.log(sum === result);

idk Frontend | #Викторина

🤓 Когда использовать switch в JS? Всем привет! Конструкция switch используется для выполнения различных действий на основе различных условий. Это альтернатива множеству вложенных операторов if...else, которая может сделать код более читабельным и организованным. 🔤 Синтаксис switch выглядит так:

switch (выражение) {
  case значение1:
    // выполнится, если выражение === значение1
    break;
  case значение2:
    // выполнится, если выражение === значение2
    break;
  // ...
  default:
    // выполнится, если ни одно из вышеуказанных 
    // значений не соответствует выражению
}

🔤 Основные компоненты switch: — Выражение: Это выражение, которое оценивается и сравнивается с каждым значением в case. — case: Каждое значение (или набор значений), с которым сравнивается выражение. Если выражение совпадает со значением case, выполняется соответствующий блок кода. — break: Этот оператор завершает выполнение текущего блока case. Если break отсутствует, выполнение продолжится с следующего блока case без проверки его условия. — default: Этот блок выполняется, если ни одно из значений case не совпадает с выражением. default блок является необязательным. ✨ Пример использования:

let fruit = 'apple';
switch (fruit) {
  case 'banana':
    console.log('Банан');
    break;
  case 'apple':
    console.log('Яблоко');
    break;
  case 'orange':
    console.log('Апельсин');
    break;
  default:
    console.log('Неизвестный фрукт');
}

— В этом примере переменная fruit имеет значение 'apple', поэтому код выполнит блок case 'apple', выведя в консоль 'Яблоко'. 🤔 Так когда использовать switch? — Когда необходимо сравнить одно и то же выражение с несколькими возможными значениями. — Когда есть множество вариантов условий, и использование нескольких if...else сделает код трудночитаемым и сложным для поддержки.

Как итог, применение switch помогает упростить код и сделать его структурированным, когда имеется много вариантов условий для одной переменной.

idk Frontend | #Конспект

👨‍💻 Чем отличаются function declaration от function expression? Всем привет! Function Declaration (объявление функции) и Function Expression (функциональное выражение) — это способы определения функций в JS, и у них есть несколько ключевых отличий: 🔤 Синтаксис: — Function Declaration:

function doSomething() {
    // тело функции
}

— Function Expression:

const doSomething = function() {
    // тело функции
};

🔤 Поднятие (Hoisting): — Функции, определенные с использованием Function Declaration, поднимаются в начало их контекста видимости. То есть, их можно вызывать до того, как они объявлены в коде.

doSomething(); // Работает без ошибок
function doSomething() {
    console.log('Hello, world!');
}

— Функции, определенные с использованием Function Expression, не поднимаются в начало контекста видимости. Они становятся доступными только после присваивания.

doSomething(); // Ошибка: doSomething is not a function
const doSomething = function() {
    console.log('Hello, world!');
};

🔤 Имя функции: — Function Declaration: Такое объявление обязательно даёт функции имя, которое может использоваться как внутри функции, так и вне ее. — Function Expression: Функции, определенные таким образом, могут быть как именованными, так и анонимными. 🔤 Контекст вызова и область видимости: — Function Declaration: Функция находится в области видимости блока, в котором она объявлена. Если она объявлена в глобальной области видимости, то она будет доступна глобально. — Function Expression: Зависит от контекста, где выполняется присваивание. Обычно создаётся в текущей области видимости. ✨ Когда использовать? — Function Declaration: Удобны, когда нужно объявить функции, которые будут использоваться в нескольких местах кода. Поскольку такие функции поднимаются, их можно вызывать до самого объявления. — Function Expression: Полезны для создания функций, которые должны быть доступны только в определенном контексте или как аргументы других функций. Чаще всего используются, когда необходима динамическая логика.

Как итог, оба подхода имеют свои плюсы и минусы, и выбор между ними зависит от конкретного случая использования и стиля написания кода.

idk Frontend | #Конспект