§18. Объекты window, document. Стандартный набор свойств и методов всех элементов.
Объект window.
Как вы уже могли догадаться в JavaScript все элементы, видимые и не видимые, олицетворяются объектами. Окно браузера в свою очередь тоже представлено в виде объекта с именем window. Объявлять его явно нет необходимости, т.к. по умолчанию работа ведётся именно с ним так, как будто мы находимся внутри следующего блока кода:
with (window){
}
У данного объекта есть ряд свойств и методов, представленных далее в таблице:
Свойство/метод | Описание |
document | Объект, олицетворяющий открытый в окне документ. |
frames[] | Массив объектов таких же как window, олицетворяющих фреймы, если они есть в документе. |
Name | Имя окна браузера, атрибут name тэга frame. |
location | URL адрес документа загруженного в окно. Изменение этого свойства приводит к перезагрузке документа. |
Размеры окна браузера. | |
innerHeight | Высота и ширина окна браузера без меню, рамки и т.п. Только для чтения. |
innerWidth | |
outerHeight | Высота и ширина окна браузера вместе с меню, рамкой и т.п. Только для чтения |
outerWidth | |
Справочная информация. | |
Navigator | Информация о версии и конфигурации веб-браузера. |
Screen | Информация об экране пользователя. |
Прокручивание окна. | |
pageXOffset | Координаты x и y, соответственно, на которые прокручено окно браузера. |
pageYOffset | |
scrollTo(x,y) | Прокручивает окно на позицию x,y в пикселях. |
scrollBy(dx,dy) | Прокручивает окно на относительную позицию. |
Диалоговые окна. | |
alert(str) | Вызов окна с сообщением str. Как правило, оно выводит сообщение об ошибке. |
confirm(str) | Выводит окно с вопросом str. Возвращает true, если нажата кнопка OK и false если нажата Отмена. |
promt(str,default) | Выводит диалоговое окно, которое позволяет ввести сообщение. str - сообщение, default - строка по умолчанию в поле для ввода. Возвращает введённую пользователем строку. |
Таймер и интервал. code - функция, либо строка JavaScript кода. ms - время в миллисекундах. | |
setInterval(code,ms) | Выполняет код code через определённые промежутки времени ms (интервалы). Возвращает интервал. |
clearIntrval(intId) | Удаляет интервал intId. |
setTimeout(code,ms) | Выполняет один раз код code через время ms. Возвращает таймер. |
clearTimeout(timeId) | Удаляет таймер timeId. |
Обработчики событий. | |
onload | Вызывается после полной загрузки документа. |
onunload | Вызывается когда документ закрывается. |
onresize | Вызывается при изменении размеров окна |
Пример создания таймера и интервала.
Таймер позволяет один раз выполнить определённый код через определённый промежуток времени. Например, если вам необходимо вывести подсказку не сразу после попадания мышки на элемент, а через секунду, то вы как раз и воспользуетесь таймером.
Интервал, позволяет выполнять один и тот же код через определённые промежутки времени, интервалы. Он используется для создания анимации и других эффектов.
Далее пример, в котором текст мигает в течение 10 секунд:
<body>
<div id = "d">Привет всем!</div>
<script>
var b = true;
function blinking_message() {
if (b) {
d.style.color = 'red'; b = false
} else {
d.style.color = 'blue'; b = true
}
}
var IntervalId = setInterval(blinking_message,1000);
setTimeout('clearInterval(IntervalId)',10000);
</script>
</body>
Обратите особое внимание на вызов метода setTimeout. В качестве кода, который необходимо выполнить была отправлена строка.
Объект document.
Объект document содержит в себе html документ, открытый в окне браузера. Далее в таблице представлены некоторые его свойства и методы:
Свойство/метод | Описание |
domain | Имя домена с которого был загружен документ. |
referrer | URL адрес с которого был загружен документ. |
Доступ к элементам html документа. | |
all[] | Массив всех элементов документа. |
getElemetById(str) | Возвращает элемент с id равным str. |
getElemetsByTagName(str) | Возвращает массив элементов с тэгом str. |
getElemetsByName(str) | Возвращает массив элементов атрибуты name которых равны str. |
Добавление содержимого в документ. | |
write(str) | Добавляет строку str в документ. |
writeln(str) | То же самое, что и write, только добавляет символ конца строки. |
Пример использования методов getElemenById, getElementsByTagName и getElemensByName.
<body>
<input type = "button" value = "Кнопка_1">
<input type = "button" value = "Кнопка_2" name = "button_2">
<input type = "button" value = "Кнопка_3" id = "button_3">
<script>
var but_1 = document.getElementsByTagName('input');
var but_2 = document.getElementsByName('button_2');
var but_3 = document.getElementById('button_3');
but_1[0].onclick = function() {alert(but_1[0].value)};
but_2[0].onclick = function() {alert(but_2[0].value)};
but_3.onclick = function() {alert(but_3.value)};
window.onunload = function() {alert('Вышли из документа')};
</script>
Метод write.
Метод write уже вам хорошо знаком. Однако есть один нюанс, который вы должны знать. Если его вызвать после того, как страница уже полностью загружена, то это приведёт к не желаемому результату. Пример:
<body>
<div>!!!!!!!!!!!!!!</div>
<script>
function F() {document.write('Привет всем!');}
setTimeout(F,4000);
</script>
<div>Здравствуйте!</div>
</body>
После 4 секунд:
Стандартный набор свойств и методов всех элементов.
У всех объектов олицетворяющих элементы существует наюбор стандартных свойств и методов. Многими из них мы уже научились пользоваться. Далее в таблице представлены ещё некоторые:
Свойство/метод | Описание |
tagName | Содержит в виде строки тэг элемента |
Работа с атрибутами элемента. | |
className | Значение атрибута class. |
id | Значение атрибута id. |
style | Свойство для доступа к css свойствам элемента. Что бы получить значение атрибута style необходимо воспользоваться методом getAttribut(). |
tittle | Значение атрибута tittle. Всплывающая подсказка. |
getAttribute(str) | Возвращает значение атрибута str. |
hasAttribute(str) | Возвращает true, если атрибут str существует. |
removeAttribute(str) | Удаляет атрибут str. |
Доступ к дочерним элементам. | |
getElementsByTagName(str) | Возвращает массив дочерних элементов с тэгами str. |
Размеры и положение элемента. | |
offsetHeight | Высота и ширина элемента со всем его содержимым. Только для чтения. Может отличаться от атрибута width. |
offsetWidth | |
offsetLeft | Координаты левого верхнего угла элемента. |
offsetTop | |
Прокручивание элемента. | |
ScrollHeight | Высота и ширина элемента. Актуальны в том случае, если элемент имеет полосы прокрутки. |
scrollWidth | |
scrollLeft | Число пикселей, на которое был прокручен элемент. |
scrollTop | |
Содержимое элемента. | |
innerHTML | Содержимое элемента вместе со всеми тэгами. |
outerHTML | Содержимое элемента вместе со всеми тэгами, так же включая тэги открывающий и закрывающий самого элемента. |
innerText | Весь текст элемента без тэгов. |
Прокручивание документа до данного элемента. | |
scrollIntoView(b) | Прокручивает документ до данного элемента. Если b = true, то элемент оказывается вверху окна, если false, то внизу окна. |
По приведённым в таблице свойствам и методам необходимо сказать следующее:
Атрибут name не доступен как свойство. Поэтому для получения его значения необходимо воспользоваться методом getAttribute. Так же этот метод необходим, что бы получить значение атрибута style, т.к. в коде JavaScript свойство элемента style является объектом.
Далее пример, который демонстрирует вышесказанное, а так же разницу в свойствах innerHTML, outerHTML и innterText:
<body>
<div id = "d" style = "color:red;" name = "div_1">
<table border = "1">
<td id = "td_1">Привет!
</td>
</table>
Всем!
</div><br>
<script>
document.write('d.tagName = ',d.tagName,'<br>');
document.write('d.name = ',d.name,'<br>');
document.write("d.getAttribute('name') = ",d.getAttribute('name'),'<br>');
document.write("d.style = ",d.style,'<br>');
document.write("d.getAttribute('style') = ",d.getAttribute('style'),'<br>');
document.write('d.innerHTML = <xmp>',d.innerHTML,'</xmp><br>');
document.write('d.outerHTML = <xmp>',d.outerHTML,'</xmp><br>');
document.write('d.innerText = <xmp>',d.innerText,'</xmp><br>');
</script>
</body>
Задачи.
1. Создать свои примеры использования всех свойств и методов объекта window, document и element приведённых в данном параграфе.
2. Создать документ с бегущей строкой.
3. Создать документ с цифровыми часами.
4. Создать документ с онлайн секундомером.
5. Создать документ с кнопочками, позволяющими пролистывать документ.