§ 23. Элементы JavaScript для создания веб-страниц

23.1. Обработка событий

Основная задача при создании динамических веб-страниц в основном сводится к выбору объектов и выполнению над ними различных действий.

В сценариях JavaScript используются объекты браузера, с помощью которых можно взаимодействовать с элементами веб-страницы и самим браузером. Основные из объектов браузера:

  • window — самый главный объект в браузере, который отвечает за одно из окон (вкладок) браузера.
  • screen — объект, который предоставляет информацию об экране пользователя.
  • navigator — информационный объект с помощью которого можно получить различные данные, содержащиеся в браузере.
  • location — объект, который отвечает за адресную строку браузера (например, позволяет получить текущий адрес страницы).
  • document — загруженная страница со своей структурой элементов.

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

Корневой составляющей объектной модели документа является объект document. Именно объект document используется для получения, изменения или добавления содержимого в html-документ, а так же для обработки событий в этом документе. К элементам  html-документа можно получить доступ как к свойствам объекта document (пример 23.1). С назначением методов объекта document можно ознакомиться в  Приложении.

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

В примере 23.2 рассматривается использование метода, который позволяет разместить на веб-странице какой-либо контент.

В процессе добавления элементов на веб-страницу можно выделить три этапа: создание элемента, добавление контента в элемент и размещение элемента на странице (пример 23.3).

События отражают взаимодействие пользователя с интерфейсом (клик, наведение мыши, ввод текста и т. д.).

Некоторые часто используемые веб-события:

  • onchange — элемент на веб-странице был изменен.
  • onclick — щелчок мыши по элементу.
  • ondbclick — двойной щелчок мыши по элементу.
  • onmousemove — указатель мыши перемещается над объектом.
  • onmouseover — наведение указателя мыши на элемент.
  • onmouseout — указатель мыши выведен за пределы элемента.
  • onkeydown — нажатие клавиши клавиатуры.
  • onload — завершение загрузки страницы.

У любого события есть цель события. Цель события — это объект, в котором возникло событие или с которым это событие связано. С любым событием можно связать функцию (одну или более), которая будет автоматически вызываться браузером при возникновении события. Функция, которая используется для обработки события, называется обработчик события.

Общий вид записи обработчика события:

<элемент событие = "код JS">

Назначить обработчик событий проще всего в виде атрибута html-элемента (примеры 23.4—23.6).

При назначении обработчика события в виде атрибута html-элемента может быть использовано ключевое слово this, которое указывает на этот элемент ( примеры 23.4 и 23.5).

В примере 23.6 в записи обработчиков события onclick использована ссылка на функцию getElementById(), которая возвращает ссылку на html-элемент по его идентификатору — значению атрибута id.

Пример 23.1. Свойства объекта document, соответствующие элементам html-документа.

  1. document.documentElement — соответствует тегу <html>
  2. document.body — соответствует тегу <body>
  3. document.head — соответствует тегу <head>

Пример 23.2. Вывод на веб-страницу методом document.write().

1. Вывод текста с использованием внедрения.

Скрипт:

var name =

    prompt('Ваша iмя?', '');

document.write

    (`Прывітанне, ${name}!`);

Диалоговое окно:

Веб-страница:

2. Вывод текста в цикле

Скрипт:

for (var i = 0; i < 5; ++i)  {

  document.write

        ('Привет мир! <br>');}

Веб-страница:

Пример 23.3. Добавление на страницу блока с текстом.

Скрипт (должен располагаться в теле html-документа):

const div = document.createElement('div');

// создание блока

div.innerText = 'Hello, world!';

// добавление текста в блок

document.body.append(div);

// размещение блока в теле

Результат работы скрипта аналогичен работе следующего html-кода:

<div>Hello, world!</div>

Пример 23.4. Использование ключевого слова this в обработчике событий для изменения цвета текста.

<p style = "font-size: 16pt"

  onmouseover =

      "this.style.color='red'"

  onmouseout =

      "this.style.color = ''">

  Текст становится красным <br>

  при наведении указателя мыши <br>

  и черным при выведении <br>

  указателя за пределы текста

</p>

Пример 23.5. Использование ключевого слова this в обработчике событий для замены одного изображения другим.

Html-код:

<img src = "cat_l.jpg"

  onmouseover =

       "this.src = 'cat.jpg'"

  onmouseout =

    "this.src = 'cat_l.jpg'">

Реализация событий:

а) указатель мыши вне изображения

б) указатель мыши на изображении

Пример 23.6. Использование функции getElementById() и события onclick.

Скрипт:

function ch_Clr(newColor)    {

 var m =

 document.getElementById("z1");

 m.style.color = newColor;   }

Html-код:

<h1 id = "z1">Я меняю цвет</h1>

<button onclick =

            "ch_Clr('blue');">

  Синий

</button>

<button onclick =

             "ch_Clr('red');">

  Красный

</button>

Страница после загрузки:

Реализация событий: