Hello World оживает: Знакомство с JavaScript
В предыдущих уроках мы создали простую страницу с фразой "Hello World!" и улучшили её с помощью CSS. Теперь пришло время добавить немного интерактивности с использованием JavaScript! В этом уроке мы научимся изменять фон страницы с помощью кнопки. Давайте шаг за шагом разберём, как это сделать.
1. HTML: Структура страницы
Мы начнем с того, что создадим структуру страницы, которая будет включать заголовок и кнопку для изменения фона. Вот как будет выглядеть наш HTML-код:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="animated-title">Hello World!</h1>
<button id="changeColorButton">Change background color</button>
<script src="script.js"></script>
</body>
</html>Здесь:
- Мы добавили кнопку с ID changeColorButton, которая будет изменять фон страницы.
- Заголовок h1 содержит фразу "Hello World!" и имеет класс для анимации.
2. CSS: Стилизация страницы
Теперь давайте добавим стили для страницы, чтобы она выглядела красиво. В этом разделе мы создадим градиентный фон, стилизуем заголовок и кнопку, а также добавим анимацию для текста и эффект нажатия на кнопку.
/* Задаем общий стиль для страницы */
body {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Градиентный фон */
font-family: 'Arial', sans-serif; /* Шрифт */
color: white; /* Белый цвет текста */
display: flex; /* Центрирование содержимого */
justify-content: center;
align-items: center;
height: 100vh; /* Высота экрана */
margin: 0;
flex-direction: column;
}
/* Стили для заголовка */
h1 {
font-size: 3rem; /* Размер текста */
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Тень */
animation: pulse 2s infinite; /* Анимация */
}
/* Стили для кнопки */
button {
background-color: #5d439e;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 20px;
cursor: pointer;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, transform 0.3s ease;
}
button:hover {
background-color: #4a3380; /* Темнее зеленый при наведении */
transform: translateY(-2px); /* Эффект поднятия */
}
button:active {
background-color: #3e8e41; /* Еще темнее при нажатии */
transform: translateY(2px); /* Эффект опускания */
}
/* Анимация пульсации текста */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}Здесь:
- Градиентный фон: Мы использовали линейный градиент для создания плавного перехода между цветами от розового к оранжевому.
- Анимация для заголовка: Добавили анимацию "пульсация", чтобы заголовок выглядел динамично и привлекал внимание.
- Кнопка: Сделали кнопку привлекательной с эффектом при наведении и нажатии.
3. JavaScript: Добавляем интерактивность
Теперь пришло время добавить JavaScript. Мы будем использовать кнопку для изменения фона страницы. Каждый раз, когда пользователь будет нажимать на кнопку, фон будет менять цвета на случайный градиент.
document.getElementById("changeColorButton").addEventListener("click", function() {
// Изменяем фон страницы при нажатии на кнопку
document.body.style.background = `linear-gradient(45deg, #${Math.floor(Math.random()*16777215).toString(16)}, #${Math.floor(Math.random()*16777215).toString(16)})`;
});В этом коде:
- Мы привязываем обработчик события к кнопке с ID changeColorButton.
- При каждом клике на кнопку фон страницы будет менять свой цвет на случайный градиент.
Результат
Теперь ваша страница выглядит не только красиво, но и интерактивно. Заголовок "Hello World!" пульсирует, а при каждом клике на кнопку фон страницы будет изменяться на случайный градиент.
Заключение
Поздравляю! Вы только что добавили интерактивность в ваш проект с помощью JavaScript. В следующих уроках мы продолжим работать с JavaScript, чтобы создать ещё более интересные и динамичные веб-страницы.
Присоединяйтесь к нам в следующем уроке, где мы будем изучать работу с формами и как обрабатывать данные пользователя с помощью JavaScript.
🚀 Не забывайте практиковаться и экспериментировать с кодом!