Язык сценариев JavaScript является объектно-ориентированным, подобно языку программирования С++, однако в реализации объектов между этими языками есть весьма существенные отличия.
Объекты JavaScript представляют собой наборы свойств и методов. Можно сказать, что свойства объектов - это данные, связанные с объектом, а методы - функции для обработки данных объекта. Те из вас, кто программировал на языке С++, могут провести аналогию с полями и методами, определенными в классе.
Адресация свойств в сценариях JavaScript возможна либо по именам свойств, либо по их номеру. Последнее возможно благодаря тому, что все свойства объекта хранятся как элементы массива и потому каждое свойство имеет свой номер.
В языке JavaScript имеется три типа объектов: встроенные объекты, объекты браузера и объекты, которые программист создает самостоятельно (рис. 2.1).
Рис. 2.1. Объекты в сценариях JavaScript
Каждый из этих типов имеет свое назначение и свои особенности.
Ниже мы перечислили встроенные объекты, свойства и методы которых доступны в сценариях JavaScript без предварительного определения этих объектов:
Объект |
Описание |
Array* |
Массив |
Boolean* |
Логические данные |
Date |
Календарная дата |
Function* |
Функция |
Global* |
Глобальные методы |
Math |
Математические константы и функции |
Number* |
Числа |
Object* |
Объект |
String |
Строки |
Здесь символом * отмечены встроенные объекты, определенные в языке Microsoft JScript версии 3.0. Эта версия реализована в браузере Microsoft Internet Explorer версии 4.0.
Встроенные объекты очень удобны для выполнения различных операций со строками, календарными датами, массивами, числами и так далее. Они освобождают программиста от выполнения различных рутинных операций вроде преобразования строк или вычисления математических функций.
Как работать со встроенными объектами?
Достаточно просто. Программа создает реализации (instance) объектов, а затем обращается к свойствам и методам объектов.
В качестве примера, имеющего практическое значение, рассмотрим документ HTML, в котором отображается текущая дата и время. Исходный текст этого документа вы найдете в листинге 2.1.
Листинг 2.1. Файл chapter2/date/date.html
<HTML>
<HEAD>
<TITLE>Show date and time</TITLE>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Show date and time</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var dt;
var szDate="";
dt = new Date();
szDate = "Date: " + dt.getDate() + "."
+ dt.getMonth() + "." + dt.getYear();
document.write(szDate);
document.write("<BR>");
document.write("Time: " + dt.getHours()
+ ":" + dt.getMinutes() + ":" + dt.getSeconds());
// -->
</SCRIPT>
</BODY>
</HTML>
Здесь сценарий JavaScript создает объект Data, применяя для этого ключевое слово new, знакомое всем поклонникам языка С++, и конструктор Date без параметров:
var dt; dt = new Date();
Создаваемый таким образом объект Data инициализируется текущей локальной датой, установленной у пользователя (а не на сервере Web, с которого был загружен соответствующий документ HTML).
В следующей строке формируется текстовая строка даты:
szDate = "Date: " + dt.getDate() + "." + dt.getMonth() + "." + dt.getYear();
Значение календарного числа, номера месяца и года здесь получается при помощи методов getDate, getMonth и getYear, соответственно. Эти методы вызываются для объекта dt, содержащего текущую дату.
Текстовая строка даты выводится в документ HTML с помощью метода write, определенного в объекте document:
document.write(szDate);
Этот способ мы уже использовали в примерах сценариев, приведенных в первой главе нашей книги.
Заметим, что объект Date содержит также информацию о текущем времени. Эта информация извлекается для отображения с помощью методов getHours, getMinutes и getSeconds (соответственно, часы, минуты и секунды):
document.write("Time: " + dt.getHours()
+ ":" + dt.getMinutes() + ":" + dt.getSeconds());
Внешний вид документа HTML при его просмотре в окне браузера Microsoft Internet Explorer версии 4.0 показан на рис. 2.2.
Рис. 2.2. Просмотр локальной даты и времени
Применение других встроенных объектов мы продемонстрируем позже по мере изучения материала.
С точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов. Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML. Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее.
Объекты браузера являются тем интерфейсом, с помощью которого сценарий JavaScript взаимодействует с пользователем и документом HTML, загруженным в окно браузера, а также с самим браузером. В сценариях JavaScript вы не можете создавать новые классы на базе классов, соответствующих этим объектам, однако свойства и методы объектов браузера вам доступны.
Иерархия объектов браузера схематически показана на рис. 2.2.
Рис. 2.2. Иерархия объектов браузера
Объект window находится в корне иерархии. Когда в окно браузера загружается документ HTML, внутри этого объекта создаются другие объекты - document, parent, frame, location и top.
Если в окно браузера загружается документ HTML с фреймами, то для каждого фрейма создается отдельное окно, причем это окно создается как объект window.
Объект document содержит в себе другие объекты, состав которых полностью определяется документом HTML, загруженным в окно браузера. Это могут быть формы, ссылки на другие документы HTML или локальные ссылки внутри одного документа, объекты, определяющие адрес URL документа и так далее.
Если в документе имеются формы, то они также представляются в виде иерархического набора объектов. Объект-форма может содержать в себе такие объекты, как кнопки, переключатели, поля для ввода текстовой информации.
Обращаясь к свойствам перечисленных выше объектов, сценарий JavaScript может определить различные характеристики документа HTML, такие как, например, заголовок. Ему доступны все ссылки, размещенные в документе, а также содержимое полей форм, определенных в документе HTML.
Сделаем еще одно очень важное замечание относительно объектов браузера.
С каждым таким объектом связывается определенный набор событий, обработка которых возможна в сценарии JavaScript.
Например, с объектом window связаны события onLoad и onUnload. Первое из этих событий возникает, когда браузер завершает загрузку окна и всех расположенных в нем фреймов (если эти фреймы определены в окне). Второе событие возникает, когда пользователь завершает работу с документом, закрывая окно браузера или переключаясь на другой документ.
Сценарий JavaScript может, например, при обработке события onLoad выводить для пользователя приветственное сообщение или запрашивать дополнительную информацию. При завершении работы с окном (когда возникает событие onUnload) сценарий может освобождать какие-либо ресурсы, связанные с этим окном, или выводить сообщение на экран монитора.
С другими объектами браузера также связаны события. Мы расскажем о них при описании этих объектов.
Многочисленные книги для начинающих, посвященные языку программирования С++, предлагают представить себе класс как структуру данных, где помимо обычных полей определены функции-методы для работы с этими данными. Так вот, в языке JavaScript для создания собственных классов используется прямо противоположный метод.
Класс JavaScript создается как функция, в которой определены свойства, играющие роль данных. Что же касается методов, то они тоже определяются как функции, но отдельно.
Приведем конкретный пример.
Пусть нам нужно создать класс, предназначенный для хранения записи воображаемой телефонной базы данных. В этом классе нам нужно предусмотреть свойства для хранения имени, фамилии, номера телефона, адреса, а также специального признака для записей, закрытых от несанкционированного доступа. Дополнительно требуется разработать методы, предназначенные для отображения содержимого объекта в табличном виде, как это показано на рис. 2.3.
Рис. 2.3. Просмотр содержимого записей
Прежде всего займемся созданием собственного класса с названием myRecord. Пусть пока в нем не будет методов, мы добавим их позже.
Искомый класс создается следующим образом:
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
}
Нетрудно заметить, что описание нашего класса есть ни что иное, как функция конструктора. Параметры конструктора предназначены для установки свойств объекта при его создании на базе класса.
Свойства определяются простыми ссылками на их имена с указанием ключевого слова this. Это ключевое слово здесь указывает, что в операторе выполняется ссылка на свойства того объекта, для которого вызван конструктор, то есть для создаваемого объекта.
Обратите внимание, что наш конструктор инициализирует свойство с именем secure, записывая в него значение false. Соответствующий параметр в конструкторе не предусмотрен, что вполне допустимо.
Как пользоваться определенным классом?
На базе этого класса вы можете создать произвольное количество объектов. Ниже мы привели фрагмент сценария JavaScript, где на базе класса myRecord создается два объекта rec1 и rec2:
var rec1;
var rec2;
rec1 = new myRecord("Иван", "Иванов",
"000-322-223", "Малая Большая ул., д. 225, кв. 226");
rec2 = new myRecord("Петр", "Петров",
"001-223-3334", "Большая Малая ул., д. 552, кв. 662");
rec2.secure = true;
Объекты создаются при помощи оператора new, знакомого тем, кто составлял программы на языках С++ и Java. Здесь мы передаем конструктору параметры для инициализации свойств создаваемых объектов.
Что же касается свойства с именем secure, то в объекте rec2 оно инициализируется уже после создания последнего. В него записывается значение true. Мы не изменяли свойство secure объекта rec1, поэтому в нем хранится значение false.
Теперь наша задача - добавление в определенный нами класс новых методов с именами printTableHead, printTableEnd и printRecord. Первые два из этих методов выводят в документ HTML, соответственно, начальный и конечный фрагмент таблицы, а третий - строки таблицы, отражающие содержимое записей.
В сокращенном виде новое определение класса myRecord представлено ниже:
function printTableHead()
{
. . .
}
function printTableEnd()
{
. . .
}
function printRecord()
{
. . .
}
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
}
Здесь перед определением конструктора мы расположили определения для функций-методов нашего класса. Кроме этого, в конструктор добавлено определение новых свойств:
this.printRecord = printRecord; this.printTableHead = printTableHead; this.printTableEnd = printTableEnd;
Эти свойства хранят ссылки на методы, определенные выше.
После такого определения класса вы можете создавать объекты и обращаться к определенным методам:
rec1.printTableHead(); rec1.printRecord(); rec1.printTableEnd(); rec2.printTableHead(); rec2.printRecord(); rec2.printTableEnd();
Возвращаясь к документу, показанному выше на рис. 2.3, приведем его полный исходный текст (листинг 2.2).
Листинг 2.2. Файл chapter2/NewObject/NewObject.html
<HTML>
<HEAD>
<TITLE>Просмотр записей</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function printTableHead()
{
var szSec = "";
if(this.secure)
szSec = " (Secure)";
else
szSec = " (Unsecure)".fontcolor("red");
document.write("<TABLE BORDER>");
document.write("<CAPTION ALIGN=LEFT>" +
this.name + " " + this.family + szSec +
"</CAPTION>");
document.write("<TH ALIGN=LEFT>Поле записи</TH>"
+ "<TH ALIGN=LEFT>Содержимое</TH>");
}
function printTableEnd()
{
document.write("</TABLE>");
document.write("<P> ");
}
function printRecord()
{
document.write("<TR><TD>Name:</TD><TD>" +
this.name.italics() + "</TD></TR>");
document.write("<TR><TD>Family:</TD><TD>" +
this.family.italics() + "</TD></TR>");
document.write("<TR><TD>Phone:</TD><TD>" +
this.phone.italics() + "</TD></TR>");
document.write("<TR><TD>Address:</TD><TD>" +
this.address.italics() + "</TD></TR>");
}
function myRecord(name, family, phone, address)
{
this.name = name;
this.family = family;
this.phone = phone;
this.address = address;
this.secure = false;
this.printRecord = printRecord;
this.printTableHead = printTableHead;
this.printTableEnd = printTableEnd;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=WHITE>
<H1>Просмотр записей</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
var rec1;
var rec2;
rec1 = new myRecord("Иван", "Иванов",
"000-322-223", "Малая Большая ул., д. 225, кв. 226");
rec2 = new myRecord("Петр", "Петров",
"001-223-3334", "Большая Малая ул., д. 552, кв. 662");
rec2.secure = true;
rec1.printTableHead();
rec1.printRecord();
rec1.printTableEnd();
rec2.printTableHead();
rec2.printRecord();
rec2.printTableEnd();
// -->
</SCRIPT>
</BODY>
</HTML>
Определение нового класса myRecord и его методов мы расположили в области заголовка документа HTML, как это принято делать.
Метод printTableHead выводит в документ HTML заголовок таблицы. Внешний вид этого заголовка зависит от содержимого свойств объекта.
Прежде всего метод printTableHead проверяет свойство secure, получая его значение при помощи ключевого слова this:
var szSec = "";
if(this.secure)
szSec = " (Secure)";
else
szSec = " (Unsecure)".fontcolor("red");
Здесь это ключевое слово означает, что необходимо использовать свойство того объекта, для которого был вызван метод printTableHead.
Если содержимое свойства secure равно true, в текстовую переменную szSec записывается строка " (Secure)". Если же оно равно false, в эту переменную заносится строка " (Unsecure)", причем для строки устанавливается красный цвет.
Так как в JavaScript все текстовые строки (в том числе и литералы) являются объектами встроенного класса String, то для них можно вызывать определенные в этом классе методы. В частности, метод fontcolor позволяет установить цвет строки, чем мы и воспользовались.
Далее метод printTableHead выводит в документ HTML оператор <TABLE> с параметром BORDER, с которого начинается определение таблицы, имеющей рамку. Надпись над таблицей задается с помощью динамически формируемого оператора <CAPTION>. В эту надпись включается имя и фамилия, извлеченные из соответствующих свойств объекта, для которого был вызван метод printTableHead. Затем этот метод выводит надписи для столбцов таблицы.
Метод printTableEnd выводит в документ HTML оператор </TABLE>, завершающий определение таблицы, а также пустой параграф для отделения таблиц, следующих друг за другом:
function printTableEnd()
{
document.write("</TABLE>");
document.write("<P> ");
}
Последний метод, определенный в нашем классе, называется printRecord. Он печатает содержимое первых четырех свойств объекта как строку таблицы, определенной в документе HTML только что описанной функцией printTableHead.
Обратите внимание, что содержимое свойств объекта печатается наклонным шрифтом, для чего мы вызываем метод italics:
document.write("<TR><TD>Name:</TD><TD>" +
this.name.italics() + "</TD></TR>");
Определение класса myRecord мы уже описали выше.
Перейдем теперь ко второй части нашего сценария, расположенной в теле документа HTML.
Здесь мы создаем два объекта rec1 и rec2 на базе класса myRecord, а затем устанавливаем свойство secure объекта rec2 в состояние true.
Далее сценарий последовательно выводит в документ HTML две таблицы, соответствующие созданным объектам, вызывая для этого методы printTableHead, printRecord и printTableEnd.
Как видите, применение собственного класса позволили сильно упростить задачу инициализации и отображения содержимого записей нашей воображаемой телефонной базы данных. Фактически мы свели эту задачу к вызовам нескольких методов, определенных заранее в нашем классе.
Язык сценариев JavaScript допускает работу с массивами встроенных объектов, объектов браузера и объектов, созданных программистом. К сожалению, нет единого способа создания массивов, пригодного для применения в разных версиях браузеров. Мы расскажем вам о двух способах, первый из которых необходим для версий браузеров Netscape Navigator, более ранних чем 3.0, а второй используется новыми браузерами фирм Netscape и Microsoft.
Первый способ предполагает создание собственного класса. Это можно сделать, например, так:
function createArray(nLength)
{
this.length = nLength;
for(var i = 1; i <= nLength; i++)
{
this[i] = 0;
}
return this;
}
Здесь в классе определено свойство с именем length, которое хранит размер массива, передаваемый конструктору класса через параметр nLength.
Конструктор выполняет инициализацию массива, записывая в его ячейки нулевые значения. Таким образом мы создаем массив для хранения чисел. После инициализации конструктор возвращает ссылку на созданный объект, то есть на наш массив.
Как пользоваться классом createArray?
Прежде всего вы должны объявить переменную для хранения массива, а затем создать объект класса createArray с помощью ключевого слова new:
var myArray; myArray = new createArray(256);
После этого можно обращаться к ячейкам массива:
myArray[0] = 255; myArray[1] = 254; myArray[255] = 0;
Нумерация ячеек начинается с нуля.
Второй способ создания массивов проще.
При его использовании вы можете создать массив как объект встроенного класса Array:
var myArray; myArray = new Array(256); . . . myArray[0] = 255; myArray[1] = 254; myArray[255] = 0;
Так как класс Array - встроенный, вам не нужно определять его самостоятельно.
Далее мы рассмотрим в деталях объекты браузера, необходимые вам практически в любом сценарии JavaScript. Прежде всего это объекты window, document, а также объекты, связанные с формами, определенными в документах HTML.
Первый объект браузера, которым мы займемся вплотную, это окно - объект с именем window.
Объект window имеет свойства, описывающие размеры окна, расположенные в окне фреймы, имя окна, содержимое строки состояния окна и другие:
Свойство |
Описание |
defaultStatus |
Сообщение, отображаемое в строке состояния окна браузера по умолчанию |
frames |
Массив всех фреймов данного окна |
length |
Количество фреймов в родительском окне |
name |
Имя окна, указанное при его открытии методом open, а также в параметре TARGET оператора <A> или в параметре NAME оператора <FORM> |
parent |
Синоним имени окна. Относится к окну, содержащему набор фреймов |
self |
Синоним имени окна. Относится к текущему окну |
status |
Текущее сообщение, отображаемое в строке состояния окна браузера |
top |
Синоним имени окна. Относится к окну верхнего уровня |
window |
Синоним имени окна. Относится к текущему окну |
Что касается свойства defaultStatus, то оно используется только в браузере Netscape Navigator. Если записать в это свойство произвольное сообщение, оно будет отображаться в строке состояния Netscape Navigator, когда окно браузера выдвигается на передний план. К сожалению, браузер Microsoft Internet Explorer версий 3.02 и 4.0 игнорирует свойство defaultStatus.
Свойство status, напротив, применяется обоими конкурирующими браузерами. Периодически записывая сообщение в это свойство и каждый раз сдвигая это сообщение на одну позицию, можно добиться эффекта бегущей строки. Применение строки состояния для отображения бегущей строки распространено достаточно широко. В нашей книге вы найдете пример готового сценария, выполняющего эту работу.
Заметим, однако, что в браузере Microsoft Internet Explorer версии 4.0 строка состояния разделена на несколько областей. Область, содержимое которой соответствует свойству status, расположена слева и имеет относительно небольшие размеры (особенно в режимах видеоадаптера с низким разрешением). Это необходимо учитывать, если вы собираетесь использовать бегущую строку для привлечения внимания пользователя.
Свойства windows и self - синонимы. Вы можете применять любое их них по своему усмотрению.
Остальные свойства, в частности, свойства frames и length, применяются в том случае, когда в окно загружен документ HTML с фреймами. Анализируя свойство length вы можете определить количество фреймов в окне, а при помощи свойства frames (которое является массивом) нетрудно получить доступ к окнам этих фреймов. Работе с фреймами в сценариях JavaScript мы посвятим отдельную главу нашей книги.
Среди методов, определенных в объекте window, отметим методы, предназначенные для открытия новых окон и закрытия существующих, для отображения на экране простейших диалоговых панелей с сообщениями и методы для установки таймера:
Метод |
Описание |
alert |
Отображение диалоговой панели Alert с сообщением и кнопкой OK |
close |
Закрытие окна |
confirm |
Отображение диалоговой панели Confirm с кнопками OK и Cancel |
open |
Открытие окна |
prompt |
Отображение диалоговой панели Prompt с полем ввода |
setTimeout |
Установка таймера |
clearTimeout |
Сброс таймера |
Что касается метода alert, то мы его уже использовали в разделе первой главы с названием “Вариация пятая: с диалоговой панелью”. Там мы применили этот метод для вывода на экран простейшей диалоговой панели, отображающей приветственное сообщение. Применение некоторых других методов и свойств объекта window мы проиллюстрируем ниже на примерах составленных нами сценариев JavaScript.
Приведем формат вызова метода alert:
alert("Сообщение");
Через единственный параметр методу alert передается сообщение, отображаемое в диалоговой панели.
После вызова этого метода выполнение сценария (точнее говоря, функции сценария, вызвавшей этот метод) задерживается до тех пор, пока пользователь не нажмет кнопку OK, расположенную в диалоговой панели с сообщением.
Заметим, что при вызове метода alert мы не указали объект, для которого вызывается метод - объект window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту window.
Тем не менее, вы можете явно указывать объект window:
window.alert("Сообщение");
Результат будет тем же самым.
С помощью метода confirm вы также можете отобразить на экране диалоговую панель с сообщением, однако в этой панели будет две кнопки - OK и Cancel. В зависимости от того, какая кнопка будет нажата, метод возвратит, соответственно, значение true или false.
Метод confirm обычно используется следующим образом:
if(confirm("Сообщение"))
{
// Нажата кнопка OK
. . .
}
else
{
// Нажата кнопка Cancel
. . .
}
Если вам в своем сценарии необходимо получить от пользователя одну текстовую строку, для этого можно применить метод prompt. Этот метод отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt возвращает введенную строку.
Метод prompt вызывается следующим образом:
Var szInput="";
szInput=prompt("Сообщение","Строка ввода по умолчанию");
Через первый параметр методу передается сообщение, которое отображается в диалоговой панели над текстовым полем ввода. Второй параметр необязательный. Если он указан, поле ввода инициализируется текстовой строкой, заданной этим параметром.
Заметим, что с помощью метода prompt сценарий может получить от пользователя только одну текстовую строку. В тех случаях, когда необходимо ввести и обработать сразу несколько строк, вы можете создать в документе HTML форму, имеющую произвольное количеством полей и кнопку завершения ввода с обработкой события. Когда пользователь нажмет эту кнопку, обработчик соответствующего события сможет извлечь из полей формы введенные значения. Подробно работа с формами будет рассмотрена в отдельной главе нашей книги.
С помощью метода open сценарий может открыть новое окно браузера и загрузить в это окно документ HTML для просмотра.
Формат вызова метода open приведен ниже:
open("Адрес URL", "Имя Окна", "Параметры окна");
Метод возвращает имя нового окна, которое можно использовать для ссылки на свойства и методы окна, а также на свойства и методы объектов, расположенных в этом окне.
Первый параметр метода open задает адрес URL документа HTML, предназначенный для загрузки в новое окно.
Второй параметр определяет имя окна для использования в параметре TARGET оператора <A> или в операторе <FORM>. Вы можете указать его как пустую строку вида “”.
Третий, необязательный параметр, задает различные параметры, определяющие внешний вид создаваемого окна браузера. Этот параметр указывается как текстовая строка, где через запятую перечислены значения отдельных параметров, например:
var wndNewWindow;
wndNewWindow=open("hello.html", "",
"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");
Ниже мы перечислили все возможные параметры окна:
Параметр |
Описание |
toolbar |
Если параметр имеет значение yes или 1, окно снабжается стандартной инструментальной линейкой. Если же значение этого параметр равно no, то инструментальная линейка будет отсутствовать |
location |
Параметр определяет, будет ли отображаться поле ввода адреса документа |
directories |
Аналогично предыдущему, но управляет отображением кнопок каталогов браузера Netscape Navigator, таких как "What's New" и "What's Cool" |
status |
Отображение строки состояния |
menubar |
Отображение линейки меню |
scrollbars |
Отображение полос просмотра |
resizable |
Если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна |
width |
Ширина окна в пикселах |
height |
Высота окна в пикселах |
С помощью метода close вы можете закрыть созданное вами или основное окно браузера. Формат вызова этого метода такой:
wndNewWindow.close()
Заметим, что текущее окно браузера (то есть окно, в которое загружен документ HTML с работающим сценарием) может быть закрыто одним из двух следующих способов:
window.close() self.close()
Этот метод мы будем использовать в одном сценарии, описанном ниже.
С помощью метода setTimeout вы можете установить таймер, указав при этом выражение JavaScript и задержку во времени:
idTimer=setTimeout(cmd, timeout);
Метод setTimeout создает и запускает таймер, возвращая его идентификатор. Когда пройдет время, заданное вторым параметром timeout (в миллисекундах), запускается выражение JavaScript, заданное параметром cmd.
Рассмотрим такой фрагмент сценария:
var cmd="NoAccess()"; idTimer=window.setTimeout(cmd, 10000);
Здесь мы создаем таймер с временем задержки 10 секунд. После прошествия этого времени будет вызвана функция с именем NoAccess, которая должна быть определена в сценарии заранее. Эта функция будет выполнена только один раз.
Ниже мы приведем примеры сценариев, в которых метод setTimeout используется для периодического вызова функции сдвига сообщения в строке состояния браузера (“бегущая” строка) и для ограничения времени ввода пользователем строки пароля.
Еще одно применение метода setTimeout - создание анимационных эффектов в сценарии JavaScript. Соответствующий пример вы найдете в пятой главе нашей книги, посвященной растровым графическим изображениям.
С помощью метода clearTimeout можно остановить таймер, запущенный только что рассмотренным методом setTimeout. В качестве параметра методу clearTimeout необходимо передать идентификатор таймера, полученный от метода setTimeout:
clearTimeout(idTimer);
С объектом класса window связаны два события - onLoad и onUnload. Первое из них возникает, когда браузер заканчивает загрузку окна или всех окон фреймов, определенных оператором <FRAMESET>, а второе - когда пользователь завершает работу с документом HTML.
В своем сценарии вы можете предусмотреть обработку этих событий, назначив для каждого из них свою функцию. Функция, которая вызывается при завершении загрузки документа, может выполнять какие-либо инициализирующие действия, создавать дополнительные окна или выводить сообщения. Обработчик события onUnload может освобождать полученные ресурсы или выводить какие-либо дополнительные сообщения.
В качестве примера рассмотрим следующий фрагмент документа HTML, содержащий сценарий:
. . .
function Hello()
{
window.alert("Welcome to my home page!")
}
function Bye()
{
window.alert("Bye! Come back again!")
}
. . .
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
. . .
Здесь в операторе <BODY> мы определили обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция Hello, а при возникновении второго события - функция Bye. Заметим, что так как документ HTML интерпретируется в направлении сверху вниз, функции Hello и Bye необходимо определить до появления оператора <BODY>. Лучшее место для определения этих функций - заголовок документа HTML.
Если вам нужно проследить загрузку всех фреймов, вы можете указать обработчик события onLoad в операторе <FRAMESET>.
Изучение свойств и методов объектов JavaScript лучше всего проводить на конкретных примерах сценариев. В этом разделе вы найдете ряд готовых сценариев, причем некоторые из них после небольшого изменения или даже в первоначальном виде можно использовать на практике при оформлении страниц вашего сервера Web.
Попробуем решить задачу, невозможную без применения файла сценария, - закрыть главное окно браузера при помощи кнопки, расположенной в документе HTML (рис. 2.4).
Рис. 2.4. Документ HTML, способный закрыть главное окно браузера
Если нажать на кнопку с названием “Close Navigator Window”, сценарий отобразит на экране диалоговую панель, показанную на рис. 2.5.
Рис. 2.5. Диалоговая панель с вопросом о закрытии главного окна браузера
Данная диалоговая панель отображается с помощью метода confirm. Если вы нажмете на кнопку OK, сценарий попытается закрыть окно браузера при помощи метода close.
Заметим, что браузер Microsoft Internet Explorer версии 4.0 запрашивает разрешение на закрытие окна еще раз (рис. 2.6).
Рис. 2.6. Второй вопрос о закрытии главного окна браузера
Исходный текст документа HTML, закрывающего главное окно браузера, представлен в листинге 2.3.
Листинг 2.3. Файл chapter2/CloseAll/CloseAll.html
<HTML>
<HEAD>
<TITLE>Закрываем окно браузера</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function CloseNavWnd()
{
if(confirm("Вы действительно желаете закрыть окно браузера?"))
window.close();
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Закрываем окно браузера</H1>
<P>Для того чтобы закрыть окно браузера,
нажмите кнопку "Close Navigator Window",
расположенную ниже:
<FORM NAME="selectForm">
<P><INPUT TYPE="button" VALUE="Close Navigator Window"
onClick="CloseNavWnd();">
</FORM>
</BODY>
</HTML>
В области заголовка документа определена функция CloseNavWnd:
function CloseNavWnd()
{
if(confirm("Вы действительно желаете закрыть окно браузера?"))
window.close();
}
Эта функция обращается к методу confirm, который выводит на экран диалоговую панель с запросом на закрытие окна. Если пользователь нажмет кнопку OK, метод возвратит значение true, а если на кнопку Cancel - значение false.
В случае положительного ответа функция CloseNavWnd вызывает метод close для текущего объекта window. В данном случае таким объектом является окно браузера. Заметим, что вместо объекта window можно указывать объект self, так как это синоним текущего окна:
self.close();
Для того чтобы функция CloseNavWnd вызывалась после того как пользователь нажимает кнопку, в строке определения этой кнопки мы указали обработчик события onClick:
<P><INPUT TYPE="button" VALUE="Close Navigator Window" onClick="CloseNavWnd();">
Таким образом, сценарии JavaScript делают формы полезными даже в тех случаях, когда вы не применяете программы CGI или расширения ISAPI.
При открытии нашего следующего документа HTML на экране появляется диалоговая панель с сообщением, показанная на рис. 2.7.
Рис. 2.7. Сообщение об открытии документа HTML
Если нажать на кнопку OK в этой диалоговой панели, то в окне браузера появится содержимое документа (рис. 2.8).
Рис. 2.8. Содержимое документа NewWnd.html
В этом окне расположена кнопка “Open Hello window”. Если нажать на эту кнопку, будет создано еще одно окно браузера, в которое загрузится содержимое файла Hello.html. Однако внешний вид этого окна будет несколько необычен (рис. 2.9).
Рис. 2.9. Новое окно для просмотра содержимого документа Hello.html
Как видите, в окне нет ни полос просмотра, ни меню, ни инструментальной линейки. Дело в том, что создавая это окно в нашем сценарии, мы указали, что перечисленные выше элементы пользовательского интерфейса отображать не нужно. Кроме того, мы определили точные размеры окна.
Если теперь закрыть окно документа NewWnd.html, на экране появится диалоговая панель с приглашением, показанная на рис. 2.10.
Рис. 2.10. Диалоговая панель с приглашением
Исходный текст документа HTML NewWnd.html представлен в листинге 2.4.
Листинг 2.4. Файл chapter2/NewWnd/NewWnd.html
<HTML>
<HEAD>
<TITLE>Window object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Hello()
{
window.alert("Welcome to my home page!")
}
function Bye()
{
window.alert("Bye! Come back again!")
}
function OpenHelloWnd()
{
var wndNewWindow;
wndNewWindow =
window.open("hello.html",
"",
"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
<H1>Open second window</H1>
<FORM NAME="selectForm">
<P><INPUT TYPE="button" VALUE="Open Hello window"
onClick="OpenHelloWnd();">
</FORM>
</BODY>
</HTML>
В операторе <BODY> мы задали обработку событий onLoad и onUnload:
<BODY BGCOLOR=white onLoad="Hello()" onUnload="Bye()">
Когда пользователь загружает наш документ, после окончания загрузки браузер вызывает функцию Hello, назначенную нами для обработки события onLoad. Перед удалением окна с документом вызывается обработчик события onUnload, реализованный в функции Bye.
Функции Hello и Bye определены в заголовке документа HTML и не имеют никаких особенностей. Для вывода диалоговой панели с сообщением эти функции вызывают метод alert.
Когда пользователь нажимает кнопку "Open Hello window", определенную в форме, вызывается функция OpenHelloWnd. Эта функция открывает новое окно браузера, загружая в него новый документ HTML.
Окно открывается следующим образом:
wndNewWindow = window.open("hello.html", "",
"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");
В качестве первого параметра методу open передается адрес URL документа HTML, который должен быть загружен в окно. Второй параметр определяет имя окна (мы его не задали), а третий - определяет параметры окна.
Решим одну очень распространенную задачу - отображение бегущего текста в строке состояния браузера (рис. 2.11).
Рис. 2.11. Бегущий текст в строке состояния браузера
Строка состояния обычно используется браузерами для отображения различной информации, например, информации о выполнении текущей операции. Для того чтобы записать что-нибудь в строку состояния, необходимо изменить содержимое свойства status объекта window окна браузера.
Эту задачу можно решить, например, так:
window.status = "Новая строка";
Для создания эффекта бегущей строки операцию обновления свойства status необходимо выполнять периодически, отображая текст с изменяющимся сдвигом. Однако не стоит делать это в цикле, так как в результате нормальная работа браузера будет нарушена.
В нашем сценарии (листинг 2.5) мы применим способ выполнения периодических процедур, основанный на использовании метода setTimeout, определенного для объекта window. Напомним, что этот метод позволяет организовать отложенное во времени выполнение команды, заданной первым параметром. Время, через которое команда будет запущена, указывается методу setTimeout вторым параметром.
Листинг 2.5. Файл chapter2/StatusScroll/StatusScroll.html
<HTML>
<HEAD>
<TITLE>Авторский компакт-диск</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var szMsg = "You are welcome to our Web site http://www.glasnet.ru/~frolov";
var nSpace = 100;
var nIteration = 0;
function sscroll()
{
var cmd = "sscroll()";
var szOut = "";
var szText = "";
for (i=0 ; i < nSpace ; i++)
{
szText += " ";
}
szText += szMsg;
szOut =
szText.substring(nIteration, nSpace + nIteration);
window.status = szOut;
nIteration++;
if(nIteration > nSpace + szMsg.length)
{
nIteration = 0;
}
timer = window.setTimeout(cmd, 50);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Новый выпуск авторского CD</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
sscroll();
// -->
</SCRIPT>
<P>Первый выпуск нашего компакт-диска
уже появился в продаже. Информацию об этом, а также
следующем выпуске вы найдете на нашем сервере Web,
адрес которого отображается в окне состояния браузера
</BODY>
</HTML>
В области заголовка документа мы определили глобальные переменные szMsg, nSpace и nIteration, а также функцию sscroll.
Переменная szMsg инициализируется текстовым сообщением, которое будет непрерывно перемещаться в строке состояния браузера. Значение, записанное в переменную nSpace, определяет количество пробелов, которое будет добавлено к строке сообщения слева перед началом операции сдвига. И, наконец, переменная nIteration служит счетчиком сдвигов для функции sscroll.
Функция sscroll вызывается первый раз в теле документа:
<BODY BGCOLOR=white>
<H1>Новый выпуск авторского CD</H1>
<SCRIPT LANGUAGE="JavaScript">
<!--
sscroll();
// -->
</SCRIPT>
. . .
</BODY>
В дальнейшем функция sscroll организует при помощи метода setTimeout свой собственный вызов, отложенный во времени на 50 миллисекунд, и завершает работу. Однако через указанное время наша функция будет вызвана вновь, и это будет продолжаться до тех пор, пока документ HTML, содержащий сценарий, остается загруженным в окно браузера.
Упрощенно структура функции sscroll показана ниже:
function sscroll()
{
var cmd = "sscroll()";
. . .
// Отображение сообщения в строке состояния браузера
. . .
// Сдвиг сообщения влево на одну позицию
. . .
timer = window.setTimeout(cmd, 50);
}
После отображения сообщения в строке состояния и сдвига этого сообщения влево на одну позицию функция sscroll вызывает метод setTimeout, передавая ему через первый параметр переменную с командой, подлежащей выполнению, а через второй - время задержки, по прошествии которого данную команду нужно будет выполнить.
В качестве выполняемой команды мы указываем методу setTimeout вызов функции sscroll. Таким образом в нашем сценарии эта функция вызывается периодически.
В функции sscroll мы определили три локальные переменные. Переменная cmd хранит команду вызова функции sscroll. В переменной szOut мы подготавливаем текст, отображаемый в строке состояния браузера при каждом вызове функции sscroll.
Текстовая переменная szText используется как рабочая. В ней формируется сообщение для вывода. Вначале в переменную szText записывается nSpace пробелов, а затем добавляется строка szMsg:
for (i=0 ; i < nSpace ; i++)
{
szText += " ";
}
szText += szMsg;
Для того чтобы при каждом вызове функции sscroll наше сообщение отображалось со сдвигом на одну позицию, мы извлекаем из переменной szText подстроку. Извлечение подстроки выполняется с помощью метода substring, определенного во встроенном классе текстовых строк String. Полученная подстрока записывается в свойство status объекта window и таким образом отображается в строке состояния:
szOut = szText.substring(nIteration, nSpace + nIteration); window.status = szOut;
Первый параметр метода substring определяет начальную позицию подстроки внутри строки, а второй - конечную.
После отображения сообщения функция sscroll увеличивает значение глобального счетчика nIteration на единицу:
nIteration++;
Когда в результате сдвига сообщение полностью уходит из строки состояния, счетчик nIteration снова устанавливается в нулевое значение:
if(nIteration > nSpace + szMsg.length)
{
nIteration = 0;
}
Обратите внимание, что общая длина сдвигаемой строки здесь вычисляется как сумма значения nSpace (количество начальных пробелов) и длины сообщения szMsg. Последняя определяется с помощью метода length, определенного во встроенном классе String.
Иногда пользователь, попав на страницу Web, долго не может понять, что нужно делать. Вы можете создать сценарий, который отображает в этой ситуации документ HTML с подсказкой. Разумеется, подсказка должна отображаться только в том случае, если пользователь не выполняет над вашей страницей никаких действий в течении достаточно продолжительного времени.
Но как измерить время, в течении которого пользователь не активен?
В этом вам помогут методы setTimeout и clearTimeout. Первый из этих методов мы уже использовали в предыдущем сценарии для организации периодического выполнения функции.
Мы продемонстрируем применение этих методов для решения другой задачи, связанной с ограничением времени ввода пароля.
Когда пользователь загружает документ HTML, исходный текст которого представлен в листинге 2.6, на экране появляется форма с полем, предназначенным для ввода текстовой строки пароля (рис. 2.12).
Рис. 2.12. Форма в документе HTML для ввода пароля
Сразу после загрузки документа в окно браузера сценарий запускает таймер, вызывая метод setTimeout из этого же класса. Таймер устанавливается на 10 секунд. Именно за это время вы должны ввести пароль и нажать кнопку “Enter Password” в форме, показанной на рис. 2.12, чтобы получить доступ к странице.
Если повременить с вводом пароля или ввести неправильный пароль, сценарий загружает в окно браузера динамически сформированный документ HTML с сообщением о запрещении доступа (рис. 2.13).
Рис. 2.13. Сообщение о запрещенном доступе
Только в том случае, если пароль введен правильно и в течении 10 секунд, на экране появляется сообщение о предоставлении доступа и ссылка, с помощью которой можно перейти к просмотру главной страницы нашего сервера Web (рис. 2.14).
Рис. 2.14. Сообщение о разрешении доступа и ссылка на главную страницу нашего сервера Web
Разумеется, приведенный нами пример едва ли стоит использовать на практике для ограничения доступа к странице сервера Web.
Во-первых, исходный текст сценария легко просмотреть и проанализировать (если только сценарий не находится в отдельном файле, адрес которого указан при помощи параметра SRC). Во-вторых, узнав один раз адрес страницы сервера, пользователь может просто отметить эту страницу закладкой и в дальнейшем посещать ее без ввода пароля.
Мы привели данный пример сценария только для иллюстрации применения методов класса window. С помощью аналогичного сценария вы можете узнать, не заснул ли пользователь, пока смотрел на вашу страницу.
Теперь рассмотрим исходный текст сценария JavaScript, встроенного в документ HTML (листинг 2.6).
Листинг 2.6. Файл chapter2/Password/Password.html
<HTML>
<HEAD>
<META http-equiv="Content-Type"
content="text/html; charset=windows-1251">
<TITLE>Ввод пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);
}
function NoAccess()
{
document.write("<H1>Доступ запрещен</H1>");
document.write("<P>Попробуйте в следующий раз!");
}
function CheckPassowd()
{
var szPwd="";
szPwd=document.pwdForm.pwd.value;
if(szPwd=="password")
{
clearTimeout(idTimer);
document.write("<H1>Доступ разрешен</H1>");
document.write("<P>Наш сервер: ");
document.write(
'<A HREF="http://www.glasnet.ru/~frolov/index.html"');
document.write( '>http://www.glasnet.ru/~frolov/index.html</A>');
}
else
{
document.write("<H1>Доступ запрещен</H1>");
document.write("<P>Попробуйте в следующий раз!");
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white onLoad="StartMyTimer();">
<H1>Доступ ограничен</H1>
<P>Мы ограничили доступ к нашему серверу :)
<P>Вы должны ввести пароль (слово password)
в течении 10 секунд.
<HR>
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
<HR>
</BODY>
</HTML>
Прежде всего обратим ваше внимание на заголовок документа HTML.
В первой странице этого заголовка мы указали с помощью оператора <META> номер кодовой страницы 1251, соответствующей кириллице в Windows:
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
Без этой строки наш документ отображался неправильно браузером Microsoft Internet Explorer версии 4.0.
В первых строках сценария, расположенного в заголовке документа, мы объявили переменную idTimer и определили функцию StartMyTimer:
var idTimer=0;
function StartMyTimer()
{
var cmd="NoAccess()";
idTimer=window.setTimeout(cmd, 10000);
}
Функция StartMyTimer запускает таймер, сохраняя его идентификатор в глобальной переменной idTimer. Для запуска таймера мы применили знакомый вам метод с именем setTimeout.
Когда таймер сработает (а это произойдет через 10 секунд после загрузки нашего документа HTML в окно браузера), будет вызвана функция NoAccess. Эта функция выводит в окно браузера сообщение о запрещении доступа к странице.
Для того чтобы функция StartMyTimer запускалась сразу после загрузки документа HTML в окно браузера, мы указали ее имя в параметре onLoad оператора <BODY>, организовав таким образом обработку соответствующего события:
<BODY BGCOLOR=white onLoad="StartMyTimer();">
Итак, если пользователь загрузил документ и просто смотрит на него, через 10 секунд содержимое документа в окне браузера будет перезаписано функцией NoAccess, что иллюстрируется на рис. 2.13.
Для ввода пароля необходимо использовать форму, которая определена в нашем документе HTML следующим образом:
<FORM NAME="pwdForm">
<P><INPUT TYPE="text" VALUE="******" NAME="pwd">
<P><INPUT TYPE="button" VALUE="Enter Password"
onClick="CheckPassowd();">
</FORM>
Имя формы pwdForm указано в параметре NAME оператора <FORM>. Это имя нам потребуется для извлечения строки пароля из текстового поля, определенного в форме с помощью оператора <INPUT>. Имя этого текстового поля pwd также задается параметром NAME.
Помимо текстового поля, в форме имеется кнопка с надписью “Enter Password”. Для этой кнопки мы определили обработчик события onClick, который вызывается, когда пользователь нажимает мышью на кнопку. Обработчиком в нашем случае является функция CheckPassowd, определенная в нашем сценарии. Эта функция проверяет пароль и, если пароль введен правильно, останавливает таймер, запущенный при загрузке документа HTML.
Как наш сценарий извлекает строку пароля из поля формы?
Это делается следующим образом:
var szPwd=""; szPwd=document.pwdForm.pwd.value;
Здесь мы выполняем ссылку на свойство value объекта pwd, которым является текстовое поле формы (вспомните, что это поле называется pwd). Объект pwd находится внутри формы с именем pwdForm, которая, в свою очередь располагается в документе HTML, загруженным в окно браузера. Этим документом является объект document.
Получив введенную пользователем строку, функция CheckPassowd проверяет ее:
if(szPwd=="password")
{
clearTimeout(idTimer);
. . .
}
Если строка введена правильно, таймер останавливается методом clearTimeout. В качестве параметра этому методу передается идентификатор таймера, полученный от метода setTimeout. При ошибке в документ HTML записывается сообщение о запрещении доступа.
В разделе этой главы с названием “Открываем новое окно” мы рассказали вам о том, как сценарий JavaScript может открыть новое окно, загрузив в него документ HTML. Однако часто возникает и другая задача - отобразить новый документ HTML в текущем окне браузера, не создавая новое окно.
Наш следующий сценарий (листинг 2.7) решает как раз эту задачу.
Листинг 2.7. Файл chapter2/JumpTo/JumpTo.html
<HTML>
<HEAD>
<TITLE>Jump to other Web page</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function urlJump()
{
var szNewURL="";
szNewURL=prompt("Enter new URL address:", "http://");
window.location.href=szNewURL;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Jump to other Web page</H1>
<FORM NAME="selectForm">
<P><INPUT TYPE="button" VALUE="Jump"
onClick="urlJump();">
</FORM>
</BODY>
</HTML>
Когда в пользователь нажимает кнопку Jump в форме selectForm (показанной на рис. 2.15), запускается функция urlJump.
Рис. 2.15. Кнопка Jump, предназначенная для перехода к просмотру другой страницы Web
Эта функция вызывает метод prompt XE "prompt" , определенный в классе window:
var szNewURL="";
szNewURL=prompt("Enter new URL address:", "http://");
Метод prompt отображает на окне монитора диалоговую панель, предназначенную для ввода текстовой строки. В нашем случае это должна быть строка адреса URL документа HTML, который будет загружен в окно браузера (рис. 2.16).
Рис. 2.16. Диалоговая панель для ввода нового адреса URL
Введенный адрес (на рис. 2.16 мы ввели адрес главной страницы нашего сервера Web) записывается в переменную szNewURL.
Теперь можно переходить к загрузке нового документа в окно браузера.
Когда мы рассказывали об объектах класса window, то говорили, что такие объекты содержат в себе другие объекты. В частности, объект window содержит в себе объект location, описывающий расположение документа HTML, загруженного в окно браузера.
Для того чтобы загрузить в окно новый документ, достаточно изменить содержимое свойства объекта location с именем href:
window.location.href=szNewURL;
Это свойство хранит адрес URL документа. Изменение содержимого свойства href объекта location главного окна браузера приводит к загрузке в это окно нового документа (рис. 2.17).
Рис. 2.17. В главное окно браузера загружен новый документ HTML
Специально для работы с документами HTML в языке JavaScript имеется отдельный объект с названием document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В первой главе нашей книги мы уже применяли один из методов объекта document с именем write для записи строки в тело документа HTML.
Когда в 29 томе “Библиотеки системного программиста” мы рассказывали о документах HTML, то говорили, что такие документы состоят из заголовка и тела документа. Заголовок определяется при помощи оператора языка HTML <HEAD>, а тело документа - при помощи оператора <BODY>. Прежде чем мы перейдем к описанию свойств и методов объекта document, рассмотрим назначение отдельных параметров оператора <BODY>.
В общем виде этот оператор выглядит следующим образом:
<BODY BACKGROUND="Фоновое_изображение" BGCOLOR="Цвет_фона" TEXT="Цвет_текста" LINK="Цвет_непосещенных_ссылок" ALINK="Цвет_активизированных_ссылок" VLINK=" Цвет_посещенных_ссылок " onLoad="Обработчик_события_при_загрузке_документа" onUnload="Обработчик_события_при_выгрузке_документа"> </BODY>
Описание параметров оператора приведено ниже:
Параметр |
Описание |
BACKGROUND |
С помощью этого параметра можно указать адрес URL изображения, заполняющего фон тела документа |
BGCOLOR |
Параметр BGCOLOR применяется в тех случаях, когда фон документа необходимо раскрасить в какой-либо цвет. Цвет задается в виде "#rrggbb", где константы rr, gg и bb - соответственно, красная, зеленая и голубая компоненты цвета. Значение констант может находиться в диапазоне от 0 до FF (в шестнадцатеричном виде). Цвет может также задаваться символическими константами, такими как red или white |
TEXT |
Цвет текста. Задается таким же образом, что и цвет фона BGCOLOR |
LINK |
Параметр LINK определяет цвет ссылок, размещенных в документе HTML, и еще не посещенных пользователем |
ALINK |
Этот параметр определяет цвет ссылок, выбранных пользователем |
VLINK |
Параметр VLINK определяет цвет ссылок, размещенных в документе HTML, которые уже посещались пользователем ранее |
onLoad |
С помощью параметра onLoad можно определить обработчик события, который получит управление при загрузке документа в окно браузера |
onUnload |
Аналогично предыдущему, однако обработчик события получит управление при удалении документа из окна браузера |
Анализируя свойства объекта document, сценарий JavaScript может определить значения перечисленных выше параметров. Кроме того, сценарию доступны локальные метки, формы и связи документа как элементы соответствующих массивов, а также информация из заголовка документа.
Перечислим свойства объекта document, доступные сценарию JavaScript:
Свойство |
Описание |
alinkColor |
Содержимое параметра ALINK |
anchors |
Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа |
applets |
Массив объектов, соответствующих аплетам Java, расположенным в документе HTML |
bgColor |
Содержимое параметра BGCOLOR |
cookie |
Значение cookie для текущего документа. О том, что это такое, мы расскажем в последней главе нашей книги |
embeds |
Массив объектов plug-in, содержащихся в документе HTML |
fgColor |
Содержимое параметра TEXT |
forms |
Массив, содержащий в виде объектов все формы, расположенные в документе HTML |
images |
Массив растровых изображений, включенных в документ |
lastModified |
Дата последнего изменения документа HTML |
linkColor |
Содержимое параметра LINK |
links |
Массив, содержащий все ссылки в документе HTML |
location |
Полный адрес URL документа HTML |
referrer |
Адрес URL вызывающего документа HTML |
title |
Заголовок документа, заданный с помощью оператора <TITLE> |
URL |
Полный адрес URL документа HTML |
vlinkColor |
Содержимое параметра VLINK |
Объект document может содержать в себе другие объекты, доступные как свойства:
Свойство |
Описание |
anchor |
Локальная метка, определенная в документе HTML с помощью оператора <A> |
form |
Форма, определяемая в документе HTML с помощью оператора <FORM> |
history |
Список адресов URL, посещенных пользователем |
link |
Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver |
Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:
Метод |
Описание |
clear |
Удаление содержимого документа из окна просмотра |
close |
Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока |
open |
Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln |
write |
Запись в документ произвольной конструкции языка HTML |
writeln |
Аналогично предыдущему, но в конце строки добавляется символ новой строки |
Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. Сначала мы попробуем динамически изменить цветовое оформление документа HTML, показанного на рис. 2.18.
Рис. 2.18. Документ HTML с цветовым оформлением, измененным при помощи сценария JavaScript
Сценарий изменил пять свойств документа HTML - цвет фона и текста, а также цвета посещенных, не посещенных и выбранных пользователем ссылок (листинг 2.8).
Листинг 2.8. Файл chapter2/ColorLinks/ColorLinks.html
<HTML>
<HEAD>
<TITLE>Color Links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
document.bgColor = "#00FF80";
document.fgColor = "#800080";
document.linkColor = "#000000";
document.alinkColor = "#FF0000";
document.vlinkColor = "#4000FF";
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Изменение цветового оформления</H1>
<P>Посетите эти серверы:
<P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
<P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
<P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>
<P><A HREF="ColorLinks.html#Локальный раздел">Локальный раздел</A>
<HR>
<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
<P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet
</BODY>
</HTML>
Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:
document.bgColor = "#00FF80";
Немного усложнив сценарий, вы можете изменять цвет фона, например, в зависимости от времени суток или от календарной даты. Например, цвет страницы по выходным дням можно сделать праздничным, а по рабочим - деловым. Выбор цифровых констант, определяющих праздничный и деловой цвета в шестнадцатеричном виде, мы оставляем на ваше усмотрение или на усмотрение вашего дизайнера.
Как мы уже рассказывали в 29 томе “Библиотеки системного программиста” с названием “Сервер Web своими руками”, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать оператор <A>. В общем виде этот оператор представлен ниже:
<A HREF=Адрес URL или локальная метка NAME="Имя локальной метки" TARGET="Имя окна" onClick="Обработчик события: щелчок по ссылке" onMouseOver="Обработчик события: курсор над ссылкой"> Текст ссылки </A>
Описание параметров оператора <A> мы привели ниже:
Параметр |
Описание |
HREF |
Параметр HREF задает адрес URL или имя локальной метки документа, куда будет сделан переход по ссылке |
NAME |
Если указан параметр NAME, оператор <A> определяет локальную метку. Значение этого параметра задает имя метки |
TARGET |
Параметр TARGET задает имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного с помощью оператора <FRAMESET>, или одним из следующих зарезервированных имен - _top, _parent, _self, или _blank |
onClick |
С помощью параметра onClick можно определить обработчик события, который получит управление, когда пользователь сделает щелчок левой клавишей мыши по ссылке |
onMouseOver |
Аналогично предыдущему, однако обработчик события получит управление, когда пользователь разместит курсор мыши над ссылкой |
Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links.
Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links. Вот список этих свойств:
Свойство |
Описание |
hash |
Имя локальной ссылки, если она определена в адресе URL |
host |
Имя узла и порт, указанные в адресе URL |
hostname |
Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP |
href |
Полный адрес URL |
pathname |
Путь к объекту, указанный в адресе URL |
port |
Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке |
protocol |
Строка названия протокола передачи данных (включающая символ “двоеточие”), указанного в ссылке |
search |
Строка запроса, указанная в адресе URL после символа “?” |
target |
Значение параметра TARGET, заданное в ссылке |
length |
Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML |
Рассмотрим пример сценария JavaScript, работающего со ссылками как с элементами массива links.
Мы приведем пример документа, с формой, списком и кнопкой Jump. Сценарий JavaScript заполняет список ссылками, размещенными в документе HTML. Внешний вид этого документа показан на рис. 2.19.
Рис. 2.19. Документ со списком расположенных в нем ссылок
Выбрав из списка ссылку и нажав кнопку Jump, вы загрузите в окно браузера документ, указанный в этой ссылке или запустите почтовую программу для подготовки и отправки сообщения (если выбрана ссылка на адрес электронной почты).
Так как список ссылок формируется сценарием динамически, новые ссылки, добавленные в документ HTML, появятся в списке автоматически без дополнительных усилий по редактированию сценария.
В нижней части этого же документа HTML, показанного на рис. 2.20, сценарий отображает детальную информацию по каждой ссылке, извлеченную из свойств объектов класса links, соответствующих ссылкам.
Рис. 2.20. Детальная информация о ссылках
Что за информация здесь отображается?
Вначале выводятся свойства первой ссылки, содержащей адрес главной страницы нашего сервера Web в сети Internet:
http://www.glasnet.ru/~frolov/index.html host: www.glasnet.ru:80 hostname: www.glasnet.ru href: http://www.glasnet.ru/~frolov/index.html pathname: ~frolov/index.html port: 80 protocol: http: search: target:
Так как в этой ссылке указан полный адрес URL, включающий путь к файлу документа index.html, то этот путь записывается в свойство с именем pathname.
Хотя порт, с использованием которого устанавливается соединение с сервером Web, не указан, в свойства host и port записывается значение, применяемое для этой цели по умолчанию, а именно 80.
Рассмотрим следующую ссылку:
http://www.auramedia.ru/ host: www.auramedia.ru:80 hostname: www.auramedia.ru href: http://www.auramedia.ru/ pathname: port: 80 protocol: http: search: target:
Здесь путь к файлу документа HTML не указан, поэтому свойство pathname содержит пустую строку.
В ссылке на сервер Microsoft мы указали путь к каталогу java:
http://www.microsoft.com/java/ host: www.microsoft.com:80 hostname: www.microsoft.com href: http://www.microsoft.com/java/ pathname: java/ port: 80 protocol: http: search: target: newwnd
Этот частичный путь оказался записанным в свойство pathname. Кроме того, для отображения содержимого сервера Microsoft должно быть создано новое окно. Имя этого окна задано как newwnd в параметре TARGET оператора <A>. С помощью этого оператора мы разместили ссылку в документе HTML. Как и следовало ожидать, имя окна оказалось записано в свойство target.
Последняя ссылка - это адрес электронной почты:
mailto:frolov@glas.apc.org host: glas.apc.org hostname: glas.apc.org href: mailto:frolov@glas.apc.org pathname: port: 0 protocol: mailto: search: target:
В свойстве protocol данной ссылки записана строка “mailto:”.
Рассмотрим теперь исходный текст документа HTML, содержащий сценарий JavaScript, работающий со ссылками (листинг 2.9).
Листинг 2.9. Файл chapter2/LinksList/LinksList.html
<HTML>
<HEAD>
<TITLE>Links and Anchors</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function urlJump()
{
var szNewURL="";
szNewURL =
document.links[Sel.ListOfLinks.selectedIndex];
window.location.href=szNewURL;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Просмотр ссылок</H1>
<FORM NAME="Sel">
<SELECT NAME="ListOfLinks">
</SELECT>
<INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();">
</FORM>
<P>Посетите эти серверы:
<P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
<BR><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
<BR><A HREF="http://www.microsoft.com/java/" TARGET="newwnd">Страница сервера Microsoft про Java</A>
<P>Пишите нам по адресу: <A HREF="mailto:frolov@glas.apc.org">frolov@glas.apc.org</A>
<HR>
<H1>Список ссылок</H1>
<P>Этот список сформирован динамически сценарием JavaScript</P>
<SCRIPT LANGUAGE="JavaScript">
<!--
elem = new Array();
for(i=0; i<document.links.length; i++)
{
elem[i] = new Option("Elem" + i, i, false, false);
Sel.ListOfLinks.options[i] = elem[i];
Sel.ListOfLinks.options[i].text = document.links[i];
document.write("<HR>");
var szText=document.links[i] + "<BR>";
document.write(szText.bold());
document.write("host: ".italics() + document.links[i].host + "<BR>");
document.write("hostname: ".italics() + document.links[i].hostname + "<BR>");
document.write("href: ".italics() + document.links[i].href + "<BR>");
document.write("pathname: ".italics() + document.links[i].pathname + "<BR>");
document.write("port: ".italics() + document.links[i].port + "<BR>");
document.write("protocol: ".italics() + document.links[i].protocol + "<BR>");
document.write("search: ".italics() + document.links[i].search + "<BR>");
document.write("target: ".italics() + document.links[i].target + "<BR>");
}
Sel.ListOfLinks.selectedIndex=0;
// -->
</SCRIPT>
</BODY>
</HTML>
В секции заголовка документа HTML определена функция urlJump, загружающая в окно браузера объект, соответствующий выбранной в списке ссылке:
function urlJump()
{
var szNewURL="";
szNewURL =
document.links[Sel.ListOfLinks.selectedIndex];
window.location.href=szNewURL;
}
Список ссылок, а также кнопка Jump, служащая для активизации выбранной ссылки, определена следующим образом:
<FORM NAME="Sel"> <SELECT NAME="ListOfLinks"> </SELECT> <INPUT TYPE="button" VALUE="Jump!" onClick="urlJump();"> </FORM>
Имя формы, необходимое сценарию JavaScript для доступа к списку и кнопке, определено в параметре NAME оператора <FORM> как Sel.
Список с именем ListOfLinks создается оператором <SELECT>. Первоначально в списке нет ни одного элемента. Все элементы будут добавлены в список сценарием JavaScript.
Кнопка Jump активизирует фукнцию urlJump, для чего в ее определении указан обработчик события onClick.
Обратите внимание на то, как функция urlJump адресуется к выбранному элементу списка:
szNewURL = document.links[Sel.ListOfLinks.selectedIndex];
Здесь мы взяли форму Sel и указали имя списка ListOfLinks как имя одного из свойств формы. Номер выделенного элемента списка находится в свойстве списка с именем selectedIndex.
Наш сценарий заполняет массив ссылок links и список Sel.ListOfLinks таким образом, что первый элемент массива links соответствует первой ссылке в списке, второй элемент массива - второму элементу и так далее. Поэтому выражение Sel.ListOfLinks.selectedIndex является номером ссылки в массиве links, которую необходимо активизировать. Функция urlJump записывает эту ссылку в переменную szNewURL, а затем устанавливает значение свойства window.location.href.
Рассмотрим теперь сценарий JavaScript, определенный в теле документа HTML.
Прежде всего, в этом сценарии мы создаем массив elem:
elem = new Array();
Этот массив предназначен для хранения элементов динамически формируемого списка, определенного пустым в форме Sel.
Далее в сценарии располагается цикл по всем ссылкам, размещенным в документе HTML:
for(i=0; i<document.links.length; i++)
{
. . .
}
Количество ссылок находится в свойстве length объекта links, поэтому переменная цикла i изменяет свое значение от 0 до document.links.length.
В цикле мы создаем новый элемент списка и записываем в него текст ссылки:
elem[i] = new Option("Elem" + i, i, false, false);
Sel.ListOfLinks.options[i] = elem[i];
Sel.ListOfLinks.options[i].text = document.links[i];
Способ создания элемента списка будет подробно описан в главе, посвященной работе сценариев JavaScript с формами. Здесь мы только отметим, что текстовая строка, соответствующая ссылке, извлекается из массива links как document.links[i].
Далее после записи в документ HTML разделительной линии наш сценарий записывает в него текст ссылки, выделяя его жирным шрифтом:
document.write("<HR>");
var szText=document.links[i] + "<BR>";
document.write(szText.bold());
Вслед за этим в документ HTML записываются все свойства ссылки, извлеченные из текущего элемента массива links. Например, имя узла и номер порта извлекаются и записываются в документ HTML следующим образом:
document.write("host: ".italics() + document.links[i].host + "<BR>");
Последнее, что делает наш сценарий уже после завершения цикла, это выделение первого элемента в списке Sel.ListOfLinks:
Sel.ListOfLinks.selectedIndex=0;
Для этого номер выделяемого элемента (в нашем случае это 0) записывается в свойство списка с именем selectedIndex.
Хотя сценарии JavaScript редко применяют для математических вычислений, в нем все же есть встроенный класс Math, предназначенный как раз для этого. В этом классе есть очень полезные методы, которые мы будем применять в наших примерах.
Перечислим свойства класса Math. Все эти свойства являются математическими константами, поэтому сценарий JavaScript не может изменять их значение.
Это свойство представляет собой константу e. Приблизительное значение этой константы равно 2,72.
Вот пример использования свойства E:
var nE; nE = Math.E;
Здесь мы записываем в переменную nE значение константы e.
Свойство PI - это число p. Оно также является константой с приблизительным значением, равным 3,14.
Пример использования свойства PI:
var nL; var nR; nL = 2 * Math.PI * nR;
Здесь свойство PI используется для вычисления длины окружности по ее радиусу. Вычисление выполняется по следующей формуле:
l = 2pR,
где R - радиус окружности.
Свойство LN2 - константа со значением натурального логарифма числа 2, то есть ln2.
Пример использования:
var nValue; nValue = Math.LN2;
Свойство LN10 - константа со значением натурального логарифма числа 10, то есть ln10.
Пример использования:
var nValue; nValue = Math.LN10;
Это свойство является константой со значением, равным логарифму числа 2 по основанию e, то есть loge2.
Пример использования:
var nValue; nValue = Math.LOG2E;
Свойство LOG10E - это логарифм числа e по основанию 10, то есть log10e.
Пример использования:
var nValue; nValue = Math.LOG10E;
Свойство SQRT2 - это значение квадратного корня из 2.
Пример использования:
var nValue; nValue = Math.SQRT2;
Свойство SQRT1_2 - это значение квадратного корня из 0,5.
Пример использования:
var nValue; nValue = Math.SQRT1_2;
Перечислим методы класса Math.
Вычисление абсолютного значения.
Пример использования:
var nValueAbs; nValueAbs = Math.abs(nValue);
Здесь в переменную nValueAbs записывается абсолютное значение переменной nValue.
Вычисление арккосинуса.
Пример использования:
var nValue; nValue = Math.acos(nAngle);
Вычисление арксинуса.
Пример использования:
var nValue; nValue = Math.asin(nAngle);
Вычисление арктангенса.
Пример использования:
var nValue; nValue = Math.atan(nAngle);
Вычисление наименьшего целого значения, большего или равного аргументу функции.
Пример использования:
var nValue; nValue = Math.ceil(nArg);
Вычисление косинуса.
Пример использования:
var nValue; nValue = Math.cos(nAngle);
Экспоненциальная функция, значение которой равно числу e, возведенному в степень аргумента функции.
Пример использования:
var nValueExp; nValueExp = Math.exp(nValue);
Вычисление наибольшего целого значения, меньшего или равного аргументу функции.
Пример использования:
var nValue; nValue = Math.floor(nArg);
Вычисление натурального логарифма аргумента функции.
Пример использования:
var nValue; nValue = Math.log(nArg);
Определение наибольшего из двух значений.
Пример использования:
var nValue1; var nValue2; var nValueMax; nValueMax = Math.max(nValue1, nValue1);
Определение наименьшего из двух значений.
Пример использования:
var nValue1; var nValue2; var nValueMin; nValueMin = Math.min(nValue1, nValue1);
Возведение числа в заданную степень.
Пример использования:
var nValue; nValue = Math.pow(2, 3);
Здесь число 2 возводится в степень 3, а результат, равный 8, записывается в переменную nValue.
Метод random возвращает случайное число в интервале от 0 до 1.
Пример использования:
var nRandomValue; nRandomValue = Math.random();
Метод round предназначен для выполнения округления значения аргумента до ближайшего целого. Если десятичная часть числа равна 0,5 или больше этого значения, то выполняется округление в большую сторону, если меньше - в меньшую.
Пример использования:
var nValue; nValue = Math.round(1.8);
После выполнения округления значение nValue будет равно 2.
Вычисление синуса.
Пример использования:
var nValue; nValue = Math.sin(nAngle);
Вычисление квадратного корня от аргумента.
Пример использования:
var nValueSqrt; nValueSqrt = Math.sqrt(nArg);
Вычисление тангенса.
Пример использования:
var nValue; nValue = Math.tan(nAngle);
С помощью методов встроенного класса Date сценарий JavaScript может выполнять различные действия с часами компьютера, например, получать и устанавливать текущую дату и время. Ниже мы приведем краткое описание конструкторов и методов этого класса.
Для использования большинства методов класса Date необходимо создать объект этого класса при помощи одного из трех конструкторов.
Конструктор первого вида вызывается следующим образом:
var dtNewDate; dtNewDate = new Date();
Здесь создается объект Date, в котором хранится информация о текущей дате и времени. Это время задается по Гринвичу или, пользуясь более современным определением, с использованием времени Universal Coordinated Time.
Конструктор второго вида позволяет указать дату через единственный параметр:
var dtNewDate; dtNewDate = new Date(nMilliseconds);
Параметр nMilliseconds задает дату в миллисекундах, считая от 1 января 1970 года.
И, наконец, конструктор третьего вида предназначен для раздельной установки компонент даты и во многих случаев более удобен для использования:
var dtNewDate; dtNewDate=new Date(year, month, date, hours, min, sec, ms);
Параметры этого конструктора описаны ниже:
Параметр |
Описание |
year |
Год, например, 1998 или 2012 |
month |
Номер месяца от 0 (январь) до 11 (декабрь) |
date |
Календарная дата, задается в диапазоне от 1 до 31 |
hours |
Необязательный параметр, задающий час дня в диапазоне от 0 до 23. Вы обязаны указывать этот параметр только в том случае, если задан параметр min |
min |
Необязательный параметр, задающий минуты в диапазоне от 0 до 59. Вы обязаны указывать этот параметр только в том случае, если задан параметр sec |
sec |
Необязательный параметр, задающий секунды в диапазоне от 0 до 59. Вы обязаны указывать этот параметр только в том случае, если задан параметр ms |
ms |
Необязательный параметр, задающий миллисекунды в диапазоне от 0 до 999 |
Определение даты, хранящейся в объекте класса Date.
Метод возвращает значение календарной даты в диапазоне от 1 до 31.
Пример использования:
var dtNewDate; var nDate; dtNewDate = new Date(); nDate = dtNewDate.getDate();
Определение номера дня недели, хранящегося в объекте класса Date.
Метод возвращает 0 для воскресения, 1 - для понедельника, и так далее.
Пример использования:
nDay = dtDate.getDay();
Определение количества часов, прошедших после полуночи.
Пример использования:
nHours = dtDate.getHours();
Определение количества минут, прошедших после начала часа.
Пример использования:
nMinutes = dtDate.getMinutes();
Определение количества месяцев, прошедших с января.
Пример использования:
nMonth = dtDate.getMonth();
Определение количества секунд, прошедших с начала минуты.
Пример использования:
nSeconds = dtDate.getSeconds();
Определение времени для заданного объекта класса Date.
Метод getTime возвращает количество миллисекунд, прошедших с 1 января 1970 года.
Пример использования:
nMilliseconds = dtDate.getTime();
Определение смещения локального времени относительно времени по Гринвичу (в миллисекундах).
Пример использования:
nOffsetMilliseconds = dtDate.getTimeZoneOffset();
Метод getYear возвращает год, хранящийся в объекте класса Date.
Пример использования:
nYear = dtDate.getYear();
Метод parse возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода вам не нужно создавать объект класса Date, а можно просто сослаться на имя этого класса:
nMS = Date.parse(szDataString);
Через параметр szDataString вы можете указать время, например, так:
"12 Oct 1998 12:00:00" "12 Oct 1998 12:00:00 GMT" "12 Oct 1998 12:00:00 GMT+0330"
Первая из этих строк задает локальную дату и время, вторая - дату и время по Гринвичу, и, наконец, последняя, - время и дату по Гринвичу со смещением на 3 часа и 30 минут.
Метод parse обычно применяют вместе с конструктором объекта Date или с методом setTime, который мы рассмотрим ниже.
Метод setDate используется для установки календарной даты в объекте класса Date.
Пример использования:
dtNewDate.setDate(nDateNumber);
Параметр nDateNumber может принимать значения от 1 до 31.
Метод setHours используется для установки количества часов, прошедших после полуночи, в объекте класса Date.
Пример использования:
dtNewDate.setHours(nHours);
Параметр nHours может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.
Метод setMinutes используется для установки количества минут, прошедших после начала часа, в объекте класса Date.
Пример использования:
dtNewDate.setMinutes(nMinutes);
Параметр nMinutes может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.
Метод setMonth используется для установки номера месяца, прошедшего с начала года, в объекте класса Date.
Пример использования:
dtNewDate.setMonth(nMonth);
Параметр nMonth может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.
Метод setSeconds используется для установки количества секунд, прошедших с начала минуты, в объекте класса Date.
Пример использования:
dtNewDate.setSeconds(nSeconds);
Параметр nSeconds может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.
С помощью метода setTime можно установить дату в объекте класса Date, соответствующую заданному количеству миллисекунд, прошедших после 1 января 1970 года.
Пример использования:
dtNewDate.setTime(nMilliseconds);
Метод setYear используется для установки номера года, в объекте класса Date.
Пример использования:
dtNewDate.setYear(nsetYear);
Метод toGMTString предназначен для преобразования даты в строку, записанную в стандартном формате времени по Гринвичу (GMT).
Аналогично предыдущему, однако вместо времени GMT используется локальное время.
Метод UTC преобразует дату, заданную параметрами метода, в количество миллисекунд, прошедшее с 1 января 1970 года.
При использовании метода UTC, так же как и метода parse, вам не нужно создавать объект класса Date:
nMillisecond = Date.UTC(year, month, date, hours, min, sec, ms);
Параметры метода UTC задаются таким же образом, как и описанные выше параметры конструктора объекта класса Date третьего вида.
В этом разделе мы перечислим несколько полезных встроенных функций, которые вы можете использовать в своих сценариях JavaScript.
· eval XE "eval"
Функция eval предназначена для преобразования текстовой строки в численное значение. Через единственный параметр она получает текстовую строку и вычисляет ее как выражение языка JavaScript. Функция возвращает результат вычисления:
var nValue = Eval(szStr);
· parseInt XE "parseInt"
Эта функция предназначена для преобразования текстовой строки в целочисленное значение. Строка передается функции через параметр:
var nValue = parseInt(szStr);
· parseFloat
Функция parseFloat пытается преобразовать текстовую строку в число с плавающей точкой. Текстовая строка передается этой функции через первый параметр, а основание счисления - через второй:
var nFloat = parseFloat(szStr, nRadix);
· escape
С помощью функции escape сценарий JavaScript может закодировать текстовую строку с применением URL-кодировки. В этой кодировке специальные символы, такие как пробел или символ табуляции, преобразуются к следующему виду: %XX, где XX - шестнадцатеричный код символа.
Вот пример использования этой функции:
var szURL = escape(szStr);
· unescape
Функция unescape выполняет действие, прямо противоположное действию функции unescape - перекодирует строку из URL-кодировки в обычную текстовую строку:
var szStr = unescape(szURL);
Просматривая страницы некоторых серверов Web, вы могли обратить внимание, что цвет их фона начинает плавно изменяться сразу после загрузки, становясь постепенно светлее или наоборот, темнее. Аналогичный эффект может быть получен не только для цвета фона, но и для цвета текста, а также гипертекстовых ссылок. Вы можете сделать, например, так, чтобы строки текста постепенно проявлялись на фоне страницы или исчезали (чтобы посетитель не успел их прочесть).
Сложный на первый взгляд эффект достигается чрезвычайно просто: изменением свойства bgColor объекта document. В листинге 2.10 мы привели пример сценария, который после загрузки документа HTML в окно браузера изменяет цвет его фона с белого на черный.
Листинг 2.10. Файл chapter2/ChangeBkg/ChangeBkg.html
<HTML>
<HEAD>
<TITLE>Color Links</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
var nRed = 255;
var nGreen = 255;
var nBlue = 255;
function colorShift()
{
var cmd = "colorShift()";
document.bgColor = "#" +
dec2hex(nRed) +
dec2hex(nGreen) +
dec2hex(nBlue);
if(nRed > 0)
{
nRed -= 10;
nGreen -= 10;
nBlue -= 10;
}
timer = window.setTimeout(cmd, 50);
}
function dec2hex(nDec)
{
var szHexTable="0123456789ABCDEF";
var szResult = "";
var szBuf="";
var nRem = 0;
var bNegative=false;
if(nDec < 0)
{
bNegative=true;
nDec = -nDec;
}
nTmp=nDec;
while(true)
{
nRem = nTmp % 16;
nTmp = nTmp / 16;
if(Math.floor(nTmp) < 16)
break;
szBuf=szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
}
szBuf=szHexTable.charAt(nRem);
szResult = szBuf.concat(szResult);
if(Math.floor(nTmp) != 0)
{
szBuf=szHexTable.charAt(Math.floor(nTmp));
szResult = szBuf.concat(szResult);
}
if(bNegative == true)
return ("-" + szResult);
else
return szResult;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Изменение цветового оформления</H1>
<P>Посетите эти серверы:
<P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>
<P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>
<P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>
<P><A HREF="ColorLinks.html#Локальный раздел">Локальный раздел</A>
<HR>
<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>
<P>Этот локальный раздел вы можете просмотреть, даже если
ваш компьютер не подключен к Internet
<SCRIPT LANGUAGE="JavaScript">
<!--
colorShift();
// -->
</SCRIPT>
</BODY>
</HTML>
Работа сценария начинается после загрузки документа с вызова функции colorShift. Это вызов расположен в конце области тела документа HTML.
Функция постепенно уменьшает значение красной, зеленой и голубой компоненты цвета. Начальные значения этих компонент хранятся в глобальных переменных nRed, nGreen и nBlue:
var nRed = 255; var nGreen = 255; var nBlue = 255;
Значение цвета фона формируется следующим образом:
document.bgColor = "#" + dec2hex(nRed) + dec2hex(nGreen) + dec2hex(nBlue);
Здесь при помощи функции dec2hex мы преобразуем десятичное значение цветовой компоненты в шестнадцатеричное. Эта функция будет описана подробно позже в разделе “Шестнадцатеричный калькулятор” третьей главы.
Далее после установки цвета фона мы проверяем значение красной цветовой компоненты, и если оно больше нуля, уменьшаем его и значение других цветовых компонент на 10:
if(nRed > 0)
{
nRed -= 10;
nGreen -= 10;
nBlue -= 10;
}
Для того чтобы функция colorShift вызывалась периодически, мы используем метод setTimeout, вызывая его в конце функции:
var cmd = "colorShift()"; timer = window.setTimeout(cmd, 50);
В результате функция colorShift будет вызываться каждые 50 миллисекунд.