Томский политехнический университет
Опубликован: 01.08.2012 | Доступ: свободный | Студентов: 17120 / 1588 | Оценка: 3.91 / 4.09 | Длительность: 12:36:00
Лекция 14:

JavaScript. Объекты

< Лекция 13 || Лекция 14: 12 || Лекция 15 >
Аннотация: Понятие объекта в JavaScript. Встроенные объекты JavaScript. Объектная модель документа (DOM). Объекты, представляющие веб – обозреватель. Методы и свойства экземпляров объектов.

Мы не ставим себе целью вместить базовый курс объектно-ориентированного программирования в рамки одной лишь только лекции. Настоящая лекция является своего рода справочником основ работы с объектами в 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 доступны в любом месте скрипта и в любой ситуации. К их числу относятся:

Таблица 13.1.
Объект Описание
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-обозревателем, делятся на две группы:

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

Объект HTMLDocument является корнем иерархии HTML, в котором хранится все содержимое. Помимо предоставления доступа к иерархии он также предлагает несколько методов, которые позволяют выбирать из документа определенные наборы данных. Свойства и методы объекта HTMLDocument перечислены в табл. 13.2 :

Таблица 13.2.
Свойства HTMLDocument
anchors Список содержащихся в документе привязок.
applets Список содержащихся в документе аплетов.
cookie Cookie-файл, соответствующий данному документу.
body Текст тела данного документа.
domain Домен, с которого был загружен данный документ.
forms Список содержащихся в документе форм.
images Список содержащихся в документе изображений.
links Список содержащихся в документе внешних ссылок.
referrer URL документа, из которого был загружен данный документ (по ссылке).
title Заголовок данного HTML-документа.
url Полностью определенный URL-адрес данного документа.
Методы HTMLDocument
close() Закрывает поток документа.
getElementsByName() Возвращает список NodeList всех элементов с указанным именем.
open() Открывает поток документа для записи.
write() Записывает в открытый поток документа.
writeln() Записывает в открытый поток документа.
< Лекция 13 || Лекция 14: 12 || Лекция 15 >
Эмиль Галеев
Эмиль Галеев

По каким то причинам не сохраняется текст. И не выдает сообщение об ошибке если текста нет. Проверил все внимательно проблем в написании нет. Вопрос почему он не сохраняет?

Алексей Вычегжанин
Алексей Вычегжанин

http://www.intuit.ru/studies/courses/3734/976/lecture/27486?page=3

Заполнил html, js и css-файлы согласно рекомендациям. После запуска главной страницы в панели разработчика браузера, во вкл. Console, выдает сообщение об ошибке:

"script.js:85 Uncaught TypeError: Cannot read property 'addEventListener' of null"

, ссылаясь на строку js-файла (функция load()):

" audio.addEventListener('ended', function () "

При дальнейшем просмотре результатов доступны только функции просмотра треков по выбранному альбому и предварительного прослушивания трека. 

Функция добавления записей в плейлист не работает. Соответственно сам плей-лист и полоса прокрутки не открываются.

Евгений Снегиренко
Евгений Снегиренко
Россия, г. Кемерово
Дмитрий Фонин
Дмитрий Фонин
Россия