4.3. Задание на лабораторную работу № 8

Задание. Создать сайт, использующий в своей работе плагины JavaScript и некоторые технологии Ajax.

1. На основе шаблона shablon.html создать главную страницу сайта и назвать ее index.html. Настроить цвета ее отдельных блоков и заполнить их следующим содержанием:

– в панель заголовка добавить название Strategy Games;

– в панель подножия добавить сведения об авторах;

– в панель навигации добавить следующие ссылки:

«Главная»;

«XCOM: Enemy Within»;

«Europa Universalis IV»;

«Total War: Shogun 2».

2. Создать три страницы:

xcom.html;

euiv.html;

tws2.html.

3. Каждую страницу наполнить текстовым содержимым из соответствующих файлов из подкаталога content.html. Оформить полученное содержимое тегами заголовков, абзацев и списков. Заголовки, отмеченные жирным шрифтом, пометить тегом <h2>. В конце каждой страницы добавить мини-изображения (файлы со словом small в названии) из соответствующего каталога (gallery 01, gallery 02 или gallery 03) и сделать их ссылками на большие изображения (файлы с тем же номером, но словом big в названии).

4. Связать страницы с ссылками на панели навигации страницы index.html. Использовать функцию load(), чтобы открываемая страница загружалась в блок основного содержимого главной страницы.

5. Подключить к страницам xcom.htnl, euiv.html и tws2.html плагин «аккордеона» (замечание: скрипт, настраивающий «аккордеон» нужно подключить в начале каждой вышеупомянутой страницы).

6. Подключить к основной странице сайта плагин галереи и настроить изображения на страницах, чтобы они использовали данный плагин.

5. Лабораторная работа № 9.

СОЗДАНИЕ ОБЪЕКТОВ В JAVASCRIPT

5.1. Общие методические указания по выполнению

лабораторной работы

Цели работы:

– освоить базовые принципы создания классов и объектов JavaScript;

– изучить способы создания объектов и классов на языке JavaScript.

Среда выполнения и отладки:

Текстовый редактор Notepad++, веб-браузер (Firebox, Internet Explorer, Opera или др.).

5.2. Теоретические сведения

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

Объекты в языке JavaScript являются динамическими – обычно они позволяют добавлять и удалять свойства – но они могут также использоваться для имитации статических объектов и «структур», которые имеются в языках программирования со статической системой типов.

Любое значение в языке JavaScript, не являющееся строкой, числом, true, false, null или undefined, является объектом. И даже строки, числа и логические значения, не являющиеся объектами, могут вести себя как неизменяемые объекты.

Объекты можно создавать с помощью литералов объектов, ключевого слова new и функции Object.create().

Литералы

Самый простой способ создать объект заключается во включении в программу литерала объекта – заключенного в фигурные скобки списка свойств (пар имя/значение), разделенных запятыми. Примеры:

var empty = {}; //Объект без свойств

var point = { x:0 , y:0}; //Два свойства

var book = { //Имена свойств в виде литералов

“main title”: “JavaScript”,

“sub-title”: “The Definitive Guide”,

author : { //Объект как значение свойства

firstname : “David”,

surname : “Flanagan”

}

Литерал объекта – это выражение, которое создает и инициализирует новый объект всякий раз, когда производится вычисление этого выражения. Значение каждого свойства вычисляется заново, когда вычисляется значение литерала. Это означает, что с помощью единственного литерала объекта можно создать множество новых объектов, если этот литерал поместить в тело цикла или функции, которая будет вызываться многократно, и что значения свойств этих объектов будут отличаться друг от друга.

Оператор new

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

var o = new Object(); //Создание нового пустого объекта

var a = new Array(); //Создание пустого массива

var d = new Date(); //Создание объекта текущего времени

Помимо этих встроенных конструкторов имеется возможность определять свои собственные функции-конструкторы для инициализации вновь создаваемых объектов.

Прототипы

Почти каждый объект в языке JavaScript имеет второй объект, ассоциированный с ним. Этот второй объект называется прототипом, и первый объект наследует от прототипа его свойства.

Все объекты, созданные с помощью литералов объектов, имеют один и тот же объект-прототип, на который в программе JavaScript можно сослаться так: Object.prototype. Объекты, созданные с помощью ключевого слова new и вызова конструктора, в качестве прототипа получают значение свойства prototype функции-конструктора. Поэтому объект, созданный выражением new Object(), наследует свойства объекта Object.prototype, как если он был создан с помощью литерала в фигурных скобках {}. Аналогично прототипом объекта, созданного выражением new Array(), является Array.prototype, а прототипом объекта, созданного выражением new Date(), явялется Date.prototype.

Object.prototype – один из немногих объектов, которые не имеют прототипа: у него нет унаследованных свойств. Другие объекты-прототипы являются самыми обычными объектами, имеющими собственные прототипы. Все встроенные конструкторы (и большинство пользовательских конструкторов) наследуют прототип Object.prototype. Например, Date.prototype наследует свойства от Object.prototype, поэтому объект Date, созданный выражением new Date(), наследует свойства от обоих прототипов, Date.prototype и Object.prototype. Такая связанная последовательность объектов-прототипов называется цепочкой прототипов.

Метод Object.create()

Метод Object.create() создает новый объект и использует свой первый аргумент в качестве прототипа этого объекта. Дополнительно Object.create() может принимать второй необязательный аргумент, описывающий свойства нового объекта.

Object.create() является статической функцией, а не методом, вызываемым относительно некоторого конкретного объекта. Чтобы вызвать эту функцию, достаточно передать ей желаемый объект-прототип:

var o1 = Object.create({ x:1, y:2}); //o1 наследует

//свойства x и y

Чтобы создать объект, не имеющий прототипа, можно передать значение null, но в этом в случае вновь созданный объект не унаследует ни каких-либо свойств, ни базовых методов, таких как toString() и т.д.:

var o2 = Object.create(null); //o2 не наследует

//ни свойств, ни методов

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

var o3 = Object.create(Object.prototype);

Получение и изменение свойств

Получить значение свойства можно с помощью операторов точки (.) и квадратных скобок ([]). Примеры:

var author = book.author;

var name = author.surname;

var title = book[“main title”];

Чтобы создать новое свойство или изменить значение существующего свойства, также используются операторы точки и квадратные скобки, как в операциях чтения значений свойств, но само выражение помещается слева от оператора присваивания:

book.edition = 6;

book[“main title”] = “ECMAScript”;

Наследование

Объекты в языке JavaScript обладают множеством «собственных свойств» и могут также наследовать множество свойств от объекта-прототипа. Для создания объектов с определенными прототипами можно использовать функцию inherit(). Пример:

var o = {}; //o наследует методы объекта Object.protype

o.x = 1; //и обладает собственным свойством x

var p = inherit(o); //p наследует свойства объектов

//o и Object.protype

p.y = 2; //и обладает собственным свойством y

var q = inherit(p); //q наследует свойства объектов

//p, o и Object.prototype

q.z = 3; //и обладает собственным свойством z

Предположим, что программа присваивает некоторое значение свойству x объекта o. Если объект o уже имеет собственное свойство (не унаследованное) с именем x, то операция присваивания просто изменит значение существующего свойства. В противном случае в объекте o будет создано новое свойство с именем x. Если прежде объект o наследовал свойство x, унаследованное свойство теперь окажется скрыто вновь созданным собственным свойством с тем же именем.

Удаление свойств

Оператор delete удаляет свойство из объекта. Его единственный операнд должен быть выражением обращения к свойству. Примеры:

delete book.author; //Теперь объект book

//не имеет свойства author

delete book[“main title”]; //Теперь он не имеет свойства //“main title”

Оператор delete удаляет только собственные свойства и не удаляет унаследованные (Чтобы удалить унаследованное свойство, необходимо удалить его в объекте-прототипе, в котором оно определено. Такая операция затронет все объекты, наследующие этот прототип).

Выражение delete возвращает значение true в случае успешного удаления свойства или когда операция удаления не привела к изменению объекта (например, при попытке удалить несуществующие свойство). Выражение delete также возвращает true, когда этому оператору передается выражение, не являющееся выражением обращения к свойству.

Классы в JavaScript

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

Если два объекта наследуют один и тот же прототип, обычно (но не обязательно) это означает, что они были созданы и инициализированы с помощью одного конструктора.

Конструктор – это функция, предназначенная для инициализации вновь созданных объектов. Применение ключевого слова new при вызове конструктора автоматически создает новый объект, поэтому конструктору остается только инициализировать свойства этого нового объекта. Это означает, что все объекты, созданные с помощью конструктора, наследуют один и тот же объект-прототип и соответственно, являются членами одного и того же класса.

Пример реализации класса:

<script type="text/javascript">

function Train (num, p_naz, v_otpr) {

this.num = num;

this.p_naz = p_naz;

this.v_otpr = v_otpr;

}

Train.prototype = {

PrintTrain: function() {

var tr='<tr><td>'+this.num+'</td><td>'+this.p_naz+

'</td><td>'+this.v_otpr+'</td></tr>';

return tr;

},

PrintRec: function() {

var tr = "<br>Номер поезда : "+this.num+" Пункт назначения : "+this.p_naz+" Время отправления :"+this.v_otpr;

return tr;

}

};

var t = new Train(12, 'Казань', '12:30');

</script>

В данном примере создается класс, содержащий следующие сведения о поезде:

– номер поезда;

– пункт назначения;

– время отправления.

В класс добавлены два метода. Первый распечатывает все поля объекта класса в виде строки таблицы, второй – в виде текстовой строки.

В нижней части скрипта вызывается конструктор Train() с использованием ключевого слова new. Новый объект создается автоматически перед вызовом конструктора и доступен как значение this. Конструктору Train() остается лишь инициализировать его.

Все свойства объекта Train() являются прототипами. Выражение вызова конструктора Train() автоматически использует свойство Train.prototype как прототип нового объекта Train.