Вы находитесь на странице: 1из 269
С. Б. Дубовиченко Т. А. Шмыгалева Web - программирование Основы

С. Б. Дубовиченко Т. А. Шмыгалева

Web-

программирование

Основы языка JavaScript Том 1 ААллммааттыы
Основы языка
JavaScript
Том 1
ААллммааттыы

22001111

Web-программирование. Основы языка JavaScript.

КАЗАХСКИЙ НАЦИОНАЛЬНЫЙ УНИВЕРСИТЕТ им. аль-Фараби АСТРОФИЗИЧЕСКИЙ ИНСТИТУТ им. В.Г. Фесенкова НЦКИТ НКА РК

С. Б. Дубовиченко Т. А. Шмыгалева

Web-

программирование

Основы языка

JavaScript

Том 1

Учебник для ВУЗов

Алматы

«Қазақ университеті»

2011

1

Web-программирование. Основы языка JavaScript.

УДК 378(073.8): 681.14

ББК 32.81я7

Д 79

Печатается по решению Ученого Совета механико-математического факультета Казахского национального университета им. аль-Фараби и НТС департамента ДТОО "Астрофизический институт им. В.Г. Фесенкова" АО "НЦКИТ" НКА РК

Рецензенты:

Академик МАИН РК, доктор физико-математических наук РК и РФ, профессор Л.М. Чечин, доктор физико-математических наук, профессор С.Я. Серовайский, доктор технических наук, профессор Р.К. Ускенбаева, доктор технических наук, профессор Д.З. Джурунтаев

Д 79

Дубовиченко С.Б., Шмыгалева Т.А. Web-программирование. Основы языка JavaScript. Том 1: учебник для

ВУЗов. - Алматы: Қазақ университеті, 2011 г. – 265 с.

ISBN 9965-29-598-0

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

Д

060700000

00(05)

03

ISBN 9965-29-598-0

УДК 378(073.8): 681.14

ББК 32.81я7

© Дубовиченко С.Б., Шмыгалева Т.А. 2011 © КазНУ им. аль-Фараби, 2011

2

Web-программирование. Основы языка JavaScript.

СОДЕРЖАНИЕ

ПРЕДИСЛОВИЕ

6

ВВЕДЕНИЕ

8

Java

9

JavaScript

9

JScript

10

VBScript

11

ОБЗОР ВОЗМОЖНОСТЕЙ JAVASCRIPT

12

Размещение скриптов

12

События

15

Функции

17

ПЕРЕМЕННЫЕ И КОНСТАНТЫ

23

Типы переменных

23

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

25

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

27

Литералы или константы

29

Массивы

31

ВЫРАЖЕНИЯ И ОПЕРАТОРЫ

34

Простые выражения

34

Типы операторов

35

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

35

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

36

Условные выражения

36

Арифметические операторы

37

Логические операторы

40

Строковые операторы

41

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

42

ОСНОВНЫЕ ОПЕРАТОРЫ

44

Вывод текста

45

Оператор

комментария

47

Оператор

var

47

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

49

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

52

Оператор

break

55

Оператор

continue

56

Оператор

function

57

Оператор

return

58

3

Web-программирование. Основы языка JavaScript.

Оператор

new

59

Ключевое слово this

60

Оператор

with

60

Зарезервированные слова

61

СОБЫТИЯ

63

Обзор событий

64

Событие

Click

65

Событие

Blur

67

Событие

Focus

67

Событие

Select

68

Событие

Change

68

Событие

Submit

69

Событие

MouseOver

70

Событие

MouseOut

71

Событие

Load

72

Событие

UnLoad

72

Событие

Abort

73

Событие

Reset

73

ФУНКЦИИ

76

Определение функций

76

Функции с переменным числом аргументов

79

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

80

ОБЪЕКТНАЯ МОДЕЛЬ

90

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

90

Объект

Window

93

Объект

Document

113

Объект

History

124

Объект

Location

127

Объект

Frame

130

ВСТРОЕННЫЕ ОБЪЕКТЫ

143

Объект

String

143

Объект

Math

152

Объект

Date

154

Объект

Array

162

СОЗДАНИЕ ОБЪЕКТОВ

171

Создание объектов

171

Объекты

и

свойства

174

Объекты

и

Методы

176

4

Web-программирование. Основы языка JavaScript.

ДИНАМИЧЕСКИЕ ДОКУМЕНТЫ

179

Простые динамические документы

179

Динамические документы в другом окне

180

Пример динамического документа

184

ФОРМЫ

189

Проверка

информации

189

Проверка

определенных символов

192

Передача информации

194

Выделение элемента формы

198

Кнопки

199

Применение форм

201

Создание динамических форм

203

РИСУНКИ

210

Изображения на Web-странице

210

Загрузка новых изображений

211

Упреждающая загрузка изображения

212

Изменение изображений

216

Слайдшоу

222

СЛОИ

232

Создание слоев

232

Слои в JavaScript

237

Перемещение слоев

243

Вырезка из слоя

249

Вложенные слои

255

ЛИТЕРАТУРА

2634

5

Web-программирование. Основы языка JavaScript.

ПРЕДИСЛОВИЕ

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

динамического создания документа с помощью сценария;

оперативной проверки достоверности заполняемых пользова-

телем полей форм HTML-документа до передачи их на сервер;

создания динамических HTML-страниц совместно

с каскадными таблицами стилей (CSS) и объектной моделью докумен- та;

взаимодействия с пользователем при решении «локальных»

задач, решаемых приложением JavaScript, встроенным в HTML-

страницу.

6

Web-программирование. Основы языка JavaScript.

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

http://old.ict.nsc.ru/win/docs/JS/

http://www.intuit.ru/department/internet/js/1/1.html

http://hostinfo.ru/articles/web/rubric48/rubric55/rubric56/1513/

7

Web-программирование. Основы языка JavaScript.

ВВЕДЕНИЕ

Язык JavaScript - это объектно-ориентированный язык Web- программирования, предназначенный для написания сценариев (скриптов), работающих как на стороне клиента (браузера), так и на стороне сервера. Его можно использовать для построения меню, про- верки правильности заполнения форм, смены изображений и многого другого, что можно сделать на Web-странице. Так как JavaScript явля- ется в настоящее время единственным языком сценариев, разные вер- сии которого поддерживают все основные Web - браузеры (Internet Explorer, Firefox, Netscape, Safari, Opera, Camino и т.д.), то он широко используется для написания сценариев. JavaScript программа обычно выполняется Web-браузером клиен- та (пользователя), и в этом случае она называется сценарием на сторо- не клиента. Web-обозреватель, работающий на компьютере, обеспечи- вает среду, в которой JavaScript имеет доступ к объектам, которые представляют собой окна, меню, диалоги, текстовые области, фреймы, куки и ввод - вывод на Web-страницу. Набор объектов, предоставляе- мых языку JavaScript Web-обозревателем, известен под названием Document Object Model (DOM). Кроме того, обозреватель позволяет связать сценарии на языке JavaScript к таким событиям, как загрузка и выгрузка страниц и графических образов, нажатие клавиш и движение мыши, выбор текста, пересылка форм и т.д. Код JavaScript программы для формирования HTML-документов можно выполнять и на Web-сервере, воплощая тем самым сценарий на стороне сервера. Web-сервер обеспечивает иную среду, в которой объ- ектами являются запросы к базам данных, клиенты, файлы и механиз- мы блокировки и совместного использования данных. Совместное ис- пользование сценариев и на стороне клиента, и на стороне сервера по- зволяет распределить вычисления между ними и обеспечить желаемый пользовательский интерфейс для Web-приложения. Создание Web-документов, включающих программы на JavaScript, требует наличия какого-то текстового редактора, который используется для подготовки файлов и браузера - программы просмот- ра HTML-документов и интерпретации кода скриптов. Для запуска скриптов, написанных на языке JavaScript, требуется браузер, способ- ный с ним работать, например, Netscape Navigator (NN - начиная с вер- сии 2.0), Mozilla Firefox (MF - начиная с первой версии) или Microsoft Internet Explorer (IE - начиная с версии 3.0). С тех пор, как эти браузе- ры стали широко распространены, множество людей во всем мире по- лучили возможность работать со скриптами, написанными на языке

8

Web-программирование. Основы языка JavaScript.

JavaScript.

Java

JavaScript и Java - это совершенно разные языки программирова- ния. Java - объектно-ориентированный язык, который работает при помощи своего компилятора и некоторых вспомогательных, служеб- ных файлов. Разрабатываемые с помощью Java программы могут ра- ботать и как законченные, самостоятельные приложения, и как встро- енные в Web-страницу Java - аплеты. И хотя они встраиваются в HTML-страницу, подключаются к ней, но хранятся на компьютере как отдельные, независимые файлы. Полную противоположность представляют программы на JavaScript, которые размещаются внутри HTML-страницы, не могут существовать как отдельные, самостоятельные программы и функцио- нируют, будучи запущенными, в браузерах типа Netscape Navigator, Firefox или Internet Explorer.

JavaScript

Язык JavaScript, несомненно, является превосходным инструмен- том для преобразования Web-страниц из безжизненных картинок в динамичные, полностью интерактивные страницы с быстрой реакцией на действия пользователя. Изначально созданный как несложный на- бор команд для подготовки сценариев работы клиента (браузера) язык JavaScript превратился в развитую инфраструктуру для решения задач, связанных с деятельностью как клиента, так и сервера. Причем средст- ва для обслуживания клиентской части вычислений, к которым вы об- ращаетесь на Web-странице, предоставляются самим браузером. В тоже время, когда речь идет о фоновой обработке сценариев, в ход идут средства JavaScript, реализованные на сервере. Они выполне- ны как надстройка к серверам Netscape и объединены в продукте, на- зываемом LiveWire. Так, на серверах фирмы Netscape средства LiveWire и JavaScript обеспечивают обработку сценариев работы шлю- за и полное обслуживание серверных задач по операциям над файла- ми, управлению базами данных и т.д. По первоначальному замыслу считалось, что JavaScript - это от- крытый стандарт, не требующий ориентации на разработки отдельной компании или на конкретный продукт, но жизнь внесла свои коррек- тивы. В конечном счете оказалось, что при использовании JavaScript приходится ориентироваться, в первую очередь, на продукты и техно-

9

Web-программирование. Основы языка JavaScript.

логии, разработанные фирмой Netscape. В настоящее время выпущена версия JavaScript 1.8, и с выходом каждой из них в JavaScript появляются новые функциональные воз- можности, что, конечно, является положительным фактором. Однако такие бесконечные усовершенствования могут сильно помешать раз- работчикам Web-приложений. Действительно, какая польза от JavaScript сценария, если миллионы клиентов - браузеров не смогут его прочитать, т.е. правильно интерпретировать и вывести результат на экран пользователя. В частности, как будет продемонстрировано далее, даже IE версии 8.0 понимает только JavaScript 1.3. Такое разнообразие вариантов языка JavaScript приводит к тому, что ваша прекрасно оформленная Web-страница, содержащая обраще- ния к сценариям на некоторой версии JavaScript, вполне может не вос- производиться на "другом" браузере, что существенно затрудняем его использование.

JScript

Кроме двух упомянутых выше языков Web-программирования, компания Microsoft предложила свою собственную версию языка JavaScript, назвав ее JScript. По аналогии с языком JavaScript от фирмы Netscape, который ориентирован на браузер Netscape Navigator, JScript создавался для работы с Internet Explorer. И хотя обе эти реализации похожи друг на друга, в каждой из них имеются свои уникальные, функциональные возможности. Язык JScript является полномасштабной системой разработок Web-приложений. Подобно тому, как JavaScript тесно взаимосвязан с технологической моделью Netscape, язык JScript тесно интегрирован в модель Microsoft. В результате была достигнута всесторонняя реализа- ция возможностей JavaScript с рядом специфических дополнений, ори- ентированных на браузер Internet Explorer. Инфраструктуры объектов в JScript и JavaScript аналогичны, а способ применения JScript для Web-страниц такой же, как у JavaScript. Однако за внешним сходством этих объектных инфраструктур скрываются существенные различия. В частности, раздельное сущест- вование объектных моделей Internet Explorer и JScript позволяет кор- порации Microsoft сделать ряд существенных усовершенствований. Одно из них - открыть доступ к объектной модели Internet Explorer для других, предусмотренных в браузере языков сценариев, например, VBScript. Обновляя объектную модель Internet Explorer, Microsoft сра- зу же наращивает функциональные возможности как языка JScript, так

10

Web-программирование. Основы языка JavaScript.

и VBScript, о котором мы также скажем несколько слов.

VBScript

Когда появился браузер Internet Explorer версии 3.0, в нем, поми- мо поддержки языка JavaScript, появилась и поддержка Visual Basic Scripting Edition, или просто VBScript. Но поскольку Netscape Navigator и Mozilla не поддерживают VBScript, этот язык не получил большого распространения. VBScript – это язык клиентских и серверных скриптов, разрабо- танный на основе Visual Basic. VBScript используется как основа тех- нологии ASP, которая также разработана Microsoft и по механизму своей работы очень похожая на PHP. VBScript так же, как JavaScript, является интерпретируемым языком, а за выполнение программы от- вечает Windows Script Host, который поставляется в составе операци- онной системы, начиная с версии Windows 98. К сожалению, VBScript печально "известен" благодаря огромно- му количеству написанных на нем макровирусов и почтовых "червей", и его нельзя рекомендовать в качестве языка для клиентских скриптов, поскольку воспринимается он только одним браузером - IE.

11

Web-программирование. Основы языка JavaScript.

ОБЗОР ВОЗМОЖНОСТЕЙ JAVASCRIPT

В этой вводной главе приведем краткий обзор основных возмож- ностей и способов использования языка Web-программирования Ja- vaScript.

Размещение скриптов

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

Как JavaScript, выражения и функции, заключенные в специ-

альном HTML-контейнере <SCRIPT>

встраивания.

Как обработчик результата события, использующий некото-

рый тег языка HTML и являющийся параметром (атрибутом) этого

тега.

Как отдельный файл, обычно с расширением js, который под- ключается к Web-странице атрибутом SRC тега <SCRIPT>.

</SCRIPT> - это и есть метод

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

12

Web-программирование. Основы языка JavaScript.

HTML-страницы. В некоторых случаях целесообразно писать одну часть программы в одном месте, например, в заголовке документа, элементе <HEAD>, а другую часть – в другом месте страницы. На- пример, это можно сделать в конце HTML-страницы, после тела до- кумента, т.е. элемента <BODY>. Сценарий или скрипт, внедренный в Web-страничку и исполь- зующий тег <SCRIPT>, имеет следующий вид

<SCRIPT>

Выражения или операторы JavaScript

</SCRIPT>

Необязательный

атрибут

language

определяет

язык

создания

сценария следующим образом

<SCRIPT language = "JavaScript">

Выражения или операторы JavaScript

</SCRIPT>

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

<SCRIPT language = "JavaScript">

</SCRIPT>

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

<SCRIPT language = "JavaScript">

<!--

Текст программы на JavaScript

13

Web-программирование. Основы языка JavaScript.

-->

</SCRIPT>

Язык JavaScript понимает и игнорирует первую строку контей- нера <SCRIPT>, которая начинается HTML-комментарием, но он не в состоянии правильно интерпретировать последнюю строчку контей- нера в написанном выше виде и отличить ее от JavaScript оператора, начинающегося с двойного минуса. Поэтому последнюю строку кон- тейнера необходимо записать в виде JavaScript комментария, кото- рый задается двойной чертой "//"

<SCRIPT language = "JavaScript">

<!--

Текст программы на JavaScript

//-->

</SCRIPT>

Как уже говорилось, программы на JavaScript (программы сце- нариев или скрипты) можно хранить в отдельных, не зависимых от Web-страницы файлах. В таком случае для подключения скрипта к Web-странице нужно в теге <SCRIPT> использовать параметр SRC

<SCRIPT language = "JavaScript" src = "Name.js"> </SCRIPT>

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

<SCRIPT language = "JavaScript">

<!--

Текст программы на JavaScript

14

Web-программирование. Основы языка JavaScript.

//-->

</SCRIPT>

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

События

События на Web-странице и программы обработчики этих собы- тий являются очень важной частью программирования на языках сценариев, подобных JavaScript. Обычно события инициируются те- ми или иными действиями пользователя или процессами, которые протекают на Web-странице. Мы приведем в этом параграфе некото- рые общие понятия и методы работы с событиями, а более подробное описание событий будет дано далее в отдельной главе. Приведем теперь некоторые простейшие примеры событий, ко- торые существуют в JavaScript и других, подобных ему скрипт - язы- ках. Например, если пользователь щелкает мышкой по некоторой кнопке, которая находится на экране браузера - происходит событие Click. Если курсор мышки пересекает какую - либо ссылку гипертек- ста или рисунок - происходит событие MouseOver. Если выполняется загрузка Web-страницы в браузер - происходит событие Load, кото- рое уже непосредственно не зависит от действий пользователя. Мы всегда можем заставить нашу JavaScript программу реагиро- вать на некоторые из таких событий, и это можно сделать с помощью специальных программ обработки событий. Например, в результате щелчка по кнопке может создаваться выпадающее окно - это значит, что создание окна должно быть реакцией на событие щелка Click. Программа, обработчик события, которую мы должны использовать в данном случае, называется onClick, и она сообщает компьютеру, что нужно делать, если произойдет данное событие. Приведенный ниже код скрипта представляет собой простой пример программы обработки события onClick - щелчка мышкой по кнопке на экране

<HTML>

<BODY>

<FORM>

<INPUT

type

=

"alert('Yes')">

"button"

value

15

=

"Click

"

onClick

=

Web-программирование. Основы языка JavaScript.

</FORM>

</BODY>

</HTML>

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

onClick = "alert('Yes')"

<INPUT> onClick = "alert('Yes')" Рис. 1. Атрибут кнопки onClick Новый

Рис. 1. Атрибут кнопки onClick

Новый атрибут onClick (Рис. 1) со значением "alert('Yes')" опре- деляет, что должно происходить при нажатии кнопки и если имеет место событие Click, компьютер должен выполнить вызов встроен- ной функции alert(), которая выводит на экран выпадающее окно с заданным сообщением. Это и есть один из примеров кода на языке JavaScript, предназначенного для обработки события, причем в этом случае мы даже не пользуемся тегом <SCRIPT>. Следующая особенность - это встроенная, стандартная функция alert(), которая позволяет создавать на экране браузера выпадающие окна с заданной информацией. При ее вызове в скобках нужно задать

16

Web-программирование. Основы языка JavaScript.

некую строку текста, в нашем случае 'Yes' и это тот текст, который появится в выпадающем окне. Таким образом, когда пользователь щелкает на кнопке, наш скрипт выводит на экран выпадающее окно, содержащее текст 'Yes'. Третья особенность данного примера заключатся в том, что в команде "alert('Yes')" мы использовали комбинацию двойных кавы- чек (") и одинарных апострофов ('). Например, если написать

onClick = "alert("Yes")"

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

onClick = 'alert("Yes")'

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

Функции

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

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

document.write("<CENTER><FONT size = +4>Добро пожало-

17

Web-программирование. Основы языка JavaScript.

вать на мою страничку!<BR>"); document.write("Это язык JavaScript!<BR>");

document.write("Добро пожаловать на мою страницу!<BR>"); document.write("Это язык JavaScript!<BR>");

document.write("Добро пожаловать на мою страницу!<BR>"); document.write("Это язык JavaScript!<BR>");

//-->

</SCRIPT>

</HEAD>

</HTML>

Такой скрипт выведет на экран следующий текст

Добро пожаловать на мою страницу! Это JavaScript! Добро пожаловать на мою страницу! Это JavaScript! Добро пожаловать на мою страницу! Это JavaScript!

Здесь мы использовали новый элемент языка

document.write("Некоторый текст");

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

<CENTER><FONT size = +4>

или

<BR>

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

18

Web-программирование. Основы языка JavaScript.

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

<HTML>

<HEAD> <SCRIPT language = "JavaScript">

<!--

function Funct()

{

document.write("<CENTER><FONT size = +4>Добро пожало- вать на мою страничку!<BR>"); document.write("Это язык JavaScript!<BR>");

}

Funct();

Funct();

Funct();

//-->

</SCRIPT>

</HEAD>

</HTML>

В этом скрипте мы определили некоторую функцию Funct(). Все команды скрипта, которые находятся внутри фигурных скобок {} или, как говорят, в теле функции, принадлежат этой функции Funct(). Они взаимосвязаны между собой и могут быть выполнены при каждом ее вызове. Для вызова функции сразу после того, как дано ее определение, мы написали строку Funct() три раза подряд. Это значит, что содержи- мое функции, т.е. команды или операторы, указанные в фигурных

19

Web-программирование. Основы языка JavaScript.

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

информацию, показанную на Рис. 2. Рис. 2. Пример функции Здесь

Рис. 2. Пример функции

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

20

Web-программирование. Основы языка JavaScript.

Запрос или вызов функции, который заключается в написании ее име- ни в нужном месте скрипта, фактически выполняет указанные в опре- делении функции действия. Обратите внимание, что во всех приведенных примерах каждая строч- ка кода скрипта заканчивается точкой с запятой. Это и есть общее пра- вило записи текста скрипта - каждый следующий оператор или выра- жение (которые мы рассмотрим далее), записанные в скрипте, должны отделяться друг от друга именно этим символом - ";". И здесь не важно - находятся они в одной строке кода или в разных строчках, переход на которые выполняется при нажатии клавиши Enter. Рассмотрим теперь пример использования функции совместно с процедурами обработки событий

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

function calc()

{

var x = 12; var y = 5;

var res = x + y; alert(res);

}

//-->

</SCRIPT>

</HEAD>

<BODY> <FORM> <INPUT type = "button" value = "Calculate" onClick = "calc()"> </FORM> </BODY> </HTML>

При нажатии на кнопку формы осуществляется вызов функции calc(), которая выполняет некие вычисления, пользуясь переменными x, y и res. Переменную мы можем определить с помощью ключевого слова var и использовать для хранения различных величин - чисел,

21

Web-программирование. Основы языка JavaScript.

строк текста и т.д. (более подробно переменные будут описаны в сле- дующей главе). Код скрипта

var res = x + y;

сообщает браузеру о том, что необходимо создать переменную res и поместить туда результат выполнения арифметической операции x + y, т.е. 5 + 12. После этого в переменной res будет находиться число 17 и команда alert(res) выполнит то же самое, что и запись alert(17). Ины- ми словами, на экране мы получим выпадающее окно, в котором будет показано число 17. Возможно, столь простые примеры не раскрывают всех возмож- ностей функций, однако, использование функций с передачей пере- менных при ее вызове, которое мы рассмотрим в следующих главах, придает скриптам настоящую гибкость и универсальность.

Вопросы

1. Где в теле HTML-документа размещаются JavaScript скрипты?

2. С помощью каких HTML-тегов размещаются JavaScript скрип-

ты?

3. Что такое "Событие"?

4. С помощью каких параметров устанавливается "Событие" на

Web-странице?

5. Что такое "Функция"?

6. Какой оператор задает пользовательскую "Функцию"?

7. Какие существуют версии языка JavaScript?

Задания

1. Написать скрипт, использующий встроенную функцию alert().

2. Написать скрипт, в котором встроенная функция alert() исполь-

зуется внутри пользовательской функции function().

3. Написать HTML-документ, использующий событие onClick.

4. Написать скрипт, который в пользовательской функции исполь-

зует write().

5.

Написать скрипт простейшего калькулятора и сложить числа

10+20.

22

Web-программирование. Основы языка JavaScript.

ПЕРЕМЕННЫЕ И КОНСТАНТЫ

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

Типы переменных

Любые переменные языка JavaScript относятся к следующим ти-

пам

Числовой - переменные содержат обычные числа вида 1, 20,

35.4 или 3.1415. Точка используется для разделения целой и дробной

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

Логический или булевый - переменные принимают значения true (истина) или false (ложь).

Строки или символы - переменные принимают значения вы-

ражений вида "Hello JavaScript!", заключенные в двойные или одинар- ные (апострофы) кавычки.

Пустое значение null - специальное ключевое слово, обозна-

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

Каждой переменной присваивается имя или идентификатор, на который можно ссылаться в программах скриптов, т.е. использовать их в JavaScript выражениях (о выражениях JavaScript мы расскажем в сле- дующих главах). Для имен переменных существуют некоторые прави- ла, которым они должны соответствовать. В частности, идентификатор или имя переменной JavaScript мо- жет начаться только с текстового символа, начиная от "A" до "Z" (верхнего регистра) или от "a" до "z" (нижнего регистра), или символа подчеркивания ("_") и только внутри или в конце имени могут присут- ствовать цифры от 0 до 9. Следует особо отметить, что язык JavaScript учитывает или разли-

23

Web-программирование. Основы языка JavaScript.

чает регистр символов. Например

NumBer;

number;

NUMBER;

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

которых заключены в кавычки Рис. 3. Пример идентификаторов

Рис. 3. Пример идентификаторов переменных

<SCRIPT language = "JavaScript">

<!--

document.write("<CENTER><FONT size = +2>Добро пожало- вать на мою страничку!<BR>"); document.write("Это язык JavaScript!<BR><BR>"); NumBer = 1; number = 2;

24

Web-программирование. Основы языка JavaScript.

NUMBER = 3;

document.write("NumBer = " + NumBer + "<BR>"); document.write("number = " + number + "<BR>"); document.write("NUMBER = " + NUMBER + "<BR>");

//-->

</SCRIPT>

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

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

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

a = 20;

т.е. задать ей числовое значение, а позже – в другом месте скрипта присвоить ей строковое значение

a = "Это строковая переменная";

Если в выражении присутствуют переменные числового и сим- вольного типов, то тип результата этого выражения приводится к сим- вольному виду. Рассмотрим в качестве примера следующее выраже- ние, которое проверялось в браузерах Internet Explorer 5.5 и Mozilla Firefox 3.5

<SCRIPT language = "JavaScript">

<!--

String = "3";

25

Web-программирование. Основы языка JavaScript.

Int = 12; Con = String + Int; alert(Con); // В результате получим "312" - символьную переменную

Add = Int + String; alert(Add); // И здесь получим "123", т.е. символьную переменную

//-->

</SCRIPT>

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

eval() - переводит символьную строку в число, если это воз- можно. Например,

<SCRIPT language = "JavaScript">

<!--

String = '12';

Int = 12; String = eval(String); Con = String + Int; alert(Con);

/* В результате получим число 24, т.е. строковая перемен- ная String была переведена в числовую переменную */

//-->

</SCRIPT>

В результате работы такого скрипта получим число 24, т.е. стро- ковая переменная String была переведена в числовую переменную. Далее, функции

parseInt() - преобразовывает строку в целое число, если это, в принципе, возможно;

parseFloat() - преобразовывает строку в число с плавающей точкой, если это возможно.

26

Web-программирование. Основы языка JavaScript.

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

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

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

Глобальная - такую переменную можно использовать в любом месте скрипт-приложения.

Локальная - такую переменную можно использовать только внутри текущей функции.

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

var tot = 0;

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

<SCRIPT language = "JavaScript">

<!--

a = 11;

function fun()

{

alert(a); var a = 22; alert(a);

}

fun();

alert(a);

//-->

</SCRIPT>

вначале

выдаст

на

экран

значение

27

переменной

"а",

равное

Web-программирование. Основы языка JavaScript.

undefined (первый alert). Затем уже в конце функции покажет значение 22 (второй alert). Наконец, в самом скрипте будет показано значение 11. Первый alert выдает неопределенное значение переменной "а" по- тому, что внутри функции присутствует переопределение этой пере- менной, т.е. вводится локальная переменная с тем же именем. Для того чтобы объявить глобальную переменную, видимую во всем скрипте, нужно просто присвоить этой переменной определенное значение, например,

tot = 0;

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

<SCRIPT language = "JavaScript">

<!--

a = 11;

function fun()

{alert(a);

a = 22;

alert(a);}

fun();

alert(a);

//-->

</SCRIPT>

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

28

Web-программирование. Основы языка JavaScript.

Литералы или константы

Литералы - это способ, которым мы представляем значения пере- менных в языке JavaScript. Присвоенные значения, которые вы бук- вально (literally) представляете в вашем источнике данных - это не пе- ременные, а константы разного типа. Присваивая переменной литерал (константу) определенного типа, мы задаем и тип самой переменной. Например, литералами могут быть выражения

20

3.1415

"String"

целые и вещественные, т.е. реальные числа и строковые констан-

ты.

Целые числа

Целыми называют константы (числа) или, иначе говоря, литералы

вида

1

164

102390

которые не содержат десятичной точки. Они могут быть заданы в десятичном (по основанию 10), шестнадцатеричном (по основанию 16) или восьмеричном (по основанию 8) представлении:

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

сти цифр от 0 до 9, но без ведущего, предшествующего нуля. Напри- мер, обычное число 12345, которое мы всегда можем записать в виде

012345, в языке JavaScript должно быть записано только, как 12345.

2. Шестнадцатеричные числа включают цифры 0 - 9 и буквы "a -

f" или "A - F" и в JavaScript записываются с комбинацией символов 0x или 0X перед самим числом.

3. Восьмеричные числа включают только цифры 0 - 7 и в языке

JavaScript записываются с ведущего нуля.

Например, десятичное число 23 представляется в шестнадцате- ричном виде как 0x17, а в восьмеричном как 027.

29

Web-программирование. Основы языка JavaScript.

Литералы с плавающей точкой

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

3.1415

31415е-4

.31415Е1

которое является вещественным литералом.

Логические литералы

Логические литералы имеют только два значения - истинна (true) или ложь (false). В некоторых реализациях или версиях языка JavaScript ноль, символизирующий значение false и 1, которая соответ- ствует значению true, не могут быть использованы в качестве логиче- ских значений.

Строки

Строковые литералы располагаются в двойных (") или одинарных (') кавычках и должны быть выделены кавычками только одного типа. Нужно обязательно использовать или две одинарные кавычки

'abcd'

или две двойные

"abcd"

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

"Hello"

30

Web-программирование. Основы языка JavaScript.

'Hello'

"123"

среди которых могут быть и числа.

Специальные символы

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

\b - Обозначает возврат на один символ. \f - Обозначает перевод страницы. \n - Обозначает новую линию. \r - Обозначает возврат каретки. \t - Обозначает символ табуляции.

Например, если написать

"First line \n Second line"

то на экране браузера мы получим

First line

Second line

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

document.write("\"Сегодня мы начинаем изучать JavaScript \" - сказал преподаватель на первом занятии")

выведет на экран браузера строку в следующем виде

"Сегодня мы начинаем изучать JavaScript " - сказал препо- даватель на первом занятии

Массивы

Рассмотрим теперь новое понятие языка, а именно массивы, кото- рые являются упорядоченным множеством значений переменной. На

31

Web-программирование. Основы языка JavaScript.

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

Например, имеется массив, с именем "a", который содержит име- на студентов и каждому из них присвоен индекс, соответствующий его номеру. Тогда величине a[1] будет соответствовать студент номер один, a[2] - это студент номер два и т.д. Новый массив можно создавать, используя оператор new (о нем мы также поговорим в следующих главах) с именем массива, и опре- делить число элементов, которые он должен иметь. Например, запись вида

a = new Array(20);

создает массив с именем "a" и 21 элементом (индексация массива начинается с нуля), причем все его элементы при создании будут рав- ны нулю. Элементы массива можно заполнять, просто присваивая им определенные значения. Например, выражения

a[0] = "Иван Иванов"; a[1] = "Петр Петров"; a[2] = "Семен Семенов";

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

Вопросы

1. Назвать типы переменных.

2. Что такое null?

3. Как складываются численные переменные?

4. Сложение логических переменных.

5. Как выполняется преобразование типов переменных?

6. Назвать области действия переменных.

7. Как в языке JavaScript определяются массивы переменных?

8. Типы массивов.

32

Web-программирование. Основы языка JavaScript.

9. Что такое литералы?

10. Типы литералов.

Задания

1. Написать скрипт, показывающий различие переменных.

2. Написать скрипт, демонстрирующий преобразование типов пе-

ременных.

3. Написать скрипт, использующий встроенную функцию eval().

4. Написать скрипт, демонстрирующий область действия пере-

менной.

5. Написать скрипт, демонстрирующий литералы разного типа.

6. Написать скрипт для создания трех массивов.

7. Написать скрипт для выполнения арифметических действий с

массивами.

33

Web-программирование. Основы языка JavaScript.

ВЫРАЖЕНИЯ И ОПЕРАТОРЫ

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

Простые выражения

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

x = 3;

является выражением первого типа, которое приписывает пере- менной x значение 3. Такие выражения используют оператор присвое- ния, который представляется одинарным знаком равенства " = ". В лю- бом выражении первого типа имеется левый операнд, в данном случае это переменная х, и правый операнд, в нашем примере - это число 3. С другой стороны, выражение

1 + 2

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

Арифметические - обычное вычисление любого числа или,

как правило, числового значения некоторой переменной языка JavaScript.

Строковые - работают со строкой символов, например,

"Hello" или "1234", для которых существует только одна простая опе- рация - сложение строк. Строки нельзя умножить или поделить друг на друга.

Логические - вычисляют значения переменных, равные true (истина) или false (ложь).

34

Web-программирование. Основы языка JavaScript.

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

timer = null;

Типы операторов

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

y = x + z;

или умножения

y = x * z;

Унарный оператор требует только одного операнда и ставится пе- ред или после него

operator operand

или

operand operator

Например, унарным является оператор

у = -x;

- смены знака переменной.

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

Основной оператор присвоения - это знак равенства " = ", который

35

Web-программирование. Основы языка JavaScript.

присваивает значение правого операнда левому операнду, т.е. запись вида

x = y;

приписывает, присваивает значение величины "y" переменной "x".

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

Операторы сравнения сравнивают значения своих операндов и возвращают (выдают результат) логическое значение, основанное на том, является ли результатом сравнения значение true (истина) или false (ложь). Операнды такого выражения могут иметь численные (це- лые или вещественные) или строковые значения. Приведем список операторов сравнения

Логическое "равно" (двойной знак равенства) == - возвращает

true, если операнды равны.

Логическое "не равно" != - возвращает true, если операнды не

равны.

"Больше чем" > - возвращает true, если левый операнд боль-

ше, чем правый. Например, x > y возвращает true, если x больше, чем

y.

"Больше или равно чем" >= - возвращает true, если левый опе- ранд больше или равен правому операнду.

"Меньше чем" < - возвращает true, если левый операнд мень-

ше, чем правый операнд. Например, x < y возвращает true, если x меньше, чем y.

"Меньше или равно чем" <= - возвращает true, если левый операнд меньше или равен правому операнду.

Условные выражения

Условное выражение может иметь одно из двух значений, осно- ванных на условии. Синтаксис условного выражения представляется в виде

а = (Условие) ? val1 : val2

Если условие истинно, то левая часть выражения имеет значение val1, иначе принимает значение val2. Приведем простейший пример

36

Web-программирование. Основы языка JavaScript.

status = (age >= 18) ? "adult" : "minor";

Это утверждение или выражение присваивает значение "adult" пе- ременной status, если age равно или больше 18, в противном случае- переменной status присваивается значение "minor".

Арифметические операторы

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

Простые арифметические операторы

Стандартные арифметические операторы выполняют все четыре арифметических действия

1. Сложение "+".

2. Вычитание "-".

3. Умножение "*".

4. Деление "/".

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

Сложение или конкатенация: x += y означает x = x + y.

Вычитание: x -= y означает x = x - y.

Умножение: x *= y означает x = x * y.

Деление: x /= y означает x = x / y.

Вычисление остатка от деления: x %= y означает x = x % y (описание этого действия смотрите далее).

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

x = 5;

37

Web-программирование. Основы языка JavaScript.

x=5;

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

x

= y + 2;

и

x=y+2;

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

Модуль

Оператор модуля, обозначаемый "%", используется следующим образом

var1 % var2

Оператор модуля возвращает остаток от деления первого операн- да на второй. Например, запись вида

х = 13 % 5;

возвращается число 3, которое присваивается переменной х.

Инкремент

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

var++

- постинкремент и

++var

38

Web-программирование. Основы языка JavaScript.

- преинкремент.

Этот оператор увеличивает свой операнд и возвращает его значе- ние следующим образом

Если используется постинкремент с оператором после опе-

ранда, например, x++, то оператор возвращает значение перед его уве- личением.

Если используется преинкремент с оператором перед операн-

дом, например, ++x, то он возвращает значение после его увеличения.

Например, если x = 3, то выражение вида

y = x++

присваивает переменной y число 3 и увеличивает величину x до 4. В другом примере

y = ++x

величина х сначала увеличивает до 4 и только потом присваивает- ся переменной y, значение которой также становится равно четырем.

Декремент

Оператор декремента также является унарным и используется следующим образом

var--

- постдекремент

--var

- предекремент.

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

Если используется постдекремент, например, x-- , то он воз-

вращает значение перед его уменьшением.

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

39

Web-программирование. Основы языка JavaScript.

Например, если x = 3, то выражение вида

y = x--

присваивает переменной y число 3 и только потом уменьшает ве- личину x до 2. В другом случае

y = --x

величина х вначале уменьшается до 2 и только потом присваива- ется переменной y, значение которой также становится равно 2.

Унарное вычитание

Унарный оператор вычитания должен предшествовать его опе- ранду, например,

x = -x

Такой оператор просто меняет знак величины x на обратный. На- пример, если вначале величина переменной x была равна 3, то после использования этого оператора его значение будет равно -3.

Логические операторы

Логические операторы принимают и возвращают логические или "Булевы" значения логических выражений. Значений логических вы- ражений всего два - это true (истина) и false (ложь). Рассмотрим логи- ческие операторы более подробно, и первый из них это логическое "И"

&&

которое может использоваться следующим образом

expr1 && expr2

Логическое "И" возвращает true (истина), если оба логических выражения expr1 и expr2 имеют значения true, иначе - возвращается false (ложь). Следующий логический оператор - это логическое "ИЛИ", кото- рое записывается в виде

40

Web-программирование. Основы языка JavaScript.

||

Например

expr1 || expr2

Логический оператор "ИЛИ" возвращает true, если хотя бы одно из логических выражений expr1 или expr2 имеет значение true, в про- тивном случае – возвращается false. Третий логический оператор – это логическое отрицание "НЕ"

!

которое может использоваться в следующем виде

!expr

Логический оператор "НЕ" является унарным оператором, кото- рый отрицает выражение операнда expr, т.е. если expr имеет значение true, то возвращается false, а если expr имеет значение false, то возвра- щается true.

Строковые операторы

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

"my " + "string"

возвращает строку

"my string"

Оператор += также может использоваться для сложения символь- ных строк. Например, если некоторая переменная string имеет началь- ное значение "alpha", то после выполнения выражения

string += " bet"

эта переменная принимает значение "alpha bet".

41

Web-программирование. Основы языка JavaScript.

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

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

кого

Присвоение =

Выбор по условию ? :

Логическое ИЛИ - ||

Логическое И - &&

Равенство или Неравенство == или ! =

Сравнения <, <= , >= , >

Сложение и Вычитание + и -

Умножите и Деление *, /, %

Отрицание, Унарный минус, Инкремент, Декремент !, - , ++, --

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

Вопросы

1. Назвать типы арифметических операторов.

2. Что такое операторы сравнения?

3. Как используются условные выражения?

4. Инкремент и декремент?

5. Как используются логические операторы?

6. Что такое строковые операторы и их применение?

7. Назвать старшинство операторов.

Задания

1. Написать скрипт, демонстрирующий действие арифметических

операторов.

2. Написать скрипт, демонстрирующий операторы сравнения.

3. Написать скрипт, использующий условные выражения.

42

Web-программирование. Основы языка JavaScript.

4.

Написать скрипт, демонстрирующий работу декремента.

5.

Написать скрипт, демонстрирующий инкремент.

6.

Написать скрипт для демонстрации действия логических опера-

торов.

7.

Написать скрипт для выполнения строковых операторов.

8.

Написать скрипт для демонстрации старшинства операторов.

43

Web-программирование. Основы языка JavaScript.

ОСНОВНЫЕ ОПЕРАТОРЫ

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

1. Блоки или группы операторов, такие, как определения функ-

ций или блоки внутри условных операторов и операторов цикла,

должны быть обязательно заключены в фигурные скобки.

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

т.е. после каждой законченной записи, которая содержит любые выра- жения или операторы, должен ставиться знак ";".

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

Оператор

Описание

alert

Вывод на экран выпадающего окна с информацией.

comment

Комментарии.

 

var

Определение переменной.

while

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

 

for

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

for

in

Другая запись оператора цикла.

break

Прерывание цикла.

continue

Продолжение цикла.

if

else

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

function

Определение функции.

return

Возврат значений переменных из функции.

new

Определение нового объекта.

44

Web-программирование. Основы языка JavaScript.

this

Ключевое слово, обозначающее "это".

with

Совместное использование с объектом.

Вывод текста

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

<HTML> <HEAD> <SCRIPT language = "JavaScript">

<!--

alert("Это демонстрация вывода текста на экран браузера");

//-->

</SCRIPT>

</HEAD>

</HTML>

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

1. Действие, которое выполнила программа, а именно вывод мо- дального окна, произошло в результате исполнения функции alert(). 2. Практически все действия, выполняемые с помощью языка JavaScript, происходят в результате исполнения каких- либо функций, которые могут быть встроены в JavaScript или написаны самим поль- зователем. 3. Выполнение функции произошло в результате того, что мы написали в программе имя этой функции "alert", за которым следует открывающая скобка, какой-то текст, заключенный в данном случае в кавычки, и закрывающая скобка. Такое написание имени функции в скрипте называется вызовом этой функции.

45

Web-программирование. Основы языка JavaScript.

4. Присутствие круглых скобок после имени - это неотъемлемое

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

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

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

a = "Это демонстрация вывода текста на экран браузера"; alert(a);

//-->

</SCRIPT>

</HEAD>

</HTML>

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

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

b = 2;

c = 5;

a = b + c;

alert(a);

//-->

</SCRIPT>

</HEAD>

</HTML>

46

Web-программирование. Основы языка JavaScript.

выведет на экран окно с цифрой 7.

Оператор комментария

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

Однострочные комментарии начинаются с символа //.

Многострочные комментарии начинаются с символа /* и за- канчиваются символом */.

Например,

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

/* Начало многострочного комментария. А этим символом он заканчивается. */ Код скрипта

// Однострочный комментарий

//-->

</SCRIPT>

</HEAD>

</HTML>

Оба эти способа в приведенной выше таблице обозначались опе- ратором comment.

Оператор var

Оператор var объявляет переменную с некоторым именем "name" и может сразу присваивать ей определенное значение. Именем пере- менной "name" может быть любой идентификатор, а значение может быть любым JavaScript выражением. Областью действия такой пере-

47

Web-программирование. Основы языка JavaScript.

менной является текущая функция - локальная переменная для функ- ции или, если переменные объявлены вне функции, весь текущий до- кумент - глобальная переменная. Использование var вне функции необязательно, вы всегда можете описать переменную, просто присваивая ей некоторое значение. Одна- ко var нужно использовать внутри функции для задания локальной переменной, т.к. может существовать глобальная переменная с тем же именем. Приведем теперь общий вид объявления некоторой переменной

var VariableName [ = value] [

Например,

1. var a, b, c

var num = 0;

2. b = 2, c = 3, a=b+c;

per = 0;

,

VariableName [ = value] ]

В первом случае объявлены локальные (local) переменные, если они находятся внутри функции, во втором - глобальные (global), о ко- торых мы уже говорили. Приведем еще один пример, когда переменная glob может быть использована в любой функции или скрипте текущего документа, а переменная loc видна только внутри некоторой функции prob

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

glob = "123";

function prob()

{

var loc = "["+glob+"]"; alert("Loc Int = "+loc);

alert("Glob Int = "+glob); glob = "456";

}

48

Web-программирование. Основы языка JavaScript.

alert("Glob Ext = "+glob); prob(); alert("Glob Ext = "+glob);

//-->

</SCRIPT>

</HEAD>

</HTML>

Вначале на экран будет выведено выпадающее окно с выдачей

Glob Ext = 123

затем мы увидим

Loc Int = [123]

далее получим

Glob Int = 123

и в заключение имеем

Glob Ext = 456

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

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

Перейдем теперь к рассмотрению операторов цикла, которые по- зволяют выполнять некоторый набор команд, повторяющихся до тех пор, пока выполняется некоторое логическое условие. Язык JavaScript поддерживает две формы операторов цикла - это for и while. Кроме того, имеются дополнительные операторы break и continue, которые всегда используются вмести с операторами цикла. Напомним, что блоки операторов (несколько операторов), состав- ляющих тело цикла, должны быть заключены в фигурные скобки. Если тело цикла составляет только один оператор, заключать его в скобки не обязательно.

49

Web-программирование. Основы языка JavaScript.

Оператор while

Оператор while - это оператор цикла, который повторяет вычисле- ния выражений, заключенных в теле цикла, пока значение условия Condition является истинным (true). Как только значение условия Condition становится ложным (false), управление переходит к первому оператору после фигурной скобки, закрывающей тело цикла

while (Condition)

{

Тело цикла

}

Приведем пример цикла while, который повторяется, пока вели- чина переменной "n", которую можно назвать счетчиком цикла, мень- ше трех

n

x

= 0;

= 0;

while( n < 3 )

{

n++;

x = х + n;

alert("N = "+n+" "+"X = "+x);

}

Каждая итерация или проход тела цикла увеличивает переменную n на единицу и прибавляет ее к текущему значению переменной x. В результате переменные x и n принимают следующие значения

После первой итерации - n = 1 , x = 1 После второго итерации - n = 2 , x = 3 После третьего итерации - n = 3 , x = 6

После завершения третьей итерации условие n < 3 становится ложным и цикл прекращается. Из этого примера видно, что тело цикла whilе выполняется хотя бы один раз, и если в нем имеются перемен- ные, которые используются в дальнейшем, то их значение будет изме- нено. Выражения в следующем цикле while выполняются бесконечно,

50

Web-программирование. Основы языка JavaScript.

потому что условие никогда не становится ложным

while (true)

{

alert("Hello, world");

}

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

Оператор for

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

for (InitialExpression; Condition; UpdateExpression)

{

Тело цикла

}

Здесь

Выражение InitialExpression (начальное выражение) использу-

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

Выражение Condition (условие) вычисляется при каждом про-

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

Выражение UpdateExpression используется для изменения

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

Приведем теперь пример, в котором оператор for создает цикл,

51

Web-программирование. Основы языка JavaScript.

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

n = 0;

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

{

n += i;

alert(i + " " + n);

}

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

for (var i = 0; ; i += 2)

{

Тело цикла

}

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

for (var i = 0; i < 10;)

{

Тело цикла

}

Такие выражения также нужно использовать с осторожностью, поскольку они приводят к "зависанию" программы скрипта.

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

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

52

Web-программирование. Основы языка JavaScript.

Оператор if

Если некоторое логическое условие Condition, заданное в опера- торе if истинно, то JavaScript выполняет выражения или блок операто- ров (Statement1), заключенных в фигурные скобки. Если условие лож- но, то выражения в фигурных скобках пропускаются и выполняются другие выражения или операторы (Statement2), следующие за фигур- ными скобками при условии, что они заданы. Обычная форма записи условного оператора if выглядит следую- щим образом

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

if

(Condition)

{

Statements1

}

Statements2

//-->

</SCRIPT>

</HEAD>

</HTML>

Условие (Condition) может быть любым допустимым выражением языка JavaScript, которое проверяется на истину или ложь, включая дополнительные, в том числе условные операторы. Приведем пример, который демонстрирует способы использова- ния оператора if

<HTML>

<HEAD>

<SCRIPT language = "JavaScript">

<!--

a = 1;

b = 3;

53

Web-программирование. Основы языка JavaScript.

if (a == 1)

{

alert("Число а равно 1");

b = 2;

}

alert("Число b равно " + b);

//-->

</SCRIPT>

</HEAD>

</HTML>

Если а = 1, то будет выполняться блок выражений, стоящий в фи- гурных скобках, и на экране вначале увидим

Число а равно 1

а затем

Число b равно 2

В противном случае, а именно так и задано в скрипте, на экран будет выведено

Число b равно 3

Оператор if

else

- это условный оператор, ко-

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

Следующая форма оператора if

else

if (Condition)

{

Выражения 1

}

54

Web-программирование. Основы языка JavaScript.

else

{

Выражения 2

}

В следующем примере выдается сообщение, было ли число сим- волов в строковой переменной равно трем

<HEAD> <SCRIPT language = "JavaScript">

<!--

Str = "werf"; fo = Str.length;

if (fo == 3)

{

alert("Правильный формат!")

}

else

{

alert("Задайте три символа. " + " Переменная " + Str + " не

верна!")

}

//-->

</SCRIPT>

</HEAD>

Здесь величина Str.length определяет длину символьной строки, которая в данном случае равна 4. Это свойство строк будет подробно рассмотрено в следующих главах.

Оператор break

Этот оператор прерывает выполнение цикла for или while, переда- вая управление первому оператору, следующему после тела цикла. Рассмотрим пример, который проверяет наличие в строке опреде- ленного символа и прекращает поиск по окончанию перебора всех символов строки или после того, как находит искомый символ, кото- рый задается в переменной "с"

55

Web-программирование. Основы языка JavaScript.

<HEAD>

<SCRIPT language = "JavaScript">

<!--

n = 0;

String = "hghgffffiyuiu?tyreeczcv";

b = String.length;

c = "?";

while (n <= b)

{

a

= String.charAt(n);

if (a == c)

{

break;

}

else

{

n++;

}

}

alert(a);

//-->

</SCRIPT>

</HEAD>

По сути, в данном примере выполняется поиск заданного символа в символьной строке. Величина String.charAt(n) соответствует n-му символу символьной строки и будет подробно рассмотрена в следую- щих главах.

Оператор continue

Такой оператор передает управление оператору проверки истин- ности условия в цикле while и оператору обновления значения счетчи- ка в цикле for и именно в этом заключается его важное отличие от опе- ратора break Рассмотрим пример, который демонстрирует цикл while, содер- жащий оператор continue, который выполняется, когда переменная i

56

Web-программирование. Основы языка JavaScript.

оказывается равна 3

<SCRIPT language = "JavaScript">

<!--

i = 0;

n = 0;

while (i < 5)

{

i++;

if

(i == 3)

{

continue;

}

alert(i);

}

//-->

</SCRIPT>

Таким образом, можно пропустить некоторый шаг при работе цикла.

Оператор function

Оператор function объявляет пользовательскую функцию языка JavaScript и требует указания ее имени "name" и списка параметров "param", заключенных в скобки. Для того чтобы использовать в основ- ном скрипте значение некоторой переменной, которую вычисляет функция, она должна содержать в себе оператор return. В языке JavaScript принято следующее написание оператора func-

tion

function name([param] [,param] [

{

Тело функции

}

57

,param])

Web-программирование. Основы языка JavaScript.

Тело функции, как и в случае операторов цикла, заключается в фигурные скобки. Приведем пример функции, которая возвращает общую сумму продажи, если даны число единиц продаваемых изделий a, b, и c, и их цена a1, b1, c1

function sal(a, b, c, a1, b1, c1)

{

d = a*a1 + b*b1 + c*c1; return d;

}

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

Оператор return

Оператор return указывает значение, которое будет возвращено функцией

return expression;

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

<SCRIPT language = "JavaScript">

<!--

x=3;

function square(x)

{

return x*x

}

a=square(x);

alert(a);

//-->

</SCRIPT>

Можно написать и так

<SCRIPT language = "JavaScript">

58

Web-программирование. Основы языка JavaScript.

<!--

x=2;

function square(x)

{

return a=x*x

}

square(x);

alert(a);

//-->

</SCRIPT>

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

function Amb(string1,string2,string3)

{

return string1+", "+string2+", "+string3;

}

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

Оператор new

Оператор new позволяет создавать конкретный образец некоторо- го типа объекта, который определяется пользователем (понятие объек- та будет изложено в следующих главах) и используется следующим образом

ObjectName = new objectType(param1 [, param2] paramN]);

[,

Этот оператор мы уже использовали для создания объекта масси- ва - array и будем более подробно рассматривать при изложении мето-

59

Web-программирование. Основы языка JavaScript.

дов работы с объектами.

Ключевое слово this

Слово this (это) можно использовать для того, чтобы обратиться к текущему объекту

this[.propertyName]

Пусть функция, названная check, проверяет правильность значе- ния свойства объекта

function check(obj, low, hi)

{

if ((obj.value < low) || (obj.value > hi))

alert("Неверное число!");

}

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

Enter a number between 16 and 100:

<input type = "text" name = "age" size = 5 onChange = "check(this, 16, 100)">

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

Оператор with

Оператор with устанавливает объект "по умолчанию" для некото- рого набора заданных выражений. Внутри этого набора любые ссылки на свойства объекта без явного указания его имени предполагают ис- пользование объекта, установленного "по умолчанию". Использование оператора with выглядит следующим образом

with (object)

{

Тело оператора

60

Web-программирование. Основы языка JavaScript.

}

Приведем пример, который показывает, как оператор with обра- щается к свойству PI (число - "пи") и методам cos() и sin() без явного определения имени объекта Math в каждом выражении

<SCRIPT language = "JavaScript">

<!--

var a, x, y; var r = 10; with (Math)

{

a

= PI*r*r;

x

= r*cos(а);

y

= r*sin(а/2);

}

//-->

</SCRIPT>

Свойства и методы объектов мы также рассмотрим в следующих главах.

Зарезервированные слова

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

abstract

extends

int

super

boolean

false

interface

switch

break

final

long

synchronized

byte

finally

native

this

case

float

new

throw

catch

for

null

throws

char

function

package

transient

class

goto

private

true

const

if

protected

try

61

Web-программирование. Основы языка JavaScript.

continue

implements

public

var

default

import

return

void

do

in

short

while

double

instanceof

static

with

else

Вопросы

1. Перечислить операторы цикла. Пояснить их работу.

2. Что такое условный оператор и как он применяется?

3. Как используется оператор return?

4. С помощью какого оператора определяется переменная и как

это делается?

5. Как записываются комментарии?

6. Что такое зарезирвированные слова?

7. Для чего используется оператор new?

8. Для чего существует оператор with?

9. Для чего используется оператор this?

10. Для чего используется оператор continue?

Задания

1. Написать скрипт, демонстрирующий действие оператора цикла

for.

2. Написать скрипт, демонстрирующий условные операторы.

3. Написать скрипт, использующий оператор return.

4. Написать скрипт, определяющий несколько переменных.

5. Написать скрипт, демонстрирующий запись комментариев.

6. Написать скрипт для демонстрации оператора new.

7. Написать скрипт для выполнения оператора with.

8. Написать скрипт для демонстрации оператора this.

9. Написать скрипт для демонстрации оператора continue.

10. Написать скрипт для демонстрации оператора break.

62

Web-программирование. Основы языка JavaScript.

СОБЫТИЯ

Приложения или скрипты, написанные на языке JavaScript, в ос- новном управляются событиями или, вернее, мы используем эти собы- тия, чтобы выполнить те или иные программные действия. События (Events) - это обычно результат действий пользователя, например, щелчок кнопкой мышки по некоторому объекту в документе. Однако возможны и программные события, например, загрузка документа в окно браузера (Load), которые также можно использовать для управ- ления работой скриптов. Каждому событию в JavaScript сопоставляется специальная, встроенная в JavaScript программа, которая называется обработчиком результата события (Events Handler). Эти обработчики могут выпол- няться, когда происходит некоторое событие. События и обработчики этих событий являются очень важной частью программирования на языке JavaScript. Благодаря обработчикам, мы можем заставить нашу JavaScript программу реагировать на определенные события. Напри- мер, программа - обработчик события, которую мы можем использо- вать при щелчке (Click) мышкой, называется onClick. Она сообщает компьютеру, что нужно делать, если произойдет данное событие. Об- работчик события записываются в документ как атрибут некоторого HTML-тега, т.е. именно к нему приписывается JavaScript код, который, собственно, и выполняет обработку этого события

<TAG EventHandler = "JavaScript Code">

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

<INPUT type = "button" value = "Calculate" onClick = "com- pute()">

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

63

Web-программирование. Основы языка JavaScript.

чем одно выражение, отдельные выражения записываются через точку с запятой ";"

<INPUT type = "button" value = "Calculate" onClick = "com- pute(); fun()">

Определение, задание определенной функции для некоторого об- работчика события

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

Делает код вашего скрипта более легким для восприятия.

Каждое событие используется вместе с определенными HTML- тегами, например,

События Focus, Blur, Change используются вместе с объекта-

ми text fields, textareas и selections.

Событие щелчка Click - применяется вместе с buttons, radio

buttons, checkboxes, submit buttons, reset buttons, links и некоторыми другими.

Событие Select работает вместе с тегами text fields, textareas.

События MouseOver и MouseOut могут применяться вместе со

многими тегами, в том числе с links (гиперссылка), image (рисунок) и т.д.

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

Обзор событий

Приведем теперь сводную таблицу основных событий и их обра- ботчиков для JavaScript версии 1.1. События для более поздних версий языка будут вводить далее по мере их рассмотрения.

Событие

Действия

Обработчик

результата

Abort

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

onAbort

64

Web-программирование. Основы языка JavaScript.

Blur

Пользователь убирает фокус с эле- мента формы, т.е. щелкает мышкой в другом месте документа.

OnBlur

Click

Пользователь щелкает мышкой по элементу формы или связи link.

OnClick

Change

Пользователь изменяет значение полей text, textarea и т.д.

OnChange

Focus

Пользователь передает фокус ука- занному элементу формы, т.е. щел- кает по нему мышкой.

OnFocus

Load

Пользователь загружает Web- страницу в свой браузер.

OnLoad

MouseOver

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

OnMouseOver

MouseOut

Происходит, когда пользователь перемещает указатель мышки от гиперссылки или другого объекта.

OnMouseOut

Select

Пользователь выделяет область вво- да некоторого элемента формы.

OnSelect

Reset

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

onReset

Submit

Пользователь отправляет форму, щел- кая кнопку Submit.

OnSubmit

Unload

Пользователь выходит из страницы, т.е. выгружает ее из браузера.

OnUnload

Перейдем теперь к более подробному рассмотрению этих событий в HTML-документе и приведем некоторые примеры их использования.

Событие Click

Обработчик такого события называется onClick и вызывается по- сле щелчка (Click) левой кнопки мышки по некоторому объекту в до- кументе. Такой обработчик придает широкую функциональность кнопкам формы и другим объектам на Web-странице. Кнопки могут использоваться, например, для проверки коррект- ности ввода данных пользователем перед отправкой их на сервер или для вычисления некоторых результатов на форме, или в определенных выражениях. Щелчок на переключателе или флажке позволяет пере-

65

Web-программирование. Основы языка JavaScript.

ключить программу на обработку какой-то другой информации. Приведенный ниже код представляет собой простейший пример программы обработки события onClick

<FORM>

<INPUT

type

=

"button"

value

=

"Click

me"

onClick

=

"alert('OK')">

</FORM>

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

<A HREF = "http://www.server.ru" onClick = "alert('Вы решили уйти с этой страницы?')"> Переход на другую страницу </A>

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

<SCRIPT language = "JavaScript">

<!--

function event()

{

alert('Вы решили уйти с этой страницы?');

}

//-->

</SCRIPT>

<A HREF = "http://www.server.ru" onClick = "event()"> Переход на другую страницу

66

Web-программирование. Основы языка JavaScript.

</A>

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

Событие Blur

Событие Blur происходит в тот момент, когда элемент формы text, select или textarea теряет фокус. Событие потери фокуса может исполь- зоваться для проверки корректности ввода данных пользователем. Об- работчик события onBlur отличается от обработчика onChange, кото- рый вызывается только в случае изменения значения поля и выхода из него. В следующем примере userName - это текстовая область, которая теряет фокус

<INPUT

type

=

"text"

value

=

""

onBlur = "required(this)">

name

=

"userName"

Обработчик событий onBlur вызывает функцию required(), которая проверяет правильность ввода значений в данное поле ввода. Еще один пример, но уже без использования специальной функ-

ции

<FORM> <INPUT type = "text" size = "45" value = "Впишите свое имя и щелкните по другой строке" onBlur = "alert('Вы уверены, что пра- вильно написали имя?')"> </FORM>

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

Событие Focus

Такое событие происходит в тот момент, когда выполняется пере- ход к элементу формы textarea, select или text, предназначенному для ввода текстовых или числовых данных. Элемент формы получает фо- кус в тот момент, когда пользователь переходит к этому элементу с

67

Web-программирование. Основы языка JavaScript.

помощью клавиши Tab или щелчка мышкой. Следующий пример использует обработчик onFocus в объекте textarea с именем valueField и вызывает функцию valueCheck().

<FORM> <INPUT type = "textarea" value = "" name = "valueField" onFo- cus = "valueCheck()"> </FORM>

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

<FORM> <INPUT type = "text" size = "30" onFocus = "window.status = 'Вы находитесь в текстовом поле формы'"> </FORM>

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

Событие Select

Событие Select происходит после выбора части или всего текста в полях объектов text или textarea, т.е. обработчик событий onSelect вы- зывается в тот момент, когда выделен текст внутри элемента формы. Следующий пример использует обработчик события onSelect в тексто- вом поле с именем valueField и вызывает функцию select()

<FORM> <INPUT type = onSelect = "select()" > </FORM>

"text"

value

=

""

name

=

"valueField"

которая, например, проверяет содержимое этого блока выделения.

Событие Change

Такое событие происходит в тот момент, когда значение элемента формы text, select или textarea изменилось, и элемент формы потерял

68

Web-программирование. Основы языка JavaScript.

фокус. Обработчик событий onChange можно использовать для про- верки правильности ввода данных в форму. В отличие от события onBlur, здесь обязательно нужно поменять значение поля ввода фор- мы, а не просто выйти из этого поля. В следующем примере userName - это текстовая область и обработчик событий onChange вызывает функциею checkValue() для проверки правильности ввода значений

<FORM>

<INPUT

type

=

"text"

value

=

""

name

=

"userName"

onChange = "checkValue(this.value)">

</FORM>

Другой пример

<FORM> <INPUT type = "text" size = "45" value = "Измените текст и щелкните по другой строке" onChange = "window.status = 'Вы из- менили текст в текстовом поле' "> </FORM>

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

Событие Submit

Событие Submit происходит в момент щелчка мышкой по кнопке Submit для отправки данных формы на сервер. Именно в этот момент начинает работать обработчик события onSubmit, который позволяет запустить некоторую программу скрипта, например, Submit() для про- верки данных формы. Если такая программа возвращает любое, отличное от false, зна- чение, это приводит к отправке данных на сервер. В противном случае, отправки данных формы не происходит. Для получения правильного скрипт-кода рекомендуется вставлять в вызываемую функцию опера- тор return, как это показано в следующем примере

элементы формы

function Submit()

69

Web-программирование. Основы языка JavaScript.

{

строки кода

if (Data is valid)

{

return true;

}

else

{

return false;

}

}

Приведем теперь простой, но вполне реальный пример работы этого события

<FORM> <INPUT type = "submit" onSubmit = "alert('Спасибо, что вы нам написали!')"> </FORM>

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

Событие MouseOver

Это событие происходит, когда указатель мыши помещается над гиперссылкой, рисунком или некоторыми другими объектами, напри- мер, обычным текстом. Для взаимодействия со свойствами status или defaultStatus обработчик события onMouseOver должен возвращать значение true. В следующем примере обработчик события onMouseOver выводит в строке статуса сообщение "Щелкните по гиперссылке!"

<A HREF = "index.htm" onMouseOver = "window.status = 'Щелкните по гиперссылке!'; return true"> Гиперссылка! </A>

По умолчанию, когда пользователь помещает указатель мышки

70

Web-программирование. Основы языка JavaScript.

над гиперссылкой, значение href, в данном случае это index.htm, пока- зывается в строке состояния, а при использовании такого скрипта в строке статуса будет показано "Щелкните по гиперссылке!", и истин- ный адрес ссылки будет невидим. Этот пример работает только в брау- зере Internet Explorer и не работает в Firefox.

Событие MouseOut

Событие MouseOut происходит, когда указатель мыши выходит из определенной области документа. Обработчик события оnMouseOut выполняет определенный JavaScript код, когда происходит событие MouseOut. Если мышь перемещается из одной области (area) в другую, то для первой области происходит событие MouseOut, а для второй – событие MouseOver. Обработчик события onMouseOut также должен возвращать true, если вы хотите устанавливать значения свойствам status или defaultStatus. Приведем пример совместного использования описанных выше событий

<SCRIPT language = "JavaScript">

<!--

function up()

{

document.mypic.src = "up.gif"

}

function down()

{

document.mypic.src = "down.gif"

}

//-->

</SCRIPT>

<CENTER>

<H2>

Пример простейшей анимации

</H2>

HREF

onMouseOut = "down()">

<A

=

http://www.server.ru

71

onMouseOver

=

"up()"

Web-программирование. Основы языка JavaScript.

<IMG src = "down.gif" name = "mypic" > </A>

При наведении курсора мышки на область рисунка, которая пока- зывает содержимое файла down.gif, его картинка будет меняться на up.gif, а при уходе курсора - восстанавливаться в прежнее состояние - down.gif.

Событие Load

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

<BODY >

или

<FRAMESET >

Например

<BODY onLoad = "

" >

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

<BODY onLoad = "alert('Добро пожаловать на мою домаш- нюю страницу!')">

Текст страницы

</BODY>

Событие UnLoad

Обработчик onUnLoad события UnLoad вызывается, когда пользо- ватель выходит из документа, т.е. документ закрывается в браузере и происходит событие UnLoad. Когда несколько событий UnLoad вклю- чено в иерархию кадров, порядок их выполнения будет - от дочернего к родительскому. Например, это событие

72

Web-программирование. Основы языка JavaScript.

<BODY onUnLoad = "alert('Вы уверены, что хотите уйти с моей страницы!')">

<A href = index.htm> Гиперссылка </A>

</BODY>

будет происходить при переходе с данной страницы на следую- щую, например, по гиперссылке.

Событие Abort

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

<IMG name = "pic" src = "pic.gif" onAbort = "alert('Вы не закон- чили загрузку изображения!')">

Событие Reset

Событие Reset происходит, когда пользователь нажимает кнопку Reset на некоторой форме. Обработчик события оnReset выполняет заданный вами JavaScript код, когда происходит это событие. Следующий пример отображает объект text со значением "по умолчанию" - "Введите информацию" и кнопку Reset. Если пользова- тель вводит неверную информацию, то нажатие кнопки сброса восста- навливает первоначальное значение

<FORM name = "form" onReset = "alert('Восстановлено зна- чение по умолчанию')"> Состояние:

<BR> <INPUT type = "text" name = "state" value = "Введите инфор-

73

Web-программирование. Основы языка JavaScript.

мацию" size = "20"> <BR> <INPUT type = "reset" value = "Clear " name = "reset"> </FORM>

Обработчик события формы оnReset отображает сообщение, ука- зывающее, что значения "по умолчанию" были восстановлены, как показано на рис. 4.

как показано на рис. 4. Рис. 4. Пример скрипта Вопросы 1.

Рис. 4. Пример скрипта

Вопросы

1. Что дает использование в скриптах события Blur?

2. Для чего используется событие Click?

3. Как используется событие Focus?

4. При каких действиях пользователя происходит событие Load?

5. Как использовать события MouseOver и MouseOut?

6. Что дает использование события Unload?

7. Для чего используется событие Reset?

8. Что такое событие Abort и как оно используется?

9. Как использовать событие Change?

74

Web-программирование. Основы языка JavaScript.

Задания

1.

Написать скрипт, демонстрирующий событие Click.

 

2.

Написать скрипт для демонстрации события Unload.

3.

Написать скрипт, использующий событие Reset.

4.

Написать

скрипт для демонстрации событий MouseOver

и

MouseOut.

5. Написать скрипт, демонстрирующий событие Load.

6. Написать скрипт для демонстрации события Focus.

7. Написать скрипт для демонстрации события Blur.

75

Web-программирование. Основы языка JavaScript.

ФУНКЦИИ

Функция - это JavaScript процедура или набор выражений и опе- раторов, которые выполняют определенную задачу. Определение функции состоит из ключевого слова function, которое сопровождается

Именем функции.

Списком формальных аргументов или параметров функции,

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

JavaScript операторами или выражениями, которые определя-

которые

ют тело функции и расположены в фигурных скобках { следуют за заголовком функции.

},

В соответствии со сказанным выше, приведем общий синтаксис

описания функции

function имя _ функции (список _ формальных _ аргументов)

{

Оператор или выражение JavaScript;

}

В

теле функции могут использоваться формальные аргументы, т.е.

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

Определение функций

Внутри скрипта можно использовать любые пользовательские функции, определенные на текущей странице в данном файле между любыми тегами <SCRIPT> и </SCRIPT>, даже если они определяются

в нескольких таких контейнерах. Теги <SCRIPT>

</SCRIPT> и оп-

ределение функции могут находиться в любом месте HTML-файла, но

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

тегами <HEAD>

</HEAD>.

76

Web-программирование. Основы языка JavaScript.

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

function pr(string)

{

document.write(string +"<BR>");

}

которая принимает строку как аргумент, прибавляет к ней некото- рые HTML-теги, используя для этого оператор суммы "+", а затем по- казывает результат на экране в текущем документе. Для вызова этой функции из основной программы или другой функции нужно написать

pr("Это текст для выдачи на экран");

или

а = "Это текст для выдачи на экран" pr(а);

Внутри самой функции вы можете адресовать параметры сле- дующим образом

functionName.arguments[i]

где functionName - имя функции, а i - порядковый номер аргумен- та, начинающийся с нуля. Например, первый аргумент функции с име- нем func будет обозначен, как func.arguments[0]. Общее число аргу- ментов определяется с помощью выражения arguments.length. Функция может быть рекурсивной, т.е. она может вызывать саму себя. Например, существует функция, которая вычисляет факториал

<SCRIPT language = "JavaScript">

<!--

function fact(n)

77

Web-программирование. Основы языка JavaScript.<