Объектная модель документа. Интерфейсы 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; просмотров: 484; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!