51 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, які забезпечують все — від перетягування файлів до інтерактивних ігор. Давайте оживимо ваш тераріум.

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

Додайте цей тег скрипта до секції <head> вашого файлу index.html:

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

Чому атрибут defer важливий:

Гарантує, що ваш JavaScript чекає, поки весь HTML буде завантажений
Запобігає помилкам, коли JavaScript шукає елементи, які ще не готові
Гарантує, що всі ваші елементи рослин доступні для взаємодії
Забезпечує кращу продуктивність, ніж розміщення скриптів у кінці сторінки

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

Зв'язок JavaScript із елементами HTML

Перш ніж ми зможемо зробити елементи перетягуваними, JavaScript повинен знайти їх у DOM. Уявіть це як систему каталогізації бібліотеки — як тільки у вас є номер каталогу, ви можете знайти саме ту книгу, яка вам потрібна, і отримати доступ до всього її вмісту.

Ми використаємо метод document.getElementById(), щоб створити ці зв'язки. Це як мати точну систему файлів — ви надаєте ID, і він знаходить саме той елемент, який вам потрібен у вашому 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 за його унікальним ID
Отримує посилання JavaScript на кожен елемент HTML
Передає кожен елемент до функції dragElement (яку ми створимо далі)
Готує кожну рослину до взаємодії через перетягування
З'єднує вашу HTML-структуру з функціональністю JavaScript

🎯 Чому використовувати ID замість класів? ID забезпечують унікальні ідентифікатори для конкретних елементів, тоді як CSS-класи призначені для стилізації груп елементів. Коли JavaScript потрібно маніпулювати окремими елементами, ID забезпечують точність і продуктивність, які нам потрібні.

💡 Корисна порада: Зверніть увагу, як ми викликаємо dragElement() для кожної рослини окремо. Такий підхід гарантує, що кожна рослина отримує власну незалежну поведінку перетягування, що є важливим для плавної взаємодії користувача.

🔄 Педагогічна перевірка

Розуміння зв'язку з DOM: Перед переходом до функціональності перетягування переконайтеся, що ви можете:

✅ Пояснити, як document.getElementById() знаходить елементи HTML
✅ Зрозуміти, чому ми використовуємо унікальні ID для кожної рослини
✅ Описати призначення атрибута defer у тегах скриптів
✅ Розпізнати, як JavaScript і HTML з'єднуються через DOM

Швидкий самотест: Що станеться, якщо два елементи матимуть однаковий ID? Чому getElementById() повертає лише один елемент? Відповідь: ID повинні бути унікальними; якщо вони дублюються, повертається лише перший елемент

Створення замикання для функції перетягування елементів

Тепер ми створимо серце нашої функціональності перетягування: замикання, яке керує поведінкою перетягування для кожної рослини. Це замикання міститиме кілька внутрішніх функцій, які працюватимуть разом, щоб відстежувати рухи миші та оновлювати позиції елементів.

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

Розуміння замикань на простому прикладі

Дозвольте продемонструвати замикання на простому прикладі, який ілюструє концепцію:

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

Чому використовувати Pointer Events?

Можливо, ви запитаєте, чому ми використовуємо onpointerdown замість більш знайомого onclick. Ось пояснення:

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

Чому pointer events ідеально підходять для того, що ми створюємо:

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

💡 Майбутнє забезпечення: Pointer events — це сучасний спосіб обробки взаємодій користувача. Замість написання окремого коду для миші та сенсорних пристроїв ви отримуєте обидва варіанти без додаткових зусиль. Досить круто, правда?

🔄 Педагогічна перевірка

Розуміння обробки подій: Зупиніться, щоб підтвердити своє розуміння подій:

✅ Чому ми використовуємо pointer events замість mouse events?
✅ Як змінні замикання зберігаються між викликами функцій?
✅ Яку роль відіграє preventDefault() у плавному перетягуванні?
✅ Чому ми додаємо слухачі до документа, а не до окремих елементів?

Зв'язок із реальним світом: Подумайте про інтерфейси перетягування, які ви використовуєте щодня:

Завантаження файлів: Перетягування файлів у вікно браузера
Канбан-дошки: Переміщення завдань між колонками
Галереї зображень: Зміна порядку фотографій
Мобільні інтерфейси: Переміщення та перетягування на сенсорних екранах

Функція 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;
}

Розуміння цих координат:

Надає інформацію про точне позиціонування пікселів
Оновлюється в реальному часі, коли користувач переміщує курсор
Залишається стабільним на різних розмірах екрана та рівнях масштабування
Дозволяє плавні, чутливі взаємодії з перетягуванням

Налаштування слухачів подій на рівні документа

Зверніть увагу, як ми прив'язуємо події переміщення та зупинки до всього 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 Pointer Events Guide - Комплексний довідник з подій вказівника
W3C Pointer Events Specification - Офіційна документація стандартів
JavaScript Closures Deep Dive - Розширені шаблони замикань

Сумісність браузерів:

CanIUse.com - Перевірка підтримки функцій у різних браузерах
MDN Browser Compatibility Data - Детальна інформація про сумісність

Можливості для практики:

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

🎯 Стратегія навчання: Найкращий спосіб закріпити ці концепції – через практику. Спробуйте створити варіації інтерфейсів із перетягуванням – кожен проект навчить вас чомусь новому про взаємодію користувача та маніпуляцію DOM.

⚡ Що ви можете зробити за наступні 5 хвилин

Відкрийте DevTools браузера та введіть document.querySelector('body') у консолі
Спробуйте змінити текст веб-сторінки за допомогою innerHTML або textContent
Додайте слухач подій кліку до будь-якої кнопки або посилання на веб-сторінці
Перегляньте структуру дерева DOM за допомогою панелі Elements

🎯 Що ви можете досягти за цю годину

Завершіть післялекційний тест і перегляньте концепції маніпуляції DOM
Створіть інтерактивну веб-сторінку, яка реагує на кліки користувача
Практикуйте обробку подій із різними типами подій (клік, наведення, натискання клавіш)
Створіть простий список завдань або лічильник за допомогою маніпуляції DOM
Досліджуйте взаємозв'язок між елементами HTML і об'єктами JavaScript

📅 Ваш тижневий шлях до освоєння JavaScript

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

🌟 Ваш місячний шлях до майстерності в JavaScript

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

🎯 Ваш графік освоєння DOM у JavaScript

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: Вибір елементів, маніпуляція властивостями та навігація деревом
Експертиза подій: Обробка взаємодій на різних пристроях за допомогою подій вказівника
Розуміння замикань: Управління приват

Відмова від відповідальності:
Цей документ був перекладений за допомогою сервісу автоматичного перекладу Co-op Translator. Хоча ми прагнемо до точності, будь ласка, майте на увазі, що автоматичні переклади можуть містити помилки або неточності. Оригінальний документ на його рідній мові слід вважати авторитетним джерелом. Для критичної інформації рекомендується професійний людський переклад. Ми не несемо відповідальності за будь-які непорозуміння або неправильні тлумачення, що виникають внаслідок використання цього перекладу.

51 KiB Raw Blame History Unescape Escape

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

Тест перед лекцією

Розуміння DOM: ваш шлях до інтерактивних веб-сторінок

Замикання в JavaScript: створення організованого, потужного коду

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

Налаштування вашого файлу JavaScript

Зв'язок JavaScript із елементами HTML

Увімкнення функціональності перетягування для всіх рослин

🔄 Педагогічна перевірка

Створення замикання для функції перетягування елементів

Розуміння замикань на простому прикладі

Чому замикання ідеально підходять для функціональності перетягування

Створення функції dragElement

Чому використовувати Pointer Events?

🔄 Педагогічна перевірка

Функція pointerDrag: захоплення початку перетягування

Налаштування слухачів подій на рівні документа

Завершення системи перетягування: рух і очищення

Функція elementDrag: відстеження руху

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

Функція stopElementDrag: очищення

Розуміння властивостей позиціонування CSS

Об'єднання всього: ваша повна система перетягування

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

🔄 Педагогічна перевірка

Виклик GitHub Copilot Agent 🚀

🚀 Додатковий виклик: розширте свої навички

Післялекційний тест

Огляд і самостійне навчання: поглиблення розуміння

Альтернативні підходи до перетягування

Розширені теми маніпуляції DOM

Основні ресурси для продовження навчання

⚡ Що ви можете зробити за наступні 5 хвилин

🎯 Що ви можете досягти за цю годину

📅 Ваш тижневий шлях до освоєння JavaScript

🌟 Ваш місячний шлях до майстерності в JavaScript

🎯 Ваш графік освоєння DOM у JavaScript

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

51 KiB

Raw Blame History Unescape Escape