ГЛАВА 8

Применение JavaScript при создании Web-страниц

• Необходимость применения JavaScript
• Основы JavaScript
• Вставка в код страницы
• Синтаксис. Типы переменных. Массивы
• Ввод/вывод в JavaScript
• Управление потоком вычислений в JavaScript
• Управление окнами просмотра.
• Пользовательские функции
• Формы и JavaScript

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

Необходимость применения JavaScript

Первый и самый главный недостаток языка HTML — это полное отсутствие каких-либо независимых от пользователя средств управления и контроля за отображением и просмотром Web-страниц. Содержимое и/или параметры отображения той или иной страницы задаются жестко в момент написания и не могут быть изменены в процессе отображения страницы и просмотра ее пользователем. Переходы между страницами также находятся под полным контролем пользователя. Даже размер открываемого для просмотра окна браузера будет таким, каким захочет видеть его пользователь (И ваш чудесный дизайн, рассчитанный, правда, на ширину окна 480 пикселов, перестанет быть таковым при просмотре в окне шириной 600 пикселов). Таким образом, сайт, созданный при помощи стандартных средств HTML, получается достаточно пассивным по отношению к пользователю и не отвечает в полной мере интерактивной концепции, в рамках которой он, вообще говоря, и создавался. Второй недостаток во многом переплетается с первым и состоит в отсутствии средств программирования. Ввиду этого недостатка HTML не имеет той гибкости, которую ожидают создатели современных Web-сайтов. Представим, что создатель сайта хочет, чтобы перед отображением документа была известна ширина текущего окна браузера. В зависимости от этой величины выбирается тот или иной дизайн страницы. Это легко сделать при помощи банального, известного еще со времен Бейсика и Паскаля, оператора ветвления (if - Then - Else). Так ведь HTML не имеет даже такого простого средства. Таким образом, в рамках чистого HTML мы не только не можем предоставить пользователю свою реальность, но и не можем даже подстроиться под реалии пользователя.

Естественно, с таким положением дел мириться нельзя. Было предложено несколько вариантов выхода из этой ситуации.

Первый подход — автоматическая генерация HTML-кода на стороне сервера и дальнейшая отправка его клиенту. Этот подход реализовывается благодаря технологиям CGI, ASP, SSI и др. Он позволяет в полной мере держать под контролем взаимодействие сайта с пользователем и решить тем самым многие из вышеописанных проблем. Однако, являясь очень мощными средствами Web-программирования, CGI, ASP, SSI имеют также несколько принципиальных недостатков.

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

Второй подход — перенос исполнения серверных приложений на клиентскую сторону. В рамках этого подхода происходит загрузка исполняемого кода для машины пользователя по сети. Здесь мы сразу сталкиваемся с проблемой безопасности, поскольку исполняемый модуль является, по сути дела, "котом в мешке", и может содержать команды, выполняющие деструктивные действия, предотвратить исполнение которых довольно сложная проблема. Также приложения могут иметь очень большой (сотни килобайт) размер, что сказывается на времени их передачи по сети и возможности нарушения целостности данных ввиду сбоев связи или помех. Третье препятствие — многообразие аппаратно-программных платформ пользователей. Не факт, что у пользователя, загружающего ЕХЕ-файл стоит Windows-подобная операционная система. Вопросы совместимости, безопасности, объема данных и другие могут быть решены путем перехода от готовых компилированных приложений к интерпретируемым. Специальная программа-интерпретатор, находящаяся на стороне пользователя и управляемая браузером, принимает от сервера некий промежуточный код, анализирует его, в том числе и на наличие деструктивных операций, и либо исполняет его, либо компилирует его в настоящий исполняемый модуль. Данный подход был реализован в специальном Web-ориентированном языке Java, рожденном в недрах компании Sun Microsystems в 1995 году, а также в других подобных средствах, например, Macromedia Flash.

Дальнейшим шагом в этом направлении стал третий подход — отказ от промежуточного кода и передача пользователю непосредственно встроенных в HTML-страницу кусков программного кода — скриптов. Данные скрипты (их еще называют сценарии) интерпретируются и исполняются специальным модулем браузера. Скрипты не имеют той мощи, которая присуща серверным или клиентским приложениям, но, тем не менее, позволяют решать большинство задач по управлению отображением и загрузкой страниц сайта. Кроме того, для написания скриптов не нужно обладать какими-то специальными средствами для их разработки и отладки. Достаточно иметь, как и для написания HTML-кода, Блокнот (Notepad), а для проверки и исполнения обычный браузер.

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

JavaScript является потомком вышеупоминавшегося языка Java компании Sun. Впервые он был реализован в браузерах Netscape 2.O. Однако быстро завоевал бешеную популярность и получил повсеместное распространение, особенно после "введения в эксплуатацию" Internet Explorer 3.0 с поддержкой JavaScript. Как и Java, JavaScript имеет синтаксис, подобный синтаксису языка C++, что во многом способствовало его популярности. Другим достоинством JavaScript, взятым от прародителя, является использование объектно-ориентированной концепции программирования. Правда, в отличие от Java, объектная модель спрятана достаточно глубоко, и Web-мастер, довольно долго использующий JavaScript, может и не догадываться о том, что он работает не просто с переменными, а с объектами. Тем не менее программа, написанная на языке описания сценариев, в процессе своего функционирования использует как свои объекты, так и объекты браузера, осуществляя при этом вызовы методов и обработку событий.

Основы JavaScript

На момент написания книги последней является версия JavaScript 1.3.

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

Вставка в код страницы

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

Как правило, скрипты вставляются непосредственно в тело HTML-документа при помощи специального тега <SCRIPT>. . .</SCRIPT> . Браузер анализирует содержимое, находящееся между этими тегами и для исполнения сценария приводит в действие тот или иной интерпретатор. Тем не менее, для устранения возможных разночтений и коллизий есть возможность указывать язык и его версию непосредственно в теле тега скрипта: 

<SCRIPT language JavaScript 1.1> ... </SCRIPT>.

Альтернативным и во многих случаях полезным вариантом является размещение скриптов в отдельных файлах. Этот подход наиболее приемлем при использовании скриптов довольно большого объема, а также для хранения служебных процедур. Если мы храним наш скрипт в файле с именем filel.js, то включить его в код страницы мы можем следующим способом: <SCRIPT src="filei. JS"X/SCRIPT>. В этом случае между тегами описания скрипта ничего вставлять не нужно — необходимый код находится ведь в файле filel.js. Ничто не мешает нам указывать название языка и его версию в теге описания скрипта и в этом случае.

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

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

Листинг 8.1. Использование скриптов в теле HTML-документа 

<HTML>

<HEAD>

<! - - - Здесь данные заголовка --->

</HEAD>

<BODY>

<!---HTML-код --->

<SCRIPT>

// Код скрипта

</SCRIPT>

<!--- HTML-код--->

<SCRIPT language VBScript>

// Код скрипта на языке VBScript

</SCRIPT>

<!---HTML-код-->

<SCRIPT language JavaScript 1.3 >

// Код скрипта на языке JavaScript

</SCRIPT>

<!---HTML-код--->

<!--- Подключаем скрипт из внешнего файла--->

<SCRIPT src="script-l.js" language JavaScript 1.1 >

</SCRIPT>

<!---А если браузер не знает о скриптах ? -->

<NOSCRIPT>

<CENTER> <H1>

!!! Ваш браузер не имеет поддержки скриптов. Советуем обзавестись новым

программным обеспечением !!!

</Н1>

</CENTER>

</NOSCRIPT>

</BODY>

</HTML>

 Замечание 

В листинге 8.1 использован HTML-тег <!--- ---> . Это тег комментария. Весь текст между открывающим <! — и закрывающим —> символами тега комментария носит чисто информативный характер и игнорируется браузером при отображении документа. Как и во многих других языках, комментарий в HTML может служить для временного отключения некоторых участков кода при отладке.

Синтаксис. Типы переменных. Массивы

JavaScript является настоящим языком программирования со всеми присущими ему атрибутами: переменными, операторами контроля процесса, командами ввода/вывода и др. Синтаксис JavaScript во многом схож с синтаксисом C++, довольно распространенным на Западе языком программирования. В то же время конструкции JavaScript достаточно упрощены, что позволяет осваивать его людям, не являющимися достаточно глубокими знатоками программирования.

Для написания кода программ на JavaScript используется стандартный набор латинских символов. В строковых выражениях могут использоваться символы национальных алфавитов. Применяются также специальные символы, такие как \п — новая строка, \t — табуляция, \b — забой, \r — возврат каретки. В качестве комментария используется последовательность символов \\. В названиях операторов и именах переменных заглавные и строчные буквы являются равнозначными. Переменные JavaScript задаются в следующем формате и могут быть объявлены в любом месте кода скрипта:

var cnt;

Возможно задание начального значения переменной при ее объявлении:

var name = "значение";

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

today=new Date () ;

Здесь порожден экземпляр объекта Date, позволяющего осуществлять работу с датой.

 Замечание 

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

Изменение значений переменных происходит при помощи использования оператора присваивания =.

Namel = "Выражение!";

"Выражение!" может содержать в себе другие переменные и операторы действий над ними. Большинство операторов JavaScript подобны соответствующим операторам языка C++:

• + — сложение, сцепление строк;
•  - — вычитание;
•  * — умножение;
•  / — деление;
•  % — остаток от целочисленного деления;
•  ++ — инкремент;
•  -- — декремент;
•  а+=b— а=а+b;
•  а-=b— a=a-b;
•  & — логический AND (длинный вариант);
•  && — логический AND (короткий вариант);
•  | — логический OR (длинный вариант);
•  || — логический OR (короткий вариант);
•  ! — логическое отрицание;
•  > — больше;
•   < — меньше;
•   >> — сдвиг вправо;
•   << — сдвиг влево.

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

(2=3) & (А)

результат false; выражение А будет вычислено.

(2=3) && (А)

результат false; выражение А не будет вычислено.

Математические функции реализуются при помощи библиотеки Math:

•  Math .sin () — синус;
•  Math.cos () — косинус;
• Math, tan () —тангенс;
•  Math.exp() —экспонента;
•  Math, log () — натуральный логарифм;
•  Math, random () — случайное число от 0 до 1.

Более подробный список математических функций JavaScript можно найти в специализированной литературе.

Задание массивов происходит при помощи оператора Array (массивы являются объектами):

mas = new Array ();

Здесь задан массив mas, имеющий неопределенную размерность.

masl = new Array (5);

Массив masl содержит пять элементов.

 Важно 

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

Можно задавать начальные значения элементов массива в процессе его объявления (тем самым задается размерность и тип элементов):

mas2 = new Array ("Пушкин", "стол", "яблоко"};

Это массив из трех строковых элементов.

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

masl[3] = 10;

 masl[8] = 18;

(Теперь masi содержит девять элементов).

Текущая размерность массива содержится в свойстве Length:

с = masI.length;

JavaScript предоставляет нам также несколько интересных методов работы с массивами. Так, метод Reverse меняет порядок элементов массива на обратный:

masl.reverse;

sort — сортирует элементы массива:

mas3 = masl.sort;

Join — объединяет элементы массива в строку, используя при этом указанный разделитель:

str = mas2.join(" -> ");

Строка str при этом примет следующее значение:

"Пушкин -> стол -> яблоко"

 

Ввод/вывод в JavaScript

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

Наиболее простым является применение оператора Alert (). Аргументом оператора может являться любое строковое выражение. Если аргумент имеет нестроковый тип, то он переводится в строковый. Результатом выполнения оператора Alert о является вывод на экран довольно зловещего (Alert по-английски значит "угроза") диалогового окна, содержимым которого является значение выражения аргумента (рис. 8.1).

Рис. 8.1. Диалоговое окно оператора Alert

При этом диалоговое окно будет терпеливо ожидать нажатия пользователем кнопки ОК. Только после выполнения этого действия исполнение программы и отображение страницы будет продолжено. Вывод при помощи окна оператора Alert весьма удобно использовать для контроля значений переменных на том или ином этапе выполнения программы, т. е. при отладке. Приведем код HTML-документа, который приводит к появлению такого окна (листинг 8.2).

 Листинг 8.2. Вывод на экран с использованием окна оператора Alert 

<HTML>

<МЕТА content="text/html; charset=windows-1251" http~equiv=Content-Type>

<BODY>

<SCRIPT>

mas2 = new Array ("Пушкин", "стол", "яблоко");

dd = mas2.join ("->");

alert(dd);

</SCRIPT>

</BODY>

</HTML>

В качестве упражнения мы бы порекомендовали вам проверить результат работы перечисленных в предыдущем пункте операторов JavaScript.

Следует отметить, что функция Alert () является методом объекта window, который описывает текущее окно браузера. Поэтому синтаксически более корректно вызывать эту функцию следующим образом:

window.alert("Текст сообщения").

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

Оператор document.writeln() отличается от оператора document.write() тем, что переносит позицию вывода на новую строку. Вывод текста происходит с текущими атрибутами, которые имеют место на момент вызова того или иного оператора вывода. Выражение, которое является аргументом оператора вывода, может содержать любую строковую константу, а также включать в себя различные теги HTML. При выводе подобного выражения эти теги будут интерпретироваться соответствующим образом. Все это позволяет строить HTML-код на лету, в зависимости от тех или иных параметров. Все это подробно отражено в примере, приведенном в листинге 8.3. Советуем обратить внимание на совместную работу тегов HTML, выводимых при помощи скрипта и уже имеющихся в документе.

 Замечание 

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

Листинг 8.3. Вывод в тело документа средствами JavaScript ;

<HTML>

<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>

<BODY bgcolor= "#aa88aa" >

<H2> Это вывод средствами HTML <BR>

<SCRIPT>

document.write ("А это работает оператор Write ()");

document.writeln ("</H2> <H3> <FONT color=#fffffff> " +

"<center> Поменяем стиль шрифта </center> </H3> <BR> ");

</SCRIPT>

Вот это да !

</FONT>

<SCRIPT>

document.writeln (" Мы можем даже вставить картинку: <BR>");

document.writeln (" <img src= s37b.jpg> ");</SCRIPT>

</BODY>

</HTML>

Что из этого получается, видно на рис. 8.2.

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

Рис. 8.2. Вывод на экран средствами JavaScript

Варианты "цитат" будем хранить в специальном массиве. Поскольку для того, чтобы повторы были редки, необходимо достаточно много вариантов "цитат", поэтому объем массива будет достаточно большим, сравнимым с размером типичного HTML-документа. Поэтому объявление массива разместим в отдельном файле скрипта, например, hello.js (листинг 8.4).

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

var ааа = new Array(12);

ааа[0]="0дна голова хорошо, а две — это уже мутация";

ааа[1]="0дна голова хорошо, а с туловищем лучше";

ааа[2]="Ка-52 это душа погибшего Т-72 ";

ааа[3]="Сердце девушки проще открыть ключом от Мерседеса.";

ааа[4]="0тсутствие точки зрения некоторые объясняют широтой взглядов.";

ааа[5]="Для счастья нужны двое, для полного — трое.";

ааа[6]="Гостей встречают по одежке, а провожают — по морде!";

ааа[7]="Все там будем — надпись на машине скорой помощи";

ааа[8]="Keyboard not found. Press Fl to continue ";

aaa[9]="Bce хотят хорошо провести время, но его не проведешь.";

ааа[10]="Мы стоим столько, сколько можем дать";

ааа[11]="Жить в России здорово! Пока не протрезвеешь...";

 Замечание 

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

Теперь напишем скрипт, который случайным образом выводит цитату дня на экран (листинг 8.5).

 Листинг 8.5. Вывод приветствия на экран 

<!---Подключаем файл hello.js ---> 

<SCRIPT s.rc="hello. js"x/SCRIPT>

<! ---В нужном месте выводим цитату дня ---> 

<SCRIPT language=javascriptl.l> var i = 0;

i = Math, round (Math, random ()* (aaa. length — lib-document, write ("Цитата дня : ... " + aaa[ i ]);

</SCRIPT>

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

Подобный метод отображения баннеров во многих баннерных сетях рассматривается как способ обмана и может повлечь применение против вас санкций со стороны администратора сети!

Рассмотрим теперь операторы ввода. JavaScript предоставляет нам несколько способов организации ввода. Первый — использование метода Prompt объекта window. Он имеет следующий синтаксис:

d = window.promt ("Текст сообщения", "Значение_по_умолчанию");

В результате выполнения такой команды на экране появится окно запроса, где пользователю будет выведено приглашение на ввод, содержащееся в выражении "Текст сообщения". После ввода введенное значение присваивается переменной d. Если пользователь не ввел ничего, то d будет присвоено значение выражения "Значение_по_умолчанию". Это значение будет выведено в окне запроса и подсвечено так, что, нажав кнопку ОК, пользователь введет это значение, а, нажав любую другую кнопку, может приступить к вводу своей информации (рис. 8.3). Последнее выражение является необязательным элементом синтаксиса оператора Promt (листинг 8.6).

 Листинг 8.6. Ввод при помощи оператора Promt 

<HTML>

<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>

<BODY>

<SCRIPT>

var d = "Малая";

c=prompt("Введите слово", "Земля");

s =d+" " +C;

alert (s) ;

</SCRIPT>

</BODY>

</HTML>

Рис. 8.3. Ввод данных в JavaScript

Ввод значений булевского типа удобнее всего осуществлять при помощи оператора window.confirm, имеющего синтаксис:

b = confirm ("Вопрос");

В результате выполнения такой команды на экране появится окно с заданным вопросом и двумя кнопками (рис. 8.4). В зависимости от нажатия пользователем той или иной кнопки переменная b получит либо значение true (кнопка ОК), либо false (кнопка Cancel, в русифицированной ОС Windows — Отмена).

Рис 8.4. Окно оператора Confirm

Чаще всего оператор Confirm применяется в совокупности с операторами ветвления или цикла, которые мы рассмотрим ниже.

Управление потоком вычислений в JavaScript

В наследство от языка C++ JavaScript достались следующие операторы, реализующие основные алгоритмы управления потоком вычислений (flow control): оператор цикла с конечным числом повторений, оператор цикла while, оператор ветвления. Рассмотрим их синтаксис.

Оператор ветвления реализует выбор той или иной последовательности действий в зависимости от условия (условный оператор):

if (условие) {

Последовательность 1

}

else

{

Последовательность 2

}

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

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

for ("выражение", "условие", "операция")

{

Последовательность действий.

}

Здесь необходимо использование целочисленной переменной, начальным значением которой будет "выражение". Цикл будет повторяться, пока будет истинным "условие". При этом при каждой итерации цикла над переменной-счетчиком будет выполняться действие "операция". Вот пример вычисления суммы элементов некоторого массива:

3=0

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

{

s+=mas[i];

}

Цикл while исполняет некоторую последовательность действий до тех пор, пока верно некоторое условие. Синтаксис цикла следующий:

while ("условие") 

{

Последовательность действий 

}

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

Для принудительного выхода из циклов используется команда break. Для перехода к следующей итерации цикла (досрочного исполнения последовательности действий внутри цикла) используется оператор continue.

В качестве примера, иллюстрирующего применение вышеуказанных операторов, рассмотрим интересный скрипт, реализующий разновидность игры в "Блэк Джэк" (по-русски — "Очко"). Необходимые комментарии даны в листинге 8.7.

 Листинг 8.7. Пример использования операторов контроля потока вычислений

<HTML>

<МЕТА content="text/html; charset=windows-1251"

http-equiv=Content-Type><BODY bgcolor=#55ff55>

<center>

<Н2>Добро пожаловать в виртуальное казино </Н2>

<Н1> Корона и Якорь </Н1> </center>

<Script>

alert("Итак, играем в очко !");

// Инициализация переменных

var you=0;

var comp=0;

// Раздаем по 2 карты

for (i=l; i<3; i++)

{

// Значения карт от 2 до 11

you+= 2+ Math.round(Math.random()*10);

comp+=2+ Math.round(Math.random()*10);

}

while ( (you<22) &S (window.confirm') "У вас на руках " + you +"\n

Будете брать еще ?" )})

// Цикл исполняется, пока у игрока < 21 и пока он хочет брать карту

{

// Выдаем еще одну карту

you+=2+ Math.round(Math.random()*10);

}

while ( comp < 16)

(

// Теперь играет крупье

comp+=2+ Math.round(Math.random()*10); - }

// Подведение итогов

if (you>21)

// Либо перебрали вы

{

alert("У Вас перебор . "+"\n Вы проиграли :) ");

}

else

{

if (comp>21)

// Либо перебор у казино

{

alert ("Перебор у казино. "+'"\n Ваша взяла :( "); . }

else

{

if (comp>you)

// Либо вы проиграли

{

alert("У меня "+ сотр + "\n Победа казино");

}

else

// Либо победили

{

alert(" Вы победили");

}

}

}

</SCRIPT>

</BODY>

</HTML>

Управление окнами просмотра

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

Команда document. clear очищает текущее окно. Это может пригодиться при выводе данных в тело документа.

Команда window.close закрывает текущее окно браузера (весьма забавно дать пользователю 30 секунд на просмотр страницы, после чего закрыть браузер).

Команда Window.open (ur 1, местоположение, атрибуты) открывает Документ

по адресу uri в окне или фрейме, заданном в выражении "местоположение". Параметры окна описаны в выражении "Атрибуты". Данная команда широко используется для открытия сопутствующих основному окну окон с рекламой.

Команда location.href = "uri" производит переход в текущем окне на новый адрес, указанный в uri. Это весьма полезная и потому часто используемая команда. Свойство location могут иметь объекты window, а также фреймы. Это позволяет осуществлять загрузку документа в нужном окне или фрейме. Рассмотрим пример (листинг 8.8).

 Листинг 8.8. Организация перехода 

<SCRIPT>

Str = "Для выбора русского языка нажмите ОК \n "+

"Для выбора английского языка нажмите Отмена \n\n "+

"Choose russian language by pressing OK \n "+

"Choose russian language by pressing Cancel ";

if (confitm(str))

{

location.href = "rus.htm"

}

else

{

location.href = "eng.htm"

}

</SCRIPT>

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

Рис. 8.5. Выбор языка диалога с пользователем

Пользовательские функции

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

function Name ("список аргументов")

{

Последовательность операторов.

}

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

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

function truncate (a)

{

return a — а % 1;

}

Данная функция отсекает дробную часть числа. Вызывается она таким образом:

...

var a = 7.3;

 b = Trunc( a); 

alert(b);

...

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

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

В листинге 8.9 приведен пример "скрипта — убийцы", который закрывает текущее окно при нажатии кнопки.

Листинг 8.9. Пользовательская функция 

<HTML>

<HEAD>

</HEAD>

<BODY color= "#000000" >

<SCRIPT>

function kill()

{

window.close ();

}

</SCRIPT>

<center><Hl> Нажмите кнопку для закрытия окна </Н1>

<input type=button name = Ы value = "Нажмите" onClick=kill()>

</BODY>

</HTML>

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

<а href=javascript:userfuncl()Хитрая ссылка </а>

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

<SCRIPT>

function perehod_a ()

(

framel.location.href="doc_al.htm"

frame2.location.href="doc_a2.htm"

}

</SCRIPT>

<a href=javascript:perehod_a ()> Справка по изделию A </a>

Весьма часто пользовательские функции используются при работе с формами.

Формы и JavaScript

Формы являются неотъемлемой частью дизайна многих страниц. При всех своих несомненных достоинствах, они, как инструмент ввода, имеют также и ряд недостатков. Представим, что на странице имеется анкета, которую заполняет пользователь. Некоторые поля могут оказаться обязательными к заполнению, в другие поля свободного ввода должна быть введена информация из определенного, но достаточно широкого, чтобы использовать объекты select, диапазона. Как видно, остро стоит вопрос проверки корректности ввода. В HTML нет стандартных средств контроля за содержимым форм, но зато они есть в JavaScript.

Каждый объект document имеет свойство document.forms, которое является массивом объектов типа form. Доступ к свойствам той или иной формы можно получить либо из этого массива (document.forms[0] — первая форма документа), либо непосредственно по имени формы, которое задано в описании (document. forma_l — обращение К форме С именем forma_l).

Каждая форма HTML-документа также представляет собой объект. Основные свойства, методы и события этого объекта приведены в табл. 8.1.

Таблица 8.1. Свойства, методы и события объекта form

Элементы ввода в форме также являются объектами. Информация о них хранится в массиве elements [] объекта форм. В то же время, возможно получать доступ к свойствам полей непосредственно при помощи указания их имен (forma_l.edit_l — обращение к полюedit_l формы forma_l).

Рассмотрим также основные свойства объекта element, приведенные в табл. 8.2.

Таблица 8.2. Свойства, методы и события объекта element

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

Сначала рассмотрим скрипт, который реализует эффектный способ навигации при помощи элемента ввода select (листинг 8.10). В HTML-документе объявляем форму из одного элемента select. Событию onChange этого элемента присваиваем пользовательскую функцию, которая осуществляет переход на запрашиваемую пользователем страницу.

 Листинг 8.10. Навигация при помощи элемента select 

<HTML>

<МЕТА content="text/html; charset=windows-1251" http-equiv=Content-Type>

<BODY bgcolor= "#ffffff" >

<FORM. name="formal">

<НЗ>Выберите ссылку для перехода </НЗ>

<SELECT NAME="selectl" OnChange="perehod(})" size="l">

<option SELECTED>Главная</option>

<option>Личная информация/орtion>

<option>Kapтa caйтa</option>

<option>Поисковая система</option>

</SELECT>

</FORM>

<SCRIPT>

function perehod()

{

var linx= new Array(3);

linx[0] = "index.htm";

linx[l] = "personal.htm";

linx[2] = "map.htm";

linx[3] = "poisk.htm";

index = document.formal.selectl.selectedlndex;

location.href=linx[index]; } 

 </SCRIPT> 

</BODY>

 </HTML>

Результат отображения такого документа приведен на рис 8.6.

Теперь рассмотрим скрипт, который проверяет правильность ввода в поля формы. Пусть у нас есть некоторая анкета, в которую надо ввести фамилию, возраст, мастерство и e-mail пользователя. Поле ввода фамилии должно быть непустым. Возраст должен лежать в пределах от 10 до 50 лет. Корректность ввода e-mail будем определять по двум очевидным критериям: наличию в содержимом поля ввода знака @, а также наличию точки. Скрипт, организующий проверку правильности ввода в такую форму, приведен в листинге 8.11.

Рис. 8.6. Навигация при помощи формы 

 Листинг 8.11. Проверка правильности ввода 

<HTML>

<МЕТА content="text/html; charset=windows-1251"http-equiv=Content-Type> <BODY bgcolor= "tffffff" > 

<FORM name="fprma2" onSubmit=usercheck()>

 <H3> Анкета пользователя. Часть 1. </H3>

<Н4>Ф.И.О : <INPUT TYPE='TEXT' NAME='user' size=32 > <BR> Возраст : <INPUT TYPE='TEXT" NAME='age' size=8 > <BR> Мастерство : <SELECT NAME="skill" size="l"> 

<OPTION SELECTED>Ламер</ OPTION >

 < OPTION >Юзер</ OPTION >

 < OPTION >Хакер</ OPTION > 

< OPTION >Элитный хакер</ OPTION >

 </SELECT> <BR>

e-mail : <INPUT TYPE='TEXT' NAME='email1 size=32 > <BR> </H4>

< INPUT type=submit value="Дальше"> 

< INPUT type=reset value="Отправить"> 

</FORM>

 <SCRIPT>

function usercheck()

{ 

// em — e-mail пользователя.

em = document.fоrma2.email.value;

// 1-е условие —. непустое поле Ф.И.О

ul=(document.fоrma2.user.value != "");

// 2-е условие — возраст от 10 до 50 лет

u2=((document.forma2.age.value > 10)&(document.forma2.age.value < 50));

// 3-е условие — наличие в email @ и точки

u3=((em.indexOf ( "@") !=-!)'& (em.indexOf (".") !=-!));

if ((ul)s(u2)&(u3))

// Если все три условия выполняются, то отправим форму.

{

document.forma2.submit;

}

else

// Иначе выведем сообщение об ошибке

{

alert("Ошибка ! \n Проверьте правильность ввода !")

}

}

</SCRIPT>

</BODY>

</HTML>

Метод string. indexOf ("подстрока") объекта string выдает позицию подстроки в строке string. Если подстрока не входит в строку, то выдается значение — 1.

На этом мы завершаем наше знакомство с JavaScript.