Партнерка на США и Канаду по недвижимости, выплаты в крипто

30% recurring commission
Выплаты в USDT
Вывод каждую неделю
Комиссия до 5 лет за каждого referral

<BR><A HREF="http://www. *****">Каталог программ Auramedia</A>

<BR><A HREF="http://www. /java/" TARGET="newwnd">Страница сервера Microsoft про Java</A>

<P>Пишите нам по адресу: <A HREF="mailto:*****@***apc. org">*****@***apc. org</A>

<HR>

<H1>Список ссылок</H1>

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

<!--

elem = new Array();

for(i=0; i<document. links. length; i++)

{

elem[i] = new Option("Elem" + i, i, false, false);

Sel. ListOfLinks. options[i] = elem[i];

Sel. ListOfLinks. options[i].text = document. links[i];

document. write("<HR>");

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

document. write(szText. bold());

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

document. write("hostname: ".italics() + document. links[i].hostname + "<BR>");

document. write("href: ".italics() + document. links[i].href + "<BR>");

document. write("pathname: ".italics() + document. links[i].pathname + "<BR>");

document. write("port: ".italics() + document. links[i].port + "<BR>");

document. write("protocol: ".italics() + document. links[i].protocol + "<BR>");

document. write("search: ".italics() + document. links[i].search + "<BR>");

НЕ нашли? Не то? Что вы ищете?

document. write("target: ".italics() + document. links[i].target + "<BR>");

}

Sel. ListOfLinks. selectedIndex=0;

// -->

</SCRIPT>

</BODY>

</HTML>

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

function urlJump()

{

var szNewURL="";

szNewURL =

document. links[Sel. ListOfLinks. selectedIndex];

window. location. href=szNewURL;

}

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

</SELECT>

</FORM>

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

Список с именем ListOfLinks создается оператором <SELECT>. Первоначально в списке нет ни одного элемента. Все элементы будут добавлены в список сценарием JavaScript.

Кнопка Jump активизирует фукнцию urlJump, для чего в ее определении указан обработчик события onClick.

Обратите внимание на то, как функция urlJump адресуется к выбранному элементу списка:

szNewURL = document. links[Sel. ListOfLinks. selectedIndex];

Здесь мы взяли форму Sel и указали имя списка ListOfLinks как имя одного из свойств формы. Номер выделенного элемента списка находится в свойстве списка с именем selectedIndex.

Наш сценарий заполняет массив ссылок links и список Sel. ListOfLinks таким образом, что первый элемент массива links соответствует первой ссылке в списке, второй элемент массива - второму элементу и так далее. Поэтому выражение Sel. ListOfLinks. selectedIndex является номером ссылки в массиве links, которую необходимо активизировать. Функция urlJump записывает эту ссылку в переменную szNewURL, а затем устанавливает значение свойства window. location. href.

Рассмотрим теперь сценарий JavaScript, определенный в теле документа HTML.

Прежде всего, в этом сценарии мы создаем массив elem:

elem = new Array();

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

Далее в сценарии располагается цикл по всем ссылкам, размещенным в документе HTML:

for(i=0; i<document. links. length; i++)

{

. . .

}

Количество ссылок находится в свойстве length объекта links, поэтому переменная цикла i изменяет свое значение от 0 до document. links. length.

В цикле мы создаем новый элемент списка и записываем в него текст ссылки:

elem[i] = new Option("Elem" + i, i, false, false);

Sel. ListOfLinks. options[i] = elem[i];

Sel. ListOfLinks. options[i].text = document. links[i];

Способ создания элемента списка будет подробно описан в главе, посвященной работе сценариев JavaScript с формами. Здесь мы только отметим, что текстовая строка, соответствующая ссылке, извлекается из массива links как document. links[i].

Далее после записи в документ HTML разделительной линии наш сценарий записывает в него текст ссылки, выделяя его жирным шрифтом:

document. write("<HR>");

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

document. write(szText. bold());

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

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

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

Sel. ListOfLinks. selectedIndex=0;

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

Встроенный класс Math

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

Свойства

Перечислим свойства класса Math. Все эти свойства являются математическими константами, поэтому сценарий JavaScript не может изменять их значение.

E

Это свойство представляет собой константу e. Приблизительное значение этой константы равно 2,72.

Вот пример использования свойства E:

var nE;

nE = Math. E;

Здесь мы записываем в переменную nE значение константы e.

PI

Свойство PI - это число p. Оно также является константой с приблизительным значением, равным 3,14.

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

var nL;

var nR;

Свойство SQRT1_2 - это значение квадратного корня из 0,5.

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

var nValue;

nValue = Math. SQRT1_2;

Методы

Перечислим методы класса Math.

abs

Вычисление абсолютного значения.

nValueMax = Math. max(nValue1, nValue1);

min

Определение наименьшего из двух значений.

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

var nValue1;

var nValue2;

var nValueMin;

nValueMin = Math. min(nValue1, nValue1);

pow

Возведение числа в заданную степень.

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

var nValue;

nValue = Math. pow(2, 3);

Здесь число 2 возводится в степень 3, а результат, равный 8, записывается в переменную nValue.

random

Метод random возвращает случайное число в интервале от 0 до 1.

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

var nRandomValue;

nRandomValue = Math. random();

round

Метод round предназначен для выполнения округления значения аргумента до ближайшего целого. Если десятичная часть числа равна 0,5 или больше этого значения, то выполняется округление в большую сторону, если меньше - в меньшую.

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

var nValue;

nValue = Math. round(1.8);

После выполнения округления значение nValue будет равно 2.

sin

Вычисление синуса.

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

var nValue;

nValue = Math. sin(nAngle);

sqrt

Вычисление квадратного корня от аргумента.

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

var nValueSqrt;

nValueSqrt = Math. sqrt(nArg);

tan

Вычисление тангенса.

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

var nValue;

nValue = Math. tan(nAngle);

Встроенный класс Date

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

Конструкторы класса Date

Для использования большинства методов класса Date необходимо создать объект этого класса при помощи одного из трех конструкторов.

Конструктор первого вида вызывается следующим образом:

var dtNewDate;

dtNewDate = new Date();

Здесь создается объект Date, в котором хранится информация о текущей дате и времени. Это время задается по Гринвичу или, пользуясь более современным определением, с использованием времени Universal Coordinated Time.

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

var dtNewDate;

dtNewDate = new Date(nMilliseconds);

Параметр nMilliseconds задает дату в миллисекундах, считая от 1 января 1970 года.

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

var dtNewDate;

dtNewDate=new Date(year, month, date, hours, min, sec, ms);

Параметры этого конструктора описаны ниже:

Параметр	Описание
year	Год, например, 1998 или 2012
month	Номер месяца от 0 (январь) до 11 (декабрь)
date	Календарная дата, задается в диапазоне от 1 до 31
hours	Необязательный параметр, задающий час дня в диапазоне от 0 до 23. Вы обязаны указывать этот параметр только в том случае, если задан параметр min
min	Необязательный параметр, задающий минуты в диапазоне от 0 до 59. Вы обязаны указывать этот параметр только в том случае, если задан параметр sec
sec	Необязательный параметр, задающий секунды в диапазоне от 0 до 59. Вы обязаны указывать этот параметр только в том случае, если задан параметр ms
ms	Необязательный параметр, задающий миллисекунды в диапазоне от 0 до 999

getDate

Определение даты, хранящейся в объекте класса Date.

Метод возвращает значение календарной даты в диапазоне от 1 до 31.

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

var dtNewDate;

var nDate;

dtNewDate = new Date();

nDate = dtNewDate. getDate();

getDay

Определение номера дня недели, хранящегося в объекте класса Date.

getTimeZoneOffset

Определение смещения локального времени относительно времени по Гринвичу (в миллисекундах).

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

nOffsetMilliseconds = dtDate. getTimeZoneOffset();

getYear

Метод getYear возвращает год, хранящийся в объекте класса Date.

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

nYear = dtDate. getYear();

parse

Метод parse возвращает количество миллисекунд, прошедших с 00 часов 00 минут 1 января 1970 года по время, указанное в параметре функции. Для вызова этого метода вам не нужно создавать объект класса Date, а можно просто сослаться на имя этого класса:

nMS = Date. parse(szDataString);

Через параметр szDataString вы можете указать время, например, так:

“12 Oct 1998 12:00:00”

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

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

dtNewDate. setTime(nMilliseconds);

setYear

Метод setYear используется для установки номера года, в объекте класса Date.

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

dtNewDate. setYear(nsetYear);

toGMTString

Метод toGMTString предназначен для преобразования даты в строку, записанную в стандартном формате времени по Гринвичу (GMT).

toLocaleString

Аналогично предыдущему, однако вместо времени GMT используется локальное время.

UTC

Метод UTC преобразует дату, заданную параметрами метода, в количество миллисекунд, прошедшее с 1 января 1970 года.

При использовании метода UTC, так же как и метода parse, вам не нужно создавать объект класса Date:

nMillisecond =

Date. UTC(year, month, date, hours, min, sec, ms);

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

Встроенные функции

В этом разделе мы перечислим несколько полезных встроенных функций, которые вы можете использовать в своих сценариях 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);

Плавное изменение цвета фона документа HTML

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

Сложный на первый взгляд эффект достигается чрезвычайно просто: изменением свойства bgColor объекта document. В листинге 2.10 мы привели пример сценария, который после загрузки документа HTML в окно браузера изменяет цвет его фона с белого на черный.

Листинг 2.10. Файл chapter2/ChangeBkg/ChangeBkg. html

<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<!--

var nRed = 255;

var nGreen = 255;

var nBlue = 255;

function colorShift()

{

var cmd = "colorShift()";

document. bgColor = "#" +

dec2hex(nRed) +

dec2hex(nGreen) +

dec2hex(nBlue);

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

timer = window. setTimeout(cmd, 50);

}

function dec2hex(nDec)

{

var szHexTable="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;

}

// -->

</SCRIPT>

</HEAD>

<H1>Изменение цветового оформления</H1>

<P>Посетите эти серверы:

<P><A HREF="http://www. *****/~frolov/index. html">Наша домашняя страница</A>

<P><A HREF="http://www. *****">Каталог программ Auramedia</A>

<P><A HREF="http://www. /java/">Страница сервера Microsoft про Java</A>

<P><A HREF="ColorLinks. html#Локальный раздел">Локальный раздел</A>

<HR>

<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>

<P>Этот локальный раздел вы можете просмотреть, даже если

ваш компьютер не подключен к Internet

<!--

colorShift();

// -->

</SCRIPT>

</BODY>

</HTML>

Работа сценария начинается после загрузки документа с вызова функции colorShift. Это вызов расположен в конце области тела документа HTML.

Функция постепенно уменьшает значение красной, зеленой и голубой компоненты цвета. Начальные значения этих компонент хранятся в глобальных переменных nRed, nGreen и nBlue:

var nRed = 255;

var nGreen = 255;

var nBlue = 255;

Значение цвета фона формируется следующим образом:

document. bgColor = "#" +

dec2hex(nRed) + dec2hex(nGreen) + dec2hex(nBlue);

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

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

if(nRed > 0)

{

nRed -= 10;

nGreen -= 10;

nBlue -= 10;

}

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

var cmd = "colorShift()";

timer = window. setTimeout(cmd, 50);

В результате функция colorShift будет вызываться каждые 50 миллисекунд.

3 Работа с формами

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

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

Иерархия объектов в формах

Как мы уже говорили, при загрузке документа HTML в окно браузера Internet создается объект класса Document. Если в этом документе определены формы, то они доступны сценариям JavaScript как свойства объекта Document.

В разделе “Ссылки и метки в документе” предыдущей главы мы определили форму, задав для нее имя Sel с помощью параметра NAME оператора <FORM>:

</SELECT>

</FORM>

В результате у объекта Document появилось свойство Sel. К этому свойству можно адресоваться следующим образом:

Document. Sel

Любая форма содержит определения полей и органов управления, таких как списки, переключатели и кнопки. При определении полей и органов управления им можно задать имя, указав его в параметре NAME соответствующего оператора языка HTML. В примере, приведенном выше, в форме определен список с именем ListOfLinks.

Для адресации из сценария JavaScript отдельных органов управления можно воспользоваться тем фактом, что они доступны как свойства содержащих их форм. Например, если в форме Sel определен список ListOfLinks, то для доступа к списку как к объекту вы можете использовать следующее выражение:

Document. Sel. ListOfLinks

Так как поля формы и органы управления являются объектами, то для них определены свои свойства и методы. Например, свойство selectedIndex, содержащее номер выбранного пользователем элемента списка, доступно следующим образом:

Document. Sel. ListOfLinks. selectedIndex

С помощью рис. 2.2 вы можете проследить иерархию объектов документа и, в частности, иерархию объектов в формах.

Заметим, что в качестве одного из свойств объекта Document определено свойство forms. Это массив всех форм, расположенных в документе HTML. Размер массива равен document. forms. length.

Вы можете адресоваться к формам как к элементам массива forms, причем первый элемент массива (с индексом 0) соответствует самой первой форме, определенной в документе, второй - следующей и так далее. Однако удобнее обращаться к формам по их именам, заданным в параметре NAME оператора <FORMS>.

Форма и ее свойства

Подробно о том, как создавать формы в документах HTML, мы рассказывали в 29 томе “Библиотеки системного программиста”. Сейчас мы повторим основные моменты, сделав акцент на вопросах, важных для обработки форм средствами сценариев JavaScript.

Оператор <FORM>

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

<FORM

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

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

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

METHOD=GET или POST

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

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

. . .

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

. . .

</FORM>

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

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

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

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

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

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

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

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

Первый набор свойств приведен ниже:

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

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

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

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

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

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

Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 11 12 13 14

Семь вариаций на тему “Hello, world!” (стр. 6 )

Партнерка на США и Канаду по недвижимости, выплаты в крипто

Встроенный класс Math

Свойства

E

PI

LN2

LN10

LOG2E

LOG10E

SQRT2

SQRT1_2

Методы

abs

acos

asin

atan

ceil

cos

exp

floor

log

max

min

pow

random

round

sin

sqrt

tan

Встроенный класс Date

Конструкторы класса Date

getDate

getDay

getHours

getMinutes

getMonth

getSeconds

getTime

getTimeZoneOffset

getYear

parse

setDate

setHours

setMinutes

setMonth

setSeconds

setTime

setYear

toGMTString

toLocaleString

UTC

Встроенные функции

Плавное изменение цвета фона документа HTML

3 Работа с формами

Иерархия объектов в формах

Форма и ее свойства

Оператор <FORM>

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

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