События

onblur() Окно потеряло фокус ввода.

onfocus() Окно получило фокус ввода (стало активным).

onhelp() Пользователь нажал кнопку F1

onresize() Изменился размер окна

onscroll() Пользователь прокрутил окно

onerror() Возникла ошибка при передаче

onbeforeunload() Окно будет выгружено (закрыто)

onunload() Окно закрывается

onload() Окно полностью загружено.

Применение setTimeout и clearTimeout

timeoutID=setTimeout(expression, msec)

timeoutID идентификатор, который используется только для окончания выполнения, используя метод clearTimeout.

expression строковое выражение или свойство существующего объекта.
msec числовое значение, числовой ряд или свойство существующего объекта в миллисекундах.

Метод setTimeout выполняет выражение после установленного количества времени. Он не выполняет выражение многократно. Например, если метод setTimeout установлен на 5 секунд, то выражение выполнится через 5 секунд, но не каждые 5 секунд.

clearTimeout(timeoutID)

timeoutID задержка, установка которой была возвращена предыдущим вызовом метода setTimeout.

События:

• onLoad
• onUnload

Объект navigator

Этот объект содержит информацию о параметрах браузера, таких как: производитель, версия, поддержка cookie и других.

Вот таким скриптом можно быстро определить параметры собственного браузера:

<script type="text/javascript" language="javascript">

alert(

'Кодовое имя: ' +

window.navigator.appCodeName + '\n' +

'Название браузера: ' +

window.navigator.appName + '\n' +

'Версия: ' +

window.navigator.appVersion + '\n' +

'Поддержка cookie: ' +

window.navigator.cookieEnabled + '\n' +

'Строка агента: ' +

window.navigator.userAgent

);

</script>

Объект navigator в основном используется при написании кроссбраузерных скриптов, т.к. позволяет определить какие блоки кода в каком браузере исполнять. К сожалению, использование объекта navigator не даёт стопроцентрой гарантии при определении типа браузера. Cвязано это с тем, что любой браузер (кроме, наверное, IE) позволяет легко изменить строки User-Agent на что угодно, в том числе на подпись браузера другого типа.

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

Объект Screen

Объект screen предназначен для определения характеристик экрана.

объект с таким именем объявлен глобально. Для обращения к этому объекту используется следующий синтаксис

var a=screen.prepertyName;

var xw=screen.width;

Свойства:

height Разрешение экрана по вертикал в точках.

width Разрешение экрана по горизонтали в точках.

availHeight Содержит высоту экрана в точках, доступную для использования. Т.е. height за вычетом пространства занятого постоянными элементами пользовательского интерфейса, такими как панель задач и т.д.

availWidth Содержит ширину экрана в точках, доступную для использования. Т.е. width за вычетом пространства занятого постоянными элементами пользовательского интерфейса, такими как панель задач и т.д.

colorDepth Определяет глубину цвета, текущего режима экрана. Для Internet Explorer это глубина одновременно отображаемых цветов, а в Netscape содержит общее количество цветов, глубину палитры. Количество одновременно отображаемых цветов для Netscape содержится в свойстве pixelDepth.

pixelDepth Определяет глубину цвета, текущего режима экрана. Количество одновременно отображаемых цветов для Netscape. В Internet Explorer отсутствует. Для безпалитровых режимов эти два свойства одинаковые.

Фреймы

Объект frame (массив frames)

Окно, которое может показывать на одном экране несколько независимо прокручиваемых фреймов, каждый из которых имеет свой собственный URL. Фреймы могут указывать на различные URL'и и быть ссылкой других URL'ей, все внутри одного экрана. Этот объект является оконным объектом, и поэтому к нему применимы большинство свойств окна. Он является объектом window, для скриптов, расположенных в документе который загружен в фрейм.

Синтаксис:

Для определения объекта frame используется стандартный HTML синтаксис.

Использование свойств объекта frame:

[windowReference.]frameName.propertyName

[windowReference.]frames[index].propertyName

window.propertyName

self.propertyName

parent.propertyName

windowReference переменная windowVar из определения окна или один из синонимов top или parent.

frameName значение атрибута NAME в теге <FRAME> объекта frame.

index целое число, представляющее объект frame.

propertyName одно из свойств, описанных ниже.

Свойство:

• Объект frame является свойством nbgf window.
• Массив frames является свойством frame и window

Массив frames

Вы можете ссылаться на объекты frame в вашей программе, используя массив frames. Этот массив содержит запись для каждого фрейма-потомка (тега <FRAME>) в окне, содержащем тег <FRAMESET> по порядку встречаемости. Например, если окно содержит три фрейма-потомка, эти фреймы отображаются как parent.frames[0], parent.frames[1], parent.frames[2].
Использование массива frames:

[frameReference.]frames[index]

[frameReference.]frames.length

[windowReference.]frames[index]

[windowReference.]frames.length

frameReference действительный путь ссылки на фрейм, описанный в объекте frame.

windowReference переменная windowVar из определения окна или один из синонимов top или parent.

index целое число, представляющее количество фреймов в родительском окне.

Для получения количества фреймов-потомков в окне или фрейме используется свойство length:

[windowReference.]frames.length

[frameReference.]frames.length

Элементы в массиве frames открыты только для чтения.

Свойства:

Объект frame имеет следующие свойства:

frames массив, отражающий все фреймы окна

name отражает атрибут NAME тега <FRAME>

length отражает количество фреймов-потомков внутри фрейма

parent синоним для окна или фрейма, содержащего текущий фрейм

self синоним для текущего фрейма

window синоним для текущего фрейма

Массив frames имеет следующие свойства:

length отражает количество фреймов-потомков внутри фрейма

Методы:

¨ clearTimeout

¨ setTimeout

События:

• События onLoad и onUnload определяются в теге <FRAMESET>, но являются событиями для объекта window.

Лекция 8.

Примеры использования JavaScript

План

1. Строка состояния

2. Таймеры

3. Загрузка изображений

4. Анимация

5. Проверка данных в форме

Строка состояния и таймеры

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

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

<a href="dontclck.htm"

onMouseOver="window.status='Don\'t click me!'; return true;"

onMouseOut="window.status='';">link</a>

Здесь мы пользуемся процедурами onMouseOver и onMouseOut, чтобы отслеживать моменты, когда указатель мыши проходит над данной ссылкой.
Вы можете спросить, а почему в onMouseOver мы обязаны возвращать результат true. На самом деле это означает, что браузер не должен вслед за этим выполнять свой собственный код обработки события MouseOver. Как правило, в строке состояния браузер показывает URL соответствующей ссылки. Если же мы не возвратим значение true, то сразу же после того, как наш код был выполнен, браузер перепишет строку состояния на свой лад - то есть наш текст будет тут же затерт и читатель не сможет его увидеть. В общем случае, мы всегда можем отменить дальнейшую обработку события браузером, возвращая true в своей собственной процедуре обработки события.

В этом скрипте Вы можете видеть еще одну вещь - в некоторых случаях Вам понадобится печатать символы кавычек. Например, мы хотим напечатать текст Don't click me - однако поскольку мы передаем эту строку в процедуру обработки события onMouseOver, то мы используем для этого одинарные кавычки. Между тем, как слово Don't тоже содержит символ одинарной кавычки! И в результате если Вы просто впишете 'Don't ...', браузер запутается в этих символах '. Чтобы разрешить эту проблему, Вам достаточно лишь поставить обратный слэш \ перед символом кавычки - это означает, что данный символ предназначен именно для печати. (То же самое Вы можете делать и с двойными кавычками ).

Таймеры

С помощью функции Timeout (или таймера) Вы можете запрограммировать компьютер на выполнение некоторых команд по истечении некоторого времени. В следующем скрипте демострируется кнопка, которая открывает выпадающее окно не сразу, а по истечении 3 секунд.

Скрипт выглядит следующим образом:

<script language="JavaScript">

<!-- hide

function timer() {

setTimeout("alert('Врем\я истекло!')", 3000);

}

// -->

</script>

...

<form>

<input type="button" value="Timer" onClick="timer()">

</form>

Здесь setTimeout() - это метод объекта window. Он устанавливает интервал времени - я полагаю, Вы догадываетесь, как это происходит. Первый аргумент при вызове - это код JavaScript, который следует выполнить по истечении указанного времени. В нашем случае это вызов - "alert('Врем\я истекло!')". Обратите пожалуйста внимание, что код на JavaScript должен быть заключен в кавычки.

Во втором аргументе компьютеру сообщается, когда этот код следует выполнять. При этом время Вы должны указывать в миллисекундах (3000 миллисекунд = 3 секунда).