- Автор: Артемьев Сергей Игоревич
- Обсудить на :на форуме
- Адаптировал: Артемьев Сергей Игоревич
Внешние объекты всегда доступны в любом месте скрипта. В отличие от встроенных объектов языка, внешние объекты не надо инициализировать или создавать их экзепляры. Набор внешних объектов и их свойства могут отличаться в разных браузерах, поэтомы мы рассмотрим только основные.
Объект 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 |
| cookie | Cookie данной страницы. Изменение этого свойства приводит к сохранению новых 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 будет следующими:
| href | http://server.com:8080/catalog/2009/index.htm?id=122#descr |
| hash | descr |
| host | server.com:8080 |
| hostname | server.com |
| pathname | catalog/2009/index.htm |
| port | 8080 |
| protocol | http: |
| search | id=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+) в стандартные объекты добавлено много интересных и полезных свойств и методов. Некоторые из них уже поддерживаются большинством производителей браузеров, но далеко не все, поэтому использовать нововведения надо осмотрительно и аккуратно.
Можешь почитать и вот эту статейку "Регулярные выражения для валидации"
Это тоже интересно
05.12.13Загрузка новостей на AJAX
25.09.17Асинхронная загрузка CSS
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.