Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
веб 5лаб.docx
Скачиваний:
0
Добавлен:
23.06.2025
Размер:
66.4 Кб
Скачать
  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", чтобы не вызывать отправку формы

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

Соседние файлы в предмете Web технологии