1. Изменение текста на веб-странице

Рассмотрим пример, в котором JavaScript изменяет содержимое HTML-элемента после нажатия кнопки.

HTML-код:

<h2 id="message">Добро пожаловать!</h2>

<button id="changeButton">Изменить текст</button>

JavaScript-код:

const button = document.querySelector("#changeButton");

const message = document.querySelector("#message");

button.addEventListener("click", function() {

message.textContent = "Желаем успешной учёбы!";

});

Объяснение:

document.querySelector() — находит HTML-элемент по CSS-селектору.

addEventListener() — добавляет обработчик события.

click — событие нажатия на кнопку.

textContent — изменяет текстовое содержимое элемента.

Результат:

Первоначально отображается текст «Добро пожаловать!».

После нажатия кнопки текст изменяется на «Желаем успешной учёбы!».

2. Изменение оформления элемента с помощью classList

Рассмотрим пример выделения важного объявления на странице университета.

HTML-код:

<p id="announcement">Завтра состоится собрание студентов.</p>

<button id="highlightButton">Выделить объявление</button>

CSS-код:

.highlight {

background-color: yellow;

color: darkred;

padding: 10px;

}

JavaScript-код:

const announcement = document.querySelector("#announcement");

const highlightButton = document.querySelector("#highlightButton");

highlightButton.addEventListener("click", function() {

announcement.classList.toggle("highlight");

});

Объяснение:

classList — позволяет управлять CSS-классами элемента.

toggle() — добавляет класс, если его нет, и удаляет, если он уже присутствует.

highlight — класс, содержащий правила оформления.

Результат:

После первого нажатия кнопки объявление выделяется жёлтым фоном.

После повторного нажатия выделение исчезает.

3. Обработка отправки HTML-формы

Рассмотрим пример формы обратной связи, которая проверяет заполнение поля и показывает сообщение пользователю.

HTML-код:

<form id="feedbackForm">

<label for="studentName">Ваше имя:</label>

<input type="text" id="studentName">

<button type="submit">Отправить</button>

</form>

<p id="result"></p>

JavaScript-код:

const form = document.querySelector("#feedbackForm");

const input = document.querySelector("#studentName");

const result = document.querySelector("#result");

form.addEventListener("submit", function(event) {

event.preventDefault();

const name = input.value.trim();

if (name === "") {

result.textContent = "Введите ваше имя.";

} else {

result.textContent = "Спасибо, " + name + "!";

}

});

Объяснение:

submit — событие отправки формы.

preventDefault() — отменяет стандартную отправку формы.

value — получает значение поля ввода.

trim() — удаляет пробелы в начале и конце строки.

if — проверяет условие.

Результат:

Если поле пустое, появляется сообщение «Введите ваше имя».

Если пользователь введёт имя «Алия», появится сообщение «Спасибо, Алия!».

Форма демонстрирует клиентскую обработку и не отправляет данные на сервер.