1. Управление формой:

   • Есть две стратегии управления формой (переключаются радиокнопками):

     • Скрытие/показ через display: none/block

     • Полное удаление/создание формы

2. Создание формы:

   • Динамически создаются элементы формы (<form>, <input>, <button>)

   • Настраиваются их атрибуты и стили

   • Форма добавляется в контейнер

3. Валидация email:

   • Проверка введенного email с помощью регулярного выражения

   • Визуальная обратная связь (красная рамка при ошибке)

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

Подробный разбор Практического занятия 2: Работа с DOM и формами

Второе практическое занятие посвящено взаимодействию JavaScript с DOM (Document Object Model) и работе с формами. Давайте детально разберем каждую часть этого задания.

Общая структура задания

Занятие состоит из трех основных задач:

1. Получение текста из существующего DOM-элемента

2. Создание нового элемента и добавление его на страницу

3. Динамическое управление формой (создание/удаление, валидация)

Задание 1: Получить текст элемента

Код:

javascript

Copy

Download

document.getElementById('copy-text-btn').addEventListener('click', function() {

const sourceElement = document.getElementById('source-element');

const textToCopy = sourceElement.textContent;

document.getElementById('dom-task1-result').innerHTML =

`<p>Текст элемента: "${textToCopy}"</p>`;

});

Пошаговый разбор:

1. Поиск кнопки и добавление обработчика события:

   • document.getElementById('copy-text-btn') находит кнопку по её ID

   • .addEventListener('click', function() {...}) добавляет обработчик клика

2. Получение исходного элемента:

   • document.getElementById('source-element') находит элемент, текст которого нужно скопировать

3. Извлечение текста:

   • textContent возвращает весь текст внутри элемента, включая текст в дочерних элементах (в отличие от innerText, который учитывает CSS-стили)

4. Вывод результата:

   • Результат записывается в элемент с id="dom-task1-result"

   • Используется шаблонная строка (обратные кавычки) для удобного форматирования

Особенности:

• Метод textContent предпочтительнее innerHTML, когда нужно работать именно с текстом, а не с разметкой

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

Задание 2: Создать новый элемент

Код:

javascript

Copy

Download

const newParagraph = document.createElement('p');

newParagraph.textContent = textToCopy;

newParagraph.id = 'new-paragraph';

newParagraph.style.marginTop = '10px';

newParagraph.style.padding = '10px';

newParagraph.style.backgroundColor = '#e8f8f0';

const container = document.getElementById('new-paragraph-container');

container.innerHTML = '';

container.appendChild(newParagraph);

document.getElementById('dom-task2-result').innerHTML =

`<p>Новый абзац создан и добавлен на страницу</p>`;

Пошаговый разбор:

1. Создание нового элемента:

   • document.createElement('p') создает новый абзац

   • textContent устанавливает текст (берется из предыдущего задания)

2. Настройка элемента:

   • Задается ID для возможного последующего доступа

   • Через свойство style устанавливаются CSS-стили (инлайновые)

3. Подготовка контейнера:

   • container.innerHTML = '' полностью очищает контейнер

   • Это важно, чтобы при повторных кликах не создавались дубликаты

4. Добавление элемента:

   • appendChild() добавляет созданный элемент в контейнер

5. Вывод сообщения:

   • В отдельный блок выводится подтверждение создания элемента

Особенности:

• Можно было бы использовать insertAdjacentHTML() вместо создания элемента и appendChild()

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

Задания 3-5: Работа с формой

Основной код:

javascript

Copy

Download

const formControlBtn = document.getElementById('form-control-btn');

const formContainer = document.getElementById('form-container');

let currentForm = null;

let isFormVisible = true;

formControlBtn.addEventListener('click', function() {

const method = document.querySelector('input[name="toggle-method"]:checked').value;

if (method === 'display') {

// Метод display: none

if (!currentForm) {

createForm();

formControlBtn.textContent = 'Скрыть форму';

isFormVisible = true;

} else {

if (isFormVisible) {

currentForm.style.display = 'none';

formControlBtn.textContent = 'Показать форму';

} else {

currentForm.style.display = 'block';

formControlBtn.textContent = 'Скрыть форму';

}

isFormVisible = !isFormVisible;

}

} else {

// Метод удаления/создания

if (currentForm) {

currentForm.remove();

currentForm = null;

formControlBtn.textContent = 'Создать форму';

document.getElementById('dom-task3-5-result').innerHTML =

`<p>Форма удалена</p>`;

} else {

createForm();

formControlBtn.textContent = 'Удалить форму';

}

}

});

function createForm() {

if (currentForm) return;

const form = document.createElement('form');

form.id = 'dynamic-form';

const input = document.createElement('input');

input.type = 'email';

input.placeholder = 'Введите ваш email';

input.id = 'email-input';

input.required = true;

const button = document.createElement('button');

button.type = 'button';

button.textContent = 'Проверить email';

form.appendChild(input);

form.appendChild(button);

formContainer.appendChild(form);

currentForm = form;

// Валидация email

button.addEventListener('click', function() {

const email = input.value.trim();

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (emailRegex.test(email)) {

alert('Email валиден!');

input.style.borderColor = '';

} else {

alert('Пожалуйста, введите корректный email');

input.style.borderColor = 'red';

}

});

document.getElementById('dom-task3-5-result').innerHTML =

`<p>Форма создана и добавлена на страницу</p>`;

}

Пошаговый разбор:

1. Инициализация:

   • Получаем ссылки на кнопку управления и контейнер формы

   • Создаем переменные для отслеживания состояния формы

2. Обработчик клика:

   • Определяем выбранный метод управления (через радиокнопки)

   • Два основных сценария:

     • Управление видимостью через display

     • Полное удаление/создание формы

3. Метод display: none:

   • При первом клике создается форма

   • При последующих - переключается видимость

   • Меняется текст кнопки в зависимости от состояния

4. Метод удаления:

   • Если форма есть - удаляем её

   • Если нет - создаем новую

   • Также меняется текст кнопки

5. Функция createForm():

   • Создает элементы формы (<form>, <input>, <button>)

   • Настраивает их атрибуты (type, placeholder, required)

   • Добавляет элементы в DOM

   • Сохраняет ссылку на форму в переменную currentForm

6. Валидация email:

   • Используется регулярное выражение для проверки формата email

   • При невалидном email добавляется красная рамка

   • Выводятся соответствующие сообщения в alert

Особенности:

1. Два подхода к управлению видимостью:

   • display: none скрывает элемент, но он остается в DOM

   • remove() полностью удаляет элемент из DOM

2. Валидация:

   • Используется type="email", что дает базовую валидацию в браузере

   • Регулярное выражение добавляет дополнительную проверку

   • required предотвращает отправку пустого поля

3. Доступность:

   • Кнопка проверки имеет type="button", чтобы не вызывать отправку формы

   • Сообщения об ошибках дают обратную связь пользователю