# Неделя #3 Работа с DOM. DOM Events

# Подготовка к выполнению задания

Изучить все материалы третьей недели курса в Личном кабинете.

# Что нужно сделать?

# Выполнить домашнее задание #4 (Работа с DOM)

Скачайте архив с домашним заданием №4
Перейдите в папку с архивом
Приступаем к выполнению ДЗ №4
Задание 4.1:

4.1.1: Функция должна создать элемент с тегом <div>

4.1.2: В созданный элемент необходимо поместить текст, переданный в параметр text

Пример:

createDivWithText('loftschool') // создаст элемент div, поместит в него 'loftschool' и вернет созданный элемент

Задание 4.2: Функция должна вставлять элемент, переданный в параметре what в начало элемента, переданного в параметре where

Пример:

prepend(document.querySelector('#one'), document.querySelector('#two')) // добавит элемент переданный первым аргументом в начало элемента переданного вторым аргументом

Задание 4.3:

4.3.1: Функция должна перебрать все дочерние элементы узла, переданного в параметре where

4.3.2: Функция должна вернуть массив, состоящий из тех дочерних элементов, следующим соседом которых является элемент с тегом <p>

Пример:

   Представим, что есть разметка:
   <body>
      <div></div>
      <p></p>
      <a></a>
      <span></span>
      <p></p>
   </dody>

   findAllPSiblings(document.body) // функция должна вернуть массив с элементами div и span т.к. следующим соседом этих элементов является элемент с тегом `<p>`

Задание 4.4:

Функция представленная ниже, перебирает все дочерние узлы типа "элемент" внутри узла переданного в параметре where и возвращает массив из текстового содержимого найденных элементов. Но похоже, что в код функции закралась ошибка и она работает не так, как описано.

Необходимо найти и исправить ошибку в коде так, чтобы функция работала так, как описано выше.

Пример:

   Представим, что есть разметка:
   <body>
      <div>привет</div>
      <div>loftschool</div>
   </dody>

   findError(document.body) // функция должна вернуть массив с элементами 'привет' и 'loftschool'

Задание 4.5:

Функция должна перебрать все дочерние узлы элемента переданного в параметре where и удалить из него все текстовые узлы.

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

Пример:

   После выполнения функции, дерево <div></div>привет<p></p>loftchool!!!
   должно быть преобразовано в <div></div><p></p>

Задание 4.6:

Выполнить предудыщее задание с использование рекурсии - то есть необходимо заходить внутрь каждого дочернего элемента (углубляться в дерево)

Так же будьте внимательны при удалении узлов, т.к. можно получить неожиданное поведение при переборе узлов

Пример:

   После выполнения функции, дерево <span> <div> <b>привет</b> </div> <p>loftchool</p> !!!</span>
   должно быть преобразовано в <span><div><b></b></div><p></p></span>

Задание 4.7:*

Необходимо собрать статистику по всем узлам внутри элемента переданного в параметре root и вернуть ее в виде объекта.

Статистика должна содержать:

количество текстовых узлов
количество элементов каждого класса
количество элементов каждого тега

Для работы с классами рекомендуется использовать classList. Постарайтесь не создавать глобальных переменных

Пример:

   Для дерева <div class="some-class-1"><b>привет!</b> <b class="some-class-1 some-class-2">loftschool</b></div>
   должен быть возвращен такой объект:
   {
     tags: { DIV: 1, B: 2},
     classes: { "some-class-1": 2, "some-class-2": 1 },
     texts: 3
   }

Задание 4.8:*

4.8.1: Функция должна отслеживать добавление и удаление элементов внутри элемента переданного в параметре where. Как только в where добавляются или удаляются элементы, необходимо сообщать об этом при помощи вызова функции переданной в параметре fn

4.8.2: При вызове fn необходимо передавать ей в качестве аргумента объект с двумя свойствами:

type: типа события (insert или remove)
nodes: массив из удаленных или добавленных элементов (в зависимости от события)

4.8.3: Отслеживание должно работать вне зависимости от глубины создаваемых/удаляемых элементов

Рекомендуется использовать MutationObserver

Пример:

   Если в where или в одного из его детей добавляется элемент div
   то fn должна быть вызвана с аргументом:
   {
     type: 'insert',
     nodes: [div]
   }
   ------
   Если из where или из одного из его детей удаляется элемент div
   то fn должна быть вызвана с аргументом:
   {
     type: 'remove',
     nodes: [div]
   }

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

# Выполнить домашнее задание #5 (DOM Events)

Скачайте архив с домашним заданием №5
Перейдите в папку с архивом
Приступаем к выполнению ДЗ №5
Задание 5.1:

Функция должна добавлять обработчик fn события eventName к элементу target

Пример:

   addListener('click', document.querySelector('a'), () => console.log('...')) // должна добавить указанный обработчик кликов на указанный элемент

Задание 5.2:

Функция должна удалять у элемента target обработчик fn события eventName

Пример:

   removeListener('click', document.querySelector('a'), someHandler) // должна удалить указанный обработчик кликов на указанный элемент

Задание 5.3:

Функция должна добавить к элементу target такой обработчик на события eventName, чтобы он отменял действия по умолчанию

Пример:

   skipDefault('click', document.querySelector('a')) // после вызова функции, клики на указанную ссылку не должны приводить к переходу на другую страницу

Задание 5.4:

Функция должна эмулировать событие click для элемента target

Пример:

   emulateClick(document.querySelector('a')) // для указанного элемента должно быть сэмулировано события click

Задание 5.5:

Функция должна добавить такой обработчик кликов к элементу target, который реагирует (вызывает fn) только на клики по элементам <button> внутри target

Пример:

   delegate(document.body, () => console.log('кликнули на button')) // добавит такой обработчик кликов для body, который будет вызывать указанную функцию только если кликнули на кнопку (элемент с тегом button)

Задание 5.6:

Функция должна добавить такой обработчик кликов к элементу target, который сработает только один раз и удалится (перестанет срабатывать для последующих кликов по указанному элементу)

Пример:

   once(document.querySelector('button'), () => console.log('обработчик выполнился!')) // добавит такой обработчик кликов для указанного элемента, который вызовется только один раз и затем удалится

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

Задание со звездочкой

Создайте страницу с кнопкой.

При нажатии на кнопку должен создаваться div со случайными размерами, цветом и позицией на экране Необходимо предоставить возможность перетаскивать созданные div при помощи drag and drop Запрещено использовать сторонние библиотеки. Разрешено пользоваться только тем, что встроено в браузер

homeworkContainer - это контейнер для всех ваших домашних заданий Если вы создаете новые html-элементы и добавляете их на страницу, то дабавляйте их только в этот контейнер

Пример:

   const newDiv = document.createElement('div');
   homeworkContainer.appendChild(newDiv);

const homeworkContainer = document.querySelector('#homework-container');

Функция должна создавать и возвращать новый div с классом draggable-div и случайными размерами/цветом/позицией
Функция должна только создавать элемент и задвать ему случайные размер/позицию/цвет
Функция НЕ должна добавлять элемент на страницу. На страницу элемент добавляется отдельно

Пример:

   const newDiv = createDiv();
   homeworkContainer.appendChild(newDiv);

Функция должна добавлять обработчики событий для перетаскивания элемента при помощи drag and drop

Пример:

   const newDiv = createDiv();
   homeworkContainer.appendChild(newDiv);
   addListeners(newDiv);

Дедлайн: понедельник следующей недели, в 12.00

# Как всё успеть?

Данный план является примерным ориентиром. Вы всегда можете работать в удобном для себя темпе.

# 🗓 Понедельник

Изучаем материалы по теме "DOM"

Выполняем домашнее задание 4

# 🗓 Вторник

Продолжаем изучать материалы по теме "DOM"

Сдаём домашнее задание 4 на проверку.

Вносим правки в домашнее задание №4 после проверки его наставником.

# 🗓 Среда

Изучаем материалы по теме "Асинхронность"

Изучаем материалы из прикрепленных ссылок

Выполняем домашнее задание 5

# 🗓 Четверг

Перечитываем методичку по теме "DOM"

Перечитываем методичку по теме "Асинхронность"

Подготовьте вопросы и запишитесь на консультацию к наставнику.

# 🗓 Пятница

Оставляем вопросы на канале #practice для вебинара "вопрос-ответ"

Сдаём домашнее задание 5 на проверку.

Вносим правки в домашнее задание №5 после проверки его наставником.

# 🗓 Суббота

В 12:00 посетить вебинар "вопрос-ответ"