Книга: HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов

Объекты Web-обозревателя

Объекты Web-обозревателя

Как видим, библиотека Ext Core позволяет сделать очень многое, написав несколько строчек JavaScript-кода. Если бы мы пользовались для этого исключительно объектами Web-обозревателя, объем кода вырос бы на порядок — не меньше.

Но с помощью Ext Core мы можем сделать не все. Некоторые вещи доступны только через объекты Web-обозревателя.

Один из таких объектов — HTMLDocument, представляющий Web-страницу. Единственный его экземпляр, представляющий текущую Web-страницу, доступен через переменную document. Это мы уже знаем.

Из всех свойств объекта HTMLDocument интерес для нас представляют немногие. Его методы и события нам вряд ли пригодятся.

Свойство title хранит текст заголовка Web-страницы (содержимое тега <TITLE>) в виде строки. Заголовок, как мы помним из главы 1, выводится в строке заголовка окна Web-обозревателя, в котором открыта данная Web-страница.

Пример:

var sTitle = document.title;

В переменной sTitle окажется строка с текстом заголовка Web-страницы. А в следующем примере мы задаем для Web-страницы новый заголовок: document.title = "Заголовок";

Свойство location хранит экземпляр объекта Location, представляющий интернет-адрес Web-страницы. Нам будет полезно только свойство href, хранящее интернет-адрес Web-страницы в виде строки:

var sHREF = document.location.href;

В переменной sHREF окажется строка с интернет-адресом Web-страницы. Пример:

document.location.href = "http://www.w3.org";

Здесь мы переходим на Web-страницу http://www.w3.org. Да-да, с помощью свойства href объекта Location мы можем заставить Web-обозреватель открыть другую Web-страницу, присвоив этому свойству ее интернет-адрес!

Объект Window представляет окно Web-обозревателя. Единственный экземпляр этого объекта, представляющий текущее окно Web-обозревателя, хранится в переменной window. Это мы тоже знаем.

Рассмотрим полезные для нас методы и события объекта Window.

Метод alert выводит на экран окно-предупреждение с указанным текстом и кнопкой ОK. Такие окна-предупреждения выводят посетителю сообщение, которое он обязательно должен прочитать:

window.alert(<текст, выводимый в окне-предупреждении>)

Единственный передаваемый параметр — строка с текстом, который будет выведен в окне-предупреждении:

window.alert("Привет от объекта Window!");

Метод confirm выводит на экран окно-предупреждение с указанным текстом и кнопками ОK и Отмена. Такие окна-предупреждения обычно используются, чтобы запросить у посетителя подтверждение или отмену какого-либо действия:

window.confirm(<текст, выводимый в окне-предупреждении>)

Единственный передаваемый параметр — строка с текстом, который будет выведен в окне-предупреждении.

Метод confirm возвращает true, если посетитель нажал кнопку ОK, и false, если он нажал кнопку Отмена.

Событие resize возникает, когда посетитель изменяет размеры окна Web-обозревателя.

Пример:

Ext.fly(window). on(function()

{

// Что-то делаем

}

Здесь показано, как рекомендуется привязывать обработчик к событию resize окна Web-обозревателя (это справедливо и для других событий окна).

Объект HTMLElement, как мы уже знаем, представляет элемент Web-страницы. Рассмотрим некоторые его свойства.

Свойство textContent хранит текстовое содержимое элемента Web-страницы в виде строки. Если элемент не имеет текстового содержимого, оно хранит значение null.

Пример:

var htelCHeader = Ext.getDom("cheader");

var s = htelCHeader.textContent; htelCHeader.textContent = "!" + s +"!";

Здесь мы получаем текстовое содержимое контейнера cheader, добавляем к нему слева и справа восклицательные знаки и снова помещаем его в контейнер cheader.

Свойство innerHTML хранит HTML-код содержимого данного элемента Web-страницы в виде строки.

Пример:

var htelCHeader = Ext.getDom("cheader");

var s = htelCHeader.textContent; htelCHeader.innerHTML = "<EM>" + s + "</EM>";

Объектам Web-обозревателя впору посвящать отдельную книгу — настолько это объемная тема. Мы рассмотрели только несколько инструментов, которые предоставляют они и которые не найти в библиотеке Ext Core. Впоследствии мы еще вернемся к объектам Web-обозревателя, но это будет нескоро.

Что дальше?

Эта глава почти полностью была посвящена библиотеке Ext Core — инструменту, значительно упрощающему работу Web-программиста. Мы рассмотрели несколько объектов этой библиотеки и такое количество их методов, что просто голова кругом.

В следующей главе мы применим полученные знания на практике. О, это будет интересно и поучительно!

Оглавление книги