- •7.1.1.Основные понятия.
- •7.1.2.Модели взаимодействия клиент-сервер.
- •7.1.3.Мониторы транзакций.
- •Каскадирование
- •Специфичность
- •Клиентские языки
- •Серверные языки
- •Хронология Шаблоны программирования
- •Примечания
- •Способы добавления стилей на страницу
- •Связанные стили
- •Глобальные стили
- •Внутренние стили
- •Импорт css
- •Представление документа в виде древовидной структуры
- •Навигация по документу
- •Навигационные атрибуты объекта Node
- •Динамическая генерация веб-страниц средствами dhtml на основе dom
- •Методы объекта Document, позволяющие создавать объекты
- •Методы объекта Node, добавляющие и удаляющие элементы документа
- •Методы объекта Element
- •Модель событий dom
- •Свойства объекта event
- •Свойства объекта mouse
- •Встраивание кода JavaScript в документ html
Модель событий dom
Особенностью программ, создаваемых для среды веб является то, что они управляются событиями. Чтобы узнать, какое событие произошло, в DOM имеется объект события event(табл. 15). Объект event является локальным и его следует явным образом передавать в обработчик события.
Таблица 15
Свойства объекта event
СвойствоОписание
bubbles
Указывает возможность «всплывания» события (передачи управления вверх по иерархической структуре)
cancelable
Указывает возможность отмены действия события, заданного по умолчанию
currentTarget
Указывает событие, обрабатываемое в данный момент
eventPhase
Указывает фазу возбуждения события
target (только NN 6)
Указывает элемент, вызвавший событие
timestamp (только NN 6)
Указывает время возникновения события
type
Указывает имя события
События, связанные с мышью, генерируют объект mouse (табл. 16).
Приведем пример динамически изменяемого текста.
<html> <head> <script language = "JavaScript"> function onMouseover() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Указатель мыши на тексте"; temp.style.color = "red"; } function onMouseout() { var temp = document.getElementById("DynamicText"); temp.firstChild.nodeValue = "Динамический текст"; temp.style.color = "black"; } </script> <title>Динамический текст</title> </head> <body> <p id = "DynamicText" onmouseover = "return onMouseover()" onmouseout = "return onMouseout()">Динамический текст</p> </body> <html>
Таблица 16
Свойства объекта mouse
СвойствоОписание
altKey
Указывает, была ли нажата клавиша <Alt> в момент возникновения события
button
Указывает, какая клавиша мыши была нажата
clientX
Сообщает горизонтальную координату указателя мыши в окне браузера на момент возникновения события
clientY
Сообщает вертикальную координату указателя мыши в окне браузера на момент возникновения события
ctrKey
Указывает, была ли нажата клавиша <Ctrl> в момент возникновения события
metaKey
Указывает, была ли нажата метаклавиша в момент возникновения события
relatedTarget (только NN 6)
Указывает цель события
screenX
Сообщает горизонтальную координату указателя мыши в окне браузера, вычисленную от начала экранных координат, на момент возникновения события
screenY
Сообщает вертикальную координату указателя мыши в окне браузера, вычисленную от начала экранных координат, на момент возникновения события
shiftKey
Указывает, была ли нажата клавиша <Shift> в момент возникновения события
Пример, определяющий координаты нахождения курсора мыши.
<html> <head> <title>Определение координат курсора</title> <script language = "JavaScript"> function onClick(e) { alert("X = " + e.clientX + "; " + "Y = " + e.clientY); } </script> </head> <body onclick = "onClick(event)"> <p>Щелкните мышью на экране<p> </body> </html>
Встраивание кода JavaScript в документ html
Код JavaScript может быть встроен в документ HTML следующими основными способами.
Включение фрагментов сценария внутри элемента script: <script type="text/JavaScript"> ... операторы ... </script> На практике наряду с атрибутом type часто используют и атрибут language="JavaScript" , несмотря на то, в спецификации HTML он объявлен нежелательным. Наличие атрибутаlanguage гарантирует выполнение сценария любым браузером, поддерживающим JavaScript. Атрибут language позволяет также задать версию языка, возможности которой задействованы в сценарии, и тем самым ограничить выполенение сценария лишь браузерами, поддерживающими указанную версию. Например, при задании language="JavaScript1.5" сценарий будет выполняться лишь в браузерах, в которых реализована поддержка JavaScript1.5. Элементы script могут содержаться как в разделе head, так и в body. При интерпретации документа они выполняются последовательно. В head, как правило, объявляются и инициализируются глобальные переменные и размещаются описания функций. В body фрагменты сценария обычно реализуют вставку динамически формируемого содержимого, например, вывод случайного изображения или даты последнего изменения документа.
Включение файлов со сценариями JavaScript: <script type="text/JavaScript" src="myFunc.js"></script> Вкключение файлов актуально, если одни и те же функции, объекты, глобальные переменные используются не в одном, а в ряде документов сайта. В таком случае эти файлы (обычно имеющих расширение .js) размещают в разделе head соответствующих документов. Это упрощает поддержку сценариев и позволяет ускорить загрузку за счет кэширования браузером файла с кодом JavaScript.
Определение обработчика события. Обработчики событий, связанных с элементами документа HTML, указываются как атрибуты этих элементов. Список этих атрибутов приведен в разделе "События JavaScript". Значение этих атрибутов может представлять собой любое количество операторов JavaScript, однако обычно обработчики определяются как функции, описанные в элементе script. Ниже приведены два условных примера. <span onClick="this.style.color='red'"> Click me! </span> - в ответ на щелчок мыши текст "Click me!" станет красным.
<img src="jazz.jpg" id="jazz"
onMouseOver="changeImg('rock.jpg')"
onMouseOver="changeImg('jazz.jpg')">- при наведении / уводе курсора мыши изображение меняется; это реализовано с помощью некоей функции changeImg().
URL типа JavaScript. В гиперсылке можно указать значение атрибута href как псеводпротокол javascript: , после которого идет список инструкций. В этом случае при выборе гиперссылки браузер исполняет код JavaScript. Например выбор гиперссылки
<a href="javascript: window.open('next.htm','newWin','width=300,height=200'); void(0)">
откроем новое окно
</a>приведет к открытию нового окна 300х200px и загрузке в него документа next.htm. При использовании URL типа JavaScript следует помнить, что если последняя инструкция возвращает какое-то значение, его строковый эквивалент будет выведен в текущий документ, заменив его содержимое. Попробуйте, например, в приведенном выше коде убрать инструкцию void(0). Новое окно, конечно, откроется, но поскольку метод window.open() возвращает значение объектного типа, в исходном документе появится строка [object] или [object Window] (в зависимости от браузера). Чтобы избежать этого, применяют инструкцию void(0), указывающую на неопределенное возвращаемое значение. Определенным недостатком URL типа JavaScript является отображение в статусной не адреса целевого документа, а последовательности инструкций JavaScript, невразумительной для большинства пользователей.