requestAnimationFrame()

Читать 👨‍💻

#js | #полезности

This в js

Читать 👨‍💻

#js | #полезности

async/await в JavaScript

Читать 👨‍💻

#js | #теория

Api в js

Читать 👨‍💻

#js

Практическое руководство по JSON в JavaScript

Читать 👨‍💻

#js | #полезности

Что нового в ES2023

Читать 👨‍💻

#js | #полезности

Selection и Range

Читать 👨‍💻

#js | #теория

Intersection Observer

Что это такое?
Intersection Observer позволяет отслеживать пересечение элемента с областью видимости (viewport) или другим родительским элементом. Это особенно полезно для:

Ленивой загрузки изображений (lazy loading),
Реализации бесконечной прокрутки,
Анимации элементов при появлении в зоне видимости,
Фиксации элементов при прокрутке (например, кнопок или меню).
Как это работает?

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Элемент виден на экране!');
    } else {
      console.log('Элемент исчез с экрана!');
    }
  });
});

Выбираем элемент для отслеживания:

const target = document.querySelector('.my-element');
observer.observe(target);
Настройка через параметры (threshold и rootMargin):
```const observer = new IntersectionObserver(callback, {
  threshold: 0.5, // Элемент должен быть виден на 50%
  rootMargin: '0px 0px -50px 0px' // Отступы вокруг зоны видимости
});

Пример использования:
Допустим, нужно, чтобы кнопка "Добавить в корзину" прилипала к низу экрана, когда исчезает из зоны видимости:

const button = document.querySelector('.add-to-cart');
const observer = new IntersectionObserver(([entry]) => {
  if (!entry.isIntersecting) {
    button.classList.add('sticky');
  } else {
    button.classList.remove('sticky');
  }
}, { threshold: 1 });
observer.observe(button);

Почему это лучше, чем scroll?
Эффективность: Intersection Observer работает асинхронно и не грузит основной поток.
Гибкость: Можно отслеживать любые элементы и точно настроить, как и когда срабатывают события.
Производительность: Браузер оптимизирует работу Observer, что особенно важно для мобильных устройств.

#js

Как валидировать формы на JavaScript

Многие начинающие верстальщики ограничиваются required, type="email" и pattern="". Это удобно, но часто недостаточно. Гибкая валидация требует JavaScript.

Простой пример валидации email

HTML:
<form id="myForm">
  <input type="email" name="email" placeholder="Введите email" required />
  <button type="submit">Отправить</button>
</form>

JS:

const form = document.getElementById("myForm");

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const emailInput = form.email;
  const email = emailInput.value;

  if (!email.includes("@") || !email.includes(".")) {
    alert("Пожалуйста, введите корректный email");
    emailInput.focus();
    return;
  }

  alert("Форма успешно отправлена");
  form.reset();
});

Варианты валидации
1. HTML-проверка через pattern:

<input type="text" pattern="[A-Za-z]{3,}" title="Только латиница, минимум 3 буквы">

2. JS: input.validity
js

if (!emailInput.validity.valid) {
  alert("Некорректный email");
}

3. JS: setCustomValidity()

emailInput.setCustomValidity("Пожалуйста, проверьте email");

Работает только с формами, которые потом отправляются нативно (form.submit() без preventDefault).

Дополнительные советы
Используй trim() при проверке, чтобы убрать пробелы.

Проверяй не только email, но и пароли, телефоны, checkbox'ы.

Добавляй визуальные подсказки (цвета, сообщения).

Почему это важно?
Плохая валидация = сломанные формы, негативный UX и ошибки на бэке.
Хорошая валидация:
- помогает пользователю
- экономит время
- делает интерфейс понятным

#js | #полезности