Объектная модель документа. Интерфейсы DOM2HTML

DOM Level 2

Состоит из следующих основных частей:

• DOM2-Core описывает XML, включая основные понятия: Node, Document и пр.
  Этот стандарт бывает полезен изредка. Он поддерживается очень хорошо всеми браузерами.
• DOM2-HTML расширяет Core для HTML/XHTML.
  При этом Document дополняется методами и свойствами до HTMLDocument, Node - до HTMLElement.
  Пожалуй, самый полезный стандарт, отлично освоенный браузерами.
• Стандарт DOM2-Events описывает события W3C.
  Как известно, здесь много кросс-браузерных несовместимостей.
• Стандарт DOM2-Style описывает работу с CSS: с файлами стилей Stylesheets и CSS-правилами.
  Поддерживается неплохо, однако некоторые несовместимости в браузерах все же есть.
• Стандарт DOM2-Traversal-Range описывает DOM 2 Traversal - итераторы и фильтры для обхода документа, и DOM 2 Range - средства для выделения текста и DOM-узлов.
  Traversal браузеры только начинают осваивать, ну а Range хорошо поддерживается везде, кроме Internet Explorer.

Клиентские сценарии. Связывание сценариев с событиями

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

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

сценарии могут быть связаны с документами 3 способами:

Расположен внутри страницы:

<script type="text/javascript">alert('Hello, World!');</script>

Расположен внутри тега:

<a href="delete.php" onclick="return confirm('Выуверены?');">Удалить</a>

Вынесенвотдельныйфайл:

<script type="text/javascript" src="http://Путь_к_файлу_со_скриптом"></script>

наиболее общим является javascript. синтаксис элемента следующий

<script language=“имясценария” [type=тип] [src=””][defer]>

тело скрипта

</script>

defer – загрузить и потом сделать

бывают

javascript

vbscript

jscript

независимо от языка все события происходят одинаково, пример связывание посредством атрибутов расширенного элемента скрипт. Связывание посредством свойств объектной модели динамического html, есть связывание в стиле vbscript. Формируется имя и обработчик понимает за счёт чего связывается то или иное событие.

<input type=button value=”push”...

Связывание событий с помощью расширенного события элементов скрипт

<script for='document' event='onmousemove()' language=javascript>

Обработччки события передвижения мыши по html документу.

</script>

Все события по сути являются свойствами и с ними можно связывать обработчик.

<input type=button value=”push” id=mybtn>

<script>

document.all.mybtn.ourlick=do;

(тожесамое)=new funcrion('alert('push');');

</script>

Клиентские сценарии. Модель событий. Объект Event

Объект Event

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

Код скрипта:

<layer>

<a href="#" onClick="alert('x: ' + event.x + ' y: ' + event.y); return false;">

<img src="gif/davinci.jpg" height=264 border=0></a>

</layer>

Как видите, в тэг <a> мы поместили программу обработки событий onClick, как это мы уже делали в предшествующих версиях JavaScript. Новое здесь заключается в том, что для создания окошка с сообщением мы используем event.x и event.y. А это как раз и есть объект Event, который здесь нам нужен, чтобы узнать координаты мыши.
К тому же я поместил все команды в тэг <layer>. Благодаря этому мы получаем в сообщении координаты относительно данного слоя, т.е. в нашем случае относительно самого изображения. В противном же случае мы получили бы координаты относительно окна браузера.
(инструкция return false; используется здесь для того, чтобы браузер обрабатывал далее данную ссылку)

Объект Event получил следующие свойства (их мы рассмотрим в следующих примерах):

Свойство	Описание
data	Массив адресов URL оставленных объектов, когда происходит событие DragDrop.
layerX	Горизонтальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет ширину окна браузера.
layerY	Вертикальное положение курсора (в пикселах) относительно слоя. В комбинации с событием Resize это свойство представляет высоту окна браузера.
modifiers	Строка, задающая ключи модификатора - ALT_MASK, CONTROL_MASK, META_MASK или SHIFT_MASK
pageX	Горизонтальное положение курсора (в пикселах) относительно окна браузера.
pageY	Вертикальное положение курсора (в пикселах) относительно окна браузера.
screenX	Горизонтальное положение курсора (в пикселах) относительно экрана.
screenY	Вертикальное положение курсора (в пикселах) относительно экрана.
target	Строка, представляющая объект, которому исходно было послано событие.
type	Строка, указывающая тип события.
which	ASCII-значение нажатой клавиши или номер клавиши мыши.
x	Синоним layerX
y	Синоним layerY

---

Дата добавления: 2018-02-28; просмотров: 484; Мы поможем в написании вашей работы!

Поделиться с друзьями:

---

---

Мы поможем в написании ваших работ!