iT-CALLBACK

Обработка событий в JavaScript

2024-06-29T10:49:06.302Z

В этом уроке мы рассмотрим, как работать с событиями в JavaScript. События позволяют вашим веб-приложениям реагировать на действия пользователя, такие как нажатия кнопок, ввод текста и многое другое.

1. Назначение обработчиков событий

Обработчики событий могут быть назначены несколькими способами. Рассмотрим два основных.

1.1. Использование атрибутов HTML

Вы можете назначить обработчик события непосредственно в HTML-коде:

<button type="button" onclick="alert('Button clicked!')">Click me</button>

Это простой способ, но не рекомендуется для больших проектов из-за плохой читабельности и поддержки.

1.2. Использование метода `addEventListener`

Метод addEventListener предоставляет более гибкий и современный способ назначения обработчиков событий:

const button = document.querySelector('button');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

2. Основные типы событий

События бывают разных типов. Вот некоторые из них:

События мыши: click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout
События клавиатуры: keydown, keypress, keyup
События формы: submit, change, focus, blur
События документа: DOMContentLoaded, load, unload, resize, scroll
События касания: touchstart, touchmove, touchend

3. Использование объекта события

Когда происходит событие, создается объект события, который передается в обработчик. Он содержит информацию о событии:

button.addEventListener('click', function(event) {
  console.log(event.type); // 'click'
  console.log(event.target); // элемент, на который было нажато
});

4. Всплытие и перехват событий

События могут распространяться по DOM-дереву двумя способами:

Всплытие (bubbling): Событие обрабатывается сначала самым внутренним элементом и поднимается вверх к родительским элементам.
Перехват (capturing): Событие обрабатывается сначала самыми внешними элементами и идет вниз к целевому элементу.

Пример кода:

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

parent.addEventListener('click', function() {
  console.log('Parent clicked');
}, true); // true означает использовать перехват

child.addEventListener('click', function() {
  console.log('Child clicked');
});

5. Остановка распространения и отмена действия по умолчанию

5.1. Остановка распространения события

Чтобы предотвратить дальнейшее распространение события, используйте event.stopPropagation():

child.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Child clicked');
});

5.2. Отмена действия по умолчанию

Чтобы отменить действие по умолчанию браузера (например, переход по ссылке), используйте event.preventDefault():

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Link click prevented');
});

Пример объединения всех техник

<!DOCTYPE html>
<html lang="en">
    <head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title>
</head>
<body>    
    <div class="parent">        
        <button type="button" class="child">Click me</button>    
    </div>    
    <script>        
        const parent = document.querySelector('.parent');        
        const button = document.querySelector('.child');            
        
        parent.addEventListener('click', function() {            
            console.log('Parent clicked');        
        }, true); // Используем перехват            
        
        button.addEventListener('click', function(event) {            
            event.stopPropagation(); // Останавливаем всплытие            
            console.log('Button clicked');        
        });    
    </script>
</body>
</html>

В нашем телеграмм канале вы можете предложить тему для следующего мини урока

Введение в CSS-анимации

2024-06-22T11:38:49.050Z

CSS-анимации позволяют добавить интерактивные и динамические элементы на веб-страницу, улучшая пользовательский опыт и визуальное восприятие. С помощью CSS-анимаций можно создавать плавные переходы между состояниями элементов, перемещения, изменения цвета и многие другие эффекты. Давайте рассмотрим основные концепции и примеры.

Основные понятия

Переходы (Transitions):

Transition Property: определяет, какие свойства будут анимированы.
Transition Duration: задает продолжительность анимации.
Transition Timing Function: определяет, как анимация будет изменяться во времени.
Transition Delay: задает задержку перед началом анимации.

Ключевые кадры (Keyframes):

Используются для создания более сложных анимаций.
Позволяют определять промежуточные состояния анимации.
Используются с правилом @keyframes.

Анимации (Animations):

Animation Name: имя, заданное для анимации с ключевыми кадрами.
Animation Duration: продолжительность выполнения анимации.
Animation Timing Function: определяет, как анимация будет изменяться во времени.
Animation Delay: задержка перед началом анимации.
Animation Iteration Count: количество повторений анимации.
Animation Direction: направление выполнения анимации.
Animation Fill Mode: определяет, будет ли элемент сохранять стили после завершения анимации.

Примеры

Простой переход

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Переходы</title>
    <style>
        body { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
        }    

        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease, transform 0.5s ease;
        }

        .box:hover {
            background-color: red;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

В этом примере background-color и transform меняются при наведении курсора на элемент .box.

Анимация с ключевыми кадрами

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Анимация</title>
    <style>
        body {
            display: flex;            
            justify-content: center;            
            align-items: center;            
            height: 100vh;        
        }
        
        .animated-box {
            width: 100px;
            height: 100px;
            background-color: green;
            animation: moveAndRotate 2s infinite;
        }

        @keyframes moveAndRotate {
            0% {
                transform: translateX(0) rotate(0deg);
                background-color: green;
            }
            50% {
                transform: translateX(100px) rotate(180deg);
                background-color: yellow;
            }
            100% {
                transform: translateX(0) rotate(360deg);
                background-color: green;
            }
        }
    </style>
</head>
<body>
    <div class="animated-box"></div>
</body>
</html>

Здесь используется правило @keyframes, чтобы создать анимацию, в которой элемент .animated-box перемещается и вращается, меняя цвет.

Полезные советы

Плавность: используйте функцию плавности (ease, ease-in, ease-out и т.д.) для естественного эффекта.
Совместимость: убедитесь, что анимации корректно работают в разных браузерах.
Производительность: избегайте сложных анимаций, которые могут сильно нагружать процессор.

В нашем телеграмм канале вы можете предложить тему для следующего мини урока

Создание выпадающего меню с помощью HTML, CSS и JavaScript

2024-06-13T23:12:23.050Z

В этом уроке мы рассмотрим, как создать простое выпадающее меню, используя HTML, CSS и JavaScript. Следуя пошаговым инструкциям, вы сможете легко повторить это на своем компьютере.

Для начала мы должны понять что такое выпадающее меню, давайте разберемся

Выпадающее меню (или dropdown menu) — это элемент пользовательского интерфейса, который позволяет пользователю выбирать один вариант из списка. Список скрыт до тех пор, пока пользователь не кликнет на заголовок меню. Когда меню открыто, пользователю предоставляется несколько вариантов для выбора.

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

Пример выпадающего меню:

В типичном выпадающем меню будет кнопка или заголовок, который при клике открывает список пунктов меню:

Теперь, давайте перейдем к созданию такого меню.

Создание HTML-разметки

Для начала создадим базовую структуру нашего выпадающего меню.

В этом примере:

Мы создаем контейнер div с классом dropdown.
Внутри контейнера находится кнопка button с классом dropbtn, которая служит заголовком меню.
Также внутри контейнера div с классом dropdown-content, содержащий ссылки (a) — это элементы нашего

Стилизация меню с помощью CSS

Добавим стили, чтобы наше меню выглядело красиво и было функциональным. Создадим файл style.css и добавим в него следующий код:

Добавление JavaScript для интерактивности

В этом примере JavaScript не требуется, так как мы использовали CSS для показа/скрытия меню при наведении. Но для демонстрации, давайте добавим JavaScript, чтобы меню открывалось при клике на кнопку.

Создадим файл script.js и добавим следующий код:

В этом коде:

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

Теперь у вас есть простое выпадающее меню, созданное с использованием HTML, CSS и JavaScript. Вы можете адаптировать и расширять его по своему усмотрению, добавляя дополнительные стили и функциональность.

Полный код вы можете получить на нашем канале

Попробуйте запустить этот код у себя на компьютере и поэкспериментируйте с ним, чтобы лучше понять, как работает выпадающее меню.