Наша группа в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

DHTML

DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тегов и атрибутов, а просто обеспечивает возможность программного управления всеми тегами, атрибутами и каскадными листами стилей (CSS).

События динамичеcкого HTML

На WEB-страницах можно обеспечить реакцию на определенные действия посетителя или изменения состояния документа или окна, которые вызывают определенные события.

Посетитель генерирует события при передвижении мыши, нажатии кнопок мыши и клавиатуры. Изменения состояния документа генерируют события при загрузке документа, изображений или объектов, при появлении ошибки на странице или переходе фокуса от одного элемента к другому.

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.

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

Пример 1
<h2>Всплывание события</h2>
<p>
    Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:
</p>
<p>
    <a href="be.htm">
        <img src="be.gif" alt="Людвиг ван Бетховен" style="vertical-align: middle;">Кто это?
    </a>
</p>

РЕЗУЛЬТАТ:

Всплывание события

Для получения информации можно щелкнуть мышкой как на изображении, так и на тексте:

Людвиг ван БетховенКто это?


Действие по умолчанию обеспечивается встроенной в броузер обработкой событий. Например, действием по умолчанию на нажатие ссылки <a href="…"> является переход по указанному адресу и загрузка страницы. Многие события позволяют заменить встроенные действия по умолчанию на индивидуальную обработку.

Связывание событий

Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тега script.

Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.

Пример 2
<h2>Смена графического объекта</h2>
<p>
    Для смены графического объекта переместите на него мышку –
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.<br>
    Уведите с него мышку –
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
</p>
<a href="" onmouseover="document.getElementById('B_B').src='ba.gif'"
   onmouseout="document.getElementById('B_B').src='be.gif'">
    <img id="B_B" src="be.gif">
</a>

РЕЗУЛЬТАТ:

Смена графического объекта

Для смены графического объекта переместите на него мышку – Иоганн Себастьян Бах сменит Людвига ван Бетховена.
Уведите с него мышку – Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.

Пример 3
<h2>Изменение вида данного элемента</h2>
<p class="b" onmousedown="this.style.fontStyle='italic'; this.style.color='red'"
   onmouseup="this.style.fontStyle=''; this.style.color='black'">
    Для изменения цвета и стиля шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>

РЕЗУЛЬТАТ ПРИМЕРОВ 3 - 5:

Изменение вида данного элемента

Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши

Обратите внимание на то, что в примере 2 область действия обработчика события определена с помощью идентификатора B_B, а в примере 3 – с помощью указателя this.

Применение script является более общим механизмом связывания события со сценарием. Все события представлены как свойства в DOM. Используя это, перепишем наш пример в таком виде:

Пример 4
<h2>Изменение вида данного элемента</h2>
<p class="b" id="B4">
    Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>
<script>
    document.getElementById('B4').onmousedown=new
        Function("this.style.fontStyle='italic'; this.style.color='red';");
    document.getElementById('B4').onmouseup=new
        Function("this.style.fontStyle=''; this.style.color='black';");
</script>

Можно также использовать метод addEventListener():

Пример 5
<h2>Изменение вида данного элемента</h2>
<p class="b" id="B5">
    Для изменения цвета и шрифта данного текста нажимайте и отпускайте кнопку мыши
</p>
<script>
    document.getElementById("B5").addEventListener("mousedown", reditalic);
    document.getElementById("B5").addEventListener("mouseup", blacknormal);

    function reditalic() {
        document.getElementById('B5').style.fontStyle='italic'; document.getElementById('BBB').style.color='red';
    }
    function blacknormal() {
        document.getElementById('B5').style.fontStyle=''; document.getElementById('BBB').style.color='black';
    }
</script>

События мыши

OnMouseOver
Перемещение указателя мыши на элемент.
OnMouseOut
Перемещение указателя мыши за пределы элемента.
OnMouseDown
Нажатие любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка нажата: 1 = левая, 2 = правая, 4 = средняя.
OnMouseUp
Отпускание любой кнопки мыши. Внутри обработчика event.button указывает, какая кнопка отпущена: 1 = левая, 2 = правая, 4 = средняя.
OnMouseMove
Перемещение указателя мыши. Внутри обработчика event.x и event.y – текущие координаты "горячей" точки курсора на экране.
OnClick
Щелчок левой кнопкой мыши на элементе или нажатие <Enter> при каком-то элементе в фокусе.
OnDblClick
Двойной щелчок левой кнопкой мыши на элементе.
OnDragStart
Запуск операции перетаскивания. Цель – запретить операцию перетаскивания путем возвращения значения false.
OnSelectStart
Запуск операции выделения элемента. Цель – запретить выделение области документа. Важно учесть, что отменяется лишь инициализация выделения, т.е. если выделение начато за пределами данной области, а на ней лишь продолжается, то помешать выделению нельзя. Событие OnSelectStart всплывающее, поэтому можно перехватить его и вернуть значение false. Это лишит посетителя возможности выделять текст на странице (см. Пример 10).
OnSelect
Выделение элемента. Следует за OnSelectStart и возникает много раз по мере того, как посетитель расширяет или сужает выделение. Событие OnSelect не всплывает. Оно возникает лишь в том разделе документа, где происходит выделение.

События клавиатуры

OnKeyPress
Нажатие и отпускание клавиши. Событие возникает много раз, если клавиша удерживается.
OnKeyDown
Нажатие клавиши. Событие возникает один раз, даже если клавиша продолжает удерживаться.
OnKeyUp
Отпускание клавиши.

Событие прокручивания

OnScroll
Использование полосы прокрутки или прокручивание элемента неявно посредством другого действия Не может отменить прокручивания, так как возникает после завершения прокручивания. Не всплывает.

События фокуса

OnFocus
Возникает, когда элемент активизируется после щелчка по нему мышью или с помощью клавиатуры. Фокус могут получить только элементы пользовательского ввода и тело документа, а не элементы содержания документа.
OnBlur
Возникает, когда элемент теряет фокус. Используется для контроля корректности ввода.
Пример 6
<html>
<head>
    <meta charset="utf-8">
    <script>
        function verify()
        {
            //Ввод строки
            var str=document.inp.m.value;
            //Преобразование строки в число
            var int=parseInt(str);
            //Проверка
            if ( int == 1 || int == 2 || int == 12 )
                {alert("Зима");}
            else if ( 3 <= int && int <= 5 )
                {alert("Весна");}
            else if ( 6 <= int && int <= 8 )
                {alert("Лето");}
            else if ( 9 <= int && int <= 11 )
                {alert("Осень");}
            else
                {alert("Неверно!");}
        }
    </script>
</head>
<body>
<h2>Контроль ввода</h2>
<form name="inp">
    <label>Введите номер текущего месяца:
        <input name="m" size="2" OnBlur="verify()">
    </label>
</form>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

События формы

OnChange
Возникает при любых изменениях в форме. Для текстового поля это ввод или удаление. Для списка – выбор нового элемента. Так же, как и OnBlur используется для контроля корректности ввода.
OnSubmit
Возникает перед отправкой содержимого формы на сервер. Основное назначение – проверка корректности введенных данных. Отмена передачи данных происходит при возвращении значения false. При выполнении примеров 6 и 7 обратите внимание на различия в окне "Адрес" при наборе неверного значения.
Пример 7
<html>
<head>
    <meta charset="utf-8">
    <script>
        function verify()
        {
            //Ввод строки
            var str=document.inp.m.value;
            //Преобразование строки в число
            var int=parseInt(str);
            //Проверка
            if ( int == 1 || int == 2 || int == 12 )
                {alert("Зима");
                return true;}
            else if ( 3 <= int && int <= 5 )
                {alert("Весна");
                return true;}
            else if ( 6 <= int && int <= 8 )
                {alert("Лето");
                return true;}
            else if ( 9 <= int && int <= 11 )
                {alert("Осень");
                return true;}
            else
                {alert("Неверно!");
                return false;}
        }
    </script>
</head>
<body>
<h2>Контроль ввода</h2>
<form name="inp" OnSubmit="return verify()">
    <label>Введите номер текущего месяца:
        <input name="m" size="2">
    </label>
</form>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ


OnReset
Возникает после щелчка на кнопке Reset. Назначение – вывод предупреждения о сбросе.

События документа

OnLoad
Возникает после считывания, но до отображения страницы. Используется для отображения заставки, проверки права доступа и других однократных действий при инициализации страницы. Как надо, не работает (см. пример 8).
Пример 8
<body OnLoad="alert('Начнем?')">
<h2>Начали</h2>
</body>

ПОСМОТРИ РЕЗУЛЬТАТ

OnUnload
Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений.
OnAbort
Возникает при срыве загрузки графического объекта.
OnError
Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.
Пример 9
<h2>Перехват ошибок</h2>
<img src="m.gif" OnError="alert('Что-то не так!');">

ПОСМОТРИ РЕЗУЛЬТАТ

Событие помощи

OnHelp
Запрос файла справки с использованием клавиши <F1>. Не возникает при выборе пункта Help из меню Help. OnHelp возникает на элементе с фокусом и затем всплывает вверх по иерархии контейнеров. Действие по умолчанию для этого события заключается в отображении встроенного файла справки, но данное событие может быть отменено для отображения индивидуального файла справки.

Объект event

Для получения информации о событии служит объект event.

Свойства объекта event

srcElement
Элемент, который первым сгенерировал событие. Имя тега этого элемента можно определить с помощью свойства tagName (см. пример 12).
cancelBubble
Используется для прекращения всплывания события вверх по иерархии контейнеров. По умолчанию равно false и событие всплывает. Установка значения true останавливает всплывание текущего события.
returnValue
Используется для отмены действия по умолчанию. Для этого нужно установить значение false. Ключевое слово return в JavaScript обновляет значение event.returnValue при возвращении управления броузеру.
Пример 10
<body OnSelectStart="event.returnValue=false;">
<h2>Запрет выделения</h2>
</body>

ПОСМОТРИ РЕЗУЛЬТАТ

type
Определение события. Имя события возвращается в нижнем регистре без префикса on.
Пример 11
<html>
<head>
    <meta charset="utf-8">
    <script>
        function S()
        {
            if (event.type=="mousedown")
            {B.style.fontStyle="italic";
                B.style.color="red";}
            if (event.type=="mouseup")
            {B.style.fontStyle=""; B.style.color="blue";}
        }
    </script>
</head>
<body>
<h2>Изменение вида данного элемента</h2>
<b><p id="B" OnMouseDown="S()" OnMouseUp="S()">
        Для изменения цвета и шрифта данного текста нажимайте и
        отпускайте кнопку мыши<br></b>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

button
Состояния кнопок мыши во время события.
Возможные значения:
  • 0 – кнопки не нажаты,
  • 1 – нажатие левой кнопки,
  • 2 – нажатие правой кнопки,
  • 3 – нажатие левой и правой кнопок,
  • 4 – нажатие средней кнопки.
clientX, clientY
Координаты указателя мыши относительно клиентской области окна.
offsetX, offsetY
Координаты указателя мыши относительно контекста воспроизведения.
screenX, screenY
Координаты указателя мыши относительно экрана.
Пример 12
<html>
<head>
    <meta charset="utf-8">
    <script for="document" event="onmousedown()">
        alert("x:"+event.clientX+"\n"+
            "y:"+event.clientY+"\n"+
            "тег:"+event.srcElement.tagName);
    </script>
</head>
<body>
<h2>Определение координат указателя мыши</h2>
<p>Щелкните любой кнопкой мыши на любом месте экрана</p>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

altKey
Состояние клавиши <Alt>(true/false).
ctrlKey
Состояние клавиши <Ctrl>(true/false).
shiftKey
Состояние клавиши <Shift> (true/false).
keyCode
ASCII-код нажатой клавиши.

Динамическое содержание

Содержание HTML-документа можно менять после загрузки страницы.

Свойства динамического содержания

innerText
Содержащийся внутри элемента текст без тегов. При установке нового значения все HTML-теги выводятся как текст.
innerHTML
Содержащийся внутри элемента текст вместе с внутренними тегами. При установке нового значения все HTML-теги интерпретируются броузером.
outerText
Содержащийся внутри элемента текст без тегов. При установке нового значения меняется весь элемент, включая внешние теги. Нестандартное свойство! Не стоит использовать, т.к. не поддерживается браузером Firefox.
outerHTML
Весь элемент, включая внешние теги. При установке нового значения все HTML-теги интерпретируются броузером.
Пример 13
<h2>Различия свойств innerText, innerHTML, outerText, outerHTML</h2>
<p>Для изменения текстов щелкните по ним мышкой</p>
<h2 onmousedown="this.innerText='Так работает <em>innerText</em>'">Текст1</h2>
<h2 onmousedown="this.innerHTML='Так работает <em>innerHTML</em>'">Текст2</h2>
<h2 onmousedown="this.outerText='Так работает <em>outerText</em>'">Текст3</h2>
<h2 onmousedown="this.outerHTML='<p>Так работает <em>outerHTML</em>'">Текст4</h2>

ПОСМОТРИ РЕЗУЛЬТАТ

Данные свойства динамического содержания могут обращаться к элементу или его содержанию только как к целому. Если, например, требуется изменить лишь один символ в параграфе, то придется заново переписать весь параграф. Однако, можно напрямую манипулировать любой частью HTML-документа. Такую возможность предоставляет объект TextRange, который будет рассмотрен чуть позже.

Методы Adjacent

Кроме перечисленных четырех свойств динамического содержания имеются еще два метода для вставки содержания:

insertAdjacentText
Вставка текста.
insertAdjacentHTML
Вставка HTML.

Оба метода Adjacent имеют по два аргумента: место вставки и содержание. Место вставки определяется ключами:

  • beforeBegin – До открывающего внешнего тега элемента
  • afterBegin – После открывающего тега до содержимого элемента
  • beforeEnd – До закрывающего тега после содержимого элемента
  • afterEnd – После закрывающего тега элемента
Пример 14
<h2>Различия ключей beforeBegin, afterBegin, beforeEnd, afterEnd</h2>
<p>Для вставки в тексты щелкните по ним мышкой</p>
<h2 onmousedown="insertAdjacentHTML('beforeBegin','Вставка(<i>beforeBegin</i>)')">Tекст1</h2>
<h2 onmousedown="insertAdjacentHTML('afterBegin','Вставка (<i>afterBegin</i>)') ">Текст2</h2>
<h2 onmousedown="insertAdjacentHTML('beforeEnd','Вставка(<i>beforeEnd</i>)') ">Текст3</h2>
<h2 onmousedown="insertAdjacentHTML('afterEnd','Вставка(<i>afterEnd</i>)')">Текст4</h2>

ПОСМОТРИ РЕЗУЛЬТАТ

Методы Adjacent удобно использовать для вставки новых параграфов или элементов списков.


Данный объект доступен только в IE

Объект TextRange

Используя объект TextRange можно редактировать любой текст, а также менять текст, выделенный посетителем на экране.

Объект TextRange создается путем вызова метода createTextRange элемента, который является, так называемым, владельцем редактирования текста. Это может быть body, input, button и textarea, причем понятно, что body - владелец редактирования текста для всех воспроизводимых элементов, а input, button и textarea - владельцы редактирования текста для своего содержания.

Свойства доступа к тексту

text
Текст документа без HTML-разметки. Это свойство доступно для чтения/записи. По представлению содержания сходно с outerText.
htmlText
Текст документа вместе с HTML-разметкой. По представлению содержания это свойство сходно с outerHTML, но доступно только для чтения.

Метод вставки HTML

pasteHTML
При вызове этого метода для определенного элемента вставляемый фрагмент будет находиться внутри области действия данного элемента и должен быть HTML-кодом внутри данной области действия. По представлению содержания сходно с outerHTML.

Методы позиционирования объекта TextRange

collapse([prm1])
Сворачивает объект TextRange к началу (prm1=true) или к концу элемента (prm1=false). Значение по умолчанию prm1=true.
expand(prm1)
Расширяет объект TextRange для полного охвата определенного параметром фрагмента текста.
Параметр prm1 может принимать значения:
  • character – символ,
  • word – слово,
  • sentence – предложение.
moveToElementText(prm1)
Размещает объект TextRange для охвата текста элемента, указанного параметром prm1.
move(prm1, prm2)
Перемещает начало объекта TextRange на расстояние, указанное параметрами, и сжимает объект до точки. Параметр prm1 для этого и двух следующих методов может принимать те же значения, что и для метода expand. Параметр prm2 может принимать как положительные, так и отрицательные значения; указывает расстояние перемещения.
moveStart(prm1, prm2)
Перемещает начало объекта TextRange на расстояние, указанное параметрами.
moveEnd(prm1, prm2)
Перемещает конец объекта TextRange на расстояние, указанное параметрами.

Методы move, moveStart и moveEnd возвращают число, равное расстоянию перемещения. Если будет задано перемещение на 100 слов в документе, содержащим 50 слов, то объект TextRange будет помещен в последнее слово, а метод возвратит расстояние перемещения. Для проверки успешности проведения перемещения возвращаемое значение сравнивается с заданным расстоянием перемещения.

Пример 15
<html>
<head>
    <meta charset="utf-8">
    <script>
        function ToAndFro(c)
        {
            var tr=document.body.createTextRange(); // Создание объекта TextRange
            var o = eval(c);
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveStart("word",1); // Сдвиг начала на 1 вперед
            var St = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveEnd("word",1); // Сдвиг конца на 1 вперед
            var En = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveStart("word",-1); // Сдвиг начала на 1 назад
            var St1 = tr.text; // Сохранение содержимого
            tr.moveToElementText(o); // Содержимое элемента "o"
            tr.moveEnd("word",-1); // Сдвиг конца на 1 назад
            var En1 = tr.text; // Сохранение содержимого
// Вывод результатов
            alert('tr.moveStart("word",1) = '+St+
                '\ntr.moveEnd("word",1) = '+En+
                '\ntr.moveStart("word",-1) = '+St1+
                '\ntr.moveEnd("word",-1) = '+En1);
        }
    </script>
</head>
<body>
<h2>Перемещения начала и конца объекта textarea</h2>
<textarea OnMouseOver="ToAndFro('a')">Наведите сюда указатель мышки</textarea>

ПОСМОТРИ РЕЗУЛЬТАТ


moveToPoint(prm1, prm2)
Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.
Пример 16
<html>
<head>
    <meta charset="utf-8">
    <script language="JavaScript">
        <!--
        function WhatIsWord()
        {
            // Создание объекта TextRange
            var tr=document.body.createTextRange();
            // Свертка в точку, куда указывает мышка
            tr.moveToPoint(event.clientX,
                event.clientY);
            // Расширение до слова, над которым указатель мышки
            tr.expand("word");
            // Отображение содержимого
            window.status = tr.text;
        }
        //-->
    </script>
</head>
<body lang=RU onmousemove="WhatIsWord();">
<h2>Отображение в строке состояния слова, над которым находится
    указатель мыши</h2>
</body>
</html>

ПОСМОТРИ РЕЗУЛЬТАТ

findText(prm1, prm2, prm3)
Поиск в документе подстроки, указанной в параметре prm1. Параметр prm2 определяет число символов для поиска (положительное - прямое направление, отрицательное - обратное). Параметр prm3 может принимать значения:
  • 2 – полное совпадение,
  • 4 – учет регистра,
  • 6 – полное совпадение с учетом регистра.

Методы управления объектом TextRange

duplicate
Создает копию объекта TextRange, из которого он был вызван ( var tr1=document.body.createTextRange();  var tr2=tr1.duplicate(); ).
inRange
Определяет нахождение указанной области внутри объекта TextRange, из которого был вызван данный метод (alert(tr2.inRange(tr1)); // true).
isEqual
Сравнивает два объекта TextRange для определения, охватывают ли они один и тот же текст ( alert(tr1.isEqual(tr2)); // true ). Метод необходим, так как прямое сравнение для разных объектов, представляющих одну и ту же текстовую область работать не будет ( alert(tr1==tr2); // false).
compareEndPoints(prm1, prm2)
Сравнивает два объекта TextRange для определения, совпадают ли их начальные и конечные позиции. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод сравнивает. Возможные значения prm1:
  • StartToStart – начало первого с началом второго,
  • StartToEnd – начало первого с концом второго,
  • EndToStart – конец первого с началом второго,
  • EndToEnd – конец первого с концом второго.
setEndPoints(prm1, prm2)
Устанавливает начальную и конечную позиции одного объекта TextRange в начальную и конечную позиции другого объекта TextRange. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод устанавливает. Возможные значения prm1:
  • StartToStart – начало первого в начало второго,
  • StartToEnd – начало первого в конец второго,
  • EndToStart – конец первого в начало второг,о
  • EndToEnd – конец первого в конец второго.

Например, чтобы определить, будет ли продолжен объект trSecond после окончания объекта trOne, надо написать такую функцию:
function continue(trOne, trSecond)
{ return trOne.compareEndPoints("EndToStart", trSecond); }.

Читать дальше: Звук и музыка на web-странице


.