Литература

1. Фролов А.В., Фролов Г.В. Библиотека системного программиста. М.: ДИАЛОГ-МИФИ. Т.23. Глобальные сети компьютеров. Практическое введение в Internet, E-Mail, FTP, WWW и HTML, программирование для Windows Sockets

2. Фролов А.В., Фролов Г.В. Библиотека системного программиста. М.: ДИАЛОГ-МИФИ. Т.29. Сервер Web своими руками

3. Фролов А.В., Фролов Г.В. Библиотека системного программиста. М.: ДИАЛОГ-МИФИ. Т.30. Microsoft Visual J++. Создание приложений на языке Java. Часть 1.

4. Фролов А.В., Фролов Г.В. Библиотека системного программиста. М.: ДИАЛОГ-МИФИ. Т.32. Microsoft Visual J++. Создание приложений на языке Java. Часть 2.

константа со значением натурального логарифма

Свойство LN2 - константа со значением натурального логарифма числа 2, то есть ln2.

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

var nValue;

nValue = Math.LN2;

константа со значением натурального логарифма

Свойство LN10 - константа со значением натурального логарифма числа 10, то есть ln10.

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

var nValue;

nValue = Math.LN10;

Log

Вычисление натурального логарифма аргумента функции.

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

var nValue;

nValue = Math.log(nArg);

LOG2E

Это свойство является константой со значением, равным логарифму числа 2 по основанию e, то есть loge2.

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

var nValue;

nValue = Math.LOG2E;

LOG10E

Свойство LOG10E - это логарифм числа e по основанию 10, то есть log10e.

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

var nValue;

nValue = Math.LOG10E;

Логические данные

Логические данные могут иметь только два значения: true и false. Эти значения никак не соотносятся с числами 1 и 0. Они предназначены главным образом для выполнения операций сравнения, а также для использования в условных операторах.

Массивы в JavaScript

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

Первый способ предполагает создание собственного класса. Это можно сделать, например, так:

function createArray(nLength)

{

this.length = nLength;

for(var i = 1; i <= nLength; i++)

{

this[i] = 0;

}

return this;

}

Здесь в классе определено свойство с именем length, которое хранит размер массива, передаваемый конструктору класса через параметр nLength.

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

Как пользоваться классом createArray?

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

var myArray;

myArray = new createArray(256);

После этого можно обращаться к ячейкам массива:

myArray[0] = 255;

myArray[1] = 254;

myArray[255] = 0;

Нумерация ячеек начинается с нуля.

Второй способ создания массивов проще.

При его использовании вы можете создать массив как объект встроенного класса Array:

var myArray;

myArray = new Array(256);

. . .

myArray[0] = 255;

myArray[1] = 254;

myArray[255] = 0;

Так как класс Array - встроенный, вам не нужно определять его самостоятельно.

Max

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

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

var nValue1;

var nValue2;

var nValueMax;

nValueMax = Math.max(nValue1, nValue1);

Метод alert

Что касается метода alert, то мы его уже использовали в разделе первой главы с названием “Вариация пятая: с диалоговой панелью”. Там мы применили этот метод для вывода на экран простейшей диалоговой панели, отображающей приветственное сообщение. Применение некоторых других методов и свойств объекта window мы проиллюстрируем ниже на примерах составленных нами сценариев JavaScript.

Приведем формат вызова метода alert:

alert("Сообщение");

Через единственный параметр методу alert передается сообщение, отображаемое в диалоговой панели.

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

Заметим, что при вызове метода alert мы не указали объект, для которого вызывается метод - объект window. Если при вызове метода объект не указан, интерпретатор сценария, встроенный в браузер, предполагает, что метод относится к объекту window.

Тем не менее, вы можете явно указывать объект window:

window.alert("Сообщение");

Результат будет тем же самым.

Метод clearTimeout

С помощью метода clearTimeout можно остановить таймер, запущенный только что рассмотренным методом setTimeout. В качестве параметра методу clearTimeout необходимо передать идентификатор таймера, полученный от метода setTimeout:

clearTimeout(idTimer);

Метод close

С помощью метода close вы можете закрыть созданное вами или основное окно браузера. Формат вызова этого метода такой:

wndNewWindow.close()

Заметим, что текущее окно браузера (то есть окно, в которое загружен документ HTML с работающим сценарием) может быть закрыто одним из двух следующих способов:

window.close()

self.close()

Этот метод мы будем использовать в одном сценарии, описанном ниже.

Метод confirm

С помощью метода confirm вы также можете отобразить на экране диалоговую панель с сообщением, однако в этой панели будет две кнопки - OK и Cancel. В зависимости от того, какая кнопка будет нажата, метод возвратит, соответственно, значение true или false.

Метод confirm обычно используется следующим образом:

if(confirm("Сообщение"))

{

// Нажата кнопка OK

. . .

}

else

{

// Нажата кнопка Cancel

. . .

}

Метод open

С помощью метода open сценарий может открыть новое окно браузера и загрузить в это окно документ HTML для просмотра.

Формат вызова метода open приведен ниже:

open("Адрес URL", "Имя Окна", "Параметры окна");

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

Первый параметр метода open задает адрес URL документа HTML, предназначенный для загрузки в новое окно.

Второй параметр определяет имя окна для использования в параметре TARGET оператора <A> или в операторе <FORM>. Вы можете указать его как пустую строку вида “”.

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

var wndNewWindow;

wndNewWindow=open("hello.html", "",

"toolbar=no,menubar=no,scrollbars=no,width=300,height=100");

Ниже мы перечислили все возможные параметры окна:

Параметр		Описание
toolbar		Если параметр имеет значение yes или 1, окно снабжается стандартной инструментальной линейкой. Если же значение этого параметр равно no, то инструментальная линейка будет отсутствовать
location		Параметр определяет, будет ли отображаться поле ввода адреса документа
directories		Аналогично предыдущему, но управляет отображением кнопок каталогов браузера Netscape Navigator, таких как "What's New" и "What's Cool"
status		Отображение строки состояния
menubar		Отображение линейки меню
scrollbars		Отображение полос просмотра
resizable		Если этот параметр указан как yes или 1, пользователь сможет изменять размер вновь созданного окна
width		Ширина окна в пикселах
height		Высота окна в пикселах

Метод prompt

Если вам в своем сценарии необходимо получить от пользователя одну текстовую строку, для этого можно применить метод prompt. Этот метод отображает на экране диалоговую панель, в которой есть одно текстовое поле ввода и кнопка OK. Когда пользователь нажимает эту кнопку, метод prompt возвращает введенную строку.

Метод prompt вызывается следующим образом:

Var szInput=””;

szInput=prompt(“Сообщение”,“Строка ввода по умолчанию”);

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

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

Метод setTimeout

С помощью метода setTimeout вы можете установить таймер, указав при этом выражение JavaScript и задержку во времени:

idTimer=setTimeout(cmd, timeout);

Метод setTimeout создает и запускает таймер, возвращая его идентификатор. Когда пройдет время, заданное вторым параметром timeout (в миллисекундах), запускается выражение JavaScript, заданное параметром cmd.

Рассмотрим такой фрагмент сценария:

var cmd="NoAccess()";

idTimer=window.setTimeout(cmd, 10000);

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

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

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

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

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

click()

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

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

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

click()

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

Методы объекта document

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

Метод		Описание
clear		Удаление содержимого документа из окна просмотра
close		Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока
open		Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln
write		Запись в документ произвольной конструкции языка HTML
writeln		Аналогично предыдущему, но в конце строки добавляется символ новой строки

Методы объекта password

Для объекта password определены методы focus, blur и select, не имеющие параметров.

С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля. Вызов метода select приводит к выделению содержимого поля редактирования.

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

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

click()

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

Методы объекта select

Для объекта select определено два метода, не имеющих параметров, - focus и blur. Первый из этих методов позволяет передать списку фокус ввода, а второй - отобрать этот фокус у списка.

Методы объекта text

Для объекта text определены методы focus, blur и select, не имеющие параметров.

С помощью метода focus сценарий JavaScript может передать фокус полю редактирования, а с помощью метода blur - отобрать фокус у этого поля.

Вызов метода select приводит к выделению содержимого поля редактирования.

Методы объекта textarea

Для объекта textarea определены такие же методы, что и для объекта text. Это методы focus, blur и select, не имеющие параметров.

Вызов метода select приводит к выделению содержимого многострочного поля редактирования.

Методы объекта window

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

Метод		Описание
alert		Отображение диалоговой панели Alert с сообщением и кнопкой OK
close		Закрытие окна
confirm		Отображение диалоговой панели Confirm с кнопками OK и Cancel
open		Открытие окна
prompt		Отображение диалоговой панели Prompt с полем ввода
setTimeout		Установка таймера
clearTimeout		Сброс таймера

Min

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

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

var nValue1;

var nValue2;

var nValueMin;

nValueMin = Math.min(nValue1, nValue1);

Многострочное поле textarea

В тех случаях, когда редактируемый текст должен занимать несколько строк, в форме между операторами <TEXTAREA> и </TEXTAREA> располагают многострочное текстовое поле:

<TEXTAREA

NAME="Имя_поля_textarea"

ROWS="Количество_строк"

COLS="Количество_столбцов"

WRAP="Режим_свертки_текста"

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

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

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

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

. . .

Отображаемый текст

. . .

</TEXTAREA>

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

Параметры ROWS и COLS определяют видимый размер многострочного поля редактирования, задавая, соответственно, количество строк и столбцов (количество символов, которые могут поместиться в одной строке).

Параметр WRAP задает способ свертки текста и может иметь одно из трех следующих значений:

Значение		Способ свертки текста
off		Свертка выключена, строки отображаются так, как вводятся
virtual		Строки сворачиваются только при отображении в окне редактирования, но передаются расширению сервера Web и сценарию JavaScript точно в таком виде, в котором вводятся
physical		При свертке в передаваемый текст записываются символы новой строки

Настройка браузера для работы с cookie

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

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

Браузер Microsoft Internet Explorer версии 4.0 допускает установку трех режимов работы с cookies. Эти режимы указываются на странице Advanced блокнота Internet Options (рис. 7.13), доступного из меню View браузера.

Рис. 7.13. Установка режимов работы с cookie

По умолчанию включен переключатель Always accept cookies, разрешающий использование cookie.

Переключатель Disable all cookie use полностью запрещает использование cookie.

Если включить переключатель Prompt before accepting cookies, при попытке установить cookies на экране появится предупреждающее сообщение (рис. 7.14).

Рис. 7.14. Предупреждающее сообщение при попытке записи данных cookie

Нажав кнопку More Info, вы можете получить подробные сведения о данных cookie, которые планируется записать на диск вашего локального компьютера, а также просмотреть эти данные в поле Data.

Настройка параметров документа HTML

Третий пример демонстрирует, как можно использовать cookie для настройки пользователем параметров документа HTML.

На рис. 7.5 показан документ HTML с двумя кнопками и переключателем, имеющим зависимую фиксацию.

Рис. 7.5. Главный документ HTML, при помощи которого можно выполнить настройку

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

Рис. 7.6. Внешний вид документа при первом посещении

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

При последующих посещениях внешний вид документа изменится (рис.7.7).

Рис. 7.7. Внешний вид документа при третьем посещении

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

Исходный текст документа HTML приведен в листинге 7.3.

Листинг 7.3. Файл chapter7/CustomPage/CustomPage.html

<HTML>

<HEAD>

<TITLE>Customize your page</TITLE>

<!--

var szColor="White";

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;

}

function findCookie(szName)

{

var i = 0;

var nStartPosition = 0;

var nEndPosition = 0;

var szCookieString = document.cookie;

while (i <= szCookieString.length)

      {

        nStartPosition = i;

        nEndPosition = nStartPosition + szName.length;

        if(szCookieString.substring(nStartPosition, nEndPosition) == szName)

        {

          nStartPosition = nEndPosition + 1;

          nEndPosition = document.cookie.indexOf(";",nStartPosition);

          if(nEndPosition < nStartPosition)

            nEndPosition = document.cookie.length;

          return document.cookie.substring(nStartPosition, nEndPosition);

          break;

        }

        i++;

      }

      return "";

    }

    function removeCookie(szName)

    {

      var dtExpires = new Date();

      dtExpires.setTime(dtExpires.getTime() - 1);

      var szValue = findCookie(szName);

      document.cookie = szName + "=" + szValue +

        "; expires=" + dtExpires.toGMTString();

    }

    function btnGo()

    {

      if(findCookie("Count") == "")

      {

        addCookie("Count","0",10);

        addCookie("bgColor",szColor,10);

        document.write("<H2>Добро пожаловать!</H2>");

        document.write("<P> Вы можете настроить цвет фона этой");

        document.write(" страницы при помощи переключателей,");

        document.write(" расположенных на главной странице.");

        document.write("<P>Настройки будут использованы, когда вы");

        document.write(" посетите эту страницу в следующий раз.");

      }

      else

      {

        var szCnt = findCookie("Count");

        var i=0;

        if(szCnt != "")

        {

          i = szCnt;

          i++;

          szCnt = i.toString();

          addCookie("Count",szCnt,10);

        }

        document.write("<H2>Рады видеть вас снова!</H2>");

        document.write("Вы посетили эту страницу в " + szCnt.bold() + " раз.");

        document.bgColor=findCookie("bgColor");

      }

    }

    function chkRadio(form,value)

    {

      szColor = value;

      addCookie("bgColor",szColor,10);

    }

    function setDefault(form)

    {

      removeCookie('Count');

      szColor="White";

    }

    // -->

    </SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

    <H1>Посетите вашу персональную страницу</H1>

    <FORM NAME="TestForm">

      <P>

      <INPUT TYPE="button" VALUE="Переход на страницу"

        onClick="btnGo();">

      <P><HR>

      <P>Настройка параметров персональной страницы

      <P><B>Цвет фона:</B>

      <P><INPUT TYPE="radio" NAME="Color" CHECKED VALUE="White"

        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Белый

      <BR><INPUT TYPE="radio" NAME="Color" VALUE="Yellow"

        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Желтый

      <BR><INPUT TYPE="radio" NAME="Color" VALUE="Lime"

        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Зеленый

      <BR><INPUT TYPE="radio" NAME="Color" VALUE="Fuchsia"

        onClick="if(this.checked) {chkRadio(this.form,this.value);}"> Малиновый

      <P>

      <INPUT TYPE="reset" VALUE="Параметры по умолчанию"

        onClick="setDefault(this.form);">

    </FORM>

</BODY>

</HTML>

Помимо функций addCookie, findCookie и removeCookie, предназначенных для работы с cookie, в сценарии определена переменная szColor, предназначенная для хранения выбранного пользователем цвета фона, а также функции btnGo, chkRadio и setDefault.

Функция btnGo прежде всего проверяет наличие параметра cookie с именем Count. Если такого параметра нет, сценарий считает, что пользователь просматривает этот документ в первый раз. В этом случае функция btnGo добавляет два параметра cookie с именами Count и bgColor:

addCookie("Count","0",10);

addCookie("bgColor",szColor,10);

Первый из них предназначен для хранения счетчика посещений, а второй - для хранения цвета фона.

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

В том случае, когда сразу после вызова функция btnGo нашла параметр cookie с именем Count и получила его значение, это значение увеличивается на единицу и записывается обратно. Кроме того, оно отображается в тексте документа:

document.write("<H2>Рады видеть вас снова!</H2>");

document.write("Вы посетили эту страницу в " +

szCnt.bold()+" раз.");

Затем функция btnGo устанавливает цвет фона сформированного документа HTML в соответствии со значением, извлеченным из параметра cookie с именем bgColor:

document.bgColor=findCookie("bgColor");

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

function chkRadio(form,value)

{

szColor = value;

addCookie("bgColor",szColor,10);

}

Эта функция записывает значение выбранного цвета в переменную szColor, а также в параметр cookie с именем bgColor.

И, наконец, функция setDefault удаляет параметр cookie с именем Count и устанавливает в переменной szColor белый цвет фона, принятый по умолчанию:

function setDefault(form)

{

removeCookie('Count');

szColor="White";

}

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

<INPUT TYPE="reset" VALUE="Параметры по умолчанию"

onClick="setDefault(this.form);">

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

Несколько примеров использования cookie

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

Объект document

Специально для работы с документами HTML в языке JavaScript имеется отдельный объект с названием document. Пользуясь его свойствами и методами, сценарий JavaScript может получить информацию о текущем документе, загруженном в окно браузера, а также управлять отображением содержимого этого документа. В первой главе нашей книги мы уже применяли один из методов объекта document с именем write для записи строки в тело документа HTML.

Когда в 29 томе “Библиотеки системного программиста” мы рассказывали о документах HTML, то говорили, что такие документы состоят из заголовка и тела документа. Заголовок определяется при помощи оператора языка HTML <HEAD>, а тело документа - при помощи оператора <BODY>. Прежде чем мы перейдем к описанию свойств и методов объекта document, рассмотрим назначение отдельных параметров оператора <BODY>.

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

<BODY

BACKGROUND="Фоновое_изображение"

BGCOLOR="Цвет_фона"

TEXT="Цвет_текста"

LINK="Цвет_непосещенных_ссылок"

ALINK="Цвет_активизированных_ссылок"

VLINK=" Цвет_посещенных_ссылок "

onLoad="Обработчик_события_при_загрузке_документа"

onUnload="Обработчик_события_при_выгрузке_документа">

</BODY>

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

Параметр		Описание
BACKGROUND		С помощью этого параметра можно указать адрес URL изображения, заполняющего фон тела документа
BGCOLOR		Параметр BGCOLOR применяется в тех случаях, когда фон документа необходимо раскрасить в какой-либо цвет. Цвет задается в виде "#rrggbb", где константы rr, gg и bb - соответственно, красная, зеленая и голубая компоненты цвета. Значение констант может находиться в диапазоне от 0 до FF (в шестнадцатеричном виде). Цвет может также задаваться символическими константами, такими как red или white
TEXT		Цвет текста. Задается таким же образом, что и цвет фона BGCOLOR
LINK		Параметр LINK определяет цвет ссылок, размещенных в документе HTML, и еще не посещенных пользователем
ALINK		Этот параметр определяет цвет ссылок, выбранных пользователем
VLINK		Параметр VLINK определяет цвет ссылок, размещенных в документе HTML, которые уже посещались пользователем ранее
onLoad		С помощью параметра onLoad можно определить обработчик события, который получит управление при загрузке документа в окно браузера
onUnload		Аналогично предыдущему, однако обработчик события получит управление при удалении документа из окна браузера

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

Объект window

Далее мы рассмотрим в деталях объекты браузера, необходимые вам практически в любом сценарии JavaScript. Прежде всего это объекты window, document, а также объекты, связанные с формами, определенными в документах HTML.

Первый объект браузера, которым мы займемся вплотную, это окно - объект с именем window.

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

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

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

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

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

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

Приведем конкретный пример.

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

Рис. 2.3. Просмотр содержимого записей

Прежде всего займемся созданием собственного класса с названием myRecord. Пусть пока в нем не будет методов, мы добавим их позже.

Искомый класс создается следующим образом:

function myRecord(name, family, phone, address)

{

this.name = name;

this.family = family;

this.phone = phone;

this.address = address;

this.secure = false;

}

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

Свойства определяются простыми ссылками на их имена с указанием ключевого слова this. Это ключевое слово здесь указывает, что в операторе выполняется ссылка на свойства того объекта, для которого вызван конструктор, то есть для создаваемого объекта.

Обратите внимание, что наш конструктор инициализирует свойство с именем secure, записывая в него значение false. Соответствующий параметр в конструкторе не предусмотрен, что вполне допустимо.

Как пользоваться определенным классом?

На базе этого класса вы можете создать произвольное количество объектов. Ниже мы привели фрагмент сценария JavaScript, где на базе класса myRecord создается два объекта rec1 и rec2:

var rec1;

var rec2;

rec1 = new myRecord("Иван", "Иванов",

"000-322-223", "Малая Большая ул., д. 225, кв. 226");

rec2 = new myRecord("Петр", "Петров",

"001-223-3334", "Большая Малая ул., д. 552, кв. 662");

rec2.secure = true;

Объекты создаются при помощи оператора new, знакомого тем, кто составлял программы на языках С++ и Java. Здесь мы передаем конструктору параметры для инициализации свойств создаваемых объектов.

Что же касается свойства с именем secure, то в объекте rec2 оно инициализируется уже после создания последнего. В него записывается значение true. Мы не изменяли свойство secure объекта rec1, поэтому в нем хранится значение false.

Теперь наша задача - добавление в определенный нами класс новых методов с именами printTableHead, printTableEnd и printRecord. Первые два из этих методов выводят в документ HTML, соответственно, начальный и конечный фрагмент таблицы, а третий - строки таблицы, отражающие содержимое записей.

В сокращенном виде новое определение класса myRecord представлено ниже:

function printTableHead()

{

. . .

}

function printTableEnd()

{

. . .

}

function printRecord()

{

. . .

}

function myRecord(name, family, phone, address)

{

this.name    = name;

this.family = family;

this.phone   = phone;

this.address = address;

this.secure = false;

this.printRecord    = printRecord;

this.printTableHead = printTableHead;

this.printTableEnd = printTableEnd;

}

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

this.printRecord    = printRecord;

this.printTableHead = printTableHead;

this.printTableEnd = printTableEnd;

Эти свойства хранят ссылки на методы, определенные выше.

После такого определения класса вы можете создавать объекты и обращаться к определенным методам:

rec1.printTableHead();

rec1.printRecord();

rec1.printTableEnd();

rec2.printTableHead();

rec2.printRecord();

rec2.printTableEnd();

Возвращаясь к документу, показанному выше на рис. 2.3, приведем его полный исходный текст (листинг 2.2).

Листинг 2.2. Файл chapter2/NewObject/NewObject.html

<HTML>

<HEAD>

    <TITLE>Просмотр записей</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

    

    </SCRIPT>

</HEAD>

<BODY BGCOLOR=WHITE>

    <H1>Просмотр записей</H1>

    <SCRIPT LANGUAGE="JavaScript">

    

    </SCRIPT>

</BODY>

</HTML>

Определение нового класса myRecord и его методов мы расположили в области заголовка документа HTML, как это принято делать.

Метод printTableHead выводит в документ HTML заголовок таблицы. Внешний вид этого заголовка зависит от содержимого свойств объекта.

Прежде всего метод printTableHead проверяет свойство secure, получая его значение при помощи ключевого слова this:

var szSec = "";

if(this.secure)

szSec = " (Secure)";

else

szSec = " (Unsecure)".fontcolor("red");

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

Если содержимое свойства secure равно true, в текстовую переменную szSec записывается строка " (Secure)". Если же оно равно false, в эту переменную заносится строка " (Unsecure)", причем для строки устанавливается красный цвет.

Так как в JavaScript все текстовые строки (в том числе и литералы) являются объектами встроенного класса String, то для них можно вызывать определенные в этом классе методы. В частности, метод fontcolor позволяет установить цвет строки, чем мы и воспользовались.

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

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

function printTableEnd()

{

document.write("</TABLE>");

document.write("<P> ");

}

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

Обратите внимание, что содержимое свойств объекта печатается наклонным шрифтом, для чего мы вызываем метод italics:

document.write("<TR><TD>Name:</TD><TD>" +

this.name.italics() + "</TD></TR>");

Определение класса myRecord мы уже описали выше.

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

Здесь мы создаем два объекта rec1 и rec2 на базе класса myRecord, а затем устанавливаем свойство secure объекта rec2 в состояние true.

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

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

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

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

Объявление переменных

Все переменные в JavaScript объявляются с помощью ключевого слова var, как это показано ниже:

var szHelloMsg;

Еще раз обращаем ваше внимание на то, что при объявлении тип переменной не указывается. Этот тип присваивается переменной только тогда, когда ей присваивается какое-либо значение.

Ниже мы записываем в переменную, которая не была предварительно объявлена, текстовую строку:

szMsg = “Привет!”;

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

При выборе имен переменных вы должны придерживаться следующих простых правил:

имя переменной должно начинаться с буквы или с символов “_”, “$” и может состоять только из букв, цифр, а также символов “_”, “$”;

имя переменной не должно совпадать с зарезервированными ключевыми словами JavaScript.

Список зарезервированных ключевых слов JavaScript приведен ниже:

break		if
case*		import*
catch*		in
class*		new
const*		null
continue		return
debugger*		super*
default*		switch*
delete		this
do*		throw*
else		true*
enum*		try
export*		typeof
extends*		var
false		void
finally*		while
for		with
function

Ключевые слова, представленные в этом списке, еще только планируется применять в языке JavaScript при его развитии. Эти слова отмечены символом *. Мы рекомендуем избегать их использования в ваших программах в качестве имен переменных.

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

Обработчики событий объекта text

Обработчики событий вызываются в следующих случаях:

Обработчик		Когда вызывается
onFocus		Вызывается, когда поле редактирования получает фокус ввода
onBlur		Вызывается, когда поле редактирования теряет фокус ввода
onChange		При изменении содержимого поля редактирования
onSelect		При выделении содержимого поля редактирования

Обработчики событий объекта textarea

Обработчики событий вызываются в следующих случаях:

Обработчик		Когда вызывается
onFocus		Вызывается, когда поле редактирования получает фокус ввода
onBlur		Вызывается, когда поле редактирования теряет фокус ввода
onChange		При изменении содержимого поля редактирования
onSelect		При выделении содержимого поля редактирования

Обработчики событий, связанные с объектом select

Как видно из формата оператора <SELECT>, рассмотренного выше, для списка вы можете определить три обработчика события: onFocus, onBlur и onChange.

События onFocus и onBlur возникают, когда список получает и теряет фокус ввода, соответственно. Что же касается события onChange, то оно создается, когда пользователь изменяет состояние списка, то есть выбирает в нем другой элемент.

Однострочное поле password

Для ввода такой информации, как пароли, в формах размещают однострочные поля редактирования типа password:

<INPUT TYPE="password"

NAME="Имя_поля_text"

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

SIZE=Размер_поля>

Для поля password можно указать параметры NAME, VALUE и SIZE. Заметим, что это поле не может иметь обработчики событий.

Параметр NAME позволяет задать имя поля, которое необходимо для обращения к свойствам объекта password, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку.

Параметр SIZE определяет размер (ширину) текстового поля в символах. Это размер видимой части поля. Он не ограничивает длину строки, которую можно ввести в данном поле.

Поле password похоже на поле text, рассмотренное нами ранее. Главное отличие заключается в том, что символы введенного в этом поле текста заменяются на звездочки.

Однострочное поле text

Наверное, наиболее часто в формах, размещенных на страницах серверов Web встречаются однострочные поля, предназначенные для ввода и редактирования текста. Для того чтобы встроить такое поле в форму, необходимо использовать оператор <INPUT> с параметром TYPE, равным значению “text”:

<INPUT TYPE="text"

NAME="Имя_поля_text"

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

SIZE=Размер_поля

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

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

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

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

Дополнительно можно указать параметры NAME, VALUE и SIZE, а также четыре обработчика событий, создаваемых текстовым полем.

Параметр NAME позволяет задать имя поля, необходимое для обращения к свойствам объекта text, соответствующего этому полю.

С помощью параметра VALUE можно записать в поле произвольную текстовую строку. Эта строка будет отображаться сразу после загрузки документа HTML в окно браузера.

Логические данные.......................................................................................... 17

Данные неопределенного типа................................................................... 17

Преобразование типов данных.............................................................................. 17

Операторы языка JavaScript................................................................................ 18

Унарные операторы................................................................................................. 18

Бинарные операторы............................................................................................... 18

Операторы для работы с отдельными битами.................................................... 19

Операторы сдвига................................................................................................... 19

Операторы отношения............................................................................................ 19

Оператор присваивания......................................................................................... 19

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

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

Оператор for....................................................................................................... 21

Оператор for-in.................................................................................................. 21

Оператор while.................................................................................................. 21

Оператор break................................................................................................. 21

Оператор continue............................................................................................ 21

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

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

Функции в языке сценариев JavaScript................................................................. 22

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

2 Классы и объекты в JavaScript.................................................................................. 26

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

Встроенные объекты............................................................................................... 26

Объекты браузера................................................................................................... 27

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

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

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

Массивы в JavaScript............................................................................................... 32

Объект window......................................................................................................... 32

Свойства объекта window..................................................................................... 32

Методы объекта window......................................................................................... 33

Метод alert.......................................................................................................... 33

Метод confirm..................................................................................................... 33

Метод prompt..................................................................................................... 33

Метод open......................................................................................................... 34

Метод close........................................................................................................ 34

Метод setTimeout.............................................................................................. 34

Метод clearTimeout.......................................................................................... 35

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

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

Как закрыть окно браузера..................................................................................... 35

Открываем новое окно........................................................................................... 37

Бегущий текст в строке состояния браузера....................................................... 38

Ограничение времени реакции пользователя...................................................... 40

Загрузка документа HTML в окно браузера.......................................................... 43

Объект document..................................................................................................... 45

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

Методы объекта document...................................................................................... 46

Цветовое оформление документа......................................................................... 46

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

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

Свойства.................................................................................................................. 52

E............................................................................................................................ 52

PI........................................................................................................................... 52

LN2....................................................................................................................... 52

LN10..................................................................................................................... 53

LOG2E.................................................................................................................. 53

LOG10E............................................................................................................... 53

SQRT2.................................................................................................................. 53

SQRT1_2............................................................................................................. 53

Методы...................................................................................................................... 53

abs........................................................................................................................ 53

acos...................................................................................................................... 53

asin....................................................................................................................... 53

atan....................................................................................................................... 53

ceil......................................................................................................................... 53

cos........................................................................................................................ 53

exp......................................................................................................................... 53

floor....................................................................................................................... 53

log......................................................................................................................... 54

max....................................................................................................................... 54

min........................................................................................................................ 54

pow....................................................................................................................... 54

random................................................................................................................. 54

round.................................................................................................................... 54

sin......................................................................................................................... 54

sqrt........................................................................................................................ 54

tan......................................................................................................................... 54

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

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

getDate................................................................................................................. 55

getDay.................................................................................................................. 55

getHours.............................................................................................................. 55

getMinutes........................................................................................................... 55

getMonth.............................................................................................................. 55

getSeconds......................................................................................................... 55

getTime................................................................................................................ 55

getTimeZoneOffset............................................................................................ 55

getYear................................................................................................................. 55

parse.................................................................................................................... 55

setDate................................................................................................................. 56

setHours.............................................................................................................. 56

setMinutes........................................................................................................... 56

setMonth.............................................................................................................. 56

setSeconds......................................................................................................... 56

setTime................................................................................................................ 56

setYear................................................................................................................. 56

toGMTString......................................................................................................... 56

toLocaleString..................................................................................................... 56

UTC....................................................................................................................... 56

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

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

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

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

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

Оператор <FORM>.................................................................................................... 60

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

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

Кнопка button............................................................................................................ 62

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

Методы объекта button................................................................................... 62

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

Переключатель checkbox........................................................................................ 63

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

Методы объекта checkbox.............................................................................. 64

Переключатель radio................................................................................................ 64

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

Методы объекта radio..................................................................................... 64

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

Список select............................................................................................................. 69

Свойства объекта select................................................................................. 69

Методы объекта select.................................................................................... 70

Обработчики событий, связанные с объектом select............................ 70

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

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

Динамическое заполнение списка............................................................. 72

Однострочное поле text........................................................................................... 73

Свойства объекта text...................................................................................... 73

Методы объекта text......................................................................................... 73

Обработчики событий объекта text............................................................. 73

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

Многострочное поле textarea.................................................................................. 75

Методы объекта textarea................................................................................ 76

Обработчики событий объекта textarea..................................................... 76

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

Однострочное поле password................................................................................ 79

Свойства объекта password......................................................................... 80

Методы объекта password............................................................................ 80

Ввод идентификатора и пароля............................................................................. 80

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

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

Электронные часы.................................................................................................. 91

4 JavaScript и Фреймы................................................................................................... 93

Файл описания фреймов...................................................................................... 93

Параметры оператора <FRAMESET>...................................................................... 93

Параметры оператора <FRAME>............................................................................ 94

Взаимодействие между фреймами................................................................... 94

Десятично-шестнадцатеричный преобразователь............................................. 94

Отображение нескольких документов HTML........................................................ 97

5 растровые изображения.......................................................................................... 101

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

Динамическая замена растровых изображений......................................... 102

Изменение внешнего вида графических ссылок............................................... 102

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

Ожидание загрузки всех изображений................................................................ 105

6 Взаимодействие с аплетами Java............................................................................ 107

Встраивание аплета Java в документ HTML.................................................. 107

Вызов методов аплета Java из сценария JavaScript................................... 108

Доступ к полям аплета Java из сценария JavaScript................................... 111

Динамическая загрузка аплетов Java............................................................. 114

7 Применение COOKIE.................................................................................................. 118

Выполнение основных операций с cookie..................................................... 118

Создание cookie...................................................................................................... 118

Первый способ: создание cookie расширением сервера Web......... 118

Второй способ: создание cookie в сценарии JavaScript...................... 119

Получение значения cookie................................................................................... 120

Изменение значения параметра cookie.............................................................. 121

Удаление cookie...................................................................................................... 121

Ограничения на использование cookie................................................................ 121

Несколько примеров использования cookie................................................ 121

Фиксация повторных посещений страницы........................................................ 121

Записная книжка Cookies Notepad........................................................................ 124

Настройка параметров документа HTML............................................................ 127

Получение cookie расширением сервера Web.................................................... 130

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

Настройка браузера для работы с cookie...................................................... 139

Приложение 1. Работа с отладчиком Microsoft Script Debugger 141

Установка отладчика Microsoft Script Debugger........................................... 141

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

Запуск сценария в режиме отладки.................................................................... 142

Использование команды вызова отладчика......................................... 142

Запуск отладчика через меню браузера................................................. 143

Автоматический запуск отладчика при возникновении ошибки....... 143

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

Установка и сброс точек останова..................................................................... 144

Выполнение сценария в пошаговом режиме...................................................... 145

Выполнение сценария в непрерывном режиме................................................. 145

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

Изменение значений переменных....................................................................... 146

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

Установка закладок в исходном тексте............................................................. 147

Литература.......................................................................................................... 149

Предметный указатель................................................................................ 150

Оглавление.......................................................................................................... 154

Ограничение времени реакции пользователя

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

Но как измерить время, в течении которого пользователь не активен?

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

Мы продемонстрируем применение этих методов для решения другой задачи, связанной с ограничением времени ввода пароля.

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

Рис. 2.12. Форма в документе HTML для ввода пароля

Сразу после загрузки документа в окно браузера сценарий запускает таймер, вызывая метод setTimeout из этого же класса. Таймер устанавливается на 10 секунд. Именно за это время вы должны ввести пароль и нажать кнопку “Enter Password” в форме, показанной на рис. 2.12, чтобы получить доступ к странице.

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

Рис. 2.13. Сообщение о запрещенном доступе

Только в том случае, если пароль введен правильно и в течении 10 секунд, на экране появляется сообщение о предоставлении доступа и ссылка, с помощью которой можно перейти к просмотру главной страницы нашего сервера Web (рис. 2.14).

Рис. 2.14. Сообщение о разрешении доступа и ссылка на главную страницу нашего сервера Web

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

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

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

Теперь рассмотрим исходный текст сценария JavaScript, встроенного в документ HTML (листинг 2.6).

Листинг 2.6. Файл chapter2/Password/Password.html

<HTML>

<HEAD>

    <META http-equiv="Content-Type"

      content="text/html; charset=windows-1251">

    <TITLE>Ввод пароля</TITLE>

    <SCRIPT LANGUAGE="JavaScript">

    

    </SCRIPT>

</HEAD>

<BODY BGCOLOR=white onLoad="StartMyTimer();">

    <H1>Доступ ограничен</H1>

<P>Мы ограничили доступ к нашему серверу :)

<P>Вы должны ввести пароль (слово password)

в течении 10 секунд.

    <HR>

    <FORM NAME="pwdForm">

      <P><INPUT TYPE="text" VALUE="******" NAME="pwd">

      <P><INPUT TYPE="button" VALUE="Enter Password"

      onClick="CheckPassowd();">

    </FORM>

    <HR>

</BODY>

</HTML>

Прежде всего обратим ваше внимание на заголовок документа HTML.

В первой странице этого заголовка мы указали с помощью оператора <META> номер кодовой страницы 1251, соответствующей кириллице в Windows:

<META http-equiv="Content-Type"

content="text/html; charset=windows-1251">

Без этой строки наш документ отображался неправильно браузером Microsoft Internet Explorer версии 4.0.

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

var idTimer=0;

function StartMyTimer()

{

var cmd="NoAccess()";

idTimer=window.setTimeout(cmd, 10000);

}

Функция StartMyTimer запускает таймер, сохраняя его идентификатор в глобальной переменной idTimer. Для запуска таймера мы применили знакомый вам метод с именем setTimeout.

Когда таймер сработает (а это произойдет через 10 секунд после загрузки нашего документа HTML в окно браузера), будет вызвана функция NoAccess. Эта функция выводит в окно браузера сообщение о запрещении доступа к странице.

Для того чтобы функция StartMyTimer запускалась сразу после загрузки документа HTML в окно браузера, мы указали ее имя в параметре onLoad оператора <BODY>, организовав таким образом обработку соответствующего события:

<BODY BGCOLOR=white onLoad="StartMyTimer();">

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

Для ввода пароля необходимо использовать форму, которая определена в нашем документе HTML следующим образом:

<FORM NAME="pwdForm">

<P><INPUT TYPE="text" VALUE="******" NAME="pwd">

<P><INPUT TYPE="button" VALUE="Enter Password"

  onClick="CheckPassowd();">

</FORM>

Имя формы pwdForm указано в параметре NAME оператора <FORM>. Это имя нам потребуется для извлечения строки пароля из текстового поля, определенного в форме с помощью оператора <INPUT>. Имя этого текстового поля pwd также задается параметром NAME.

Помимо текстового поля, в форме имеется кнопка с надписью “Enter Password”. Для этой кнопки мы определили обработчик события onClick, который вызывается, когда пользователь нажимает мышью на кнопку. Обработчиком в нашем случае является функция CheckPassowd, определенная в нашем сценарии. Эта функция проверяет пароль и, если пароль введен правильно, останавливает таймер, запущенный при загрузке документа HTML.

Как наш сценарий извлекает строку пароля из поля формы?

Это делается следующим образом:

var szPwd="";

szPwd=document.pwdForm.pwd.value;

Здесь мы выполняем ссылку на свойство value объекта pwd, которым является текстовое поле формы (вспомните, что это поле называется pwd). Объект pwd находится внутри формы с именем pwdForm, которая, в свою очередь располагается в документе HTML, загруженным в окно браузера. Этим документом является объект document.

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

if(szPwd=="password")

{

clearTimeout(idTimer);

    . . .

}

Если строка введена правильно, таймер останавливается методом clearTimeout. В качестве параметра этому методу передается идентификатор таймера, полученный от метода setTimeout. При ошибке в документ HTML записывается сообщение о запрещении доступа.

Ограничения на использование cookie

На использование cookie накладываются определенные ограничения, которые мы перечислили ниже:

всего может быть создано не более чем 300 cookie;

каждый cookie не может превышать по своему размеру 4 Кбайт;

для каждого домена может быть создано не более 20 cookie

Если указанные значения будут превышены, браузер может удалить самые старые cookie или обрезать значения параметров cookie.

Оператор break

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

var i = 0;

while(true)

{

. . .

i++;

if(i > 10)

break;

. . .

}

Оператор continue

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

Ниже мы привели пример использования оператора continue:

var i = 0;

while(i < 100)

{

i++;

if(i < 10)

continue;

. . .

}

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

Оператор for

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

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

{

. . .

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

. . .

}

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

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

Область итерации применяется для изменения значений переменных цикла, например, для уменьшения счетчика цикла.

Оператор for-in

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

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

{

. . .

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

. . .

}

Оператор <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 может управлять этим процессом.

Оператор присваивания

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

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

Оператор		Описание
=		Простое присваивание
+=		Увеличение численного значения или слияние строк
-=		Уменьшение численного значения
*=		Умножение
/=		Деление
%=		Вычисление остатка от деления
>>=		Сдвиг вправо
>>>=		Сдвиг вправо с заполнением освобождаемых разрядов нулями
<<=		Сдвиг влево
\|=		ИЛИ
&=		И
^=		ИСКЛЮЧАЮЩЕЕ ИЛИ

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

Рассмотрим, например, применение оператора += для увеличения содержимого числовой переменной.

Вначале решим эту задачу без использования данного оператора. Ниже мы объявили переменную с именем nCounter и присвоили ей начальное значение 1, а затем увеличили это значение на 5:

var nCounter = 1;

nCounter = nCounter + 5;

Теперь сделаем то же самое, но по-другому:

var nCounter = 1;

nCounter += 5;

Как видите, второй способ короче первого.

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

nCounter >>= 3;

Результат при этом будет такой же, как и при выполнении следующей строки:

nCounter = nCounter >> 3;

Оператор while

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

while(условие)

{

. . .

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

. . .

}

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