Объектная модель документа. Интерфейсы 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 получил следующие свойства (их мы рассмотрим в следующих примерах):


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






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