Лаб 2 (1075651), страница 3

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

Текст из файла (страница 3)

В данном примере созданныйобъект имеет три свойства (area – тоже свойство, имеющее после созданияобъекта функциональный тип), причём любое из них может принять любоезначение. Это не соответствует концепции класса с постоянными методами.Для решения данной проблемы разработан механизм прототипов. Любойобъект имеет указатель на прототип. В момент создания объекта устанавливаетссылка на конструктор прототипа, которым является функция-конструктор,создавшая объект. Ссылка на прототип объекта указывает на свойство prototypeфункции-конструктора. Методы и свойства, добавленные прототипу будутдоступны любому объекту, созданному такой функцией-конструктором.Пример создания класса Circle:// Конструкторfunction Circle(radius) {// r – свойство экземпляра объекта, оно определяется// и инициализируется конструктором.this.r = radius;}// Circle.PI – свойство класса (общее для всех объектов), свойство конструктора.Circle.PI = 3.14159;// Метод для экземпляра, который рассчитывает площадь круга.// Аналог методов класса C++Circle.prototype.area = function( ) { return Circle.PI * this.r * this.r; }// Метод класса (аналог статических методов в C++)// принимает два объекта Circle и возвращает объект с большим радиусом.Circle.max = function(a,b) {if (a.r > b.r) return a;else return b;}// Примеры использования каждого из этих полей:var c = new Circle(1.0); // Создание экземпляра класса Circlec.r = 2.2; // Установка свойства экземпляра rvar a = c.area(); // Вызов метода экземпляра area()var x = Math.exp(Circle.PI); // Обращение к свойству PI классаvar d = new Circle(1.2); // Создание другого экземпляра класса Circlevar bigger = Circle.max(c,d); // Вызов метода класса max()14Document Object Model (DOM) и программирование вбраузереОбъектная модель документа DOM является программным интерфейсом длядоступа и манипулирования документом (документ в терминологииSGML/HTML/XML).

Координирующая роль в DOM принадлежит консорциумуW3C - http://www.w3.org/DOM/.Напомним, что HTML-страница является документом со строгой разметкой.Модель DOM позволяет получить доступ, как к элементам разметки, так исвойствам, позволяющими управлять браузером (получить доступ к текущемудокументу, открыть окно с новым документом, получить данные из другогодокумента), а также установить обработчики событий на определенныедействия мыши, клавиатуры, таймера и пр.

Отдельно обрабатываются формы.За прошедшие годы работы консорциума W3C выпустил следующиерекомендации группыThe Document Object Model Working Group: Document Object Model Level 1 Document Object Model Level 2 Core Document Object Model Level 2 Views Document Object Model Level 2 Events Document Object Model Level 2 Style Document Object Model Level 2 Traversal and Range Document Object Model Level 2 HTML Document Object Model Level 3 Core Document Object Model Level 3 Load and Save Document Object Model Level 3 Validation.Каждый следующий уровень (по номеру) заменяет предыдущий.

При этом,браузер обязан поддерживать все предыдущие для обеспечения совместимости.Основной принцип программирования с использованием JavaScriptзаключается в управлении свойствами браузера и манипулированииэлементами документа, согласно модели DOM.Базовый уровень функциональности документа обеспечивается объектами,поддерживаемыми даже самыми старыми браузерами.

Эта иерархия объектовпредставляет объектную модель документов уровня 0 (Document Object Modellevel0 - DOM0), которая исторически появилась до официальныхспецификаций W3C. Приведем схему из главы 13 из книги [1] см. рисунок 2.15Текущееокноself,window,parent, top,различныеобъектыWindowscreenобъектScreennavigatorобъектNavigatorlocationlобъектLocationhistoryобъектHistoryforms[]массивобъектовFormanchors[]массивобъектовAnchorlinks[]массивобъектовLinkimages[]массивобъектовImagedocumentобъектDocumentapplets[]массивобъектовAppletframes[]МассивобъектовWindowembeds[]массивобъектовEmbedelements[]массивобъектовэлементовHTML-форм:TextCheckBoxRadioSelectTextareaPasswordButtonResetSubmitHiddenFileUploadoptions[]массивобъектовOptionРисунок 2 Модель DOM 0.

Основные объекты.Применительно к клиентскому Javascript, основным объектом являетсяWindow, который ссылается на текущее окно браузера. Остальные объекты1,иерархия которых здесь представлена, являются свойствами корневого объектаWindow. Почти все эти объекты имеют много полезных свойств, с нимисвязаны события и методы, использование которых позволяет создаватьсценарии, обеспечивающие необходимую функциональность. Коротко отметимобъекты верхнего уровня иерархии.Объект Screen (свойство screen) позволяет прочитать разрешение клиентскогоэкрана и глубину цвета.

Определив разрешение экрана, можно предусмотретьразные варианты компоновки страницы, устанавливать размеры и положениеновых окон, открывающихся из сценария. Методы для этого объекта неопределены, но определен ряд свойств, среди которых: width – текущая ширина экрана в пикселах; height - текущая высота экрана в пикселах; availWidth - доступная ширина экрана в пикселах; availHeight - доступная высота экрана в пикселах.Объект Navigator (свойство navigator) предоставляет информацию о версиибраузера.Объект Location (свойство location) предоставляет доступ к URL документа,отображаемого в окне браузера.

Позволяет определить полный URL, а такжеего части: протокол, доменное имя и т.д. В отличие от двух предыдущихобъектов, его свойства доступны не только для чтения, но и для изменения. Тоесть, в зависимости от выполнения условий, определенных в сценарии, можно1См. http://vvz.nw.ru/Lessons/JavaScript/DOM0.htm16загрузить нужный документ как в текущее окно или его фрейм, так и в любоеиз окон, открытых из сценария. Этот объект имеет и два метода: reload() перезагружает указанный в качестве аргумента документ; replace() загружает указанный документ, который замещает текущий всписке истории просмотра.Объект History (свойство history) имеет единственное свойство length(количество просмотренных в данном сеансе документов), и три метода,позволяющих перемещаться по истории просмотра: back() - на один шаг назад по истории просмотра; forward() - на один шаг вперед по истории просмотра; go(n) - на n шагов по истории просмотра (если n >0, то вперед, если n <0,то назад).Объект Document (свойство document), его свойства и методы предоставляютнаиболее богатые возможности для разработчика.

Приведенная выше схемаиерархии объектов включает только основные свойства этого объекта,определенные в базовой объектной модели документа (Document Object ModelLevel 0 - DOM0). Эти свойства также поддерживаются современнымибраузерами в рамках более новых моделей DOM.Массив frames[] предоставляет доступ к документам, загруженным в фреймы.Следует отметить, что разные браузеры, поддерживая рассматриваемуюиерархию, предлагают и дополнительные свойства почти для каждого объекта.Однако использовать не рекомендуется использовать то, что незадекларировано в моделях DOM согласно спецификациям W3C, поскольку этопотенциально приведет к проблемам совместимости с браузерами.В качестве примера приведём фрагмент кода JavaScript из Wikipedia,позволяющий проверить заявленную поддержку различных расширений DOMв конкретном браузере.function domImplementationTest(){var featureArray = ['HTML', 'XML', 'Core', 'Views','StyleSheets', 'CSS', 'CSS2', 'Events','UIEvents', 'MouseEvents', 'HTMLEvents','MutationEvents', 'Range', 'Traversal'];var versionArray = ['1.0', '2.0', '3.0'];var i;var j;if(document.implementation && document.implementation.hasFeature){for(i=0; i < featureArray.length; i++){for(j=0; j < versionArray.length; j++){document.write('Поддержка расширения '+ featureArray[i] + ' версии ' +versionArray[j] + ' : ' +(document.implementation.hasFeature(featureArray[i],versionArray[j]) ?'<font style="color:green">true</font>' : '<fontstyle="color:red">false</font>') + '<br/>'17);}document.write('<br/>');}}}Документацию по DOM-моделям и использованию в JavaScript следуетсмотреть по ссылкам: http://www.w3.org/standards/techs/dom#w3c_all иhttps://developer.mozilla.org/en/DOM_Levels .Работа с документамиРабота с документами описывается в спецификациях DOM Core и являетсяосновой для динамического изменения отображаемых страниц.Приведем пример из 15-й главы [1] следующей разметки:<html><head><title>Sample Document</title></head><body><h1>An HTML Document</h1><p>This is a <i>simple</i> document.</body></html>В соответствии с DOM-моделью, эта страница будет представлена деревомузлов, изображенном на рисунке 3.Рисунок 3 Дерево разбора HTML.Каждый узел может иметь дочерние узлы.

Для доступа к этим узламсуществует интерфейс Node, который предоставляет свойства childNodes,firstChild, lastChild, nextSibling, previousSibling и parentNode, а также методы18appendChild(), removeChild(), replaceChild() и insertBefore(). Однако такжевозможно обратиться через свойство, имеющее имя узла. Напримерdocument.body.h1.Каждый элемент этого дерева (т.е. объект Node) имеет определенный тип,который хранится в свойстве nodeType. Для справки некоторые из нихприводятся в таблице 2.Таблица 2 Основные типы узловИнтерфейсElementTextDocumentCommentDocumentFragmentAttrКонстанта nodeTypeЗначениеnodeTypeNode.ELEMENT_NODE1Node.TEXT_NODE3Node.DOCUMENT_NODE9Node.COMMENT_NODE8Node.DOCUMENT_FRAGMENT_NODE 11Node.ATTRIBUTE_NODE2Иерархия типов приводится на рисунке 4.Рисунок 4 Иерархия типов узлов модели DOM.В коде JavaScript программы предоставляется возможность поиска элементовпо имени.var tables = document.getElementsByTagName("table");alert("Количество таблиц в документе: " + tables.length);19Если же нужен конкретный элемент, то либо необходимо знать его порядковыйномер в массиве найденных элементов, либо иметь возможностьидентифицировать по классу, либо идентификатору.В следующем примере будет найден 4-й параграфvar myParagraph = document.getElementsByTagName("p")[3];В этом примере будет найден параграф, имеющий уникальный идентификаторspecialParagraph.

Обратите внимание на то, что одинаковых идентификаторов водном документе быть не может.<p id="specialParagraph">…var myParagraph = document.getElementById("specialParagraph");Более сложный пример манипулирования элементами списка:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Сортировка списка. Дэвид Флэнаган.

JavaScript.</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script>function sortkids(e) {// Это элемент, потомки которого должны быть отсортированыif (typeof e == "string") e = document.getElementById(e);// Скопировать дочерние элементы (не текстовые узлы) в массивvar kids = [];for(var x = e.firstChild; x != null; x = x.nextSibling)if (x.nodeType == 1 /* Node.ELEMENT_NODE */) kids.push(x);// Выполнить сортировку массива на основе текстового содержимого// каждого дочернего элемента. Здесь предполагается, что каждый// потомок имеет единственный вложенный элемент – узел Textkids.sort(function(n, m) { // Функция сравнения для сортировкиvar s = n.firstChild.data; // Текстовое содержимое узла nvar t = m.firstChild.data; // Текстовое содержимое узла mif (s < t) return -1; // Узел n должен быть выше узла melse if (s > t) return 1; // Узел n должен быть ниже узла melse return 0; // Узлы n и m эквивалентны});// Теперь нужно перенести узлыпотомки обратно в родительский элемент// в отсортированном порядке.

Когда в документ вставляется уже// существующий элемент, он автоматически удаляется из текущей позиции,// в результате операция добавления этих копий элементов автоматически// перемещает их из старой позиции. Примечательно, что все текстовые узлы,// которые были пропущены, останутся на месте.for(var i = 0; i < kids.length; i++) e.appendChild(kids[i]);}</script></head><body><ul id="list"> <!—Этот список будет отсортирован ><li>один<li>два<li>три<li>четыре<li>пять<!-- элементы не в алфавитном порядке --></ul><!-- кнопка, щелчок на которой запускает сортировку списка --><button onclick="sortkids('list')">Сортировать по алфавиту</button></body></html>20Часто бывает полезно вставить элементы не как объекты, а как HTML текст.Для этого существует свойство innerHTML.

Характеристики

Список файлов лабораторной работы