Основы Java Script

Основы JavaScript

графический изображение java script

1. JavaScript

Начнем изучение нового языка программирования с классической программы «Hello, world!». Рассмотрим несколько вариантов такой программы, демонстрирующих различные возможности JavaScript.

1.1 Вариация первая: самая простая

На первом этапе мы составим программу JavaScript, которая вставляет слова «Hello, world!» непосредственно в документ HTML. Программы или сценарии JavaScript встраиваются в документ HTML. Взгляните на Листинг 1.1, в которой приведен исходный текст документа с программой, составленной на JavaScript.

Листинг 1.1

JavaScript Test

document.write(" Hello, world!" );

// —>

Как и подобает любому документу HTML, он ограничен операторами ,

и состоит из двух разделов. Раздел заголовка выделяется операторами и , а раздел тела документа - операторами и. Программа JavaScript этом примере встроена в тело документа HTML при помощи операторов, как это показано ниже:

document.write(" Hello, world!" );

// —>

С помощью оператора

Ссылка оформлена с применением операторов, однако между этими операторами нет ни одной строчки исходного текста. Этот текст перенесен в файл hello. js (Листинг 1.3).

Листинг 1.3. Файл hello. js

document.write («

---

«);

document.write («Hello, world!»);

document.write («

---

«);

В параметре SRC вышеприведенного примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако можно указать и относительный путь, и полный адрес URL, например:

JavaScript Test

printHello();

// —>

Прежде всего, обратите внимание на область заголовка документа, выделенную операторами

и. В этой области расположено определение переменной и функции, оформленное с применением операторов:

var szHelloMsg = "Hello, world!" ;

function printHello()

{

document.write(szHelloMsg);

}

// —>

Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом:

printHello ();

// —>

Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение — текстовая строка «Hello, world!» .

Язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем можно легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому необходимо внимательно следить за тем, какие типы данных применяются. Этому способствует использование префиксов имен, по которым можно судить о типе переменной. Например, текстовые строки можно начинать с префикса sz, а численные значения — с префикса n.

Помимо переменной szHelloMsg, в области заголовка документа HTML с помощью ключевого слова function определена функция с именем printHello. Эта функция вызывается из сценария, расположенного в теле документа и выводит в документ HTML значение переменной szHelloMsg.

Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие или используют определенные в документе переменные, то их определения (вызываемых функций и переменных) необходимо разместить выше вызывающих. Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа.

1.4 Вариация четвертая: с диалоговой панелью сообщения

Язык JavaScript имеет встроенные средства для отображения простейших диалоговых панелей, таких как панель сообщений. В Листинг 1.5 приведен исходный текст сценария JavaScript, в котором вызывается функция alert, предназначенная для отображения диалоговых панелей с сообщениями.

Листинг 1.5

function printHello()

{

alert(" Hello, world!" );

}

// —>

JavaScript Test

printHello ();

// —>

Помимо представленной в этом примере диалоговой панели сценарии JavaScript могут выводить на экран и более сложные. В них пользователь может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию.

1.5 Вариация пятая: с диалоговой панелью ввода информации

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

Листинг 1.6

function printHello()

{

szHelloStr=prompt(" Введите приветственное сообщение:" , "" );

document.write(szHelloStr);

}

// —>

JavaScript Test

printHello ();

// —>

===================================================

Диалоговая панель ввода информации вызывается с помощью функции prompt. В качестве параметров функции передается вводное сообщение для пользователя и начальное значение запрашиваемой текстовой строки (в приведенном примере — пустое).

1.6 Вариация шестая: обработка события

В языке JavaScript есть удобные средства обработки событий. В следующем примере когда пользователь пытается выбрать ссылку «Select me!», разместив над ней курсор мыши, на экране появляется диалоговая панель с сообщением «Hello, world!». Исходный текст соответствующего документа HTML с встроенным в него сценарием представлен в Листинг 1.7.

Листинг 1.7

JavaScript Test

Select me!

Здесь для нас интересна строка оператора . Напомним, что этот оператор обычно применяется для организации ссылок на другие документы HTML или файлы различных объектов. В данном случае поле ссылки параметра HREF пустое, однако дополнительно в оператор включена следующая конструкция: onMouseover="alert ('Hello, world!');"

Она указывает, что при возникновении события onMouseover (наведение мыши) должна выполняться следующая строка программы JavaScript: alert ('Hello, world!');

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

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

2. Условные операторы

Любой язык программирования был бы бесполезен, если бы в нем не были предусмотрены те или иные средства ветвления при выполнении программы. В языке JavaScript предусмотрен условный оператор if-else, который позволяет выполнять разные программные строки в зависимости от условия.

2.1 Оператор ветвления

Общий вид оператора if-else представлен ниже:

if (условие) строка 1

[else

строка 2]

Часть оператора, выделенная квадратными скобками, является необязательной.

При выполнении этого оператора оценивается условие, заданное в круглых скобках после ключевого слова if. Если в результате оценки условия получилось логическое значение true, выполняется строка 1. Если же получилось значение false, то выполняется строка 2 (в том случае, когда она присутствует).

Оператор if-else может быть вложенным. Учтите, что если в строке 1 или строке 2 необходимо расположить несколько операторов, их следует выделить фигурными скобками:

if (nYourAge < 18)

{

bAccessDenied = true;

szNextPage = «bye18.html» ;

}

else if (nYourAge > 99)

{

bAccessDenied = true;

szNextPage = «bye99.html» ;

}

else

{

bAccessDenied = false;

szNextPage = «welcome.html» ;

}

Здесь вначале оценивается условие (nYourAge < 18). Если содержимое переменной nYourAge меньше 18, переменной bAccessDenied присваивается значение true, а переменной szNextPage — текстовая строка «bye18.html» .

В противном случае содержимое nYourAge сравнивается с числом 99. Если переменная nYourAge имеет значение, большее, чем 99, в переменную bAccessDenied записывается значение true, а переменную szNextPage — текстовая строка «bye99.html» .

И, наконец, если ни одно из двух условий не было выполнено, то есть значение переменной nYourAge находится в интервале от 18 до 99, в переменную bAccessDenied записывается значение false, а переменную szNextPage — текстовая строка «welcome.html» .

2.2 Встроенный If

Существует также специальный тип условного оператора, который называется оператором ?:. Этот оператор в общем виде записывается так:

выражение? строка 1: строка 2

При вычислении оператора ?: вначале оценивается логическое выражение, расположенное в левой части. Если оно равно true, выполняется строка 1, а если false — строка 2.

Ниже приведен пример использования условного оператора ?: для присвоения значения переменной bAccessDenied в зависимости от содержимого переменной nYourAge:

bAccessDenied =

(nYourAge < 18 || nYourAge > 99)? true: false;

Если значение переменной nYourAge находится в интервале от 18 до 99, переменной bAccessDenied присваивается значение true, а если оно не попадает в этот интервал — false. Традиционное решение этой задачи с помощью оператора else-if заняло бы больше места:

if (nYourAge < 18 || nYourAge > 99)

bAccessDenied = true

else

bAccessDenied = false;

В приведенных выше примерах указывалось составное условие:

(nYourAge < 18 || nYourAge > 99)

В соответствии таблицей старшинства, оператор || вычисляется после операторов < и >. Если вам не хочется разбираться с таблицей старшинства, для указания порядка вычисления можно использовать скобки:

((nYourAge < 18) || (nYourAge > 99))

3. Операторы цикла

В языке JavaScript есть несколько операторов, предназначенных для организации циклов.

3.1 Оператор for

Общий вид оператора for представлен ниже:

for ([инициализация;] [условие;] [итерация])

{

.. .

строки тела цикла

.. .

}

В области инициализации обычно выполняется присваивание начальных значений переменным цикла. Здесь допустимо объявление новых переменных при помощи ключевого слова var. Вторая область задает условие выхода из цикла. Это условие оценивается каждый раз при прохождении цикла. Если в результате оценки получается логическое значение true, выполняются строки тела цикла. Область итерации применяется для изменения значений переменных цикла, например, для увеличения счетчика цикла.

3.2 Оператор for-in

Оператор for-in предназначен для просмотра всех свойств объекта и записывается в следующем виде:

for (переменная in объект)

{

.. .

строки тела цикла

.. .

}

3.3 Оператор while

Для организации итерационных циклов с предусловием используется оператор while:

while (условие)

{

.. .

строки тела цикла

.. .

}

Если в результате оценки условия получается значение true, тогда итерация выполняется, если false — цикл прерывается.

3.4 Оператор break

С помощью оператора break можно прервать выполнение цикла, созданного операторами for или while, в любом месте. Например:

var i = 0;

while (true)

{

.. .

i++;

if (i > 10)

break;

.. .

}

3.5 Оператор continue

Выполнение оператора continue внутри цикла for или while приводит к тому, что итерация прерывается, а затем возобновляется заново. Этот оператор не прерывает цикл. Ниже приведен пример использования оператора continue:

var i = 0;

while (i < 100)

{

i++;

if (i < 10)

continue;

.. .

}

Здесь фрагмент тела цикла, отмеченный многоточием, будет выполняться только после того, как значение переменной i станет равным 10. Когда же это значение достигнет 100, цикл будет завершен.

3.6 Примеры использования операторов цикла

Ниже приведено три примера использования операторов цикла for и while. Во всех этих примерах сценарий отображает в окне документа десять строк «Hello, world!». Исходный текст первого сценария представлен в Листинг 3.1.

Листинг 3.1

var szHelloMsg = "Hello, world!" ;

function printNString(szString, n)

{

var i;

for(i = 0; i < n; i++)

{

document.write(szString + "

");

}

}

function printHello()

{

printNString(szHelloMsg, 10);

}

// —>

JavaScript Test

Message:

printHello ();

// —>

Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра: printNString (szHelloMsg, 10);

Через первый параметр этой функции передается текстовую строка szHelloMsg, а через второй — количество повторов этой строки при выводе. Вывод строки выполняется функцией printNString в цикле:

for (i = 0; i < n; i++)

{

document.write (szString.bold () + «

«);

}

Здесь значение переменной цикла i изменяется от нуля до n, где n — количество повторов. Когда значение переменной цикла достигнет значения n, цикл будет завершен.

В Листинг 3.2 показан сценарий, решающий ту же самую задачу другим методом — с использованием оператора while.

Листинг 3.2

var szHelloMsg = "Hello, world!" ;

function printNString(szString, n)

{

var i;

i = 0;

while(i < n)

{

document.write(szString + "

");

i++;

}

}

function printHello()

{

printNString(szHelloMsg, 10);

}

// —>

JavaScript Test

Message:

printHello ();

// —>

Здесь i также используется как переменная цикла:

i = 0;

while (i < n)

{

document.write (szString.bold () + «

«);

i++;

}

Как работает этот цикл? После вывода строки методом write значение переменной цикла увеличивается на единицу. Затем перед началом следующей итерации проверяется, достигла ли переменная цикла значения n. Если достигла, цикл завершает свою работу.

Совместное применение операторов while и break демонстрируется в сценарии, показанном в Листинг 3.3.

Листинг 3.3

var szHelloMsg = "Hello, world!" ;

function printNString(szString, n)

{

var i;

i = 0;

while(true)

{

document.write(szString + "

");

i++;

if(i > n)

break;

}

}

function printHello()

{

printNString(szHelloMsg, 10);

}

// —>

JavaScript Test

Message:

printHello ();

// —>

Так же как и в предыдущем случае, i используется как переменная цикла, однако в операторе while на месте условия завершения цикла стоит значение true:

i = 0;

while (true)

{

document.write (szString.bold () + «

«);

i++;

if (i > n)

break;

}

Для того, чтобы прервать цикл, применен оператор break. Этот оператор вызывается в том случае, если значение переменной цикла i превысило значение n.

4. Классы и объекты JavaScript

Язык сценариев JavaScript является объектно-ориентированным. Объекты JavaScript представляют собой наборы свойств и методов. Свойства объектов — это данные, связанные с объектом, а методы — функции для обработки данных объекта. Адресация свойств в сценариях JavaScript возможна либо по именам свойств, либо по их номеру. Последнее возможно благодаря тому, что все свойства объекта хранятся как элементы массива и потому каждое свойство имеет свой номер.

4.1 Три типа объектов JavaScript

В языке JavaScript имеется три типа объектов (Рис. 4.1): встроенные объекты, объекты браузера и объекты, которые программист создает самостоятельно. Каждый из этих типов имеет свое назначение и свои особенности.

Рис. 4.1. Три типа объектов

4.1.1 Встроенные объекты

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

Таблица 1

Объект	Описание
Array	Массив
Boolean	Логические данные
Date	Календарная дата
Function	Функция
Global	Глобальные методы
Math	Математические константы и функции
Number	Числа
Object	Объект
String	Строки

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

Как работать со встроенными объектами? Достаточно просто. Программа создает реализации объектов, а затем обращается к свойствам и методам объектов. В качестве примера, имеющего практическое значение, рассмотрим документ HTML, в котором отображается текущая дата и время.

Листинг 4.1

Текущая дата и время

var dt;

var szDate="" ;

dt = new Date();

szDate = "Date: " + dt.getDate() + "."

+ dt.getMonth() + "." + dt.getYear();

document.write(szDate);

document.write("

");

document.write(" Time: " + dt.getHours()

+ ":" + dt.getMinutes() + ":" + dt.getSeconds());

// —>

Здесь сценарий 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());

4.1.2 Объекты браузера

С точки зрения сценария JavaScript браузер представляется иерархически организованным набором объектов.

Обращаясь к свойствам и методам этих объектов можно выполнять различные операции над окном браузера, загруженным в это окно документом HTML, а также над отдельными объектами, размещенными в документе HTML.

Например, можно создавать новые окна браузера, загружая в них документы HTML, динамически формировать текст документа HTML, обращаться к полям форм, определенных в документе HTML и так далее.

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

В сценариях JavaScript нельзя создавать новые классы на базе классов, соответствующих этим объектам, однако свойства и методы объектов браузера доступны.

4.2 Иерархия объектов браузера

На Рис. 4.2 схематически показана иерархия объектов браузера.

Рис. 4.2. Дерево объектов браузера Объект window находится в корне иерархии. Когда в окно браузера загружается документ HTML, внутри этого объекта создаются другие объекты - document, parent, frame, location и top.

Если в окно браузера загружается документ HTML с фреймами, то для каждого фрейма создается отдельное окно, причем это окно создается как объект window.

Объект document содержит в себе другие объекты, состав которых полностью определяется документом HTML, загруженным в окно браузера. Это могут быть формы, ссылки на другие документы HTML или локальные ссылки внутри одного документа, объекты, определяющие адрес URL документа и так далее.

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

Обращаясь к свойствам перечисленных выше объектов, сценарий JavaScript может определить различные характеристики документа HTML, такие как, например, заголовок. Ему доступны все ссылки, размещенные в документе, а также содержимое полей форм, определенных в документе HTML.

4.3 События, связанные с объектами

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

Например, с объектом window связаны события onLoad и onUnload. Первое из этих событий возникает, когда браузер завершает загрузку окна и всех расположенных в нем фреймов (если эти фреймы определены в окне). Второе событие возникает, когда пользователь завершает работу с документом, закрывая окно браузера или переключаясь на другой документ.

Сценарий JavaScript может, например, при обработке события onLoad выводить для пользователя приветственное сообщение или запрашивать дополнительную информацию. При завершении работы с окном (когда возникает событие onUnload) сценарий может освобождать какие-либо ресурсы, связанные с этим окном, или выводить сообщение на экран монитора.

4.4 Объекты на базе классов, создаваемых программистом

В языке JavaScript для создания собственных классов используется подход, отличный от подходов, принятых во многих языках программирования. Класс JavaScript создается как функция, в которой определены свойства, играющие роль данных. Методы также определяются как функции, но отдельно.

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

Прежде всего займемся созданием собственного класса с названием 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. Конструктору передаются параметры для инициализации свойств создаваемых объектов.

Что же касается свойства с именем 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();

Приведем полный исходный текст получившийся программы.

Листинг 4.2

function printTableHead ()

{

var szSec = «» ;

if (this.secure)

szSec = «(Secure)» ;

else

szSec = «(Unsecure)» .fontcolor («red»);

document.write («

«);

document.write («

«);

document.write («

«

+ «

«);

}

function printTableEnd ()

{

document.write («

" +

this.name + «» + this. family + szSec +

"

Поле записи	Содержимое

«);

document.write («

");

}

function printRecord ()

{

document.write («

Name:" +

this.name.italics () + «

«);

document.write («

Family:" +

this.family.italics () + «

«);

document.write («

Phone:" +

this.phone.italics () + «

«);

document.write («

Address:" +

this.address.italics () + «

«);

}

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;

}

// —>

Просмотр записей

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();

// —>

Определение нового класса 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 оператор

с параметром BORDER, с которого начинается определение таблицы, имеющей рамку. Надпись над таблицей задается с помощью динамически формируемого оператора

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

Метод printTableEnd выводит в документ HTML оператор

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

function printTableEnd()

{

document.write(" ");

document.write("

" );

}

Последний метод, определенный в классе, называется printRecord. Он печатает содержимое первых четырех свойств объекта как строку таблицы, определенной в документе HTML только что описанной функцией printTableHead. Обратите внимание, что содержимое свойств объекта печатается наклонным шрифтом, для чего мы вызываем метод italics:

document.write("

Name:" +

this.name.italics() + "

");

Во второй части сценария, расположенной в теле документа HTML, создается два объекта rec1 и rec2 на базе класса myRecord, а затем устанавливается свойство secure объекта rec2 в состояние true.

Далее сценарий последовательно выводит в документ HTML две таблицы, соответствующие созданным объектам, вызывая для этого методы printTableHead, printRecord и printTableEnd.

Как видите, применение собственного класса позволили сильно упростить задачу инициализации и отображения содержимого записей воображаемой телефонной базы данных. Фактически эта задача сведена к вызовам нескольких методов, определенных заранее в нашем классе.

5. Работа с формами

Сценарии JavaScript часто применяются для предварительной обработки данных, введенных пользователями в формах. Проверенные данные затем могут предаваться расширениям CGI сервера Web. Кроме того, с помощью форм и сценариев JavaScript можно создавать активные страницы, способные получать от пользователя и обрабатывать произвольную информацию.

В наиболее общем виде оператор

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

NAME="Имя_формы"

TARGET="Имя_окна"

ACTION="Адрес_URL_расширения_сервера"

METHOD=GET или POST

ENCTYPE="Кодировка_данных"

onSubmit="Обработчик_события_Submit" >

.. .

определение полей и органов управления

.. .

Параметр NAME задает имя формы. Это имя нужно для адресации формы как свойства объекта Document.

Назначение параметра TARGET аналогично назначению этого же параметра в операторе . Когда форма используется для передачи запроса расширению CGI сервера Web, ответ, полученный от сервера, отображается в окне. Имя этого окна задано параметром TARGET. Если ответ должен отображаться в том же окне, что и форма, то параметр TARGET задавать не нужно.

С помощью параметра ACTION указывается адрес URL загрузочного файла программы CGI, а также передаваемые расширению параметры. В том случае, когда форма предназначена для передачи данных расширению сервера Web, параметр ACTION является обязательным. Но если данные, введенные в форме, обрабатываются сценарием JavaScript локально и не передаются серверу Web, этот параметр можно опустить.

Параметр METHOD задает метод передачи данных из формы расширению сервера Web и может принимать значения GET или POST. Если данные из полей формы обрабатываются сценарием JavaScript локально, параметр METHOD задавать не нужно.

Параметр ENCTYPE задает тип MIME передаваемых данных и используется очень редко. Если форма предназначена для передачи текстовых данных (как это обычно бывает), этот параметр по умолчанию имеет значение application/x-www-form-urlencoded. В этом случае для передаваемых данных используется так называемая кодировка URL. Тип данных multipart/form-data позволяет передавать как текстовые, так и двоичные данные. При локальной обработке данных сценарием JavaScript параметр ENCTYPE не задается. Помимо параметров, для формы можно определить обработчик события, связанный с кнопкой типа SUBMIT. Такая кнопка предназначена для посылки данных из заполненной формы расширению сервера Web. Назначив обработчик события, сценарий JavaScript может управлять этим процессом.

5.1 Свойства объекта form

Объект form имеет два набора свойств, состав одного из которых является фиксированным, а состав другого зависит от того, какие поля и органы управления определены в форме. Первый набор свойств ниже:

Таблица 2

Свойство	Описание
action	Содержит значение параметра ACTION
elements	Массив всех элементов (полей и органов управления), определенных в форме
encoding	Содержит значение параметра ENCTYPE
length	Размер массива elements
method	Содержит значение параметра METHOD
target	Содержит значение параметра TARGET

Большинство свойств первого набора просто отражает значения соответствующих параметров оператора

. Вы можете их использовать в сценариях JavaScript для проверки параметров. Что же касается массива elements, то в нем находятся объекты, соответствующие полям и органам управления, определенным в форме. Эти объекты образуют второй набор свойств объекта form:

Таблица 3

Свойство	Описание
button	Кнопка с заданной надписью
checkbox	Переключатель типа Check Box. Может использоваться в составе набора независимых друг от друга переключателей или отдельно
hidden	Скрытое поле, которое не отображается. Содержимое этого поля может быть считано и проанализировано расширением сервера Web, либо сценарием JavaScript
password	Текстовое поле для ввода паролей. Набранный в этом поле текст не отображ. на экране
radio	Переключатель для группы зависимых друг от друга переключателей. Используется обычно для выбора одного значения из нескольких возможных
reset	Кнопка, с помощью которой пользователь может сбросить содержимое полей ввода и состояние переключателей в их исходное состояние
select	Список произвольных текстовых строк
submit	Кнопка для посылки данных из заполненной формы расширению сервера Web. Для этой кнопки можно задать произвольную надпись
text	Однострочное текстовое поле
textarea	Многострочное текстовое поле

5.2 Объекты, входящие в состав форм

5.2.1 Кнопка button

В общем виде кнопка класса button определяется в форме с помощью оператора следующим образом:

NAME="Имя_кнопки"

VALUE="Надпись_на_кнопке"

onClick="Обработчик_события" >

Параметр TYPE оператора должен иметь значение button, как это показано в примере. С помощью параметра NAME задается имя объекта, соответствующего кнопке (а не надпись на кнопке). Надпись на кнопке указывается с помощью параметра VALUE. Определив обработчик события, можно задать сценарий JavaScript, который получит управление после того как пользователь нажмет на кнопку.

5.2.2 Свойства объекта button

Объект button имеет два свойства, отражающие значения соответствующих параметров оператора :

Таблица

Свойство	Описание
name	Значение параметра NAME
value	Значение параметра VALUE

5.2.3 Методы объекта button

Для объекта button определен всего один метод, не имеющий параметров, - click: click()

Вызов этого метода приводит к такому же эффекту, что и щелчок левой клавишей мыши по кнопке.

5.2.4 Пример сценария

В качестве примера приведен сценарий, выполняющий обработку щелчка по кнопке с надписью Click me, расположенной в форме. Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button.

Листинг 5.1

function btnClick ()

{

var szTxt="" ;

var szTxt1="" ;

szTxt=document.TestForm.bt.value;

szTxt1=document.TestForm.bt.name;

document.write («

---

«);

document.write («You press button: «+ szTxt. bold ()

+ «, name=» + szTxt1. bold ());

document.write («

---

«);

}

// —>

Click Button

onClick="btnClick ();" >

5.4 Переключатель checkbox

Переключатели checkbox обычно применяются для выбора каких-либо независимых друг от друга параметров или возможностей. В форме переключатель checkbox создается с помощью оператора с параметром TYPE, равным строке «checkbox» :

NAME="Имя_переключателя_checkbox"

VALUE="Значение"

CHECKED

onClick="Обработчик_события" >

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

С помощью параметра VALUE вы можете определить строку, которая передается расширению сервера при посылке заполненной формы, если переключатель находится во включенном состоянии. Если этот параметр не указан, то по умолчанию посылается строка «on». Сценарий JavaScript также может получить значение параметра VALUE.

Необязательный параметр CHECKED указывается в том случае, если при начальном отображении формы переключатель должен отображаться во включенном состоянии.

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

5.4.1 Свойства объекта checkbox

Объект checkbox имеет несколько свойств, отражающих значения соответствующих параметров оператора :

Таблица 4

Свойство	Описание
name	Значение параметра NAME
checked	Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае — false. С помощью этого свойства сценарий может изменять состояние переключателя
value	Значение параметра VALUE
defaultChecked	Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае — false.

5.4.2 Методы объекта checkbox

Для объекта checkbox определен один метод click, не имеющий параметров: click ()

При вызове этого метода переключатель устанавливается во включенное состояние.

5.5 Переключатель radio

Переключатели типа radio применяются в тех случаях, когда нужно организовать выбор одной из нескольких возможностей. Исходя из этого, в форме обычно располагается несколько таких переключателей. Определение переключателя radio выглядит следующим образом:

NAME=" Имя_переключателя_radio"

VALUE="Значение"

CHECKED

onClick="Обработчик_события" >

Текст, отображаемый рядом с переключателем Назначение параметров NAME, VALUE и CHECKED переключателя radio такое же как и назначение аналогичных параметров переключателя checkbox. Отличие заключается в том, что все переключатели radio, принадлежащие к одной группе, должны иметь одинаковые имена, определенные параметром NAME. Что же касается переключателей checkbox, то если их несколько, то все они должны называться по-разному. Для того чтобы расширение сервера Web или сценарий JavaScript, обрабатывающие форму, могли узнать, какой же из переключателей radio группы находится во включенном состоянии, все такие переключатели должны иметь различные значения VALUE. Кроме того, только один из переключателей radio может быть определен с параметром CHECKED.

5.5.1 Свойства объекта radio

Таблица 5 — Объект radio имеет следующие свойства

Свойство	Описание
name	Значение параметра NAME
checked	Свойство типа Boolean, отражающее состояние переключателя. Если переключатель включен, свойство имеет значение true, в противном случае — false. С помощью этого свойства сценарий может изменять состояние переключателя
length	Количество переключателей типа radio, определенных в группе с именем, заданным параметром NAME
value	Значение параметра VALUE
Default Checked	Свойство типа Boolean, отражающее значение параметра CHECKED. Если параметр CHECKED присутствует в определении переключателя, свойство имеет значение true, в противном случае — false.

5.5.2 Методы объекта radio

Для объекта radio определен метод click, не имеющий параметров: click ()

При вызове этого метода переключатель выбирается для работы.

5.6 Пример формы с переключателями

Пусть документ содержит одну форму, в которой есть три переключателя с независимой фиксацией типа checkbox (расположенные в группе Page elements), три переключателя с зависимой фиксацией (образующие группу Text color), и две кнопки — Create Page и Reset.

Если включен переключатель Show title, создаваемый сценарием JavaScript документ HTML будет снабжен заголовком. При включении переключателя Show horizontal lines информация о состоянии переключателей, отображаемая в документе, будет выделена сверху и снизу горизонтальными разделительными линиями. Переключатель Table view влияет на способ отображения информации. Если он включен, информация будет показана в табличном виде, а если выключен — в виде списка.

Переключатели с зависимой фиксацией группы Text color, расположенные в исходном документе HTML, задают цвет строк при отображении информации в виде списка или цвет названий переключателей при табличном отображении. В нижней части формы находятся две кнопки с надписями Create Page и Reset. Если нажать на первую из этих кнопок, будет вызвана функция JavaScript, которая определит текущее состояние переключателей и сформирует новый документ HTML. Этот документ появится в окне браузера вместо исходного. С помощью кнопки Reset можно установить начальное состояние переключателей. Текст документа HTML со сценарием, выполняющим все описанные выше действия, представлен в Листинг 5.2.

Листинг 5.2

function resetRCHBox ()

{

bTitle=false;

bHorzLine=false;

bTable=false;

szColor="Red" ;

}

function chkRadio (form, value)

{

szColor = value;

}

function btnClick (form)

{

var szTxt="" ;

document.write («

«);

if (bTitle)

document.write («

Switches Checkbox and Radio

«);

if (bHorzLine)

document.write («

---

«);

if (bTable)

{

document.write («

«);

szTxt=» «+ bTitle;

document.write («

«);

szTxt=» «+ bHorzLine;

document.write («

«);

szTxt=» «+ bTable;

document.write («

«);

document.write («

«);

document.write («

Title:	" + szTxt. bold () + «
HorzLine:	» + szTxt. bold () + «
Table:	» + szTxt. bold () + «
Color:	» + szColor. bold () + «

«);

}

else

{

document.write (««);

szTxt=" «+ bTitle;

document.write («

Title: «+ szTxt. bold ());

szTxt=" «+ bHorzLine;

document.write («

HorzLine: «+ szTxt. bold ());

szTxt=" «+ bTable;

document.write («

Table: «+ szTxt. bold ());

document.write («

Color: «+ szColor. bold ());

document.write (««);

}

if (bHorzLine)

document.write («

---

«);

document.write («

«);

}

// —>

var bTitle=false;

var bHorzLine=false;

var bTable=false;

var szColor="Red" ;

// —>

Page elements:

onClick="if (this.checked) {bTitle=true;}" > Show title

onClick="if (this.checked) {bHorzLine=true;}" > Show horizontal lines

onClick="if (this.checked) {bTable=true;}" > Table view

Text color: