Задачи к уроку 1.7: События и обработчики в JavaScript

Задача №1

Создайте кнопку на странице. При нажатии на кнопку должен выводиться текст "Hello, World!".

Решение:

let button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log('Hello, World!');
});

Описание решения:

Мы выбираем кнопку на странице и добавляем обработчик события 'click'. При нажатии на кнопку будет выводиться текст "Hello, World!" в консоль.

Задача №2

Создайте поле ввода на странице. При нажатии на клавишу "Enter" должен выводиться текст, введенный в поле ввода.

Решение:

let input = document.querySelector('input');
input.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log(input.value);
  }
});

Описание решения:

Мы выбираем поле ввода на странице и добавляем обработчик события 'keydown'. Если нажата клавиша "Enter", то будет выводиться текст, введенный в поле ввода.

Задача №3

Создайте две кнопки на странице. При нажатии на первую кнопку должен выводиться текст "Нажата первая кнопка", а при нажатии на вторую кнопку должен выводиться текст "Нажата вторая кнопка".

Решение:

let firstButton = document.querySelector('#first-button');
let secondButton = document.querySelector('#second-button');
firstButton.addEventListener('click', () => {
  console.log('Нажата первая кнопка');
});
secondButton.addEventListener('click', () => {
  console.log('Нажата вторая кнопка');
});

Описание решения:

Мы выбираем две кнопки на странице и добавляем обработчики событий 'click'. При нажатии на первую кнопку будет выводиться текст "Нажата первая кнопка", а при нажатии на вторую кнопку будет выводиться текст "Нажата вторая кнопка".

Задача №4

Создайте блок на странице. При наведении мыши на блок должен меняться его цвет на красный.

Решение:

let block = document.querySelector('.block');
block.addEventListener('mouseover', () => {
  block.style.backgroundColor = 'red';
});

Описание решения:

Мы выбираем блок на странице и добавляем обработчик события 'mouseover'. При наведении мыши на блок меняется его цвет на красный.

Задача №5

Создайте список на странице. При клике на элемент списка должен выводиться его текст.

Решение:

let list = document.querySelector('ul');
list.addEventListener('click', (event) => {
  console.log(event.target.textContent);
});

Описание решения:

Мы выбираем список на странице и добавляем обработчик события 'click'. При клике на элемент списка выводится его текст.

Задача №6

Создайте две кнопки на странице. При нажатии на первую кнопку должны появиться подробности, а при нажатии на вторую кнопку должны скрыться подробности.

Решение:

let details = document.querySelector('.details');
let showButton = document.querySelector('#show-button');
let hideButton = document.querySelector('#hide-button');
showButton.addEventListener('click', () => {
  details.style.display = 'block';
});
hideButton.addEventListener('click', () => {
  details.style.display = 'none';
});

Описание решения:

Мы выбираем блок с подробностями на странице и две кнопки. При нажатии на первую кнопку блок с подробностями становится видимым, а при нажатии на вторую кнопку блок скрывается.

Задача №7

Создайте поле ввода на странице. При фокусировке на поле ввода должен меняться его цвет на желтый.

Решение:

let input = document.querySelector('input');
input.addEventListener('focus', () => {
  input.style.backgroundColor = 'yellow';
});
input.addEventListener('blur', () => {
  input.style.backgroundColor = 'white';
});

Описание решения:

Мы выбираем поле ввода на странице и добавляем обработчики событий 'focus' и 'blur'. При фокусировке на поле ввода его цвет меняется на желтый, а при потере фокуса - на белый.

Задача №8

Создайте кнопку на странице. При двойном клике на кнопку должен выводиться текст "Кнопка была дважды нажата".

Решение:

let button = document.querySelector('button');
button.addEventListener('dblclick', () => {
  console.log('Кнопка была дважды нажата');
});

Описание решения:

Мы выбираем кнопку на странице и добавляем обработчик события 'dblclick'. При двойном клике на кнопку выводится текст "Кнопка была дважды нажата".

Задача №9

Создайте ссылку на странице. При наведении мыши на ссылку должен меняться ее цвет на зеленый.

Решение:

let link = document.querySelector('a');
link.addEventListener('mouseover', () => {
  link.style.color = 'green';
});
link.addEventListener('mouseout', () => {
  link.style.color = 'blue';
});

Описание решения:

Мы выбираем ссылку на странице и добавляем обработчики событий 'mouseover' и 'mouseout'. При наведении мыши на ссылку ее цвет меняется на зеленый, а при отведении - на синий.

Задача №10

Создайте кнопку на странице. При нажатии на кнопку должен увеличиваться ее размер.

Решение:

let button = document.querySelector('button');
let size = 50;
button.style.fontSize = `${size}px`;
button.addEventListener('click', () => {
  size += 5;
  button.style.fontSize = `${size}px`;
});

Описание решения:

Мы выбираем кнопку на странице и устанавливаем ее начальный размер в 50 пикселей. При нажатии на кнопку ее размер увеличивается на 5 пикселей.

Заключение

JavaScript - мощный инструмент для создания интерактивных веб-страниц. Знание событий и обработчиков в JavaScript позволяет создавать более сложные и интересные веб-приложения. Решение данных задач поможет вам закрепить материал данного урока.