6.4. Основы JavaScript: Диалоговые окна, События и Создание HTML элементов

 

Взаимодействие с пользователем через диалоговые окна браузера

Когда вы посещаете веб-страницу, вы можете взаимодействовать с ней с помощью различных элементов и функций, чтобы получить информацию или воздействовать на содержимое. С помощью JavaScript вы можете создать полноценную браузерную игру, в основе которой лежат принципы, изложенные далее.

Иногда вам придется использовать браузерные функции (API), некоторые из которых представлены ниже:

alert() - выводит диалоговое окно с сообщением для пользователя.

Пример:

alert("Привет, это важное сообщение!");

prompt() - выводит диалоговое окно с полем ввода, чтобы пользователь мог ввести данные.

Пример:

let имя = prompt("Как вас зовут?");

confirm() - выводит диалоговое окно с вопросом, на который пользователь может ответить "ОК" или "Отмена". Результатом выполнения функции является булево значение true (истина) или false (ложь).

Пример:

let подтверждение = confirm("Вы уверены?");

Упражнение 1. Напишите функцию product(), которая вычисляет произведение двух чисел, запрошенных через prompt(). Результат произведения выводится с помощью alert(), затем с помощью confirm() реализуйте продолжение выполнение вычисления или выход из скрипта.

 

See the Pen Browser_API by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.

 

События и их применение

События - это различные действия, которые могут произойти на веб-странице, например, нажатие клавиши, клик мыши или загрузка страницы. Вы можете использовать события для создания интерактивных и отзывчивых веб-приложений. Кроме того, именно на событиях клавиатуры и мыши и основана работа программы-шпиона – кейлогера.

Существуют различные события для множества элементов, например загрузка страницы, нажатие на кнопку или картинку и многое другое. Для отслеживания и реагирования на события используется специальная функция addEventListener() – обработчик событий. Синтаксис функции выглядит так:

объект.addEventListener(название_события, функция_к_исполнению);

В качестве объекта может выступать сам браузер, определенная кнопка, картинка или блок с текстом. К этому объеку привязывается обработчик событий, в котором указывается на какое событие реагировать и какую функцию запускать. Рассмотрим некоторые события.

 

События клавиатуры (например, keydown (клавиша нажата), keyup (клавиша отпущена)) - позволяют отслеживать нажатия клавиш. Пример:

document.addEventListener("keydown", function(event) {  if (event.key === "Enter") {    alert("Вы нажали клавишу Enter");  }});

Возможно данный код выглядит для вас непривычно, поэтому немного упростим его:

document.addEventListener("keydown", keyPressed);
function keyPressed(event) {if (event.key === "Enter") {     alert("Вы нажали клавишу Enter");  }}

Мы просто отдельно объявили функцию и указали её в обработчике. Заметьте, в обработчике событий после названия функции мы не указываем круглые скобки.

 

События мыши (например, click, mouseover, mouseout) - позволяют реагировать на действия мыши. Пример:

let button = document.querySelector("#myButton");button.addEventListener("click", function() {  alert("Кнопка была нажата!");});

 

События браузера (например, load, resize) - срабатывают при определенных действиях браузера. Пример:

window.addEventListener("resize", function() {  alert("Окно браузера было изменено в размере!");});

Рассмотрим простой пример. Допустим, вы хотите создать простой счетчик, который увеличивается при каждом нажатии кнопки:

 

See the Pen Counter by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.

 

В этом примере мы создали кнопку и счетчик, который увеличивается при каждом клике на кнопку. Это демонстрирует, как можно использовать события и API браузера для создания интерактивных веб-приложений.

Упражнение 2. На странице представлена окружность. Напишите функцию changeSize(), которая изменяет размер окружности при нажатии клавиш  с цифрами от 1 до 9. Для изменения размера круга необходимо одноврменно изменить свойства width и height. Не забудьте добавить px, например так: элемент.style.width = “10px”;

 

See the Pen Change Circle Size by Easy-Network Easy-Network (@Easy-Network-Easy-Network) on CodePen.

 

Динамическое создание и удаление HTML элементов

Динамическое создание и удаление элементов на веб-странице означает, что вы можете добавлять новые элементы (такие как текст, изображения, кнопки и др.) или удалять существующие элементы из веб-страницы с использованием JavaScript. Это полезно, когда вам нужно изменять содержимое страницы в реальном времени, например, при создании интерактивных веб-приложений или обновлении информации без перезагрузки страницы.

Какие функции отвечают за создание и удаление элементов?

document.createElement(имя_тега): Эта функция создает новый элемент с указанным именем тега. Например, document.createElement("p") создаст новый элемент абзаца <p>.

append(элемент): Этот метод добавляет указанный узел (элемент) в конец родительского элемента. Например, родитель.append(новыйЭлемент) добавит новыйЭлемент в конец элемента родитель.

remove(элемент): Этот метод удаляет указанный узел (элемент) из его родительского элемента. Например, родитель.remove(элемент) удалит элемент из элемента родитель.

Пример создания элемента:

// Создаем новый элементlet новыйЭлемент = document.createElement("p");
// Устанавливаем текстовое содержимое для элементановыйЭлемент.textContent = "Новый элемент";
// Добавляем элемент в конец контейнерародитель.append(новыйЭлемент);
// Добавляем элемент в начало контейнерародитель.prepend(новыйЭлемент);

 

Пример удаления элемента:

// Находим элемент, который нужно удалить (например, первый элемент <p> в контейнере)let элементДляУдаления = контейнер.querySelector("p");
// Удаляем элемент из контейнераконтейнер.remove(элементДляУдаления);

Зная, как создавать и удалять элементы с помощью JavaScript, можно полностью изменить содержимое веб страниц в уязвимых приложениях. Например, можно создать форму для входа на сайт, а введенные жертвой данные будут переданы автоматически на сервер злоумышленника.