HTML: Популярный самоучитель
Шрифт:
Объект window
Глобальный объект window предоставляет возможности по манипулированию окном браузера или окном фрейма, в котором открыт документ со сценарием. Кроме того, при помощи объекта window можно открывать новые окна, манипулировать фреймами, создавать таймеры (что очень нужно для анимации) и делать еще много полезного.
Основные свойства объекта window приводятся в табл. 13.6.
В табл. 13.7 приведены основные методы объекта window.
Как
Каждый из приведенных в таблице параметров может добавляться в строку параметры в виде: имя_параметра = значение. Так, для открытия документа в новом окне размером 300 x 400 можно использовать следующий вызов метода open:
window.open(«13.6.html», "", «width = 300, height = 400»);
Вообще, по крайней мере в браузере Internet Explorer, разделителем параметров в строке необязательно может быть запятая. Этот браузер нормально воспринимает в качестве разделителя и пробел, и точку с запятой. Еще при испытаниях метода open в Internet Explorer замечена следующая особенность: если в строке задан хотя бы один параметр, то значения всех остальных параметров, принимающих значения 0 или 1, сбрасываются в 0. Так, созданное приведенным выше вызовом метода open окно будет отображаться без строки состояния, панели инструментов, строки меню, полос прокрутки, строки адреса и будет неизменяемого размера.
Как можно было заметить, в табл. 13.8 приведены параметры, позволяющие задать ширину нового окна, но не приведены параметры, задающие положение окна. Эти параметры в действительности есть, но они отличаются для различных браузеров. Для Internet Explorer это left и top, а для Navigator – screenX и screenY.
Теперь рассмотрим, как можно использовать объект window для воспроизведения анимации в окне браузера.
Методы, позволяющие создавать таймеры, просто незаменимы при работе с анимацией средствами браузера. Суть данного примера состоит в последовательной загрузке изображений в элемент IMG. Интервал между сменами кадров выдерживается с помощью таймера. Всего кадров шесть (рис. 13.3).
Рис. 13.3. Изображения-кадры
Кадры меняются от первого до шестого, а затем от шестого до первого. Текст HTML-документа со сценарием, реализующим смену кадров, приведен ниже (пример 13.9).
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Страница с анимацией</TITLE>
</HEAD>
<BODY>
<SCRIPT type = "text/javascript">
//Назначаем функцию, вызываемую по таймеру и меняющую
//изображения window.setInterval(new_frame, 300);
var inc = 1;
var curFrame = 1;
var maxFrame = 6;
//Функия смены кадров function new_frame{
//Покажем текущий кадр animate.src = "frames/" + curFrame + ".gif";
//Переход на следующий кадр curFrame += inc;
if (curFrame > maxFrame){
//Начинаем воспроизведение в обратном порядке curFrame = maxFrame;
inc = –1;
}
else if (curFrame == 0){
//Начинаем воспроизведение в прямом порядке curFrame = 1;
inc = 1;
}
}
</SCRIPT>
<IMG id = "animate" src = "frames/1.gif">
</BODY>
</HTML>
В коде сценария количество кадров задается в переменной maxFrames. Предполагается, что кадры помещаются в папке frames
и имеют имена вида номер.gif.Иногда бывает удобно использовать дополнительные так называемые всплывающие окна, например, чтобы открывать в них список файлов для закачки, если речь идет о каком-то веб-архиве. Как вы уже догадались, в этом примере для открытия новых окон используется метод open объекта window. Кроме открытия нового окна, в приведенном ниже примере 13.10 реализовано также его закрытие через 5 секунд.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Frameset//EN»
"http://www.w3.org/TR/html4/frameset.dtd">
<HTML>
<HEAD>
<TITLE>Всплывающие окна</TITLE>
</HEAD>
<BODY>
<SCRIPT type = "text/javascript">
//Функция открывает окно\
function open_window{
wnd = window.open("13.9.html", "asd", "height = 200, width = 350");
//Функция закрытия окна вызывается через 5 секунд window.setTimeout(wnd.close, 5000);
}
</SCRIPT>
Щелкните
<INPUT type = "button" value = "кнопку" onClick = "open_window">
чтобы открыть новое окно на 5 секунд.
</BODY>
</HTML>
Помните, что использовать всплывающие окна следует оправданно. Чаще всего пользователя очень раздражают появляющиеся неожиданно окна, например с какой-нибудь рекламой.
Объект style
Объект style, который для большинства элементов страницы поддерживается как свойство, предоставляет большие возможности по манипулированию стилем элементов. Эти возможности такие же, как и доступные при использовании таблиц стилей: можно получать и указывать значения тех же свойств, что и с использованием CSS. Сначала рассмотрим, как формируются имена свойств объекта style.
Итак, имена свойств CSS, состоящие из одного слова, в таком же виде и используются как имена свойств объекта style, например:
el.style.width = 100;
el.style.color = "red";
Здесь el предоставляет доступ к элементу страницы со значением атрибута id, равным «el».
В приложении 2, где приведен список основных свойств CSS, можно увидеть, что названия многих свойств состоят из нескольких слов, разделенных символом –. Так вот, имена таких свойств CSS преобразуются в имена свойств объекта style следующим образом: первое слово имени записывается cо строчной буквы, остальные слова начинаются с прописной буквы, все символы – из имени свойства удаляются. Ниже приведен пример для того же элемента el:
el.style.borderStyle = «solid»; //свойство border-style
el.style.borderColor = "blue"; //свойство border-color
el.style.borderBottomWidth = "10mm"; //свойство border-bottom-width
Как видно, значения свойств могут быть в тех же единицах измерения, которые применяются для CSS. Однако это хорошо до тех пор, пока не нужно производить вычисления с использованием текущих параметров элемента. Так, в приведенном выше примере el.style.borderBottomWidth вернет строковое значение «10mm». Удобно ли производить вычисления с такими значениями? В табл. 13.9 приведен перечень дополнительных свойств, поддерживаемых только интерпретатором браузера Internet Explorer, но значительно облегчающих программирование таких вещей, как перемещение элементов страницы.
Примечание
При использовании описанных в этом разделе свойств объекта style следует учитывать одну неприятную особенность: до того, как сценарий может получить значение свойства, это значение должно быть установлено также с использованием сценария.
Теперь рассмотрим три примера, иллюстрирующих возможности элемента style. Первые два из них связаны с анимацией, а в последнем примере приводится реализация усовершенствованного меню на основе таблицы.