Назад Вперед Зміст

Практична робота.Пишемо скрипт, який пише веб-сторінку


<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <title>DOM (Об'єктна модель документа)</title>
</head>
<body>
    <script src='./dom.js'><script>
</body>
<html>
  1. Створити div
  2. Додати до нього клас wrapper
  3. Помістити його всередину body body
  4. Створити заголовок H1 "DOM (Document Object Model)"
  5. Додати H1 перед DIV з класом wrapper
  6. Створити список
  7. Додати до нього 3 елементи з текстом "один, два, три"
  8. Помістити список всередину елемента з класом wrapper
  9. Створити зображення
  10. Додати такі властивості до зображення
    1. 1. Додати атрибут source
    2. 2. Додати атрибут width зі значенням 240
    3. 3. Додати клас super
    4. 4. Додати властивість alt зі значенням «Кішка»
  11. Помістити зображення всередину елемента з класом wrapper
  12. Використовуючи HTML рядок, створити DIV з класом 'pDiv' + з двома параграфами
  13. Помістити цей DIV до елемента список
  14. Додати для 2-го параграфу клас text
  15. Видалити 1-й параграф

Які методи нам знадобляться.

Метод document.createElement()

document.createElement(tagName[, options])

Створює новий елемент типу, який вказаний у параметрі tagName.

[options] - необов'язкові параметри функції. Наразі можете не звертати на них уваги.

Ця функція НЕ додає ваш новий елемент до DOM - вона лише створює його в пам'яті. Це зроблено для того, щоб ви могли змінювати елемент (додавати стилі, класи, ідентифікатори, текст тощо) перед тим, як розмістити його на сторінці.

Як додати елемент до DOM?

Ви можете додати елемент до DOM одним із таких способів:

Приклад використання:


const newDiv = document.createElement("div");
newDiv.textContent = "Привіт, світ!";
newDiv.classList.add("box");
document.body.appendChild(newDiv);

Додавання Inline-стилів у JavaScript

Стилі в JavaScript аналогічні стилям у CSS, але назви властивостей, які записані через дефіс, змінюються на camelCase.

Наприклад:

Способи додавання стилів:

1. Додавання окремого стилю

div.style.color = 'blue';

Додає вказаний стиль до елемента.

2. Додавання декількох стилів через cssText

div.style.cssText = 'color: blue; background: white';

Дозволяє встановити декілька стилів одночасно.

3. Додавання стилів через setAttribute

div.setAttribute('style', 'color: blue; background: white');

Альтернативний спосіб додавання декількох стилів.

Приклад використання:


const element = document.createElement('div');
element.textContent = 'Приклад тексту';
element.style.backgroundColor = 'lightblue';
element.style.padding = '10px';
element.style.borderRadius = '5px';
document.body.appendChild(element);

Примітка: Inline-стилі мають найвищий пріоритет і перевизначають стилі з CSS-файлів.

Додавання тексту та HTML-вмісту

Додавання тексту (textContent)

div.textContent = 'Привіт, світ!';

Створює текстовий вузол, що містить "Привіт, світ!" та вставляє його в елемент div.

Переваги: Безпечний метод, автоматично екранує HTML-теги.

Додавання HTML-вмісту (innerHTML)

div.innerHTML = '<span>Привіт, світ!</span>';

Вставляє HTML-код всередину елемента div.

Використання: Коли потрібно додати саме HTML-розмітку, а не просто текст.

Важливо!

textContent є кращим вибором для роботи зі звичайним текстом.

innerHTML слід використовувати обережно, оскільки при неправильному використанні він може створити загрозу безпеці (XSS-атаки).

Рекомендації щодо використання:

Практичний приклад:


// Безпечне додавання тексту
const greeting = document.createElement('div');
greeting.textContent = 'Ласкаво просимо на наш сайт!';
document.body.appendChild(greeting);

// Додавання HTML (з обережністю)
const htmlContent = document.createElement('div');
htmlContent.innerHTML = '<p>Це <strong>форматований</strong> текст</p>';
document.body.appendChild(htmlContent);

Пишемо скрипт. 


<script>
        // 1. Створюємо DIV елемент
        const div = document.createElement('div');
        
        // 2. Додаємо клас wrapper
        div.classList.add('wrapper');
        
        // 3. Додаємо його до body
        document.body.appendChild(div);
        
        // 4. Створюємо заголовок H1
        const header = document.createElement('h1');
        header.textContent = 'DOM (Об\'єктна модель документа)';
        
        // 5. Додаємо H1 перед DIV з класом wrapper
        div.insertAdjacentElement('beforebegin', header);
        
        // 6. Створюємо список UL з трьома елементами
        const ul = `
            <ul>
                <li>Один</li>
                <li>Два</li>
                <li>Три</li>
            </ul>
        `;
        
        // 7. Додаємо список всередину wrapper
        div.innerHTML = ul;
        
        // 8. Створюємо зображення
        const img = document.createElement("img");
        img.src = "Kisa.gif"
        img.width = 240;
        img.classList.add("super");
        img.alt = "Супер Кіт"
        div.appendChild(img);
        
        // 9. Створюємо DIV з двома параграфами (використовуючи HTML рядок)
        const elemHTML = `
             <div class="pDiv">
                 <p>Параграф 1 </p>
                 <p>Параграф 2 </p>
             </div>
        `;
        
        // 10. Додаємо цей DIV перед списком
        const ulList = div.querySelector('ul');
        ulList.insertAdjacentHTML("beforebegin", elemHTML);
        
        // 11. Додаємо клас text до другого параграфа
        const pDiv = document.querySelector(".pDiv");
        pDiv.children[1].classList.add("text");
        
        // 12. Видаляємо перший параграф
        pDiv.firstElementChild.remove();
   </script>
  1. Створити функцію generateAutoCard, яка приймає 3 аргументи: brand, color, year

    Функція має повертати розмітку HTML: 

     <div class="autoCard">
          <h2>BRAND YEAR</h2>
    <p>Автомобіль BRAND - YEAR року. Вік авто - YEARS років.
  </div>
  2. Створити новий DIV з класом autos
  3. Створити 3 картки авто, використовуючи функцію generateAutoCard 
    const carsList= 
    {brand: 'Tesla', year: 2015, color: 'Червоний'}, 
    {brand: 'Lexus', year: 2016, color: 'Сріблястий'}, 
    {brand: 'Nissan', year: 2012, color: 'Чорний'},
  4. Помістити ці 3 карти всередину DIV з класом autos
  5. Помістити DIV з класом autos на сторінку DOM - до DIV з класом wrapper
  6. Додати кнопку Видалити на кожну картку авто
  7. При натисканні на кнопку - видаляти картку зі структури DOM
  8. Вибрати всі кнопки
  9. Створити функцію видалення
  10. Використовувати цикл - щоб повісити обробник події на кожну кнопку.Події DOM надсилаються щоб повідомити код про те, що дії, що його цікавляться, відбулися. що дозволяють отримати додаткову інформацію про те, що сталося. Елемент отримує click подію, коли кнопка вказівного пристрою (наприклад, основна кнопка миші) одночасно натискається і відпускається, поки покажчик знаходиться всередині елемента. Поки будемо обробляти подію так: '-подія, обробник стрілочна функція.event.currentTarget – це поточний елемент, на якому сталася подія.

Самостійно:

Назад Вперед Зміст