• 2525
  • 0
  • Автор: Артемьев Сергей Игоревич
  • Обсудить нана форуме
  • Адаптировал: Артемьев Сергей Игоревич

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

Объект window

Объект window является корневым в иерархии внешних объектов. window содержит в себе ссылки на текущую страницу (объект document), историю перемещений (объект history), все вложенные фреймы, если таковые есть (объект frames), и ещё несколько объектов, которые мы рассмотрим ниже.

Основное назначение window - создание и управление окном браузера. Под окном в JavaScript понимается контейнер, в который загружается документ. В зависимости от браузера окно может ассоциироваться с отдельным окном или с отдельной вкладкой в общем окне. В таблице приведены основные свойства и методы объекта window:

Свойства
parentСсылка на родительское окно.
selfСсылка на себя.
topСсылка на главное окно.
nameНазвание окна.
closedПризнак того, что окно уже было закрыто. Часто применяется в таймерах для определения доступности элементов страницы.
statusТекст, который отображается в статусной строке (полоска внизу окна)
returnValueЗначение, которое возвращается родительскому окну при закрытии текущего.
documentСсылка на объект document
eventСсылка на объект event
historyСсылка на объект history
locationСсылка на объект location
navigatorСсылка на объект navigator
screenСсылка на глобальный объект screen
Методы
open()Открывает новое окно браузера. В зависимости от настроек и типа браузера это может быть новая копия браузера или просто новая "закладка"
close()Закрывает текущее окно
showModalDialog()Показывает создаваемое окно в модальном режиме, т.е. пользователь должен закрыть его, чтобы продолжить работать с родительским окном
alert()Выводит диалог предупреждения. Мы уже неоднократно пользовались этим методом.
prompt()Выводит диалог с просьбой ввести какое-либо значение.
confirm()Выводит диалог подтверждения, в котором пользователь может выбрать одно из двух действий.
navigate()Перенаправляет окно браузера на другую страницу.
setInterval()Функции управления таймерами, мы уже рассматривали их в уроке, посвящённом событиям таймера.
setTimeout()
clearInterval()
clearTimeout()
События
onblur()Окно потеряло фокус ввода.
onfocus()Окно получило фокус ввода (стало активным).
onhelp()Пользователь нажал кнопку F1
onresize()Изменился размер окна
onscroll()Пользователь прокрутил окно
onerror()Возникла ошибка при передаче
onbeforeunload()Окно будет выгружено (закрыто)
onunload()Окно закрывается
onload()Окно полностью загружено.

Рассмотрим пример использования объекта window:

Код:
<script type="text/javascript" language="javascript">

var wnd;

// первая функция открытия окна
function openNew()
{
// Создаём новое пустое окно
// размером 300х300 пискелей
wnd = window.open('', '', 'width=300, height=300');

// Вписываем в это окно строку
wnd.document.open();
wnd.document.write(
"<html><head><title>Всплывающее окно</title></head>
<body>самозакрывающееся окно</body>");
wnd.document.close();

// Указываем строку для отображения в статусной строке
wnd.status = 'Сообщение в строке статуса';

// Взводим таймер на пять секунд
window.setTimeout("closeWindow();", 5000);
}

// функция закрытия окна
function closeWindow()
{
if(wnd) wnd.close();
}

// вторая функция открытия окна
function openFullScreen()
{
// Создаём новое пустое окно
// в полноэкранном режиме без полос прокрутки
wnd = window.open('', '', 'fullscreen=yes, scrollbars=no');

// Вписываем в это окно строку
wnd.document.open();
wnd.document.write(
"<html><head><title>Всплывающее окно</title></head>
<body>самозакрывающееся полноэкранное окно</body>");
wnd.document.close();

// Взводим таймер на десять секунд
window.setTimeout("closeWindow();", 10000);
}

function openSized()
{
window.open(window.location.href);
}


</script>


...

<input type="button" onclick="openNew()"
value="Создать простое окно" /><br />
<input type="button" onclick="openFullScreen()"
value="На полноэкранное окно" /><br />
<input type="button" onclick="closeWindow()"
value="Закрыть дочернее окно" /><br />

...

Этот скрипт в зависимости от нажатой кнопки открывает либо окно размером 300х300 пикселей, либо окно, развёрнутое на весь экран. После создания окна в него записывается текстовая строка. Как видите, пользоваться объектом window достаточно просто, главное - не злоупортеблять, т.к. средствами защиты от спама и назойливой рекламы в большинстве браузеров молча блокируют всплывающие окна.

Объект document

Объект document представляет собой документ (HTML-страницу), загруженный в окно. В предыдущем примере мы уже использовали метод write() этого объекта для заполнения пустого документа. Все основные методы и свойства объекта перечистелы в таблице:


Свойства
alinkColorЦвет активной ссылки на странице
bgColorЦвет фона по-умолчанию
bodyСсылка на элемент body
cookieCookie данной страницы. Изменение этого свойства приводит к сохранению новых cookie в браузере пользователя.
fgColorЦвет текста по-умолчанию.
lastModifiedДата последнего изменения страницы
linkColorЦвет ещё не посещённых ссылок на странице
locationТекущий адрес страницы
parentWindowСсылка на родительское окно
refererАдрес страницы, с которой пришел пользователь
titleДополнительный заголовок страницы
vlinkColorЦвет посещённых ссылок
urlАдрес текущего документа
Методы
clear()Очистка выделенной области документа
close()Закрытие документа, ранее открытого для изменения.
open()Открытие документа для изменения
write()Запись текста и HTML-кода в указанное место документа.
События
onlick()Клик в области документа
ondblclick()Двойной клик в области документа
onerror()Ошибка при загрузке документа
onhelp()Пользователь вызвал справку (нажал F1)
onkeydown()События, происходящие при нажатии кнопок или перемещении указателя мыши. Подробно рассмотрены в уроке "События клавиатуры и мыши"
onkeypress()
onkeyup()
onmousedown()
onmousemove()
onmouseout()
onmouseup()

Вот пример использования объекта document:


Код:
<script type="text/javascript" language="javascript">

var stepLink = 0;
var stepBody = 0;
var timerLink;
var timerBody;
// функция раскраски ссылок
function colorizeLink()
{
if(stepLink==0)
window.document.linkColor = "#ff0000";
else window.document.linkColor = "#0000ff";

stepLink = (stepLink == 0)? 1:0;
timerLink =
window.setTimeout("colorizeLink();", 1000);
}
//

// функция раскраски фона
function colorizeBody()
{
if(stepBody==0)
window.document.bgColor = '#ccff00';
else window.document.bgColor = '#00ffcc';
stepBody = (stepBody == 0)? 1:0;
timerBody =
window.setTimeout("colorizeBody();", 1300);
}
//
// функция инициализации
function initTimers()
{
timerLink =
window.setTimeout("colorizeLink();", 1000);
timerBody =
window.setTimeout("colorizeBody();", 1300);

var elm = document.getElementById('lastModified');
if(elm)
elm.innerHTML = document.lastModified;
}
</script>

</head>

<body onload="initTimers()">
<div id="lastModified">Неизвестно</div>
<a href="123.htm">первая ссылка</a><br />
<a href="456.htm">вторая ссылка</a><br />
</body>

В этом скрипте по таймеру меняется цвет фона и цвет активной ссылки. Естественно, использовать такой эффект на своей странице не стоит, т.к. у посетителя глаза устанут раньше, чем он приступит к чтению статьи или поста. Более приемлемым является применение эффекта "день-ночь", смысл которого - изменение яркости или цвета фона в зависимости от времени суток. Пример такого скрипта вы без труда найдёте в интернете.

Объект location

Этот объект предоставляет свойства и методы для управления адресом текущей страницы.



Свойства
hrefПолный адрес страницы
hashИмя "якоря", который указывается в адресе после "#"
hostЧасть адреса, содержащая имя сервера и порт
hostnameЧасть адреса, содержащая имя сервера
pathnameЧасть адреса, содержащая полный путь к файлу на сервере
portЧасть адреса, содержащая порт
protocolЧасть адреса, содержащая протокол запроса страницы
searchЧасть адреса, содержащая поисковый запрос (текст, записанный после "?")
Методы
assign()Очистка выделенной области документа
reload()Закрытие документа, ранее открытого для изменения.
replace()Открытие документа для изменения

Если вы обратились по адресу:

Код:
http://server.com:8080/catalog/2009/index.htm?id=122#descr

то значения свойств объекта location будет следующими:

hrefhttp://server.com:8080/catalog/2009/index.htm?id=122#descr
hashdescr
hostserver.com:8080
hostnameserver.com
pathnamecatalog/2009/index.htm
port8080
protocolhttp:
searchid=122

С помощью объекта location легко осуществляется перенаправление пользователя на другую страницу или, наоборот, запрет возврата на предыдущую страницу.

Код:
// перенапрвление

document.location.href = 'новый адрес страницы';

// или

document.assign('новый адрес')

// запрет возврата

document.replace('новый адрес')

Запрет возврата сводится к тому, что адрес страницы не сохраняется в истории браузера. Чаще всего это необходимо, когда окно служит для выбора параметров и создано в виде диалога (например, диалог выбора цвета или шрифта в онлайн-редакторе). Такие страницы сами по себе бесполезны, т.к. должны создаваться родительским окном и ему же возвращать выбранное значение, а значит и запоминать их в истории незачем.

Объект history

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

History имеет всего одно свойство - length, определяющее количество посещённых страниц. При переходам по истории необходимо следить, чтобы индекс запрашиваемого элемента не выходил за пределы длины списка.

Для перемещения по списку предназначены методы объекта history, их всего три:

back()Загрузка предыдущего элемента истории
forward()Загрузка следующего элемента истории
go(индекс)Загрузка элемента истории с указанным индексом.

Очевидно, что метдо back() эквивалентен вызову go(-1), а метод forward() - вызову go(1). Вот пример использования объекта history:

Код:
// переходо к элементу с индексом 4
if(window.history.length > 3)
window.history.go(4);

// переход по клику на ссылке

<a href="" onclick="javascript:window.history.back();">

Вернуться

</a>

Объект navigator

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


Свойства
appCodeNameКодовое имя браузера. Определяет группу браузеров или т.н. "движок".
appNameОбычное название браузера, например "Netscape Navigator"
appVersionВерсия браузера, например "6.0"
cookieEnabledПризнак того, что браузер поддерживает cookie. Логическое значение (да/нет).
userAgentСтрока, которую высылает браузер серверу при запросе страницы. Строка содержит данные о типе браузера, его версии и поддерживаемых расширениях..
Методы
javaEnabled()Метод определяет возможность запуска Java-скриптов, логическое значение.

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

Код:
<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 на что угодно, в том числе на подпись браузера другого типа.

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

Объект event

Объект event содержит описание последнего произошедшего события. Структуру и способы применения этого объекта мы подробно рассматривали в уроке "События клавиатуры и мыши".

Объект screen

Screen является глобальным объектом, одинаковым для всех скриптов и всех окон браузера. Он описывает возможности используемого устройства отображения, например, монитора. Объект содержит несколько свойств, наиболее интересными из которых является width и height, определяющие ширину и высоту экрана в пикселях.

Код:
<script type="text/javascript" language="javascript">

var goodW = (window.screen.width >= 800 &&
window.screen.width < 2048)
var goodH = (window.screen.height >= 600 &&
window.screen.height < 1024)

if(goodW && goodH)
alert('Подходящее разрешение');
else
alert('Не подходящее разрешение!');

</script>

Скрипт определяет текущее разрешение экрана и если оно слишком маленькое или слишком большое - выдаёт предупреждение. На практике вместо вывода сообщения лучше провести корректировку параметров отображения страницы с учётом нестандартного расширения. Например, для очень маленьких расширений можно скрыть неинформативные элементы (картинки, рекламу и пр.), чтобы они не загромождали и без того небольшой экран.

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

В новых спецификациях JavaScript (версии 1.2, 1.3+) в стандартные объекты добавлено много интересных и полезных свойств и методов. Некоторые из них уже поддерживаются большинством производителей браузеров, но далеко не все, поэтому использовать нововведения надо осмотрительно и аккуратно.

Можешь почитать и вот эту статейку "Заголовок, который прилипает к верхней части окна просмотра"

mistakes

Это тоже интересно

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

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element