|
В предыдущей
лекции рассматривалось использование объекта
документа. Были показаны функции
document.forms,
document.getElementById,
document.createElement
и некоторые другие, которые встроены в объект
document. В этой
лекции будут подробно рассмотрены объект
документа (document)
и объект окна (window),
которые обладают многими полезными функциями.
Объект
document
представляет реальное содержимое страницы и
поэтому имеет функции, которые помогают изменить
саму страницу. Например, запись на странице
происходит с помощью
document.write, а обращение к форме - с
помощью document.forms.
Как
упоминалось в шестой лекции, каждый объект на
странице является потомком или предком какого-то
другого объекта. Все это представляет большое
дерево. Объект window
находится в вершине этого дерева, а все
остальное содержится в нем. Объект
window указывает
на реальное окно браузера. Если требуется,
например, открыть новое окно или изменить размер
текущего, то для этого используются функции
объекта window.
Объект
window, кроме того,
что находится в вершине
DOM, является также глобальным объектом.
Во второй лекции мы говорили о том, что любая
переменная обладает глобальной или локальной
областью действия. Если она имеет глобальную
область действия, то она доступна в любом месте
сценария JavaScript.
Обладание глобальной областью действия означает
также, что переменная соединена непосредственно
с объектом window.
Любой код JavaScript,
который не находится внутри какой-то функции,
находится в глобальном объекте
window.
В связи с
этим не требуется писать "window"
при обращении к функциям или переменным объекта
window, как в
случае использования некоторых других функций,
таких, как
document.getElementById.alert() является
примером функции, которую можно вызвать либо как
"window.alert() ",
либо просто "alert()".
Объект Window
Прежде всего
объект window
предоставляет доступ к информации об окне:
| Свойство |
Описание |
|
window.location |
возвращает текущий
URL
окна |
|
window.opener |
Если окно было открыто другим окном
(с помощью
window.open), то возвращается
ссылка на открывающее окно, иначе
null |
|
MSIE:
window.screenTop Другие:
window.screenY |
Возвращает верхнюю позицию окна.
Отметим, что эти значения в
MSIE
существенно отличаются от других
браузеров.
MSIE возвращает верхнюю
позицию области содержимого (ниже
адресной строки, кнопок, и т.д.).
Другие браузеры возвращают верхнюю
позицию реального окна (выше кнопки
закрытия) |
|
MSIE:
window.screenLeft Другие:
window.screenX |
Возвращает левую позицию окна с
такими же различиями, как и для
screenTop
и screenY |
Положение
окна на экране пользователя редко бывает
необходимо, но два других свойства,
location и
opener, будут
очень полезны. Свойство
window.location выполняет две функции.
Если изменить его с помощью
JavaScript,
например, window.location='http://www.htmlgoodies.com',
то браузер будет перенаправлен на эту страницу.
Чтение window.location
выдает адрес текущего документа. Зачем это нужно
знать? Обычно адрес страницы не нужен, но может
потребоваться строка запроса или анкер. Возьмем,
например, следующий URL:
http://www.somesite.com/page.asp?action=browse&id=5#someAnchor.
Этот URL можно
разбить на три части:
|
URL: |
http://www.somesite.com/page.asp |
|
Строка запроса: |
action=browse&id=5 |
|
Анкер: |
someAnchor |
Так как
window.location
содержит всю эту информацию, то можно написать
функцию, которая будет возвращать переменную
querystring (строку запроса). Это аналогично
request.querystring
в ASP или
$_GET в
PHP, если вы
знакомы с каким-либо из этих языков:
function
queryString(val){
var q = unescape(location.search.substr(1)).split('&');
for(var i=0; i<q.length; i++){
var t=q[i].split('=');
if(t[0].toLowerCase()==val.toLowerCase()) return t[1];
}
return '';
}
Для
предыдущего URL
функция
queryString('action') вернет
'browse'. Мы видим
здесь новую функцию "window.unescape
". Функция unescape,
а также ее дополнительная функция
escape,
используются в соединении с
window.location.
При передаче данных в строке запроса она должна
быть экранирована ("escaped
"), чтобы она не влияла на саму строку запроса.
Если, например, среди данных имеется знак
амперсанд (&), то
необходимо его экранировать, чтобы можно было
различить этот знак в данных и тот
&, который
разделяет два различных значения. Функция
escape
подготавливает посылаемые данные для
использования в качестве значения
querystring,
поэтому она используется при задании
window.location.
Например:
window.location='/page.asp?name='+escape(SomeInputBox.value);
Функция
unescape делает обратное и позволяет получить "нормальный"
текст из window.location.
Вернемся к
свойствам window,
где имеется свойство "opener
". Это свойство используется в соединении с
обычно используемой функцией
window.open,
которая позволяет открывать новое окно браузера
и, для некоторых свойств управлять его выводом.
Блокировщики всплывающих окон очень часто будут
препятствовать открытию окна с помощью
window.open, если
в этот процесс не вовлечен щелчок мышью. Поэтому,
если в коде имеется вызов
window.open и при этом пользователь не
щелкает на ссылке или чем-то подобном, то скорее
всего это не будет работать.
Функция
window.open
получает до 3
аргументов: URL
окна, которое надо открыть, имя окна и свойства
окна.
var newWindow=window.open('',
'TestWindow', 'width=200,height=200');
newWindow.document.write('Это окно будет
закрыто через 2 секунды');
setTimeout(function(){ newWindow.close(); },
2000);
Третий
аргумент window.open
получает строку аргументов. Обычно используются
следующие:
-
width,
height -
задают размеры окна;
-
left,
top - задают
положение окна на экране;
-
location,
menubar,
toolbar,
status,
titlebar,
scrollbars -
эти параметры выводят/скрывают свои
соответствующие "панели" на окне. Задайте "yes
", чтобы вывести соответствующую "панель";
-
resizable -
если задан как "yes
", то размер окна можно изменять.
Полное
описание window.open
можно увидеть в документации Mozilla.
Так как мы
открываем пустое окно, то первый аргумент будет
пустым. Для открытия страницы
'test.html' вызов
выглядел бы следующим образом:
window.open ('test.html',
'TestWindow', 'width=200,height=200').
В этом
примере для объекта
window, открываемого окна, задается
переменная newWindow.
В связи с этим для вывода содержимого в окне
необходимо использовать "newWindow.document.write
".
Функция
window.open также
имеет свою противоположность, функцию
window.close.
Однако эта функция может успешно вызываться
только на окнах, созданных
JavaScript. Если
попробовать закрыть окно, созданное не
JavaScript, то
возможны два варианта: либо появится сообщение,
говорящее, что сценарий пытается закрыть окно,
либо браузер просто это проигнорирует.
setTimeout и
setInterval
Можно
видеть, что в этом примере используется еще одна
новая функция setTimeout.
Функции setTimeout
и setInterval
применяются для выполнения кода после указанного
интервала времени и обе получают два аргумента:
функцию или строку кода и период ожидания в мс.
1 мс = 1/1000 секунды,
поэтому для задания выполнения кода через
5 секунд
необходимо определить в этом случае для второго
аргумента значение 5000.
setTimeout
выполнит код один раз после завершения заданного
интервала времени.
setInterval будет продолжать выполнять
код после завершения каждого интервала. При
заданном интервале 5000
setInterval будет
выполнять код каждые 5
секунд.
Существуют
еще две другие функции:
clearTimeout и
clearInterval, которые отменяют
выполнение, через заданные интервалы. Однако для
этого необходимо иметь ссылку на вызов
setTimeout или
setInterval,
например:
var myTimeout =
setTimeout("alert('Hi!');", 500);
clearTimeout(myTimeout);
Если не
сохранить ссылку в переменной
myTimeout, то не
существует способа отменить заданное выполнение.
Давайте посмотрим на пример этого в действии:
function
createTimeout(text, time){
setTimeout("alert('"+text+"');", time);
}
var intervals = [];
function createInterval(text, time){
// сохраняет интервал в массиве intervals
intervals.push(setInterval("alert('"+text+"');", time));
}
function tut5(){
if(intervals.length==0) return;
// удаляет последний интервал выполнения в массиве intervals
clearInterval(intervals.pop());
}
Демонстрация в действии
Текст для вывода:
Время ожидания(в мс):
setTimeout
setInterval
clearInterval
Существует
также функция
clearTimeout, которая идентична по
синтаксису clearInterval.
Важно
отметить, что во время ожидания выполнения
заданного кода функциями
setTimeout или
setInterval весь остальной код
JavaScript
продолжает выполняться. Когда функция
setTimeout или
setInterval будет
готова, она выполнит заданный код, но только
после того, как другой код закончит выполнение.
Другими словами,
setTimeout и
setInterval никогда не прерывают для
выполнения другой код.
window.opener
Как
говорилось ранее, свойство окна
'opener' можно
использовать для доступа к окну, которое открыло
текущее окно, а также к любым свойствам,
функциям и т.д. этого окна. Например:
<!--page1.html-->
<HTML>
<HEAD>
<script type="text/javascript">
window.open('page2.html', 'TestWindow',
'width=500,height=200,resizable=yes');
</script>
</HEAD>
</HTML>
<!--page2.html-->
<HTML>
<HEAD>
<script type="text/javascript">
document.write('URL окна предка будет : '+window.opener.location);
</script>
</HEAD>
</HTML>
Отметим,
что это работает, только если
URL открываемого
окна находится на том же сервере, что и текущая
страница. Если необходимо открыть, например,
окно на http://www.webreference.com, то мы не
получим доступ к свойствам этого окна. Это
поддерживается всеми основными браузерами по
соображениям безопасности.
Объект Document (window.document)
Одной из
наиболее часто используемых функций в
JavaScript
является document.write.
Можно сказать, что
document.write получает строку и выводит
ее на странице. Здесь необходимо только следить
за одной вещью. Если страница полностью
загрузилась и вызывается
document.write, то вся страница будет
очищена и на экране будет только результат
работы document.write.
Мы уже
видели различные свойства объекта
document в
действии. Например,
document.forms возвращает массив всех
форм на странице. Здесь также существует
несколько свойств, подобных этому.
-
document.forms
- массив, содержащий все формы на текущей
странице;
-
document.images
- массив, содержащий все изображения на
текущей странице;
-
document.links
- массив, содержащий все ссылки на текущей
странице;
-
document.anchors
- массив, содержащий все анкеры на текущей
странице;
-
document.applets
- массив, содержащий все апплеты на текущей
странице;
-
document.styleSheets
- массив, содержащий все таблицы стилей на
текущей странице;
-
window.frames
- массив, содержащий все фреймы на текущей
странице.
Как мы
видели в предыдущей лекции, почти все эти
свойства можно продублировать с помощью
document.getElementsByTagName. Чтобы
получить все изображения на странице, можно
воспользоваться, например,
document.getElementsByTagName('IMG');.
Существует три подобные функции:
-
document.getElementById - возвращает
один элемент на основе его
ID;
-
document.getElementsByName -
возвращает массив элементов, определенных по
имени. В отличие от
ID многие элементы могут иметь на
странице одинаковые имена;
-
document.getElementsByTagName -
возвращает массив элементов, определенных по
имени тега. Имя тега является просто именем
тега HTML, т.е.
'DIV',
'IMG',
'TABLE',
'A 'и т.д.
Существует
еще одно свойство,
document.all, которое выдает массив всех
элементов на странице. Однако
document.all
поддерживается не всеми браузерами, поэтому
предполагается, что вместо этого используется
функция
document.getElementsByTagName('*'),
которая также вернет все элементы на странице.
document.body и
document.documentElement
document.body
ссылается на тег <BODY>,
где должен предположительно находится весь
контент. Весь DOM
сайта вложен в
document.body. Кроме этого, необходимо
использовать
document.body для определения, что
документ был прокручен, и для получения размера
окна. К сожалению, это является одной из
наиболее сложных вещей, применяемых сегодня в
Web-браузерах.
Существует
концепция, называемая "Тип документа", которая
задает для Web-браузера определенный набор
правил. Изменение типа документа заставляет
некоторые свойства переместиться из
document.body в
document.documentElement,
но только некоторые свойства и только для
некоторых браузеров.
Проще
говоря, это является полным беспорядком, поэтому
две следующие функции (будем надеятся) выдадут
позицию прокручивания и размеры окна независимо
от браузера.
function
getScrollPos(){
if (window.pageYOffset){
return {y:window.pageYOffset, x:window.pageXOffset};
}
if(document.documentElement && document.documentElement.scrollTop){
return {y:document.documentElement.scrollTop,
x:document.documentElement.scrollLeft};
}
if(document.body){
return {y:document.body.scrollTop, x:document.body.scrollLeft};
}
return {x:0, y:0};
}
function getWindowDims(){
if (window.innerWidth){
return {w:window.innerWidth, h:window.innerHeight};
}
if (document.documentElement && document.documentElement.clientWidth){
return {w:document.documentElement.clientWidth,
h:document.documentElement.cliendHeight};
}
if (document.body){
return {w:document.body.clientWidth,
h:document.body.clientHeight};
}
return {w:0, h:0}
}
title, referer
Тремя
последними свойствами документа являются
title,
referer и
cookies.
document.title и
document.referer
достаточно понятны.
document.title содержит заголовок
страницы. Его можно прочитать и изменить после
полной загрузки документа.
document.referer
содержит просто URL
страницы, которая привела пользователя на
текущую страницу.
Поэтому,
если вы щелкнули на ссылке, чтобы попасть на эту
страницу, то
document.referer будет содержать
URL страницы, на
которой находится ссылка. Если вы пришли на эту
страницу сразу, задавая ее в поле адреса
браузера, то
document.referer будет неопределен.
Сookie
Последняя
тема этой лекции, переменная
cookie, отличается
от всего остального в
JavaScript. cookie
является строкой текста, которую можно сохранить
с одной страницы на другой, если вы находитесь
на одном и том же сервере. В отличие от других
переменных в JavaScript,
cookie не
стирается при перезагрузке страницы.
cookie стираются
только через определенный период времени или
когда все cookie
удаляются в браузере.
cookie читают и
записывают через
document.cookie. В отличие от других
свойств изменение
document.cookie в действительности не
перезаписывает, а добавляет к
cookie. Поэтому,
если требуется задать 5
cookie, то каждое
из них задается с помощью
document.cookie= "...";. Формат
cookie имеет свои
особенности, поэтому мы рассмотрим несколько
функций для выполнения этой задачи:
function
writeCookie(name, value, days){
if(days){
(time = new Date()).setTime(new Date().getTime()+days*24*60*60*1000);
var exp = '; expires='+time.toGMTString();
}else{
var exp='';
}
document.cookie=name+"="+value+exp+"; path=/";
}
function readCookie(name){
var cookies = document.cookie.split(';');
for(var i=0; i<cookies.length; i++){
var cookie=cookies[i].replace(/^\s+/, '');
if (cookie.indexOf(name+'=')==0) return
cookie.substring(name.length+1);
}
return null;
}
function eraseCookie(name){
writeCookie(name, "", -1);
}
Три эти
функции выполняют запись, чтение и стирание
cookie на текущей
странице. Их можно протестировать с помощью
следующего кода:
function addToCounter(){
var counter = readCookie('myCounter');
if(counter){
counter = parseInt(counter);
} else {
counter = 0;
}
writeCookie('myCounter', counter+1, 1);
}
function showCounter(){
alert(readCookie('myCounter'));
}
Если
увеличить счетчик cookie
несколько раз, обновить страницу, а затем
проверить счетчик, то можно увидеть, что он
остался таким же, как был до обновления страницы.
Эти cookie будут
сохранятся до тех пор, пока они не будут удалены
из браузера или пока не пройдет 24 часа -
cookie заданы на
период одни сутки.
Это почти
все об объектах окна и документа. В следующей
лекции речь пойдет об объектно-ориентированном
коде.
|
Посмотреть
порно видео в онлайне »