Работа с отладчиком Microsoft Script Debugger

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

Switches Checkbox and Radio

.
Аналогичным образом анализируется содержимое переменной bHorzLine:
if(bHorzLine)
  document.write("

---

");
Эта переменная отражает состояние переключателя Show horizontal lines.
Далее функция btnClick анализирует содержимое переменной bTable, отвечающей за способ отображения информации о состоянии переключателей в создаваемом документе HTML:
if(bTable)
{
  . . .
}
else
{
  . . .
}
Если переключатель Table view находится во включенном состоянии, информация отображается в виде таблицы.
При формировании первого столбца таблицы цвет текста внутри ячейки устанавливается в соответствии с содержимым переменной szColor:
szTxt=" " + bTitle;
document.write("Title:" + szTxt.bold() + "");     
Напомним, что эта переменная хранит значение цвета текста, установленное группой переключателей с зависимой фиксацией Text color.
Если состояние переключателей отображается в виде списка строк, цвет текста устанавливается следующим образом:
document.write("");    

Пример сценария, заполняющего поле textarea

Многострочное поле редактирования располагается в формах для того чтобы пользователь мог записать в нем свой отзыв, комментарий, вопрос или аналогичную информацию. При помощи сценария JavaScript нетрудно выполнить предварительное заполнение поля каким-либо текстом.
Например, пусть нам нужно создать форму, предназначенную для отправления через Internet отзыва о работе некоторой программы (рис. 3.11).

Рис. 3.11. Форма для отправки отзыва о работе программы
Если включить переключатель “Благодарность”, сценарий автоматически запишет в поле редактирования дату и время подготовки отзыва, а также текст положительного отзыва. К этому тексту вам останется добавить только подпись.
Для отправки отзыва нажмите кнопку Complete. В результате на экране появится диалоговая панель с текстом положительного отзыва (рис. 3.12).

Рис. 3.12. Диалоговая панель с текстом положительного отзыва
Для того чтобы сообщить изготовителю программы об ошибках, включите переключатель “Проблемы”. Сразу после этого сценарий запишет в многострочное поле текст соответствующего сообщения. Этот текст надо будет отредактировать и дополнить, описав, например, внешние проявления обнаруженной ошибки (рис. 3.13).

Рис. 3.13. Отправка сообщения об ошибке
Нажав кнопку Complete, вы увидите текст сообщения (рис. 3.14).

Рис. 3.14. Полный текст сообщения об ошибке, обнаруженной в программе
Исходный текст документа HTML, в котором определена форма для отправки отзыва, а также обрабатывающий эту форму сценарий JavaScript, представлен в листинге 3.5.
Листинг 3.5. Файл chapter3/textarea/textarea.html

  >
   
   
 
 
   

Пришлите ваш отзыв

   

              onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Благодарность
     
        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Проблемы
              ROWS="5"   COLS="25" WRAP="physical"><br>      
     
   

   
 

Обратите внимание, что в нашей форме многострочное поле редактирования текста textarea создано пустым:
  ROWS="5" COLS="25" WRAP="physical"><br>
Это поле называется “Comment”, имеет пять строк, в которых размещается до 25 символов, и режим свертки текста physical, предполагающий добавление символов новой строки, разделяющих отдельные строки введенного текста.


Как происходит заполнение этого поля?
В самом конце области тела документа HTML, ограниченного операторами и , мы вставили вызов функции init:

Эта функция вызывается после завершения загрузки тела документа и выполняет начальное заполнение многострочного поля редактирования textarea:
Sel.Comment.value = getDate() + szOK;
Строка, которая записывается в это поле, образуется путем сложения строки текущей даты, полученной от функции getDate (эту функцию мы определили в нашем сценарии), со строкой szOK, содержащей текст положительного отзыва.
Функция getDate определена следующим образом:
function getDate()
{
  var szDate = "";
  szDate = new Date();
  return szDate.toLocaleString() + "\n";
}
В этой функции мы сначала создаем объект класса Data, а затем вызываем для этого объекта метод toLocaleString, возвращающий текстовую строку даты.
В верхней части формы находятся два переключателя с зависимой фиксацией. С помощью этих переключателей пользователь может выбрать вид отзыва (благодарность или сообщение об ошибке):
   onClick="if(this.checked)
     {chkRadio(this.form,this.value);}"> Благодарность

   onClick="if(this.checked)
     {chkRadio(this.form,this.value);}"> Проблемы
Оба переключателя относятся к одной группе и потому имеют одинаковое значение параметра NAME. Для первого из них мы дополнительно указали параметр CHECKED, поэтому по умолчанию он находится во включенном состоянии (здесь мы предположили, что количество положительных отзывов будет превышать количество сообщений об ошибках).
Каждый из переключателей имеет обработчик события onClick, определенный следующим образом:
if(this.checked)


{
  chkRadio(this.form,this.value);
}
При изменении состояния переключателя вызывается функция chkRadio. Эта функция проверяет имя включенного переключателя и заполняет поле многострочного редактора textarea соответствующим сообщением:
function chkRadio(form,value)
{
  if(value == "Thanks")
    Sel.Comment.value = getDate() + szOK;
  else
    Sel.Comment.value = getDate() + szTrouble + szProbList;
}
Функция chkRadio комбинирует тексты сообщений из текущей даты и заранее проинициализированных строк szOK, szTrouble и szProbList.
Теперь о том, как наш сценарий получает текст из поля редактирования и отображает его в диалоговой панели.
Для кнопки Complete мы определили обработчик события onClick:

Этот обработчик вызывает функцию Complete, отображающую подготовленный отзыв на экране:
function Complete()
{
  szMsg = Sel.Comment.value;
  alert(szMsg);     
}
Здесь текст извлекается из поля textarea как значение свойства value для соответствующего объекта, а затем отображается на экране при помощи встроенной функции alert.

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

В качестве первого примера мы приведем сценарий, выполняющего обработку щелчка по кнопке с надписью Click me, расположенной в форме (рис. 3.1).

Рис. 3.1. Форма в документе HTML с кнопкой
Если нажать на эту кнопку, сценарий отобразит в окне браузера свойства кнопки как объекта класса button (рис. 3.2).

Рис. 3.2. Отображение свойств кнопки как объекта класса button
Исходный текст документа HTML со встроенным в него сценарием JavaScript приведен в листинге 3.1.
Листинг 3.1. Файл chapter3/button/button.html

  >
   
   
 
 
   

Click Button

   

            onClick="btnClick();">
   

   
 

В теле документа HTML определена форма с именем TestForm, для чего в операторе

мы указали параметр NAME. Другие параметры этого оператора здесь не нужны.
Форма содержит одну-единственную кнопку с именем bt и надписью Click me. Для этой кнопки в качестве обработчика события мы назначили функцию btnClick, определенную в заголовке документа HTML.
Когда пользователь нажимает кнопку, функция btnClick получает управление и сохраняет в текстовых переменных szTxt и szTxt1 надпись и имя кнопки, соответственно:
szTxt=document.TestForm.bt.value;
szTxt1=document.TestForm.bt.name;
Затем функция выводит в окно браузера строку, ограниченную сверху и снизу разделительной линией, отображающую значение свойств value и name:
document.write("

---

");    
document.write("You press button: " + szTxt.bold()
  + ", name=" + szTxt1.bold());    
document.write("

---

");    

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

Приведем три примера использования операторов цикла for и while.
Во всех этих примерах сценарий отображает в окне документа десять строк “Hello, world!”, как это показано на рис. 1.9.

Рис. 1.9. Сценарий отображает в документе HTML десять одинаковых строк
Исходный текст первого сценария представлен в листинге 1.10.
Листинг 1.10. Файл chapter1/Operators/for.html

  >
   
   
 
 
   

JavaScript Test

    Message:

     

Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра:
printNString(szHelloMsg, 10);
Через первый параметр этой функции мы передаем текстовую строку szHelloMsg, а через второй - количество повторов этой строки при выводе.
Вывод строки выполняется функцией printNString в цикле:
for(i = 0; i < n; i++)
{
  document.write(szString.bold() + "
");
}
Здесь значение переменной цикла i изменяется от нуля до n, где n - количество повторов. Когда значение переменной цикла достигнет значения n, цикл будет завершен.
В листинге 1.11 показан сценарий, решающий ту же самую задачу другим методом - с использованием оператора while.
Листинг 1.11. Файл chapter1/Operators/while.html

  >

   
   
 
 
   

JavaScript Test

    Message:

     

Здесь i также используется как переменная цикла:
i = 0;
while(i < n)
{
  document.write(szString.bold() + "
");
  i++;
}
Как работает этот цикл?
После вывода строки методом write значение переменной цикла увеличивается на единицу. Затем перед началом следующей итерации проверяется, достигла ли переменная цикла значения n. Если достигла, цикл завершает свою работу.
Совместное применение операторов while и break демонстрируется в сценарии, показанном в листинге 1.12.
Листинг 1.12. Файл chapter1/Operators/break.html

  >
   
   
 
 
   

JavaScript Test

    Message:

     

Так же как и в предыдущем случае, i используется как переменная цикла, однако в операторе while на месте условия завершения цикла стоит значение true:
i = 0;
while(true)
{
  document.write(szString.bold() + "
");
  i++;
  if(i > n)
    break;
}
Для того чтобы прервать цикл, мы применили оператор break. Этот оператор вызывается в том случае, если значение переменной цикла i превысило значение n.

Примеры сценариев, работающих со списками

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

Присвоение значения переменным

Вы можете присвоить значение переменной при помощи оператора присвоения “=”. Например, ниже мы объявляем переменную и затем записываем в нее текстовую строку:
var szHelloMsg;
szHelloMsg = “Hello, world!”;
В любом месте программы мы можем присвоить переменной szHelloMsg численное значение, например, так:
szHelloMsg = 4;
После выполнения такой операции тип переменной изменится, причем в процессе интерпретации сценария браузер не отобразит никаких предупреждающих сообщений.
Вы можете присвоить переменной специальное значение null:
szHelloMsg = null;
Такое присвоение не назначает переменной никакого типа. Оно  применяется в тех случаях, когда вам нужно объявить переменную и проинициализировать ее, не присваивая этой переменной никакого начального значения и типа. В частности, в только что приведенном примере переменной szHelloMsg не присваивается ни численное значение 0, ни пустая текстовая строка.

Процесс отладки сценария

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

Прочие операторы

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

Оператор		Описание
.		Доступ к полю объекта
[]		Индексирование массива
()		Скобки
,		Запятая

Первый из этих операторов применяется для вызова методов, определенных в объектах, а также для доступа к полям объектов или, как их еще называют, к свойствам объектов.
Ниже, например, мы вызвали метод write, определенный в объекте document:
document.write("Hello, world!");
Квадратные скобки используются для индексации массивов аналогично тому, как это делается в других языках программирования.
Что касается круглых скобок, то они применяются либо для изменения порядка вычисления выражений, либо для передачи параметров функциям.
Оператор запятая предназначен для разделения выражений, которые должны оцениваться последовательно. Этот прием называется многократным вычислением. Например, в фрагменте исходного текста, показанном ниже, на каждой итерации цикла выполняется увеличение содержимого переменных i и nCycleCount:
var i;
var nCycleCount = 0;
for(i = 0; i < 25; i++, nCycleCount++)
{
  . . .
}

Просмотр открытых документов в окне отладчика

Чтобы загрузить в отладчик документ HTML, выберите из меню View строку Running Documents. С помощью этой строки вы можете открыть окно Running Documents, в котором отображается список документов, доступных для отладки (рис. 8.5).

Рис. 8.5. В отладчик загружены два документа HTML
Чтобы открыть документ, достаточно сделать двойной щелчок левой клавишей мыши по соответствующей строке списка.

Просмотр стека вызова функций

Выбрав из меню View строку Call Stack, вы можете просмотреть содержимое стека вызова функций.
В примере, показанном на рис. 8.10, функция printString была вызвана из функции printHello, которая, в свою очередь, была вызвана в глобальном контексте.

Рис. 8.10. Просмотр стека вызова функций
Окно просмотра Call Stack может оказать вам помощь при отладке сценариев с большой глубиной вложенности вызовов функций.

Просмотр значений переменных и свойств объектов

Для того чтобы просмотреть значения переменных или свойств объектов, вам необходимо открыть окно Command Window (рис. 8.7). Это можно сделать при помощи строки Command Window, расположенной в меню View.

Рис. 8.7. Работа с окном Command Window
Для того чтобы просмотреть значение переменной или свойства объекта, достаточно набрать имя этой переменной или ссылку на объект в окне Command Window и нажать клавишу .
На рис. 8.7 мы определили значение свойств navigator.appName, navigator.appVersion, а также значение, записанное в строке szHelloMsg.

Проверка анкеты

Методику работы с текстовыми полями в сценариях JavaScript мы рассмотрим на примере документа HTML с формой для ввода анкеты, показанной на рис. 3.9.

Рис. 3.9. Форма для ввода анкеты
Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю.
Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы (рис. 3.10).

Рис. 3.10. Отображение содержимого полей анкеты
Кнопка Reset устанавливает поля в исходное состояние.
Исходный текст документа HTML с описанной выше формой и сценарием JavaScript вы найдете в листинге 3.4.
Листинг 3.4. Файл chapter3/text/text.html

  >
   
   
 
 
   

Заполните анкету

   
     
      
     

     

     

     

     

Фамилия:	NAME="family"         onChange="this.value=this.value.toUpperCase()"         SIZE="20" >
Имя:	NAME="Name" SIZE="20">
Телефон:	NAME="PhoneNumber" SIZE="10">
Возраст:	NAME="Age" VALUE="18" SIZE="4"         onChange="this.value=CheckAge(this.value)"         onFocus="this.select()"         >

       

       

     

onClick="Complete();">

   

 



Для того чтобы преобразовать символы фамилии в прописные, для поля family мы определили обработчик события onChange:

onChange="this.value=this.value.toUpperCase()"

После внесения изменений в содержимое поля этот обработчик вызывает метод toUpperCase, определенный в классе строк. Преобразованное значение записывается снова в свойство this.value.

Поле Age имеет два обработчика для событий onChange и onFocus:

onChange="this.value=CheckAge(this.value)"

onFocus="this.select()"

Первый из этих обработчиков вызывает функцию проверки возраста CheckAge, передавая ей значение из поля Age. Возвращенное этой функцией значение снова записывается в то же самое поле.

Функция CheckAge выглядит очень просто:

function CheckAge(age)

{

  if(age < 18)

    return "0";

  else

    return age;

}

Если ей передается строка, содержащая число, меньшее 18, она возвращает нулевое значение. В том случае, когда число больше 18 или когда в этом поле находится нечисловое значение, функция CheckAge возвращает переданную ей строку без изменений.


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

Кнопку Complete пользователь нажимает после заполнения анкеты. Для нее мы определили обработчик события onClick:


   onClick="Complete();">

Этот обработчик вызывает функцию с именем Complete, в задачу которой входит отображение содержимого полей формы. Исходный текст функции Complete мы привели ниже:

function Complete()

{

  var szElement="";

  szElement="Фамилия: " + Sel.family.value +

    "\nИмя: " + Sel.Name.value +

    "\nТелефон: " + Sel.PhoneNumber.value +

    "\nВозраст: " + Sel.Age.value;

  alert(szElement);     

}

Обратите внимание на то, как мы адресуемся к свойствам полей формы, указывая имя формы, имена полей и имя свойства value.

Проверка заполнения формы

Для того чтобы сократить количество обращений к расширению сервера Web можно с помощью сценария JavaScript выполнить локальную проверку правильности заполнения формы. О том как проверить содержимое отдельных полей формы вы уже знаете из предыдущих разделов этой главы. Сейчас же мы остановимся на взаимодействии формы, сценария JavaScript и расширения сервера Web, такого как программа CGI или приложение ISAPI.
Если вы ранее занимались созданием расширений сервера Web, обрабатывающих данные, полученные от форм, то знаете, что для посылки данных расширению используется кнопка типа submit. Эта кнопка встраивается в форму следующим образом:
  NAME="Имя_кнопки_submit"
  VALUE="Текст_на_поверхности_кнопки"
  onClick="Обработчик_события">
Параметры NAME и VALUE здесь имеют такое же назначение, что и для изученной нами ранее кнопки типа button.
Обработчик события onClick позволяет сценарию JavaScript выполнить обработку содержимого полей формы, прежде чем данные из этих полей будут переданы расширению сервера Web.
К сожалению, вне зависимости от результатов обработки данные из формы всегда передаются серверу Web, что не всегда удобно. Было бы лучше, если бы сценарий JavaScript мог отказаться от посылки этих данных, если они введены пользователем с ошибкой.
Простейший выход из этой ситуации - замена кнопки типа submit на обычную кнопку button. С этой кнопкой должен быть связан сценарий JavaScript, который проверяет данные, введенные пользователем в поля формы, и посылающий их серверу Web явным образом.
В этом разделе мы приведем исходные тексты документа HTML, предназначенного для ввода идентификатора пользователя и пароля (листинг 3.7). Это документ аналогичен приведенному в предыдущем разделе. В нашем примере с помощью сценария JavaScript мы не только проверяем пароль, но и отправляем данные расширению сервера Web, если пароль введен правильно.
Листинг 3.7. Файл chapter3/validation/validation.html



  >

   

   

 

 

   

Регистрация

   

     

      

     

     

     

Идентификатор:	NAME="id" onChange="this.value=this.value.toUpperCase()"         SIZE="20" >
Пароль:	NAME="pwd" SIZE="20">
Проверка пароля:	NAME="pwd1" SIZE="20">

     

     

       

       

     

onClick="Complete();">

   

 



При определении формы для оператора мы указали параметр ACTION:

Этот параметр задает путь к загрузочному файлу программы CGI, расположенному в каталоге сценариев сервера Web. Отметим, что такой каталог создается администратором сервера Web. С помощью специальной программы администратор указывает права доступа к этому каталогу, разрешающие исполнение расположенных там загрузочных файлов CGI и библиотек динамической компоновки DLL приложений ISAPI. Подробно об этом вы можете прочитать в 29 томе нашей “Библиотеки системного программиста”, который называется “Сервер Web своими руками”.

Функция Complete, которая вызывается при нажатии на одноименную кнопку, проверяет пароли, введенные в полях pwd и pwd1. Если эти пароли совпадают, сценарий посылает данные серверу с помощью метода submit, определенного в форме:

document.forms[0].submit();

Здесь мы обращаемся к первой (и единственной) форме, определенной в нашем документе HTML.

Программа CGI с именем control.exe отображает полученные данные в динамически создаваемом документе HTML (рис. 3.18).



Рис. 3.18. Данные, полученные программой CGI от формы

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

Исходный текст программы CGI, с которой работает наш документ HTML, показан в листинге 3.8.

Листинг 3.8. Файл chapter3/validation/controls/controls.c

// ===============================================

// Программа CGI controls.c

// Получение данных от формы и их

// отображение в документе HTML,

// создаваемом динамически

//

// (C) Фролов А.В., 1997, 1998

// E-mail: frolov@glas.apc.org

// WWW:    http://www.glasnet.ru/~frolov

//         или

//         http://www.dials.ccas.ru/frolov

// ===============================================

#include

#include

#include

// Прототипы функций перекодировки

void DecodeStr(char *szString);

char DecodeHex(char *str);


// ------------------------------------------------

// Функция main

// Точка входа программы CGI

// ------------------------------------------------

void main(int argc, char *argv[])

{

  int lSize;

  FILE * fileReceived;

  char * szMethod;

  char szBuf[8196];

  char szSrcBuf[8196];

  char * szPtr;

  char * szParam;

  // Вывод заголовка HTTP и разделительной строки

  printf("Content-type: text/html\n\n");

  // Вывод начального форагмента документа HTML,

  // формируемого динамически

  printf("
    " \"-//W3C//DTD HTML 3.2//EN\">");

  printf(" >");

  // Определяем метод передачи данных

  szMethod = getenv("REQUEST_METHOD");

  // Обработка метода POST

  if(!strcmp(szMethod, "POST"))

  {

    // Определяем размер данных, полученных от браузера

    // при передаче данных из полей формы

    lSize = atoi(getenv("CONTENT_LENGTH"));

    // Читаем эти данные в буфер szBuf из

    // стандартного потока ввода STDIN

    fread(szBuf, lSize, 1, stdin);

    // Создаем файл, в который будут записаны

    // принятые данные

    fileReceived = fopen("received.dat", "w");

    // Выполняем запись принятых данных

    fwrite(szBuf, lSize, 1, fileReceived);

    // Закрываем файл принятых данных

    fclose(fileReceived);

    // Отображаем значения некоторых переменных среды

    printf("

Переменные среды

");

   

    // Метод доступа

    printf("REQUEST_METHOD = %s", getenv("REQUEST_METHOD"));

    // Размер полученных данных в байтах

    printf("
CONTENT_LENGTH = %ld", lSize);

    // Тип полученных данных

    printf("
CONTENT_TYPE = %s", getenv("CONTENT_TYPE"));


    // Закрываем буфер данных двоичным нулем,

    // превращая его таким образом в строку

    szBuf[lSize] = '\0';

    // Делаем копию принятых данных в буфер szSrcBuf

    strcpy(szSrcBuf, szBuf);

    // Отображаем принятые данные без обработки

    printf("

Принятые данные

");

    printf("%s", szSrcBuf);

    // Выполняем перекодировку принятых данных

    DecodeStr(szSrcBuf);

    // Отображаем результат перекодировки

    printf("

Данные после перекодировки

");

    printf("%s", szSrcBuf);

    // Выводим список значений полей формы

    printf("

Список значений полей

");

   

    // Дописываем в конец буфера принятых данных

    // символ "&", который используется в качестве

    // разделителя значений полей

    szBuf[lSize] = '&';

    szBuf[lSize + 1] = '\0';

    // Цикл по полям формы

    for(szParam = szBuf;;)

    {

      // Ищем очередной разделитель

      szPtr = strchr(szParam, '&');

     

      // Если он найден, раскодируем строку параметров

      if(szPtr != NULL)

      {

        *szPtr = '\0';

        DecodeStr(szParam);

     

        // Выводим в документ значение параметра

        printf("%s
", szParam);

        // Переходим к следующему параметру

        szParam = szPtr + 1;

        // Если достигнут конец буфера, завершаем цикл

        if(szParam >= (szBuf + lSize))

          break;

      }

      else

        break;

    }

   

    // Выводим завершающий фрагмент документа HTML

    printf("");

    return;

  }

}

// ------------------------------------------------

// Функция DecodeStr

// Раскодирование строки из кодировки URL

// ------------------------------------------------

void DecodeStr(char *szString)

{

  int src;

  int dst;


  char ch;

  // Цикл по строке

  for(src=0, dst=0; szString[src]; src++, dst++)

  {

    // Получаем очередной символ перекодируемой строки

    ch = szString[src];

    // Заменяем символ "+" на пробел

    ch = (ch == '+') ? ' ' : ch;

   

    // Сохраняем результат

    szString[dst] = ch;

   

    // Обработка шестнадцатеричных кодов вида "%xx"

    if(ch == '%')

    {

      // Выполняем преобразование строки "%xx"

      // в код символа

      szString[dst] = DecodeHex(&szString[src + 1]);

      src += 2;

    }

  }

 

  // Закрываем строку двоичным нулем

  szString[dst] = '\0';

}

// ------------------------------------------------

// Функция DecodeHex

// Раскодирование строки "%xx"

// ------------------------------------------------

char DecodeHex(char *str)

{

  char ch;

  // Обрабатываем старший разряд

  if(str[0] >= 'A')

    ch = ((str[0] & 0xdf) - 'A') + 10;

  else

    ch = str[0] - '0';

  // Сдвигаем его влево на 4 бита

  ch <<= 4;

  // Обрабатываем младший разряд и складываем

  // его со старшим

  if(str[1] >= 'A')

    ch += ((str[1] & 0xdf) - 'A') + 10;

  else

    ch += str[1] - '0';

  // Возвращаем результат перекодировки

  return ch;

}

Это упрощенный вариант программы CGI, которую мы описали в упомянутом выше 29 томе “Библиотеки системного программиста”. Там вы найдете ее полное описание.

Работа с готовым списком

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

Рис. 3.6. Форма с двумя списками различного размера
Первый из этих списков предназначен для выбора цвета, а второй - размера некоторого предмета (в данном случае не имеет значение, какого именно).
Списки отличаются количеством элементов, видимых одновременно. Для того чтобы увидеть все элементы списка размеров вы можете воспользоваться полосой просмотра, расположенной в правой части этого списка. Что же касается первого списка, то для того чтобы выбрать из него нужный цвет, необходимо сделать щелчок по кнопке с треугольником. При этом список раскроется (рис. 3.7).

Рис. 3.7. Форма с раскрытым списком
Помимо списков, в форме есть две кнопки с надписями Complete и Reset. Кнопка Reset возвращает списки в исходное состояние, в котором они находились сразу после отображения документа HTML. Если же сделать щелчок по кнопке Complete, управление получит сценарий JavaScript, который отобразит выбранный цвет и размер на экране в виде диалоговой панели с сообщением (рис. 3.8).

Рис. 3.8. Выбранный цвет и размер
Исходный текст документа HTML, содержащего форму и сценарий для ее обработки, представлен в листинге 3.3.
Листинг 3.3. Файл chapter3/select/select.html

  >
   
   

 

 

   

Работа со списками

   

      Выберите цвет:   

     

        Черный  

        Белый  

        Красный  

        Оранжевый

        Желтый  

        Зеленый

        Голубой

        Синий

        Фиолетовый

     

      Выберите размер:   

     

        Стандартный

        Большой  

        Средний  

        Маленький

        Очень маленький

     

     

     

       

       

     

onClick="Complete();">

   

 



Как видно из этого листинга, в документе определена форма с именем Sel, содержащая списки ColorList и SizeList. Во втором списке мы задали размер видимой части, указав в операторе параметр SIZE со значением, равным трем. В результате, как это видно из рис. 3.6, в видимой части списка отображается три элемента.

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

szElement="Цвет: " +

Sel.ColorList.options[Sel.ColorList.selectedIndex].value +

  " (" + Sel.ColorList.selectedIndex + ")" +

  "\nРазмер: " +

Sel.SizeList.options[Sel.SizeList.selectedIndex].value +

  " (" + Sel.SizeList.selectedIndex + ")";

alert(szElement);

При этом прежде всего определяются номера элементов, выбранных из списков. Эти номера равны, соответственно, Sel.ColorList.selectedIndex (для списка цветов) и Sel.SizeList.selectedIndex (для списка размеров).

Далее эти номера используются как индексы в массивах options соответствующих списков, содержащих свойства элементов списков. Нас интересует свойство value, при помощи которого можно определить значение для выбранных элементов списков. Каждый элемент наших списков имеет такое значение, заданное при помощи параметра VALUE оператора .

Random

Метод random возвращает случайное число в интервале от 0 до 1.
Пример использования:
var nRandomValue;
nRandomValue = Math.random();

Растровое изображение как объект

Для того чтобы встроить растровое изображение в документ HTML, необходимо использовать оператор . Общий вид этого оператора показан ниже:
  NAME="Имя_изображения"
    . . .
  WIDTH="Ширина"
  HEIGHT="Высота">
Здесь мы указали только три параметра. Полный список параметров оператора с кратким их описанием вы найдете ниже:

Параметр		Описание
SRC		Адрес URL файла с растровым графическим изображением
NAME		Имя объекта, соответствующего растровому графическому изображению. Это имя может быть использовано для ссылки на объект в сценариях JavaScript
ALT		Текстовая строка, которая отображается в тех случаях, когда браузер не может показывать графические изображения или когда такая возможность отключена
ALIGN		Выравнивание текста относительно графического изображения LEFT      по левой границе; RIGHT    по правой границе; TOP        по верхней границе; MIDDLE по центру изображения; BOTTOM                по нижней границе; TEXTTOP              выравнивание по верхней границе относительно самых высоких символов в текстовой строке; ABSMIDDLE         выравнивание середины текстовой строки относительно середины изображения; BASELINE             выравнивание нижней рамки изображения относительно базовой линии текстовой строки; ABSBOTTOM        выравнивание нижней границы изображения относительно нижней границы текущей строки
HEIGHT		Высота изображения в пикселах
WIDTH		Ширина изображения в пикселах
BORDER		Ширина рамки вокруг изображения в пикселах (используется только браузером Netscape Navigator)
HSPACE		Ширина свободного пространства в пикселах, отделяющее изображение от текста по горизонтали
VSPACE		Ширина свободного пространства в пикселах, отделяющее изображение от текста по вертикали
USEMAP		Адрес URL файла, содержащего так называемую карту изображения. Эта карта используется для сегментированной графики
ISMAP		Этот параметр указывает, что данное изображение является сегментированным

<
Параметры оператора определяют адрес файла с изображением, выравнивание текста, расположенного возле изображения и так далее. С помощью параметров HEIGHT и WIDTH вы можете выполнять масштабирование графических изображений. Значение этих параметров можно указывать в процентах от ширины окна просмотра.

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

Применение сегментированной графики мы подробно рассмотрели в 29 томе “Библиотеки системного программиста.

Если в документе HTML размещено несколько растровых изображений, то вы можете адресовать соответствующие объекты как элементы массива document.images. Например, первое изображение адресуется следующим образом: document.images[0]. Однако в некоторых случаях удобнее пользоваться именами изображений, определенными параметром NAME оператора .

Объект-изображение имеет свойство src, соответствующее параметру SRC оператора . Адресуясь к этому свойству, вы можете не только определять текущий адрес URL изображения, но и задавать новый. Этим мы воспользуемся в следующем разделе нашей книги.

Round

Метод round предназначен для выполнения округления значения аргумента до ближайшего целого. Если десятичная часть числа равна 0,5 или больше этого значения, то выполняется округление в большую сторону, если меньше - в меньшую.
Пример использования:
var nValue;
nValue = Math.round(1.8);
После выполнения округления значение nValue будет равно 2.

Сценарии, работающие с объектами window

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

Счетчик посещений на базе cookie и программы CGI

Последний пример, приведенный в этой главе, показывает основные приемы работы с cookie в программах CGI и сценарии JavaScript, вставляемом в тело динамически формируемого документа HTML.
Внешний вид исходного документа HTML, вызывающего программы CGI, показан на рис. 7.10.

Рис. 7.10. Документ HTML, вызывающий программу CGI
Как видно из этого рисунка, в документе определена форма с двумя кнопками. Обе эти кнопки предназначены для вызова одной и той же программы CGI, но с разными параметрами.
Если нажать на кнопку с надписью Go to page, программа GCI создаст документ HTML, предварительно проанализировав заголовок пришедшего к ней запроса на предмет наличия в нем информации о cookie. Кнопка Remove All Cookies предназначена для вызова программы CGI с целью удаления cookie.
В том случае, когда этой информации нет, программа CGI динамически сформирует документ HTML, добавив к его заголовку HTTP заголовок Set-Cookie (рис. 7.11).

Рис. 7.11. Документ HTML, создаваемый программой CGI при первом посещении
При последующих посещениях cookie уже определен, и наша программа CGI получает его значение, интерпретируя это значение как счетчик посещений. Затем она увеличивает значение счетчика на единицу, и записывает заголовок Set-Cookie в заголовок HTTP создаваемого документа HTML с новым значением cookie.
Значение счетчика посещений отображается в теле документа (рис. 7.12).

Рис. 7.12. Документ HTML, создаваемый программой CGI при третьем посещении
Далее программа CGI вставляет в текст этого документа сценарий JavaScript, расположенный в отдельном файле. Данный сценарий определяет значение cookie своими средствами и отображает его вместе со значением счетчика посещений в многострочном окне редактирования.
Исходный документ HTML представлен в листинге 7.7.
Листинг 7.7. Файл chapter7/AgainCGI/AgainCGI.html

  >
   
 
 
   

Visit our page!

   

     

       

   

     

   

   

 



В этом документе определены две формы.

Первая форма предназначена для вызова программы CGI с параметром go, а вторая - с параметром clear.

Исходный текст программы CGI, использованной в нашем примере, вы найдете в листинге 7.8.

Листинг 7.8. Файл chapter7/AgainCGI/Again.c

// ===============================================

// Расширение CGI, предназначенное для

// работы с cookie

//

// (C) Фролов А.В., 1998

// E-mail: frolov@glas.apc.org

// WWW:    http://www.glasnet.ru/~frolov

//         или

//         http://www.dials.ccas.ru/frolov

// ===============================================

#include

#include

#include

#include

// Прототипы функций, определенных в нашей программе

char *findCookie(char * szName);

void insertHTML(char * pszFileName, char * pszBuf);

void main(int argc, char *argv[])

{

  char * pszQueryString;

  char * pszCookie;

  char * pszMyCookie;

  int nCount;

  char szBuf[4096];

  char szBuf1[20];

 

  // Заголовок для добавления cookie

  char szCookieHeader[] =

    "Set-Cookie: AgainCount=0;\r\nContent-type: text/html\r\n\r\n";

 

  // Заголовок для удаления cookie

  char szCookieRemoveHeader[] =

    "Set-Cookie: AgainCount=0;expires=Mon 03-May-1993 12:00:00 GMT;"

    "\r\nContent-type: text/html;\r\n\r\n";

  // Получаем параметр запуска CGI

  pszQueryString = getenv("QUERY_STRING");

  // Получаем строку Cookie из заголовка HTTP

  pszCookie = getenv("HTTP_COOKIE");

  // Посещение страницы

  if(!strcmp(pszQueryString, "go"))

  {


    // Если cookie не обнаружен, создаем его

    if(pszCookie == NULL)

    {

      // Выводим заголовок для создания cookie

      printf("Content-type: text/html\r\n");

      printf(szCookieHeader);

     

      // Выводим приглашение для первого посещения

      printf(" >");

      printf("

Welcome to our page!

");

    }

    else

    {

      // Получаем значение параметра cookie

      // с именем AgainCount

      pszMyCookie = findCookie("AgainCount");

      if(pszMyCookie != NULL)

      {

        // Преобразуем это значение в число и увеличиваем

        // на единицу при каждом посещении

        nCount = atoi(pszMyCookie);

        nCount++;

        sprintf(szBuf1, "%d", nCount);

        // Выводим заголовок для обновления cookie

        printf("Content-type: text/html\r\n");

        strcpy(szBuf, "Set-Cookie: AgainCount=");

        strcat(szBuf, szBuf1);

        strcat(szBuf, ";\r\nContent-type: text/html\r\n\r\n");

        printf(szBuf);

        // Выводим приглашение для повторных посещений

        printf("

Welcome to our page AGAIN!

");

       

        // Выводим счетчик посещений

        printf("Access count: %s",szBuf1);

        // Вставляем документ HTML с текстом сценария

        // JavaScript, который тоже работает с cookie

        insertHTML("script.ht", szBuf);

        printf(szBuf);

      }

    }

  }

  // Удаление cookie

  else if(!strcmp(pszQueryString, "clear"))

  {

    // Выводим заголовок для удаления cookie

    printf("Content-type: text/html\r\n");

    printf(szCookieRemoveHeader);

    // Выводим сообщение об успешном удалении cookie

    printf(" >");


    printf("Cookie Removed");

  }

  printf("");

}

// -----------------------------------------------

// findCookie

// Получение значение параметра cookie по его

// имени

// -----------------------------------------------

char *findCookie(char * szName)

{

  char * pszCookie;

  char * pszBegin;

  char * pszEnd;

  char szBuf[4096];

  // Получаем текстовую строку cookie

  pszCookie = getenv("HTTP_COOKIE");

  if(pszCookie != NULL)

  {

    // Копируем ее в рабочий буфер

    strcpy(szBuf, pszCookie);

    // Ищем в строке имя параметра

    pszBegin = strstr(szBuf, szName);

    if(pszBegin == NULL)

      return NULL;

   

    else

    {

      // Пропускаем символ равенства

      pszBegin += strlen(szName) + 1;

      // Ищем символ ; и заменяем его на

      // двоичный нуль

      pszEnd = strstr(pszBegin, ";");

      if(pszEnd != NULL)

        *pszEnd = 0;

      // Возвращаем значение параметра

      return pszBegin;

    }

  }

}

// -----------------------------------------------

// insertHTML

// Вставка в буфер содержимого текстового файла

// -----------------------------------------------

void insertHTML(char * pszFileName, char * pszBuf)

{

  HFILE hSrcFile;

  DWORD dwFileSize;

  // Открываем файл

  hSrcFile = _lopen(pszFileName, OF_READ);

  // Определяем его длину

  dwFileSize = _llseek(hSrcFile, 0, 2);

 

  // Устанавливаем указатель на начало файла

  _llseek(hSrcFile, 0, 0);

  // Читаем файл в буфер

  _hread(hSrcFile, pszBuf, dwFileSize);

  // Закрываем буфер двоичным нулем

  pszBuf[dwFileSize] = '\0';

  // Закрываем файл

  _lclose(hSrcFile);

}

В переменной szCookieHeader мы подготовили заголовок Set-Cookie, предназначенный для создания параметра cookie с именем AgainCount:

char szCookieHeader[] =

 "Set-Cookie: AgainCount=0;\r\nContent-type: text/html\r\n\r\n";


Начальное значение этого параметра равно нулю.

Заголовок, хранящийся в переменной szCookieRemoveHeader, предназначен для удаления cookie:

char szCookieRemoveHeader[] =

  "Set-Cookie: AgainCount=0;expires=Mon 03-May-1993 12:00:00 GMT;\r\nContent-type: text/html;\r\n\r\n";

Эффект удаления достигается благодаря тому, что в параметре expires мы указали уже наступившую дату.

Сразу после запуска программа CGI получает значение переменных среды QUERY_STRING и HTTP_COOKIE:

pszQueryString = getenv("QUERY_STRING");

pszCookie = getenv("HTTP_COOKIE");

В первой из них хранится параметр запуска программы CGI, а во второй - строка cookie (если она определена).

Далее наша программа анализирует параметр запуска.

Если программа вызвана с параметром go, она проверяет переменную pszCookie. В эту переменную функция getenv записывает строку cookie или значение NULL, если cookie не определено.

При первом посещении cookie еще нет, поэтому наша программа добавляет к заголовку HTTP формируемого документа заголовок Set-Cookie:

printf("Content-type: text/html\r\n");

printf(szCookieHeader);

Затем программа выводит приглашение для первого посещения и завершает свою работу.

В том случае, если в принятом запросе уже имеется информация о cookie, программа CGI извлекает значение параметра cookie с именем AgainCount, вызывая для этого функцию findCookie:

pszMyCookie = findCookie("AgainCount");

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

Полученная строка преобразуется в численное значение при помощи функции atoi, после чего это значение увеличивается на единицу, преобразуется обратно в тестовую строку и записывается в буфер szBuf1:

nCount = atoi(pszMyCookie);

nCount++;

sprintf(szBuf1, "%d", nCount);

На следующем этапе программа формирует заголовок Set-Cookie с новым значением параметра AgainCount:

printf("Content-type: text/html\r\n");

strcpy(szBuf, "Set-Cookie: AgainCount=");


strcat(szBuf, szBuf1);

strcat(szBuf, ";\r\nContent-type: text/html\r\n\r\n");

printf(szBuf);

Этот заголовок вместе с заголовком Content-type записывается в создаваемый документ HTML.

Далее после вывода приглашения для повторного посещения страницы программа CGI записывает в документ новое значение счетчика посещений:

printf("Access count: %s",szBuf1);

И, наконец, перед завершением своей работы программа вставляет в текст документа HTML файл со сценарием JavaScript, вызывая для этого функцию insertHTML:

insertHTML("script.ht", szBuf);

Эта функция определена в нашей программе, как и функция findCookie.

Когда программа CGI вызывается для удаления cookie с параметром clear, она выводит специально предназначенный для этого заголовок с просроченной датой:

printf("Content-type: text/html\r\n");

printf(szCookieRemoveHeader);

Теперь мы кратко расскажем о работе функции findCookie.

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

Далее, вызывая функцию strstr, мы ищем в рабочем буфере имя нужного нам параметра cookie. Если это имя найдено, то мы пропускаем символ равенства, ищем символ разделителя ‘;’ и заменяем его на двоичный нуль. После выполнения всех этих действий наша функция возвращает адрес искомой строки со значением нужного нам параметра cookie.

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

Текст сценария, вставляемого функцией insertHTML в динамически формируемый документ HTML, представлен в листинге 7.9.

Листинг 7.9. Файл chapter7/AgainCGI/script.ht

---

Cookie information from JavaScript:

  <br> <br>     ROWS="3" COLS="25"><br><br>  

   



С функцией findCookie вы уже знакомы. Она предназначена для получения значения параметра cookie по его имени.

После завершения загрузки документа HTML наш сценарий при помощи этой функции получает текущее значение параметра cookie с именем AgainCount, установленное программой CGI:

var szMyText="";

szMyText = findCookie("AgainCount");

Далее это значение добавляется к полной строке cookie и отображается в многострочном поле редактирования:

TestForm.Comment.value =

 "Cookie: " + document.cookie + "\nAccess count: " + szMyText;

Форма, содержащая поле редактирования, определена в начале вставляемого файла сценария JavaScript.

Семь вариаций на тему “Hello, world!”

Мы продолжим хорошую традицию начинать изучение нового языка программирования с классической программы “Hello, world!”, впервые составленной создателями языка С. В этом разделе вы найдете несколько вариантов такой программы, демонстрирующих различные (но пока не самые впечатляющие) возможности JavaScript.

SetDate

Метод setDate используется для установки календарной даты в объекте класса Date.
Пример использования:
dtNewDate.setDate(nDateNumber);
Параметр nDateNumber может принимать значения от 1 до 31.

SetHours

Метод setHours используется для установки количества часов, прошедших после полуночи, в объекте класса Date.
Пример использования:
dtNewDate.setHours(nHours);
Параметр nHours может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.

SetMinutes

Метод setMinutes используется для установки количества минут, прошедших после начала часа, в объекте класса Date.
Пример использования:
dtNewDate.setMinutes(nMinutes);
Параметр nMinutes может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.

SetMonth

Метод setMonth используется для установки номера месяца, прошедшего с начала года, в объекте класса Date.
Пример использования:
dtNewDate.setMonth(nMonth);
Параметр nMonth может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.

SetSeconds

Метод setSeconds используется для установки количества секунд, прошедших с начала минуты, в объекте класса Date.
Пример использования:
dtNewDate.setSeconds(nSeconds);
Параметр nSeconds может принимать любые положительные или отрицательные значения. При необходимости происходит соответствующее изменение календарной даты, записанной в объекте класса Date.

SetTime

С помощью метода setTime можно установить дату в объекте класса Date, соответствующую заданному количеству миллисекунд, прошедших после 1 января 1970 года.
Пример использования:
dtNewDate.setTime(nMilliseconds);

SetYear

Метод setYear используется для установки номера года, в объекте класса Date.
Пример использования:
dtNewDate.setYear(nsetYear);

Шестнадцатеричный калькулятор

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

Рис. 3.19. Калькулятор, выполненный на языке сценариев JavaScript
Калькулятор создан в документе HTML как форма с двумя текстовыми полями и кнопками, расположенными в ячейках таблицы.
С помощью кнопок 0 - F можно вводить шестнадцатеричные числа, которые будут отображаться в текстовом поле Hex. В поле Dec находится десятичное значение введенного шестнадцатеричного числа или результата вычислений.
Кнопки “+”, “-“, “*” и “/” предназначены, соответственно, для выполнения операции сложения, вычитания, умножения и деления. При помощи кнопки “Enter” можно получить результат вычислений. Кнопка CE позволяет стереть текущее введенное число, а кнопка C - сбросить промежуточный результат вычислений и текущее введенное число.
Исходный текст документа HTML с калькулятором представлен в листинге 3.9.
Листинг 3.9. Файл chapter3/hexcalc/hexcalc.html

>
 
 

 

 

   

     

       

         

         

       

        

         

         

       

       

         

         

         

         

       

       

         


         

         

         

       

       

         

         

         

         

       

       

         

         

         

         

       

        


         

         

         

         

       

       

         

         

         

       

     

Hex:
Dec:

   

 



Рассмотрим наиболее интересные моменты.

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

  . . .



  . . .



  . . .

Это значение устанавливается параметром VALUE.

Обратите внимание, что для текстовых полей displayHex и displayDec мы предусмотрели обработчики событий onFocus. Этот обработчик получает управление, когда пользователь передает полю фокус ввода. Задача обработчика заключается в том, чтобы снова отобрать фокус ввода, предотвратив непосредственное редактирование числа пользователем.


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

INPUT TYPE="button" NAME="F" VALUE=" F " onClick="putNumber(this,this.form);">

Этой функции передаются два параметра - нажатая кнопка (как объект класса button) и форма, в которой эта кнопка находится.

Задача функции putNumber - ввод числа и его отображение в двух текстовых полях, расположенных в верхней части калькулятора:

function putNumber(btn,form)

{

  var szOld = "";

  var szNew = "";

  if(newnumber)

  {

    form.displayHex.value = "";

    form.displayDec.value = "";

    newnumber = false; 

  }

   

  szOld = form.displayHex.value;

  

  szNew = szOld.concat(btn.name);

  nCurrent = eval("0x" + szNew);

  

  form.displayHex.value = szNew;

  form.displayDec.value = nCurrent;

}

В самом начале функция putNumber проверяет двоичную переменную newnumber. Если значение этой переменной равно true, пользователь вводит первую цифру нового числа. В этом случае функция putNumber сбрасывает содержимое текстовых полей displayHex и displayDec, а также устанавливает значение newnumber, равное false.

Далее функция добавляет введенную пользователем цифру спереди к переменной szOld, равной текущему значению из поля displayHex. При этом она вызывает метод concat из класса String, предназначенный для слияния (конкатенации) строк.

На следующем этапе к введенному шестнадцатеричному числу добавляется префикс “0x”, после чего происходит вычисление текущего значения функцией eval. Эта функция пытается интерпретировать текстовую строку, переданную ей в качестве параметра, как арифметическое выражение, возвращая результат интерпретации в виде численного значения. Этот результат сохраняется в переменной nCurrent и отображается в текстовом поле displayDec (исходное шестнадцатеричное число отображается в поле displayHex).

Если после ввода числа пользователь нажимает одну из четырех кнопок, предназначенных для выполнения операций сложения, вычитания, умножения и деления, вызываются функции, назначенные для этих кнопок в обработчике события onClick. Это функции plusOp (сложение), minusOp (вычитание), mulOp (умножение) и divOp (деление).


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

function plusOp(form)

{

  var result;

  result = total + " " + lastOperation + " " +

    form.displayDec.value;

  total = eval(result);

  lastOperation = "+"; 

  form.displayHex.value = dec2hex(total); 

  form.displayDec.value = total; 

  newnumber = true;

}

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

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

С помощью функции eval функция plusOp вычисляет результат операции и записывает его в переменную total. Затем в переменную lastOperation записывается код операции сложения - строка “+”.

На следующем этапе функция plusOp преобразует значение total с помощью функции dec2hex и отображает результат в шестнадцатеричном виде в поле displayHex, а также в двоичном - в поле displayDec.

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

Функция getResult вызывается, когда пользователь нажимает на клавишу нашего калькулятора с надписью “Enter”:

function getResult(form)

{

  var result;

  result = total + lastOperation + eval("0x" +

    form.displayHex.value);

  total = eval(result);

  form.displayHex.value = dec2hex(total); 

  form.displayDec.value = total; 

  newnumber = true;

}

От только что описанной функции plusOp эта функция отличается лишь тем, что она не изменяет значение переменной lastOperation (так как данная кнопка служит для получения итогового результата, а не для выполнения арифметической операции).


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

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

Алгоритм преобразования десятичного числа в шестнадцатеричное основан на делении исходного числа на 16 в цикле. Если целая часть результата деления, вычисляемая с помощью метода Math.floor, оказывается меньше 16, цикл завершается. В противном случае остаток от деления рассматривается как значение текущего шестнадцатеричного разряда.

Для того чтобы получить символическое представление шестнадцатеричного числа по его значению, мы извлекаем нужный символ из строки szHexTable, вызывая для этого метод charAt:

szBuf=szHexTable.charAt(nRem);

szResult = szBuf.concat(szResult);

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

Sin

Вычисление синуса.
Пример использования:
var nValue;
nValue = Math.sin(nAngle);

События для объекта window

С объектом класса window связаны два события - onLoad и onUnload. Первое из них возникает, когда браузер заканчивает загрузку окна или всех окон фреймов, определенных оператором , а второе - когда пользователь завершает работу с документом HTML.
В своем сценарии вы можете предусмотреть обработку этих событий, назначив для каждого из них свою функцию. Функция, которая вызывается при завершении загрузки документа, может выполнять какие-либо инициализирующие действия, создавать дополнительные окна или выводить сообщения. Обработчик события onUnload может освобождать полученные ресурсы или выводить какие-либо дополнительные сообщения.
В качестве примера рассмотрим следующий фрагмент документа HTML, содержащий сценарий:
. . .
function Hello()
{
  window.alert("Welcome to my home page!")
}
function Bye()
{
  window.alert("Bye! Come back again!")
}
  . . .

  . . .
Здесь в операторе мы определили обработчики событий onLoad и onUnload. При возникновении первого события будет вызываться функция Hello, а при возникновении второго события - функция Bye. Заметим, что так как документ HTML интерпретируется в направлении сверху вниз, функции Hello и Bye необходимо определить до появления оператора . Лучшее место для определения этих функций - заголовок документа HTML.
Если вам нужно проследить загрузку всех фреймов, вы можете указать обработчик события onLoad в операторе .

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

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

Создание анимационных изображений

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

Рис. 5.2. Анимация с помощью сценария JavaScript
В окне браузера последовательно отображаются кадры анимационного изображения (рис. 5.3), причем сначала в прямой, а затем - в обратной последовательности. Это выглядит так, как будто слово Noise периодически тонет в цветном шуме и затем проявляется вновь. Заметим, что похожий эффект мы уже получали совершенно другими средствами в аплете Java, исходный текст которого был опубликован в журнале “Мир ПК” №1 за 1998 год.


Рис. 5.3. Изображения отдельных кадров анимационной последовательности
Также мы обратим ваше внимание, что для достижения подобного эффекта при помощи многосекционного файла GIF размер этого файла было бы необходимо удвоить. Причина этого заключается в том, что вам пришлось бы включить в файл кадры вначале в прямой, а затем в обратной последовательности. Сценарий JavaScript позволяет более тонко управлять процессом отображения кадров, что можно использовать для достижения достаточно сложных визуальных эффектов относительно простыми средствами.
Исходный текст документа HTML, в котором имеется сценарий, выполняющий анимацию, показан в листинге 5.2.
Листинг 5.2. Файл chapter5/noise/noise.html

  >
   
   

 

 

   

   

 



В теле документа с помощью оператора мы разместили первый кадр анимационной последовательности:



С помощью параметра NAME мы задали имя Img. Это имя будет использовано сценарием JavaScript для ссылки на объект.

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

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

var i=1;

var bForward=true;

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

В переменной bForward хранится направление изменения номера кадра. Значение true соответствует прямому направлению, а значение false - обратному.

Когда функция showNextImage получает управление, она анализирует содержимое переменной bForward. Если в этой переменной находится значение true, функция showNextImage увеличивает значение переменной i, а затем сравнивает результат с числом 17. Когда отображение всех кадров в прямой последовательности завершено, в переменную bForward записывается false, после чего при следующем вызове функции showNextImage номер текущего кадра будет не увеличиваться, а уменьшаться.

Для отображения очередного кадра функция showNextImage изменяет значение свойства src изображения document.Img, как это показано ниже:

document.Img.src= "img0" + i + ".gif";

Имя файла, в котором хранится изображение кадра, конструируется из строки “img0”, номера кадра, и строки “.gif”.

Последнее, что делает функция showNextImage перед тем как возвратить управление, - вызывает функцию setTimeout:

setTimeout("showNextImage()", 100);

Напомним, что функция setTimeout устанавливает таймер. Задержка срабатывания таймера определяется вторым параметром и в нашем случае равна 100 миллисекундам.

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

Создание cookie

Существуют два способа создание cookie, первый из которых используется расширениями сервера Web, а второй - сценариями JavaScript. Мы рассмотрим оба этих способа.

Список select

С помощью оператора  вы можете разместить внутри формы список, допускающий выбор одной или просмотр нескольких строк. Формат оператора мы привели ниже:
   SIZE="Размер_списка"
   MULTIPLE
   onBlur="Обработчик_события"
   onChange="Обработчик_события"
   onFocus="Обработчик_события">
   Текст
   ...
   Текст

Все параметры оператора необязательные, однако для того чтобы сценарий JavaScript мог работать со списком, необходимо указать по крайней мере параметр NAME, определяющий имя списка.
Параметр SIZE задает размер видимой части списка в строках.
Если указан необязательный параметр MULTIPLE, объект select является списком просмотра, а не списком выбора.
Список может быть создан пустым и впоследствии заполнен сценарием JavaScript, или уже содержащим один или несколько элементов. Для определения элементов списка предназначен оператор .
Оператор   может иметь два параметра - VALUE и SELECTED.
Параметр VALUE определяет значение, которое передается расширению сервера Web. С помощью параметра SELECTED отмечается строка списка, выделенная по умолчанию при начальном отображении формы.
После оператора следует текст, отображаемый в строках списка.

Sqrt

Вычисление квадратного корня от аргумента.
Пример использования:
var nValueSqrt;
nValueSqrt = Math.sqrt(nArg);

Свойство SQRT2 - это значение квадратного корня из 2.

Пример использования:

var nValue;

nValue = Math.SQRT2;

Ссылки и метки в документе

Как мы уже рассказывали в 29 томе “Библиотеки системного программиста” с названием “Сервер Web своими руками”, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать оператор . В общем виде этот оператор представлен ниже:
   NAME="Имя локальной метки"
   TARGET="Имя окна"
   onClick="Обработчик события: щелчок по ссылке"
   onMouseOver="Обработчик события: курсор над ссылкой">
   Текст ссылки

Описание параметров оператора мы привели ниже:

Параметр		Описание
HREF		Параметр HREF задает адрес URL или имя локальной метки документа, куда будет сделан переход по ссылке
NAME		Если указан параметр NAME, оператор определяет локальную метку. Значение этого параметра задает имя метки
TARGET		Параметр TARGET задает имя окна, куда будет загружен документ при выполнении ссылки. Это может быть имя существующего окна фрейма, определенного с помощью оператора , или одним из следующих зарезервированных имен - _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 оператора . С помощью этого оператора мы разместили ссылку в документе 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



  >

   

   

 

 

   

Просмотр ссылок

   

     

     

     

   

    Посетите эти серверы:

    Наша домашняя страница

   
Каталог программ Auramedia


   
Страница сервера Microsoft про Java

    Пишите нам по адресу: frolov@glas.apc.org

   

---

   

Список ссылок

    Этот список сформирован динамически сценарием JavaScript


   

 



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


function urlJump()

{

  var szNewURL="";

  szNewURL =

     document.links[Sel.ListOfLinks.selectedIndex];

  window.location.href=szNewURL;

}

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

 

 

 

Имя формы, необходимое сценарию JavaScript для доступа к списку и кнопке, определено в параметре NAME оператора

как Sel.

Список с именем ListOfLinks создается оператором . Первоначально в списке нет ни одного элемента. Все элементы будут добавлены в список сценарием 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
{

  . . .

}

Количество ссылок находится в свойстве 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("

---

");

var szText=document.links[i] + "
";

document.write(szText.bold());

Вслед за этим в документ HTML записываются все свойства ссылки, извлеченные из текущего элемента массива links. Например, имя узла и номер порта извлекаются и записываются в документ HTML следующим образом:

document.write("host: ".italics() + document.links[i].host + "
");

Последнее, что делает наш сценарий уже после завершения цикла, это выделение первого элемента в списке Sel.ListOfLinks:

Sel.ListOfLinks.selectedIndex=0;

Для этого номер выделяемого элемента (в нашем случае это 0) записывается в свойство списка с именем selectedIndex.

Старшинство операторов JavaScript

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

Оператор		Описание
. [] ()		Доступ к полю, индексирование в массиве, вызов функции
++ -- - ~ !		Унарные операторы
* / %		Умножение, деление, вычисление остатка от деления
+ - +		Сложение, вычитание, слияние текстовых строк
<< >> >>>		Битовые сдвиги
< <= > >=		Меньше, меньше или равно, больше, больше или равно
== !=		Равенство, неравенство
&		Логическая операция И
^		Логическая операция ИСКЛЮЧАЮЩЕЕ ИЛИ
|		Логическая операция ИЛИ
&&		Логический оператор отношения И
		Логический оператор отношения ИЛИ
?:		Условный оператор
= += -= *= /= %= >>= >>>= <<= |= &= ^=		Присваивание
,		Многократное вычисление

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

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

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

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

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

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

Свойства объекта document

Перечислим свойства объекта 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		Заголовок документа, заданный с помощью оператора ");       document.write("");       document.write(" JavaScript Test ");       document.write("Hello, world!");       document.write("");     // -->         Если в предыдущем примере мы встраивали фрагменты сценария в область заголовка и в тело документа HTML, то сейчас весь сценарий находится в заголовке. Наш документ HTML не содержит ничего, кроме сценария JavaScript. Когда такой документ загружается в окно браузера, программа JavaScript формирует недостающую часть заголовка (с помощью операторов         JavaScript Test       Как и подобает любому документу HTML, он ограничен операторами , и состоит из двух разделов. Раздел заголовка выделяется операторами > и , а раздел тела документа - операторами и  . В литературе операторы языка HTML часто называют тегами. В заголовке нашего документа нет ничего необычного. Оператор устанавливает белый цвет фона документа, а операторы и задают стилевое оформление первой строки документа “JavaScript Test”, которая служит строкой заголовка первого уровня. Что же касается собственно программы JavaScript, то в нашем первом примере она встроена в документ HTML при помощи операторов , как это показано ниже: С помощью оператора     Для продолжения загрузки страницы необходимо нажать кнопку OK. Только после этого содержимое страницы (состоящее в данном случае из одной строки заголовка) появится на экране. Помимо представленной в этом примере диалоговой панели сценарии JavaScript могут выводить на экран и более сложные. В них пользователь может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию. Подробнее об этом мы расскажем позже. Вариация седьмая: с определением типа браузера Последний пример сценария, который мы рассмотрим в этом разделе, показывает, как программа JavaScript может легко определить тип и версию браузера. На рис. 1.6 показан результат просмотра документа HTML с этим сценарием при помощи браузера Microsoft Internet Explorer. Рис. 1.6. Информация о браузере Microsoft Internet Explorer То, что вы увидите, просмотрев этот же документ браузером Netscape Navigator, представлено на рис. 1.7. Рис. 1.7. Информация о браузере Netscape Navigator Давайте посмотрим на текст сценария, позволяющего извлекать подобную информацию. Он представлен в листинге 1.8. Листинг 1.8. Файл chapter1/HelloInfo/HelloInfo.html   >             Something about you...               Здесь сценарий JavaScript формирует в документе HTML строки таблицы, записывая в них названия различных свойств объекта navigator и значения, соответствующие этим свойствам. Объект navigator - это сам браузер. Обращаясь к свойствам этого объекта,  можно получить различную информацию о браузере. Наиболее интересны для нас свойства  navigator.appName и navigator.appVersion, так как они позволяют однозначно определить тип браузера и его версию. Обладая этой информацией, вы можете динамически “приспособить” документ HTML к навигатору, установленному у пользователя. Заметим, что в браузере Microsoft Internet Explorer реализован еще один метод определения версии браузера, который мы рассмотрим позже. К сожалению, этот метод несовместим с браузером Netscape Navigator. Вариация шестая: обработка события В языке JavaScript есть удобные средства обработки событий. В нашем следующем примере когда пользователь пытается выбрать ссылку “Select me!” (рис. 1.5), разместив над ней курсор мыши, на экране появляется диалоговая панель Microsoft Internet Explorer с сообщением “Hello, world!”. Рис. 1.5. Диалоговая панель появляется, когда пользователь размещает курсор мыши над ссылкой Исходный текст соответствующего документа HTML с встроенным в него сценарием представлен в листинге 1.7. Листинг 1.7. Файл chapter1/HelloOnSelect/HelloOnSelect.html   >             JavaScript Test         Select me!   Здесь для нас интересна строка оператора . Напомним, что этот оператор обычно применяется для организации ссылок на другие документы HTML или файлы различных объектов. В данном случае поле ссылки параметра HREF пустое, однако дополнительно в оператор включена следующая конструкция: onMouseover="alert('Hello, world!');" Она указывает, что при возникновении события onMouseover должна выполняться следующая строка программы JavaScript: alert('Hello, world!'); Обратите внимание, что строка задана не в двойных кавычках, а в одинарных. В сценариях JavaScript допустимо использовать и те, и другие  кавычки, однако закрывающая кавычка должна быть такой же, что и открывающая. Внутренняя пара кавычек должна отличаться от внешней. Вы можете установить обработчики таких событий, как загрузка страницы, щелчок по ссылке или кнопке формы,  выбор ссылки или поля формы и других событий. Более подробно обработка событий будет рассмотрена позже. Вариация третья: с переменной и функциями В сценариях JavaScript активно применяют функции и переменные. Подробно об этом мы расскажем в следующих разделах этой главы, а сейчас приведем исходный текст простой программы, в которой используется одна переменная и две функции (листинг 1.4). Листинг 1.4. Файл chapter1/HelloFn/HelloFn.html   >                 JavaScript Test     Message:         Эта программа записывает в документ сообщение “Hello, world!”, выделяя его жирным шрифтом (рис. 1.3). Рис. 1.3. Сообщение выделено жирным шрифтом Рассмотрим исходный текст нашего документа HTML и встроенного в него сценария JavaScript. Прежде всего, обратите внимание на область заголовка документа, выделенную операторами > и . В этой области расположено определение одной переменной и двух функций, оформленное с применением операторов : Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом:   Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение - текстовая строка  "Hello, world!". Заметим, что в отличие от Java, язык JavaScript не является типизированным. Это означает, что программист не может указать явным образом тип создаваемых им переменных. Этот тип определяется интерпретатором JavaScript автоматически, когда переменной в первый раз присваивается какое-либо значение. В дальнейшем вы можете легко изменить тип переменной, просто присвоив ей значение другого типа. Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому мы рекомендуем вам внимательно следить за тем, какие типы данных вы применяете. Не исключено, что вам поможет использование префиксов имен, по которым можно судить о типе переменной. Эти префиксы хорошо знакомы программистам, создававшим приложения для операционной системы Microsoft Windows на языке программирования С. Например, текстовые строки можно начинать с префикса sz, а численные значения - с префикса n. Помимо переменной szHelloMsg, в области заголовка документа HTML мы определили с помощью ключевого слова function две функции с именами printString и printHello. Первая из этих функций выводит в документ HTML строку, передаваемую ей в качестве параметра, а вторая выводит сообщение “Hello, world!”, вызывая для этого первую функцию. Интерпретация документа HTML и встроенных в него сценариев происходит по мере загрузки документа. Поэтому если в сценарии одни функции вызывает другие, необходимо разместить определения вызываемых функций выше вызывающих. Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа. Изучая приведенный в листинге 1.4 исходный текст, обратите внимание на функцию printString: function printString(szString) {   document.write(szString.bold()); } Здесь для объекта document вызывается метод write. В качестве параметра мы передаем этому методу объект szString, вызвав для него метод bold. Значит, переменная szString, определенная с помощью ключевого слова var, является объектом? После того как мы присвоили этой переменной значение текстовой строки, она стала объектом встроенного класса текстовых строк, для которого определены несколько методов. С помощью этих методов можно выполнять различные операции над текстовыми строками, такие как извлечение подстрок, преобразование символов из прописных в заглавные и обратно, наложение шрифтового оформления и так далее. Разумеется, для того чтобы выделить сообщение жирным шрифтом, мы могли использовать и обычную конструкцию языка HTML: var szHelloMsg = "Hello, world!"; Однако в данном случая нам хотелось продемонстрировать возможность вызова методов для переменных типа текстовых строк. Вариация вторая: с секретным исходным текстом Как нетрудно догадаться, исходный текст нашего сценария, расположенный в документе HTML, легко доступен для просмотра любому пользователю, загрузившему этот документ в браузер. Чтобы ознакомиться с ним, достаточно выбрать в меню View строку Source (для браузера Microsoft Internet Explorer) или Document Source (для браузера Netscape Navigator). Поэтому хотя технически нетрудно применить сценарий JavaScript для ввода, например, пароля доступа к той или иной странице вашего сервера, едва ли это будет целесообразно. Есть ли средство защитить исходные тексты ваших сценариев от просмотра, одновременно обеспечив их выполнение? Если ваши пользователи работают с браузером Microsoft Internet Explorer версии 4.0 или с браузером Netscape Navigator, то есть. Это средство - параметр SRC оператора   Ссылка оформлена с применением операторов , однако между этими операторами нет ни одной строчки исходного текста. Мы перенесли этот текст в файл hello.js (листинг 1.3). Листинг 1.3. Файл chapter1/SecretHello/hello.js document.write(" "); document.write("Hello from JavaScript!"); document.write(" "); В параметр SRC нашего примера задано только имя файла, так как он находится в том же каталоге, что и ссылающийся на него файл документа HTML. Однако вы можете указать и полный адрес URL, например: Этот способ работает в браузерах Microsoft Internet Explorer версии 3.02, 4.0 и Netscape Navigator версии 3.01. Использовать ли вам параметр SRC при создании своих страниц? Если вы создаете сервер в сети Internet, то необходимо учитывать тот факт, что пользователи применяют различные браузеры. Наибольшей популярностью по-прежнему пользуется браузер фирмы Netscape, однако доля владельцев бесплатного браузера Microsoft Internet Explorer стремительно растет. Кроме того, есть еще браузеры, работающие на платформе UNIX. На ваш сервер могут зайти даже такие пользователи, которые просматривает страницы серверов Web в текстовом режиме при помощи программы Lynx. Если вам нужно обеспечить максимальную посещаемость своего сервера, его необходимо сделать так, чтобы с ним можно было работать при помощи любого браузера. Не следует думать, что если вы напишете на главной странице, что ее нужно просматривать только браузером Netscape Navigator, то все владельцы Microsoft Internet Explorer сразу бросятся загружать файл этого браузера из сети. Скорее всего они просто уйдут с вашего сервера на чей-нибудь другой, чтобы больше никогда не вернуться назад. Лучшее решение заключается в том, чтобы сервер сам определял тип браузера пользователя, подстраиваясь автоматически под его возможности без лишних слов и вопросов. Эта, казалось бы, трудная задача, легко решается при помощи сценариев JavaScript, в чем вы еще сможете убедиться. Встраивание аплета Java в документ HTML Для того чтобы встроить аплет в документ HTML, вы должны воспользоваться оператором , например:     CODE=MyApplet.class     NAME=”MyApplet”     ID=MyApplet     WIDTH=320     HEIGHT=240> Перечислим допустимые параметры оператора : Параметр Описание ALIGN Выравнивание окна аплета относительно окружающего его текста. Возможны следующие значения: LEFT      выравнивание влево относительно окружающего текста; CENTER               центрирование; RIGHT    выравнивание вправо относительно окружающего текста; TOP        выравнивание по верхней границе; MIDDLE центрирование по вертикали; BOTTOM                выравнивание по нижней границе ALT С помощью этого параметра можно задать текст, который будет отображаться в окне аплета в том случае, если браузер не может работать с аплетами Java CODE Имя двоичного файла, содержащего код аплета. По умолчанию путь к этому файлу указывается относительно каталога с файлом HTML, куда встроен аплет. Такое поведение может быть изменено параметром CODEBASE CODEBASE Базовый адрес URL аплета, то есть путь к каталогу, содержащему аплет HEIGHT Начальная ширина окна аплета в пикселах WIDTH Начальная высота окна аплета в пикселах HSPACE Зазор слева и справа от окна аплета VSPACE Зазор сверху и снизу от окна аплета NAME Имя аплета. Оно может быть использовано другими аплетами, расположенными в одном и том же документе HTML, а также сценариями JavaScript TITLE Строка заголовка Дополнительно между операторами и вы можете задать параметры аплета. Для этого используется оператор . Пользуясь операторами , расположенными в документе HTML сразу после оператора , можно передать аплету произвольное количество параметров, например, в виде текстовых строк: CODE=MyApplet.class     NAME=”MyApplet”     ID=MyApplet     WIDTH=320     HEIGHT=240>                      . . . Здесь через параметр NAME оператора передается имя параметра аплета, а через параметр VALUE - значение соответствующего параметра. Встроенные функции В этом разделе мы перечислим несколько полезных встроенных функций, которые вы можете использовать в своих сценариях JavaScript. eval Функция eval предназначена для преобразования текстовой строки в численное значение. Через единственный параметр она получает текстовую строку и вычисляет ее как выражение языка JavaScript. Функция возвращает результат вычисления: var nValue = Eval(szStr); 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); Встроенные объекты Ниже мы перечислили встроенные объекты, свойства и методы которых доступны в сценариях 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   >             Show date and time       Здесь сценарий 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. Просмотр локальной даты и времени Применение других встроенных объектов мы продемонстрируем позже по мере изучения материала. Встроенный класс Date С помощью методов встроенного класса Date сценарий JavaScript может выполнять различные действия с часами компьютера, например, получать и устанавливать текущую дату и время. Ниже мы приведем краткое описание конструкторов и методов этого класса. Встроенный класс Math Хотя сценарии JavaScript редко применяют для математических вычислений, в нем все же есть встроенный класс Math, предназначенный как раз для этого. В этом классе есть очень полезные методы, которые мы будем применять в наших примерах. Второй способ: создание cookie в сценарии JavaScript Второй способ предполагает использование свойства document.cookie. Это свойство мы упомянули, рассказывая о свойствах и методах объекта document, создаваемого для документа HTML, загруженного в окно браузера. В общем виде сценарий JavaScript может создать cookie следующим образом: document.cookie =   “Имя=Значение; Здесь мы просто записываем в свойство cookie объекта document текстовую строку, определяющую cookie. Для пересчета текущей даты в формат GMT в сценариях JavaScript можно использовать встроенные функции, о чем мы скоро расскажем. В качестве примера приведем исходный текст функции addCookie, которую мы будем использовать в своих сценариях для создания cookie: function addCookie(szName,szValue,dtDaysExpires) {    var dtExpires = new Date();    var dtExpiryDate = "";    dtExpires.setTime(dtExpires.getTime() +      dtDaysExpires * 24 * 60 * 60 * 1000);    dtExpiryDate = dtExpires.toGMTString();    document.cookie =     szName + "=" + szValue + "; expires=" + dtExpiryDate; } Функция addCookie получает три параметра. Через параметр szName передается имя параметра, хранящегося в cookie. Параметр szValue определяет значение этого параметра cookie. Что же касается последнего параметра с именем dtDaysExpires, то он задает интервал времени по отношению к моменту создания cookie, когда этот cookie необходимо удалить. Самое сложное в функции addCookie - это определение даты удаления cookie и преобразование этой даты в формат GMT. Данная задача решается следующим образом. Прежде всего функция addCookie создает объект класса Date с помощью ключевого слова new: var dtExpires = new Date(); Записанная таким образом в переменную dtExpires дата соответствует моменту вызова функции addCookie. Далее с помощью метода getTime функция addCookie определяет текущую дату в миллисекундах и прибавляет к результату значение параметра dtDaysExpires, полученное функцией, умноженное на константу (24 * 60 * 60 * 1000): dtExpires.getTime() + dtDaysExpires * 24 * 60 * 60 * 1000 Константа представляет собой количество часов в сутках, умноженное на количество минут в часе, затем на количество секунд в минуте, и, наконец, на количество миллисекунд в секунде. Результат вычислений записывается при помощи метода setTime в переменную даты dtExpires. Теперь здесь хранится дата автоматического уничтожения cookie браузером. Осталось лишь преобразовать эту дату в формат GMT. Такое преобразование нетрудно сделать с помощью специально предназначенного для этого метода toGMTString, возвращающего текстовую строку в нужном нам формате: dtExpiryDate = dtExpires.toGMTString(); Теперь нам остается только сформировать текстовую строку определения cookie и записать ее в свойство document.cookie: document.cookie =   szName + "=" + szValue + "; expires=" + dtExpiryDate; На этом создание cookie завершено. Теперь, когда в вашем распоряжении есть функция addCookie, создание cookie представляет собой очень простую задачу. Например, в следующей строке мы создаем cookie с именем Count, значением 0, причем через 10 дней браузер автоматически удалит этот cookie: addCookie("Count","0",10); При необходимости использования других параметров cookie, таких как path или domain, вы можете немного дополнить текст функции addCookie. С этой задачей вы легко справитесь самостоятельно. Ввод идентификатора и пароля В качестве практического примера применения сценария JavaScript для обработки информации из полей text и password приведем документ HTML, предназначенный для регистрации пользователей. В форме регистрации новый пользователь должен ввести свой идентификатор, а также задать пароль (3.15). Рис. 3.15. Форма для регистрации нового пользователя В процессе ввода пароля легко допустить ошибку, поэтому обычно в системах регистрации требуется вводить новый пароль два раза. Если оба раза был введен одинаковый пароль, то он становится активным для данного пользователя. Наш сценарий, обрабатывающий данные из формы, показанной на рис. 3.15, решает две задачи. Во-первых, он преобразует символы идентификатора пользователя в прописные. Во-вторых, сценарий проверяет идентичность паролей, введенных в полях “Пароль” и “Проверка пароля”. Если введенные пароли идентичны, то после нажатия на кнопку Complete пользователь увидит на экране диалоговую панель с введенным идентификатором и паролем (рис. 3.16). Рис. 3.16. Диалоговая панель с идентификатором и паролем нового пользователя Если пароли не совпадают, сценарий предлагает пользователю повторить ввод паролей (рис. 3.17). Рис. 3.17. Приглашение для повторного ввода пароля Исходный текст нашего документа HTML, регистрирующего новых пользователей, показан в листинге 3.6. Листинг 3.6. Файл chapter3/password/password.html   >                 Регистрация                                    Идентификатор:         NAME="id" onChange="this.value=this.value.toUpperCase()"         SIZE="20" > Пароль:         NAME="pwd" SIZE="20"> Проверка пароля:         NAME="pwd1" SIZE="20">                                           onClick="Complete();">       Преобразование символов идентификатора пользователя выполняет обработчик события onChange, определенный для поля id типа text:   onChange="this.value=this.value.toUpperCase()" SIZE="20"> Это преобразование выполняет функция toUpperCase, которой мы уже пользовались раньше. Что же касается проверки пароля, то этим занимается функция Complete, определенная в качестве обработчика события onClick для одноименной кнопки, предназначенной для посылки заполненной формы. Вот исходный текст этой функции: function Complete() {   if(Sel.pwd.value != Sel.pwd1.value)     alert("Ошибка при вводе пароля\nПопробуйте еще раз");    else      {     var szId="";     var szPwd="";     szId = Sel.id.value;     szPwd = Sel.pwd.value;     alert("Регистрация выполнена:\n" + "ID=" +       szId + "\nPassword=" + szPwd);    } } Если пользователь ввел разные пароли, значения свойств Sel.pwd.value и Sel.pwd1.value не совпадают. В этом случае функция Complete отображает диалоговую панель с сообщением об ошибке. При совпадении паролей функция Complete извлекает значения идентификатора пользователя Sel.id.value и его пароля Sel.pwd.value, а затем отображает их на экране. Выполнение основных операций с cookie Рассмотрим основные операции с cookie, такие как создание cookie, получение и изменение значений параметров cookies, а также удаление cookie. Выполнение сценария в непрерывном режиме Если после остановки выполнения сценария выбрать из меню Debug строку Run, работа сценария будет продолжена. В этом режиме сценарий будет выполняться до тех пор, пока не будет достигнута точка останова или пока в процессе интерпретации не будет обнаружена ошибка. Выполнение сценария в пошаговом режиме Когда выполнение сценария было приостановлено, вы можете его продолжить в пошаговом режиме. Для этого у вас есть три возможности, которые влияют на режим трассировки вызовов функций. Во-первых, вы можете выполнить один шаг сценария с трассировкой вызовов функций. Для этого из меню Debug нужно выбрать строку Step Into. Во-вторых, можно выполнять вызываемые функции без трассировки, воспользовавшись строкой Step Over меню Debug. И, наконец, в-третьих, можно выбрать из меню Debug строку Step Out. В этом случае останов произойдет на выходе из функции. Вызов методов аплета Java из сценария JavaScript Сценарий JavaScript может получить доступ к полям и методам аплетов, расположенных в документе HTML, адресуясь к аплетам как к элементам массива document.applets. Например, для доступа к первому аплету вы можете использовать строку document.applets[0]. Однако удобнее указывать имя аплета, заданное в параметре NAME оператора , например document.MyApplet. В качестве примера покажем, как можно вызывать из сценария JavaScript методы аплета Rectangles, описанного нами в упомянутом выше 32 томе “Библиотеки системного программиста”. Этот аплет рисует в своем окне прямоугольники случайного размера, закрашенные случайным цветом. Мы создали документ HTML, разместив в нем аплет Rectangles и форму с кнопками Start Animation и Stop Animation (рис. 6.1). Рис. 6.1. Аплет Rectangles управляется кнопками с помощью сценария JavaScript Сразу после загрузки документа в окне аплета запускается процесс анимации. Если нажать кнопку Stop Animation, рисование новых прямоугольников будет приостановлено. С помощью кнопки Start Animation можно возобновить процесс рисования. Заметим, что если поместить курсор мыши в область окна аплета, анимация будет остановлена, а когда курсор мыши покинет пределы окна аплета - снова запущена. Однако такое поведение определяется самим аплетом и не имеет отношения к нашему сценарию JavaScript. Исходный текст документа HTML, содержащий аплет и форму с кнопками, представлен в листинге 6.1. Листинг 6.1. Файл chapter6/Rectangles/Rectangles.html   >                       CODE=Rectangles.class       NAME="Rectangles"       ID=Rectangles       WIDTH=320       HEIGHT=240 >                                 The source.   Здесь параметр NAME оператора задает имя аплета как Rectangles. Когда пользователь нажимает на кнопку Start Animation, управление получает обработчик события onClick, определенный следующим образом: onClick="document.Rectangles.start()" Этот обработчик вызывает метод start, определенный в аплете Rectangles. Этот метод запускает анимацию в окне аплета, если она была остановлена. Аналогично, обработчик события onClick кнопки Stop Animation вызывает метод stop, также определенный в аплете Rectangles и предназначенный для остановки анимации: onClick="document.Rectangles.stop()" Исходный текст аплета Rectangles мы воспроизвели в листинге 6.2. Подробное описание этого аплета вы найдете в разделе “Приложение Rectangles” первой главы 32 тома “Библиотеки системного программиста”. Листинг 6.2. Файл chapter6/Rectangles/Rectangles.java // ========================================================= // Рисование прямоугольников в отдельной задаче // // (C) Фролов А.В, 1997, 1998 // // E-mail: frolov@glas.apc.org // WWW:    http://www.glasnet.ru/~frolov //            или //         http://www.dials.ccas.ru/frolov // ========================================================= import java.applet.*; import java.awt.*; import java.util.*; public class Rectangles extends Applet implements Runnable {   // Ссылка на задачу рисования прямоугольников   Thread m_Rectangles = null;   // -------------------------------------------------------   // getAppletInfo   // Метод, возвращающей строку информации об аплете   // -------------------------------------------------------   public String getAppletInfo()   {     return "Name: Rectangles\r\n" +       "Author: Alexandr Frolov\r\n" +       "E-mail: frolov@glas.apc.org" +       "WWW:    http://www.glasnet.ru/~frolov" +       "Created with Microsoft Visual J++ Version 1.0";   }   // -------------------------------------------------------   // paint   // Метод paint, выполняющий рисование в окне аплета   // -------------------------------------------------------   public void paint(Graphics g)   {     // Определяем текущие размеры окна аплета     Dimension dimAppWndDimension = size();         // Выбираем в контекст отображения желтый цвет     g.setColor(Color.yellow);         // Закрашиваем внутреннюю область окна аплета     g.fillRect(0, 0,       dimAppWndDimension.width  - 1,       dimAppWndDimension.height - 1);     // Выбираем в контекст отображения черный цвет     g.setColor(Color.black);     // Рисуем рамку вокруг окна аплета     g.drawRect(0, 0,       dimAppWndDimension.width  - 1,       dimAppWndDimension.height - 1);   }   // -------------------------------------------------------   // start   // Метод вызывается при первом отображении окна аплета   // -------------------------------------------------------   public void start()   {     if (m_Rectangles == null)     {       m_Rectangles = new Thread(this);       m_Rectangles.start();     }   }     // -------------------------------------------------------   // stop   // Метод вызывается, когда окно аплета исчезает с экрана   // -------------------------------------------------------   public void stop()   {     if (m_Rectangles != null)     {       m_Rectangles.stop();       m_Rectangles = null;     }   }   // -------------------------------------------------------   // run   // Метод, который работает в рамках отдельной задачи   // Он рисует в окне аплета прямоугольники случайного   // цвета, размера и расположения   // -------------------------------------------------------   public void run()   {     // Получаем контекст отображения для окна аплета     Graphics g = getGraphics();     // Определяем текущие размеры окна аплета     Dimension dimAppWndDimension = size();     while (true)     {       int x, y, width, height;       int rColor, gColor, bColor;             // Выбираем случайным образом размеры       // и расположение рисуемого прямоугольника       x = (int)(dimAppWndDimension.width * Math.random());       y = (int)(dimAppWndDimension.height * Math.random());       width = (int)(dimAppWndDimension.width *               Math.random()) / 2;       height = (int)(dimAppWndDimension.height *               Math.random()) / 2;              // Выбираем случайный цвет для рисования       // прямоугольника       rColor = (int)(255 * Math.random());       gColor = (int)(255 * Math.random());       bColor = (int)(255 * Math.random());       // Устанавливаем выбранный цвет в контексте       // отображения       g.setColor(new Color(rColor, gColor, bColor));       // Рисуем прямоугольник       g.fillRect(x, y, width, height);       // Выполняем задержку на 50 миллисекунд       try       {         Thread.sleep(50);       }       catch (InterruptedException e)       {         stop();       }     }   }   // -------------------------------------------------------   // mouseEnter   // Метод вызывается, когда курсор мыши оказывается над   // окном аплета   // -------------------------------------------------------   public boolean mouseEnter(Event evt, int x, int y)   {     if (m_Rectangles != null)     {       // Когда курсор мыши оказывается над поверхностью       // окна аплета, временно приостанавливаем       // задачу рисования прямоугольников       m_Rectangles.suspend();     }     return true;   }   // -------------------------------------------------------   // mouseExit   // Метод вызывается, когда курсор мыши покидает   // окно аплета   // -------------------------------------------------------   public boolean mouseExit(Event evt, int x, int y)   {     if (m_Rectangles != null)     {       // Когда курсор мыши покидает окно аплета,       // возобновляем работу задачи рисования       // прямоугольников       m_Rectangles.resume();     }     return true;   } } Взаимодействие между фреймами С помощью сценариев JavaScript вы можете наделить фреймы возможностями, недостижимыми с применением одного лишь только языка разметки гипертекста HTML. Например, один из фреймов может содержать ссылки на документы, которые при активизации этих ссылок загружаются в окно другого фрейма. Сценарий JavaScript позволит загружать таким образом не один документ, а одновременно несколько документов в разные фреймы. Пример организации такого взаимодействия мы рассмотрим немного позже, а сейчас на конкретном примере расскажем о том, как можно передавать данные между объектами форм, расположенных в разных фреймах. Загрузка документа HTML в окно браузера В разделе этой главы с названием “Открываем новое окно” мы рассказали вам о том, как сценарий JavaScript может открыть новое окно, загрузив в него документ HTML. Однако часто возникает и другая задача - отобразить новый документ HTML в текущем окне браузера, не создавая новое окно. Наш следующий сценарий (листинг 2.7) решает как раз эту задачу. Листинг 2.7. Файл chapter2/JumpTo/JumpTo.html   >                 Jump to other Web page                 onClick="urlJump();">           Когда в пользователь нажимает кнопку Jump в форме selectForm (показанной на рис. 2.15), запускается функция urlJump. Рис. 2.15. Кнопка Jump, предназначенная для перехода к просмотру другой страницы Web Эта функция  вызывает метод 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 Записная книжка Cookies Notepad В следующем примере мы применили cookie для хранения произвольного текста, набранного пользователем в многострочном окне редактирования (рис. 7.4). Рис. 7.4. Документ с записной книжкой Cookies Notepad При первой загрузке документа HTML с записной книжкой окно редактирования остается пустым. Вы можете набрать здесь любой текст и записать его в cookie, нажав кнопку Store text. Если теперь закрыть документ HTML и открыть его вновь, набранный вами ранее текст появится в окне редактирования. Для того чтобы удалить текст и cookie, достаточно нажать кнопку Clear text. Исходный текст документа HTML с записной книжкой Cookies Notepad представлен в листинге 7.2. Листинг 7.2. Файл chapter7/Notebook/Notebook.html   >                 Cookies Notepad           <br>         ROWS="5" COLS="25" WRAP="physical"><br><br>                   onClick="btnClick();">             onClick="removeCookie('MyText');TestForm.Comment.value=''">               Функция addCookie, использованная нами в этом документе, имеет одну особенность: перед записью текстовой строки в параметр cookie она выполняет ее кодировку в формате URL, вызывая для этого функцию escape: document.cookie = szName + "=" + escape(szValue) + "; expires=" + dtExpiryDate; Это необходимо по той причине, что введенный в окне редактирования текст может содержать пробелы и любые другие символы. Аналогичные изменения мы внесли и в функцию findCookie. Эта функция возвращает значение, перекодированное в обычный текст функцией unescape, выполняющей действия, обратные по отношению к функции escape: szTemp = document.cookie.substring(   nStartPosition,nEndPosition);  return unescape(szTemp); Когда пользователь нажимает кнопку Store text, вызывается функция btnClick: function btnClick() {   addCookie("MyText",TestForm.Comment.value,10); } Эта функция просто записывает в параметр cookie с именем MyText текстовую строку, извлеченную из многострочного поля редактирования TestForm.Comment.value. При удалении текста кнопкой Clear text вызывается функция removeCookie, удаляющая параметр cookie с именем 'MyText, а также записывается пустая строка в окно многострочного редактирования:   onClick = "removeCookie('MyText'); TestForm.Comment.value=''"> В самом конце тела документа HTML находится небольшой фрагмент сценария JavaScript, запускающийся сразу после загрузки этого документа: var szMyText=""; szMyText = findCookie("MyText"); if(szMyText != "") {   TestForm.Comment.value = szMyText; } Этот фрагмент пытается получить значение параметра cookie с именем MyText. Если это ему удается и функция findCookie возвращает непустую строку, полученная строка записывается в окно многострочного поля редактирования TestForm.Comment.value. В результате сразу после загрузки документа это окно оказывается заполненным текстом, сохраненным в cookie. Вы можете посмотреть системный файл, хранящий данные cookie. Для этого откройте каталог Temporary Internet Files, расположенный в системном каталоге Microsoft Windows 95 или Microsoft Windows NT. Там должен быть файл и именем Notebook\. Вы можете скопировать этот файл, например, на поверхность рабочего стола и открыть для просмотра любым текстовым редактором. Вы увидите примерно это: MyText 0 642302464 29173566 2120102016 29171554 * В самом начале файла видно имя MyText параметра cookie. На следующих строках до строки ~~local~~ расположено значение параметра MyText, соответствующее тексту, показанному на рис. 7.4. Вслед за строкой ~~local~~ идет локальный адрес URL документа и другие параметры cookies, такие как дата, по достижению которой браузер удалит cookie. Если удалить файл Notebook\ и затем открыть документ HTML, многострочное окно редактирования будет пустым. Удалив этот файл, мы удалим и расположенный в нем cookie. Запуск отладчика через меню браузера Для того чтобы запустить отладчик Microsoft Script Debugger через меню браузера, откройте меню View и выберите там меню второго уровня Script Debuger. В этом меню есть две строки: Open и Break at next Statement. Первая из них просто открывает окно отладчика, а вторая - запускает отладчик и останавливает сценарий на следующей строке. Вы можете попробовать оба режима, например, для одного из сценариев, приведенных нами в первой главе нашей книги. Запуск сценария в режиме отладки Мы рассмотрим три способа запуска сценария в режиме отладки. Первый из них предполагает встраивание команды вызова отладчика непосредственно в текст сценария. При втором способе запуск отладчика  выполняется из меню браузера Microsoft Internet Explorer. Третий способ - автоматический. Отладчик запускается автоматически, если в тексте сценария обнаружена ошибка.