Владимир Дронов - HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов
Все объекты, доступные в Web-сценариях, можно разделить на три разновидности:
— предоставляемые самим языком JavaScript (встроенные объекты);
— предоставляемые Web-обозревателем (объекты Web-обозревателя);
— созданные нами или сторонним разработчиком на самом JavaScript (пользовательские объекты). В частности, популярные JavaScript-библиотеки, такие как Ext Core, создают множество пользовательских объектов.
С точки зрения Web-программиста все эти объекты одинаковы. И работа ними и их экземплярами выполняется сходным образом.
Получение экземпляра объекта
Но как нам получить экземпляр нужного объекта?
— Экземпляры многих объектов создаются самим языком JavaScript, Web-обозревателем или библиотеками сторонних разработчиков.
— Экземпляры некоторых объектов возвращаются функциями или методами других объектов.
— Мы можем создать экземпляр объекта сами, написав соответствующее выражение.
Давайте рассмотрим все эти случаи подробно.
Прежде всего, сам язык JavaScript предоставляет нам несколько экземпляров различных объектов. Они хранятся в особых переменных, также создаваемых самим языком.
ВНИМАНИЕ!
Вообще-то, в переменных хранятся ссылки на экземпляры объектов. Просто раньше мы договорились, что будем считать, будто в переменных хранятся сами экземпляры объектов, — так проще.
Так, переменная Math хранит экземпляр одноименного объекта, поддерживающего множество методов для выполнения математических и тригонометрических вычислений над числами:
var a = Math.sqrt(2);
Это выражение поместит в переменную a квадратный корень из 2. Метод sqrt объекта Math как раз вычисляет квадратный корень из числа, переданного ему в качестве единственного параметра.
А метод sin объекта Math вычисляет синус угла, заданного в радианах и переданного данному методу единственным параметром:
var b = Math.sin(0.1);
Как видим, мы просто используем переменную Math, созданную языком JavaScript, чтобы получить доступ к экземпляру объекта Math и его методам.
Web-обозреватель также предоставляет множество экземпляров объектов, представляющих текущую Web-страницу, различные ее элементы и сам Web- обозреватель. Так, Web-страницу представляет экземпляр объекта HTMLDocument, который хранится в переменной document, также созданной Web-обозревателем.
В частности, объект HTMLDocument поддерживает метод write, выводящий переданную ему в качестве единственного параметра строку в то место Web-страницы, где встретился вызов этого метода:
document.write("Привет, посетитель!");
И в этом случае мы просто используем переменную document, созданную Web- обозревателем, чтобы получить доступ к экземпляру объекта HTMLDocument и его методу write.
Сторонние библиотеки также создают множество экземпляров объектов сами. Так, библиотека Ext Core создает экземпляр объекта Ext, хранящийся в одноименной переменной:
var ceLinks = Ext.select("UL[id=navbar] > LI");
Здесь мы обратились к методу select объекта Ext. Данный метод возвращает массив экземпляров объектов Element, каждый из которых представляет элемент Web-страницы, удовлетворяющий переданному ему в качестве единственного параметра специальному селектору CSS. (Кстати, объект Element также определен библиотекой Ext Core.)
Идем далее. Ранее было сказано, что экземпляр объекта можно получить в качестве результата выполнения функции или метода. Вот типичный пример:
var elNavbar = Ext.get("navbar");
Метод get объекта Ext, созданного библиотекой Ext Core, возвращает экземпляр объекта Element, представляющий определенный элемент Web-страницы. В данном случае это будет элемент, значение атрибута тега ID которого равно "navbar" — именно такую строку мы передали методу get в качестве параметра.
Здесь мы также получили готовый экземпляр объекта, с которым сразу можем начать работу.
И, наконец, с помощью оператора создания экземпляра new мы можем создать экземпляр нужного нам объекта сами, явно:
new <имя объекта>([<список параметров, разделенных запятыми>])
Оператор new возвращает созданный экземпляр объекта. Его можно присвоить какой-либо переменной или свойству или передать в качестве параметра функции или методу.
Список параметров может как присутствовать, так и отсутствовать. Обычно он содержит значения, которые присваиваются свойствам экземпляра объекта при его создании.
Язык JavaScript предоставляет нам объект Date, хранящий значение даты и времени. Его экземпляры можно создать только явно, оператором new:
var dNow = new Date();
После выполнения этого выражения в переменной dNow окажется экземпляр объекта Date, хранящий сегодняшнюю дату и текущее время.
А вот выражение, которое поместит в переменную dNewYear экземпляр объекта
Date, хранящий дату 31 декабря 2009 года и текущее время:
var dNewYear = new Date(2009, 12, 31);
Но какой способ получения экземпляра объекта в каком случае применять? Выбор зависит от объекта, экземпляр которого мы хотим получить.
— Экземпляры объектов Web-обозревателя, представляющие Web-страницу и сам Web-обозреватель, доступны через соответствующие переменные.
— Экземпляры объектов Web-обозревателя, представляющие различные элементы Web-страницы, получаются в результате выполнения особой функции или метода.
— Экземпляры всех объектов языка JavaScript, кроме Math, получаются явным созданием с помощью оператора new.
— Экземпляр объекта Math языка JavaScript доступен через одноименную переменную.
Это самые общие правила. А конкретные приемы получения нужного экземпляра объекта мы рассмотрим потом, когда начнем заниматься Web-программированием вплотную.
Работа с экземпляром объекта
Получив тем или иным способом экземпляр объекта, мы можем с ним работать: вызывать его методы и получать доступ к его свойствам.
Ранее мы уже познакомились с методами различных объектов и выяснили, как они вызываются. Для этого к переменной, хранящей экземпляр объекта, добавляется справа точка, а после нее записывается вызов метода. Метод — суть "собственная" функция объекта, и вызывается она так же (см. раздел, посвященный вызовам функций).
Пример:
var elNavbar = Ext.get("navbar");
Здесь мы вызвали метод get объекта Ext, экземпляр которого хранится в переменной Ext, передав данному методу параметр — строку "navbar". Как мы уже знаем, метод get ищет на Web-странице элемент, имеющий значение атрибута тега ID, которое совпадает с переданной ему в качестве параметра строкой. Возвращенный этим методом результат — экземпляр объекта Element, представляющего список navbar, — будет присвоен переменной elNavbar.
Пример:
var elParent = elNavbar.parent();
А здесь мы вызвали метод parent у экземпляра объекта Element, хранящегося в переменной elNavbar и полученного в предыдущем выражении. Возвращенный этим методом результат — экземпляр объекта Element, представляющего элемент Web- страницы, который является родителем списка navbar, — будет присвоен переменной elParent.
Если результат, возвращаемый каким-либо методом (назовем его методом 1), представляет собой объект, мы можем сразу вызвать метод у него (это будет метод 2). Для этого мы добавим справа от вызова метода 1 точку, после которой поставим вызов метода 2.
Пример:
elNavbar.parent(). addClass("hovered");
Здесь мы сначала вызвали метод parent у экземпляра объекта Element, хранящегося в переменной elNavbar (метод 1). У полученного в результате вызова метода 1 результата — экземпляра объекта Element, представляющего элемент-родитель, — мы вызвали метод addClass (метод 2).
Такие цепочки последовательных вызовов методов, когда стоящий справа метод
вызывается у экземпляра, возвращенного методом, стоящим слева, встречаются в JavaScript-коде очень часто.
Доступ к свойствам объекта выполняется аналогично. К переменной, хранящей экземпляр объекта, добавляется справа точка, а после нее записывается имя свойства.
Пример:
var sID = elParent.id;
В данном примере мы обратились к свойству id объекта Element, экземпляр которого хранится в переменной elParent. Это свойство хранит значение атрибута тега ID у соответствующего элемента Web-страницы.
Пример:
Ext.enableFx = false;
Здесь мы присвоили новое значение свойству enableFx объекта Ext, экземпляр которого хранится в переменной Ext.
Пример:
var sID = elNavbar.parent(). id;
А здесь мы сначала получили родитель элемента Web-страницы, хранящегося в переменной elNavbar, после чего извлекли значение атрибута тега ID уже у полученного родителя.
Что ж, с объектами и их экземплярами, свойствами и методами мы познакомились. Теперь давайте кратко "пробежимся" по объектам, которые будем использовать при написании Web-сценариев. Рассмотрим только встроенные объекты JavaScript и объекты Web-обозревателя; пользовательским объектам, создаваемым библиотекой Ext Core, будет полностью посвящена глава 15.
