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

тридцать четвертый том

© , , 1998

Сценарии JavaScript в активных страницах Web

Аннотация

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

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

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

Предисловие

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

Для тех, кто еще не знаком с Internet, предназначен наш 23 том “Библиотеки системного программиста”, который называется “Глобальные сети компьютеров. Практическое введение в Internet, E-Mail, FTP, WWW и HTML, программирование для Windows sockets”. Здесь вы найдете всю информацию, необходимую для того чтобы подключиться к этой сети и приступить к работе.

Тем из вас, кто интересуется созданием собственных серверов в сети Internet, мы рекомендуем прочитать 29 том “Библиотеки системного программиста” с названием “Сервер Web своими руками”. В этом томе мы рассказали о языке разметки гипертекста HTML, о программах CGI и приложениях ISAPI, а также, конечно, о том, как установить и настроить свой сервер Web.

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

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

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

Что касается аплетов и полноценных приложений Java, то им посвящены тома 30 и 32 “Библиотеки системного программиста”, которые называются “Создание приложений Java. Часть 1” и “Создание приложений Java. Часть 2”, соответственно. Размещая на страницах сервера Web аплеты Java, вы можете выполнять на рабочей станции достаточно сложную локальную обработку данных. Реализация такой обработки с помощью программ CGI или приложений ISAPI была бы затруднительной или вовсе невозможной.

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

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

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

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

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

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

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

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

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

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

Шестая глава затрагивает вопросы взаимодействия сценария JavaScript с аплетами Java, встроенными в документ HTML. Такое взаимодействие предусматривает вызов из сценария JavaScript методов, определенных в аплете, а также обращение к полям классов аплета.

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

Что вам потребуется для работы с книгой?

Прежде всего, нужен компьютер, оснащенный 8-16 Мбайт оперативной памяти с операционной системой Microsoft Windows 95 или Microsoft Windows NT. Вам также потребуются браузер Microsoft Internet Explorer версии 4.0 и отладчик Microsoft Script Debugger. Последние две программы вы можете бесплатно переписать к себе с сервера Web корпорации Microsoft по адресу http://www. /ie. Для проверки совместимости созданных вами программ неплохо также иметь браузер Netscape Navigator 3.0 или 4.0, демонстрационную версию которого можно бесплатно получить с сервера http://.

Для редактирования программ JavaScript вы можете применять любые средства создания документов HTML, хотя вполне достаточно редактора, входящего в комплект отладчика Microsoft Script Debugger или даже приложения Notepad.

Кроме всего прочего, чтобы составлять программы на JavaScript, вы должны быть знакомы с языком HTML. Для изучения этого языка мы рекомендуем вам прочитать 29 том нашей “Библиотеки системного программиста”, содержащей описание HTML в необходимом объеме.

Для отладки сценариев JavaScript, описанных в седьмой главе и взаимодействующих с расширениями сервера Web, вам потребуется сервер Microsoft Internet Information Server. Вы можете использовать также сервер Web, входящий в комплект операционной системы Microsoft Windows NT Workstation версии 4.0 или даже Microsoft Personal Web Server, разработанный для Microsoft Windows 95. Сервер Microsoft Personal Web Server доступен для бесплатной загрузки из Internet.

Исходные тексты всех программ вы можете найти на компакт-диске, который продается вместе с книгой. Эти тексты, так же как и исходные тексты программ из всех предыдущих томов “Библиотеки системного программиста”, есть также и на нашем авторском компакт-диске. Подробная информация об авторском компакт-диске есть в сети Internet на сервере авторов этой книги по адресу http://www. *****/~frolov или http://www. dials. *****/frolov.

Мы выражаем благодарность генеральному директору АО “ДиалогНаука” Антимонову Сергею Григорьевичу и его заместителю Лященко Юрию Павловичу за возможность размещения информации о наших книгах на сервере Web по адресу http://www. dials. *****/frolov, а также за возможность доступа к сети Internet через сервер АО “ДиалогНаука”.

Мы также благодарим корректора и сотрудников издательского отдела АО “Диалог-МИФИ” , ,

Авторский компакт-диск

В сентябре 1997 года в продаже появился авторский компакт-диск (как спецвыпуск журнала “Аурамедиа”), на котором вы можете найти наши первые книги серий “Библиотека системного программиста” и “Персональный компьютер. Шаг за шагом” в исходных текстах, дискеты ко всем книгам серии “Библиотека системного программиста”, статьи, написанные нами для периодических изданий, библиотеку программ FreeWare и ShareWare, ссылки на интересные ресурсы Internet, вернисаж художника Алексея Абрамкина и другую информацию.

Компакт-диск можно приобрести непосредственно в издательстве “Аурамедиа” и “Диалог-МИФИ”, а также по подписке.

Как связаться с авторами

Полную информацию о всех наших книгах серий “Библиотека системного программиста” и “Персональный компьютер. Шаг за шагом”, а также дискеты к книгам, статьи и другую информацию вы можете найти в сети Internet на серверах Web по следующим адресам:

http://www. *****/~frolov

http://www. dials. *****/frolov

Вы можете передать нам свои замечания и предложения по содержанию этой и других наших книг через электронную почту по адресам:

*****@***apc. org

frolov. *****@***net

Если электронная почта вам недоступна, присылайте ваши отзывы в АО “Диалог-МИФИ” по адресу:

Москва, , корп. 2,

Приносим свои извинения за то что не можем ответить на каждое письмо. Мы также не занимаемся продажей и рассылкой книг, дискет, компакт-дисков, рекламы, отдельных фрагментов наших книг и исходных текстов к книгам. По этим вопросам обращайтесь непосредственно в издательство “Диалог-МИФИ”. Авторский комопакт-диск можно приобрести также в издательстве “Аурамедиа”.

1 Введение в JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

На первом этапе мы составим программу JavaScript, которая вставит слова “Hello, world!” непосредственно в документ HTML (рис. 1.1).

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

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

Листинг 1.1. Файл chapter1/hello/hello. html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

</HEAD>

<BODY BGCOLOR=white>

<H1>JavaScript Test</H1>

<SCRIPT LANGUAGE="JavaScript">

<!--

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

-->

</SCRIPT>

</BODY>

</HTML>

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

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

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

<SCRIPT LANGUAGE="JavaScript">

<!--

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

// -->

</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.

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

Листинг 1.2. Файл chapter1/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 (листинг 1.3).

Листинг 1.3. Файл chapter1/SecretHello/hello. js

document. write("<HR>");

document. write("Hello from JavaScript!");

document. write("<HR>");

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

<SCRIPT LANGUAGE="JavaScript" SRC="http://www. *****/scripts/hello. js">

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

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

В результате работы нашей второй программы в окне браузера Netscape Navigator появится строка "Hello from JavaScript!", выделенная сверху и снизу горизонтальными линиями (рис. 1.2).

Рис. 1.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 при создании своих страниц?

Если вы создаете сервер в сети Internet, то необходимо учитывать тот факт, что пользователи применяют различные браузеры. Наибольшей популярностью по-прежнему пользуется браузер фирмы Netscape, однако доля владельцев бесплатного браузера Microsoft Internet Explorer стремительно растет. Кроме того, есть еще браузеры, работающие на платформе UNIX. На ваш сервер могут зайти даже такие пользователи, которые просматривает страницы серверов Web в текстовом режиме при помощи программы Lynx.

Если вам нужно обеспечить максимальную посещаемость своего сервера, его необходимо сделать так, чтобы с ним можно было работать при помощи любого браузера. Не следует думать, что если вы напишете на главной странице, что ее нужно просматривать только браузером Netscape Navigator, то все владельцы Microsoft Internet Explorer сразу бросятся загружать файл этого браузера из сети. Скорее всего они просто уйдут с вашего сервера на чей-нибудь другой, чтобы больше никогда не вернуться назад.

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

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

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

Листинг 1.4. Файл chapter1/HelloFn/HelloFn. html

<HTML>

<HEAD>

<TITLE>Hello, world!</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document. write(szString. bold());

}

function printHello()

{

printString(szHelloMsg);

}

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>JavaScript Test</H1>

<P>Message:

<SCRIPT LANGUAGE="JavaScript">

<!--

printHello();

// -->

</SCRIPT>

</BODY>

</HTML>

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

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

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

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

<SCRIPT LANGUAGE="JavaScript">

<!--

var szHelloMsg = "Hello, world!";

function printString(szString)

{

document. write(szString. bold());

}

function printHello()

{

printString(szHelloMsg);

}

// -->

</SCRIPT>

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

<SCRIPT LANGUAGE="JavaScript">

<!--

printHello();

// -->

</SCRIPT>

Переменная с именем 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> (листинг 1.5).

Листинг 1.5. Файл chapter1/HelloGen/HelloGen. html

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

document. write("<TITLE>Hello, world!</TITLE>");

document. write("<BODY BGCOLOR=white>");

document. write("<H1>JavaScript Test</H1>");

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

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

// -->

</SCRIPT>

</HEAD>

</HTML>

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

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

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

Вариация пятая: с диалоговой панелью

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

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

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

Листинг 1.6. Файл chapter1/HelloBox/HelloBox. html

<HTML>

<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!--

document. write("<TITLE>Hello, world!</TITLE>");

document. write("<BODY BGCOLOR=white>");

document. write("<H1>JavaScript Test</H1>");

alert("Hello, world!");

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

// -->

</SCRIPT>

</HEAD>

</HTML>

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

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

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

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

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

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

Листинг 1.7. Файл chapter1/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 может легко определить тип и версию браузера. На рис. 1.6 показан результат просмотра документа HTML с этим сценарием при помощи браузера Microsoft Internet Explorer.