Регистрация Войти
Войти через VK




Поиск по сайту



PHP Поиск



igrovieavtomationline.net/aztec-gold онлайн играть игровые автоматы aztec gold без смс

DHTML

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

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

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

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

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

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

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

Пример 1

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<H2>Всплывание события</H2>
<b>Для получения информации можно щелкнуть мышкой как на изображении,
    так и на тексте</b><br>
<a href="be.htm"><img src="be.gif" align="left">Кто это?</a>
</body>
</html>

РЕЗУЛЬТАТ:

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

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








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

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

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

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

Пример 2

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<H2>Смена графических объектов, обтекаемых текстом</H2>
<b>Для смены графического объекта переместите на него мышку</b>
<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" border=0 align="left"></a>
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
    Иоганн Себастьян Бах сменит Людвига ван Бетховена.
    Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.
</body>
</html>

РЕЗУЛЬТАТ:

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

Для смены графического объекта переместите на него мышку

Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха. Иоганн Себастьян Бах сменит Людвига ван Бетховена. Людвиг ван Бетховен сменит Иоганна Себастьяна Баха.

Пример 3

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<H2>Изменение вида данного элемента</H2>
<p onmousedown="this.style.fontStyle='italic';
    this.style.color='red'" onmouseup="this.style.fontStyle='';
    this.style.color='blue'">
        Для изменения цвета и стиля шрифта данного текста нажимайте и отпускайте
        кнопку мыши</p>
</body>
</html>

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

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

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

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

Использование тэга SCRIPT является более общим механизмом связывания события со сценарием. При этом можно использовать новые атрибуты такие, как FOR и EVENT:

  • FOR указывает имя или идентификатор (ID) элемента, для которого описывается событие;
  • EVENT указывает событие и все параметры, которые ему могут быть переданы.

Пример 3 теперь примет следующий вид:

Пример 4

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <script for="B" event="onmousedown()">
        <!--
        this.style.fontStyle='italic'; this.style.color='red';
        //-->
    </script>
    <script for="B" event="onmouseup()">
        <!--
        this.style.fontStyle=''; this.style.color='blue';
        //-->
    </script>
</head>
<body lang=RU>
<H2>Изменение вида данного элемента</H2>
<p id="B">Для изменения цвета и
        шрифта данного текста нажимайте и
        отпускайте кнопку мыши</p>
</body>
</html>

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

Пример 5

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<H2>Изменение вида данного элемента</H2>
<p id="B">Для изменения цвета и шрифта данного текста
        нажимайте и отпускайте кнопку мыши<br></p>
<script>
    <!--
    document.getElementById('B').onmousedown=new
        Function("this.style.fontStyle='italic'; this.style.color='red';");
    document.getElementById('B').onmouseup=new
        Function("this.style.fontStyle=''; this.style.color='blue';");
    //-->
</script>
</body>
</html>

Не следует забывать, что все имена свойств надо вводить в нижнем регистре.

События мыши

  • 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 http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <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 http-equiv="Content-Type" content="text/html;charset=windows-1251">
    <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

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body OnLoad="alert('Начнем?')">
<H2>Начали</H2>
</body>
</html>

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

  • OnUnload. Возникает при выгрузке страницы. Используется для освобождения каких-либо ресурсов и вывода дополнительных сообщений.
  • OnAbort. Возникает при срыве загрузки графического объекта.
  • OnError. Возникает лишь при неудачной загрузке графического элемента или всей WEB-страницы. Все остальные ошибки это событие не отлавливает. Если в примере 9 файл m.gif не будет найден, то на экране появится предусмотренное сообщение.

Пример 9

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<H2>Перехват ошибок</H2>
<img src="m.gif" OnError="alert("Что-то не так!");">
</body>
</html>

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

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

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

Объект event

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

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

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

Пример 10

<html>
<head>
    <meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body OnSelectStart="event.returnValue=false;">
<H2>Запрет выделения</H2>
</html>

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

  • type. Определение события. Имя события возвращается в нижнем регистре без префикса on.

Пример 11

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
    <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 lang=RU>
<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 http-equiv="Content-Type" content="text/html;charset=windows-1251">
    <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. Содержащийся внутри элемента текст без тэгов. При установке нового значения меняется весь элемент, включая внешние тэги.
  • outerHTML. Весь элемент, включая внешние тэги. При установке нового значения все HTML-тэги интерпретируются броузером.

Пример 13

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body lang=RU>
<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>
</body>
</html>

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

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

Методы Adjacent

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

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

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

beforeBegin

До открывающего внешнего тэга элемента

afterBegin

После открывающего тэга до содержимого элемента

beforeEnd

До закрывающего тэга после содержимого элемента

afterEnd

После закрывающего тэга элемента

Пример 14

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
</head>
<body>
<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>
</body>
</html>

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

Методы 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 http-equiv="Content-Type" content="text/html;charset=windows-1251">
    <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>Перемещения начала и конца объекта TextRange</H2>
<TextArea id="a" Rows=1 Cols=30 OnMouseOver="ToAndFro('a')">Наведите сюда
    указатель мышки</TextArea>
</body>
</html>

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

  • moveToPoint(prm1, prm2). Определяет элемент, который выведен в точке, координаты которой заданы параметрами prm1, prm2. Работает не совсем корректно. В чем можно убедиться на примере.

Пример 16

<html>
<head>
    <meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
    <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 определяет, что метод сравнивает:

StartToStart

Начало первого с началом второго

StartToEnd

Начало первого с концом второго

EndToStart

Конец первого с началом второго

EndToEnd

Конец первого с концом второго


  • setEndPoints(prm1, prm2). Устанавливает начальную и конечную позиции одного объекта TextRange в начальную и конечную позиции другого объекта TextRange. Метод вызывается из первого объекта. Второй объект определяется параметром prm2. Параметр prm1 определяет, что метод устанавливает:

StartToStart

Начало первого в начало второго

StartToEnd

Начало первого в конец второго

EndToStart

Конец первого в начало второго

EndToEnd

Конец первого в конец второго

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

Читать дальше: Карты изображений
.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 1558