57 KiB

Raw Blame History Unescape Escape

Проект "Террариум", часть 3: Манипуляции с DOM и замыкания в JavaScript

journey
    title Your JavaScript DOM Journey
    section Foundation
      Understand DOM: 3: Student
      Learn closures: 4: Student
      Connect elements: 4: Student
    section Interaction
      Setup drag events: 4: Student
      Track coordinates: 5: Student
      Handle movement: 5: Student
    section Polish
      Add cleanup: 4: Student
      Test functionality: 5: Student
      Complete terrarium: 5: Student

Скетчноут от Tomomi Imura

Добро пожаловать в одну из самых увлекательных частей веб-разработки — создание интерактивности! Document Object Model (DOM) — это мост между вашим HTML и JavaScript, и сегодня мы используем его, чтобы оживить ваш террариум. Когда Тим Бернерс-Ли создал первый веб-браузер, он представлял себе веб, где документы могли быть динамичными и интерактивными — DOM делает эту мечту реальностью.

Мы также изучим замыкания в JavaScript, которые могут показаться сложными на первый взгляд. Представьте замыкания как "карманы памяти", где ваши функции могут запоминать важную информацию. Это как если бы каждое растение в вашем террариуме имело свою собственную запись данных для отслеживания своего положения. К концу этого урока вы поймете, насколько естественными и полезными они могут быть.

Вот что мы создаем: террариум, где пользователи могут перетаскивать растения куда угодно. Вы изучите техники манипуляции с DOM, которые лежат в основе всего — от загрузки файлов методом drag-and-drop до интерактивных игр. Давайте оживим ваш террариум.

mindmap
  root((DOM & JavaScript))
    DOM Tree
      Element Selection
      Property Access
      Event Handling
      Dynamic Updates
    Events
      Pointer Events
      Mouse Events
      Touch Events
      Event Listeners
    Closures
      Private Variables
      Function Scope
      Memory Persistence
      State Management
    Drag & Drop
      Position Tracking
      Coordinate Math
      Event Lifecycle
      User Interaction
    Modern Patterns
      Event Delegation
      Performance
      Cross-Device
      Accessibility

Тест перед лекцией

Понимание DOM: ваш путь к интерактивным веб-страницам

Document Object Model (DOM) — это способ, с помощью которого JavaScript взаимодействует с элементами HTML. Когда ваш браузер загружает HTML-страницу, он создает структурированное представление этой страницы в памяти — это и есть DOM. Представьте его как семейное дерево, где каждый HTML-элемент — это член семьи, к которому JavaScript может получить доступ, изменить или переставить.

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

flowchart TD
    A["Document"] --> B["HTML"]
    B --> C["Head"]
    B --> D["Body"]
    C --> E["Title"]
    C --> F["Meta Tags"]
    D --> G["H1: My Terrarium"]
    D --> H["Div: Page Container"]
    H --> I["Div: Left Container"]
    H --> J["Div: Right Container"]
    H --> K["Div: Terrarium"]
    I --> L["Plant Elements 1-7"]
    J --> M["Plant Elements 8-14"]
    
    L --> N["img#plant1"]
    L --> O["img#plant2"]
    M --> P["img#plant8"]
    M --> Q["img#plant9"]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style D fill:#e8f5e8
    style H fill:#fff3e0
    style N fill:#ffebee
    style O fill:#ffebee
    style P fill:#ffebee
    style Q fill:#ffebee

Представление DOM и HTML-разметки, которая на него ссылается. Автор Olfa Nasraoui

Почему DOM так мощен:

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

Замыкания в JavaScript: создание организованного и мощного кода

Замыкание в JavaScript — это как создание для функции собственного приватного пространства с постоянной памятью. Представьте, как у вьюрков Дарвина на Галапагосских островах развились специализированные клювы в зависимости от их среды обитания — замыкания работают аналогично, создавая специализированные функции, которые "запоминают" свой контекст, даже после завершения выполнения родительской функции.

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

flowchart LR
    A["dragElement(plant1)"] --> B["Creates Closure"]
    A2["dragElement(plant2)"] --> B2["Creates Closure"]
    
    B --> C["Private Variables"]
    B2 --> C2["Private Variables"]
    
    C --> D["pos1, pos2, pos3, pos4"]
    C --> E["pointerDrag function"]
    C --> F["elementDrag function"]
    C --> G["stopElementDrag function"]
    
    C2 --> D2["pos1, pos2, pos3, pos4"]
    C2 --> E2["pointerDrag function"]
    C2 --> F2["elementDrag function"]
    C2 --> G2["stopElementDrag function"]
    
    H["Plant 1 remembers its position"] --> B
    H2["Plant 2 remembers its position"] --> B2
    
    style B fill:#e8f5e8
    style B2 fill:#e8f5e8
    style C fill:#fff3e0
    style C2 fill:#fff3e0

💡 Понимание замыканий: Замыкания — это значимая тема в JavaScript, и многие разработчики используют их годами, прежде чем полностью понять все теоретические аспекты. Сегодня мы сосредоточимся на практическом применении — вы увидите, как замыкания естественным образом возникают при создании наших интерактивных функций. Понимание будет развиваться по мере того, как вы увидите, как они решают реальные задачи.

Представление DOM и HTML-разметки, которая на него ссылается. Автор Olfa Nasraoui

На этом уроке мы завершим наш проект интерактивного террариума, создав JavaScript, который позволит пользователю манипулировать растениями на странице.

Перед началом: подготовка к успеху

Вам понадобятся ваши файлы HTML и CSS из предыдущих уроков о террариуме — мы собираемся сделать этот статичный дизайн интерактивным. Если вы присоединились впервые, завершение этих уроков сначала предоставит важный контекст.

Вот что мы создадим:

Плавное перетаскивание для всех растений террариума
Отслеживание координат, чтобы растения запоминали свои позиции
Полностью интерактивный интерфейс с использованием чистого JavaScript
Чистый и организованный код с использованием шаблонов замыканий

Настройка файла JavaScript

Давайте создадим файл JavaScript, который сделает ваш террариум интерактивным.

Шаг 1: Создайте файл скрипта

В папке вашего террариума создайте новый файл с именем script.js.

Шаг 2: Свяжите JavaScript с вашим HTML

Добавьте этот тег <script> в секцию <head> вашего файла index.html:

<script src="./script.js" defer></script>

Почему атрибут defer важен:

Обеспечивает, что ваш JavaScript будет ждать загрузки всего HTML
Предотвращает ошибки, когда JavaScript пытается найти элементы, которые еще не готовы
Гарантирует, что все элементы растений доступны для взаимодействия
Обеспечивает лучшую производительность, чем размещение скриптов внизу страницы

⚠️ Важное замечание: Атрибут defer предотвращает распространенные проблемы с синхронизацией. Без него JavaScript может попытаться получить доступ к элементам HTML до их загрузки, что вызовет ошибки.

Связывание JavaScript с элементами HTML

Прежде чем сделать элементы перетаскиваемыми, JavaScript должен найти их в DOM. Представьте это как систему каталогизации библиотеки — как только у вас есть номер каталога, вы можете найти нужную книгу и получить доступ ко всему ее содержимому.

Мы будем использовать метод document.getElementById(), чтобы установить эти связи. Это похоже на точную систему хранения — вы указываете идентификатор, и он находит именно тот элемент, который вам нужен в HTML.

Включение функции перетаскивания для всех растений

Добавьте этот код в ваш файл script.js:

// Enable drag functionality for all 14 plants
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

Что делает этот код:

Находит каждый элемент растения в DOM, используя его уникальный идентификатор
Получает ссылку на каждый HTML-элемент в JavaScript
Передает каждый элемент в функцию dragElement (которую мы создадим далее)
Готовит каждое растение к взаимодействию методом drag-and-drop
Связывает структуру HTML с функциональностью JavaScript

🎯 Почему использовать идентификаторы, а не классы? Идентификаторы предоставляют уникальные идентификаторы для конкретных элементов, тогда как CSS-классы предназначены для стилизации групп элементов. Когда JavaScript нужно манипулировать отдельными элементами, идентификаторы обеспечивают точность и производительность.

💡 Совет: Обратите внимание, как мы вызываем dragElement() для каждого растения отдельно. Такой подход гарантирует, что каждое растение получит свое собственное независимое поведение при перетаскивании, что важно для плавного взаимодействия с пользователем.

🔄 Проверка понимания

Понимание связи с DOM: Перед переходом к функции перетаскивания убедитесь, что вы можете:

✅ Объяснить, как document.getElementById() находит элементы HTML
✅ Понять, почему мы используем уникальные идентификаторы для каждого растения
✅ Описать назначение атрибута defer в тегах скрипта
✅ Осознать, как JavaScript и HTML связываются через DOM

Краткий тест: Что произойдет, если два элемента будут иметь одинаковый идентификатор? Почему getElementById() возвращает только один элемент? Ответ: Идентификаторы должны быть уникальными; если они дублируются, возвращается только первый элемент.

Создание замыкания для функции dragElement

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

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

Понимание замыканий на простом примере

Позвольте мне продемонстрировать замыкания на простом примере, чтобы проиллюстрировать концепцию:

function createCounter() {
    let count = 0; // This is like a private variable
    
    function increment() {
        count++; // The inner function remembers the outer variable
        return count;
    }
    
    return increment; // We're giving back the inner function
}

const myCounter = createCounter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

Что происходит в этом шаблоне замыкания:

Создается приватная переменная count, которая существует только внутри этого замыкания
Внутренняя функция может получить доступ и изменить эту внешнюю переменную (механизм замыкания)
Когда мы возвращаем внутреннюю функцию, она сохраняет связь с этими приватными данными
Даже после завершения выполнения createCounter(), count сохраняется и запоминает свое значение

Почему замыкания идеально подходят для функции перетаскивания

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

Основные преимущества для нашего проекта:

Сохраняют приватные переменные положения для каждого растения независимо
Хранят данные о координатах между событиями перетаскивания
Предотвращают конфликты переменных между различными перетаскиваемыми элементами
Создают чистую и организованную структуру кода

🎯 Цель обучения: Вам не нужно сразу полностью освоить все аспекты замыканий. Сосредоточьтесь на том, как они помогают организовать код и сохранять состояние для нашей функции перетаскивания.

stateDiagram-v2
    [*] --> Ready: Page loads
    Ready --> DragStart: User presses down (pointerdown)
    DragStart --> Dragging: Mouse/finger moves (pointermove)
    Dragging --> Dragging: Continue moving
    Dragging --> DragEnd: User releases (pointerup)
    DragEnd --> Ready: Reset for next drag
    
    state DragStart {
        [*] --> CapturePosition
        CapturePosition --> SetupListeners
        SetupListeners --> [*]
    }
    
    state Dragging {
        [*] --> CalculateMovement
        CalculateMovement --> UpdatePosition
        UpdatePosition --> [*]
    }
    
    state DragEnd {
        [*] --> RemoveListeners
        RemoveListeners --> CleanupState
        CleanupState --> [*]
    }

Создание функции dragElement

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

function dragElement(terrariumElement) {
    // Initialize position tracking variables
    let pos1 = 0,  // Previous mouse X position
        pos2 = 0,  // Previous mouse Y position  
        pos3 = 0,  // Current mouse X position
        pos4 = 0;  // Current mouse Y position
    
    // Set up the initial drag event listener
    terrariumElement.onpointerdown = pointerDrag;
}

Понимание системы отслеживания позиций:

pos1 и pos2: Сохраняют разницу между старыми и новыми позициями мыши
pos3 и pos4: Отслеживают текущие координаты мыши
terrariumElement: Конкретный элемент растения, который мы делаем перетаскиваемым
onpointerdown: Событие, которое срабатывает, когда пользователь начинает перетаскивание

Как работает шаблон замыкания:

Создает приватные переменные положения для каждого элемента растения
Сохраняет эти переменные на протяжении всего процесса перетаскивания
Гарантирует, что каждое растение отслеживает свои собственные координаты независимо
Обеспечивает чистый интерфейс через функцию dragElement

Почему использовать события указателя?

Вы можете задаться вопросом, почему мы используем onpointerdown, а не более привычный onclick. Вот объяснение:

Тип события	Лучше всего подходит для	Недостатки
`onclick`	Простые клики по кнопке	Не подходит для перетаскивания (только клики и отпускания)
`onpointerdown`	Мышь и сенсорные устройства	Новое, но уже хорошо поддерживается
`onmousedown`	Только мышь на десктопе	Не подходит для мобильных пользователей

Почему события указателя идеально подходят для того, что мы создаем:

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

💡 На будущее: События указателя — это современный способ обработки взаимодействий пользователя. Вместо написания отдельного кода для мыши и сенсорных устройств вы получаете поддержку обоих сразу. Здорово, правда?

🔄 Проверка понимания

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

✅ Почему мы используем события указателя вместо событий мыши?
✅ Как переменные замыкания сохраняются между вызовами функций?
✅ Какую роль играет preventDefault() в плавном перетаскивании?
✅ Почему мы прикрепляем слушатели к документу, а не к отдельным элементам?

Связь с реальным миром: Подумайте о интерфейсах drag-and-drop, которые вы используете ежедневно:

Загрузка файлов: Перетаскивание файлов в окно браузера
Доски Kanban: Перемещение задач между колонками
Галереи изображений: Перестановка порядка фотографий
Мобильные интерфейсы: Свайпы и перетаскивание на сенсорных экранах

Функция pointerDrag: захват начала перетаскивания

Когда пользователь нажимает на растение (будь то щелчок мышью или касание пальцем), функция pointerDrag начинает работать. Эта функция фиксирует начальные координаты и настраивает систему перетаскивания.

Добавьте эту функцию внутри вашего замыкания dragElement, сразу после строки terrariumElement.onpointerdown = pointerDrag;:

function pointerDrag(e) {
    // Prevent default browser behavior (like text selection)
    e.preventDefault();
    
    // Capture the initial mouse/touch position
    pos3 = e.clientX;  // X coordinate where drag started
    pos4 = e.clientY;  // Y coordinate where drag started
    
    // Set up event listeners for the dragging process
    document.onpointermove = elementDrag;
    document.onpointerup = stopElementDrag;
}

Шаг за шагом, что происходит:

Предотвращает стандартное поведение браузера, которое может мешать перетаскиванию
Фиксирует точные координаты, где пользователь начал жест перетаскивания
Устанавливает слушатели событий для отслеживания движения
Готовит систему для отслеживания движения мыши/пальца по всему документу

Понимание предотвращения событий

Строка e.preventDefault() имеет решающее значение для плавного перетаскивания:

Без предотвращения браузеры могут:

Выделять текст при перетаскивании по странице
Вызывать контекстное меню при щелчке правой кнопкой мыши
Мешать нашему пользовательскому поведению перетаскивания
Создавать визуальные артефакты во время операции перетаскивания

🔍 Эксперимент: После завершения этого урока попробуйте удалить e.preventDefault() и посмотрите, как это повлияет на опыт перетаскивания. Вы быстро поймете, почему эта строка так важна!

Система отслеживания координат

Свойства e.clientX и e.clientY предоставляют нам точные координаты мыши/касания:

Свойство	Что измеряет	Применение
`clientX`	Горизонтальное положение относительно области просмотра	Отслеживание движения влево-вправо
`clientY`	Вертикальное положение относительно области просмотра	Отслеживание движения вверх-вниз
Понимание этих координат:

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

Настройка слушателей событий на уровне документа

Обратите внимание, как мы привязываем события перемещения и остановки ко всему document, а не только к элементу растения:

document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

Почему привязываем к документу:

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

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

Завершение системы перетаскивания: движение и очистка

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

Функция elementDrag: отслеживание движения

Добавьте функцию elementDrag сразу после закрывающей фигурной скобки pointerDrag:

function elementDrag(e) {
    // Calculate the distance moved since the last event
    pos1 = pos3 - e.clientX;  // Horizontal distance moved
    pos2 = pos4 - e.clientY;  // Vertical distance moved
    
    // Update the current position tracking
    pos3 = e.clientX;  // New current X position
    pos4 = e.clientY;  // New current Y position
    
    // Apply the movement to the element's position
    terrariumElement.style.top = (terrariumElement.offsetTop - pos2) + 'px';
    terrariumElement.style.left = (terrariumElement.offsetLeft - pos1) + 'px';
}

Понимание математики координат:

pos1 и pos2: рассчитывают, насколько далеко переместилась мышь с момента последнего обновления
pos3 и pos4: сохраняют текущую позицию мыши для следующего расчета
offsetTop и offsetLeft: получают текущую позицию элемента на странице
Логика вычитания: перемещает элемент на то же расстояние, на которое переместилась мышь

sequenceDiagram
    participant User
    participant Mouse
    participant JavaScript
    participant Plant
    
    User->>Mouse: Start drag at (100, 50)
    Mouse->>JavaScript: pointerdown event
    JavaScript->>JavaScript: Store initial position (pos3=100, pos4=50)
    JavaScript->>JavaScript: Setup move/up listeners
    
    User->>Mouse: Move to (110, 60)
    Mouse->>JavaScript: pointermove event
    JavaScript->>JavaScript: Calculate: pos1=10, pos2=10
    JavaScript->>Plant: Update: left += 10px, top += 10px
    Plant->>Plant: Render at new position
    
    User->>Mouse: Release at (120, 65)
    Mouse->>JavaScript: pointerup event
    JavaScript->>JavaScript: Remove listeners
    JavaScript->>JavaScript: Reset for next drag

Разбор расчета движения:

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

Визуальное представление математики

sequenceDiagram
    participant Mouse
    participant JavaScript
    participant Plant
    
    Mouse->>JavaScript: Move from (100,50) to (110,60)
    JavaScript->>JavaScript: Calculate: moved 10px right, 10px down
    JavaScript->>Plant: Update position by +10px right, +10px down
    Plant->>Plant: Render at new position

Функция stopElementDrag: очистка

Добавьте функцию очистки после закрывающей фигурной скобки elementDrag:

function stopElementDrag() {
    // Remove the document-level event listeners
    document.onpointerup = null;
    document.onpointermove = null;
}

Почему очистка важна:

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

Что происходит без очистки:

Слушатели событий продолжают работать даже после завершения перетаскивания
Производительность ухудшается из-за накопления неиспользуемых слушателей
Непредсказуемое поведение при взаимодействии с другими элементами
Ресурсы браузера расходуются на ненужную обработку событий

Понимание свойств позиции CSS

Наша система перетаскивания манипулирует двумя ключевыми свойствами CSS:

Свойство	Что контролирует	Как мы используем
`top`	Расстояние от верхнего края	Вертикальное позиционирование при перетаскивании
`left`	Расстояние от левого края	Горизонтальное позиционирование при перетаскивании

Ключевые моменты о свойствах offset:

offsetTop: Текущее расстояние от верхнего края позиционированного родительского элемента
offsetLeft: Текущее расстояние от левого края позиционированного родительского элемента
Контекст позиционирования: Эти значения относительны к ближайшему позиционированному предку
Обновления в реальном времени: Изменения происходят сразу, когда мы модифицируем свойства CSS

🎯 Философия дизайна: Эта система перетаскивания намеренно гибкая – нет "зон сброса" или ограничений. Пользователи могут размещать растения где угодно, получая полный творческий контроль над дизайном террариума.

Собираем всё вместе: ваша полная система перетаскивания

Поздравляем! Вы только что создали сложную систему перетаскивания с использованием чистого JavaScript. Ваша полная функция dragElement теперь содержит мощное замыкание, которое управляет:

Что делает ваше замыкание:

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

Тестирование вашего интерактивного террариума

Теперь протестируйте ваш интерактивный террариум! Откройте ваш файл index.html в веб-браузере и попробуйте функциональность:

Нажмите и удерживайте любое растение, чтобы начать перетаскивание
Перемещайте мышь или палец и наблюдайте, как растение плавно следует за движением
Отпустите, чтобы оставить растение в новом положении
Экспериментируйте с различными расположениями, чтобы изучить интерфейс

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

🔄 Педагогическая проверка

Полное понимание системы: Убедитесь, что вы освоили всю систему перетаскивания:

✅ Как замыкания сохраняют независимое состояние для каждого растения?
✅ Почему математические расчеты координат необходимы для плавного движения?
✅ Что произойдет, если мы забудем очистить слушатели событий?
✅ Как этот шаблон масштабируется для более сложных взаимодействий?

Рефлексия о качестве кода: Проверьте ваше полное решение:

Модульный дизайн: Каждое растение получает свой собственный экземпляр замыкания
Эффективность событий: Правильная настройка и очистка слушателей
Поддержка разных устройств: Работает на компьютерах и мобильных устройствах
Забота о производительности: Нет утечек памяти или лишних расчетов

Вызов от GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

Описание: Улучшите проект террариума, добавив функцию сброса, которая возвращает все растения в их исходные позиции с плавной анимацией.

Подсказка: Создайте кнопку сброса, которая при нажатии анимирует все растения обратно в их исходные позиции на боковой панели, используя CSS-переходы. Функция должна сохранять исходные позиции при загрузке страницы и плавно возвращать растения в эти позиции за 1 секунду при нажатии кнопки сброса.

Узнайте больше о режиме Agent здесь.

🚀 Дополнительный вызов: расширьте свои навыки

Готовы вывести ваш террариум на новый уровень? Попробуйте реализовать эти улучшения:

Творческие расширения:

Двойной клик на растение, чтобы переместить его на передний план (манипуляция z-index)
Добавьте визуальную обратную связь, например, легкое свечение при наведении на растения
Реализуйте границы, чтобы предотвратить перетаскивание растений за пределы террариума
Создайте функцию сохранения, которая запоминает позиции растений с использованием localStorage
Добавьте звуковые эффекты при поднятии и размещении растений

💡 Возможность обучения: Каждый из этих вызовов научит вас новым аспектам манипуляции DOM, обработки событий и дизайна пользовательского интерфейса.

Пост-лекционный тест

Обзор и самостоятельное изучение: углубление понимания

Вы освоили основы манипуляции DOM и замыканий, но всегда есть что изучить! Вот несколько путей для расширения ваших знаний и навыков.

Альтернативные подходы к перетаскиванию

Мы использовали события указателя для максимальной гибкости, но веб-разработка предлагает множество подходов:

Подход	Лучше всего подходит для	Ценность обучения
HTML Drag and Drop API	Загрузка файлов, формальные зоны перетаскивания	Понимание возможностей браузера
Touch Events	Взаимодействия, специфичные для мобильных устройств	Шаблоны разработки с приоритетом мобильных устройств
Свойства CSS `transform`	Плавные анимации	Техники оптимизации производительности

Продвинутые темы манипуляции DOM

Следующие шаги в вашем обучении:

Делегирование событий: Эффективная обработка событий для множества элементов
Intersection Observer: Определение, когда элементы входят/выходят из области просмотра
Mutation Observer: Наблюдение за изменениями в структуре DOM
Веб-компоненты: Создание повторно используемых, инкапсулированных элементов интерфейса
Концепции виртуального DOM: Понимание того, как фреймворки оптимизируют обновления DOM

Основные ресурсы для продолжения обучения

Техническая документация:

Руководство MDN по событиям указателя - Полное руководство по событиям указателя
Спецификация W3C Pointer Events - Официальная документация стандартов
Глубокое погружение в замыкания JavaScript - Продвинутые шаблоны замыканий

Совместимость браузеров:

CanIUse.com - Проверка поддержки функций в разных браузерах
Данные о совместимости браузеров MDN - Подробная информация о совместимости

Возможности для практики:

Создайте игру-головоломку, используя аналогичные механики перетаскивания
Создайте доску канбан с управлением задачами через перетаскивание
Разработайте галерею изображений с возможностью перетаскивания фотографий
Экспериментируйте с жестами касания для мобильных интерфейсов

🎯 Стратегия обучения: Лучший способ закрепить эти концепции – практика. Попробуйте создавать вариации интерфейсов с функцией перетаскивания – каждый проект научит вас чему-то новому о взаимодействии с пользователем и манипуляции DOM.

⚡ Что вы можете сделать за следующие 5 минут

Откройте DevTools браузера и введите document.querySelector('body') в консоли
Попробуйте изменить текст веб-страницы, используя innerHTML или textContent
Добавьте слушатель события клика к любой кнопке или ссылке на веб-странице
Исследуйте структуру DOM с помощью панели Elements

🎯 Что вы можете достичь за этот час

Пройдите пост-лекционный тест и повторите концепции манипуляции DOM
Создайте интерактивную веб-страницу, реагирующую на клики пользователя
Практикуйте обработку событий с различными типами событий (click, mouseover, keypress)
Создайте простой список задач или счетчик, используя манипуляцию DOM
Исследуйте связь между элементами HTML и объектами JavaScript

📅 Ваш недельный путь изучения JavaScript

Завершите интерактивный проект террариума с функциональностью перетаскивания
Освойте делегирование событий для эффективной обработки событий
Узнайте о цикле событий и асинхронном JavaScript
Практикуйте замыкания, создавая модули с приватным состоянием
Исследуйте современные API DOM, такие как Intersection Observer
Создайте интерактивные компоненты без использования фреймворков

🌟 Ваш месячный путь к мастерству JavaScript

Создайте сложное одностраничное приложение, используя чистый JavaScript
Изучите современный фреймворк (React, Vue или Angular) и сравните его с чистым DOM
Внесите вклад в проекты с открытым исходным кодом на JavaScript
Освойте продвинутые концепции, такие как веб-компоненты и пользовательские элементы
Создавайте производительные веб-приложения с оптимальными шаблонами DOM
Обучайте других основам манипуляции DOM и JavaScript

🎯 Ваш график освоения JavaScript DOM

timeline
    title DOM & JavaScript Learning Progression
    
    section Foundation (15 minutes)
        DOM Understanding: Element selection methods
                         : Tree structure navigation
                         : Property access patterns
        
    section Event Handling (20 minutes)
        User Interaction: Pointer event basics
                        : Event listener setup
                        : Cross-device compatibility
                        : Event prevention techniques
        
    section Closures (25 minutes)
        Scope Management: Private variable creation
                        : Function persistence
                        : State management patterns
                        : Memory efficiency
        
    section Drag System (30 minutes)
        Interactive Features: Coordinate tracking
                            : Position calculation
                            : Movement mathematics
                            : Cleanup procedures
        
    section Advanced Patterns (45 minutes)
        Professional Skills: Event delegation
                           : Performance optimization
                           : Error handling
                           : Accessibility considerations
        
    section Framework Understanding (1 week)
        Modern Development: Virtual DOM concepts
                          : State management libraries
                          : Component architectures
                          : Build tool integration
        
    section Expert Level (1 month)
        Advanced DOM APIs: Intersection Observer
                         : Mutation Observer
                         : Custom Elements
                         : Web Components

🛠️ Резюме вашего инструментария JavaScript

После завершения этого урока у вас есть:

Мастерство DOM: Выбор элементов, манипуляция свойствами и навигация по дереву
Экспертиза событий: Обработка взаимодействий на разных устройствах с помощью событий указателя
Понимание замыканий: Управление приватным состоянием и сохранение функций
Интерактивные системы: Полная реализация перетаскивания с нуля
Осведомленность о производительности: Правильная очистка событий и управление памятью
Современные шаблоны: Техники организации кода, используемые в профессиональной разработке
Пользовательский опыт: Создание интуитивно понятных и отзывчивых интерфейсов

Приобретенные профессиональные навыки: Вы создали функции, используя те же техники, что и:

Доски Trello/канбан: Перетаскивание карточек между колонками
Системы загрузки файлов: Обработка файлов через перетаскивание
Галереи изображений: Интерфейсы для размещения фотографий
Мобильные приложения: Шаблоны взаимодействия на основе касаний

Следующий уровень: Вы готовы изучать современные фреймворки, такие как React, Vue или Angular, которые основываются на этих фундаментальных концепциях манипуляции DOM!

Задание

Поработайте немного больше с DOM

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

57 KiB Raw Blame History Unescape Escape

Проект "Террариум", часть 3: Манипуляции с DOM и замыкания в JavaScript

Тест перед лекцией

Понимание DOM: ваш путь к интерактивным веб-страницам

Замыкания в JavaScript: создание организованного и мощного кода

Перед началом: подготовка к успеху

Настройка файла JavaScript

Связывание JavaScript с элементами HTML

Включение функции перетаскивания для всех растений

🔄 Проверка понимания

Создание замыкания для функции dragElement

Понимание замыканий на простом примере

Почему замыкания идеально подходят для функции перетаскивания

Создание функции dragElement

Почему использовать события указателя?

🔄 Проверка понимания

Функция pointerDrag: захват начала перетаскивания

Понимание предотвращения событий

Система отслеживания координат

Настройка слушателей событий на уровне документа

Завершение системы перетаскивания: движение и очистка

Функция elementDrag: отслеживание движения

Визуальное представление математики

Функция stopElementDrag: очистка

Понимание свойств позиции CSS

Собираем всё вместе: ваша полная система перетаскивания

Тестирование вашего интерактивного террариума

🔄 Педагогическая проверка

Вызов от GitHub Copilot Agent 🚀

🚀 Дополнительный вызов: расширьте свои навыки

Пост-лекционный тест

Обзор и самостоятельное изучение: углубление понимания

Альтернативные подходы к перетаскиванию

Продвинутые темы манипуляции DOM

Основные ресурсы для продолжения обучения

⚡ Что вы можете сделать за следующие 5 минут

🎯 Что вы можете достичь за этот час

📅 Ваш недельный путь изучения JavaScript

🌟 Ваш месячный путь к мастерству JavaScript

🎯 Ваш график освоения JavaScript DOM

🛠️ Резюме вашего инструментария JavaScript

Задание

57 KiB

Raw Blame History Unescape Escape