Разработка Web-приложений: практическое руководство

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

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

Что же касается активных страниц Web, то с их помощью также можно создавать диалоговые приложения, однако обработка введенных данных выполняется не на сервере, а на рабочей станции посетителя, то есть локально. Активными мы будем называть документы HTML, которые содержат в себе аплеты Java, а также программы, составленные на таких языках, как JavaScript и VBScript.

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

Что касается аплетов и полноценных приложений Java, то им посвящена отдельная глава нашей книги. Размещая на страницах сервера Web аплеты Java, Вы можете выполнять на рабочей станции посетителя достаточно сложную локальную обработку данных. Реализация такой обработки с помощью программ CGI или приложений ISAPI была бы затруднительной или вовсе невозможной.

Заметим сразу, что язык JavaScript не имеет никакого отношения к языку Java, несмотря на схожее название.

Язык программирования Java был создан компанией Sun Microsystems и произошел от языка Oak. По своему синтаксису он сильно похож на С++, однако есть немаловажные отличия.

Первоначальное название языка JavaScript, разработанного фирмой Netscape Communication Corporation, было LiveScript. Затем, после того как язык Java получил всемирную известность, LiveScript переименовали в JavaScript. Возможно, это было сделано фирмой Netscape из коммерческих соображений: все, что имело в своем названии ключевое слово «Java», вызывало тогда живой интерес.

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

Особенности JavaScript

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

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

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

Языки сценариев существовали давно. Они применялись, например, для автоматизации различных задач. В качестве примера можно привести язык сценариев UNIX, язык пакетных заданий MS-DOS или имеющий большее отношение к технологиям Интернета язык Perl, предназначенный для создания программ CGI.

Еще одна важная особенность языка JavaScript — это его объектная ориентированность. И хотя объектно-ориентированные возможности JavaScript заметно беднее, чем в С++ или Java, они все же есть в этом языке. Программистам доступны многочисленные объекты, встроенные в браузер и загруженные в него документы HTML, такие как документы HTML, фреймы, формы, ссылки на другие документы и так далее. Допускается создание собственных классов, а также группирование объектов и структур данных для расширения базовых классов.

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

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

Заметим, что язык JavaScript не предназначен для создания сложных программ. Подобные задачи лучше решать с использованием других языков программирования, например, с помощью C++, Perl или Java. Однако с помощью JavaScript Вы можете быстро создавать активные страницы с достаточно сложным поведением. Этот язык прост в изучении, а программы, составленные с его использованием, легко поддаются отладке.

Когда мы рассказывали о стандартах на язык HTML, то обращали Ваше внимание на различия в реализации этого стандарта для браузеров Netscape Navigator и Microsoft Internet Explorer. А как обстоит дело с совместимостью в случае языка JavaScript?

К сожалению, не очень хорошо. Несмотря на то, что новые версии браузера Microsoft Internet Explorer «понимают» язык JavaScript, существуют различные особенности. Фактически в браузере Microsoft Internet Explorer реализован язык сценариев JScript, который хотя и совместим с JavaScript, но эта совместимость не является полной. Причина, вероятно, заключается в том, что Microsoft продвигает другой язык сценариев с названием VBScript, произошедший от языка Visual Basic.

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

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

Для непосвященных скажем, что упомянутая выше программа выводит на консоль компьютера текстовую строку «Hello, world!», после чего немедленно завершает свою работу.

Вариация первая: самая простая

На первом этапе мы составим программу JavaScript, которая вставит слова «Hello, world!» непосредственно в документ HTML (рис. 7-1).

Рис. 7-1. Внешний вид документа HTML с первой программой на JavaScript

Как мы уже говорили, программы или сценарии JavaScript встраиваются в документ HTML. Взгляните на листинг 7.1, в котором мы привели исходный текст документа с нашей первой программой, составленной на JavaScript.

Листинг 7.1. Вы найдете в файле chap6\hello\hello.htm на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test</H1>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</BODY>
</HTML>

Как и подобает любому документу HTML, он ограничен тегами <HTML>, </HTML> и состоит из двух разделов. Раздел заголовка выделяется тегами <HEAD> и </HEAD>, а раздел тела документа — тегами <BODY> и </BODY>.

В заголовке нашего документа нет ничего необычного. Атрибут BGCOLOR тега <BODY> устанавливает белый цвет фона документа, а теги <H1> и </H1> задают стилевое оформление первой строки документа «JavaScript Test», которая служит строкой заголовка первого уровня.

Что же касается собственно программы JavaScript, то в нашем первом примере она встроена в документ HTML при помощи тегов <SCRIPT> и </SCRIPT>, как это показано ниже:

С помощью тега <SCRIPT> Вы можете встроить в документ сценарий, составленный на языке JavaScript или VBScript. Язык указывается с помощью атрибута LANGUAGE. Заметим, что для сценария на JavaScript допустимо указывать язык LiveScript — предок JavaScript. Такая возможность предусмотрена для обратной совместимости.

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

Обращаем также Ваше внимание на строку, которой завершается комментарий:

// -->

Перед символами --> мы записали два символа /. Поясним, зачем это сделано.

Интерпретаторы языка JavaScript, встроенные в браузеры Microsoft Internet Explorer и Netscape Navigator, игнорируют символы -->, отмечающие начало комментария в документе HTML.

Что же касается символов -->, то здесь поведение основных конкурирующих браузеров различается. Браузер Microsoft Internet Explorer игнорирует строку, состоящую только из символов -->, а Netscape Navigator рассматривает ее как ошибочную.

Для того чтобы обеспечить работоспособность нашего сценария в различных браузерах, мы добавили к строке --> два символа /, которые применяются в JavaScript для выделения комментариев наряду с известной из языка С конструкцией /*...*/.

Наша первая программа весьма проста и содержит только одну строку:

document.write("Hello, world!");

Здесь для объекта с именем document вызывается метод write. В качестве параметра ему передается текстовая строка «Hello, world!». Строка закрывается символом точка с запятой, хотя этот символ может и отсутствовать.

Объект document — это документ HTML, загруженный в окно браузера. Он содержит в себе объекты, свойства и методы, предназначенные для работы с элементами этого документа HTML, а также для взаимодействия с другими объектами.

Подробнее об этом мы расскажем позже, а сейчас отметим только, что метод write нашей программы записывает в тело документа HTML приветственную строку «Hello, world!». При этом документ будет выглядеть так, как будто эта строка находится в нем на месте сценария:

<HTML>
<HEAD>
<TITLE>Hello, world!</TITLE>
</HEAD>
<BODY BGCOLOR=white>
<H1>JavaScript Test</H1>
Hello, world!
</BODY>
</HTML>

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

Вариация вторая: с секретным исходным текстом

Как нетрудно догадаться, исходный текст нашего сценария, расположенный в документе HTML, легко доступен для просмотра любому пользователю, загрузившему этот документ в браузер. Чтобы ознакомиться с ним, достаточно выбрать в меню View строку Source (для браузера Microsoft Internet Explorer) или Document Source (для браузера Netscape Navigator). Поэтому хотя технически нетрудно применить сценарий JavaScript для ввода, например, пароля доступа к той или иной странице вашего сервера, едва ли это будет целесообразно.

Есть ли средство защитить исходные тексты ваших сценариев от просмотра, одновременно обеспечив их выполнение?

Если Ваши посетители работают с браузером Microsoft Internet Explorer версии 4.0 или с браузером Netscape Navigator, то есть. Это средство — атрибут SRC тега <SCRIPT>, допускающий указание адреса URL файла сценария.

Наш следующий пример демонстрирует использование атрибута SRC.

В листинге 7.2 находится исходный текст документа HTML, содержащий ссылку на файл сценария hello.js.

Листинг 7.2. Вы найдете в файле chap6\SecretHello\SecretHello.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Secret Hello</TITLE>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test No. 2</H1>
    <SCRIPT LANGUAGE="JavaScript" SRC="hello.js">
    </SCRIPT>
</BODY>
</HTML>

Ссылка оформлена с применением тегов <SCRIPT> и </SCRIPT>, однако между этими тегами нет ни одной строчки исходного текста. Мы перенесли этот текст в файл hello.js (листинг 7.3).

Листинг 7.3. Вы найдете в файле chap6\SecretHello\hello.js на прилагаемом к книге компакт-диске

document.write("<HR>");
document.write("Hello from JavaScript!");
document.write("<HR>");

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

Существенно, чтобы файл, в котором находится исходный текст сценария JavaScript, имел тип js. В противном случае сценарий работать не будет.

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

В результате работы нашей второй программы в окне браузера появится строка «Hello from JavaScript!», выделенная сверху и снизу горизонтальными линиями (рис. 7-2).

Рис. 7-2. Результат работы сценария, записанного в отдельном файле

К сожалению, браузер Microsoft Internet Explorer версии 3.02 не распознает атрибут SRC в операторе <SCRIPT>. Однако версия 4.0 и более современные версии успешно работают с данным параметром. Дело в том, что параметр SRC включен в новую спецификацию языка разметки гипертекста HTML версии 4.0. При разработке браузеров новых версий компания Microsoft стремилась обеспечить совместимость с этой спецификацией.

И, конечно, раз уже речь зашла про HTML версии 4.0, нельзя не упомянуть про то, что при использовании тега <SCRIPT> вместо атрибута LANGUAGE рекомендовано указывать стандартный атрибут TYPE в следующем виде:

<SCRIPT TYPE="text/javascript">
// строки сценария JavaScript
. . .
</SCRIPT>

Этот способ работает в браузерах Microsoft Internet Explorer версии 3.02, 4.0 и Netscape Navigator версии 3.01.

Использовать ли Вам атрибут SRC при создании своих страниц?

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

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

Вариация третья: с переменной и функциями

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

Листинг 7.4. Вы найдете в файле chap6\HelloFn\HelloFn.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test</H1>
    <P>Message:
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</BODY>
</HTML>

Эта программа записывает в документ сообщение «Hello, world!», выделяя его жирным шрифтом (рис. 7-3).

Рис. 7-3. Сообщение выделено жирным шрифтом

Рассмотрим исходный текст нашего документа HTML и встроенного в него сценария JavaScript.

Прежде всего, обратите внимание на область заголовка документа, выделенную тегами <HEAD> и </HEAD>. В этой области расположено определение одной переменной и двух функций, оформленное с применением тегов <SCRIPT> и </SCRIPT>:

Кроме того, в теле документа HTML есть еще один раздел сценариев, выделенный аналогичным образом:

Переменная с именем szHelloMsg определяется при помощи оператора var, причем ей сразу же присваивается начальное значение — текстовая строка «Hello, world!».

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

Отсутствие строгой типизации упрощает создание сценариев, особенно для непрофессиональных программистов, однако может привести к ошибкам. Поэтому мы рекомендуем внимательно следить за тем, какие типы данных Вы применяете. Не исключено, что Вам поможет использование префиксов имен, по которым можно судить о типе переменной. Эти префиксы хорошо знакомы программистам, создававшим приложения для операционной системы Microsoft Windows на языке программирования С. Например, текстовые строки можно начинать с префикса sz, а численные значения — с префикса n.

Помимо переменной szHelloMsg, в области заголовка документа HTML мы определили с помощью ключевого слова function две функции с именами printString и printHello. Первая из этих функций выводит в документ HTML строку, передаваемую ей в качестве параметра, а вторая выводит сообщение “Hello, world!”, вызывая для этого первую функцию.

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

Размещение определений переменных и функций в разделе заголовка документа гарантирует, что они будут загружены до момента загрузки тела документа.

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

function printString(szString)
{
document.write(szString.bold());
}

Здесь для объекта document вызывается метод write. В качестве параметра мы передаем этому методу объект szString, вызвав для него метод bold.

Значит, переменная szString, определенная с помощью ключевого слова var, является объектом?

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

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

var szHelloMsg = "<B>Hello, world!</B>";

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

Вариация четвертая: создание страницы «на лету»

Следующий сценарий имеет одну интересную особенность: в содержащем его документе HTML нет тела, определяемого тегом <BODY> (листинг 7.5).

Листинг 7.5. Вы найдете в файле chap6\HelloGen\HelloGen.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
</HTML>

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

Когда такой документ загружается в окно браузера, программа JavaScript формирует недостающую часть заголовка (с помощью тегов <TITLE> и <TITLE>), а также тело документа.

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

Вариация пятая: с диалоговым окном

Язык JavaScript имеет встроенные средства для отображения простейших диалоговых окон, таких как окно сообщений (рис. 7-4).

Рис.7-4. Диалоговое окно, которое появляется при загрузке страницы в браузер

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

Листинг 7.6. Вы найдете в файле chap6\HelloBox\HelloBox.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
</HTML>

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

Помимо представленного в этом примере диалогового окна сценарии JavaScript могут выводить на экран и более сложные. В них посетитель может делать, например, выбор из двух альтернатив или даже вводить какую-либо информацию. Подробнее об этом мы расскажем позже.

Вариация шестая: обработка события

В языке JavaScript есть удобные средства обработки событий. В нашем следующем примере, когда пользователь пытается щелкнуть ссылку Select me! (рис. 7-5), разместив над ней курсор мыши, на экране появляется диалоговое окно Microsoft Internet Explorer с сообщением «Hello, world!».

Рис. 7-5. Диалоговое окно появляется, когда пользователь размещает курсор мыши над ссылкой

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

Листинг 7.7. Вы найдете в файле chap6\HelloOnSelect\HelloOnSelect.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello from JavaScript!</TITLE>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test</H1>
    <HR>
    <A HREF="" onMouseover="alert('Hello, world!');">Select me!</A>
</BODY>
</HTML>

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

onMouseover="alert('Hello, world!');"

Она указывает, что при возникновении события onMouseover должна выполняться заданная строка программы JavaScript:

alert('Hello, world!');

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

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

Вариация седьмая: с определением типа браузера

Последний пример сценария, который мы рассмотрим в этой главе, показывает, как программа JavaScript может легко определить тип и версию браузера. На рис. 7-6 показан результат просмотра документа HTML с этим сценарием при помощи браузера Microsoft Internet Explorer.

Рис. 7-6. Информация о браузере Microsoft Internet Explorer

То, что вы увидите, просмотрев этот же документ браузером Netscape Navigator, представлено на рис. 7-7.

Рис. 7-7. Информация о браузере Netscape Navigator

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

Листинг 7.8. Вы найдете в файле chap6\HelloInfo\HelloInfo.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
</HEAD>
<BODY BGCOLOR=white>
    <H1>Кое-что о Вашем браузере...</H1>
    <TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
    </TABLE>
</BODY>
</HTML>

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

Объект navigator — это сам браузер. Обращаясь к свойствам этого объекта, можно получить различную информацию о браузере.

Наиболее интересны для нас свойства navigator.appName и navigator.appVersion, так как они позволяют однозначно определить тип браузера и его версию. Обладая этой информацией, вы можете динамически адаптировать документ HTML к браузеру, установленному у посетителя.

Заметим, что в браузере Microsoft Internet Explorer реализован еще один метод определения версии браузера, который мы рассмотрим позже. К сожалению, этот метод несовместим с браузером Netscape Navigator.

Переменные в JavaScript

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

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

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

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

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

var szHelloMsg;

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

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

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

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

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

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

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

Список зарезервированных ключевых слов JavaScript приведен в табл. 7-1.

Таблица 7-1. Список зарезервированных ключевых слов 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

Ключевые слова, отмеченные в табл. 7-1 символом *, планируется использовать в будущем при развитии языка JavaScript. Мы не рекомендуем использовать их в качестве имен переменных. Нужно также следить, чтобы имена переменных не совпадали с именами встроенных объектов, методов и функций.

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

Вы можете присвоить значение переменной при помощи оператора присвоения =. Например, ниже мы объявляем переменную и затем записываем в нее текстовую строку:

var szHelloMsg;
szHelloMsg = “Hello, world!”;

В любом месте программы мы можем присвоить переменной szHelloMsg численное значение, например, так:

szHelloMsg = 4;

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

Вы можете присвоить переменной специальное значение null:

szHelloMsg = null;

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

Типы данных

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

Числа

Язык сценариев JavaScript допускает использование чисел в различных форматах. Это целые числа, числа в формате с плавающей десятичной точкой и числа в научной нотации. Целые числа могут быть представлены по основанию 8, 10 или 16. Примеры чисел приведены в табл. 7.2.

Таблица 7-2. Примеры чисел

Пример	Описание
25	Целое число по основанию 10
0137	Целое число по основанию 8
0xFF	Целое число по основанию 16
386.7	Число с плавающей десятичной точкой
25e5 или 25E5	Число в научной нотации, равно 2500000

В некоторых случаях арифметические функции могут возвращать так называемое «нечисло»”, которое называется в JavaScript как NaN (Not a Number). «Нечисло» — это специальное значение, которое не соответствует никакому числу. Оно возникает в тех случаях, когда результат выполнения операции над числами не может быть представлен в виде числа. С помощью функции isNaN вы можете проверить, является ли значение «нечислом».

Текстовые строки

Текстовые строки — это последовательность символов Unicode, заключенных в одинарные или двойные кавычки, например:

”Hello, world!”
””
”12345”
‘Это текстовая строка’

Строка ” ” — пустая. Заметим, что следующие два присвоения не эквивалентны:

szStr=””
szStr1=null

В первом случае в переменной szStr хранится текстовая строка (хотя бы и пустая), во втором — совсем ничего.

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

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

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

Если переменная была объявлена, но ей еще ни разу не присваивалось значение, она имеет неопределенный тип. Например, в следующей строке сценария объявлена переменная MyVariable, которая имеет неопределенный тип:

var MyVariable;

Если же этой переменной присвоить значение null, то тип переменной изменится — теперь это будет переменная, содержащая значение null:

MyVariable = null;

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

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

Поясним это на примере (листинг 7.9).

Листинг 7.9. Вы найдете в файле chap6\Conversion\Conversion.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Type conversion sample</TITLE>
</HEAD>
<BODY BGCOLOR=white>
    <H1>Type conversion sample</H1>
    <TABLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
    </TABLE>
</BODY>
</HTML>

Здесь мы объявили переменную szTextBuf и проинициализировали ее пустой строкой. Далее мы присвоили этой строке сумму числа 4 и двух текстовых строк:

szTextBuf = 4 + " - число четыре" + "<BR>";

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

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

В следующей строке мы преобразовываем текстовую строку «2» в численное значение с помощью функции parseInt, прибавляем к результату преобразования число 2, а затем выполняем конкатенацию с двумя текстовыми строками:

szBuf2 = (parseInt("2")+2)+" - число четыре"+ "<BR>";

В результате переменная szBuf2 будет содержать ту же самую строку, что и переменная szTextBuf, в чем нетрудно убедиться, взглянув на рис. 7-8.

Рис. 7-8. Результат работы сценария, представленного в листинге 1.9

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

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

Операторы языка сценариев JavaScript напоминают общеизвестные операторы языка C, поэтому мы ограничимся только кратким их описанием.

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

Унарные операторы применяются для изменения знака, выполнения операции дополнения, инкремента и декремента (табл. 7-3).

Таблица 7-3. Унарные операторы

Унарный оператор	Назначение
-	Изменение знака на противоположный
!	Дополнение. Используется для реверсирования значения логических переменных
++	Увеличение значения переменной. Может применяться как префикс переменной или как ее суффикс
--	Уменьшение значения переменной. Может применяться как префикс переменной или как ее суффикс

Вот примеры использования унарных операторов:

i=0;      // начальное значение переменной i равно 0
i++;      // значение i равно 1
--i;      // значение i снова равно 0
var j=3; // значение переменной j равно 3
i = -j;   // значение переменной i равно -3
var fYes = true; // значение переменной fYes равно true
testFlag(!fYes); // функции testFlag передается значение false

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

Бинарные операторы соединяют два операнда. В языке сценариев JavaScript предусмотрены бинарные операторы для вычитания, сложения, умножения, деления и вычисления остатка деления (табл. 7-4).

Таблица 7-4. Бинарные операторы

Бинарный оператор	Назначение
-	Вычитание
+	Сложение
*	Умножение
/	Деление
%	Вычисление остатка от деления

Эти операторы используются таким же образом, что и в языке программирования C, например:

i=0; // начальное значение переменной i равно 0
i = i + 1; // значение i равно 1
var j=9; // значение переменной j равно 9
i = j / 2; // значение переменной i равно 4
k = j % 2; // значение переменной i равно 1

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

В своих сценариях вы можете применять операторы, выполняющие над битами переменных такие логические операции, как И, ИЛИ, ИСКЛЮЧАЮЩЕЕ ИЛИ, НЕ (табл. 7-5).

Таблица 7-5. Операторы для работы с битами

Оператор	Логическая операция
&	И
\|	ИЛИ
^	ИСКЛЮЧАЮЩЕЕ ИЛИ
~	НЕ

Перечисленные выше операторы перед выполнением своих функций преобразуют значения переменных в 32-разрядные целые числа.

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

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

Таблица 7-6. Операторы сдвига

Оператор сдвига	Назначение
>>	Сдвиг в правую сторону
<<	Сдвиг в левую сторону
>>>	Сдвиг в правую сторону с заполнением освобождаемых разрядов нулями

Перед использованием операторов сдвига значение переменной преобразуется в 32-разрядное целое число.

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

var nValue;
nValue = 4 << 2;

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

Операторы отношения используются для сравнения значений переменных. Эти операторы возвращают логические значения true или false в зависимости от результата сравнения и применяются главным образом в условных операторах (будут описаны позже в этой главе).

В табл. 7-7 мы представили список операторов отношения языка сценариев JavaScript:

Таблица 7-7. Операторы отношения

Оператор	Условие, при котором оператор возвращает значение true
>	Левый операнд больше правого
>=	Левый операнд больше или равен правому
<	Левый операнд меньше правого
<=	Левый операнд меньше или равен правому
==	Левый операнд равен правому
!=	Левый операнд не равен правому

Примеры использования этих операторов вы найдете в разделе, посвященном условным операторам.

В условных операторах также часто применяются логические операторы (табл. 7-8).

Таблица 7-8. Логические операторы

Оператор	Описание
\|\|	Оператор ИЛИ. Возвращает значение true, когда один из операндов равен true
&&	Оператор И. Возвращает значение true, когда оба операнда равны true

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

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

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

Таблица 8-8. Использование оператора присваивания

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

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

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

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

var nCounter = 1;
nCounter = nCounter + 5;

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

var nCounter = 1;
nCounter += 5;

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

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

nCounter >>= 3;

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

nCounter = nCounter >> 3;

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

Любой язык программирования был бы бесполезен, если бы в нем не были предусмотрены те или иные средства ветвления при выполнении программы. В языке JavaScript предусмотрен условный оператор else-if, который позволяет выполнять разные программные строки в зависимости от условия.

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

if(условие)
строка 1
[else
строка 2]

Часть оператора, выделенная квадратными скобками, является необязательной. При выполнении этого оператора оценивается условие, заданное в круглых скобках после ключевого слова if. Если в результате оценки условия получилось логическое значение true, выполняется строка 1. Если же получилось значение false, то выполняется строка 2 (в том случае, когда она присутствует).

Оператор if-else может быть вложенным. Учтите, что если в строке 1 или строке 2 необходимо расположить несколько операторов, их следует выделить фигурными скобками:

if(nYourAge < 18)
{
bAccessDenied = true;
szNextPage = “bye18.html”;
}
else if(nYourAge > 99)
{
bAccessDenied = true;
szNextPage = “bye99.html”;
}
else
{
bAccessDenied = false;
szNextPage = “welcome.html”;
}

Здесь вначале оценивается условие (nYourAge < 18). Если содержимое переменной nYourAge меньше 18, переменной bAccessDenied присваивается значение true, а переменной szNextPage — текстовая строка «bye18.html».

Затем содержимое nYourAge сравнивается с числом 99. Если переменная nYourAge имеет значение, большее чем 99, в переменную bAccessDenied записывается значение true, а переменную szNextPage — текстовая строка «bye99.html».

И, наконец, если ни одно из двух условий не было выполнено, то есть значение переменной nYourAge находится в интервале от 18 до 99, в переменную bAccessDenied записывается значение false, а переменную szNextPage — текстовая строка «welcome.html».

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

выражение ? строка 1 : строка 2

При вычислении оператора ?: вначале оценивается логическое выражение, расположенное в левой части. Если оно равно true, выполняется строка 1, а если false — строка 2.

Ниже мы привели пример использования условного оператора ?: для присвоения значения переменной bAccessDenied в зависимости от содержимого переменной nYourAge:

bAccessDenied = (nYourAge < 18 || nYourAge > 99) ? true : false;

Если значение переменной nYourAge находится в интервале от 18 до 99, переменной bAccessDenied присваивается значение true, а если оно не попадает в этот интервал — false. Традиционное решение этой задачи с помощью оператора else-if заняло бы больше места:

if(nYourAge < 18 || nYourAge > 99)
bAccessDenied = true;
else
bAccessDenied = false;

В приведенных выше примерах мы указывали составное условие:

(nYourAge < 18 || nYourAge > 99)

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

((nYourAge < 18) || (nYourAge > 99))

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

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

Оператор for

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

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

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

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

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

Оператор for-in

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

for(переменная in объект)
{
. . .
строки тела цикла
. . .
}

Оператор while

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

while(условие)
{
. . .
строки тела цикла
. . .
}

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

Оператор 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, цикл будет завершен.

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

Среди прочих операторов языка сценариев JavaScript мы рассмотрим оператор доступа к полю, индексирование массива, скобки и запятую (табл. 8-9).

Таблица 8-9. Прочие операторы

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

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

Ниже, например, мы вызвали метод write, определенный в объекте document:

document.write("Hello, world!");

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

Оператор запятая предназначен для разделения выражений, которые должны оцениваться последовательно. Этот прием называется многократным вычислением. Например, в фрагменте исходного текста, показанном ниже, на каждой итерации цикла выполняется увеличение содержимого переменных i и nCycleCount:

var i;
var nCycleCount = 0;
for(i = 0; i < 25; i++, nCycleCount++)
{
. . .
}

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

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

Первыми вычисляются операторы, расположенные в начале таблицы старшинства.

Таблица 8-10. Старшинство операторов JavaScript

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

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

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

Обычно функции определяются в разделе заголовка документа HTML, отмеченного тегами <HEAD> и </HEAD>. Как мы уже говорили, функция должна быть определена перед вызовом. Размещение всех определений функций в разделе заголовка документа HTML гарантирует доступность этих функций при обработке документа.

Общий вид определения функции представлен ниже:

function имя([параметр 1] [,параметр 2] [...,параметр N])
{
. . .
строки тела функции
. . .
[return значение]
}

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

С помощью ключевого слова return функция может вернуть значение.

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

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

Рис. 7-9. Сценарий отображает в документе HTML десять одинаковых строк

Исходный текст первого сценария представлен в листинге 1.10.

Листинг 7.10. Вы найдете в файле chap6\Operators\for.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
   <H1>JavaScript Test</H1>
    <P>Message:<BR>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT> </BODY>
</HTML>

Здесь сразу после загрузки документа вызывается функция printHello. В теле этой функции, в свою очередь, вызывается функция printNString, которой передаются два параметра:

printNString(szHelloMsg, 10);

Через первый параметр этой функции мы передаем текстовую строку szHelloMsg, а через второй — количество повторов этой строки при выводе.

Вывод строки выполняется функцией printNString в цикле:

for(i = 0; i < n; i++)
{
document.write(szString.bold() + "<BR>");
}

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

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

Листинг 7.12. Вы найдете в файле chap6\Operators\while.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test</H1>
    <P>Message:<BR>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT> </BODY>
</HTML>

Здесь i также используется как переменная цикла:

i = 0;
while(i < n)
{
document.write(szString.bold() + "<BR>");
i++;
}

Как работает этот цикл?

После вывода строки методом write значение переменной цикла увеличивается на единицу. Затем перед началом следующей итерации проверяется, достигла ли переменная цикла значения n. Если достигла, цикл завершает свою работу.

Совместное применение операторов while и break демонстрируется в сценарии, показанном в листинге 1.12.

Листинг 7.12. Вы найдете в файле chap6\Operators\break.html на прилагаемом к книге компакт-диске

<HTML>
<HEAD>
    <TITLE>Hello, world!</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
    <H1>JavaScript Test</H1>
    <P>Message:<BR>
    <SCRIPT LANGUAGE="JavaScript">
    
    </SCRIPT> </BODY>
</HTML>

Так же как и в предыдущем случае, i используется как переменная цикла, однако в операторе while на месте условия завершения цикла стоит значение true:

i = 0;
while(true)
{
document.write(szString.bold() + "<BR>");
i++;

if(i > n)
break;
}

Для того чтобы прервать цикл, мы применили оператор break. Этот оператор вызывается в том случае, если значение переменной цикла i превысило значение n.