Партнерка на США и Канаду по недвижимости, выплаты в крипто
- 30% recurring commission
- Выплаты в USDT
- Вывод каждую неделю
- Комиссия до 5 лет за каждого referral
Листинг 3.7. Файл chapter3/validation/validation. html
<HTML>
<HEAD>
<TITLE>Ввод и проверка пароля</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
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);
document. forms[0].submit();
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Регистрация</H1>
<FORM METHOD=POST NAME="Sel" ACTION="http://frolov/scripts/controls. exe">
<TABLE>
<TR><TD><B>Идентификатор:</B></TD><TD><INPUT TYPE="text"
NAME="id" onChange="this. value=this. value. toUpperCase()"
SIZE="20" ></TD></TR>
<TR><TD><B>Пароль:</B></TD><TD><INPUT TYPE="password"
NAME="pwd" SIZE="20"></TD></TR>
<TR><TD><B>Проверка пароля:</B></TD><TD><INPUT TYPE="password"
NAME="pwd1" SIZE="20"></TD></TR>
</TABLE>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
При определении формы для оператора <FROM> мы указали параметр ACTION:
<FORM METHOD=POST NAME="Sel" ACTION="http://frolov/scripts/controls. exe">
Этот параметр задает путь к загрузочному файлу программы 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: *****@***apc. org
// WWW: http://www. *****/~frolov
// или
// http://www. dials. *****/frolov
// ===============================================
#include <stdio. h>
#include <stdlib. h>
#include <string. h>
// Прототипы функций перекодировки
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("<!DOCTYPE HTML PUBLIC"
" \"-//W3C//DTD HTML 3.2//EN\">");
printf("<HTML><HEAD><TITLE>User Registration"
"</TITLE></HEAD><BODY BGCOLOR=#FFFFFF>");
// Определяем метод передачи данных
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("<H2>Переменные среды</H2>");
// Метод доступа
printf("REQUEST_METHOD = %s", getenv("REQUEST_METHOD"));
// Размер полученных данных в байтах
printf("<BR>CONTENT_LENGTH = %ld", lSize);
// Тип полученных данных
printf("<BR>CONTENT_TYPE = %s", getenv("CONTENT_TYPE"));
// Закрываем буфер данных двоичным нулем,
// превращая его таким образом в строку
szBuf[lSize] = '\0';
// Делаем копию принятых данных в буфер szSrcBuf
strcpy(szSrcBuf, szBuf);
// Отображаем принятые данные без обработки
printf("<H2>Принятые данные</H2>");
printf("<P>%s", szSrcBuf);
// Выполняем перекодировку принятых данных
DecodeStr(szSrcBuf);
// Отображаем результат перекодировки
printf("<H2>Данные после перекодировки</H2>");
printf("<P>%s", szSrcBuf);
// Выводим список значений полей формы
printf("<H2>Список значений полей</H2>");
// Дописываем в конец буфера принятых данных
// символ "&", который используется в качестве
// разделителя значений полей
szBuf[lSize] = '&';
szBuf[lSize + 1] = '\0';
// Цикл по полям формы
for(szParam = szBuf;;)
{
// Ищем очередной разделитель
szPtr = strchr(szParam, '&');
// Если он найден, раскодируем строку параметров
if(szPtr!= NULL)
{
*szPtr = '\0';
DecodeStr(szParam);
// Выводим в документ значение параметра
printf("%s<BR>", szParam);
// Переходим к следующему параметру
szParam = szPtr + 1;
// Если достигнут конец буфера, завершаем цикл
if(szParam >= (szBuf + lSize))
break;
}
else
break;
}
// Выводим завершающий фрагмент документа HTML
printf("</BODY></HTML>");
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.19).

Рис. 3.19. Калькулятор, выполненный на языке сценариев JavaScript
Калькулятор создан в документе HTML как форма с двумя текстовыми полями и кнопками, расположенными в ячейках таблицы.
С помощью кнопок 0 - F можно вводить шестнадцатеричные числа, которые будут отображаться в текстовом поле Hex. В поле Dec находится десятичное значение введенного шестнадцатеричного числа или результата вычислений.
Кнопки “+”, “-“, “*” и “/” предназначены, соответственно, для выполнения операции сложения, вычитания, умножения и деления. При помощи кнопки “Enter” можно получить результат вычислений. Кнопка CE позволяет стереть текущее введенное число, а кнопка C - сбросить промежуточный результат вычислений и текущее введенное число.
Исходный текст документа HTML с калькулятором представлен в листинге 3.9.
Листинг 3.9. Файл chapter3/hexcalc/hexcalc. html
<HTML>
<HEAD>
<TITLE>Hexadecimal calculator</TITLE>
<SCRIPT>
<!--
var total = 0;
var lastOperation = "+";
var newnumber = true;
function dec2hex(nDec)
{
var szHexTable="ABCDEF";
var szResult = "";
var szBuf="";
var nRem = 0;
var bNegative=false;
if(nDec < 0)
{
bNegative=true;
nDec = - nDec;
}
nTmp=nDec;
while(true)
{
nRem = nTmp % 16;
nTmp = nTmp / 16;
if(Math. floor(nTmp) < 16)
break;
szBuf=szHexTable. charAt(nRem);
szResult = szBuf. concat(szResult);
}
szBuf=szHexTable. charAt(nRem);
szResult = szBuf. concat(szResult);
if(Math. floor(nTmp) != 0)
{
szBuf=szHexTable. charAt(Math. floor(nTmp));
szResult = szBuf. concat(szResult);
}
if(bNegative == true)
return ("-" + szResult);
else
return szResult;
}
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;
}
function clearNumber(form)
{
form. displayHex. value = "0";
form. displayDec. value = "0";
newnumber = true;
}
function clearAll(form)
{
total = 0;
lastOperation = "+";
clearNumber(form);
}
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;
}
function minusOp(form)
{
var result;
result = total + " " + lastOperation + " " + form. displayDec. value;
total = eval(result);
lastOperation = "-";
form. displayHex. value = dec2hex(total);
form. displayDec. value = total;
newnumber = true;
}
function mulOp(form)
{
var result;
result = total + " " + lastOperation + " " + form. displayDec. value;
total = eval(result);
lastOperation = "*";
form. displayHex. value = dec2hex(total);
form. displayDec. value = total;
newnumber = true;
}
function divOp(form)
{
var result;
result = total + " " + lastOperation + " " + form. displayDec. value;
total = eval(result);
lastOperation = "/";
form. displayHex. value = dec2hex(total);
form. displayDec. value = total;
newnumber = true;
}
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;
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<TABLE BORDER=2 BORDERCOLOR="Black" BGCOLOR="Yellow">
<TR>
<TD>Hex:</TD>
<TD COLSPAN=3><INPUT TYPE=text NAME="displayHex" VALUE="0" onFocus="this. blur();"></TD>
</TR>
<TR>
<TD>Dec:</TD>
<TD COLSPAN=3><INPUT TYPE=text NAME="displayDec" VALUE="0" onFocus="this. blur();"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="C" VALUE=" C " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="D" VALUE=" D " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="E" VALUE=" E " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="F" VALUE=" F " onClick="putNumber(this, this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="8" VALUE=" 8 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="9" VALUE=" 9 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="A" VALUE=" A " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="B" VALUE=" B " onClick="putNumber(this, this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="4" VALUE=" 4 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="5" VALUE=" 5 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="6" VALUE=" 6 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="7" VALUE=" 7 " onClick="putNumber(this, this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="0" VALUE=" 0 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="1" VALUE=" 1 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="2" VALUE=" 2 " onClick="putNumber(this, this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="3" VALUE=" 3 " onClick="putNumber(this, this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="+" VALUE=" + " onClick="plusOp(this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="-" VALUE=" - " onClick="minusOp(this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="*" VALUE=" * " onClick="mulOp(this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="/" VALUE=" / " onClick="divOp(this. form);"></TD>
</TR>
<TR>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="C" VALUE=" C " onClick="clearAll(this. form);"></TD>
<TD ALIGN=CENTER><INPUT TYPE="button" NAME="CE" VALUE="CE" onClick="clearNumber(this. form);"></TD>
<TD COLSPAN=2 ALIGN=CENTER><INPUT TYPE="button" NAME="Enter" VALUE="Enter" onClick="getResult(this. form);"></TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Рассмотрим наиболее интересные моменты.
Когда калькулятор отображается в первый раз, в текстовых полях displayHex и displayDec, предназначенных, соответственно, для отображения чисел в шестнадцатеричном и десятичном виде, находятся нулевые значения:
. . .
<INPUT TYPE=text NAME="displayHex" VALUE="0" onFocus="this. blur();">
. . .
<INPUT TYPE=text NAME="displayDec" VALUE="0" onFocus="this. blur();">
. . .
Это значение устанавливается параметром 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.
Электронные часы
С помощью сценария JavaScript и формы вы можете сделать достаточно сложные электронные часы, которые будут показывать не только время, но и дату в различных форматах с учетом смещения часового пояса (рис. 3.20).

Рис. 3.20. Электронные часы в документе HTML
Исходный текст документа HTML с электронными часами представлен в листинге 3.10.
Листинг 3.10. Файл chapter3/clock/clock. html
<HTML>
<HEAD>
<TITLE>Электронные часы</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
nTimer = 0;
var szCurrentTime = "";
var szCurrentDate = "";
var szTimeZone = "";
var szGMT = "";
var szLocal = "";
function updateClock()
{
var dtDate = new Date();
var nHours = dtDate. getHours();
var nMinutes = dtDate. getMinutes();
var nSeconds = dtDate. getSeconds();
szCurrentTime = nHours + ":" + nMinutes +
":" + nSeconds;
szCurrentDate = dtDate. getDate() + "." +
dtDate. getMonth() + "." + dtDate. getYear();
szTimeZone = dtDate. getTimezoneOffset() / 60;
szGMT = dtDate. toGMTString();
szLocal = dtDate. toLocaleString();
Clock. time. value = szCurrentTime;
Clock. dat. value = szCurrentDate;
Clock. timeZone. value = szTimeZone;
Clock. gmt. value = szGMT;
Clock. loc. value = szLocal;
nTimer = setTimeout("updateClock()", 1000);
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Электронные часы</H1>
<FORM NAME="Clock">
<TABLE>
<TR><TD><B>Дата:</B></TD><TD><INPUT TYPE="text"
NAME="dat" SIZE="20" ></TD>
</TR>
<TR><TD><B>Время:</B></TD><TD><INPUT TYPE="text"
NAME="time" SIZE="20" ></TD>
</TR>
<TR><TD><B>Смещение часового пояса:</B></TD><TD><INPUT TYPE="text"
NAME="timeZone" SIZE="20" ></TD>
</TR>
<TR><TD><B>Дата GMT:</B></TD><TD><INPUT TYPE="text"
NAME="gmt" SIZE="30" ></TD>
</TR>
<TR><TD><B>Локальная дата:</B></TD><TD><INPUT TYPE="text"
NAME="loc" SIZE="30" ></TD>
</TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
updateClock();
// -->
</SCRIPT>
</BODY>
</HTML>
Часы запускаются сразу после загрузки документа HTML в окно браузера. При этом управление получает функция updateClock. Эта функция определена в заголовке, а ее вызов находится в конце области тела документа HTML.
Получив управление, функция updateClock создает объект Data для текущей даты, установленной в компьютере:
var dtDate = new Date();
Затем функция определяет три компоненты времени (часы, минуты и секунды), вызывая для этого методы getHours, getMinutes и getSeconds, определенные в классе Date:
var nHours = dtDate. getHours();
var nMinutes = dtDate. getMinutes();
var nSeconds = dtDate. getSeconds();
Полученные таким образом значения комбинируются в текстовой строке szCurrentTime:
szCurrentTime = nHours + ":" + nMinutes +
":" + nSeconds;
В дальнейшем время будет записано функцией updateClock в поле time формы Clock, как это показано ниже:
Clock. time. value = szCurrentTime;
Строка текущей даты получается в результате вызова методов getDate, getMonth и getYear:
szCurrentDate = dtDate. getDate() + "." +
dtDate. getMonth() + "." + dtDate. getYear();
Эта строка записывается в поле dat формы Clock:
Clock. dat. value = szCurrentDate;
Для вычисления смещения часового пояса мы воспользовались методом getTimezoneOffset, возвращающим значение в минутах:
szTimeZone = dtDate. getTimezoneOffset() / 60;
Для того чтобы вычислить смещение в часах, мы разделили результат, полученный от метода getTimezoneOffset, на 60.
Вычисленное смещение часового пояса записывается в поле timeZone формы Clock:
Clock. timeZone. value = szTimeZone;
Для получения времени по Гринвичу мы воспользовались методом toGMTString:
szGMT = dtDate. toGMTString();
Полученное значение будет записано в поле gmt формы Clock:
Clock. gmt. value = szGMT;
И, наконец, локальную дату и время мы определяем с помощью метода toLocaleString:
szLocal = dtDate. toLocaleString();
Результат записывается в поле loc формы Clock:
Clock. loc. value = szLocal;
Периодическое выполнение функции updateClock достигается с помощью метода setTimeout:
nTimer = setTimeout("updateClock()", 1000);
Здесь мы указали, что период обновления показаний наших часов должен быть равен одной секунде.
4 JavaScript и Фреймы
Для того чтобы работать сразу с несколькими документами HTML, можно предоставить пользователю многооконный интерфейс, реализованный при помощи фреймов. Подробно о фреймах мы рассказали в 29 томе “Библиотеки системного программиста”. Который называется “Сервер Web своими руками”.
Файл описания фреймов
Для того чтобы объединить несколько документов HTML при помощи фреймов, вам нужно подготовить специальный документ HTML, в котором находится описание параметров фреймов, таких как размер и расположение.
Особенность такого документа - отсутствие на своем обычном месте области тела документа, выделенного операторами <BODY> и </BODY>. Вместо этого в файле описания фреймов располагаются операторы <FRAMESET>, </FRAMESET>, <NOFRAME> и </NOFRAME>, как это показано ниже:
<HTML>
<HEAD>
. . .
</HEAD>
<FRAMESET
ROWS="Высота_строки"
COLS="Ширина_колонки"
onLoad="Обработчик_события"
onUnload="Обработчик_события">
<FRAME SRC="Адрес_URL" NAME="Имя_фрейма">
. . .
<FRAME SRC="Адрес_URL" NAME="Имя_фрейма">
<NOFRAME>
<BODY>
. . .
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Параметры ROWS и COLS оператора <FRAMESET> определяют размеры фреймов и задаются в виде списка значений, разделенных запятой.
Вы можете определить обработчики событий onLoad и onUnload, получающие управление, соответственно, при загрузке содержимого в главное окно фрейма и при замене текущего документа HTML в этом окне на другой. Фактически эти обработчики относятся не к фреймам, а к окну, где эти фреймы отображаются.
Для тех браузеров, которые не могут работать с фреймами, необходимо подготовить документ HTML, расположив его тело между операторами <NOFRAME> и </NOFRAME>. В этом документе имеет смысл разместить сообщение о том, что для просмотра данной страницы Web необходимо применять более современный браузер.
Параметры оператора <FRAMESET>
Рассмотрим подробнее параметры оператора <FRAMESET>, предназначенного для определения набора фреймов.
Параметр | Описание |
COLS | Ширина колонки в процентах, пикселах или относительный размер |
ROWS | Высота строки в процентах, пикселах или относительный размер |
FRAMEBORDER | Если значение этого параметра равно 1, фреймы будут иметь трехмерную рамку, ширина которой задается в пикселах. В том случае, когда указано значение 0, рамка не создается |
BORDER | Используется только браузером Netscape Navigator. Задает толщину рамки фрейма в пикселах |
FRAMESPACING | С помощью этого параметра можно задать дополнительное расстояние между фреймами в пикселах |
Параметры COLS и ROWS нужны в том случае, когда фреймы, определенные в наборе, располагаются в виде таблицы. Первый из этих параметров указывает ширину колонки, а второй - высоту строки. Если фреймы располагаются в одном столбце, параметр COLS указывать не надо. Аналогично, если фреймы занимают только одну строку, не нужно указывать параметр ROWS.
Вы можете задать значения для параметров COLS и ROWS либо в процентном отношении, соответственно, к ширине и высоте окна браузера, либо в пикселах. Если вместо значения указан символ *, колонка или строка занимают всю оставшуюся часть окна.
Например, ниже указано, что высота первого фрейма равна 90 пикселам, а второй фрейм занимает всю нижнюю часть окна браузера:
<FRAMESET ROWS="90,*">
В следующем примере два фрейма, расположенные рядом, занимают, соответственно, 20% и 80% ширины окна браузера.
<FRAMESET COLS="20%,80%">
Параметры оператора <FRAME>
Между операторами <FRAMESET> и </FRAMESET> располагаются операторы <FRAME>, определяющие параметры отдельных фреймов. Это параметры SRC и NAME. Первый из этих параметров задает адрес URL документа HTML, который будет загружен в данный фрейм, а второй - имя фрейма, которое можно использовать в сценарии JavaScript для адресации объектов, расположенных во фрейме. Заметим, что адрес URL не должен содержать ссылки на локальные метки (anchor).
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |


