Динамическое изменение текста на странице с помощью JavaScript
В этом уроке мы продолжим знакомиться с JavaScript и на практике применим знания для создания динамического взаимодействия с пользователем. Мы добавим на страницу поле ввода, и при каждом изменении текста в этом поле, наш заголовок будет изменяться в реальном времени. Это не только даст тебе больше опыта работы с DOM, но и покажет, как просто создавать интерактивные элементы с помощью JavaScript.
Введение:
В этом уроке мы научимся изменять текст на странице в реальном времени, используя JavaScript. Мы будем работать с элементами формы и DOM (Document Object Model). Это простое, но мощное упражнение, которое позволяет легко создавать динамичные веб-страницы, а главное — взаимодействовать с пользователем.
Шаг 1: Обновим нашу HTML-страницу
Вначале добавим текстовое поле (<input>) между заголовком и кнопкой. Это поле будет служить для ввода текста, который будет изменять содержимое заголовка.
Вот как будет выглядеть наш HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="animated-title" id="dynamicText">Hello World!</h1>
<input type="text" id="textInput" placeholder="Enter text here.." />
<button id="changeColorButton">Change background color</button>
<script src="script.js"></script>
</body>
</html>Шаг 2: Добавляем JavaScript для обработки изменений
Теперь давай добавим код JavaScript, который будет отслеживать изменения в поле ввода и обновлять текст заголовка.
В нашем файле script.js добавим следующее:
const dynamicText = document.getElementById("dynamicText");
const textInput = document.getElementById("textInput");
textInput.addEventListener("input", function() {
dynamicText.textContent = textInput.value;
});
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)})`;
});Что мы здесь сделали:
- Добавили слушатель событий на поле ввода, чтобы каждый раз при изменении текста в поле обновлялся текст в заголовке.
- Все изменения происходят мгновенно, что создает эффект динамического взаимодействия с пользователем.
Шаг 3: Стиль для нового элемента
Для поля ввода добавим несколько стилей, чтобы оно красиво выглядело на странице:
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;
}
input {
padding: 20px;
font-size: 1.3rem;
border-radius: 5px;
border: 1px solid #ddd;
margin: 20px 0;
width: 80%;
max-width: 400px;
outline: none;
opacity: 0.8;
}
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);
}
}Шаг 4: Тестируем
Теперь, когда мы обновили HTML, CSS и JavaScript, пора протестировать! Открой страницу в браузере, и ты увидишь, как текст в заголовке изменяется в зависимости от того, что ты пишешь в поле ввода. Если нажмешь на кнопку, фон страницы будет меняться на случайный градиент.
Заключение
Поздравляем! Ты только что создал первую динамическую страницу, которая изменяет контент в реальном времени. Это отличный пример того, как можно использовать JavaScript для взаимодействия с пользователем, делая страницу интерактивной.
Что дальше?
Этот урок стал последним в небольшом цикле Быстрый старт. За несколько простых шагов ты уже познакомился с основами работы с DOM, событиями и взаимодействием с пользователем. Мы начали с базовых понятий и создали несколько интерактивных элементов.
Но это только начало! Уже в следующем уроке мы начнем разрабатывать реальный проект, где будем учиться новым технологиям, инструментам и возможностям. Готовимся к созданию полноценного веб-приложения с реальной логикой и функциональностью!