Методы объекта window

У этого объекта есть много полезных методов, но основным можно считать метод open(), с помощью которого создается новое окно браузера (загружается еще одна его копия). Синтаксис этого метода представлен ниже:

переменная = window.open([имя_файла],[имя_ссылки_окна],

[строка_параметров])

В переменной хранится возвращаемая методом ссылка на новое окно, которую можно использовать для доступа к нему из сценария JavaScript.

Первым параметром имя_файла определяется полный или относительный URL-адрес открываемого в окне документа (если задана пустая строка, то открывается пустая станица).

Второй параметр имя_ссылки_окна позволяет задать имя вновь открытого окна, которое можно использовать в документе HTML в атрибуте target гипертекстовой ссылки для указания загрузки в него документа.

Параметр строка_параметров — строка, представляющая список параметров вновь создаваемого окна со значениями. Каждый параметр задается в виде параметр=значение. Все параметры вместе со своими значениями в строке отделены друг от друга запятыми. Допустимые параметры:

height=высота — определяет высоту окна в пикселях;

width=ширина — определяет ширину окна в пикселях;

left=значение — определяет горизонтальную координату верхнего левого окна в пикселях;

top=значение — определяет вертикальную координату верхнего левого окна в пикселях;

resizable={yes|no|1|0} — может ли пользователь изменять размеры окна;

location={yes|no|1|0} — отображается ли адресная строка;

menubar={yes|no|1|0} — отображается ли строка меню;

scrollbars={yes|no|1|0} — отображаются ли полосы прокрутки;

titlebar={yes|no|1|0} — отображается ли строка заголовка окна (только для HTML-приложений);

toolbar={yes|no|1|0} — отображается ли панель инструментов;

status={yes|no|1|0} — отображается ли строка состояния.

Например, следующий вызов, создаст новое окно браузера без панели инструментов и полос прокрутки, загрузив в него документ с указанным первым параметром абсолютным адресом. В любом документе HTML, для ссылки на это окно можно использовать имя linkWin. В сценарии ссылаться на это окно можно с помощью переменной winExample.

winExample = window.open(
"http://www.bhv.ru/library/index.html",

"linkWin", "toolbar=no,scrollbars=yes")

Вывод во вновь открытое окно осуществляется методом write() объекта document этого окна.

Закрывается окно методом close() без параметров:

window.close()

В сценарии можно использовать специальное имя self для ссылки на текущее окно или использовать переменную, хранящую ссылку на требуемое окно:

self.close()

newWindow.close()

4Пример 14. Открытие нового окна и запись в него

Создадим страницу HTML, открывающую новое окно браузера при щелчке в любом месте документа. Для этого обработчику onclick объекта document присвоим ссылку на функцию openNewWindow(), в которой открывается новое окно newWind и в него записывается абзац:

window.document.onclick = openNewWindow

function openNewWindow(){

newWind = window.open(

"", "_blank",

"top=10,left=10,width=300,height=50," +

"scrollbars=no, status=no, titlebar=no, toolbar=no," +

"location=no, resizable=yes, menubar=no")

newWind.document.write("<p>Предложение из сценария.</p>")

}

</script>

<BODY >

<P>Щелчок в области документа откроет новое окно.</P>

</BODY>

Обратим внимание, что в качестве имени ссылки на окно из документа HTML можно указывать ключевые слова _blank и т. п., используемые в атрибуте target гиперссылок в соответствии со стандартом HTML.

Ряд методов объекта window влияет на положение окна относительно экрана монитора, его размеры и отображаемый документ:

moveBy(x,y)	перемещает окно относительно текущего положения на заданные величины;
moveTo(x,y)	перемещает окно в абсолютное положение относительно экрана (параметры абсолютные координаты верхнего левого угла окна);
resizeBy(x,y)	изменяет текущие размеры окна на заданные величины;
resizeTo(x,y)	устанавливает абсолютные размеры окна;
scroll(x,y)	прокручивает содержимое окна к заданным величинам относительно левого верхнего угла области отображения окна;
scrollBy(x,y)	прокручивает содержимое окна на заданные величины относительно текущего положения прокрутки;
scrollTo(x,y)	прокрутка содержимого к заданным абсолютным координатам;
navigate(URL)	загружает в текущее окно документ с указанным адресом;
print()	печатает документ, загруженный в окно.

Ряд методов объекта window отображают диалоговые окна для взаимодействия с пользователем (мы с ними уже знакомы из предыдущих уроков):

alert(сообщение)	окно с сообщением и кнопкой OK (возвращает true, если нажата кнопка OK, и false, если окно было закрыто);
prompt(сообщение, значение)	окно с сообщением, полем ввода (в нем отображается значение второго параметра или default, если он опущен) и двумя кнопками OK и Cancel. Возвращает введенное пользователем в поле значение при нажатии кнопки OK или null при нажатии кнопки Cancel или закрытии окна;
confirm(сообщение)	окно с сообщением и двумя кнопками (возвращает true, если нажата кнопка Yes, и false, если нажата кнопка No);

Метод setTimeout() запускает выполнение кода JavaScript, задаваемого первым строковым параметром, через определенный промежуток времени после выполнения метода.

Метод setInterval() запускает периодический "процесс" выполнения кода JavaScript, задаваемого первым строковым параметром, с интервалом, указанным вторым параметром.

переменная = window.setTimeout(строка_кода, интервал, [язык])

переменная = window.setInterval(строка_кода, интервал, [язык])

Интервал задается в миллисекундах (1000 соответствует 1 секунде).

Необязательный параметр язык определяет язык сценария для выполняемого кода (JavaScript, VBScript). По умолчанию предполагается язык JavaScript.

Для остановки запущенных процессов используются соответственно методы и , параметрами которых является переменная, в которой сохранен результат запуска "процесса":

window.clearTimeout(переменная)

window.clearInterval(переменная)

Одновременно можно запустить много "процессов". Обычно метод setInterval() используется для создания страницы HTML с движущимися элементами.

4Пример 15. Периодический "процесс"

Ниже приведен код страницы HTML, после загрузки которой каждые три секунды будет появляться сообщение, генерируемое вызовом функции myMessage():

function myMessage() {

alert("My Message")

}

</SCRIPT>

<p>Каждые три секунды будет появляться сообщение</p>

</BODY>

Фреймы

В HTML элемент-контейнер <FRAMESET>...</FRAMESET> , используемый вместо элемента BODY, определяет специальный тип документа, позволяющий отображать одновременно несколько документов HTML в одном окне браузера. Область отображения браузера разбивается на несколько частей (фреймов) с помощью вложенных в элемент FRAMESET элементов FRAME, в которых и отображаются соответствующие документы HTML.

Контейнер <FRAMESET> может содержать кроме элементов <FRAME> и другие теги <FRAMESET>, образуя, таким образом, вложенные наборы фреймов. Пример страницы HTML, задающей вложенные наборы фреймов, представлен ниже:

</FRAMESET>

</FRAMESET>

Для доступа к фреймам из сценария JavaScript предусмотрен объект top, являющийся родителем всех фреймов (в нашем примере clock, menu и content). Для ссылки на фреймы страницы можно использовать либо символические имена, либо свойство-массив frames объекта top, в котором содержатся ссылки на все фреймы страницы. Так, на первый фрейм можно сослаться двумя способами:

top.clock

top.frames[0]

Каждый фрейм в сценарии представляется как объект window, обладающий всеми рассмотренными выше свойствами и методами этого объекта.

Свойство location фрейма содержит адрес загруженного в него документа. Изменение значения этого свойства приведет к загрузке нового документа в соответствующий фрейм. Следующий фрагмент кода HTML задает на странице menu.html кнопку с именем Во фрейм clock, при щелчке на которую во фрейм clock загружается страница HTML:

<FORM>

<INPUT TYPE="button" VALUE="Во фрейм clock"

onclick="top.clock.location='clock.html'">

</FORM>

Для доступа из сценария к странице, загруженной во фрейм, следует использовать его свойство-объект document.

4Пример 16. Взаимодействие с фреймом из сценария

Создадим страницу с двумя фреймами:

</FRAMESET>

Во фрейм Frame1 загрузим файл frame1.html.:

<FORM>

<input type="button" value="Запись во фрейм Frame2"

onclick="top.Frame2.document.write('<p>Я из фрейма Frame1.</p>')">

</FORM>

При щелчке на кнопке Запись во фрейм Frame2 второй фрейм будет заполняться содержимым, определенным в качестве параметра метода write объекта document этого фрейма.

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

4Пример 17. Взаимодействие вложенных фреймов

Загружаемая страница с фреймами frame.html:

</FRAMESET>

Файл frame2.html (названия фреймов могут быть такими же, как и в главной странице!):

</FRAMESET>

Файл frame1-1.html, предоставляющий запись во фрейм Frame1 страницы frame2.html:

<FORM><input type="button" value="Запись во второй фрейм."

onclick="top.Frame2.Frame1.document.write('<p>Я из фрейма Frame1 файла frame1-1.html.</p>')"></FORM>

Можно на фрейм Frame1 файла frame2.html сослаться и так:

top.frames[1].frames[0]

Объект navigator

Является свойством объекта window и предоставляет информацию об используемом клиентом браузере.

Свойства

appCodeName	Название кода браузера.
appName	Название браузера.
appVersion	Версия браузера.
browserLanguage	Текущий используемый язык браузера.
cookieEnabled	Поддерживает ли браузер сохранение cookies.
userAgent	Заголовок, посылаемый клиентом серверу при обмене данными по протоколу HTTP.
cpuClass	Строка, характеризующая используемый процессор компьютера.
onLine	Браузер в режиме работы с сетью или в автономном.
platform	Строка, характеризующая операционную систему компьютера.
systemLanguage	Используемый по умолчанию язык операционной системы компьютера.

Методы

javaEnabled()

Возвращает true, если возможен в браузере запуск Java-апплета. В противном случае false.

Объект location

Объект location также является свойство объекта window и связан с URL-адресом отображаемого в браузере документа. Синтаксис URL-адреса имеет следующий вид:

protocol//host:port/pathname#hash?search

Примеры URL-адресов

http://localhost:8080/doc/url.html#path

http://www.net.org/tutorial/cgi/url.pl?name=search

и соответствие их частей указанным в синтаксисе обозначениям:

Синтаксис URL	Адрес 1	Адрес 2
protocol	http:	http:
host	localhost	www.net.org
port
pathname	doc/url.html	tutorial/cgi/url.pl
hash	path
search		name=search

Свойства

href возвращает полный адрес загруженного документа. Если его изменить, то будет загружен новый документ. Является свойством по умолчанию, поэтому для загрузки нового документа из сценария можно использовать следующую конструкцию:

window.location = "http://microsoft.com/index.asp";

Остальные свойства hash, host, hostname, pathname, port , protocol, search соответствуют частям адреса загруженного документа, используемые как для получения, так и для изменения соответствующих частей адреса.

Методы

reload()	Перезагружает в браузер текущую страницу.
replace(URL)	Загружает в окно браузера страницу, адрес которой задан в качестве его параметра.

Объект history

Объект history (свойство объекта window) содержит список адресов документов HTML, ранее загружавшихся в браузер.

Его свойство length хранит общее количество адресов в этом объекте.

Метод go() этого объекта загружает страницу из списка посещенных. Текущая страница имеет индекс 0, предыдущие по отношению к текущей страницы индексируются отрицательными целыми числами, а последующие положительными целыми числами:

history.go(-3)

Для перемещения на одну страницу назад и на одну страницу вперед относительно текущей в списке посещенных можно использовать соответственно методы back() и forward() этого объекта.

Упражнения

1. Видоизменить программу примера 14, добавив на страницу две кнопки — одну для открытия окна, другую для закрытия.

2. Создать страницу с кнопкой, при щелчке на которой окно будет смещаться на 20 пикселей по горизонтали и по вертикали.

3. При загрузке страницы запустить два процесса, отображающие каждый свое сообщение. На странице предусмотреть кнопку, при нажатии на которую отображается диалоговое окно с просьбой ввести идентификатор процесса. После его ввода процесс останавливается.

4. В цикле определить все свойства объектов navigator и location и отобразить их в браузере в виде таблиц:

название свойства	значение
...	...

5. Создать три страницы HTML. На первой странице расположена гиперссылка на страницу с именем history.html. На этой странице три кнопки: первая реализует метод back(), вторая метод forward() и третья метод go(). Также на этой странице должна быть гиперссылка на третью страницу HTML со ссылкой на history.html.

Загружаем первую страницу и переходим по ссылке на страницу history.html. С нее переходим по ссылке на третью страницу HTML и возвращаемся на страницу history.html нажатием кнопки Назад панели инструментов браузера.

Теперь при нажатии кнопок, реализующих методы back() и forward() мы должны попасть соответственно на первую и третью страницы, а при нажатии на кнопку, реализующую метод go(), в диалоговом окне следует указать на какую страницу мы хотим перейти (ее номер относительно текущей).

Урок 11. Объекты доступа к странице и ее элементам

Объект document

Этот объект содержит информацию о текущей загруженной странице.Для каждой страницы создается один объект document.

Свойства

Часть свойств соответствуют атрибутам тега-контейнера <BODY>: background, bgColor, fgColor (атрибут text), linkColor (атрибут link), alinkColor (атрибут alink) и vlinkColor (атрибут vlink). Другие свойства не соответствуют атрибутам указанного тега. Например, URL хранит адрес загруженного документа, parentWindow предоставляет ссылку на окно-родитель.

Семейства

all	Содержит ссылки на все объекты, представляющие элементы HTML
anchors	Содержит объекты, соответствующие тегам <A NAME="..."> в порядке их появления в документе
applets	Содержит объекты, соответствующие тегам <APPLET> в порядке их появления в документе
embeds	Содержат объекты, соответствующие тегам <EMBED> в порядке их появления в документе
forms	Содержит объекты, соответствующие тегам <FORM> в порядке их появления в документе
images	Содержит объекты, соответствующие тегам <IMG> в порядке их появления в документе
links	Содержит объекты, соответствующие тегам <AREA HREF="..."> и <A HREF="">, а также объекты link, созданные методом link() в порядке их появления в документе
scripts	Содержит объекты, соответствующие тегам <SCRIPT>
styleSheets	Содержит объекты styleSheet, соответствующие всем каскадным таблицам стилей, ассоциированных с документом как через теги <LINK>, так и через теги <STYLE>

Этот объект используется наиболее часто в связи с его двумя полезными методами write() и writeln(), которые записывают в документ информацию, и тем самым, позволяют динамически его создавать.

У него есть и другие полезные методы, связанные с динамическим созданием элементов HTML и добавлением их в объектную модель документа, но об этом подробнее при рассмотрении объектной модели документа DOM.

Объект body

Этот объект соответствует элементу BODY документа HTML и встроен в создаваемую браузером иерархию объектов, соответствующих элементам HTML всего отображаемого документа. Его "родителем" является объект document и поэтому в сценарии доступ к нему осуществляется с учетом этих "родственных" отношений:

sBody = document.body

По-существу он представляет область отображения окна браузера.

Часть его свойств соответствует атрибутам элемента BODY:

aLink, link, vLink, background, bgColor, bgProperties, bottomMargin, topMargin, rightMargin, leftMargin, text

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

clientHeight clientWidth clientTop clientLeft	Соответственно высота и ширина области отображения браузера с учетом отступов, но без полей, границы и полос прокрутки, а также истинные координаты верхнего левого угла области отображения (расстояние между истинным и физическим верхним левым углом области отображения)
offsetHeight offsetWidth offsetTop offsetLeft	Физические размеры и координаты верхнего левого угла области отображения.
scrollHeight scrollWidth scrollTop scrollLeft	Высота и ширина области прокрутки, а также расстояния между верхним и левым краями области отображения и соответствующими краями содержимого, отображаемого в окне.
scroll	Возвращает Yes, если полосы прокрутки отображены, No если нет и auto если они появляются, когда размеры содержимого области отображения превосходят ее размеры

Объект form

Каждая форма в документе, определенная тегом <FORM>, создает объект form,порождаемый объектом document. Ссылка на этот объект осуществляется с помощью переменной, определенной в атрибуте NAME тега <FORM>. В документе может быть несколько форм, поэтому для удобства ссылок и обработки в объект document введено свойство-массив forms, в котором содержатся ссылки на все формы документа. Ссылка на первую форму задается как document.forms[0], на вторую — document.forms[1] и т.д. Вместо индекса в массиве forms можно указывать строку, значение которой равно имени переменной для формы. Например, если в документе присутствует единственная форма со значением атрибута name=form1, то любой из следующих операторов JavaScript содержит ссылку на эту форму:

document.forms[0]

document.forms["form1"]

document.form1

Последний оператор возможен в силу того, что объект document порождает объект form (как и все остальные объекты, соответствующие элементам HTML страницы) и ссылку на него можно осуществлять по обычным правилам наследования языка JavaScript.

Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы. Таким образом, для ссылки на объект text формы form1 можно пользоваться любым из нижеприведенных операторов:

document.forms[0].text1

document.forms["form1"].text1

document.form1.text1

Каждый объект form имеет также семейство elements, содержащее ссылки на все подчиненные форме элементы в том порядке, как они определены в документе HTML.

Элементы формы, точнее, их объекты, имеют свойство name, значение которого равно значению атрибута NAME тега <INPUT>, а также свойство value, значение которого определяется смыслом атрибута VALUE элемента формы. Например, для элементов text и textarea значением этого свойства будет строка содержимого полей ввода этих элементов; для кнопки подтверждения – надпись на кнопке и т.д.

У объекта, соответствующего элементу управления SELECT, имеется семейство options, в котором хранятся ссылки на объекты, соответствующие элементам OPTION этого элемента управления.

Для формы одним из важных действий на странице является проверка правильности заполнения полей пользователем на машине клиента до пересылки их на сервер. В следующем примере разъясняется, как выполнять эту процедуру.

4Пример 18. Проверка данных формы

Страница HTML с формой form1, содержащей текстовые однострочные поля name для ввода имени и age для ввода года рождения, и функцией validate(), вызываемой до отправки данных формы на сервер, представлена следующим кодом:

<HEAD>

<!-- //Скрыть сценарий от браузеров, не поддерживающих JavaScript

// функция проверки поля с целым значением

function validate() {

var ret = true;

if(isNaN(parseInt(form1.age.value))) {

ret = false;

alert("Год должен быть целым числом!");

form1.age.value = "";

form1.age.focus();

}

return ret;

}

//-->

</SCRIPT>

</HEAD>

<FORM name="form1" action=""

onsubmit="return validate()">

<pre>

Ваше имя: <INPUT type="text" size=10 name="name"><br>

Ваш год рождения: <INPUT type="text" size=5 name="age">

</pre>

<HR>

</FORM>

</BODY>

После загрузки страницы в браузер курсор устанавливается в поле ввода имени. Нажатие на кнопку Подтвердить до отсылки данных формы генерирует событие submit для формы, которое и перехватывается в ее обработчике события onsubmit. Функция проверки должна вернуть true, если все введенные данные правильны (а мы проверяем одно поле age), или false, если какие-то проверяемые данные не правильны. Но этого еще недостаточно, чтобы в случае неправильности данных браузером не инициировалась процедура их пересылки. В обработчике события onsubmit обязательно должна присутствовать операция return. Если ее операнд true, то данные пересылаются, если false, то нет.

Упражнения

1. Написать сценарий, отображающий в отдельном окне браузера сразу же после загрузки в него страницы все формы (свойство name) и все элементы управления в каждой из них с их названием и значением (свойства name и value), а для элемента SELECT отобразить его свойство name и все элементы списка со значением их свойств value, например:

form1

1. txt1: *****

2. chk1: yes

3. radio1: yes

4. radio1: no

form2

1. txt1: xxxxxx

2. select1:

val1

val2

3. txt2: yyyyyy

. . .

2. Реализовать эмуляцию взаимодействия страницы HTML с серверной программой, регистрирующей пользователя. На странице HTML пользователь вводит имя, фамилию, пароль и адрес электронной почты. Заполнение всех полей обязательно. Перед отсылкой данных на "сервер" следует проверить правильность ввода адреса электронной почты (наличие двух частей, разделенных символом @). Эмуляцию серверной программы осуществить сценарием JavaScript, встроенном в другую страницу HTML, адрес которой указывается в атрибуте ACTION открывающего тега элемента FORM. Сценарий должен сформировать страницу, приветствующую пользователя по имени и фамилии и сообщающем ему в табличной форме с каким браузером он работает, его версию, а также наименование операционной системы (используйте объекты location и navigator).

3. Написать функцию, отображающую с помощью метода alert() объекта window значения свойств объекта body с префиксами client, offset и scroll. Вызвать ее из начала, середины и конца большого документа, отображаемого как минимум на трех экранах. Проанализировать полученные результаты.

4. Напишите универсальную функцию проверки значений, вводимых пользователем в текстовых полях формы на соответствие вещественному числу. Под универсальностью функции понимается тот факт, что ее можно использовать для любого однострочного текстового поля любой формы. Если пользователь ввел не вещественное число, то следует поле следует очистить и установить в него указатель мыши, сообщив о неправильном вводе пользователя.

Урок 12. Обработка событий в MS Internet Explorer

<14 15 161718 19 20 >

Дата добавления: 2018-09-24; просмотров: 653;