Задания на практику часть 3

1.

Задачи на практику
часть 3
Преподаватель: Жарков Алексей Сергеевич

2.

Требования
1.
2.
3.
4.
Делать самостоятельно;
Всё на JS (выборка элементов, удаление и прочее);
Переиспользовать всё что можно из предыдущих задач;
При недостатке информации - спрашивать.

3.

Задача 1: Изменение текста по клику
Цель: Научиться получать элемент и изменять его текстовое содержимое при срабатывании события click.
Что нужно сделать:
1.
2.
HTML: Создайте <h1> с текстом "Привет, мир!" и <button> с текстом "Изменить заголовок".
JavaScript:
● Получите ссылку на <h1> и <button> по их ID или тегам/классам.
● Добавьте обработчик события click на кнопку.
● Внутри обработчика измените textContent <h1> на "Заголовок изменен!".

4.

Задача 2: Переключение класса для изменения стиля
Цель: Практика добавления/удаления CSS-классов с помощью classList.toggle() для динамического изменения
стилей.
Что нужно сделать:
1.
2.
3.
HTML: Создайте <div> с текстом "Нажми меня!" и <button> с текстом "Переключить стиль".
CSS (в <style> теге или отдельном файле): Определите класс .highlight (например, с background-color: yellow;
и color: black;).
JavaScript:
● Получите ссылки на <div> и <button>.
● Добавьте обработчик click на кнопку.
● Внутри обработчика опишите логику добавления/удаления класса .highlight у <div>.

5.

Задача 3: Динамическое добавление элементов списка
Цель: Научиться создавать новые HTML-элементы и добавлять их в DOM.
Что нужно сделать:
1.
2.
HTML: Создайте пустой неупорядоченный список (<ul> с ID), текстовое поле (<input type="text"> с ID) и
кнопку (<button> с текстом "Добавить пункт").
JavaScript:
● Получите ссылки на <ul>, <input> и <button>.
● Добавьте обработчик click на кнопку "Добавить пункт".
● Внутри обработчика:
● Создайте новый элемент списка (<li>) с помощью document.createElement().
● Установите textContent нового <li> на значение из текстового поля (input.value).
● Добавьте новый <li> в <ul> с помощью appendChild().
● Очистите текстовое поле.

6.

Задача 4: Счетчик кликов
Цель: Практика отслеживания состояния в JS и обновления DOM на основе этого состояния.
Что нужно сделать:
1.
2.
HTML: Создайте <div> или <span> для отображения счетчика с текстом "Счетчик: 0" и <button> с текстом
"Увеличить". Для счётчика можно использовать дополнительные теги.
JavaScript:
● Создайте переменную count и инициализируйте ее значением 0.
● Получите ссылки на элемент счетчика и кнопку.
● Добавьте обработчик click на кнопку.
● Внутри обработчика:
● Увеличьте count на 1.
● Обновите textContent элемента счетчика, отображая новое значение count.

7.

Задача 5: Изменение атрибута изображения
Цель: Научиться получать и изменять атрибуты HTML-элементов, в частности src у <img>.
Что нужно сделать:
1.
2.
HTML: Создайте <img> с каким-либо начальным изображением (например,
https://via.placeholder.com/200x200?text=Initial) и <button> с текстом "Сменить изображение".
JavaScript:
● Подготовьте массив с несколькими URL-адресами изображений (например, placeholder-изображения
с разным текстом).
● Создайте переменную currentImageIndex для отслеживания текущего изображения, инициализируйте
ее 0.
● Получите ссылки на <img> и <button>.
● Добавьте обработчик click на кнопку.
● Внутри обработчика:
● Увеличьте currentImageIndex, но убедитесь, что оно не выходит за пределы массива.
● Измените атрибут src элемента <img> на URL из массива по текущему индексу.

8.

Задача 6: Удаление последнего элемента списка
Цель: Практика удаления элементов из DOM.
Что нужно сделать:
1.
2.
HTML: Создайте неупорядоченный список (<ul> с ID) с несколькими заранее добавленными пунктами (<li>).
Добавьте <button> с текстом "Удалить последний пункт".
JavaScript:
● Получите ссылки на <ul> и <button>.
● Добавьте обработчик click на кнопку.
● Внутри обработчика:
● Получите ссылку на последний дочерний элемент <ul>.
● Если последний элемент существует, удалите его.

9.

Задача 7: Валидация формы и предотвращение отправки
Цель: Использование preventDefault для перехвата отправки формы и выполнения простой валидации.
Что нужно сделать:
1.
2.
HTML: Создайте <form> с одним текстовым полем (<input type="text"> с ID), одним полем для email (<input
type="email"> с ID) и <button type="submit"> с текстом "Отправить". Добавьте <div> с ID для вывода
сообщений об ошибках.
JavaScript:
● Получите ссылки на <form>, поля ввода и <div> для сообщений.
● Добавьте обработчик события submit на форму.
● Внутри обработчика:
● Остановите стандартную отправку формы.
● Проверьте, не пустые ли текстовое поле и поле email.
● Если поле пустое, выведите сообщение об ошибке в divElement и покрасьте его в красный
цвет.
● Если все поля заполнены, выведите в divElement "Форма успешно отправлена (в консоль)!"
зеленым цветом и данные формы в консоль (используйте FormData для удобства).

10.

Задача 8: Скрытие/показ элемента
Цель: управление видимостью элементов.
Что нужно сделать:
1.
2.
3.
HTML: Создайте <div> (например, с width: 200px; height: 100px; background-color: lightblue;) и <button> с
текстом "Переключить видимость".
CSS (в <style> теге): добавьте нужный класс со свойствами при необходимости.
JavaScript:
● Получите ссылки на <div> и <button>.
● Добавьте обработчик click на кнопку.
● Внутри обработчика:
● Опишите логику скрытия/показа элемента.

11.

Задача 9: Изменение цвета текста по выбору из выпадающего
списка
Задача 9: Изменение цвета текста по выбору из выпадающего списка
Цель: Работа с событием change для <select> и изменение стилей элемента.
Что нужно сделать:
1.
2.
HTML: Создайте <p> с текстом "Измени мой цвет!" и <select> с ID, содержащий несколько <option> с
названиями цветов и их HEX-кодами в value (например, <option value="#FF0000">Красный</option>).
JavaScript:
● Получите ссылки на <p> и <select>.
● Добавьте обработчик события change на <select>.
● Внутри обработчика:
● Получите выбранное значение из selectElement.value.
● Установите для pElement выбранное значение.

12.

Задача 10: Делегирование событий для списка
Цель: Понять и применить концепцию делегирования событий для эффективной обработки кликов по
элементам в динамическом списке.
Что нужно сделать:
1.
2.
HTML: Создайте неупорядоченный список (<ul> с ID), содержащий 3-4 пункта (<li>) с каким-либо текстом.
Добавьте также кнопку, которая по клику будет добавлять новый пункт в список.
JavaScript:
● Получите ссылку на <ul> (родительский элемент).
● Вместо того чтобы вешать слушатель на каждый <li>, добавьте один обработчик click на <ul>.
● Внутри этого обработчика:
● Используйте event.target для определения, на каком именно элементе произошел клик.
● Проверьте, является ли event.target элементом <li>.
● Если это <li>, измените textContent этого <li> на "Нажато!" и добавьте ему класс .clicked
(например, с серым фоном).
● Убедитесь, что это работает как для исходных пунктов списка, так и для тех, которые вы добавляете
динамически с помощью кнопки.