| Создание
кнопок Back и Forward Одно из самых частых
применений методов back и forward - это добавление на
Web-страницу соответствующих кнопок, позволяющих
перемещаться по списку посещаемых страниц.
В качестве примера использования объекта history приведем сценарий,
отображающий в документе HTML кнопки Back и Forward,
позволяющие улучшить навигацию пользователя в
Web. В качестве кнопок Back и Forward будем использовать
графические объекты. Выберите из вашего архива
две картинки со стрелками влево и вправо. Если у
вас таких нет, то можно сделать текстовые ссылки.
Ниже приведена часть кода, соответсвующая
кнопке Back:
<A HREF="javascript:history.go(-1);">
<IMG BORDER="0" SRC="left.gif">
</A>
В этом коде используется метод javascript:URL,
позволяющий отображать предыдущую страницу
после щелчка на кнопке Back. В качестве кнопки Back
используется рисунок со стрелкой влево. Код
задания кнопки Forward почти такой же:
<A HREF="javascript:history.go(1);">
<IMG BORDER="0" SRC="right.gif">
</A>
Вот и все, остальное вы уже знаете. Добавьте
теги HTML. Листинг 19.1 содержит готовый код
документа HTML с кнопками Back и Forward.
Листинг 19.1. Документ HTML,
содержащий кнопки перемещения по загруженным
страницам
1: <HTML><HEAD><TITLE>Кнопки Back и Forward</TITLE></HEAD>
2: <BODY>
3: <H1>Использование кнопок Back и Forward</H1>
4: <HR>
5: Вы можете перемещаться по уже отображенным
6: страницам с помощью кнопок Back и Forward.
7: Они подобны кнопкам на панели инструментов.
8: <HR>
9: <A HREF="javascript:history.go(-1);">
10: <IMG BORDER="0" SRC="left.gif">
11: </A>
12: <A HREF="javascript:history.go(1);">
13: <IMG BORDER="0" SRC="right.gif">
14: </A>
15: <HR>
16: </BODY>
17: </HTML>
Если у вас нет картинок, замените их обычным
текстом, например для кнопки Back вот так:
<A
HREF="javascript:history.go(-1);">Назад</A>
Создание
пользовательских объектов
Упрощение сценариев с
помощью объектов
Хотя переменные и массивы JavaScript предоставляют
более чем достаточные возможности сохранения
данных, иногда требуется использовать весьма
сложные структуры. Например, вы создаете
сценарий управления базой данных, содержащей
имена, адреса и телефонные номера самых разных
людей.
При использовании обычных переменных для
каждого человека вам придется создавать
несколько переменных: для имени, для адреса и т.д.
и все их сохранять в базе данных. В конечном счете
база данных станет громоздкой и сложно
управляемой.
Массивы немного облегчат задачу. В базу данных
теперь будут заноситься не отдельные переменные,
а массивы: имен, адресов, телефонных номеров и т.д.
Каждый человек будет иметь запись в каждом из
массивов. Если база данных содержит много
сведений о каждом человеке, то получить
необходимые данные будет неудобно.
С помощью объектов можно все переменные,
относящиеся к одному человеку, сохранять в базе
данных в виде одного элемента (подобно одной
личной карточке в картотеке). Каждый человек
будет соответствовать отдельному объекту Card, имеющему такие свойства, как
name, address,
phone. В объект также можно
добавить специальные методы, позволяющие
обрабатывать и отображать на экране необходимые
данные. Создадим объект Card с
небольшой базой данных сотрудников какой-нибудь
фирмы.
Определение объекта
Первый шаг в использовании объекта - это
определить его и его свойства. Мы уже
договорились назвать объект Card.
Каждый объект Card будет иметь
следующие свойства:
name
address
workphone
homephone
Первым делом зададим функцию, создающую новые
объекты Card. Эта функция
называется конструктором объектов. Вот как
выглядит конструктор объектов Card:
function Card(name,address,work,home) {
this.name = name;
this.address = address;
this.workphone = work;
this.homephone = home;
}
Конструктор - это простая функция,
инициализирующая объект и определяющая значения
всех его свойств. Эта функция имеет несколько
параметров, которые приравниваются к свойствам
объекта. Поскольку функция названа Card,
наш объект тоже будет называться Card.
Обратите внимание на ключевое слово this. Вы будете использовать его
при определении любого объекта. Оно ставится
перед каждым свойством текущего объекта, т.е.
объекта, который создается.
Добавление в объект
метода
Теперь необходимо добавить в наш объект хотя бы
один метод. Поскольку все объекты Card
имеют одинаковые свойства, удобно иметь функцию,
позволяющую выводить содержимое объекта в
определенном формате. Назовем эту функцию PrintCard.
Функция PrintCard будет
использоваться в качестве метода объекта Card. Поэтому не нужно определять
ее параметры. Наоборот, используйте в коде
функции ключевое слово this
для определения свойств объекта. Вот как
выглядит функция PrintCard:
function PrintCard() {
line1 = "Имя: " + this.name + "<BR>";
line2 = "Адрес: " + this.address + "<BR>";
line3 = "Тел.(р): " + this.workphone + "<BR>";
line4 = "Тел.(д): " + this.homephone + "<BR>";
document.write(line1,line2,line3,line4);
}
Эта функция запрашивает значения свойств
объекта из базы данных и выводит каждое новое
значение в отдельной строке.
Теперь у нас есть функция, которая позволяет
отображать сведения о человеке (объекте), но она
еще не определена как метод объекта Card.
Все, что вам необходимо сделать, - это добавить
описание функции PrintCard в
определение объекта Card. Это
реализуется следующим образом:
function Card(name,address,work,home) {
this.name = name;
this.address = address;
this.workphone = work;
this.homephone = home;
this.PrintCard = PrintCard;
}
Добавленный оператор выглядит подобно
определению свойства объекта, но ссылается он на
функцию PrintCard. Пока функция PrintCard будет определена в
сценарии, метод PrintCard
выполняется для объекта Card.
Создание экземпляра
объекта
Настало время использовать на практике
созданное определение объекта и его метод. Для
того чтобы применить определение объекта на
практике, наобходимо создать новый объект. Это
выполняется с помощью ключевого слова new.
Следующий оператор позволяет создать новый
объект Card, имеющий название james:
james = new Card("Джеймс Бонд", "123
Elm Street", "338-258", "338-259");
Как вы видите, создать новый объект очень
просто. Все, что необходимо сделать, - это вызвать
функцию Card и определить ее
атрибуты в том же порядке, что и при определении
объекта.
После выполнения этого оператора создается
новый объект, сохраняющий информацию о Джеймсе
Бонде. Этот объект называется экземпляром
объекта Card. Подобно
существованию нескольких строк в программе,
объект может иметь несколько экземпляров.
Вместо того чтобы определять всю необходимую
информацию с помощью ключевого слова new,
можно задать ее после создания экземпляра
объекта.
Следующий пример демонстрирует создание
пустого экземпляра объекта Card
и последующего определения его свойств.
elcin = new Card();
elcin.name = "Борис Ельцин";
elcin.address = "Белый дом, второй этаж, комната слева
по коридору";
elcin.workphone = "8 (903) 335-12-07";
elcin.homephone = "111-1111";
После создания экземпляра объекта, одним из
приведенных выше способов, вы можете отобразить
необходимые сведения с помощью метода PrintCard. Следующий оператор,
например, отображает сведения, сохраненные в
объекте elcin:
elcin.PrintCard();
Настройка встроенных
объектов
JavaScript оснащен средствами, позволяющими
расширять возможности встроенных объектов.
Например, если вы считаете, что объект String не соответствует всем вашим
запросам, расширьте его, добавив новые свойства и
методы. Этот прием особенно часто используется
при создании больших сценариев с
многочисленными строковыми переменными.
Добавление свойств и методов в уже
существующий встроенный объект проводится с
помощью ключевого слова prototype.
(Другими словами, создается прототип уже
существующего объекта.) Ключевое слово prototype позволяет изменить
определение объекта вне программного кода
функции конструктора.
В качестве примера, давайте добавим в объект String один метод. Создадим метод heading, преобразующий строку в
заголовок HTML. Для начала определим строковую
переменную:
title = "Супер мупер пупер
страница"
Следующий оператор позволяет отображать
значение строковой переменной title
в виде заголовка HTML первого уровня:
document.write(title.heading(1));
Листинг 20.1 содержит программный код добавления
метода heading в объект String и отображения содержимого
объекта в окне браузера.
Листинг 20.1. Добавление
метода в объект String
1: <HTML><HEAD><TITLE>Добавление метода</TITLE></HEAD>
2: <BODY>
3: <SCRIPT LANGUAGE="JavaScript">
4: function addhead(level) {
5: html = "H" + level;
6: text = this.toString();
7: start = "<" + html + ">";
8: stop = "</" +html + ">";
9: return start + text + stop;
10: }
11: String.prototype.heading = addhead;
12: document.write("Это тест".heading(1));
13: </SCRIPT>
14: </BODY>
15: </HTML>
В этом коде сначала определяется функция addhead(), выступающая в роли метода
объекта String. Она в качестве
параметра использует только номер уровня
заголовка. Переменные start и stop используются для задания
пары дескрипторов HTML.
После определения функция назначается методом
объекта String с помощью
ключевого слова prototype.
Впоследствии этот метод можно использовать
вместе с объектом String,
наряду с другими его свойствами и методами. Это
проиллюстрировано в последних строках сценария
посредством отображения содержимого объекта String в виде заголовка HTML первого
уровня.
Создание данных в
объектах
Вы уже создали новый объект, позволяющий
сохранять в базе данных контактную информацию о
сотрудниках фирмы. В качестве последнего примера
применения объектов, их свойств, функций и
методов используем созданный объект для
отображения на Web-странице сведений о нескольких
сотрудниках.
В документе HTML необходимо обязательно включать
определение функции PrintCard, а
также функцию конструктора объекта Card.
Создадим еще три экземпляра объекта Card
и выведем их содержимое на вэб-страницу. Листинг
20.2 содержит полный код этого документа.
Листинг 20.2. Документ HTML,
использующий объект Card
1: <HTML><HEAD>
2: <TITLE>Добавление метода</TITLE>
3: <SCRIPT LANGUAGE="JavaScript">
4: function PrintCard() {
5: line1 = "<B>Имя: </B>" + this.name + "<BR>";
6: line2 = "<B>Адрес: </B>" + this.address + "<BR>";
7: line3 = "<B>Тел.(р): </B>" + this.workphone + "<BR>";
8: line4 = "<B>Тел.(д): </B>" + this.homephone + "<BR>";
9: document.write(line1,line2,line3,line4);
10: }
11: function Card(name,address,work,home) {
12: this.name = name;
13: this.address = address;
14: this.workphone = work;
15: this.homephone = home;
16: this.PrintCard = PrintCard;
17: }
18: </SCRIPT>
19: </HEAD>
20: <BODY>
21: <H1>Личные карточки</H1>
22: Сценарий начинается здесь.<HR>
23: <SCRIPT LANGUAGE="JavaScript">
24: //Создайте объекты
25: klava = new Card("Клавдия Дурнушкина", "ул. Пушкина, дом Колотушкина",
26: "338-258", "334-786");
27: vas = new Card("Василий Пупкин", "Красная пл., д. 1", "435-6893", "344-7834");
28: fekla = new Card("Фекла Страшнова", "Где придется, раз на раз не приходится",
29: "------", "------");
30: //Отобразите их
31: klava.PrintCard();
32: vas.PrintCard();
33: fekla.PrintCard();
34: </SCRIPT>
35: <HR>Конец сценария
36: </BODY>
37: </HTML>
Заметьте, что функция PrintCard()
немного изменена, чтобы улучшить внешний вид
отображаемых данных.
Этот пример позволяет управлять только
крохотной базой данных, поскольку для каждого
сотрудника необходимо вводить свои данные. Тем
не менее, объект Card можно
использовать для управления записями базы
данных, сохраненной на сервере. В этом случае
выполняемая работа может оказаться бесценной. |
