
- •1. Что такое ecmaScript?
- •2. Что такое типизация и какую типизацию использует JavaScript?
- •3. Типы данных в JavaScript
- •5. Стрелочные функции
- •6. Объекты в JavaScript
- •Вопросы для оценки самостоятельной работы:
- •2. Добавление / удаление классов:
- •Управление формой:
- •Создание формы:
- •Валидация email:
Управление формой:
Есть две стратегии управления формой (переключаются радиокнопками):
Скрытие/показ через display: none/block
Полное удаление/создание формы
Создание формы:
Динамически создаются элементы формы (<form>, <input>, <button>)
Настраиваются их атрибуты и стили
Форма добавляется в контейнер
Валидация email:
Проверка введенного email с помощью регулярного выражения
Визуальная обратная связь (красная рамка при ошибке)
Вывод alert с результатом проверки
Подробный разбор Практического занятия 2: Работа с DOM и формами
Второе практическое занятие посвящено взаимодействию JavaScript с DOM (Document Object Model) и работе с формами. Давайте детально разберем каждую часть этого задания.
Общая структура задания
Занятие состоит из трех основных задач:
Получение текста из существующего DOM-элемента
Создание нового элемента и добавление его на страницу
Динамическое управление формой (создание/удаление, валидация)
Задание 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>`;
});
Пошаговый разбор:
Поиск кнопки и добавление обработчика события:
document.getElementById('copy-text-btn') находит кнопку по её ID
.addEventListener('click', function() {...}) добавляет обработчик клика
Получение исходного элемента:
document.getElementById('source-element') находит элемент, текст которого нужно скопировать
Извлечение текста:
textContent возвращает весь текст внутри элемента, включая текст в дочерних элементах (в отличие от innerText, который учитывает CSS-стили)
Вывод результата:
Результат записывается в элемент с 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>`;
Пошаговый разбор:
Создание нового элемента:
document.createElement('p') создает новый абзац
textContent устанавливает текст (берется из предыдущего задания)
Настройка элемента:
Задается ID для возможного последующего доступа
Через свойство style устанавливаются CSS-стили (инлайновые)
Подготовка контейнера:
container.innerHTML = '' полностью очищает контейнер
Это важно, чтобы при повторных кликах не создавались дубликаты
Добавление элемента:
appendChild() добавляет созданный элемент в контейнер
Вывод сообщения:
В отдельный блок выводится подтверждение создания элемента
Особенности:
Можно было бы использовать 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>`;
}
Пошаговый разбор:
Инициализация:
Получаем ссылки на кнопку управления и контейнер формы
Создаем переменные для отслеживания состояния формы
Обработчик клика:
Определяем выбранный метод управления (через радиокнопки)
Два основных сценария:
Управление видимостью через display
Полное удаление/создание формы
Метод display: none:
При первом клике создается форма
При последующих - переключается видимость
Меняется текст кнопки в зависимости от состояния
Метод удаления:
Если форма есть - удаляем её
Если нет - создаем новую
Также меняется текст кнопки
Функция createForm():
Создает элементы формы (<form>, <input>, <button>)
Настраивает их атрибуты (type, placeholder, required)
Добавляет элементы в DOM
Сохраняет ссылку на форму в переменную currentForm
Валидация email:
Используется регулярное выражение для проверки формата email
При невалидном email добавляется красная рамка
Выводятся соответствующие сообщения в alert
Особенности:
Два подхода к управлению видимостью:
display: none скрывает элемент, но он остается в DOM
remove() полностью удаляет элемент из DOM
Валидация:
Используется type="email", что дает базовую валидацию в браузере
Регулярное выражение добавляет дополнительную проверку
required предотвращает отправку пустого поля
Доступность:
Кнопка проверки имеет type="button", чтобы не вызывать отправку формы
Сообщения об ошибках дают обратную связь пользователю