HTML5: основы клиентской разработки

JavaScript. Объекты

Показывать лекцию целиком

Мы не ставим себе целью вместить базовый курс объектно-ориентированного программирования в рамки одной лишь только лекции. Настоящая лекция является своего рода справочником основ работы с объектами в JavaScript и полезна в большей степени будет тем, кто владеет базовыми знаниями.

Понятие объекта

Одной из первых фраз, которую вспоминают при обсуждении объектно-ориентированного языка программирования, является "Всё является объектом". Т.е. любая сущность в адресном пространстве является объектом.

В Javascript все объекты выстроены в строгой иерархии, в вершине которой стоит объект Window.

Итак, первый и самый главный вопрос – как создать объект?

Существует несколько способов создания простого объекта и установки его свойств:

var newObj = new Object();
newObj.test = "test string";
newObj.showMsg = function () {
  alert(Alert Message);
}

Также может быть использована сокращенная форма записи:

var newObj = {
  test: "test string",
  showMsg: function () {
    alert(Alert Message);
  }
}

В JavaScript нет понятия класса как такового, и в отличие от классических объектно-ориентированных языков, происходит наследование не классов, а объектов - одни объекты порождают другие.

Встроенные объекты

Встроенные объекты JavaScript доступны в любом месте скрипта и в любой ситуации. К их числу относятся:

ОбъектОписание
StringСодержит методы и свойства для работы со строками (изменение строки в целом, изменение отдельных символов, представления строки и т.д.)
ArrayИспользуется для хранения и управления наборами формализованных данных.
MathСодержит все основные математические константы, а так же предоставляет методы для выполнения типовых математических операций (округление, тригонометрические функции и т.д)
DateПредоставляет свойства и методы для работы с датами и временем.
NumberСодержит базовые константы и методы работы с числовыми данными.
BooleanОбъект-оболочка для простых логических типов данных и операций над ними.
FunctionОбъект представляет собой строку, которая при выполнении компилируется в функцию.
ObjectОбъект-родитель всех объектов JavaScript. Содержит все базовые методы, имеющиеся в любом объекте (например, toString()). Обычно этот объект в явном виде не используется.

Объектная модель документа

Объектная модель документа не является частью языка JavaScript. Строго говоря, DOM ( Document Object Model ) – это интерфейс прикладного программирования для представления документа (например, документа HTML , а также иных) и обеспечения доступа к его элементам и интерактивного изменения их свойств. DOM предоставляет механизмы для изменения самой структуры документа (добавление и удаление элементов, изменение их содержимого).

Для понимания объектной модели документов важно осознавать, что логическая древовидная структура представления документа никак не связана с реализацией этой модели именно в виде древовидной структуры. Рекомендации не регламентируют способ реализации модели, она может быть произвольной. Основное - это принцип структурного изоморфизма: две реализации объектной модели документа, используемые для представления одного и того же документа, создадут одну и ту же структурную модель с одинаковыми объектами и их связями.

Другой важный аспект модели DOM - она оперирует с объектами в полном соответствии с традиционными объектно-ориентированными технологиями: все элементы документа представляются в виде объектов. В узлах структурной логической схемы находятся объекты, а не данные, со всеми присущими объектам свойствами и поведением.

Объектная модель документов, таким образом, как объектная модель, определяет:

  • интерфейсы и объекты, используемые для представления документа и манипулирования с ним;
  • семантику (смысл) этих интерфейсов и объектов, включая и поведение, и атрибуты;
  • "родственные" связи и взаимодействие между этими интерфейсами и объектами.
  • Объектная модель документа представляется узлами (node), расположенными в виде иерархической структуры дерева. Концепция объектной модели не привязана ни к какому конкретному представлению документа (HTML, XML, SGML). Она всего лишь описывает логическую организацию документа. Ее реализация в конкретной системе представления документов ставит в соответствие узлам реальные элементы. В объектной модели документа, реализованной для HTML, в узлах могут находиться любые элементы HTML или текст, называемые узловыми элементами.

    Объекты, предоставляемые Web-обозревателем, делятся на две группы:

  • Объекты, представляющие Web-страницу и элементы, созданные с помощью разных тегов (абзац, заголовок, таблица, изображение и др.);
  • Отдельный элемент Web-страницы, независимо от тега, с помощью которого он создан, представляется объектом HTMLElement. На этом объекте основаны другие объекты, представляющие элементы Web-страницы, которые созданы на основе определенных тегов. Так, абзац представляется объектом HTMLParagraphElement, изображение — объектом HTMLImageElement, гиперссылка — объектом HTMLLinkElement, а таблица — объектом HTMLTableElement.
  • Объект HTMLDocument является корнем иерархии HTML, в котором хранится все содержимое. Помимо предоставления доступа к иерархии он также предлагает несколько методов, которые позволяют выбирать из документа определенные наборы данных. Свойства и методы объекта HTMLDocument перечислены в табл. 13.2 :

    Свойства HTMLDocument
    anchorsСписок содержащихся в документе привязок.
    appletsСписок содержащихся в документе аплетов.
    cookieCookie-файл, соответствующий данному документу.
    bodyТекст тела данного документа.
    domainДомен, с которого был загружен данный документ.
    formsСписок содержащихся в документе форм.
    imagesСписок содержащихся в документе изображений.
    linksСписок содержащихся в документе внешних ссылок.
    referrerURL документа, из которого был загружен данный документ (по ссылке).
    titleЗаголовок данного HTML-документа.
    urlПолностью определенный URL-адрес данного документа.
    Методы HTMLDocument
    close()Закрывает поток документа.
    getElementsByName()Возвращает список NodeList всех элементов с указанным именем.
    open()Открывает поток документа для записи.
    write()Записывает в открытый поток документа.
    writeln()Записывает в открытый поток документа.

    Объекты, представляющие сам Web-обозреватель.

    Объект window представляет текущее окно Web-обозревателя или отдельный фрейм, если окно разделено на фреймы. Следующая таблица описывает свойства данного объекта:

    СвойствоОписание
    closedВозвращает true, если текущее окно закрыто. Может быть использовано при работе с несколькими окнами.
    defaultStatusСообщение по умолчанию, отображаемое в строке состояния окна.
    documentВозвращает ссылку на документ, загруженный в текущее окно.
    framesВозвращает ссылку на коллекцию фреймов.
    historyВозвращает ссылку на объект истории Web-обозревателя.
    innerHeightВозвращает высоту клиентской области окна (без рамок, меню, панелей инструментов) в пикселах. Поддерживается только NN начиная с 4.0
    innerWidthВозвращает ширину клиентской области окна (без рамок, меню, панелей инструментов) в пикселах. Поддерживается только NN начиная с 4.0
    lengthВозвращает количество фреймов.
    locationВозвращает ссылку на объект location документа, загруженного в текущее окно.
    locationbarВозвращает ссылку на объект панели адреса окна Navigator (она же Location Toolbar). Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.
    menubarВозвращает ссылку на объект панели адреса окна Navigator. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает панель адреса, false убирает.
    nameВозвращает имя окна или фрейма.
    navigatorВозвращает ссылку на объект Web-обозревателя.
    openerВозвращает ссылку на окно, которое открыло текущее окно, например, методом open.
    outerHeightВозвращает полную высоту окна (с рамками, меню, панелями инструментов) в пикселях.
    outerWidthВозвращает полную ширину окна (с рамками, меню, панелями инструментов) в пикселях.
    pageXOffsetВозвращает расстояние по горизонтали между текущей позицией окна и левой границей документа. При прокручивании содержимого окна право значение этого свойства увеличивается, влево - уменьшается.
    pageYOffsetВозвращает расстояние по вертикали между текущей позицией окна и нижней границей документа. При прокручивании содержимого окна вниз значение этого свойства увеличивается, вверх - уменьшается.
    parentВозвращает ссылку на родительское окно, если текущий объект window представляет собой фреймы. В противном случае возвращается ссылка на само это окно.
    personalbarВозвращает ссылку на объект панели Personal Bar окна Navigator. Единственное свойство этого объекта visible позволяет показать ее или убрать; значение true этого объекта показывает панель адреса, false убирает.
    screenВозвращает ссылку на объект screen.
    screenLeftВозвращает горизонтальную координату левого верхнего угла окна.
    screenTopВозвращает вертикальную координату левого верхнего угла окна.
    screenXГоризонтальная координата левого верхнего угла окна.
    screenYВертикальная координата левого верхнего угла окна.
    scrollbarsВозвращает ссылку на объект полос прокрутки окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает полосу прокрутки, false убирает.
    selfВозвращает ссылку на объект window текущего окна.
    statusТекст, отображаемый в строке состояния окна Web-обозревателя.
    statusbarВозвращает ссылку на объект строки состояния окна NN. Единственное свойство этого объекта visible позволит показать ее или убрать; значение true этого свойства показывает строку состояния, false убирает.
    toolbarВозвращает ссылку на объект панели инструментов окна NN. Единственное свойство этого объекта visible позволит показать полосу или убрать; значение true этого свойства показывает панель инструментов, false убирает.
    topВозвращает ссылку на родительское окно самого верхнего уровня, если текущий объект window представляет собой фрейм. В противном случае возвращается ссылка на само это окно.
    windowТо же, что и self.

    Методы и свойства экземпляров объекта

    JavaScript позволяет создавать у экземпляра объекта сколько угодно свойств и методов, которые будут принадлежать только ему. Другие экземпляры того же объекта эти свойства и методы не получат:

    var dNow = new Date(); 
    dNow.someProperty = 3;
    

    Здесь мы создали у экземпляра объекта Date, хранящегося в переменной dNow, свойство someProperty и присвоили ему значение 3. Данное свойство будет принадлежать только этому экземпляру объекта Date.

    Такие свойства и методы, принадлежащие только одному экземпляру объекта, называются свойствами и методами экземпляра.

    Ключевые термины и определения

    Объект JavaScript – любая сущность в рамках программы (не путать с object, представляющим собой ассоциативный массив).

    Встроенные объекты JavaScript – объекты, созданные для упрощения работы с данными и системой средствами JavaScript.

    Свойство экземпляра - свойство экземпляра объекта, доступный только ему, т.е. не наследуемое.

    Метод экземпляра – метод экземпляра объекта, доступный только ему, т.е. не наследуемый.

    Краткие итоги

    Данной лекцией мы заканчиваем наше знакомство с JavaScript. Разумеется, нами были рассмотрены только основы основ, необходимые для понимания дальнейших практических занятий. Для более подробного и детального изучения JavaScript рекомендуется обратиться к соответствующим специализированным курсам.

    Список материалов для самостоятельного изучения

  • http://javascript.ru/tutorial/object
  • http://www.wisdomweb.ru/JS/objectcr.php
  • http://habrahabr.ru/post/17613/
  • http://on-line-teaching.com/js/js.lang.objects.htm
  • http://www.firststeps.ru/html/js/r.php?11
  • http://javascript.ru/forum/misc/18366-svojjstva-metody-klassa.html
  • http://js-help.net/text/object/oo-js/property_of_class.php
  • Вернуться к учебному плану