От автора

После выхода в свет моих книг «Сам себе web-мастер» (2001) и «Сам себе web- дизайнер» (2002) многочисленные читатели часто спрашивали меня о том, как написать тот или иной сценарий на языке JavaScript для поддержки своей вебстраницы. Сначала я пытался оперативно отвечать на все вопросы, но вскоре вынужден был оставить это занятие — просто не успевал. Вместе с тем появлением этой книги я обязан вам, уважаемые читатели. Понятно, что, освоив HTML, начинающие веб-дизайнеры сначала ищут по всему свету образцы недостающих им сценариев, а затем — рецепты их создания. Рано или поздно они ощущают необходимость глубже познать язык сценариев, чтобы не гоняться за рецептами, а самим их создавать. Кроме того, на разработку веб-сайтов можно взглянуть не только с традиционной точки зрения HTML, но и с позиций языка сценариев, что еще более увлекательно. Как и HTML, язык JavaScript с успехом претендует на роль народного языка общения с компьютером. Он очень популярен, его легко изучать не искушенным в программировании новичкам. Тем не менее он достаточно выразителен при создании вполне серьезных и полезных приложений как для Веб, так и для локальных компьютеров.

Хотя JavaScript прост для усвоения и практического использования, полное его описание занимает более 1000 страниц. Я понимаю, что далеко не каждый, даже весьма заинтересованный этой темой, отважится на чтение такого фолианта, особенно если ему предстоит все начинать с нуля. Эта книга — не справочник, а практическое руководство для самостоятельного изучения JavaScript, не требующее от читателя предварительной подготовки в области программирования. Я хотел сделать ее небольшой, понятной и полезной. В ней содержится масса сведений, рекомендаций и даже рецептов, которые вам могут потребоваться на первых порах создания веб-сайтов и локальных приложений. Однако главная цель книги — помочь научиться программировать. Если вы никогда ранее не занимались программированием, то эта книга даст вам ключ к освоению не только JavaScript, но и любого другого языка программирования. В частности, от JavaScript вы сможете довольно легко перейти к изучению C++, Java и др. Вообще говоря, стоит только освоить один язык, и вам открыты двери к любому другому. Если вы начинаете с JavaScript, то это очень хороший выбор.

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

на полках библиотек или в Интернете. В настоящее время наилучшим, на мой взгляд, справочником по JavaScript является весьма объемная книга Д. Гудмана «JavaScript. Библия для пользователя».

Материал предлагаемой книги поддерживается моим сайтом, расположенным по адресу www.admiral.ru/~dunaev. По мере сил и возможностей я периодически обновляю его. Свои отзывы, вопросы и пожелания вы можете оставить в гостевой книге. Так что добро пожаловать!

Благодарность

Я искренне благодарю свою жену Валентину за понимание и внимательное отношение ко мне в период работы над книгой.

От издательства

Ваши замечания, предложения, вопросы отправляйте по адресу электронной почты comp@piter.com (издательство «Питер», компьютерная редакция).

Мы будем рады узнать ваше мнение!

На веб-сайте издательства http://www.piter.com вы найдете подробную информацию о наших книгах.

Введение

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

Было время, когда считалось, что для облегчения общения с компьютером необходимо создать язык, достаточно близкий к естественному. Эта идея в конечном счете не выдержала испытаний временем, хотя и породила несколько прекрасных языков программирования. Часто бывает, что побочные эффекты некоей деятельности превосходят ожидания. Мы испытываем трудности общения и на естественном языке; что уж говорить о специализированных языках, тем более о языках общения с компьютером... Проблема решается на удивление просто. Главное здесь — понять корень или причину проблемы. Вся сложность заключается не в языке, а в культуре или способе его употребления. В конце концов, язык представляет собой лишь нормативную базу, а люди используют ее лишь так и в той мере, как смогли или как им показалось достаточным для своих житейских нужд. Когда люди, сами того не желая, размывают небрежной речью нормативную базу языка, они разрушают систему коммуникации не только между собой, но и между последующими поколениями. А как соблазнительно использовать слэнг и жаргон! При этом возникает иллюзия причастности к особой, исключительной группе, некоей профессиональной касте. Кажется, что это выделяет нас из толпы. Понятно, что для становления личности необходимо выделиться из среды, но не настолько, чтобы выпасть на обочину магистрали, по которой движется все наше общество. На обочине вас никто не заметит, пролетая мимо, а вам самим останется только копошиться в грязи, чтобы потом рассказать кому-нибудь о перипетиях вашего лихого путешествия по жизни. Но соблазны на то нам и даны, чтобы мы могли показать свою способность им противостоять.

Любой язык, на котором хотя бы кто-нибудь говорит, — живой. Практика использования языка стимулирует развитие его нормативной базы и тем самым поддерживает его существование. Владимир Даль не описывал нормы русского языка, а фиксировал словоупотребление, поэтому его словарь и называется словарем «живого великорусского языка». Что касается искусственных языков, то есть языков программирования, то трудности их освоения новичками обусловлены, главным образом, недостатком практики программирования. Стандартный (формальный) способ описания языка хорош для тех, кто уже изучал любой язык программиро-

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

Давайте для пробы пера напишем и выполним хотя бы элементарную, но все же полноценную программу на JavaScript, чтобы убедиться в реальности нашей затеи изучить программирование. Откроем простой текстовый редактор, например Блокнот (Notepad) Windows (рис. B.I), и введем с клавиатуры следующий текст: WScript.echo("Привет!")

Рис. B.I. Код программы в окне текстового редактора

Мы написали элементарную программу на языке JavaScript, состоящую из одной строки. Сохраним эту программу в файле под именем, например, proba.js. Имя файла может быть произвольным, а вот расширение js указывает, что он содержит выражения, написанные на языке JavaScript. Чтобы сохранить файл, выполните команду меню Файл , Сохранить как. В открывшемся диалоговом окне из раскрывающегося списка Тип файла выберите Все файлы (*.*), а в поле Имя файла введите с клавиатуры имя файла с расширением js, например proba.js (рис. В.2). В заключение щелкните на кнопке Сохранить.

Рис. В.2. Диалоговое окно сохранения файла

Итак, наша программа написана и сохранена в файле. Чтобы ее выполнить, в Проводнике Windows дважды щелкните на имени файла proba.js. В результате на экране появится диалоговое окно со словом «Привет!» и кнопкой ОК (рис. В.З). Щелчок на этой кнопке закроет окно. Так работает наша программа.

Сервер сценариев Windows

!: Привет!-

Рис. В.З. Диалоговое окно с сообщением, созданное программой

Теперь немного модифицируем нашу программу. Откроем Блокнот и напишем в нем следующие строки:

<html>

<script>

alert("Привет")

</script>

</html>

Сохраним эту программу в файле с именем proba.htm. Если мы ее выполним, то в результате откроется окно веб-браузера, а на его фоне — диалоговое окно со словом «Привет!» и кнопкой ОК (рис. В.4).

Рис. В.4. Диалоговое окно с сообщением на фоне браузера Internet Explorer

Итак, эффекты выполнения рассмотренных выше двух программ почти одинаковы: обе программы выводят на экран диалоговое окно с сообщением. Различие состоит в том, что в первом случае диалоговое окно с сообщением появляется само по себе, а во втором — на фоне окна браузера. Дело в том, что эти почти одинаковые программы исполняются различными интерпретаторами языка. В первом случае это сервер сценариев Windows, называемый Windows Scripting Host, а во втором — веб-браузер. Вообще говоря, редакции языка JavaScript, понимаемые этими интерпретаторами, несколько различаются, но между ними много обще- го—в смысле как синтаксиса, так и принципов построения. Поэтому можно говорить о различных редакциях одного и того же языка.

Таким образом, мы столкнулись с тем, что различные исполнительные системы (интерпретаторы) воспринимают различные редакции одного и того же языка. Это происходит из-за того, что только благодаря интерпретаторам можно говорить о языке как о чем-то реальном. Представьте себе следующую ситуацию. Допустим, мы сами придумали некий язык программирования. Чтобы на нем действительно можно было писать программы, необходимо создать исполнительную систему — интерпретатор этого языка. Интерпретатор сам является программой, написанной на другом языке программирования и, возможно, другими людьми. Он может воспринимать декларированный нами язык в полной мере или только частично. А может случиться и так, что некоторые элементы языка интерпретатор будет воспринимать по-своему, не так, как это изначально предполагалось авторами. Поэтому появляются различные редакции языка, каждая для своего интерпретатора. Например, редакции JavaScript, понимаемые Microsoft Internet Explorer и браузерами Netscape, значительно отличаются друг от друга. С другой стороны, интерпретаторы усовершенствуются, появляются их новые версии. Те фрагменты языка, которые не воспринимались старыми версиями, становятся доступными в новых. Иначе говоря, интерпретаторы стремятся соответствовать некоторому стандартному подмножеству языка. Язык также может развиваться с учетом практики его использования и проблем, возникающих при разработке интерпретаторов. Постепенно формируется стандарт языка, который должен поддерживаться интерпретаторами различных производителей.

На момент выхода в свет этой книги современной являлась версия 1.5 JavaScript. Все рассмотренные в книге конструкции языка и примеры сценариев работают в браузере Microsoft Internet Explorer 6.0 для Windows; многие из них подходят и для Internet Explorer 4+ для Windows, но не все, — возможно, они будут корректно выполняться в Internet Explorer 5 для Macintosh. Некоторые описанные в книге средства не будут работать в Netscape Navigator версии 4 и старше. Средства, воспринимаемые только браузерами, отличными от Internet Explorer для Windows, в этой книге не рассматриваются вообще. Если не оговаривается особо, то описываемые в книге средства применимы для Internet Explorer 4 для Windows и старше, хотя некоторые из них могут работать и в более ранних версиях. Если у вас установлен Internet Explorer для Windows версии 5.5 и старше, то все сценарии, приведенные в книге, будут работать. Из-за ограниченного объема книги в ней отражены лишь основные возможности JavaScript, кое-что пришлось оставить без внимания. Если вы чего-то не найдете, то обращайтесь к другим, более специализированным или более объемным книгам.

Глава 1 посвящена основным элементам собственно языкаJavaScript. Глава 2 знакомит читателя с основными понятиями и важнейшими объектами, используемыми при создании сценариев, которые выполняются браузером. По существу, это введение в мир разработки сценариев. Обзор объектной модели браузера и документа приводится в главе 3. Материал этой главы можно использовать в качестве краткого справочника и пропустить при первом чтении. Он понадобится для получения ориентации в пространстве объектов. Примеры сценариев, решающих конкретные практические задачи, представлены в главе 4. Хотя примеры присутствуют во всех главах, в этой главе они иллюстрируют комплексное применение различных средств JavaScript и приближены к типовым задачам веб-дизайна. Глава 5 посвящена работе с файловой системой компьютера и реестром Windows с помощью программ на JavaScript. Ее можно читать отдельно, поскольку материал не связан с предыдущими главами. В приложении приведены руководство и справочник по HTML.

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

Глава 1. Основы JavaScript

Где писать программы и как их запускать

В этой главе мы рассмотрим основы языка JavaScript: важнейшие понятия и синтаксис (правила построения выражений). Приводимые примеры желательно самостоятельно выполнить на компьютере. Это можно сделать по-разному, но по крайней мере на первом этапе я рекомендую воспользоваться самым простым и доступным способом: в качестве интерпретатора (исполнительной системы) программ на JavaScript возьмите веб-браузер. Я работал с Internet Explorer 6.0. Большинство приведенных в книге примеров работают и в версии 5.0 этого браузера. В качестве редактора ваших программ выберите какой-нибудь простой текстовый редактор, например Блокнот Windows. Откройте текстовый редактор и создайте в нем заготовку файла, который вы будете потом редактировать, вводя экспериментальные выражения или даже целые программы. А именно введите в рабочее поле редактора следующий текст:

<HTML>

<HEAD><TITLE>npMMepbi</TITLE></HEAD>

<SCRIPT>

</SCRIPT>

</HTML>

По существу, это HTML-документ, определяющий пустую веб-страницу. Сохраните этот файл на диске, например под именем пример.htm. Расширение имени файла должно быть htm или html, поскольку мы хотим, чтобы он исполнялся в веббраузере. В этом файле мы написали теги языка HTML. Выражения на языке JavaScript следует записывать между тегами <SCRIPT> и </SCRIPT>. При изучении этой главы записывайте в каждой строке не более одного выражения на языке JavaScript. Заканчивайте строку нажатием на клавишу Enter, чтобы перейти к новой строке. Ниже приведен пример программы:

<HTML>

<НЕАО><Т1Т1Е>Примеры< /TITLE ></HEAD>

<SCRIPT> х = 5 у = х + 3 alert(y)

</SCRIPT>

</HTML>

При выполнении учебных примеров обычно требуется вывести на экран окончательные или промежуточные данные. Для этого можно использовать метод alertQ, указав в круглых скобках то, что требуется вывести на экран. В приведенном выше примере метод alert(y) выведет на экран диалоговое окно, в котором отобразит значение переменной у (в данном случае — число 8). Если не вставлять строку alert(y), то программа выполняется без отображения результата. Если вы хотите выводить результаты вычислений не в диалоговом окне, а непосредственно в окне веб-браузера, то вместо alert(y) напишите следующее выражение:

document.writeln(у)

Чтобы открыть файл (в нашем случае это примеры.htm) в веб-браузере и выполнить содержащуюся в нем программу, достаточно просто дважды щелкнуть левой кнопкой мыши на нем в окне Про в од н икаWindows. Если теперь потребуется открыть этот файл в окне текстового редактора, то щелкните правой кнопкой мыши где-нибудь на свободном пространстве в окне браузера и в контекстном меню выберите команду Просмотр в виде HTML Можно также воспользоваться и командой меню Вид > В виде HTML. В результате откроется окно текстового редактора с текстом вашей программы (рис. 1.1). Внесите необходимые изменения и сохраните их на диске (Файл > Сохранить). Чтобывеб-браузерсмоготобразитьизмененный файл, выполните команду Вид > Обновить (рис. 1.2). Таким образом, переходя от текстового редактора к браузеру и обратно, можно разрабатывать и отлаживать свои программы.

Рис. 1.1. Текстовый редактор Блокнот с программой на фоне браузера Internet Explorer

Создавать программы на JavaScript можно и с помощью программ, специально предназначенных для разработки веб-сайтов, — например Microsoft FrontPage или Macromedia Dreamweaver (рис. 1.3). Однако здесь мы не будем рассматривать эти средства.

Рис. 1.2. Результат выполнения программы из файла пример.htmРис. 1.2. Результат выполнения программы из файла пример.htm■ гжПримеры (Книге JavaScript/примеры htw") ♦ Dieantwe^vtM■■■■lM■l■^ж^""~мr—"^ж^ннанамам1ммамнмннн1мммнмаа■ гжПримеры (Книге JavaScript/примеры htw") ♦ Dieantwe^vtM■■■■lM■l■^ж^""~мr—"^ж^ннанамам1ммамнмннн1мммнмаа6 I 口1 *6 I 口1 *(Редагтиров^ть](Редагтиров^ть]「Ёид Вставить Изменить Теист Команды Сайт Окно □омоще「Ёид Вставить Изменить Теист Команды Сайт Окно □омощеЗаголовок: ПримерыЗаголовок: Примеры■ 1 :HTML><HEAD><TITLE>npMMepbi<AITLEx/HEAD>■ 1 :HTML><HEAD><TITLE>npMMepbi<AITLEx/HEAD>" 'i1i «лж" 'i1i «лжj<SCRIPT>■ . 5/-х+ЭfalertM/SCRIPT></HTML>j<SCRIPT>■ . 5/-х+ЭfalertM/SCRIPT></HTML>примеры htm•ИмспекторК.од$примеры htm•ИмспекторК.од$II，i > Инспелтор KoaiLII，i > Инспелтор KoaiL<HTML><HEAD><TITLE>npMMepbi</T1TLE></HEAD>•<SCRIPT><HTML><HEAD><TITLE>npMMepbi</T1TLE></HEAD>•<SCRIPT>i! Э «eSSsSSii! Э «eSSsSSi•</SCRIPT>J </HTML>•</SCRIPT>J </HTML>лилиФорнл IНичего£«мж*|Форнл IНичего£«мж*|i|fllUpuiprnoj|Hon|jij E**w[h二上]mВ)/| Ш'ili

Рис. 1.2. Результат выполнения программы из файла пример.htm

Рис. 1.2. Результат выполнения программы из файла пример.htm

■ гжПримеры (Книге JavaScript/примеры htw") ♦ Dieantwe^vtM

■■■■lM■l■^ж^""~мr—"^ж^ннанамам1ммамнмннн1мммнмаа

■ гжПримеры (Книге JavaScript/примеры htw") ♦ Dieantwe^vtM

■■■■lM■l■^ж^""~мr—"^ж^ннанамам1ммамнмннн1мммнмаа

6 I 口1 *

6 I 口1 *

(Редагтиров^ть]

(Редагтиров^ть]

「Ёид Вставить Изменить Теист Команды Сайт Окно □омоще

「Ёид Вставить Изменить Теист Команды Сайт Окно □омоще

Заголовок: Примеры

Заголовок: Примеры

■ 1 :HTML>

<HEAD><TITLE>npMMepbi<AITLEx/HEAD>

■ 1 :HTML>

<HEAD><TITLE>npMMepbi<AITLEx/HEAD>

" 'i1

i «лж

" 'i1

i «лж

j<SCRIPT>

■ . 5

/-х+Э

falertM

/SCRIPT>

</HTML>

j<SCRIPT>

■ . 5

/-х+Э

falertM

/SCRIPT>

</HTML>

примеры htm•ИмспекторК.од$

примеры htm•ИмспекторК.од$

II，i > Инспелтор KoaiL

II，i > Инспелтор KoaiL

<HTML>

<HEAD><TITLE>npMMepbi</T1TLE></HEAD>

•<SCRIPT>

<HTML>

<HEAD><TITLE>npMMepbi</T1TLE></HEAD>

•<SCRIPT>

i! Э «eSSsSSi

i! Э «eSSsSSi

•</SCRIPT>

J </HTML>

•</SCRIPT>

J </HTML>

ли

ли

Форнл IНичего

£«мж*|

Форнл IНичего

£«мж*|

—;.] I 三!:耳 tijxi] Ш !

fjtgSSx 1ГЛ - IS.Л -яс

Рис. 1.3. Окно Dreamweaver 4.0 — программы для разработки веб-сайтов

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

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

<HTML>

<НЗ>Редактор кодов JavaScript</H3>

Код:<Ы>

<TEXTAREA id="mycode" ROWS=10 COLS=60></TEXTAREA>

<р>Результат:<Ы>

<TEXTAREA id="myrezult" ROWS=3 COLS=60></TEXTAREA>

<P>

<BUTTON onclick="document.all.myrezult.value=eval(mycode.value)"> Выполнитb</BUTTON>

<BUTTON onclick="document.all.mycode.value='';

document.all.myrezult.value=''">

04HCTHTb</BUTTON>

<P>

<! Комментарий >

Введите выражения в верхнее поле.

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

Можно также писать каждое выражение в отдельной строке.

Чтобы закончить одну строку и перейти к другой, нажмите клавишу Enter.

</HTML>

3 С АМОИ документыЧесМог Мт - Microsoft Internet Explore!3 С АМОИ документыЧесМог Мт - Microsoft Internet Explore!тшш—Ост^—Об^Домойt )^)И4Aтшш—Ост^—Об^Домойt )^)И4AJ Файл Правка Ена Избранное Сервис [правкаJ Файл Правка Ена Избранное Сервис [правка61 C:\Mom докуненп>|\ед1о1 him61 C:\Mom докуненп>|\ед1о1 himUJJJJiUJJJJiff

3 С АМОИ документыЧесМог Мт - Microsoft Internet Explore!

3 С АМОИ документыЧесМог Мт - Microsoft Internet Explore!

тшш

—Ост^—Об^Домойt )^)И4A

тшш

—Ост^—Об^Домойt )^)И4A

J Файл Правка Ена Избранное Сервис [правка

J Файл Правка Ена Избранное Сервис [правка

61 C:\Mom докуненп>|\ед1о1 him

61 C:\Mom докуненп>|\ед1о1 him

UJJJJi

UJJJJi

f

f

Редактор кодов JavaScript

Код:

x = 2+3

у = х+ 5

Результат:

10

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

二1二1Можно также писать каждое выражение в отдельной строке. Чтобы закончить 1 одну строку и перейти к другой, нажмите клавишу Enter.

二1

二1

Рис. 1.4. Редактор программ JavaScript, сделанный с помощью HTML

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

Здесь мы не будем разбирать, как устроен предлагаемый код редактора. Отметим лишь, что в его основе лежат простые сценарии на языке JavaScript, выполняющие роль обработчиков события, например щелчка кнопкой мыши (onclick). На рис. 1.4 показано, как выглядит наш редактор в окне браузера Internet Explorer.

СОВЕТ

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

Ввод и вывод данных

В JavaScript предусмотрены довольно скудные средства для ввода и вывода данных. Это вполне оправданно, поскольку JavaScript создавался в первую очередь как язык сценариев для веб-страниц. Основой веб-страниц является код, написанный на языке HTML, который специально рассчитан на форматирование информации и создание пользовательского интерфейса. Поскольку сценарии на JavaScript хорошо интегрируются с HTML-кодом, постольку для ввода и вывода данных вполне подойдут средства HTML Если вы пишете программу наJavaScript, которая будет выполняться веб-браузером Internet Explorer, то можете воспользоваться тремя стандартными методами для ввода и вывода данных: alertQ, promptQ и confirmQ. Рассмотрим эти методы браузера подробнее.

alert

Данный метод позволяет выводить диалоговое окно с заданным сообщением и кнопкой ОК. Синтаксис соответствующего выражения имеет следующий вид: а1еГгТ("сообщение)

Если ваше сообщение конкретно, то есть представляет собой вполне определенный набор символов, то его необходимо заключить в двойные или одинарные кавычки. Например, aler1("Привет|:ем!") (рис. 1.5). Вообще говоря, сообщение представляет собой данные любого типа: последовательность символов, заключенную в кавычки, число (в кавычках или без них), переменную или выражение.

Диалоговое окно, выведенное на экран методом alert(), можно убрать, щелкнув на кнопке ОК. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными. Таким образом, окно, создаваемое посредством alertQ, является модальным.

Microsoft Internet Explorer ——■

••W : Прибег ьс0M*••W : Прибег ьс0M*

••W : Прибег ьс0M*

••W : Прибег ьс0M*

ОтменаОтмена

Отмена

Отмена

Рис. 1.5. Диалоговое окно, созданное методом а!ег1("Привет всем!")

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

confirm

Метод confirm позволяет вывести диалоговое окно с сообщением и двумя кнопками — ОК и Отмена (Cancel). В отличие от метода alert этот метод возвращает логическую величину, значение которой зависит от того, на какой из двух кнопок щелкнул пользователь. Если он щелкнул на кнопке ОК, то возвращается значение true (истина, да); еслиже он щелкнул на кнопке Отмена, то возвращается значение false (ложь, нет). Возвращаемое значение можно обработать в программе и, следовательно, создать эффект интерактивности, то есть диалогового взаимодействия программы с пользователем. Синтаксис применения метода confirm имеет следующий вид:

confiгт(сообщение)

Если ваше сообщение конкретно, то есть представляет собой вполне определенный набор символов, то его необходимо заключить в кавычки, двойные или одинарные. Например, confirm("Bbi действительно хотите завершить работу?") (рис. 1.6). Вообще говоря, сообщение представляет собой данные любого типа: последовательность символов, заключенную в кавычки, число (в кавычках или без них), переменную или выражение. Если вы еще не знаете, что такое переменная и выражение, то вскоре восполните этот пробел.

1 Microsoft InternetExploiei

Выдейсгсительно хотите завершить работу?;

Рис. 1.6. Диалоговое окно, созданное методом confirm

Диалоговое окно, выведенное на экран методом confirm(), можно убрать щелчком на любой из двух кнопок — ОК или Отмена. До тех пор пока вы не сделаете этого, переход к ранее открытым окнам невозможен. Окна, обладающие свойством останавливать все последующие действия пользователя и программ, называются модальными. Таким образом, окно, создаваемое посредством confirmQ, является

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

prompt

Метод prompt позволяет вывести на экран диалоговое окно с сообщением, а также с текстовым полем, в которое пользователь может ввести данные (рис. 1.7). Кроме того, в этом окне предусмотрены две кнопки: ОК и Отмена (Cancel). В отличие от методов alertQ и confirm() данный метод принимает два параметра: сообщение и значение, которое должно появиться в текстовом поле ввода данных по умолчанию. Если пользователь щелкнет на кнопке О К, то метод вернет содержимое поля ввода данных, аесли он щелкнет на кнопке Отмена, то возвращается логическое значение false (ложь, нет). Возвращаемое значение можно затем обработать в программе и, следовательно, создать эффект интерактивности, то есть диалогового взаимодействия программы с пользователем. Синтаксис применения метода prompt имеет следующий вид:

prompt(сообщение, значение_поля_ввода_данных)

Рис. 1.7. Диалоговое окно, созданное методом prompt

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

Рис. 1.8. Диалоговое окно, созданное методом promptQбез параметров

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

Типы данных

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

Данные, которые хранятся в памяти компьютера и подвергаются обработке, можно отнести к различным типам. Понятие типа данных возникает естественным образом, когда необходимо применить к ним операции обработки. Например, операция умножения применяется к числам, то есть к данным числового типа. Это известно еще из начальной школы. А что получится, если умножить слово «Вася» на число 5? Поскольку трудно дать вразумительный ответ на этот вопрос, напрашивается вывод: некоторые операции не следует применять к разнотипным данным. Мы также не знаем, что должно получиться в результате умножения слов «Вася» и «Маня», поэтому заключаем, что определенные операции вообще не применимы к данным некоторых типов. С другой стороны, существуют операции, результат которых зависит от типа данных. Например, операция сложения, обозначаемая символом « + », может применяться и к двум числам, и к двум строкам, состоящим из произвольных слов. В первом случае результатом применения этой операции будет некоторое число, а во втором — строка, получающаяся путем приписывания второй строки к концу первой. В случае строк операцию сложения еще называют склейкой или конкатенацией. Операции, применимые к различным типам данных, но обозначаемые одним и тем же символом, называют также перегруженными. Так, операция, обозначаемая символом < t , является перегруженной: применительно к числам она выполняет арифметическое сложение этих чисел, а применительно к строкам символов — склейку (приписывание, конкатенацию).

Таблица 1.1. Типы данных в JavaScript

Тип данных

Примеры

Описаниезначений

Строковый или символьный (string)

"Привет"

"д.т. 123-4567"

Последовательность символов, заключенная в кавычки, двойные или одинарные

Числовой (number)

3.14 -567 +2.5

Число, последовательность цифр, перед которой может быть указан знак числа (+ илиперед

положительными числами не обязательно ставить знак «+ »; целая и дробная части чисел разделяются точкой. Число записывается без кавычек

Логический (булевский, boolean)

true false

true (истина, да) или false (ложь, нет); возможны только два значения

Null

Отсутствие какого бы то ни было значения

Объект (object)

Программныйобъект, определяемый своими свойствами. В частности, массив также является объектом

Функция (function)

Определение функции — программного кода, выполнение которого может возвращать некоторое значение

На данном этапе следует обратить особое внимание на различия в представлении числовых и строковых (символьных) данных. Числа как данные числового типа всегда представляются без кавычек. Для их написания мы используем цифры и, при необходимости, знак числа и разделительную точку. Строковые данные заключаются в кавычки, двойные «"» или одинарные 4» Например, запись -345.12 представляет число, а запись "-345.12 — строку символов. Это данные различных типов, хотя мы и можем сказать, что их содержанием является одно и то же число. Но это не что иное, как обыденная интерпретация данных или, как еще говорят, семантика (смысл) данных. С точки зрения языка программирования число (точнее, данные числового типа) можно корректно использовать в арифметических операциях, а строки — в строковых операциях. Что означает «корректно использовать»? То, что использование данных в языке программирования должно соответствовать нашим традициям, не связанным с программированием. Например, обращение с числами корректно, если оно подчиняется правилам математики; обращение со строками корректно, если не противоречит правилам редакторской правки текста (вставка, удаление, склейка фрагментов и т. п.). Язык программирования призван обеспечить в той или иной мере выполнение операций, имеющих аналоги в обычной человеческой деятельности. Этой цели служит, в частности, и понятие типов данных.

Заметим, что строкане содержащая ни одного символа (даже пробела), назы

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

Данные логического типа могут иметь одно из двух значений: true или false. Эти значения записываются без кавычек. Значение true означает истину (да), a false - ложь (нет). Обычно эти значения получаются в результате вычисления выражений с использованием операций сравнения двух данных, а также логических операций (И, И Л И, Н Е). Например, результатом вычисления выражения 2 < 3 является, очевидно, значение true (действительно, число 2 меньше числа 3). Логический тип данных называют еще булевским (boolean) в честь английского математика Джона Буля, придумавшего алгебру для логических величин.

Другие типы данных (Null, Object и Function) будут рассмотрены в следующих разделах, после изучения основ языка.

При создании программ на JavaScript за типами данных следит сам программист. Если он перепутает типы, то интерпретатор не зафиксирует ошибки, а попытается привести данные к некоторму типу, чтобы выполнить указанную операцию. Вам следует разобраться, к какому именно типу приводится смесь данных различного типа. Многие языки программирования, в том числе С и Pascal, не обладают этим CJ□ЙСТ1 юм, они требуют явного указания типа данных.

Например, если вЪг напишете выражение 5+"Вася", то результатом его вычисления будет строка символов "5Вася".二я". Таким образом, интерпретатор, столкнувшись с выражением сложения числа и строки символов, переводит число в строку, содержащую это число, а затем выполняет операцию сложения двух строк. Сложение двух строк в JavaScript дает в результате строку, получающуюся путем приписывания второй строки к концу первой.

Результатом вычисления выражения 2+3 будет число 5, а выражения 2+"3" — строка "23", состоящая из двух цифровых символов. Как нетрудно заметить, в случае применения операции сложения к числу и строке символов интерпретатор преобразует число в строку символов и возвращает результат вычисления выражения тоже в виде строки символов. Иначе говоря, в случае смысловой несогласованности типов данных интерпретатор использует некоторые правила их согласования, принятые по умолчанию. В результате могут появиться трудно выявляемые ошибки. С другой стороны, эту особенность языка можно использовать для написания изящных и компактных кодов, соблюдая известную осторожность. Лично мне нравятся языки с так называемыми свободными типами данных.

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

Примерыparselnt(н3.14") parseInt("-7.875") pars£nt(”435”) parseInt("Bacfl") parselnt ("15" ,8)parse!nt ("0xFF",16)Обратите внимание, чтоПримерыparselnt(н3.14") parseInt("-7.875") pars£nt(”435”) parseInt("Bacfl") parselnt ("15" ,8)parse!nt ("0xFF",16)Обратите внимание, чтоФункция parseInt(cipOKa, основание) преобразует указанную в параметре строку в целое число в системе счисления по указанному основанию (8, 10 или 16). Если основание не указано, то предполагается 10, то есть десятеричная система счисления.

Примеры

parselnt(н3.14") parseInt("-7.875") pars£nt(”435”) parseInt("Bacfl") parselnt ("15" ,8)

parse!nt ("0xFF",16)

Обратите внимание, что

Примеры

parselnt(н3.14") parseInt("-7.875") pars£nt(”435”) parseInt("Bacfl") parselnt ("15" ,8)

parse!nt ("0xFF",16)

Обратите внимание, что

// // // // // //// // // // // //результат= 3

// // // // // //

// // // // // //

результат = -7результат=435

результат = NaN, то есть не является числом

результат= 13

результат=255

при преобразовании в целое число округления не проис-

ходит: дробная часть просто отбрасывается.

Функция parseFloat(cipoKa) преобразует указанную строку в число с плавающей разделительной (десятичной, основание) точкой.

Примеры

parseFloat ("3.14")parseFloat(”- 7.875") parseFloat ("435") parseFloat ("Вася") parseFloat ("17.5")parseFloat ("3.14")parseFloat(”- 7.875") parseFloat ("435") parseFloat ("Вася") parseFloat ("17.5")// результат= 3.14

parseFloat ("3.14")

parseFloat(”- 7.875") parseFloat ("435") parseFloat ("Вася") parseFloat ("17.5")

parseFloat ("3.14")

parseFloat(”- 7.875") parseFloat ("435") parseFloat ("Вася") parseFloat ("17.5")

// результат = -7.875

// результат = 435

// результат = NaN, то есть не является числом

// результат = 435

Задача преобразования чисел в строки возникает реже, чем обратное преобразование. Чтобы преобразовать число в строку, достаточно к пустой строке прибавить это число, то есть воспользоваться оператором сложения « + ». Например, вычисление выражения ""+3.14 даст в результате строку "3.14". Об операторах будет подробно рассказано ниже.

Для определения того, является ли значение выражения числом, служит встроенная функция 1$МаМ(значение). Вычисление этой функции дает результат логического типа. Если указанное значение не является числом, функция возвращает true, иначе — false. Однако здесь понятие «число» не совпадает с понятием «значение числового типа». Функции isNaNQ считает числом и данные числового

(true или false).(true или false).типа, и строку, содержащую только число. Логические значения также идентифицируются как числа. При этом значению true соответствует 1,азначению false — 0. Таким образом, если isNaN возвращает false, то это означает, что значение параметра имеет числовой тип, либо является числом, преобразованным в строковый

(true или false).

(true или false).

isNaN(123)

//

результат false (то есть это - число)

isNaN("123")

/*

результат false (то есть это - число, хотя и в виде строки) */

i sNaN ("50 рублей")

//

результат true (то есть это - не число)

isNaN(true)

//

результат false

isNaN(false)

//

результат false

isNaN(MBacflM)

//

результат true (то есть это - не число)

В заключение данного

раздела

рассмотрим так называемые служебные символы

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

,

тип, либо является логическим Примеры

СимволСимвол\п \t \f \Ь\п \t \f \ЬОписание

Символ

Символ

\п \t \f \Ь

\п \t \f \Ь

Новая строка

Табуляция Новая страница

Забой

Возврат каретки

Эти символы обычно используются при формировании строковых данных для их последующего отображения. Например, если мы хотим, чтобы сообщение, выводимое на экран в браузере Internet Explorer с помощью функции alert(), отображалось в виде нескольких строк, то следует использовать служебный символ п\ (рис. 1.9): а!егП"Фамилия - ИвановХпИмя - ИванХпОтчество - Иванович")

Microsoft Inletnel ExptorMicrosoft Inletnel Exptor

Microsoft Inletnel Exptor

Microsoft Inletnel Exptor

仁二 型C二

Рис. 1.9. Окно, создаваемое функцией alertQ, в случае когда строкасообщения содержит два символа п\

Иногда требуется отобразить символы, имеющие служебное назначение. Как, например, отобразить кавычки, если они используются для задания строки символов? Для этой цели используется < - (обратная косая черта). Например, чтобы отобразить строку Акционерное общество "Рога и копыта" вместе с кавычками, следует написать такую строку: "Акционерное общество \" Рога и копыта \"". Обратная косая черта указывает, что следующий непосредственно за ней символ не нужно интерпретировать как символ синтаксиса языка. В нашем примере она показывает, что кавычки не являются признаком начала или окончания строковых дан-

ных, а являются просто элементом этих данных. В Internet Explorer выполнение выражения а1еИ:("Акционерное общество \"Рога и копыта\"") даст результат, показанный на рис. 1.10.

Microsoft Internet Explorer

;..'•'.•••::-'•••"•:;:•!'::-•••.••:::•::••!:^^1，

•4, ••• •

. .. f \ • Ак.ционе|рно© общвсг "Рога и

CZMZ,

Рис. 1.10. Выполнение выражения а!ег1:("Акционерное общество \"Рога и копыта\"")

Заметим, что эту же задачу можно решить и несколько иначе, используя кавычки различных видов (двойные и одинарные). Во-первых, можно написать так: 'Акционерное общество "Рога и копыта"'. В этом случае мы использовали одинарные кавычки в качестве признаков начала и конца всей строки. Во-вторых, можно поменять местами кавычки различных видов: "Акционерное общество 'Рога и копыта'". Однако в этом случае название акционерного общества будет отображаться в одинарных кавычках. Наконец, можно внешние кавычки оставить двойными, а внутренние одинарные кавычки продублировать: "Акционерное общество "Рога и копыта"". Тогда при отображении строки внутренние кавычки будут заменены на двойные.

Неправильное использование кавычек довольно часто вызывает проблемы у новичков.

ВНИМАНИЕ -

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

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

ВНИМАНИЕ

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

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

Что произойдет, если в программе просто написать данные какого-либо типа, например число 314? Интерпретатор выполнит эту запись, разместив ее во внутреннем формате где-то в памяти компьютера. Вот и все. Чтобы сохранять данные в памяти и в то же время оставлять их доступными для дальнейшего использования, в программах используются переменные.

Имена переменных

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

Примеры правильных имен переменных: myFamily, my_adress, _x, tel412_3456.

Примеры неправильных имен переменных: 512group, myadress, tel:412 3456.

При выборе имен переменных нельзя использовать ключевые слова, то есть слова, используемые в определениях конструкций языка. Например, нельзя выбирать слова var, if, else, const, true, false, function, super, switch и ряд других. Список ключевых слов приведен в разделе 1.11. Имя должно отражать содержание переменной. Если имя состоит из нескольких слов, то между ними можно вводить символ подчеркивания или писать их слитно, начиная каждое слово с прописной буквы. Вот примеры: my_first_adress,myFirstAdress. Иногда в качестве первого символа имени используют букву, указывающую на тип данных (значений) этой переменной: с — строковый (character), n — числовой (number), b —логический (boolean), о — объект (object), a — массив (array). Например cAdress, nCena, aMonth.

JavaScript является регистрозависимым языком. Это означает, что изменение регистра символов (с прописных на строчные и наоборот) в имени переменной приводит к другой переменной. Например: variable, Variable и vaRiabLe — различные переменные.

СОВЕТ

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

Создание переменных

Создать переменную в программе можно несколькими способами:

С помощью оператора присвоения значений в формате:

имя_переменной = значение

Оператор присвоения обозначается символом равенства «=».

Пример:

туМате = "Иван"

С помощью ключевого слова var (от variable — переменная) в формате: var имя_переменной

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

Пример:

var myName

myName = "Иван"

• С помощью ключевого слова var и оператора присвоения в формате:

var имя_переменной = значение

Пример

var myName = "Иван"

Строка кода программы с ключевым словом var задает так называемую' инициализацию переменной и для каждой переменной используется один раз. Тип переменной определяется типом значения, которое она имеет. В отличие от многих других языков программирования, при инициализации переменной не нужно описывать ее тип. Переменная может иметь значения различных типов и неоднократно их изменять. Например, вы можете написать следующий код программы: var x = "Иван" // некоторый код х = "Анна" // некоторый код х = 2.5

Одно ключевое слово var можно использовать для инициализации сразу нескольких переменных, как с оператором присвоения, так и без него. При этом переменные и выражения с операторами присвоения разделяются запятыми, например: var name = "Вася", address, x = 3.14

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

Выше мы использовали оператор присвоения значения переменной, обозначаемый символом равенства -- • Не следует путать этот оператор с отношением равенства и соответствующей операцией сравнения. Выражение с оператором «=» интерпретатор вычисляет следующим образом: переменной слева от него присваивается значение, расположенное справа от него.

Если х и у — две переменные, то выражение х = у интерпретируется так: переменной х присваивается значение переменной у. Иначе говоря, переменной можно присвоить значение другой переменной, указав справа от оператора « = » ее имя. Таким образом, к значениям можно получать доступ опосредованно — через имена переменных. В следующих разделах мы узнаем, что справа от оператора присвоения можно писать не только значения и имена переменных, но и целые выражения. В подразделе 1.5.3 будут рассмотрены дополнительные операторы присвоения, такие как +=, -= и т. п.

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

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

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

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

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

Операторы

Операторы предназначены для составления выражений. Оператор применяется к одному или двум данным, которые в этом случае называются операндами. Например, оператор сложения применяется к двум операндам, а оператор логического отрицания — к одному операнду. Элементарное выражение, состоящее из операндов и оператора, вычисляется интерпретатором и, следовательно, имеет некоторое значение. В этом случае говорят, что оператор возвращает значение. Например, оператор сложения, примененный к числам 2 и 3, возвращает значение 5. Оператор имеет тип, совпадающий с типом возвращаемого им значения. Поскольку элементарное выражение с оператором и операндами возвращает значение, это выражение можно присвоить переменной.

Один оператор мы уже рассмотрели в предыдущем разделе. Это оператор присвоения «=». Мы часто будем его использовать. Однако следует заметить, что существует еще пять разновидностей оператора присвоения, сочетающих в себе действия обычного оператора «=» и операторов сложения, вычитания, умножения, деления и деления по модулю. Эти дополнительные операторы присвоения мы рассмотрим позже в подразделе 1.5.3.

Комментарии

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

В JavaScript допустимы два вида операторов комментария:

// — одна строка символов, расположенная справа от этого оператора, считается комментарием;

/*...*/ — все, что заключено между/* и */, считается комментарием; с помощью этого оператора можно выделить несколько строк в качестве комментария.

СОВЕТ

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

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

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

Арифметические операторы, такие как сложение, умножение и т. д., в JavaScript могут применяться к данным любых типов. Что из этого получается, мы рассмотрим немного позже. А сейчас просто перечислим их (табл. 1,2).

Таблица 1.2. Арифметические операторы

Оператор

НазваниеПример

+

СложениеX+Y

三

ВычитаниеX-Y

a

УмножениеX* Y

/ %

ДелениеX/Y

Деление по модулюX%Y

++

Увеличение на 1Х++

—

Уменьшение на 1Y-

Арифметические операторы лучше всего понять на примере чисел. Первые четыре оператора все проходили в начальных классах. Оператор деления по модулю возвращает остаток отделения первого числа на второе. Например, 8%3 возвращает 2. Операторы «++» и «-» сочетают в себе действия операторов соответственно сложения и вычитания, а также присвоения. Выражение Х++ эквивалентно выражению Х+1, а выражение X— эквивалентно выражению Х-1.

Операторы «++» и «--» называют соответственно инкрементом и декрементом.

Символ «-» используется не только как бинарный (для двух операндов) оператор

сложения, но и как унарный (для одного операнда) оператор отрицания для ука-

зания того, что число является отрицательным.

Примеры

у = х = х++

5

у + 3

// // //

значение значение значение

переменной переменной переменной

у х х

равно равно стало

5

8 (5+3) равным

9

(8+1)

X--

//

значение

переменной

х

стало

равным

8

(9-1)

у++ 5-3 -3

// // //

значение переменной

значение равно 2 отрицательное число

у

равно

6 (5+1)

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

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

Примеры

х = " Вася"// значение переменной х равно "Вася"

У = " Маша// значение переменной у равно "Маша"

Z = х ++у// значение переменной z равно "Вася Маша"

Z = х + 5// значение переменной z равно "Васяr5"

п = "20" + 5/* значение переменной п равно "205",

а не 30 или "30" */

Примерыtrue + true true + false true * true true/falsetrue - 5false + 5true * 5 true / 5Примерыtrue + true true + false true * true true/falsetrue - 5false + 5true * 5 true / 5В случае логических данных интерпретатор переводит логические значения операндов в числовые (true в 1, false в 0), выполняет вычисление и возвращает числовой результат. То же самое происходит в том случае, когда один оператор логический, а другой — числовой.

Примеры

true + true true + false true * true true/false

true - 5

false + 5

true * 5 true / 5

Примеры

true + true true + false true * true true/false

true - 5

false + 5

true * 5 true / 5

//возвращает2

// возвращает 1

//возвращает 1

/* возвращает Infinity (Неопределенность, так как на ноль делить нельзя) */

//возвращает 6

//возвращает 5

// возвращает 5

//возвращает 0.2

Примеры"Вася" + true"5" + true"Вася" " truetrue"5" * false"5" / trueПримеры"Вася" + true"5" + true"Вася" " truetrue"5" * false"5" / trueЕсли один операнд строкового типа, а другой — логического, то в случае сложения интерпретатор переводит оба операнда в строковый тип и возвращает строку символов, а в случае других арифметических операторов он переводит оба операнда в числовой тип.

Примеры

"Вася" + true

"5" + true

"Вася" " true

true

"5" * false

"5" / true

Примеры

"Вася" + true

"5" + true

"Вася" " true

true

"5" * false

"5" / true

// возвращает "Bacfltrue"

// возвращает "Strue"

/* возвращает NaN (то есть значение,не являющееся числом) */

// возвращает 5

// возвращает 0

// возвращает 5

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

применяйте арифметические операторы к данным одного и того же типа;

оператор сложения применительно к строкам действует как оператор их склейки (приписывания, конкатенации);

в случае применения арифметических операторов к логическим данным интерпретатор рассматривает значения true и false как числа соответственно 1 и О, и возвращает результат в числовом виде.

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

Дополнительныеоператоры присвоения

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

Оператор

ПримерЭквивалентное выражение

+=

X+-YX = X + Y

X-=YX = X - Y

X*—YX-X*Y

/-

%=X

X/=YX = X/Y

%=YX=X%Y

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

Пример:

х = "Вася"

х+= ", привет" // "Вася, привет"

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

В программах часто приходится проверять, выполняются ли какие-либо условия. Например, на веб-страницах иногда проверяется, является ли браузер пользователя Microsoft Internet Explorer или Netscape Navigator. В зависимости от результата процесс дальнейших вычислений может пойти по тому или другому пути. Проверяемые условия формируются на основе операторов сравнения, таких как «равно», «меньше», «больше» и т. п. Результатом вычисления элементарного выражения, содержащего оператор сравнения и операнды (сравниваемые данные), является логическое значение, то есть true или false. Так, если условие выполняется (верно, справедливо), то возвращается true. В противном случае возвращается false.

ОператорНазваниеПример

РавноX = =Y

[=Не равно X I- Y

продолжение iK

Оператор

Название

Пример

>

Больше, чем

X*Y

>=

Больше или равно (не меньше)

X>=Y

<

Меньше, чем

X<Y

Меньше или равно (не больше)Х

)Х <= Y

ВНИМАНИЕ -

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

Сравнивать можно числа, строки и логические значения. Сравнение чисел происходит по правилам арифметики, а строк — путем сравнения ASCII-кодов символов начиная с левого конца строк. Логические значения сравниваются так же, как ичисла 1 и0 (true соответствует 1, a false — 0). Как видим, с числами и логическими данными все довольно просто. А вот результат сравнения строк не всегда очевиден.

Примеры

"abcd"=="abc"

"abc"=="abcd"

возвращает false

//

возвращает false

"abcd"=="abcd"

//

возвращает true

"abcd"==" abed"

/*

возвращает false (1-й символ 2-го операнда - пробел) */

"abed" > " abed"

//

возвращает true

"abc" < "abed"

//

возвращает true

"235ab" < "abcdxyz"

//

возвращает true

5xyz" < "abc"

〃

возвращает true

Мы не приводим здесь таблицу кодов ASCII для всех символов. Отметим лишь, что некоторые из них упорядочены в порядке возрастания ASCII-кодов следующим образом: сначала идет пробел, затем в порядке возрастания цифры от 0 до 9, символ подчеркивания, латинские и кириллические буквы по алфавиту (сначала прописные, а затем строчные).

Заметим, что операторы сравнения могут быть применены и к разнотипным данным. Если сравниваются строка и число, то интерпретатор приводит операнды к числовому типу. То же самое происходит при сравнении логических данных и числа. Если сравниваются логические данные и строка, то дело обстоит несколько сложнее. В этом случае результат не зависит от содержимого строки. Если она содержит число (но не цифры с буквами), только пробелы или является пустой, то операнды приводятся к числовому типу. При этом пустая строка ( ) или содержащая только пробелы преобразуется в число 0. В остальных случаях все операторы сравнения, кроме :!= *, будут возвращать false (а оператор «!=» — противоположный результат, то есть true).

Примерыfalse < "57"false < "-2.5 true >= "0.5" false < "57ab false > "57abПримерыfalse < "57"false < "-2.5 true >= "0.5" false < "57ab false > "57ab// BOзвращает true// BO звращает false// BOзвращает true// BO звращает falseBO звращает false// BOзвращает true// BO звращает false// BOзвращает true// BO звращает falseBO звращает false

Примеры

false < "57"

false < "-2.5 true >= "0.5" false < "57ab false > "57ab

Примеры

false < "57"

false < "-2.5 true >= "0.5" false < "57ab false > "57ab

// BOзвращает true

// BO звращает false

// BOзвращает true

// BO звращает false

BO звращает false

// BOзвращает true

// BO звращает false

// BOзвращает true

// BO звращает false

BO звращает false

true true

== "true"

!= "true"

// //

возвращает возвращает

false true

true

<= "true"

//

возвращает

false

true

>= "true"

//

возвращает

false

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

Логические данные, обычно получаемые с помощью элементарных выражений, содержащих операторы сравнения, можно объединять в более сложные выражения. Для этого используются логические (булевские) операторы — логические союзы И и ИЛИ, а также оператор отрицания НЕ. Например, нам может потребоваться сформировать сложное логическое условие следующего вида: «возраст не более 30 и опыт работы больше 10, или юрист». В этом примере есть и операторы сравнения, и логические операторы. Выражения с логическими операторами возвращают значение true или false.

Оператор

Название

Пример

Отрицание (НЕ)

!Х

&&

И

X&&Y

II

ИЛИ

X|| Y

Оператор отрицания «! » применяется к одному операнду, изменяя его значение на противоположное: если X имеет значение true, то !Х возвращает значение false, инаоборот, если X имеет значение false, то !Х возвращает значение true.

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

Y

X&&Y

X11Y

true

true

true

true

true

false

false

true

false

true

false

true

false

false

false

false

Операторы «&&» и <<||» еще называют логическим умножением и логическим сложением соответственно. Если вспомнить, что значению true можно сопоставить 1, а значению false — 0, то нетрудно понять, как вычисляются значения элементарных выражений с логическими операторами. Нужно только учесть, что в алгебре логики 1 + 1 = 1 (а не 2). Аналогично оператору отрицания соответствует вычитание из единицы числового эквивалента логического значения операнда. В математике логические операции И и ИЛИ называют соответственно конъюнкцией и дизъюнкцией.

СОВЕТ

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

Примеры

х

= false 1|2*2==4//

значение

переменной

х

равно

true

х

= 5<2 1 | "abed" <="xy"//

значение

переменной

х

равно

true

у

= !х//

значение

переменной

у

равно

false

z

= х && У//

значение

переменной

z

равно

false

z

= х |1Уи

значение

переменной

z

равно

true

Сложные логические выражения, состоящие из нескольких более простых, соединенных операторами И и ИЛИ, выполняются по так называемому принципу короткой обработки. Дело в том, что значение всего выражения бывает можно определить, вычислив лишь одно или несколько более простых выражений, не вычисляя остальные. Например, выражение х&&у вычисляется слева направо; если значение х оказалось равным false, то значение у не вычисляется, поскольку и так известно, что значение всего выражения равно false. Аналогично если в выражении х 11 у значение х равно true, то значение у не вычисляется, поскольку уже ясно, что все выражение равно true. Данное обстоятельство требует особого внимания при тестировании сложных логических выражений. Так, если какая-нибудь составная часть выражения содержит ошибку, то она может остаться невыявлен- ной, поскольку эта часть выражения просто не выполнялась при тестировании.

Операторы условного перехода

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

Оператор if

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

Синтаксис оператора if перехода следующий:

if (условие)

{ код, который выполняется, если условие выполнено} else

{ код, который выполняется, если условие не выполнено}

В фигурных скобках располагается блок кода — несколько выражений. Если в блоке используется не более одного выражения, то фигурные скобки можно не писать. Часть этой конструкции, определяемая ключевым словом else (иначе), необязательна. В этом случае остается только часть, определенная ключевым словом if (если):

if (условие)

{ код, который работает, если условие выполнено}

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

Примеры

Выводится диалоговое окно с тем или иным сообщением в зависимости от значения переменной age (возраст).

ififelseelse(age<18){alertC'Bbi слишком молоды для просмотра этого(age<18){alertC'Bbi слишком молоды для просмотра этого{alert("Подтвердите свое решение заглянуть на{alert("Подтвердите свое решение заглянуть насайта")}этот сайт")}сайта")}этот сайт")}

if

if

else

else

(age<18)

{alertC'Bbi слишком молоды для просмотра этого

(age<18)

{alertC'Bbi слишком молоды для просмотра этого

{alert("Подтвердите свое решение заглянуть на

{alert("Подтвердите свое решение заглянуть на

сайта")}

этот сайт")}

сайта")}

этот сайт")}

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

2.

2.

аде меньше 18.

if (age<18)

{alertC'Bbi слишком молоды для просмотра этого сайта")}

Делать ли отступы при написании операторов, где располагать фигурные скобки — дело вкуса. Следует руководствоваться наглядностью и ясностью структуры, при которой легко проверить правильность расстановки скобок. Кроме описанного выше способа, часто встречается еще и такой:

if (условие) { код. который работает, если условие выполнено } else { код, который работает, если условие не выполнено

Возможно, этот способ записи лучше отражает структуру оператора условного перехода.

Более сложная структура оператора условного перехода получается при вложении других операторов if:

if (условие!) {

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

} else { if (условие2) {

код, который работает, если условие2 выполнено }else{ код, который работает, если условие2 не выполнено }

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

Допустим, что переменная х содержит данные, которые ввел пользователь, и нам требуется проверить, что он действительно что-то ввел. В следующем примере мы проверяем, что значение переменной х не пусто (не 0, не пустая строка "" и не null). Если х пусто, то выводится соответствующее сообщение:

if (!х){

alertC'Bbi ничего не ввели")

}

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

if (!x) alertC'Bbi ничего не ввели")

Оператор switch

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

Синтаксис оператора switch выглядит следующим образом:

switch (выражение) { case вариант!:

код

[break]

case вариант2:

код

[break]

[default:

код]

}

Параметр выражение оператора switch может принимать строковые, числовые и логические значения. Разумеется, в случае логического выражения возможны только два варианта. Ключевые слова (операторы) break и default не являются обязательными, что отражено с помощью прямоугольных скобок. Здесь они являются элементами описания синтаксиса, и при написании операторов их указывать не нужно. Если оператор break указан, то проверка остальных условий не производится. Если указан оператор default, то следующий за ним код выполняется, если значение выражения не соответствует ни одному из вариантов. Если все варианты возможных значений предусмотрены в операторе switch, то оператор default можно не использовать.

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

Пример

, х = 2

switsch (x) { case 1: alert(l) case 2:

alert(2) case 3:

alert(3)

}

В приведенном примере сработают 2-й и 3-й варианты. Если мы хотим, чтобы сработал только один какой-нибудь вариант (только тот, который соответствует значению выражения), то нужно использовать оператор break.

Пример

х = 2 switsch (x) { case 1:

alert (l) ;

break case 2:

alert(2);

break case 3: alert(3) ; break

}

В этом примере сработает только 2-й вариант.

Пример

Допустим, переменная xlang содержит название языка, который выбрал пользователь и ввел в поле формы. Тогда возможен такой вариант применения оп юрато- pa switch:

switsch (xlang) {

case "английский" :

window.open ("engl.htm");

break

case "французский":

window.open ("french .htm") ;

break

case "немецкий" :

window.open("german.htm") ;

break

default:

alert(”y нас нет документа на таком языке")

/

Здесь выражение window.openQ открывает новое окно браузера и загружает в него указанный в скобках HTML-документ. Заметим, что эту же задачу можно решить и с помощью вложенных операторов if:

if (xlang == "английский") window. open ("engl .htm") else {

if (xlang == "французский") window. open ("french .htm") ;

else {

if (xlang == "немецкий") window.open ("german.htm") /else

alertC'V нас нет документа на таком языке");

Для тренировки перепишем приведенный выше код в другом виде:

if (xlang == "английский") window.open("engl.htm")

else { if (xlang == "французский") window. open("f rench. htm") else { if (xlang == "немецкий") wi ndow. open ("german . htmn"> else aler tC'Yнас нет документа на таком языке")

}

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

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

Оператор for

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

for ( [начальное выражение] ; [условие] ; [выражение обновления] )

{

код

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

for([начальноевыражение];[условие];[выражениеобновления]) {

код

}

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

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

Оператор цикла работает следующим образом. Сначала выполняется начальное выражение. Затем проверяется условие. Если оно выполнено, то оператор цикла прекращает работу (при этом код не выполняется). В противном случае выполняется код, расположенный в теле оператора for, то есть между фигурными скобками. После этого выполняется выражение обновления (третий параметр оператора for). Таким образом, заканчивается первый цикл или, как еще говорят, первая итерация цикла. Далее снова проверяется условие, и все повторяется описанным выше способом.

Обычно в качестве начального выражения используют оператор присваивания значения переменной. Например, i = 0илиvar i = 0. Имя переменной и присваиваемое значение могут быть любыми. Эту переменную называют счетчиком циклов. В этом случае условие, как правило, представляет собой элементарное выражение сравнения переменной счетчика циклов с некоторым числом, например, ie •пМах, Выражение обновления в таком случае просто изменяет значение счетчика циклов, например i i + 1 или, короче, i++.

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

for (i = 1 ; i <= 15; i++) {}

Немного модифицируем этот код, чтобы вычислить сумму всех целых положительных чисел от 1 до 15:

var s=l

for (i = 1 ; i <= 15; i++) { s = s + i

}

Заметим, что счетчик циклов может быть не только возрастающим, но и убывающим.

Пример

Допустим, требуется вычислить х в степени у, где х, у — целые положительные числа. Алгоритм решения этой задачи прост: надо вычислить выражение х*х*х* ... х, в котором сомножитель х встречается у раз. Очевидно, что если у не превышает 10, то можно воспользоваться оператором умножения: выражение будет не очень длинным. А как быть в том случае, когда у равно нескольким десяткам или сотням? Ясно, что в общем случае следует воспользоваться оператором цикла:

/* Вычисляем х в степени у */

var z = х〃 z хранит результат

for (i = 2 ; i <= у ; i++) { z=z*x

}

В этом примере результат сохраняется в переменной z. Начальное ее значение равно х. Если у равно 1, то оператор цикла не будет выполняться, поскольку не выполняется условие 2 <= 1 (обратите внимание на начальное значение счетчика циклов), — и, следовательно, мы получим верный результат: х в степени 1 равно х. Если у равно 2, то оператор цикла выполнит одну итерацию, вычислив выражение z = z*x при z, равном х (то есть z = х*х). При у, равном 3, оператор цикла сделает две итерации. На второй, последней итерации выражение z = z*x вычисляется при текущем значении z, равном х*х, и, следовательно, становится равным х*х*х (то - есть х в степени 3).

Пример

Рассмотрим довольно традиционный при изучении операторов цикла пример вычисления факториала числа. Факториал числа п в математике обозначают как п!. Для п, равного 0 и 1, п! равен 1. В остальных случаях п! равен 2*3*4* ... *п. Поскольку возможны два варианта исходных данных, нам потребуется использовать оператор условного перехода. Код, решающий эту задачу, выглядит следующим образом:

/* Вычисляем п! */

var z = 1/I г хранит результат п!

if (n >1) {

for (1 = 2 : 1 <= п z=z*i

}

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

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

for ( [начальное выражение] ; [условие!] ; [выражение обновления] )

{

код

i f (условие2){

КОД break } код

Для управления вычислениями в операторе цикла можно также использовать оператор continue (продолжение). Также, как и break, этот оператор применяется в теле оператора цикла вместе с оператором условного перехода. Однако, в отличие от break, оператор continue прекращает выполнение последующего кода, выполняет выражение обновления и возвращает вычислительный процесс в начало оператора цикла, где производится проверка условия, указанного в заголовке. Типовая структура оператора цикла с использованием break имеет следующий вид: for ( [начальное выражение] ;[условие!] ; [выражение обновления] )

{

код

if (условие2){ код continue

} код

Оператор while

Оператор цикла while (до тех пор, пока) имеет структуру более простую, чем оператор for, и работает несколько иначе. Синтаксис этого оператора следующий: while ( условие ) г

код

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

Если сравнивать оператор while с оператором for, то особенность первого заключается в том, что выражение обновления записывается в теле оператора, а не в заголовке. Часто забывают указать это выражение, и в результате цикл не завершается (программа «зависает»).

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

Пример

Возведение х в степень у.

// z хранит результат// z хранит результат/* Вычисляем х в степени у */ var z = х

// z хранит результат

// z хранит результат

i = 2

while (i = 2) { z z*x

i++

Пример

Вычисление п!.

/* Ввычисляем п! */

var z = 1// z хранит результат п!

if (n >1) {

i = 2

while ( i <= n ) { z = z*i

!l

]

Во всех приведенных выше примерах использовался счетчик циклов. Однако он инициировался заранее, до оператора цикла. Обновление значения этого счетчи-

ка производилось в теле оператора цикла.

Для управления вычислительным процессом в операторе while, также как и в операторе for, можно использовать операторы прерывания break и продолжения continue.

ВНИМАНИЕ

Если в while вы используете счетчики циклов, то будьте осторожны, применяя break и continue.

Оператор do-while

Оператор do-while (делай до тех пор, пока) представляет собой конструкцию из двух операторов, используемых совместно. Синтаксис этой конструкции следующий:

do {

код

.1

while (условие)

В отличие от оператора while в операторе do-while код выполняется хотя бы один раз, независимо от условия. Условие проверяется после выполнения кода. Если оно истинно, то снова выполняется код в теле оператора do. В противном случае работа оператора do-while завершается. В операторе while условие проверяется в первую очередь, до выполнения кода в теле. Если при первом обращении к оператору while условие не выполняется, то код не будет выполнен никогда.

Рассмотрим несколько примеров решения задач, которые мы уже решали ранее с использованием операторов цикла for и while.

Пример

Возведение х в степень у.

/* Вычисляем х в степени у */

var z = хz хранит результат

i = 2 do{

z=z*x

}

while (i <= y)

Пример

Вычисление п!.

/* Вычисляем п! */

var z = 1// z хранит результат п!

if ((n >1) { i = 2 do { z=z*i

}

while ( i <= n )

Выражения с операторами

Выше неоднократно встречались термины «выражение» и «элементарное выражение». Вы, должно быть, уже составили себе некоторое представление о том, что такое выражение. Тем не менее уточним его.

Начнем с того, что просто данные (конечные значения) являются выражениями языка. Например, число 5.2, одиноко стоящее в строке текста программного кода, является выражением. Последовательность символов, заключенная в кавычки (например, "Вася"), — тоже выражение. Имя переменной — еще один вариант выражения.

Запись, содержащая имя переменной, за которой следуют символы оператора присвоения и некоторое значение (например, х = "Привет всем!"), является выражением JavaScript. Запись, состоящая из операндов и оператора (например, х + 5), также является выражением.

Все перечисленные выше варианты выражения назовем элементарными выражениями. Тогда записи, содержащие операторы и операнды в виде элементарных выражений, являются выражениями. Например, пусть имеются два элементарных выражения: х+5 и у-3. Тогда запись х+5 + у-3, объединяющая их оператором сложения, является выражением. Это касается не только арифметических операторов, но и всех других.

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

ВНИМАНИ Е -

Среди арифметических операторов наибольшим приоритетом обладают операторы умножения и деления (в том числе и деления по модулю). Затем следуют сложение и вычитание. Среди логических операторов наибольшим приоритетом обладает отрицание, затем следует логическое И, а дальше — логическое ИЛИ. Операторы сравнения по приоритету выше логических операторов. Последовательность операторов с одинаковым приоритетом выполняется слева направо.

Примеры2 + 3*52 <3 || 3 <12 <3 || 3 <1 && false! 2 <3 | | 3 <1 && falseПримеры2 + 3*52 <3 || 3 <12 <3 || 3 <1 && false! 2 <3 | | 3 <1 && false// результат равен 17, а не 25// результатравен true// результатравен true// результатравен false// результат равен 17, а не 25// результатравен true// результатравен true// результатравен false

Примеры

2 + 3*5

2 <3 || 3 <1

2 <3 || 3 <1 && false

! 2 <3 | | 3 <1 && false

Примеры

2 + 3*5

2 <3 || 3 <1

2 <3 || 3 <1 && false

! 2 <3 | | 3 <1 && false

// результат равен 17, а не 25

// результатравен true

// результатравен true

// результатравен false

// результат равен 17, а не 25

// результатравен true

// результатравен true

// результатравен false

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

ВНИМАНИ Е -

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

Примеры

2 +

3 *

5

//

результат

равен

17

(2

+ 3)

* 5

//

результат

равен

25

((2

+3)

+ 4*5)/2

//

результат

равен

12.5

(2

+ 3)

+ 4*5/2

//

результат

равен

15

2 +

3 +

4*5/2

//

результат

равен

15

(2

+ 3 +н 4)*5/2

//

результат

равен

22.5

2 •+

• (з

+ 4*5)/2

/II

результат

равен

13.5

(2

+ (3

+ 4)*5)/2

//

результат

равен

18.5

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

Пример

if (!x){x = "Вы ничего не ввели"; alert (x) }else alert("Bce в порядке") Операторы условного перехода и цикла возвращают значения подобно другим операторам, а именно возвращают значение последнего выполненного выражения. Сводные сведения о приоритетах всех операторов приведены в разделе 1.10 в конце данной главы.

Функции

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

В JavaScript есть встроенные функции, которые можно использовать в программах, но код которых нельзя редактировать или посмотреть. Все, что мы можем узнать о них, — это описание ихдействия, параметров и возвращаемого значения. Кроме использования встроенных функций вы можете создать свои собственные, так называемые пользовательские функции. Часто используемые фрагменты программного кода целесообразно оформлять в виде функций. Такой фрагмент кода заключается в фигурные скобки, а перед ним пишется ключевое слово function, за которым следуют круглые скобки, обрамляющие список параметров. Более подробно пользовательские функции будут рассмотрены в подразделе 1.6.2.

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

имя_функции (параметры)

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

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

В JavaScript имеются нижеследующие встроенные функции (некоторые из них мы уже рассматривали ранее). Хотя для иллюстрации работы этих функций приводится множество примеров, желательно выполнить их самим, а также придумать свои примеры, обращая внимание на крайние (даже абсурдные) случаи. parselnt(poi<a, основание) — преобразует указанную строку в целое число в системе счисления по указанному основанию (8,10 или 16); если основание не указано, то предполагается 10, то есть десятеричная система счисления.

parselnt("2. 5") parselnt(u-17.875") раг5е1п1("1952и)parselnt(M150 руб.")parselnt(”цена 150 руб.")parselnt("2. 5") parselnt(u-17.875") раг5е1п1("1952и)parselnt(M150 руб.")parselnt(”цена 150 руб.")// // // // //// // // // //результат = 2результат = 2Примеры

parselnt("2. 5") parselnt(u-17.875") раг5е1п1("1952и)

parselnt(M150 руб.")

parselnt(”цена 150 руб.")

parselnt("2. 5") parselnt(u-17.875") раг5е1п1("1952и)

parselnt(M150 руб.")

parselnt(”цена 150 руб.")

// // // // //

// // // // //

результат = 2

результат = 2

результат = -17 результат = 1952 результат = 150 результат = NaN

parseFloat(cTpOKa, основание) — преобразует указанную строку в число с плавающей разделительной (десятичной) точкой в системе счисления по указанному основанию (8,10 или 16); если основание не указано, то предполагается 10, то есть десятеричная система счисления.

ПримерыparseFloat(и2.5м)parseFloat (••-17.875")ПримерыparseFloat(и2.5м)parseFloat (••-17.875")// результат = 2.5// результат = -17.875// результат = 2.5// результат = -17.875

Примеры

parseFloat(и2.5м)

parseFloat (••-17.875")

Примеры

parseFloat(и2.5м)

parseFloat (••-17.875")

// результат = 2.5

// результат = -17.875

// результат = 2.5

// результат = -17.875

parseFloat ("1952")

//

результат =

1952

pareseFloat(,,1.50pxH)

//

результат

=1.5

pareseFloat("двести")

// 1

результат =

NaN

isNaN (значение) — возвращает true, если указанное в параметре значение не явля-

ется числом, иначе — false.

Примеры

isNaN(123)

//

результат

false

i sNaN (" 123" )

//

результат

false

isNaN("Ten. 1234567")

//

результат

true

isNaN("35 px”)

//

результат

true

isNaN(true)

//

результат

false

isNaN(false)

//

результат

false

isNaN("Bacfl")

//

результат

true

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

eval(cTpoKa)—вычисляетвыражениевуказаннойстроке;выражениедолжнобыть написано на языке JavaScript (не содержит тегов HTML).

Примеры

var у = 5// значение у равно 5

var х = "if(y<10) {у = у+2}"// значение х равно строке символов

eval(x)// значение у равно 7

Другой пример применения функции evalQ можно найти в начале данной главы. Это — создание веб-страницы, содержащей текстовое поле для ввода и выполнения выражений JavaScript. Вот текст соответствующего HTML-кода со сценарием, содержащим функцию eval():

<HTML>

<TEXTAREA ID = "mycode" ROWS = 10 COLS = 60></TEXTAREA>

<TEXTAREA ID = "myrezult" ROWS = 3 COLS = 60></TEXTAREA>

<P>

- <BUTTON onclick ="document.all.myrezult.value=eval(mycode.value)" > Выполнить </BUTTON>

<BUTTON1ПСonclick="document.all.mycode.value='';

document.all.myrezult.value=''">

Очистить</ BUTTON >

<P>

</HTML>

Здесь сценарии записаны в виде символьных строк в качестве значений атрибутов onclik, определяющих событие щелчок кнопкой мыши на HTML-кнопках, которые заданы тегами <button>.

escape(crpoKa) — возвращает строку в виде %ХХ, где XX — ASCII-код указанного символа; такую строку еще называют escape-последовательностью.

unescape(crpoKa) — осуществляет обратное преобразование.

При взаимодействии браузеров и серверов протоколы передачи данных позволяют передавать не все символы в их естественном виде. Для передачи остальных символов используются их шестнадцатеричные ASCII-коды, перед которыми указывается символ « %». Например, пробел представляется в escape-последовательности как %20.

Примеры

escape(" How do you do")// значение равно "How%20do%20you%20do“

езсареС'Привет") /* значение равно

%u041F%u0440%u0438%u0432%u0435%u0442 */

Другие примеры применения функций escape() и unescapeQ приведены в разделе 2.8 (глава 2).

typeOf(c'бъекt) — возвращает тип указанного объекта в виде символьной строки,; например "boolean", "function" и т. п.

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

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

function имя_функции(параметры) !

[ код

J

Часто определение функции записывают и в таких формах: function имя_функции(параметры) {

код

}

funct ion имя_функции(параметры) { код }

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

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

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

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

Пример

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

function Srectangle(width, height){

S = width * height return S

}

Здесь сначала вычисляется площадь путем умножения значений параметров width и height, полученное значение присваивается переменной S,азатем оператор return возвращает значение этой переменной.

Определение функции Srectangle можно сделать более экономным, минуя присвоение значения переменной S:

function Srectangle(width, height){

return width * height

}

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

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

ВНИМАНИЕ -

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

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

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

Примеры

Srectangle(3 , 5)

Примеры

Srectangle(3 , 5)

/* возвращает площадь прямоугольника размером 3x5 */

Srectangle(3. 4+2)/* возвращает площадь прямоугольникав

размером 3x6 */

height = 8

Srectangle(3. height)/* возвращает площадь прямоуго>пьника

размером 3x8 */

width=4

height=5

Srectangle(widt, height + 2)/* возвращает площадь прямоуго>л ьника

размером 4x7 */

Srectangle(2)/* возвращает 0 (второй параметр

не задан) */

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

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

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

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

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

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

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

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

Примеры

Переменная S определена только в теле функции, но продолжает существовать во внешней программе:

function Srectangle(width, height){

5 = width * height return S

z = Srectangle(2, 3)/* значения и z и S равны б;

S - глобальная переменная */

Переменная 5 определена во внешней программе, но используется в теле функции:

function Srectangle(width, height) {

S = width * height

return 5

}= 2

z = Srectangle(2, 2, 3)/* значение z равно 6,

а значение 5 осталось равным 2, то есть значению глобальной переменной; определенной во внешней программе */

. То же, что и в примере 2, но с использованием ключевого слова van

function Srectangle(width, height){

var 5 = width * height

return S

I

var S =2

z = Srectangle(2, 3)/* значение z равно 6,

а значение S осталось равным 2, то есть значению глобальной переменной, определенной во внешней программе */

Исключительно локальные переменные:

function Srectangle(width, height){

var S = width * height

var x =17

return S

}

z = Srectangle(2,3) 3)/* значение z равно 6;

переменная S во внешней программе

не определена;

переменная х во внешней программе не определена */

Имена параметров в определении функции совпадают с именами параметров во внешней программе и с параметрами в вызове функции:

function Srectangle(width, hei ght) {

var s = width * height

width = width + 10// изменяем значение параметра width

return s

I

width = 2

height = 3

z = Srectangle(width, height)/* значение z равно 6;

значение переменной width равно 2, то есть осталось без изменений */

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

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

Пример

Функция вычисления факториала п! с помощью оператора цикла.

В предыдущем разделе, посвященном операторам цикла, мы рассматривали программный код вычисления факториала числа п. Напомним, что факториал целого положительного числа п в математике обозначают как п! и вычисляют по формуле: 1*2*3*.*3*.. *п,если п<=1. Для п=0 и п=1 п!=1. В этом примере программу вычисления п! мы оформим в виде функции:

function factorial(n){

if(n <= 1) return 1

rezult =2// result - переменная для результата

for (i = 3; i< = n; i++) {

rezult = rezult*i

}

return result

Для вычисления факториала конкретного числа, например 12, следует записать выражение factorial(12).

Если в нашей программе определена описанная выше функция factorialQ,то в этой же программе возможен такой фрагмент, содержащий вызов этой функции:

var m = 10

х = factorial(m)// значение х равно 3628800

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

Пример

Функция вычисления факториала п! с помощью рекурсии.

function f actorial(n) { if(n <= 1){ return 1

}

return г•factorial(n-1)// вызов функции factorial()

}

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

function factorial(n){ if(n <= 1) return 1 return n*factorial (n-1)// вызов функции factorial O

СОВЕТ

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

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

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

Выражения с функциями

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

Примеры

Пусть Srectangle(width, height) — функция, возвращающая значение площади прямоугольника со сторонами width и height. Тогда для вычисления площади прямоугольного треугольника с катетами а и b можно использовать следующее выражение:

S3 = 0.5* Srectangle(a, b)

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

Вызов функции может использоваться в логических выражениях:

if (Srectangle(a, b) > Srectangle(c, d)) alert("Первый прямоугольник больше второго")

В качестве параметра функции может указываться вызов другой функции: var х = "25px“ var у = 12

var S = Srectangle(parselnt (x) , у)

В выражениях с вызовами функций последние имеют наивысший приоритет.

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

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

свойств объектов HTML-документа и самого браузера. Эти вопросы мы отложим до следующих глав.

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

Чтобы узнать значение свойства объекта, необходимо указать имя этого объекта и имя свойства, отделив их друг от друга точкой: им?избъекта.свойство. Заметим, что объект может и не иметь свойств.

Мы можем заставить объект выполнить тот или иной присущий ему метод. В этом случае также говорят о применении метода к объекту. Синтаксис соответствующего выражения такой: имя_объекта.метод(параметры). Заметим, что объект может не иметь методов.

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

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

В JavaScript математические вычисления, сложная обработка строк и дат, а также создание массивов производятся с помощью соответствующих встроенных объектов. Для разработчиков веб-сайтов особенно важны объекты String (обработка строк), Array (массивы), Math (математические формулы и константы) и Date (работа с датами). Обратите на них особое внимание.

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

щие конкретные данные, к которым применимы все общие методы и свойства статического объекта Array.

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

Объект String (Строка)

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

С помощью объекта String можно создать строку как строковый объект. Однако в подавляющем большинстве случаев для этого достаточно использовать обычную переменную и оператор присвоения строкового значения. В этом случае интерпретатор все равно создает экземпляр (копию) строкового объекта, свойства и методы которого доступны из программного кода.

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

Для создания строкового объекта используется выражение следующего вида: имя_переменной = new String("строковое_значение")

Здесь имя_переменной выполняет роль ссылки на строковый объект. Например, выражение mystring = new 5Ыпд("Привет!") создает строковый объект mystring со значением "Привет!".

Однако можно создать строковый объект и с помощью обычного оператора присвоения:

имя_переменной = "строковое_значение"

или

var имя_переменной = "строковое_значение"

Доступ к свойствам и методам строкового объекта обеспечивается такими выражениями:

строка.свойство

String.свойство

строка.метод([параметры])

String.метод( [параметры])

Некоторые методы могут и не иметь параметров, что указано с помощью квадрат-_ ных скобок. Здесь строка может быть ссылкой на строковый объект, строковой переменной, выражением, возвращающим строку, а также просто строковым зна-

чением.

Когда используется ключевое слово String в качестве имени объекта, это означает, что нас интересуют свойства и методы статического строкового объекта, то есть общие свойства и методы, не связанные, вообще говоря, с конкретными свойствами и методами конкретного строкового объекта (экземпляра объекта String).

Ниже приведены три различных способа использования свойства length строкового объекта, значением которого является длина строки (количество символов в строке).

mystring = "Однажды в студеную зимнюю пору"

mystring.length// значение равно 30

"Однажды в студеную зимнюю пору".length // значение равно 30

function fstringO{return "abcde"}/* функция, возвращающая

строку "abcde" */

fstringO.length //значение равно 5

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

Свойства String

length — длина или, иными словами, количество символов (включая пробелы) в строке; целое число.

Пример

•'Иван" .length// значение равно 4

"ПриветХпвсем". length /* значение равно 11

(\п - один символ перевода строки) */

х = ""// пустая строка

length// значение равно 0 (пустая строка имеет длину 0)

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

Пример

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

function myFuncO () {// функция для нового метода

return "Вадим"

I

// Добавление нового метода myName к прототипу:

String.prototype.myNameO = myFunc

mystring = "Автор этой книги - " + "Дунаев ".myNameO

/* значение mystring

равно "Автор этой книги - Дунаев Вадим" */

Методы String обработки строк

charAt(nHfleKc) — возвращает символ, занимающий в строке указанную позицию.

Синтаксис: строка.с1пагА1(индекс)

Возвращает односимвольную или пустую строку.

Параметр (индекс) является числом, индекс первого символа равен 0.

Примеры

•'Привет" .charAt (2>// значение равно "и"

•'Привет'* .charAt (15)// значение равно "

mystring = "Привет"

mystring.charAt (mystring.length-1)/* значение последнего символа

равно "т" */

charCodeAt([MHfleKc]) — преобразует символ в указанной позиции строки в его числовой эквивалент (код).

Синтаксис: строка. сИагСойеАЩиндекс])

Возвращает число.

IE4+ и NN6 поддерживают систему кодов Unicode , NN4 — ISO-Latin 1.

Примеры

*'abc " . charCodeAtO

//

значение

равно

97

"a be " . charCodeAt(l)

//

значение

равно

98

"abc" . charCodeAt(25)

//

значение

равно

NaN

" . charCodeAt (25)5)

//

значение

равно

NaN

"я". charCodeAt(0)

//

значение

равно

1103

3. fromCharCode(HOMepl [, номер2 [, .

.. номерМ]]) — возвращает строку символов

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

Синтаксис: String.fromCharCode(HOMepl [, номер2 [,... номерМ]])

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

IE4+ и NN6 поддерживают систему кодов Unicode, NN4 — ISO-Latin 1.

Пример

String.fromCharCode(97.98.1102)// значение равно "аЬю"

concat(crpoKa) — конкатенация (склейка) строк.

Синтаксис: строка!.с опса1(строка2)

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

Этот метод действует так же, как и оператор i > сложения для строк: к строке строка! приписывается справастрока2.

Примеры

^Иван1* .concat (••Иванов1')// значение равно "ИванИванов"

х = "Федор" + "// значение х равно "Федор "

x.concat С'Иванов")// значение равно "Федор Иванов"

indexOf(cTpoKa_noMCKa [, индекс]) — производит поиск строки, указанной параметром, и возвращает индекс ее первого вхождения.

Синтаксис: строка.1пс1ехОт(строка_поиска [, индекс])

Возвращает число.

Метод производит поиск позиции первого вхождения строка_поиска в строку строка. Возвращаемое число (индекс вхождения) отсчитывается от 0. Если поиск не удачен, то возвращается -1. Поиск в пустой строке всегда возвращает -1. Поиск пустой строки всегда возвращает 0.

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

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

Примеры

х ="Во первых строках своего письма

x.indexOf(ипервыхм)

//значение равно 3

x.i ndexOf("первых строках")

//значение равно 3

х.indexOf("вторых строках")

//значение равно -1

x.indexOf(ИВ")

//значение равно 0

х.indexOf ("в")

//значение равно 6

х.indexOf("в" , 7)

//значение равно 19

x.indexOf(M “)

//значение равно 2

x.indexOf(H *' , 5)

//значение равно 9

x. i ndexOf ('*w)

//значение равно 0

LastIndexOf(cTpoKa_noHCKa [, индекс]) — производит поиск строки, указанной параметром, и возвращает индекс ее первого вхождения; при этом поиск начинается с конца исходной строки, но возвращаемый индекс отсчитывается от ее начала, то есть от 0.

Синтаксис: строка.LastIndexOf(crpoKa_noMCKa [, индекс])

Возвращает число. Метод аналогичен рассмотренному выше indexOfQ и отличается лишь направлением поиска.

Примеры

х ="Во первых строках своего письма"

x.1astlndexOf("первых")//значениеравно3

x. lastlndexOf("a")//значениеравно30

x.indexOf(HaM)//значениеравно15

1оса1еСотраге(строка) —позволяет сравниватьстроки вкодировке Unicode, то

есть с учетом используемого браузером языка общения с пользователем.

Синтаксис: строка!.1оса1еСотраге(строка2)

Возвращает число. Совместимость: IE5.5+, NN6+.

Если сравниваемые строки одинаковы, метод возвращает 0. Если строка! меньше, чем строка2, то возвращается отрицательное число, в противном случае - положительное. Сравнение строк происходит путем сравнения сумм кодов их символов. Абсолютное значение возвращаемого числа зависит от браузера. Так, IE5.5 и IE6.0 возвращают 1 или -1, a NN6 — разность сумм кодов в кодировке Unicode.

зИсе(индекс1 [,индекс2]) —возвращает подстроку исходной строки, начальный и конечный индексы которой указываются параметрами, за исключением последнего символа.

Синтаксис: строка.$Нсе(индекс1 [, индекс2])

Возвращает строку. Данный метод не изменяет исходную строку.

Если второй параметр не указан, то возвращается подстрока с начальной позицией индекс! и до конца строки. Отсчет позиций начинается с начала строки. Первый символ строки имеет индекс 0. Если второй параметр указан, то возвращается подстрока исходной строки начиная с позиции индекс! идо позиции

индекс2, исключая последний символ. Если второй параметр отрицателен, то отсчет конечного индекса производится от конца строки. В этом заключается основное отличие метода slice() от substr(). Сравните также этот метод с методом substringQ.

Примеры

х = "Во первых строках своего письма"

x.slice(3.8)//значение равно"первы"

x.slice(3.-2)//значение равно"первыхстрокахсвоего пись

// значение равно 4// значение равно ”mumu”// значение равно "gerasim// значение равно"gerasim// значение равно 4// значение равно ”mumu”// значение равно "gerasim// значение равно"gerasim/* Анализ адреса электронной почты */ х = "mumuisigerasim.ru"

// значение равно 4

// значение равно ”mumu”

// значение равно "gerasim

// значение равно"gerasim

// значение равно 4

// значение равно ”mumu”

// значение равно "gerasim

// значение равно"gerasim

i = х. indexOf ("@") _name = x.slice(0, i)

_domen = x.slice(i + l, х. indexOf (".")) )

_domen = х.slic e(i+l, -3)

зрЩразделитель [, ограничитель]) — возвращает массив элементов, полученных из исходной строки.

Синтаксис: строка.зрЩразделитель [, ограничитель]) Возвращает массив.

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

Если разделитель — пустая строка, то возвращается массив символов строки.

Примеры

х = "Привет всем"

x.split(" ”)/*значение-массив из элементов:"Привет", "всем" */

x.split("ew) /*значение-массив из элементов:"Прив", "т вс", "м"*/

x.split(HeH.2) /*значение-массив из элементов:"Прив", "т вс" */

substr(nHfleKC [, длина]) — возвращает подстроку исходной строки, начальный индекс и длина которой указываются параметрами.

Синтаксис: строка.substr(nHfleKc [, длина])

Возвращает строку. Данный метод не изменяет исходную строку.

Если второй параметр не указан, то возвращается подстрока с начальной позицией индекс! и до конца строки. Отсчет позиций начинается с начала строки. Первый символ строки имеет индекс 0. Если второй параметр указан, то возвращается подстрока исходной строки начиная с позиции индекс 1 и с общим количеством символов, равным длина. Сравните этот метод с методами sliceQ и substringQ.

Примеры

х = "Привет всем"

x.substr(7,4)// значение равно "всем"

/* Анализ адреса электронной почты */

х = "mumu@gerasim.ru"

4"mumu""gerasim.ru4"mumu""gerasim.rui = х.indexOf("@") ,@”)// значение равно

4

"mumu"

"gerasim.ru

4

"mumu"

"gerasim.ru

_name = x.substr(0, i)// значение равно

_domen = x.substr(1+1)// значение равно

substring(MHfleKd, индекс2) — возвращает подстроку исходной строки, начальный и конечный индексы которой указываются параметрами.

Синтаксис: CTpoKa.substring(MHfleKCl, индекс2)

Возвращает строку. Данный метод не изменяет исходную строку.

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

Примеры

х = "Привет всем"х.substring(0 , 6)x. substring(7, х. length)х. substring(7, 250)х.substring(250, 7)х = "Привет всем"х.substring(0 , 6)x. substring(7, х. length)х. substring(7, 250)х.substring(250, 7)// значение равно Привет // значение равно "всем" // значение равно "всем" // значение равно "всем"// значение равно Привет // значение равно "всем" // значение равно "всем" // значение равно "всем"

х = "Привет всем"

х.substring(0 , 6)

x. substring(7, х. length)

х. substring(7, 250)

х.substring(250, 7)

х = "Привет всем"

х.substring(0 , 6)

x. substring(7, х. length)

х. substring(7, 250)

х.substring(250, 7)

// значение равно Привет // значение равно "всем" // значение равно "всем" // значение равно "всем"

// значение равно Привет // значение равно "всем" // значение равно "всем" // значение равно "всем"

toLocaleLowerCaseQ,toLowerCase() —переводят строку в нижний регистр.

Синтаксис: cTpOKa.toLocaleLowerCaseQ, CTpoKa.toLowerCaseQ

Возвращают строку. Первый метод работает в IE5.5+, NN6, учитывает определенные языковые системы.

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

Примеры

х = "ЗдраВствуйТе"

x.toLocaleLowerCase()

//

значение

равно

"здравствуйте"

х. toLowerCase()

//

значение

равно

"здравствуйте"

у = "Здравствуйте"

х == у

//

значение

равно

false

х. tol_owerCase() == у . toLowerCase

//

значение

равно

true

toLocalellpperCaseQ, toUpperCase() — переводят строку в верхний регистр.

Синтаксис: CTpoKa.toLocaleUpperCaseQ, crpoKa.toUpperCase()

Возвращают строку.

Первый метод работает в IE5.5+, NN6, учитывает определенные языковые системы.

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

Примеры

х = "ЗдраВствуйТе"

х. toLocaleUpperCase()

//

значение равно

"ЗДРАВСТВУЙТЕ"

x.toUpperCase()

//

значение равно

"ЗДРАВСТВУЙТЕ"

у = "Здравствуйте"

х == у

//

значение равно

false

х . toUpperCaseO == у . tollpperCase

//

значение равно

true

Методы String форматирования строк

Как известно, тексты на веб-страницах обычно создаются и форматируются с помощью тегов HTML. Однако тексты можно создавать на веб-страницах и с по- мощьюсценариев. Например, чтобывывестинавеб-страницу строку "Приветвсем!" полужирным шрифтом, в HTML-коде следует написать следующую инструкцию: <В>Привет всем!</В>

Чтобы подготовить эту же строку в таком же формате средствами JavaScript, в сценарии следует написать такое выражение:

"Приветвсем!".bold()

Здесь использован метод boldQ строкового объекта для форматирования строк. Выполнение этого выражения лишь создает отформатированную строку, но не выводит ее в окно браузера. Чтобы сделать это, следует еще выполнить метод write() объекта document для записи этой строки в HTML-документ. Ниже приведен пример кода и вид HTML-документа в окне браузера (рис. 1.11).

<HTML>

<SCRIPT>

х = "Привет всем!".bold()

document.wri te(x)

</SCRIPT>

<Р>Приветствие было вставлено сценарием JavaScript

</HTML>

В рассмотренном выше примере использован объект document и его метод writeQ. Другие свойства и методы этого объекта рассматриваются в следующих главах. Методы форматирования строк носят названия, соответствующие тегам HTML. Их особенность в том, что, в отличие от тегов, их следует записывать только в нижнем регистре (строчными буквами). Синтаксис такой же, как и у ранее рассмотренных методов:

строка.метод(параметр)

Большинство методов форматирования не имеют параметров. Далее приведен их

список.

anchorCanchocMMR'*)

Ип1<(расположение или URL)

blink()

ig()

bold()

smalt()

fixed()

strike()

fontcolor(3Ha4eHne_L|BeTa)

sub()

fontsize(4MOio от 1 до 7)

sup()

italicsQ

Примеры

"Глава 2" . anchor("volume2") )/* эквивалентно HTML-коду:

<A NAME="volume2">rnaea 2</A> */

"Страница автора".link("http:/www.admiral.ru/~dunaev")

/* эквивалентно HTML-коду:

<A HREF = "http:/www.admiral.ru/~dunaev")>Страница автора</А> */

Функции вставки и замены подстрок

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

Рассмотрим сначала функцию вставки строки в исходную строку. Назовем ее, например, insstr. Данная функция должна принимать три параметра: исходную строку si, вставляемую строку s2 и индекс позиции вставки п. Ниже приведены ее определение и примеры вызова:

function insstr(sl,s2,n) {

return si.slice(O.n) + s2 + sl.slice(n)

}

insstr ("Привет., друзья", " мои", 7) // "Привет, мои друзья" insstrCFlpneei , друзья", " мои", 100) // "Привет, друзья мои"

Теперь займемся функцией, которая заменяет в исходной строке все вхождения заданной подстроки на подстроку замены. Назовем эту функцию replacestr. Она должна принимать три параметра: исходную строку si, заменяемую подстроку s2 и подстроку s3, которой следует заменить все вхождения s2 в si (s2 может встречаться в si несколько раз).

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

// обработанная часть строки// индекс вхождения s2 в si// обработанная часть строки// оставшаяся часть строки// обработанная часть строки// индекс вхождения s2 в si// обработанная часть строки// оставшаяся часть строкиfunction replacestr (si, s2, s3) { var s = "

// обработанная часть строки

// индекс вхождения s2 в si

// обработанная часть строки

// оставшаяся часть строки

// обработанная часть строки

// индекс вхождения s2 в si

// обработанная часть строки

// оставшаяся часть строки

while (true) {

i = si.indexOf(s2)2)

if (i >= 0) {

s = s + sl.substr(0, i) + s3

si = si.substr(1 + s2.length) }else break

return s + sx \

replacestr C'bacdae", "a", "X")// "bXcdXe"

x = "Иван Иванов"

replacestr(x. "Ивани. "Федор**)// "Федор Федоров"

Заметим, что если заменяемая подстрока s2 является пустой, то цикл будет продолжаться бесконечно, поскольку пустая строка входит в состав любой строки. Чтобы избежать зацикливания, следует немного изменить код тела функции. Но что должна возвращать наша функция, если s2 — пустая строка? Вы можете решить, что в этом случае следует просто вернуть исходную строку si или же, например, считать пустую строку строкой, содержащей пробел. Последний вариант представляется мне более интересным. Вот код, реализующий эту идею:

function replacestr(si, s2, s3) { if (s2 == "") s2 = "// заменяем пустую строку на строку с пробелом

var s = "// обработанная часть строки

while (true) {

i = si. indexOf (s2) // индекс вхождения s2 в si if (i >= 0) {

s = s + sl.substr(0, i) + s3// обработанная часть строки

si = sl.substr(i + s2. length)// оставшаяся часть строки

}else break// выход из цикла

v return s + sx

Рассмотренные выше функции вставки и замены подстрок (insstrQ и replacestrQ) готовы к практическому применению в программах, где требуется обработка строк. Вы можете сохранить определения этих функций в текстовом файле с расширением .js, который будет играть роль библиотеки функций. Этот файл можно вызывать из основной программы, когда он потребуется. Более подробно этот вопрос мы рассмотрим в следующей главе.

Функции удаления передних и заключительных пробелов

При обработке строк (например, введенных пользователем в поля формы) нередко возникает задача удалить лишние передние и задние пробелы. Многие языки программирования имеют соответствующие встроенные функции, но в JavaScript их нет. Поэтому не помешает создать их самому с помощью имеющихся средств и поместить в свою библиотеку (сохранить в текстовом файле с расширением .js). Решить поставленную задачу можно несколькими способами. Я придумал следующий алгоритм. Преобразуем исходную строку в массив слов, используя в качестве разделителя один пробел Затем необходимо проанализировать первые или последние элементы массива в зависимости от того, что нам требуется: удалить передние или задние пробелы в исходной строке. Допустим, необходимо удалить передние пробелы. Тогда, если исходная строка содержала N пробелов, первые N элементов массива будут содержать пустые строки"". Мы проверяем в цикле значения первых элементов, пока не найдем непустой элемент или пока не исчер-

паем весь массив. Если первый непустой элемент массива имеет индекс i, то создадим новый массив, содержащий элементы исходного, начиная с этого индекса. Наконец, склеим элементы этого массива в одну строку, используя в качестве разделителя строку с единственным пробелом " ". Все, что нам понадобится, — это методы объекта String, оператор цикла и оператор условного перехода.

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

function Itrim(xstr){

if (!(xstr.indexOf(" ") == 0)) return xstr

/*

вернуть если в

исходную строку, ней нет передних

пробелов */

var astr = xstr. split(" •*) var i = 0

while (i < astr.length){

if (!(astr[i] == (""))) break

i++

}

astr = astr.slice(i) )

//

/*

//

создаем массив из слов строки

выходим из цикла, если элемент не пуст */

создаем массив

return astr.join("")

//

склеиваем элементы массива в строку

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

function rtrim(xstr){

if (! (xstr.lastlndexOf (" ") == xstr. length - 1)) return xstr

var astr = xstr.split("

var i = astr. length -1

while(i>0){

if (!(astr[i] == ("")))

break

l --

}

astr = astr.slice(0,，} i+1)

return astr.join("

}

Чтобы удалить из строки и передние, и концевые пробелы, достаточно выполнить следующее выражение:

ystr = rtrim(ltrim(xstr))

Впрочем, можно создать специальную функцию trim(), которая тримингует строку: function trim(xstr) { return rtrim(ltrim(xstr))

:)

Объект Array (Массив)

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

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

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

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

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

имя_массива = new Array([длина_массива])

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

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

У объекта Array имеется свойство length, значением которого является длина массива. Чтобы получить значение этого свойства, необходимо использовать выражение имя_массива.length.

Создав массив, можно присвоить значения его элементам, используя для этого оператор присвоения. В левой части оператора присвоения указывается имя массива, а рядом с ним в квадратных скобках индекс элемента. Мы уже говорили, что к элементам массива обращаются по индексу: имя_массива[индекс]. Здесь квадратные скобки обязательны.

Рассмотрим создание массива earth, содержащего в качестве элементов некоторые характеристики нашей планеты. Обратите внимание, что элементы в этом массиве различных типов (строковые и числовые).

earth = new Array(4)// массив из 4-х элементов

earth[0] = "Планета"

earth fl] = "24 часа"

earth[2] = 6378

earth[3] = 365.25

earth.length// значение равно 4

Если нам потребуется значение, например, третьего элемента массива, то достаточно использовать выражение earth [2].

Другой способ создания массива заключается в непосредственном определении элементов в круглых скобках за ключевым словом Array.

Пример

earth = new Array ("Планета", "24 часа", 6378, 365.25)

Примерearth = newArrayOПримерearth = newArrayO// пустой массив// пустой массивJavaScript автоматически создает индексы для элементов массива, так что к элементам массива, созданного таким способом, также можно обращаться по индексам. Третий способ создания массива — присвоить имя каждому элементу, подобно имени свойства объекта

Пример

earth = newArrayO

Пример

earth = newArrayO

// пустой массив

// пустой массив

earth. xtype = "Планета"

earth. xday = "24 часа"

earth. radi us = 6378

earth. period = 365.25

В этом случае обращение к элементу происходит как к свойству объекта, например earth.radius. Возможен и такой вариант: earth["radius"]. Однако по индексу к элементам в таком массиве обращаться нельзя.

Многомерные массивы

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

имя_массива[индекс_уровня1] [индекс_уровня2]

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

Типичным примером двухмерного массива является массив опций меню. У такого меню есть горизонтальная панель с опциями, называемая главным меню. Некоторым опциям главного меню соответствуют раскрывающиеся вертикальные подменю со своими опциями. Мы создаем массив, длина которого равна количеству опций главного меню. Элементы этого массива определяем как массивы названий опций соответствующих подменю. Чтобы была ясна структура нашей конструкции, мы выбрали названия опций надлежащим образом. Например, "Меню 2.1" — название 1-й опции подменю, соответствующего 2-й опции главного меню.

menu = new ArrayO

menu[0]=newan•ay ("Мени)1.1", "Меню1.2",","Меню1.3")

menu[l]=newаггауС'Меню2.1", "Меню2.2")

menu[2] = new аггауС'Меню 3.1", "Меню 3.2" , "Меню 3.3", "Меню 3.4")

Чтобы обратиться ко 2-й опции 3-го подменю, следует написать:

menu[2][l]// значение равно "Меню 3.2"

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

menu = new ArrayO

/* Масси в опци й главного меню : */

menu[0] = new Array("Меню!", "Меню2", "МенюЗ") menu[l] = new ArrayO

menu[1][0] = new АггауС'Меню 1.1". "Меню 1.2", "Меню 1.3")

meinu[l] [l] = new АггауС'Меню 2.1", "Меню 2 . 2")

meinu[l][2] = new АггауС'Меню 3.1", "Меню 3.2" , "МенюЗ.3", "Меню 3.4")

menu[0][l]

//

значение

равно

"Меню

2"

menu[0][2]

значение

равно

"Меню

3"

menu[l] [1] [0]

//

значение

равно

"Меню

2. 1"

menu[1][2][3]

〃

значение

равно

"Меню

3. 2"

Копирование массива

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

Пример

а = new Array(5, 2, 4, 3)

х = а// ссылка на массив а

а[2]= 25//изменениезначенияэлементас индексом 2

х[2]//значениеравно 25,то естьновому значению

а [2]

В этом примере массивы а и х совпадают.

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

а = new Аггау(5, 2, 4, 3)

х = new ArrayO// ссылка на массив а

for(i=0; i<a.length; i++)/* копирование значений массива а

в элементы массива х */

{x[i] = a [i] }

Свойства Array

length — длина или, иными словами, количество элементов в массиве; целое число.

Синтаксис: имя_массива.length

Поскольку индексация элементов массива начинается с нуля, индекс последнего элемента на единицу меньше длины массива. Это обстоятельство удобно использовать при добавлении к массиву нового элемента: myarray [mayarray.length] = значение.

prototype — свойство (прототип), позволяющее добавить новые свойства и методы ко всем созданным массивам.

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

Array.prototype.author = "Иванов"

Если теперь вместо Array, prototype написать имя существующего массива, то можно изменить значение свойства author только для этого массива:

myarray = new ArrayO// создание массива myarray

xarray = new ArrayO// создание массива xarray

Array.prototype.author = "Иванов"/* добавление прототипа

ко всем массивам */

myarray.author = "Иванов младший"/* изменение свойства author i

для myarray */

xarray.author = "Сидоров"/* изменение свойства author

для xarray */

Прототипу можно присвоить функции. При этом они пополнят множество методов объекта Array.

Пример

Вычисление суммы элементов массива. Мы определяем функцию aSum(), которая возвращает сумму элементов числового массива. В качестве параметра эта функция принимает массив. Затем создаем конкретный массив чисел. Наконец, присоединяем к прототипу массива новый метод Sum — определенную ранее функцию aSum():

function aSum(xarray) {

var s = 0

return sImyarray = new Array(2, 3,4)Array. prototype. Sum = aSummyarray.Sum(myarray)return sImyarray = new Array(2, 3,4)Array. prototype. Sum = aSummyarray.Sum(myarray)for(i = 0; i <= xarray .length -1 ; i++){ s = s + xarray [i ]

return s

I

myarray = new Array(2, 3,4)

Array. prototype. Sum = aSum

myarray.Sum(myarray)

return s

I

myarray = new Array(2, 3,4)

Array. prototype. Sum = aSum

myarray.Sum(myarray)

// создаем массив myarray из 3-х чисел

/* присоединяем метод (около имени функции скобки указывать не нужно) */

/* применяем метод Sum к массиву myarray, передавая его о в качестве параметра */

Этот пример призван просто проиллюстрировать использование свойства prototype. Чтобы вычислить сумму элементов массива, достаточно написать следующее выражение:

s = aSum(myarray)

Методы Array

Методы объекта Array предназначены для управления данными, сохраненными в структуре массива.

сопса1(массив) — конкатенация массивов, объединяет два массива в третий массив.

Синтаксис: имя_массива!.сопса1(массив2)

Возвращает массив. Данный метод не изменяет исходные массивы.

Пример

al = new array(l, 2, "Звезда")

а2 = new arrayC'a", "б", "в", "г")

аЗ = al.concat(a3) 1)/* результат - массив с элементами:

1, 2, "Звезда", "а", ' иб'. "В", "Г" */

р1'п(разделитель) — создает строку из элементов массива с указанным разделителем между ними; является строкой символов (возможно, пустой).

Синтаксис: имя_массиваоо1'п(строка)

Возвращает строку символов.

Примеры

а = new array(l, 2, "Звезда")

a.join(",")// значение - строка "1,2,Звезда"

а = new arrayd, 2, "Звезда")

a.join(n “)// значение - строка "1 2 Звезда"

рор() — удаляет последний элемент массива и возвращает его значение.

Синтаксис: имя_массива.рор()

Возвращает значение удаленного элемента массива. Совместимость: IE5.5+.

Данный метод изменяет исходный массив.

ри5И(значение|объект) — добавляет к массиву указанное значение в качестве последнего элемента и возвращает новую длину массива.

Синтаксис: имя_массива!.ри5Ь(значение|объект)

Возвращает число. Совместимость: IE5.5+. Данный метод изменяет исходный массив.

shiftQ — удаляет первый элемент массива и возвращает его значение.

Синтаксис: имя_массива.shiftQ

Возвращает значение удаленного элемента массива. Совместимость: IE5.5+, NN4+. Данный метод изменяет исходный массив.

ип5И1'г1(значение|объект) — добавляет к массиву указанное значение в качестве первого элемента.

Синтаксис: имя_массива.ип5МЩзначение|объект)

Возвращает: ничего. Совместимость: IE5.5+. Данный метод изменяет исходный массив.

reverseQ — изменяет порядок следования элементов массива на противоположный.

Синтаксис: имя_массива.геуегзе()

Возвращает массив. Данный метод изменяет исходный массив.

Пример

а = new array(I. 2, "Звезда")

a. reverseO/* массив с элементами в следующем порядке:

"Звезда", 2, 1 */

5и$е(индекс1 [, индекс2]) — создает массив из элементов исходного массива с индексами указанного диапазона.

Синтаксис: имя_массива.5Н5е(индекс! [, индекс2])

Возвращает массив. Данный метод не изменяет исходный массив.

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

Пример

а = new аггау(1, 2, "Звезда","а", "Ь")

a.slise(1.3)// массив с элементами: 2, "Звезда"

a.slise(2)// массив с элементами: "Звезда", "а", "Ь"

50|1([функция_сортировки]) — сортирует (упорядочивает) элементы массива с помощью функции сравнения.

Синтаксис: имя_массива.5оИ:([функция_сравнения])

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

Если параметр не указан, то сортировка производится на основе сравнения ASCII-кодов символов значений. Это удобно для сравнения символьных строк, но не совсем подходит для сравнения чисел. Так, число 357 при сортировке считается меньшим, чем 85, поскольку сначала сравниваются первые символы и только в случае их равенства сравниваются следующие, и т. д. Таким образом, метод sortQ без параметра подходит для простой сортировки массива со строковыми элементами.

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

Значение, возвращаемоеРезультат сравнения х и у

функцией сравнения

<0у следует за х

ОПорядок следования х и у не изменяется

>0х следует за у

Итак, по какому критерию сортировать элементы массива, определяется кодом функции сравнения. Если элемент массива имеет значение null, то в Internet Explorer он размещается в начале массива.

Пример

myarray=newArray(4,2,15,3,30)//числовоймассив

function сomp(x:, у) {// функция сравнения return х-у

}

myarray.sort(comp)/* массив с элементами в порядке:

3, 4. 15, 30 */

. зрИсе(индекс, количество [, элем! [, элем2 [, ...э/ieMN]]]) — удаляет из массива несколько элементов и возвращает массив из удаленных элементов или заменяет значения элементов.

Синтаксис: имя_массива.5рНсе(индекс, количество [, элем! [, элем2 [, ...элемМ]]])

Возвращает массив. Совместимость: IE5.5+. Данный метод изменяет исходный массив.

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

Пример

а = new Array ("Вася", "Иаван", "Марья", 12, 5)

х = a. spli се(1,3)/* х - массив элементов: "Иван", "Марья", 12

а - массив элементов: "Вася", 5 */

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

Пример

а = new Array("Вася", "Иван", "Марья", 12, 5)

х = а. spliс е(1,3, "Петр", "Кузьма", "Анна")

// х - массив элементов: "Иван", "Марья", 12 //а - массив элементов: "Вася","Петр", Кузьма", "Анна",5

а = new Array("Вася", "Иван", "Марья", 12, 5)

х = a.spliсе(1,0, "Петр","Кузьма", "Анна", "Федор", "Ханс")

// х - пустой массив /* а - массив элементов: ••Вася". "Петр'* , "Кузьма", "Анна", "Федор", "Ханс" */

H.toLocaleStringO, toString() — преобразуют содержимое массива в символьную строку.

Метод toLocaleStringQ поддерживается браузерами IE5.5+ и NN3+, а метод toStringO — и более ранними версиями. Алгоритм преобразования по методу toLocaleStringO зависит от версии браузера.

Для преобразования содержимого массива в строку рекомендую использовать методjoin().

Функции обработки числовых массивов

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

Функция, возвращающая сумму значений всех элементов непустого массива: function S(aN) {

var S=aN[0]

for(var i = 1; i<= aN. length-1; i++) {

S += aN[i]

}

return S

}

Очевидно, для вычисления среднего значения следует просто воспользоваться выражением S(aN)/aN.length.

Функция, возвращающая минимальное значение среди элементов массива: function Nmin(aN){ var Nmin = aN[0] for(var i=l; i <= aN.length-1;i++){

if (aN[i] < Nmin)

Nmin = aN[i]

I

return Nmin

}

Функция, возвращающая максимальное значение среди элементов массива: function Nmax(aN){ var Nmax = aN[0] for(var i = 1; 1 <= aN.length -1 ; i + + ){ if (aN[i] > Nmax)

Nmax = aN[i]

} return Nmax }

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

function stati stic(aN) {

if (aN ==0 | | aN == null || aN == "")

return new Array(0,0,0,0)

var S = aN[0]

var Nmin = aN[0]

var Nmax = aN[0]

for(var i=l; i<=aN.length-1 ; i++){

S += aN[i]

if (aN[i] < Nmin) Nmin = aN[i] if (aN[i] > Nmax) Nmax = aN[i] }

return new Array(S, S/aN.length, Nmin, Nmax) }

В начале кода функции statisticQ мы проверяем, не является ли параметр пустым. Если это так, то все статистические характеристики считаются равными нулю.

7.3. Объект Number (Число)

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

Числа в JavaScript

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

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

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

Примеры

2 + 3// 7 - целое число

2 + 3.6// 5.6 - число с плавающей точкой

4 + 3.6// 6 - целое число

.00// число с плавающей точкой

Числа можно представлять и в так называемой экспоненциальной форме, то есть в формате: число!ечисло2 или число!Ечисло2. Такая запись числа означает число 110*иа"

Пример

1е5

//

100 000

2е6

//

2 000 000

1.5еЗ

//

1500

+1.5еЗ

//

1500

-1.5еЗ

//

-1500

Зе-4

//

0 ппоз

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

Запись числа в шестнадцатеричной форме начинается с префикса Ох (или ОХ), где первый символ ноль, а не буква О, затем следуют символы шестнадцатеричных цифр: О, 1, 2,..., 9, а, Ь, с, d, e, f (буквы могут быть в любом регистре). Например, шестнадцатеричное число Ox4af в десятеричном представлении есть 1199.

Запись числа в восьмеричной форме начинается с нуля, за которым следуют цифры от 0 до 7. Например, 027 (в десятеричном представлении — 23). В арифметических выражениях числа могут быть представлены в любой из перечисленных выше систем счисления, однако результат всегда приводится к десятеричной форме.

Пример

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

function tol6(nlO) {

hchars = / строка, содержащая все 16-е цифры

if (п!0 > 255) return null

var i = n!0%16

var j = (nl0 - i /16

rezult = "0x"

rezult += hchars. charAt(j ) rezult += hchars charAt(i) return rezult

to!6(250)to!6(30)tol6(30)+10+ 10to!6(250)to!6(30)tol6(30)+10+ 10// "0xfa"// "0xle" ""// "0xfa"// "0xle" ""// "0xlel0" - склейка, а не сложение // 40// "0xlel0" - склейка, а не сложение // 40Напомним, что выражение вида х += у эквивалентно выражению х = х + у.Функцию to!6() можно также создать и на основе массивов:function to!6(n!0) {hchars = new Array ("0", "1". " ■ ""4" 6" "2", "3", "4","a" , "b", "c" , "d", "e", "f"} if (n!0 > 255) return null var i = n!0%16var j = (n!0 - i)/16rezult = "0x"rezult += hchars [j]rezult += hchars [i]return rezultНапомним, что выражение вида х += у эквивалентно выражению х = х + у.Функцию to!6() можно также создать и на основе массивов:function to!6(n!0) {hchars = new Array ("0", "1". " ■ ""4" 6" "2", "3", "4","a" , "b", "c" , "d", "e", "f"} if (n!0 > 255) return null var i = n!0%16var j = (n!0 - i)/16rezult = "0x"rezult += hchars [j]rezult += hchars [i]return rezultПримерПримерФункция преобразования из десятеричной в двоичную форму. Функция to2() в этом примере принимает в качестве параметра десятеричное число и преобразует его в строку, содержащую это же число, но во двоичной форме. Эта строка состоит из нулей и единиц. Здесь используется рекурсивный вызов функции to2() самой себя. Обратите внимание, что использование ключевого слова var здесь принципиально важно из-за рекурсии, иначе функция будет работать неправильно.Функция преобразования из десятеричной в двоичную форму. Функция to2() в этом примере принимает в качестве параметра десятеричное число и преобразует его в строку, содержащую это же число, но во двоичной форме. Эта строка состоит из нулей и единиц. Здесь используется рекурсивный вызов функции to2() самой себя. Обратите внимание, что использование ключевого слова var здесь принципиально важно из-за рекурсии, иначе функция будет работать неправильно.function to2(n!0) {if (n!0 <2)function to2(n!0) {if (n!0 <2)return " " + rreturn " " + rvar i=n!0%2var i=n!0%2// чтобы результат был строковым// чтобы результат был строковым}}var j=(nl0-i)/2 return to2(])+ivar j=(nl0-i)/2 return to2(])+iДля преобразования строк, содержащих числа, в данные числового типа служат встроенные функции parselntQ и parseFloatQ соответственно для представления в целочисленном виде и в виде числа с плавающей точкой. Их мы уже рассматривали выше. Здесь следует отметить, что параметрами этих функций могут быть строки, содержащие числа не только в десятеричной, но и в шестнадцатеричнои, и в восьмеричной формах. Для указания основания системы счисления служит второй параметр этих функций.Для преобразования строк, содержащих числа, в данные числового типа служат встроенные функции parselntQ и parseFloatQ соответственно для представления в целочисленном виде и в виде числа с плавающей точкой. Их мы уже рассматривали выше. Здесь следует отметить, что параметрами этих функций могут быть строки, содержащие числа не только в десятеричной, но и в шестнадцатеричнои, и в восьмеричной формах. Для указания основания системы счисления служит второй параметр этих функций.ПримерыПримерыparselnt ("ff"・ 16) parselntC'ff") parselnt( 010") parselnt (010", 8)parselnt ("ff"・ 16) parselntC'ff") parselnt( 010") parselnt (010", 8)// 〃〃// 〃〃значение значение значение значениезначение значение значение значениеравно 255 равно NaN равно 8 равно 8равно 255 равно NaN равно 8 равно 8

to!6(250)

to!6(30)

tol6(30)+10

+ 10

to!6(250)

to!6(30)

tol6(30)+10

+ 10

// "0xfa"

// "0xle" ""

// "0xfa"

// "0xle" ""

// "0xlel0" - склейка, а не сложение // 40

// "0xlel0" - склейка, а не сложение // 40

Напомним, что выражение вида х += у эквивалентно выражению х = х + у.

Функцию to!6() можно также создать и на основе массивов:

function to!6(n!0) {

hchars = new Array ("0", "1". " ■ ""4" 6" "2", "3", "4",

"a" , "b", "c" , "d", "e", "f"} if (n!0 > 255) return null var i = n!0%16

var j = (n!0 - i)/16

rezult = "0x"

rezult += hchars [j]

rezult += hchars [i]

return rezult

Напомним, что выражение вида х += у эквивалентно выражению х = х + у.

Функцию to!6() можно также создать и на основе массивов:

function to!6(n!0) {

hchars = new Array ("0", "1". " ■ ""4" 6" "2", "3", "4",

"a" , "b", "c" , "d", "e", "f"} if (n!0 > 255) return null var i = n!0%16

var j = (n!0 - i)/16

rezult = "0x"

rezult += hchars [j]

rezult += hchars [i]

return rezult

Пример

Пример

Функция преобразования из десятеричной в двоичную форму. Функция to2() в этом примере принимает в качестве параметра десятеричное число и преобразует его в строку, содержащую это же число, но во двоичной форме. Эта строка состоит из нулей и единиц. Здесь используется рекурсивный вызов функции to2() самой себя. Обратите внимание, что использование ключевого слова var здесь принципиально важно из-за рекурсии, иначе функция будет работать неправильно.

Функция преобразования из десятеричной в двоичную форму. Функция to2() в этом примере принимает в качестве параметра десятеричное число и преобразует его в строку, содержащую это же число, но во двоичной форме. Эта строка состоит из нулей и единиц. Здесь используется рекурсивный вызов функции to2() самой себя. Обратите внимание, что использование ключевого слова var здесь принципиально важно из-за рекурсии, иначе функция будет работать неправильно.

function to2(n!0) {if (n!0 <2)

function to2(n!0) {if (n!0 <2)

return " " + r

return " " + r

var i=n!0%2

var i=n!0%2

// чтобы результат был строковым

// чтобы результат был строковым

}

}

var j=(nl0-i)/2 return to2(])+i

var j=(nl0-i)/2 return to2(])+i

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

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

Примеры

Примеры

parselnt ("ff"・ 16) parselntC'ff") parselnt( 010") parselnt (010", 8)

parselnt ("ff"・ 16) parselntC'ff") parselnt( 010") parselnt (010", 8)

// 〃

〃

// 〃

〃

значение значение значение значение

значение значение значение значение

равно 255 равно NaN равно 8 равно 8

равно 255 равно NaN равно 8 равно 8

parselnt('"010",

10)

//

значение равно

10

parselnt("010", parselnt("010",

2)

//

значение

равно

2

16)

//

значение

равно

17

Заметим, что функция parseFloatQ в IE6.0 работает неправильно, если указан второй параметр (основание системы счисления).

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

Примеры

11 + 25.78// значение равно "25.78"

" + 2 . 5еЗ// значение равно "2500"

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

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

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

переменная = new Number(число)

Доступ к свойствам и методам строкового объекта обеспечивается такими выражениями:

число.свойство

Number.свойство

число.методе[параметры])

Number,метод([параметры])

Свойства Number

MAX_VALUE — константа, значение которой равно наибольшему допустимому в JavaScript значению числа (1.7976931348623157е+308).

MIN_VALUE — константа, значение которой равно наименьшему допустимому в JavaScript значению числа (5е-324).

NEGATIVEJNFINITY - число, меньшее, чем Number.MIN_VALUE.

POSITIVEJNFINITY - число, большее, чем Number.MAX_VALUE.

NaN — константа, имеющая значение NaN, посредством которой JavaScript сообщает, что данные (параметр, возвращаемое значение) не являются числами (Not a Number).

prototype — свойство (прототип), играющее такую же роль, что и в случае объекта String (см. выше).

Методы Number

Объект Number имеет несколько методов, из которых мы рассмотрим только четыре, предназначенные для представления чисел в виде строки в том или ином формате.

toExponential(KOflM4ecTBo) — представляет число в экспоненциальной форме.

Синтаксис: числоЛоЕхропепУаЦколичество)

Возвращает строку. Совместимость: IE5.5+, NN6+.

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

Примеры

x=new Number(456)

х . toExponential (3)

//,

4.560e+2

x. toExponenttal (2)

//

4.56e+2

x. toExponential(l)

//

4.6e+2

x.toExponential(O)

//

5e+2

1:оПхес1(количество) — представляет число в форме с фиксированным количеством цифр после точки.

Синтаксис: числоЛоР1хес1(количество)

Возвращает строку. Совместимость: IE5.5+, NN6+.

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

Примеры

x=new Number(25.65)

x.toFixed(3)// 25.650

x.toFixed(2)// 25.65

//25.7

// 25.7

toPredsion(T04HocTb) — представляет число с заданным общим количеством значащих цифр.

Синтаксис: число.toPrecision(io4HocTb)

Возвращает строку. Совместимость: IE5.5+, NN6+.

Параметр представляет собой целое число, определяющее, сколько всего цифр,

до и после точки, следует указывать.

Примерыx=new Number(135.45)x.toPrecision(6)x. toPrecision(5)x•toPrecision(4)x.toPrecision(3)x.toPrecision(2)x.toPrecision(l)x.toPreclslon(Q)Примерыx=new Number(135.45)x.toPrecision(6)x. toPrecision(5)x•toPrecision(4)x.toPrecision(3)x.toPrecision(2)x.toPrecision(l)x.toPreclslon(Q)// 135.450// 135.45// 135.5// 135// 1.4e2// Ie2// Сообщение об ошибке// 135.450// 135.45// 135.5// 135// 1.4e2// Ie2// Сообщение об ошибке

Примеры

x=new Number(135.45)

x.toPrecision(6)

x. toPrecision(5)

x•toPrecision(4)

x.toPrecision(3)

x.toPrecision(2)

x.toPrecision(l)

x.toPreclslon(Q)

Примеры

x=new Number(135.45)

x.toPrecision(6)

x. toPrecision(5)

x•toPrecision(4)

x.toPrecision(3)

x.toPrecision(2)

x.toPrecision(l)

x.toPreclslon(Q)

// 135.450

// 135.45

// 135.5

// 135

// 1.4e2

// Ie2

// Сообщение об ошибке

// 135.450

// 135.45

// 135.5

// 135

// 1.4e2

// Ie2

// Сообщение об ошибке

4.1о51:ппд([основание]) — возвращает строковое представление числа в системе

счисления с указанным основанием.

Синтаксис: число.1:о5Мпд([основание])

Возвращает строку. Если параметр не указан, имеется в виду десятеричная система счисления. Вы можете указать 2 для двоичной системы или 16 — для шестнадцатеричной. Заметим, что этот метод имеют все объекты.

Примерыx=new Number(127.18) x. toStringOx.toString(10)x.toString(16)x.toString(S)Number(5)x.toString(2)Примерыx=new Number(127.18) x. toStringOx.toString(10)x.toString(16)x.toString(S)Number(5)x.toString(2)// "127.18"II "127.18"II "7f.2el47ael47b"〃” 177.134121727024366"// "127.18"II "127.18"II "7f.2el47ael47b"〃” 177.134121727024366"II T01"II T01"

Примеры

x=new Number(127.18) x. toStringO

x.toString(10)

x.toString(16)

x.toString(S)

Number(5)

x.toString(2)

Примеры

x=new Number(127.18) x. toStringO

x.toString(10)

x.toString(16)

x.toString(S)

Number(5)

x.toString(2)

// "127.18"

II "127.18"

II "7f.2el47ael47b"

〃” 177.134121727024366"

// "127.18"

II "127.18"

II "7f.2el47ael47b"

〃” 177.134121727024366"

II T01"

II T01"

Объект Math (Математика)

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

Math.свойство

Math.метод(параметры)

Свойства Math

Свойства объекта Math имеют в качестве своих значений математические константы.

FПостоянная Эйлера

LN10Значение натурального логарифма числа 10

LN2Значение натурального логарифма числа 2

LOG10EЗначение десятичного логарифма экспоненты (числа в)

LOG2EЗначение двоичного логарифма экспоненты

PIЗначение постоянной я

Значение квадратного корня ю-1/2

SORTЗначение квадратного корня из 2

Пример

Для вычисления длины окружности при известном радиусе требуется число п, которое можно взять как свойство объекта Math.

var R = 10// радиус окружности

circus = 2*R*Math. PI// длина окружности

Методы Math

аЬз(число) — возвращает модуль (абсолютное значение) числа;

асо$(число) — возвращает арккосинус числа;

а51п(число) — возвращает арксинус числа;

atan(4HOio) — возвращает арктангенс числа;

atan2(x, у) — возвращает угол в полярных координатах точки;

cei(.(число) — округляет число вверх до ближайшего целого;

со$(число) — возвращает косинус числа;

ехр(число) — возвращает число е в степени число;

поог(число) — округляет число вниз до ближайшего целого;

1од(число) — возвращает натуральный логарифм числа;

тах(число1,число2) — возвращает большее из чиселчисло!, число2;

1тпп(число1,число2) — возвращает меньшее из чиселчисло!, число2;

ро\л/(число!,число2) — возвращаетч исло! в степени число2;

random() — возвращает случайное число между 0 и 1;

гоипс!(число) — округляет число до ближайшего целого;

sin(число) — возвращает синус числа;

sqrt(4Mcno) — возвращает квадратный корень из числа;

1ап(число) — возвращает тангенс числа.

Примеры

Метод randomQ возвращает случайное число, лежащее в интервале от 0 до 1. Чтобы получить случайное число в пределах от 0 до Nmax, следует написать следующее выражение:

х = Nmax'Math . randomf)

Если требуется получить случайное число в интервале от Nmin до Nmax, то из элементарного отношения пропорций получаем следующее выражение:

х = Nmin + (Nmax - Nmi n) *Math. randomO

Можно также создать функцию для вычисления случайного числа в заданном интервале:

function rand(a, b) {

return a+ (b-a) *Math . random()

}

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

Для вычисления значения тригонометрической функции sin(x), у которой аргумент х выражен в градусах, следует применить следующее выражение:

Math.sin(Math.PI*x/180)

Функции для решения некоторых математическихзадач

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

Решение квадратного уравнения

С этой задачей мы знакомы еще со школы. Напомню, в чем она заключается. Требуется найти два числаxl их2 —.такие, чтобы при подстановке любого из них в выражение ах2 + Ьх + с результат его вычисления был бы равен 0. Такие х{ и х2 называются корнями уравнения ах2 + Ьх + с = 0.

На первый взгляд может показаться, что для решения этой задачи следует просто вспомнить или найти в справочнике подходящую формулу. И действительно, это сделать нетрудно. Однако в программах для решения задач такого рода часто значительную долю кода занимают различные проверки и анализ исходных данных. Организация же вычислений по конечным формулам из справочника — не самое сложное. Так, в рассматриваемой задаче в зависимости от значений коэффициентов а, А и с возможны различные частные случаи. Корни могут быть комплексными и действительными. Допустим, нас интересуют только действительные корни. Тогда корней может и не быть совсем, или быть только один, или два, одинаковые или различные. Таким образом, прежде чем мы дойдем до применения формулы, придется проанализировать, с каким именно случаем имеем дело.

Очевидно, функция (назовем ее beqQ) для вычисления действительных корней квадратного уравнения должна принимать три параметра — коэффициенты a, b и с. Возвращаемым значением будет массив. Сделаем так, что если корней нет, то

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

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

// решение квадратного уравнения

// решение квадратного уравнения

function beq(a, b, с){ var aret = newArrayO var D = b*b - 4*a*c if (a == 0) {

if (!(b == 0)){ aret[0] = -c/b aret [l] = null

retu}rn.retu}rn.aretaret// единственный корень или нет корней// единственный корень или нет корней}}ifif(D == 0) { aret[0]=-b/2/a aret[l]=aret[0](D == 0) { aret[0]=-b/2/a aret[l]=aret[0]// одинаковые корни// одинаковые корни

retu}rn.

retu}rn.

aret

aret

// единственный корень или нет корней

// единственный корень или нет корней

}

}

if

if

(D == 0) { aret[0]=-b/2/a aret[l]=aret[0]

(D == 0) { aret[0]=-b/2/a aret[l]=aret[0]

// одинаковые корни

// одинаковые корни

ifif(D>0){// различные корни

if

if

aret[0] = (-b - Math.sqrt(D))/2/a

aret[l] = (-b + Math.sqrt(D))/2/a

retu}rn aret

}

Выполним проверку работы функции на нескольких наборах исходных данных:

beq(0, 2, 6)

beq(l,-2,1)

beq(3, 4, -2.5)

// массив (-3, null)

// массив (1, 1)

/* массив (-1.797054997187545,

0.4637216638542114) V

beq(2, 0. 5)

Вычисление интеграла

// пустой массив

Интеграл от некоторого выражения / (X)с одной переменной х на интервале ее значений от а до b можно понимать как площадь, ограниченную кривой у =f 2, осью абсцисс (х) и двумя прямыми, параллельными оси ординат {у) и проходящими через точки а и b на оси (х). Аналогия с площадью справедлива лишь отчасти. Если указать, что площадь кривой, проходящей ниже оси абсцисс, является отрицательной, тогда все в порядке.

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

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

получения множества таких трапеций требуется разбить отрезок аЪ оси абсцисс на большое количество элементарных отрезков. В математике все идеально: отрезок ab разбивается на элементарные отрезки, длина которых стремится к нулю, то есть является бесконечно малой величиной. На практике мы имеем дело с конечными величинами. Более того, мы должны учесть, что с уменьшением длины элементарных отрезков и ростом их количества возрастает время вычислений. Таким образом, нам потребуется найти компромисс между точностью решения задачи и временными затратами.

Теперь займемся технической стороной вопроса. Что следует передавать нашей функции вычисления в качестве параметров? Я вспомнил о великолепной встроенной функции eval(), которая может вычислять выражения JavaScript, переданные ей в виде строки. Поэтому функция integralQ для вычисления интеграла будет принимать строку, содержащую выражение вида f(x), в котором переменная будет обозначена строчной латинской буквой х, например "5*х*х + 10". Два других параметра — числа а и Ь, соответствующие концам интервала интегрирования. Ниже приведено определение функции integralQ:

n = 100dx = length/n х = аn = 100dx = length/n х = аfunction i ntegral(expression, a, b) { // интеграл var x, yl, y2 , n, length, dx, 5 = 0 length = Math.abs(b - a)

n = 100

dx = length/n х = а

n = 100

dx = length/n х = а

/*/*// количество элементарных отрезков // длина элементарного отрезка

/*

/*

начальное значение переменной х в выражении */

yl = eval(expression)

х = a dx

у2 = eval(expression)

S = (yl + y2)'dx/2

for(i = 2; i< = n '+ + ){

yl = У2

x = x + dx

y2 = eval(expression)

S+= (yl + y2)*dx/2

return S

Проверим, как работает эта функция:

integral("x", 0, 1)integral("x", 0, 1)integral("x*x" , 0, 1)integral("x*x" , 0, 1)/*/*integral("x*x" , 0, 10)integral("x*x" , 0, 10)/*/*9.5060000680000662(точное значение = 0.5) */0.33335000000000037(точное значение = 0.3333...) */333.34999999999917(точное значение =333.33333.3333...) */9.5060000680000662(точное значение = 0.5) */0.33335000000000037(точное значение = 0.3333...) */333.34999999999917(точное значение =333.33333.3333...) */

integral("x", 0, 1)

integral("x", 0, 1)

integral("x*x" , 0, 1)

integral("x*x" , 0, 1)

/*

/*

integral("x*x" , 0, 10)

integral("x*x" , 0, 10)

/*

/*

9.5060000680000662

(точное значение = 0.5) */

0.33335000000000037

(точное значение = 0.3333...) */

333.34999999999917

(точное значение =333.33333.3333...) */

9.5060000680000662

(точное значение = 0.5) */

0.33335000000000037

(точное значение = 0.3333...) */

333.34999999999917

(точное значение =333.33333.3333...) */

Если точность вычислений насЕсли точность вычислений насне устраивает, то это обусловлено малым значе-

Если точность вычислений нас

Если точность вычислений нас

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

function integral(expression, a, b){ // интеграл if ((expression | | !b&&!a)

return 0

if (a == b)

return 0

// если левый предел больше правого // если правый предел меньше левого// если левый предел больше правого // если правый предел меньше левогоvar x, yl, y2, n, length, dx,S=0 length = Math. abs(b - a)

// если левый предел больше правого // если правый предел меньше левого

// если левый предел больше правого // если правый предел меньше левого

yl = Math.min(a .b)

b = Math.max(a, b)

а = yl

п = 100

if (length>2) n=Math.round(100*Math.log(length+l))if (length>2) n=Math.round(100*Math.log(length+l))dx = length/nx = ayl = eval(expression)х = а + dxу2 = eval(expression)S = (yl + y2)*dx/2for(i=2; i<=n;i++){у l = y2x = x + dxy2 = eval(expression)S+= (yl + y2)*dx/2"JIreturn S}Выполним проверку:integral("x*x", 0, 10)dx = length/nx = ayl = eval(expression)х = а + dxу2 = eval(expression)S = (yl + y2)*dx/2for(i=2; i<=n;i++){у l = y2x = x + dxy2 = eval(expression)S+= (yl + y2)*dx/2"JIreturn S}Выполним проверку:integral("x*x", 0, 10)// длина элементарного отрезка/* начальное значение переменной х в выражении */// длина элементарного отрезка/* начальное значение переменной х в выражении *//» 333.33749999999906(точное значение = 333.3333...) *//» 333.33749999999906(точное значение = 333.3333...) */

if (length>2) n=Math.round(100*Math.log(length+l))

if (length>2) n=Math.round(100*Math.log(length+l))

dx = length/n

x = a

yl = eval(expression)

х = а + dx

у2 = eval(expression)

S = (yl + y2)*dx/2

for(i=2; i<=n;i++){

у l = y2

x = x + dx

y2 = eval(expression)

S+= (yl + y2)*dx/2

"JI

return S

}

Выполним проверку:

integral("x*x", 0, 10)

dx = length/n

x = a

yl = eval(expression)

х = а + dx

у2 = eval(expression)

S = (yl + y2)*dx/2

for(i=2; i<=n;i++){

у l = y2

x = x + dx

y2 = eval(expression)

S+= (yl + y2)*dx/2

"JI

return S

}

Выполним проверку:

integral("x*x", 0, 10)

// длина элементарного отрезка

/* начальное значение переменной х в выражении */

// длина элементарного отрезка

/* начальное значение переменной х в выражении */

/» 333.33749999999906

(точное значение = 333.3333...) */

/» 333.33749999999906

(точное значение = 333.3333...) */

Заметьте, что в данном случае точность после наших коррекций увеличилась на

порядок.

Вычисление производной

Производная от выражения (функции) / 侬 с одной переменной х в некоторой точке а интерпретируется как скорость изменения значения этого выражения при значении х, равном а. Например, если выражение / (х) описывает зависимость пройденного пути от времени, то производная от/(х)в момент времени t равна скорости движения в этот момент.

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

Как и вычисление интеграла, вычисление производной будет базироваться на встроенной функции evalQ, возвращающей значение выражения, переданное ей в виде строки как параметр. Функция DydxlQ для вычисления производной принимает строку, содержащую выражение, в котором переменная обозначена строчной латинской буквой х, например "25*х - 2". Второй параметр указывает точку, в которой следует вычислить значение производной. Вот вариант кода:

function Dydx(expression , а) { // производная

if (( expression) // если нет выражения

return 0

var x, у, dx dx = 0.000025 x = a - dx// 1-я тестовая точка

у = eval(expression)

x = a + dx// 2-я тестовая точка

return (eval(expression) - y)/2/dx)

Проверочные примеры:

// 0.9999999999998899 (точное значение равно 1)

Dydx("x*x", 1)// 1.9999999999997797 (точное значение равно 2)

Поиск экстремума

Экстремум выражения (функции)f(x) — это пара чисел (х0, г/) таких, что при подстановке人 в выражение/(л:) вместо переменной%значение этого выражения будет равно своему максимальному или минимальному значению уй. Вообще говоря, функция может иметь несколько экстремумов или не иметь их вообще. Мы напишем код функции extremumQ, которая вычисляет экстремум выражения, если он действительно у него есть (график этого выражения имеет «холм» или «впадину»).

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

Как и в случае вычисления интеграла и производной, при поиске экстремума будет использоваться встроенная функции eval(), возвращающая значение выражения, переданного ей в виде строки как параметр. Функция extremumQ для поиска экстемума принимает строку, содержащую выражение, в котором переменная обозначена строчной латинской буквой х, например "5*х*х - 2*х". Второй и третий параметры указывают границы интервала, в котором следует искать %о- Последний, четвертый параметр задает точность поиска. Вот вариант кода:

function extremum(expression, a, b, d) {// экстремум

if (!d) d = 0.001 var x, yl, y2 , i x = a

yl = Dydx(expression, a) i = 1

while ((x <= b)&&(i <= 1000)) {

y2 = Dydx(expression, x+d)

if ((yl<0)&&(y2>=0)||(y2<0)&&(yl>=0)) {

x=x+d*Math.abs(yl)/(Math.abs(yl)+Math.abs(y2))

return new Array(x, eval(expression))

) x+= d У1 二 У2

return new ArrayO )

Проверочный пример:

extremum("x*x-l",-l, 1, 0.01)/* (7.528699885739343e-16, -1)

точное значение равно (0, -1) */

ВНИМАНИЕ

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

Объект Date (Дата)

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

Со временем дела обстоят не так просто, как кажется на первый взгляд. Вспомните, что существуют временные зоны (часовые пояса), а также сезонные поправки времени. Так, например, текущее время в Санкт-Петербурге отличается от времени в Иркутске на 5 часов. Если в Иркутске уже полночь, то в Петербурге еще только 19 часов. Чтобы иметь возможность координировать деятельность во времени организаций и физических лиц в различных точках нашей планеты, была введена система отсчета времени. Она связана с меридианом, проходящим через астрономическую обсерваторию в городе Гринвич в Великобритании. Эту временную зону называют средним временем по Гринвичу (Greenwich Mean Time — GMT). Недавно кроме аббревиатуры GMT стали использовать еще одну — UTC (Universal Time Coordinated — Всеобщее Скоординированное Время).

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

В программе на JavaScript нельзя просто написать 30.10.2002, чтобы получить значение даты, с которым в дальнейшем можно производить некие операции. Значения даты и времени создаются как экземпляры специального объекта Date. При этом объект сам будет «знать», что не бывает 31 июня и 30 февраля, а в високосных годах 366 дней.

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

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

имяОбъектаДаты = new Date([параметры])

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

Для манипуляций с объектом даты применяется множество методов объекта Date.

При этом используется такой синтаксис:

переменная = имяОбъектаДаты.методО

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

переменная = имяОбъектаДаты.метод(новое_значение)

Рассмотрим в качестве примера изменение значения года текущей системной даты:

xdate = new DateQ:)Year = xdate.getYear()С)Year = Year +33xdate.setYear(Year)xdate = new DateQ:)Year = xdate.getYear()С)Year = Year +33xdate.setYear(Year)/* создание объекта, содержащего текущую дату и время */

xdate = new DateQ:)

Year = xdate.getYear()С)

Year = Year +33

xdate.setYear(Year)

xdate = new DateQ:)

Year = xdate.getYear()С)

Year = Year +33

xdate.setYear(Year)

/* в переменной Year содержится значение текущего года */

/* в переменной Year содержится

значение,большее, чем текущий год, на 3 */

/* в объекте устанавливаетсяновое значение года */

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

new Datef Месяц дд, гггг чч:мм:сс") new Оаг.е("Месяц дд, гггг") new Date(rr, мм, дд, чч, мм, ее) newDate(rr, мм,дд)

new Оат.е(миллисекунды)

В первых двух способах параметры задаются в виде строки, в которой указаны компоненты даты и времени. Буквенные обозначения определяют шаблон параметров. Обратите внимание на разделители — запятые и двоеточия. Время указывать не обязательно. Если компоненты времени опущены, то устанавливается значение 0 (полночь). Компоненты даты обязательно должны быть указаны. Месяц указывается в виде полного его английского названия (аббревиатуры не допускаются). Остальные компоненты указываются в виде чисел. Если число меньше 10, то можно писать одну цифру, не записывая ведущий 0 (например. 3:05:32).

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

В последнем способе дата и время задаются целым числом, которое представляет количество миллисекунд, прошедших с начала 1 января 1970 года (то есть с момента 00:00:00). Количество миллисекунд, отсчитанное от указанной стартовой даты, позволяет вычислить все компоненты и даты, и времени.

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

Для чтения и изменения информации о дате и времени, хранящейся в объекте даты, служат методы объекта Date (табл. 1.3). Напомним, что объект даты создается с помощью выражения:

имяОбъектаДаты = new Date([параметры])

Затем, чтобы применить метод метод() к объекту даты имяОбъектаДаты, следует написать: имяОбъектаДаты.метод([параметры]).

Довольно большое множество всех методов можно разделить на две категории: методы получения значений (их названия имеют префикс get) и методы установки новых значений (их названия имеют префикс set). В каждой категории выделяются две группы методов — для локального формата и формата UTC. Методы позволяют работать с отдельными компонентами даты и времени (годом, месяцем, числом, днем недели, часами, минутами, секундами и миллисекундами).

Таблица 1.3. Методы объекта Date

Метод

Диапазон значений

Описание

getFuUYear()

1970-

Год

getYear()

70-...

Год

getMonth()

0-11

Месяц (январь = 0)

getDate()

1-31

Число

getDay()

0-6

День недели (воскресенье = 0)

getHours(

0-23

Часы в 24-часовом формате

getMinutes()

0-59

Минуты

getSeconds()

0-59

Секунды

getTime()

0-...

Миллисекунды с 1.1.70 00:00:00 GMT

getMHliseconds()

0-...

Миллисекунды с 1.1.70 00:00:00 GMT

getUTCFuLlYear()

1970-.

Год UTC

getUTCMonth()

0-11

Месяц UTC (январь = 0)

getUTCOate()

1-31

Число UTC

getUTCDay()

0-6

День недели UTC (воскресенье = 0)

getUTCHours()

0-23

Часы UTC в 24-часовом формате

getUTCMinutes()

0-59

Минуты UTC

getUTCSecondsQ

0-59

Секунды UTC

getUTCMilliseconds()

0-

Миллисекунды UTC с 1.1.70 00:00:00 GMT

setYear(3H34)

1970-

Установка года (четырехзначного)

SetFuUYear(3H34)

1970-.

Установка года

setMonth(3Ha4)

0-11

Установка месяца (январь = 0)

setDate(3H34)

1-31

Установка числа

setDay(3H34)

0-6

Установка дня недели (воскресенье = 0)

setHours(3H34)

0-23

Установка часов в 24-часовом формате

setMinutes(3H34)

0-59

Установка минут

setSeconds(3H34)

0-59

Установка секунд

setMiLliseconds(3Ha4)

0-...

Установка миллисекунд с 1.1.70 00:00:00 GMT

setTime(3H34)

0-...

Установка миллисекунд с 1.1.70 00:00:00 GMT

setUTCFuLLYear(3H34)

1970-

Установка года UTCл

——— проиолжепие ту

Таблица 1.3 (продолжение)

Метод

Диапазон значений

Описание

setUTCMonth(3H34)

0-11

Установка месяца UTC (январь = 0)

setUTCD3te(3H34)

1-31

Установка числа UTC

setUTCDay(3H34)

0-6

Установка дня недели UTC (воскресенье = 0 )

setUTCHours(3Ha4)

0-23

Установка часов UTC в 24-часовом формате

setUTCMinutes(3H34)

0-59

установка минут UTC

setUTCSeconds(3Ha4)

0-59

Установка секунд UTC

setUTCMilliseconds(3H34)

0-...

Установка миллисекунд UTC с 1.1.70 00:00:00 GMT

getTimezoneOffset () toDateString()

toGMTString()

toLoc3leDateString()

toLocaleString()

toLocaleTimeString()

toString()

toTimeString()

toUTCString()

D3te.parse("dateString")

Date.UTC(3H34)

0-...

Разница в минутах по отношению к GMT/UTC

Строка с датой (без времени) в формате браузера (IE5.5)

Строка с датой и временем в глобальном формате

Строка с датой без времени в локализованном формате системы (NN6, IE5.5)

Строка с датой и временем в локализованном формате системы

Строка с временем без даты и в локализованном формате системы (NN6, IE5.5)

Строка с датой и временем в формате браузера

Строка с временем без даты в формате браузера (IE5.5)

Строка с датой и временем в глобальном формате

Преобразование строки с датой в число миллисекунд

Преобразование строки с датой GMT в число

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

Следует также учитывать, что нумерация месяцев, дней недели, часов, минут и секунд начинается с 0. Для компонентов времени это естественно. Однако при такой нумерации декабрь оказывается 11-м месяцем в году, а не 12-м, как это принято повсеместно. Воскресенье (Sunday) является 0-м днем недели, а не 7-м.

Значение года XX века представляется в двузначном формате как разность между этим годом и 1900. Например, 1998 год представляется как 98. Годы до 1900 и после 1999 обозначаются в четырехзначном формате. Например, 2002 год нуж-

нотаки писать —2002, поскольку02 — это 1902 год. МетодgetFullYear() возвраща-

ет четырехзначное значение года.

Примеры

Допустим, что сейчас 2003 год.

// текущие дата и время// 2003/* объект даты today содержит информацию о дате 6 ноября 1998 года, 00:00:00 */// 98// 1998// текущие дата и время// 2003/* объект даты today содержит информацию о дате 6 ноября 1998 года, 00:00:00 */// 98// 1998today = new Date()

// текущие дата и время

// 2003

/* объект даты today содержит информацию о дате 6 ноября 1998 года, 00:00:00 */

// 98

// 1998

// текущие дата и время

// 2003

/* объект даты today содержит информацию о дате 6 ноября 1998 года, 00:00:00 */

// 98

// 1998

Year = today .getYearO today = new Date (98,11,6)

Year = today.getYearO today.getFullYearO

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

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

mydate = new Date(1952, 10,6) myday = mydate. getDayOmydate.setYear(2G03)myday = mydate .getDayOmydate = new Date(1952, 10,6) myday = mydate. getDayOmydate.setYear(2G03)myday = mydate .getDayO// "Thu Nov 6 00:00:00 UTC+0300 1952"

mydate = new Date(1952, 10,6) myday = mydate. getDayO

mydate.setYear(2G03)

myday = mydate .getDayO

mydate = new Date(1952, 10,6) myday = mydate. getDayO

mydate.setYear(2G03)

myday = mydate .getDayO

// 6

// установка 2003 года

// 4

При попытке отобразить значение объекта даты оно автоматически преобразуется в строку методом toString(). Формат этой строки зависит от операционной системы и браузера. Например, для Windows 98 и Internet Explorer 5.5 строка, содержащая информацию объекта даты, имеет следующий вид:

Thu Oct 31 13:16:23 UTC+0300 2002,

то есть четверг, октябрь, 31, 13 часов 16 минут 23 секунды всеобщего времени, скорректированного на 3 часа, 2002 год.

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

mydate = new DateO

mydate.toLocaleStringO// "31 октября 2002 г. 14:15:30"

В браузерах 1Е5.5+ ИNN6+ работают еще два метода представления отдельно даты и времени в виде строки:

mydate = new DateO

mydate. toLocaleDateStringO// "31 октября 2002 г."

mydate.toLocaleTimeStringO// "14:15:30"

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

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

Примеры

I Определим дату, которая наступит через неделю относительно текущей:

week = 1000*60*60*24*7/* количество миллисекунд

в неделе - 604800000 */

mydate = new Date()// объект даты с текущей датой

mydate_ms = mydate.getTimeQ/* текущая дата, представленная

количеством миллисекунд от 1.01.1970 00:00:00 */

mydate_ms += week// maydate_ms = mydate_ms + week

mydate.setTime(mydate_ms)/* установка новой даты

в объекте mydate */

newdate = mydate. toLocaleStringO2// новая дата в виде строки

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

datel = new, Date(2003 ,01,10)

date2 = new Date(2003,02,5)

Переменные datel и dateZ содержат длинные строки, содержащие даты (например, I он Feb 10 00:00:00 UTC+0300 2003). Чтобы перевести их в количество миллисекунд, воспользуемся методом parse() объекта Date. Затем вычислим разность Date.parse(date2) и Date.parse(datel) и разделим ее на количество миллисекунд в одних сутках:

days = (Date.parse(date2) - Date.parse(datel))/1000/60/60/24

// результат: 23

Часто приходится иметь дело с датами, представленными в виде строк в формате "дд.мм.гггг", причем месяцы нумеруются с 1 до 12, а не с 0 до 11. В этом случае, чтобы воспользоваться методами объекта Date, необходимо предварительно выполнить соответствующие преобразования.

Допустим, исходная дата strdate представляется в виде строки в формате "дд.мм.гггг", а для создания объекта даты используется формат параметров мм, ДД”. Тогда необходимые преобразования исходных данных выглядят следующим образом:

astrdate = strdate. spli t (".")/* массив подстрок, полученных

из строки strdate с использованием точки как разделителя */

/* создаем объект даты */

mydate = new Date(astrdate[2] , astrdate [1]-1 , astrdate[0])

Развивая идею, рассмотренную в предыдущем примере, мы могли бы создать функцию, принимающую в качестве параметра строку, содержащую дату и время в привычном для нас формате "дд.мм.ггг чч:мм:сс" и возвращающую объект даты. Будем считать, что в строке параметра нашей функции дата отделена от времени одним пробелом, однако допускается, что информации о времени вообще может не быть. Далее, если время присутствует, секунды не обязательно должны указываться. Если параметр является пустой строкой или вообще отсутствует, то функция возвращает объект с текущей датой.

function mydate(strdate){

if (strdate ==""|| strdate == null) {

return new Date()

}

var astrdate = strdate.split(" " )

if (astrdate. length == 1) astrdate[l] = "00:00:00" astrdate[0] = astrdate[0].split(".") astrdatefl] = astrdate[l].split(":") if (astrdate[l] .length == 1)

astrdate[l] = new Array (astrdate [1] [0] , "00", "00") else {

if (astrdate[l] .length == 2)

astrdatefl] = newArray (astrdate [l][0] , astrdate [1][1] , "00")

}

return new Date(astrdate[0][2], astrdate[0] [1] -1, astrdate[0] [2] , astrdate[l][0]. astrdate [1] [1] , astrdate[1] [2]) }

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

С использованием функции mydateQ количество дней между двумя заданными датами можно вычислить следующим образом:

datel = mydate("10.2.2003")

date2 = mydate("5 . 3 . 2003")

days = (Date.parse(date2) - Date.parse(datel))/1000/60/60/24

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

Объект Boolean (Логический)

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

переменная = new Воо1еап(логическое_значение)

Он имеет свойство prototype, методы toStringQ и значение Of (), которые имеют также объекты String и Number.

Смысл свойства prototype мы уже рассматривали применительно к объектам String и Array. Объект Boolean может понадобиться в том случае, когда всем логическим объектам, создаваемым с помощью выражения с ключевыми словами new Boolean, нужно добавить новые свойства или методы с помощью прототипа (свойства prototype).

Объект Function (Функция)

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

Выше мы уже рассматривали стандартный способ определения функции: function имя_функции(параметры) {

}}код

}

}

Существует и другой способ, основанный на выражении с ключевыми словами new Function. Согласно этому способу функция создается как экземпляр объекта Function:

имя_функции = new Function(["napl",[."napN"]. "оператор!;[;

onepaTopN]")

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

Вызов функции, определенной как экземпляр объекта Function, можно выполнить обычным способом: имя_функции(параметры).

Примеры

Srectangle = new Function("width", "height", "var s = width'height;

return s")

Srectangle(2, 3)// возвращает 6

var expr = "var s = width*height; return s"

Srectangle = new Function("width","height", expr)

Srectangle (2 , 3)// возвращает 6

a = "width" b = "height" expr = "var s = width*height; return s" Srectangle = new Function(a, b, expr) Srectangle(2, 3)// возвращает б

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

Свойства Function

arguments — массив значений параметров, переданных функции.

Индексация элементов массива производится с 0. Поскольку это массив, он имеет свойства и методы объекта Array (в частности, свойство length — длина массива).

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

Синтаксис выражения следующий: имя_функции.arguments.

Пример

Функция, приводимая в этом примере, возвращает строку, содержащую значения параметров и их общее количество, которые были указаны в вызове функции (а не в ее определении!).

function myfunc(a, b,c){

var arglenth=myfunc.arguments.length/* количество переданных

параметров */

var x=""

for (i=0; i< myfunc.arguments.length;i++) {

х += myfunc.arguments [i] + ","

}

return x+"Bcero: "+ myfunc.arguments.length

)

myfunc(5, "Вася")// "5, Вася, Всего: 2"

myfuncO// "Всего: 0"

myfunc(null,"" ,0,25)// "null , ,0,25 , всего: 4"

Length — количество параметров, указанных в определении функции.

Синтаксис: имя_функции. length

В отличие от свойства arguments, количество параметров функции можно определить в программе за пределами тела этой функции.

Пример

function myfunc(a, b, с, d){

return myfunc.arguments.length

.)

myfunc(a.b)// 2

myfunc. length// 4

caller — содержит ссылку на функцию, из которой была вызвана данная функция; если функция не вызывалась из другой функции, то значение этого свойства равно null.

Совместимость: IE4+, NN4.

Синтаксис: имя_функции. caller

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

Пример

function fl() {

f2()

}

function f2()

alert (f2 . caller) // диалоговое окно со значением f2.caller

}

f К)

Вызов функции fl() приведет к вызову функции f2(), которая выведет на экран окно с сообщением, содержащим код определения функции fl() (рис. 1.12).

MICIOSON Internet ExpktteiШ

Рис. 1.12. Результат выполнения функции fl() — окно со значением f2.caller

Методы Function

toString() — возвращает определение функции в виде строки.

Синтаксис: имя_функции.1о5Ыпд()

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

Пример

function myfunc(a, b) {

return a*b/2

I

alert (myfunc. toStringO)

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

Miciosolt Internet Ei

arctw myfbncR, b){ return Xb/2

OK

Рис. 1.13. Результат выполнения alert(myfunc.toString())

apply( [текущий_объект [, массив_параметров]]) call( [текущий_объект [ ,napl [, пар2 [ . . . napN] ] ] ])

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

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

Пример

/* Функция-конструктор объекта саг (автомобиль)*/

function car(name, model, color) {

this.name = name// название

this.model = model// модель

his.color = color// цвет

this.show = showcar// метод

}

/* Функция, вызываемая как метод объекта car */

function showcar(){

alert(this.name + " " + this.model)// окно с сообщением

:i

/* Создание экземпляра объекта car */

• mycar = new car("Жигули", "BA32105","white")

Обычный способ применения метода show к объекту car (вывод окна с сообщением) выглядит так:

mycar.show()

При этом в действительности вызывается функция showcarQ, заданная для этого метода. Текущий объект саг рассматривается как контекст для ссылок this, указанных в теле функции.

Однако методы apply() и callQ позволяют не связывать функцию showcarQ с объектом mycar. Более того, в конструкторе объекта сагможно не указывать выражение, определяющее функцию showcar в качестве метода объекта. Вместо этого можно вызвать метод showcar как объект и применить к нему метод callQ, указав в качестве параметра mycar как текущий объект:

showcar.call(mycar)

С помощью метода catlQ можно передавать параметры, отделенные друг от друга запятыми. Если параметры определены как элементы массива, то вместо саЩ) используется метод applyQ.

Объект Object

Object является корневым объектом, на котором базируются все остальные объекты JavaScript, такие как String, Array, Date и т. д. В программах можно создавать свои собственные объекты. Это можно сделать различными способами.

Способ 1

• function имя_конструктора ([ napl,... [, napN]){ код

>

имяОбъекта = new имя_конструктора( ["napl",...[, "парМ"])

Способ 2

имяОбъекта = new Object()

имяОбъекта.свойство = значение

Способ 3

имяОбъекта = {свойство!: значение![, свойство2: значение2[N]}

Для обращения к свойствам и методам объекта используется следующий синтаксис: ссылка_на_объект.свойство

ссылка_на_объект.метод([параметры])

Допустим, например, что нам требуется создать объект Сотрудник, который содержал бы сведения о сотрудниках некоторой фирмы, такие как Имя, Отдел, Телефон, Зарплата и т. п. В фирме может быть много сотрудников, но сведения о них представляются в некоторой единой структуре. Эту структуру можно создать с помощью конструктора объекта:

function Сотрудник (Имя, Отдел, Телефон, Зарплата) { this. Имя = Имя this.Отдел = Отдел this.Телефон = Телефон this.Зарплата = Зарплата }

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

создать конкретный объект, являющийся экземпляром обезличенного объекта Сотрудник, и присвоить его свойствам конкретные значения. Например, создадим конкретного сотрудника — agentOO?:

agentOO? = new Сотрудник("Джеймс Бонд", 5, "223-332", 3600.50)

Доступ к свойствам этого объекта производится обычным способом:

а§ет007.Имя// "Джеймс Бонд"

agent007.Зарплата// 3600.5

Информация о новом сотруднике добавляется аналогичным образом:

Shtirlitz = new Сотрудник("Максимов", 4, "123-4567", 4500.50)

К свойствам и методам этого объекта обращаются довольно редко, и здесь мы не будем их подробно рассматривать. Отметим свойство prototype, назначение которого мы уже описывали применительно к объектам String и Array. Метод toStringQ обычно используется при отладке программ с помощью диалоговых окон. Свойство hasOwnPropery("cBoiicTBo") используется, чтобы определить, имеется ли у экземпляра объекта указанное свойство, определенное в его конструкторе (но не с помощью prototype). Если да, то возвращается true, в противном случае — false.

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

Пользовательские объекты

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

Они не являются необходимыми для решения практических задач. С точки зрения программиста, объект представляет собой просто удобное средство организации данных и функций их обработки. Чтобы как-то организовать данные и функции в программе, далеко не всегда необходимо прибегать к такой конструкции, как объект. Ведь даже при внушительном количестве данных программист не всегда организует их в виде массива (объекта Array): бывает достаточным ограничиться простыми переменными.

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

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

Объекты в JavaScript можно создать несколькими способами. Мы рассмотрим три из них.

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

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

Рассмотрим в качестве примера функцию-конструктор, определяющую объект саг (автомобиль) со свойствами name (название), model (модель) и color (цвет): function car(name, model, color) { this.name = name this.model = model this.color = color }

Эта функция определяет объект car. Чтобы создать конкретный экземпляр объекта саг, следует выполнить выражение с вызовом этой функции, которой можно передать значения параметров. Мы уже знаем, что экземпляр объекта создается с помощью оператора присвоения с ключевым словом new:

mycar = new саг("0ка", "ВА31111", "white")

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

mycar.model//значениеравно"ВА31111"

mycar.name//значениеравно"Ока"

mycar.model="ВА311113"//значениеравно"ВА311113"

Как видите, объект — это просто особый способ группировки данных и их использования (составное имя переменной: объект.свойство).

Объекты можно создавать и с помощью конструктора new ObjectQ:

mycar = new ObjectO

mycar.name = "Ока"

mycar.model = "BA31111"

mycar.color = "white"

В этом способе отчетливо видно: создаваемый объект является экземпляром объекта Object, подобно тому как, например, создаваемый массив является экземпляром объекта Array.

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

mycar = {пате:"0ка", model:"ВАЗ11 1", color:"white"}

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

чием.

// конструктор объекта саг// конструктор объекта сагПри создании объекта мы можем задать значения свойств по умолчанию, то есть значения, которые будут иметь свойства, если при создании экземпляра этого объекта значения его свойств не указаны явным образом (то есть имеют значения null, 0 или""). Это делается с помощью логического оператора ИЛ И (обозначаемого ||) в конструкторе объекта в виде функции:

// конструктор объекта саг

// конструктор объекта саг

function car(name, model, color) { this.name = name | | "неизвестно" this.model = model || "неизвестно this.color = color | | "black"

}

mycar = new c mycar.name mycar.model mycar.colormycar = new c mycar.name mycar.model mycar.color-.ar("Жигули","") // // // //-.ar("Жигули","") // // // //создание экземпляра mycar объекта car

mycar = new c mycar.name mycar.model mycar.color

mycar = new c mycar.name mycar.model mycar.color

-.ar("Жигули","") // // // //

-.ar("Жигули","") // // // //

"Жигули"

"неизвестно"

"black"

Добавление свойств

Если возникает необходимость добавить новое свойство к существующему объекту, а также ко всем его экземплярам, то это можно сделать с помощью свойства prototype. В приведенном ниже примере мы создаем объект саг (автомобиль), затем его экземпляр mycar, а затем добавляем к свойству prototype свойство owner (владелец) с конкретным значением:

function car(name, model, color) {// конструктор объекта car

this.name = name || "неизвестно." this.model = model || "неизвестно" this.color = color || "black"

mycar = new car("Жигули","") H“)

/*

создание экземпляра mycar объекта car */

mycar.name

//

"Жигули"

mycar.model

//

"неизвестно"

mycar.color

//

"black"

car.prototype.owneг = "Иванов"

//

добавляем новое свойство

mycar.owner

//

"Иванов"

Если нужно добавить новое свойство только к конкретному объекту (к данному экземпляру объекта), то это можно сделать просто с помощью оператора присвоения:

имяОбъекта.новое_свойство = значение

В следующем примере мы создаем объект саг вообще без свойств, а затем добавляем его экземпляры и к ним — различные свойства.

function car(){}

mycarl = new car()

mycar2 = new car()

mycarl.name = "Жигули"

mycar2.model = "BA32106"

mycarl.name mycarl.model mycar2.namemycar2.modelmycarl.name mycarl.model mycar2.namemycar2.model// "Жигули"

mycarl.name mycarl.model mycar2.name

mycar2.model

mycarl.name mycarl.model mycar2.name

mycar2.model

// undefined (не определено)

// undefined (не определено) //"BA32106"

Связанные объекты

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

Ниже приведены конструкторы объектов саги photo. Чтобы добавить объект photo в объект саг, мы добавили в объект саг свойство, значением которого является ссылка на объект photo.

function car(name, model, color, photo) {// конструктор объекта car

thi s.name = name

thi s. model = model

thi s. color = color

this.photo = photo// ссылка на объект photo

>

function photo (name, url) {// конструктор объекта photo

thi s.name = name

thi s . url = url

}

Создадим пару конкретных объектов, являющихся экземплярами объекта photo:

photol = newphotoC'OKa", "/images/okal.jpg") I

photo2 = newphotoC'OKa" , "/images/oka2 . gi f" )

Теперь создадим экземпляры объекта car:

mycar = new саг("0ка", "ВА31111 " . "white". photol)

mycar.photo.url// "/images/okal.jpg"

mycar.model//"BA31111"

mycar = new car(мОкаи. ,,ВА31111И| "white", photo2)

mycar.photo.url//"/images/oka2.gif"

mycar.model//"BA31111"

Обратите внимание: чтобы узнать значение URL-адреса расположения файла с картинкой, относящейся к объекту mycar, мы обращаемся к свойству ur L объекта photo, который сам является свойством объекта mycar или, другими словами, подобъектом объектаmycar.

Пример создания базы данных с помощью объектов

Теперь рассмотрим пример создания базы данных автомобилей, находящихся на одной стоянке. Список всех автомобилей можно представить в виде таблицы со столбцами: name (название), model (модель), regnum (номер), owner (владелец) и photo (фотография). Будем считать, что на фотографии номер автомобиля не показан, так что она отображает не конкретный автомобиль, а его тип (название, модель и цвет). Конечно, можно создать базу данных в виде одной таблицы, однако мы поступим иначе и создадим две таблицы. Одна из них будет вспомогатель-

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

Справочник типов автомобилей будет содержать наиболее общие сведения об автомобилях: название, модель и фотографию (точнее, URL-адрес ее файла). На стоянке может находиться несколько автомобилей одного типа (например, «Жигули», ВА32101 белого цвета), но в справочнике этот тип будет упомянут лишь один раз. В нашей базе данных справочник типов автомобилей будет представлять объект ref:

function ref(name, model, url) {is.name = namethis.model = modelthis.url = urlfunction ref(name, model, url) {is.name = namethis.model = modelthis.url = url/* конструктор справочника типов автомобилей */// название марки автомобиля// модель// URL-адрес файла с фотографией/* конструктор справочника типов автомобилей */// название марки автомобиля// модель// URL-адрес файла с фотографией

function ref(name, model, url) {

is.name = namethis.model = model

this.url = url

function ref(name, model, url) {

is.name = namethis.model = model

this.url = url

/* конструктор справочника типов автомобилей */

// название марки автомобиля

// модель

// URL-адрес файла с фотографией

/* конструктор справочника типов автомобилей */

// название марки автомобиля

// модель

// URL-адрес файла с фотографией

}

Заполним справочник конкретными записями. Множество всех таких записей удобно определить как массив (назовем его aref). Тогда элементы этого массива определим как экземпляры объекта ref:

aref = new ArrayO// массив записей справочника типов автомобилей

aref[0] = new ref("Жигули",, мВаз210Г'. •'pict0.gif")

aref [ l] = new ref ("Жигули" , "Ваз210б", "pictl.gif")

aref[2] = new ref("Bcwira", "ГА324", "pict2.gif")

aref[3] = new ref("OKa", "Basllll", "pict3.gif")

В нашем справочнике описаны только четыре типа автомобилей.

Теперь создадим список всех автомобилей на стоянке. Этот список удобно оформить как массив, каждый элемент которого представляет запись о конкретном автомобиле. Формально элементы этого массива мы определим как экземпляры объекта <" - который будет содержать ссылку на справочник — объект ref.

Итак, сначала напишем код функции-конструктора объекта саг:

// номер автомобиля// владелец// ссылка на справочник// номер автомобиля// владелец// ссылка на справочникfunction car(regnum, owner, ref) { this.regnum = гegnum this.owner = owner

// номер автомобиля

// владелец

// ссылка на справочник

// номер автомобиля

// владелец

// ссылка на справочник

好и s.ref = ref

}

Далее создадим записи о конкретных автомобилях на стоянке. Массив записей назовем асаг:

acar[0] = new acar[l] = new acar[2] = new acar[3] = new acar[4] = new acar[5] = new acar[6] = newacar[0] = new acar[l] = new acar[2] = new acar[3] = new acar[4] = new acar[5] = new acar[6] = newcar("A123BX car("M345CT", car("E678CA",, car ("K0560X", car ("K895MX", car ("P340HY", car ("03210K" ,car("A123BX car("M345CT", car("E678CA",, car ("K0560X", car ("K895MX", car ("P340HY", car ("03210K" ,acar = new ArrayO

acar[0] = new acar[l] = new acar[2] = new acar[3] = new acar[4] = new acar[5] = new acar[6] = new

acar[0] = new acar[l] = new acar[2] = new acar[3] = new acar[4] = new acar[5] = new acar[6] = new

car("A123BX car("M345CT", car("E678CA",, car ("K0560X", car ("K895MX", car ("P340HY", car ("03210K" ,

car("A123BX car("M345CT", car("E678CA",, car ("K0560X", car ("K895MX", car ("P340HY", car ("03210K" ,

'•Иванов". aref [1])"Петров", aref[l])

"Сидоров". aref[0]) "Михайлов", aref[2]) "Дунаев", aref[3]) "Павлов", aref[2]) "Николаев", aref[2])

В нашем списке всего 7 записей. Модель ВА32106 в нем встречается два раза, ГА324 — три раза, а остальные — по одному разу. Если бы мы создавали базу данных без справочника, то нам пришлось бы многократно повторять одни и те же данные при определении массива асаг.

Далее приводятся примеры обращения к свойствам нашей базы данных:

асаг[4].ref.model//"ВА31111"

асаг[3] . ref.name//"Волга"

асаг[3].owner//"Михайлов"

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

Базу данных, создание которой мы рассмотрели выше, можно отобразить на экране монитора в окне браузера. Для этого необходимо прежде всего создать HTML- программу с таким элементом, как таблица. Напомним, что таблица определяется тегами <TABLE>, <TR>, <TH>, <TD> и др. Вы можете создать в HTML-программе раздел, обрамленный тегами <SCRIPT> и </SCRIPT>, между которыми разместить рассмотренный выше код на языке JavaScript. А далее есть два пути.

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

Написать программу на JavaScript, генерирующую нужную последовательность

тегов и данных как строку, а затем воспользоваться методом writeQ объекта document для ее записи в текущий HTML-документ и исполнения браузером. Этот способ интереснее и предпочтительней, если таблица содержит много строк. Небольшой объем кода обеспечивается тем, что формирование строки с HTML-кодом происходит в цикле. К этому располагает то, что строки (записи) нашей базы данных определены в виде массива.

В листинге 1.1 приведен HTML-код, содержащий только сценарий. Для упрощения ситуации мы формируем таблицу только с тремя столбцами. Мы не обращали внимания на дизайн таблицы, определяемый специальными атрибутами тегов (рис. 1.14).

«З базаданных автомобилей - Microsoft Internet

I

OgC8

• J

:ОсТ@Н(ХМ4ГЬ Обювкть

堂» Дэой

•「•■'!• ] С \Мои дерумектьЛпрммеры htjjji, х>「1。；叶“浴

Ссылка >»

Название;| Номер Щладелец!

Жигули

|А123ВХ |Иванов I

1(Жигули

iJM345CT Щегров

Жигули

JE678CA |Сндоров |

Волга

Щ056ОХ Михайлов

Ока

РК895МХ' :|Дунаев

'Волга

••• |P34OHY" Щавлов

Шолга

;— |5з210К 'Николаев

—J

!

11 J Моиког.ки

Рис. 1.14. Так выглядит база данных автомобилей в окне браузера

Листинг 1.1. Код для отображения базы данных автомобилей в браузере

<HTML>

<НЕАО><Т1Т1_Е>База данных автомобилей</Т1Т1Е></НЕАО>

<SCRIPT>

/* Конструкторы */

function ref(nami

Jr l ) {

/•» конструктор справочника типов автомобилей */

this.name = name

//

название марки автомобиля

this.model = model

//

модель

this.url = url

}

function car(regnum,own

//

URL-адрес файла с фотографией

er, ref)

/*

конструктор списка

автомобилей на стоянке */

=

//

номер автомобиля

this.owner = owner

//

владелец

ref = ref

/* Собственно база данных

*/

//

ссылка на справочник

aref = new ArrayO// массив записей справочника типов автомобилей

aref[0] = new ref("Жигули",,

aref[l] = new ref("Жигули" ,"Ваз2106","pictl.gif")

aref [2] = new ref (ВсгеТ"АЖ ”「A324”，"pict2.gif)

aref[3] = new ref ("Ока". "ВазПП", "pict3.gif")

acar =

new ArrayO

acar[0]

= new car ( "A123BX"

"Иванов",

aref [1])

acar[l]

= new car ( "M345CT""Петров",

"Петров",

aref[l])

acar[2]

= new car ( "E678CA",

"Сидоров"

aref[0])

acar[3]

= new car ( "KQ56OX",

"Михайлов

, aref [2])

acar[4]

= new car( "K895MX""Дунаев",

"Дунаев",

aref[3])

acar[5]

= new car ( "P340HY""Павлов",

"Павлов",

aref [2])

acar[6]

= new car( "03210K"

"Николаев

, aref[2])

strTab

ABORDER=1>

<TR>"

strTab += "<ТН>Название</ТН><ТН> Номер</ТН> <TH>Bлaдeлeц</TH></TR>"

/* Формир вание строк таблицы */

or(i=0;i<=acar.length-1;1++){

trTab += "<TR><TD> " + acar[i]i +

trTab += "</TD><TD>" + acar[i].owner + "</TD></TR>"

strTab += "</TABLE>"

записываем строку strTab

в HTML-документ и выполняем его </SCRIPT>

</HTML>

Здесь в теле оператора цикла for мы использовали разновидность оператора присвоения +=. Напомним, что выражение х += у эквивалентно выражению х = х + у. Мы дважды использовали выражение с этим оператором только лишь для того, чтобы выражение справа от него не было слишком длинным.

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

"<TD><IM G SR C ="'+ aca r [i ] . ref.url +'

Специальные операторы

В этом разделе описываются операторы, которые при программировании наJava- Script используются относительно редко. Возможно, они вам когда-нибудь потребуются. Именно поэтому я и включил в книгу данный раздел. Новички могут пока пропустить его.

Побитовые операторы

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

Таблица 1.4. Побитовые операторы

Оператор

НазваниеЛевый операнд Правый операнд

к

1

Побитовое «и»Целое числоЦелое число

Побитовое «или»Целое числоЦелое число

A

Побитовое исключающее Целое числоЦелое число

«или»

—

Побитовое«не»Целое число

«

СмещениевлевоЦелое числоКоличество битов, на которое

производится смещение

»

Смещение вправоЦелое числоКоличество битов, на которое

производится смещение

»>

Заполнение нулями приЦелое числоКоличество битов, на которое

смещении вправопроизводится смещение

Операторы &, |, ли~ напоминают логические операторы, но их область действия - биты, а не логические значения. Оператор - изменяет значение бита на противоположное: 0 на 1, а 1 — на 0. В табл. 1.5 поясняется, как работают операторы &, |, Л.

Таблица 1.5. Работа операторов &, |,

X

YX&Y

X|Y

XAY

1

1

1

1

0

1

0

0

1

1

0

1

0

1

1

0

0

0

0

0

Например, 2&3 равно 2, а2( 3 равно 3. Действительно, в двоичном представлении 2 есть 10, а 3 — 11. Применение побитовых операторов даст в случае оператора & двоичное число 10, то есть десятеричное число 2, а в случае оператора | — двоичное число И, то есть десятеричное 3.

У операторов смещения один операнд и один параметр, указывающий, на какое количество бит следует произвести смещение. Например, 3 «2 равно 12, потому что смещение влево на два бита двоичного числа 1 1 (десятеричное 3) дает 1100,), что в десятеричной форме есть 12. Результат вычисления выражения б»2 — 1. Действительно, число 6 в двоичной форме это 110; смещение его вправо на два бита дает 1 как в двоичной, так и в десятеричной форме.

Объектные операторы

Оператор удаления свойств объекта (delete)

Удалить свойство объекта, а также элемент массива можно с помощью оператора delete. Обычно этот оператор используют для удаления элементов массива: delete элемент

ВНИМАНИЕ -

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

Пример

// 4// 4// "a"// undefined// "С"// "d"// 4// 4// "a"// undefined// "С"// "d"myarray = new Array("а","b". "с", "d ")

// 4

// 4

// "a"

// undefined

// "С"

// "d"

// 4

// 4

// "a"

// undefined

// "С"

// "d"

myarray.length

delete myarray[l]

myarray.length

myarray [0]

myarray[1]

myarray[2]

myarray [3]

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

Оператор проверки наличия свойств (in)

Этот оператор позволяет проверить, имеется ли некоторое свойство или метод у того или иного объекта. Левый операнд представляет собой ссылку в виде строки на интересующее нас свойство или метод, а правый операнд — объект. Ссылка на метод содержит лишь его название без круглых скобок. Если свойство или метод содержится в объекте, то возвращается true, иначе — false. Отсюда следует, что оператор in можно применять в условных выражениях (в операторах if, switch, for, while, do-while).

Примеры

Например, объектdocument,представляющийзагруженныйв браузер HTML-документ, имеет метод writeQ. Чтобы убедиться в этом, следует написать выражение

"write" in document// значение равно true

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

function Сотрудник (Имя, Отдел, Телефон, Зарплата) { this.Имя = Имя this.Отдел = Отдел this.Телефон = Телефон this.Зарплата = Зарплата )

agent007 = new Сотрудник( "Джеймс Бонд", 5, "223-332")

"Телефон" in agent007// true

"Ученая степень" in agentS07// false

Оператор in поддерживается браузерами 1Е5.5+,NN6+.

Оператор проверки принадлежности объекта модели (instanceof)

Этот оператор позволяет проверить, принадлежит ли некоторый объект объектной модели JavaScript. Левый операнд представляет проверяемое значение, а правый — ссылку на корневой объект, такой как Array, String, Date и т. п. Выражение с оператором instanceof возвращает true или false и, таким образом, может использоваться в условных выражениях (в операторах if, switch, for, while, do-while).

Пример

Созданный массив является экземпляром объекта Array, а последний сам является экземпляром корневого объекта Object.

myarray = new ArrayQ

myarray instanceof Array// true

Array instance Ob] iв// true

Myarray instanceof String// false

Оператор in поддерживается браузерами 1Е5.5+, NN6+.

Комплексные операторы

Оператор условия (?:)

Этот оператор является сокращенной формой оператора условного перехода if... else... Его так и называют: оператор условия. Обычно он используется вместе с оператором присвоения одного из двух возможных значений, в зависимости от значения условного выражения. Синтаксис оператора условия следующий:

условие ? выражение! : выражение2

С оператором присвоения оператор условия имеет такой вид:

переменная = условие ? выражение! : выражение2

Оператор условия возвращает значение выражения выражение!, если условие истинно, в противном случае — значение выражения выражение2.

Пример

d = new Date()

х = d.getDateO

typedate = (x%2 == 0)&&(x > 1) ? "четное" : "нечетное"

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

function iff(c ondition, exprl, expr2){

if (condition)

return eval(exprl)

else

return eval(expr2)

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

Оператор определения типа (tipeof)

Этот оператор используется для проверки, относится ли значение к одному из следующих типов: string, number, boolean, object, function или undefined. Значение, возвращаемое оператором typeof, является строковым. Оно содержит одно из перечисленных выше названий типа. Единственный операнд пишется справа от ключевого слова typeof.

Примеры

var x п = 3.14 N = new Number(3.14) s = "Привет всем!" a = new Array(l, 2, 3, 4, 5) function f(){}

typeof x // wundefined**

typeof n ' "number"

typeof N//•'objecf

typeof s//“stZng”

typeof a〃"object"

typeof f//"function"

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

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

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

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

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

Таблица 1.6. Распределение операторов по приоритетам

ПриоритетОператорКомментарий

!

О

От внутренних к внешним

[]

Значение индекса массива

function()

Вызов функции

2

Логическое«не»

-

Побитовое «не»

-

Отрицание

++

Инкремент (приращение)

Декремент

new

typeof

void

delete

Удаление объектного элемента

3

•

Умножение

/

Деление

%

Деление по модулю (остаток от деления)

4

Сложение (конкатенация)

-

Вычитание

5

土V

Побитовые сдвиги

»

»>

6

<

Меньше

<e

Не больше (меньше или равно)

A

Больше

>"

Не меньше (больше или равно)

7

—

Равенство

Неравенство

8

&

Побитовое «и»

9

л

Побитовое исключающее «или»

10

Побитовое «или» (дизъюнкция)

!1

&&

Логическое «и» (конъюнкция)

12

II

Логическое «или»

продолжение $

Таблица 1.6 (продолжение)

ПриоритетОператорКомментарий

?Условное выражение (оператор условия)

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

2

/=

%= «=

&=

,Запятая (разделитель параметров)

Кроме приоритетов следует также учитывать, что сложные логические выражения, состоящие из нескольких более простых, соединенных операторами И и ИЛИ, выполняются по так называемому принципу короткой обработки. Это означает, что значение всего выражения бывает можно определить, вычислив лишь одно или несколько более простых выражений, не вычисляя остальные. Например, выражение х&&у вычисляется слева направо; если значение х оказалось равным false, то значение у не вычисляется, поскольку и так известно, что значение всего выражения равно false. Аналогично, если в выражении х || у значение х равно true, то значение у не вычисляется, поскольку уже ясно, что все выражение равно true.

ВНИМАНИЕ

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

11. Зарезервированные ключевые слова

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

Слово interface является ключевым — и, следовательно, его нельзя использовать в качестве имени пользовательского объекта или функции. Однако можно применить некоторую модификацию этого слова: myinterface, xlnterfaceи т. п.

ВНИМАНИЕ

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

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

СОВЕТ

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

Таблица 1.7. Список ключевых слов

abstract

else

int

super

boolean

extends

interface

switch

break

false

long

synchronized

byte

final

native

this

case

finally

new

throw

catch

float

null

throws

char

for

package

transient

class

function

private

true

const

goto

protected

try

continue

if

public

typeof

default

Implements

reset

var

delete

import

return

void

do

in

short

while

double

instanceof

static

with

Глава 2. Основы создания сценариев

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

Из истории программирования

Давным-давно, примерно с 1950 по I960 год, в программировании не было сколько-нибудь явно выраженных технологий. Не существовало понятия вызова функции, данные хранились где попало, для управления вычислительным процессом широко использовались операторы перехода, в том числе и оператор GO TO (перейти туда, кудая сказал). Программные коды были огромными, содержали массу ошибок и стоили очень дорого. Операторы GO TO бросали читателя исходных текстов то вверх, то вниз по листингу исходного текста программы. Отладка программ занимала львиную долю всего времени разработки. Тогда программировали в цифровых кодах команд, а переход к языку мнемокодов Assembler казался этапом значительной автоматизации работы программистов. Нормой производительности труда программистов было 3-5 команд в день. В действительности программист за месяц писал тысячи кодов, хотя результат состоял всего лишь из нескольких их десятков. А зачем он это делал, если ему платили по норме? В те романтические годы программистом мог быть только специалист по вычислительной технике. При этом программисты, как правило, были еще и математиками. Математиками их называли до середины 80-х годов прошлого века независимо от того, имели они специальное образование или нет, понимали ли они хоть что- нибудь в этой изящной и прекрасной науке или нет.

В период с 1960 по 1975 год появились первые функциональные языки программирования, такие как FORTRAN и ALGOL. Эти языки в основном предназначались для поддержки формульных вычислений, необходимых ученым и инженерам. Расчет траекторий орбит космических аппаратов и планет, создание программ наведения антенн, прогноз погоды и параметров электронных схем — далеко не

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

В конце 70-х годов стало ясно, что программы и данные должны иметь четко выраженную структуру, чтобы их можно было быстро разрабатывать, отлаживать, модифицировать и интегрировать с другими программными комплексами. На эту тему написаны сотни книг и статей. Тема публикаций и дискуссий — структурное программирование. Оно в итоге значительно улучшило качество программных продуктов. PL/I и С — наиболее типичные и знаменитые языки структурного программирования. Появилась возможность создавать сложные структуры данных с помощью средств языка. Например, программист мог создать структуру Автомобиль для хранения в ней всехнеобходимыхданныхоб автомобиле: марки, номера, цвета, имени владельца и т. п. При этом все данные хранились в одном месте, а не рассеивались по множеству переменных. Те, кто знаком с программированием баз данных, могут удивиться: а что тут особенного? Одно дело сохранять данные в соответствии с некоторой структурой на диске, а другое — обеспечивать поддержку структуры на уровне языка.

С 1990 года началась эра так называемого объектно-ориентированного программирования (ООП). По существу, ООП основывается на расширении концепции структуры. Если раньше в структуре хранились лишь статические данные, то теперь стало возможным хранить и описания активных элементов, называемых методами. Такие структуры в языках ООП называются классами, или объектами. Методы объекта описывают его поведение. Например, разрабатывая компьютерную игру, программист может создавать объекты для всех ее персонажей. Кроме статических характеристик (имя, внешний вид, координаты положения), объект может содержать и описания методов изменения положения, своего внешнего вида и реакции на действия игрока. Другими словами, объект представляет собой некий контейнер, содержащий переменные и функции, которые применительно к объекту называются его свойствами и методами. Замечательно еще и то, что в языках, поддерживающих ООП, из одних объектов можно делать другие, добавляя к ним новые свойства. При этом созданные таким образом новые объекты наследуют свойства исходных (родительских) объектов. Например, объект Студент наследует свойства объекта Человек, а последний наследует свойства объекта Млекопитающее. Благодарямеханизмунаследованияпрограммист освобождается от необходимости повторять историю создания новых объектов начиная от Адама.

Самый известный и широко используемый язык ООП — C++. Язык С (просто Си) — мощный, но низкоуровневый язык программирования. В нем есть все необходимое для создания объектов, однако ответственность за это полностью ложится на программиста. Язык C++, напротив, большую часть рутинной работы по созданию объектов (классов) берет на себя. Существуют и другие объектноориентированные языки (например, Java и Object Pascal), но C++ стал стандартом ООП-языка де-факто. Если какой-либо язык так или иначе поддерживает то

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

Не для всех программистов, воспитанных на идеях функционального и структурного программирования, переход к ООП был гладким и естественным. В начале 90-х годов появляется множество популярных книг, авторы которых пытались с помощью простых аналогий из повседневной жизни объяснить суть объектов. Обычно в качестве примеров приводились магнитофоны и микроволновые печи с кнопками и регуляторами, которые должны были проиллюстрировать идею свойств и методов. Признаюсь, мне тоже было нелегко освоить новую философию программирования. Вместе с тем я видел, как новички без особых затруднений осваивали C++ и другие объектные языки. Они попросту не были обременены стереотипами. В конце концов и я с этим разобрался. Во-первых, в отношении ООП я задавал неправильный вопрос «а зачем это надо?», который только сбивал с толку. Дело в том, что я уже давно мыслил в терминах ООП и даже создавал объекты, но посредством функциональныхязыков. Поэтому, естественно, я не мог получить хороший ответ на свой вопрос «зачем?». Для меня тогда единственным оправданием ООП-языков оставалось лишь наличие компиляторов для них, осуществляющих проверку синтаксической правильности, и средства отладки программ. Во-вторых, аналогия объектов с бытовыми приборами вызывала у меня неверные ассоциации, скорее удаляя от понимания, чем приближая к сути. Возможно, это связано с индивидуальными особенностями моего восприятия. Тем не менее лучшей, на мой взгляд, интерпретацией объекта является контейнер, содержащий переменные и функции. Представьте себе, что я написал некую программу, предназначенную для решения некоторых задач. Свое творение я назвал объектом и сделал его доступным для пользователя или программиста. Это означает, что я опубликовал описание этого объекта, в котором указал, какие внутренние переменные и функции могут быть использованы и каким образом, чтобы объект работал по своему назначению. Иначе говоря, я просто вывел наружу датчики и органы управле ния своим объектом, а все остальное скрыл от г лаз пользователя. Со временем я могу усовершенствовать программный код своего объекта, не сообщая об этом пользователю, и, что еще важнее, при соблюдении определенных условий я могу не тестировать свой модифицированный объект в комплексе с другими.

В связи с появлением многозадачных операционных систем, таких как Windows, OS/2, Unix и Linux, открылись возможности для так называемого событийного программирования. Программные единицы (объекты, в частности) могут реагировать на действия пользователя (например, щелчок кнопкой мыши, нажатие на клавишу и др.), а также передавать сообщения о событиях другим программным единицам. При этом внешне ситуация выглядит так, будто одновременно функционирует множество объектов, в какой-то степени автономных, но действующих

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

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

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

Несмотря на похожие названия, между JavaScript и Java очень мало общего. Java похож на C++, но, в отличие от него, является не зависимым от платформы среды выполнения.

От простого до динамического HTML

Простой HTML

Для создания веб-страниц разработан довольно простой язык HTML (Hyper Text Markup Language — язык разметки гипертекста). Изначально он задумывался как язык разметки документа, содержащего текстовую и графическую информацию вместе с элементами управления, такими как ссылки на другие документы. Тексты, содержащие элементы, которые являются ссылками на другие доXкументы, называются гипертекстами, а сами ссылки называют еще гиперссылками. Кроме текстовой и графической информации, а также ссылок в документ можно включать аудио- и видеофрагменты. Чтобы создать такой документ, достаточно в обычном текстовом редакторе (например, в Блокноте Windows) написать программу на языке HTML Такие программы сохраняются в файлах с расширением htm или html, а выполняются они в веб-браузере, например Microsoft Internet Explorer или Netscape Navigator. Инструкции HTML называют тегами, или дескрипторами. Они выделяются угловыми скобками (< и >). Каждый тег имеет свое название, являющееся ключе-

вым словом. Спецификация тега обеспечивается его параметрами, которые обычно называют атрибутами. Атрибуты могут иметь значения (аргументы). Названия тегов и атрибуты можно писать в любом регистре. Атрибуты, если они имеются, пишутся за названием тега в произвольном порядке через пробел. Формат тега имеет следующий вид:

<НАЗВАНИЕ_1 ЕГА [АТРИБУТ1 [= значение!] . . . [АТРИБУТМ [= значением] ]> Квадратные скобки показывают, что заключенные в них элементы не обязательны . Существуют теги без атрибутов (например, тег перехода на новую строку < BR>), а также атрибуты без аргументов (например, NORESIZE в теге <FRAME>). Даже если для тега предусмотрены атрибуты, во многих случаях их можно не указывать, используя значение по умолчанию. Так, тег <IMG SRC = "picture.jpg"> дает браузеру команду вывести на экран графический объект из файла picture.jpg. Здесь ключевое слово IMG 'G — название тега, SRC — атрибут, a "picture.jpg" — аргумент (значение). Атрибут ID присущ любому тегу, но если он не используется, то по умолчанию принимается, что его значение — пустая строка.

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

Большинство тегов являются контейнерными. Это означает следующее.

Тегу<ТЕГ.> обязательно соответствует заключительный тег</ТЕГ>.

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

Например, теги тела документа <BODY>, ссылки <А . . .>, раздела <DIV>, таблицы <TABLE> и др. являются контейнерными, то есть им соответствуют заключительные теги </BODY>, </A>, </DIV>, </TABLE>. Говоря «внутри тега <ТЕГ>», мы имеем в виду то, что расположено между тегами <ТЕГ> и </ТЕГ>. В приведенном ниже примере показано, что внутри тега ссылки <А> можно разместить тег графического изображения <IMG>, создав таким образом графическую ссылку:

<А HREF = "www.yandex.ru"><IMG SRC ="banner.gif"></A>

HTML-программа (HTML-код), формирующая документ, начинается тегом < HTML> и заканчивается тегом </НТМ1>. Таким образом, <HTML> является контейнерным тегом, причем самого верхнего уровня.

В HTML-коде существуют теги, которые никак не проявляются в окне браузера какими бы то ни было визуальными эффектами (например, <HEAD>, <META>, <SCRIPT>). Вместе с тем существует множество тегов, которым соответствуют определенные видимые элементы документа (веб-страницы). Например, тегу <IMG> соответствует изображение, Tery <BUTTON> — кнопка, тегу<INPUT> — поле ввода данных, переключатель или кнопка, в зависимости от значения атрибута TYPE.

Приведенный ниже HTML-код формирует простую веб-страницу, содержащую заголовок первого уровня (<Н1>), изображение (<IMG>), ссылку (<А>) и форму (<FORM>), которая содержит поле ввода данных (<INPUT>) и кнопку (<BUTTON>).

<HTML>

<Н1>Моя веб-страница</Н1>

<IMG SRC="pict.jpg"> ,

<А HREF = "www. admi ral. ru/~dunaev">Caiu автора</а>

<FORM>

<INPUT TYPE="text" VALUE="">

<p>

<ВиТТОМ>Нажми здесь</В1ЯТОМ>

</FORM>

</HTML>

На рис. 2.1 приведен этот HTML-документ в окне браузера, а также показано соответствие его элементов тегам HTML-кода.

aC'\Mminoit!|M<!HmVnj#.iilht IaC'\Mminoit!|M<!HmVnj#.iilht I

aC'\Mminoit!|M<!HmVnj#.iilht I

aC'\Mminoit!|M<!HmVnj#.iilht I

Моя Web-страница

晔,』近晔,』近.■»y_hf tat! • Sum.■»y_hf tat! • SumСайт автораСайт автора<HTML><Н1>Моя веб-страница</Н1><IMG SRC='pict.jpg'><А HREF = 'ww»v. admiral, ru/~dunaev>'Ca(vrавтора</А>;'<FORM>-<INPUTTYPE ='text' VALUE=p<В1ЛТОЫ>Нажми здесь</ВиТТОЫ></FORM></HTML><HTML><Н1>Моя веб-страница</Н1><IMG SRC='pict.jpg'><А HREF = 'ww»v. admiral, ru/~dunaev>'Ca(vrавтора</А>;'<FORM>-<INPUTTYPE ='text' VALUE=p<В1ЛТОЫ>Нажми здесь</ВиТТОЫ></FORM></HTML>■3■3

晔,』近

晔,』近

.■»y_hf tat! • Sum

.■»y_hf tat! • Sum

Сайт автора

Сайт автора

<HTML>

<Н1>Моя веб-страница</Н1>

<IMG SRC='pict.jpg'>

<А HREF = 'ww»v. admiral, ru/~dunaev>'Ca(vrавтора</А>;'

<FORM>

-<INPUTTYPE ='text' VALUE=

p

<В1ЛТОЫ>Нажми здесь</ВиТТОЫ>

</FORM>

</HTML>

<HTML>

<Н1>Моя веб-страница</Н1>

<IMG SRC='pict.jpg'>

<А HREF = 'ww»v. admiral, ru/~dunaev>'Ca(vrавтора</А>;'

<FORM>

-<INPUTTYPE ='text' VALUE=

p

<В1ЛТОЫ>Нажми здесь</ВиТТОЫ>

</FORM>

</HTML>

■3

■3

Рис. 2.1 . Тегам HTML соответствуют элементы HTML-документа в окне браузера

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

Если не использовать специальных средств позиционирования, то элементы в документе будут располагаться в порядке их появления в HTML-коде соответствующих им тегов. При этом если не использовать теги перевода строки (<BR>) или абзаца (<Р>), то элементы будут располагаться рядом друг с другом по горизонтали или по вертикали, в зависимости от размеров окна браузера и их собственных размеров. Теги <BR> и <Р> являются довольно слабыми средствами форматирования.

Один из часто применяемых способов разметки документа основан на использовании группы тегов, определяющих таблицу (<TABLE>, <TR>, <TD> и др.). Таблицы можно создавать не обязательно с видимыми границами (рамками). С помощью таблицы можно просто разбить все поле документа на прямоугольные ячейки одинаковых или различныхразмеров и размещать в них нужные элементы (тексты, изображения, кнопки, ссылки и т. п.). Во многих случаях этого способа разметки вполне достаточно.

Динамический HTML

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

В ответ на потребность в мощных средствах форматирования появились так называемые CSS (Cascading Style Sheets — каскадные таблицы стилей). Теперь параметры тегов стало возможным задавать не только с помощью атрибутов, но и в строке, являющейся значением специального атрибута STYLE. С помощью этого атрибута можно определить индивидуальные параметры форматирования и позиционирования практически для всех тегов. Кроме атрибута STYLE был введен в обращение контейнерный тег <STYLE>. В теге <STYLE> можно задать индивидуальные стили для ряда тегов, а также создать произвольные стили и закрепить за ними имена. Затем для придания какому-нибудь тегу свойств поименованного стиля можно обратиться к нему с помощью атрибута CLASS = имя_стиля. С помощью стилей можно определить параметры форматирования текстов, задать фильтры (визуальные эффекты) для текстовых и графических элементов, а также задать три координаты позиционирования элементов. Позиционирование, намойвзгляд,— главная функциональная возможность CSS. Координаты top и left, задаваемые с помощью стиля, определяют положение элемента на плоскости документа, а ко- ординатаz-indexуказывает еще и слой документа. Так, задавая значения top и left для различных элементов, можно добиться того, что одни элементы будут накрывать другие. Чтобы указать, какой из них должен быть выше или ниже другого (независимо от порядка следования в HTML-коде), служит параметр z-index.

Объекты сторонних производителей, созданных с помощью различных языков программирования, вставляются в HTML-документ посредством контейнерных тегов <OBJECT> и <EMBED>. С их помощью можно встроить в HTML-документ звук, видео, Flash-анимацию, векторную графику, таблицы базы данных и многое другое.

Для управления элементами HTML-документов и даже самим браузером, генерации новых документов, организации диалогового взаимодействия с пользователем, выполнения каких-то расчетов и обработки данных в HTML была предусмотрена интеграция со специальными языками программирования. Программы, написанные на этих языках, называют сценариями (scripts). Стандартным языком сценариев является JavaScript. Его должны уметь интерпретировать все веббраузеры. Браузер Microsoft Inter n<net Explorer помимо JavaScript воспринимает еще один язык — VisualBasicScript, чего нельзя сказать о Netscape Navigator.

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

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

Где, что и как делают сценарии

Расположение сценариев

Программы, работающие с объектами HTML-документа, называют сценариями. Вы можете написать программу на языке JavaScript. Она может иметь самостоятельную ценность, используя собственные ресурсы JavaScript, но, кроме Того, она способна взаимодействовать с объектами среды, окружающей интерпретатор языка. Интерпретатор JavaScript, встроенный в веб-браузер, предоставляет пользователю возможность использовать средства языка для д<)сту】 ia к ресурсам браузера и всего того, что в нем находится в данный момент. А именно к свойствам браузера и документа, загруженного в него. Конечно, вам не терпится узнать, как добраться до этих ресурсов, чтобы воздействовать на них. Это делается с помощью сценариев, написанных на языке JavaScript в некоем месте. А где именно? Есть несколько вариантов размещения программ на JavaScript, выполняющих роль сценариев для HTML-документов. Ниже мы их и рассмотрим.

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

Сценарий в HTML-документе можно разместить несколькими способами. Свобода подкупает, требуя взамен принять хоть какое-нибудь решение. Трудности наступают именно при принятии волевого решения. Мы начинаем раздумывать о правильности сделанного выбора. Именно тогда и возникают мечты о приемлемом рецепте. Рецепты можно выдавать только при четко поставленном диагнозе и фиксированном анамнезе. В программировании это трудно сделать. Программирование — это искусство, хотя оно и близко к науке. Первый принцип искусства программирования — знаменитая «бритва Оккама»: не умножай сущностей. Иначе говоря — не усложняй. Все, заканчиваем лирику и приступаем к делу.

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

Контейнерный тег <SCRIPT>, объемлющий код сценария, может содержать следующие атрибуты.

LANGUAGE — язык сценария; возможные значения:

a "JavaScript", "JScript";

• "VBScript", "VBS".

Если атрибут LANGUAGE не указан, то в Internet Explorer подразумевается JScript.

SRC — указывает файл (имя или URL-адрес), содержащий код сценария. Этот атрибут используется в том случае, если сценарий расположен не в HTML- документе, а в отдельном файле.

Примеры

<SCRIPT LANGUAGE="JavaScript">

// код сценария

</SCRIPT>

<SCRIPT LANGUAGE = "JS.сript" SRC = "myscripts . ] s"></SCRIPT>

Современные браузеры распознают еще и версию языка. Например, Internet Explorer 4.0 и Netscape Navigator 4.0 знают версию языка JavaScript 1.2. Во время написания этой книги была доступна версия JavaScriptl.5, о которой знают Internet Explorer 6.0 и Netscape Navigator 6.0. Если версия языка JavaScript в значении атрибута LANGUAGE указана, а браузер не знает ее, то сценарий будет им просто проигнорирован. Если же версия языка не указана, то браузер, которому она не знакома, может неправильно выполнять некоторые выражения сценария или даже выдавать сообщения об ошибках.

Редакция языка JavaScript для Internet Explorer называется JScript. Вместе с тем в Internet Explorer можно использовать и LANGUAGE = "JavaScript". В браузере Netscape Navigator значимым является только LANGUAGE = "JavaScript", ссылка LANGUAGE = "JScript" будет им проигнорирована. Поэтому при разработке сценариев, рассчитанных для различных браузеров, рекомендуется использовать ссылку LANGUAGE = "JavaScript". В примерах, приводимых в настоящей книге, мы не будем указывать язык, на котором написан сценарий (из соображений экономии места).

Старые браузеры, появившиеся раньше JavaScript, игнорируют теги <SCRIPT> и </SCRIPT>, а все, что находится между ними, интерпретируют как содержимое HTML-документа. Результат может быть самым неожиданным. Чтобы уменьшить вероятность отображения кода сценария в окне старого браузера, следует заключить его в дескрипторы комментария <!— и —>. Новые браузеры, поддерживающие сценарии, будут игнорировать эти символы, выполняя код сценария, а старые (не понимающие сценарии), наоборот, будут игнорировать код сценария. Вот как используются символы комментария предохранения сценария от старых браузеров:

<SCRIPT LANGUAGE="JavaScript" > <-1

// код сценария

</SCRIPT>

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

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

Если сценарий располагается в отдельном файле, то в нем, разумеется, теги <SCRIPT> и </SCRIPT> не пишутся. Как уже отмечалось, файлы со сценариями на JavaScript являются обычными текстовыми файлами. В принципе, они могут иметь любое расширение имени, но, как правило, используется расширение js. В отдельных файлах обычно размещают библиотеки функций (определения функций), а также сценарии, использующиеся в нескольких HTML-документах одного или нескольких сайтов. Сценарий, загруженный из внешнего файла, можно представить себе просто как его вставку в HTML-документ. Вот пример:

<HTML>

<SCRIPT>

function myfunc() {

I

</SCRIPT>

<SCRIPT SRC = "[tiylibraryl. js"></SCRIPT>

<SCRIPT SRC = "myprogram. js"></SCRIPT>

</HTML>

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

Сценарий можно также писать как строку операторов, разделенных точкой с запятой, взятую в кавычки. В такой форме сценарии обычно используются в качестве обработчиков событий. Об этом более подробно будет рассказано в подразделе 2.3.2. Вызовы функций и их определения могут располагаться в произвольном порядке, только если они расположены в одном и том же контейнере <SCRIPT>. Если вы располагаете их в разных контейнерах <SCRIPT>, то необходимо, чтобы определение функции располагалось выше ее вызова. Аналогично, если определения функций находятся в отдельном файле, то его необходимо загрузить в HTML-документ раньше вызовов этих функций. Ниже приведены примеры правильного и неправильного расположения сценариев в HTML-документе:

ПравильноНеправильно

<HTML>

<SCRIPT>

function myfunc(){

<HTML>

<SCRIPT>

...

. . .

myfuncO

</SCRIPT>

</SCRIPT>

<SCRIPT>

<SCRIPT>

...

myfuncO

function myfunc(){

...

</SCRIPT>

}

</SCRIPT>

</HTML>

</HTML>

При попытке загрузить и выполнить неправильный вариант HTML-кода появит- сядиалоговое окно с сообщением об ошибке «Ошибка: Предполагается наличие объекта». Браузер интерпретирует HTML-теги последовательно. Так, встретив выражение вызова функции myf un cQв одном контейнере <SCRIPT>, браузер еще не имеет в памяти определения этого объекта (функции), расположенного в другом контейнере <SCRIPT>. Если же определение функции и ее вызов находятся в одном и том же контейнере <5СК1РТ>,- то его содержимое сначала загружается в память, а затем анализируется. Если интерпретатор встречает вызов функции, то он ищет ее определение в памяти и при удачном результате выполняет код этой функции. Следующие два варианта являются правильными, потому что определение функции и ее вызов находятся в одной секции сценария (в одном контейнере <SCRIPT>):

ПравильноПравильно

<HTML>

<SCRIPT><SCRIPT>

function myfunc(){myfuncO

}function myfun

}

</SCRIPT></SCRIPT>

</HTML>< /HTML>

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

Если требуется, чтобы сценарий загрузился после загрузки всех элементов HTML- документа, то возможны следующие два варианта. Во-первых, можно расположить сценарий в конце HTML-документа. Во-вторых, можно использовать атрибут-событие onload в контейнерном теге <BODY>, который задает основную часть HTML-документа. В последнем случае значением атрибута onload обычно является строка, содержащая имя функции. Определение этой функции, как правило, содержится в контейнере <SCRIPT>, размещенном в контейнере заголовка HTML-документа <HEAD>. Обратите внимание, что при использовании атрибута-события onload в теге <BODY> обработчик этого события выполняется по завершении загрузки всех элементов, определенных в контейнере <BODY>, а не в процессе их загрузки. Вот пример:

<HTML>

<HEAD>

<SCRIPT>

function myfunc () {

/SCRIPT> /HEAD>

<BODY onload = "myfuncO">

теги

</BODY>

</HTML>

Обработка событий

Одним из главных (но далеко не единственным) назначений сценариев в HTML- документе является обработка событий, таких как щелчок кнопкой мыши на элементе документа, помещение указателя мыши на элемент, перемещение указателя с элемента, нажатие клавиши и т. п. Большинство тегов HTML имеют специальные атрибуты, определяющие события, на которые могут отреагировать соответствующие элементы. Список всех допустимых событий довольно обширен и рассчитан практически на все случаи жизни. События называются довольно просто, особенно если вы знаете английский язык. Например, щелчок левой кнопкой мыши — onclick; изменение в поле вводаданных — onchange; событие onmouseoverпроисходит, когда указатель мыши помещается на элемент HTML-документа. Список событий мы рассмотрим позже. Значением таких атрибутов-событий в тегах HTML является строка, содержащая сценарий, выполняющий роль обработчика события. Например, следующий HTML-код определяет заголовок второго уровня, который реагирует на щелчок кнопкой мыши тем, что выполняет некоторую функцию myfuncQ:

<Н2 onclick = "myfunc( ">Щелкни здесь</Н2>

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

Итак, значением атрибута-события, как уже отмечалось, является код сценария, заключенный в кавычки. Этот сценарий называют также обработчиком события. В приведенном выше примере обработчиком события onclick является функция myfuncQ. Если обработчик события содержит несколько выражений, то они разделяются точкой с запятой.

<HTML>

<SCRIPT>

<ТЕГ событие="имя_функции(

<ТЕГ событие="код_сценария">

</HTML>

Рис. 2.2. Различные варианты оформления обработчиков событий

Пример

<Н2 onclick = "v an x = 5; х = х + myfunc()c()">Щелкни здесь</Н2>

Обычно обработчики событий оформляются в виде функций, определения которых помещают в контейнерный тег <SCRIPT>.

В качестве примера ниже приведены два варианта оформления обработчика щелчка на изображении (рис. 2.2).

Изображение в HTML-документе определяется, как известно, тегом <IMG>. Файл с изображением задается атрибутом SRC. Обработчик события onclick задается в примере как функция clickimageQ, которая должна быть определена где-то в контейнере <SCRIPT>. В результате щелчка на графическом изображении из файла picture.jpg выводится окно с сообщением:

<HTML>

<SCRIPT>

function clickimageQ {

alert("Привет!")

} </SCRIPT>

<IMG SRC = "pict.jpg" onclick = "clickimageQ">

</HTML>

Вариант 2:

<HTML>

<IMG SRC = "pict.jpg" onclick = "alertcnpneeT!'•)->

</HTML>

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

Чтобы указать браузеру явным образом, что сценарий написан на языке JavaScript, можно в значении атрибута-события написать префикс "javascript:". Например, <IMG onclick = "javascript: а1еИ:(" Привет!")">. Если не указывать язык сценария, то браузер будет подразумевать JavaScript.

Теперь рассмотрим еще один способ оформления обработчиков событий. Прежде всего, отметим, что почти для всех тегов HTML можно помимо прочих указать еще один атрибут — ID (идентификатор). Этот атрибут принимает любые строковые значения, которые играют роль индивидуальных имен элементов в их объектном представлении. Если атрибут ID в теге используется, то для задания обработчика события можно не использовать атрибуты-события. Вместо ЭТ( •( i в контейнере <SCRIPT> достаточно написать определение функции обработчика события, имя которой образуется по следующему шаблону:

значение_10. событие ()

Пример

<HTML>

<Н1 ID = "Мупеас1ег">Привет всем!</Н1 >

<SCRIPT>

function Myheader.onclick()

alert("Привет!")

I

</SCRIPT>

</HTML>

СОВЕТ

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

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

Элемент HTML-документа должен быть загружен раньше, чем функция-обработчик события.

Составное имя функции-обработчика события содержит название события в нижнем регистре.

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

function document.событие(){

Пример

function document.onclick(){

}

Приведенных выше способов обработки событий (привязки обработчиков к элементам) вполне достаточно для практических нужд разработки веб-сайтов и других приложений. Однако следует упомянуть еще об одном способе, который применим для IE версии 4.0 и старше. Он основан на использовании атрибутов FOR и EVENT в теге <SCRIPT>.

Атрибуту FOR присваивается ссылка на объект, который должен реагировать на событие, а атрибуту EVENT присваивается название события. В качестве ссылки на объект обычно используется значение идентификатора объекта, то есть значение атрибута ID.

Пример

<HTML>

<SCRIPT FOR = "MYBUTTON" EVENT = "onclick">

alertC'Bbm щелчок")

</SCRIPT>

<BUTTON ID = "MYBUTTON">Hax<MM 3flecb</BUTT0N>

</HTML>

Выражения в контейнере <SCRIPT> будут выполняться только при наступлении события, указанного в EVENT, которое связано с объектом, указанным в FOR. В приведенном выше примере при щелчке на кнопке (<BUTTON . . .>) будет выведено диалоговое окно с сообщением.

Рассмотренный выше способ позволяет не использовать атрибуты-события и указания обработчиков событий в тегах элементов. Однако при этом код сценария оказывается привязанным только к одному элементу. Чтобы использовать этот же код для других элементов, придется повторить его в секциях сценария (кон- тейнерах<SCRIPT>), отдельно для каждого элемента.

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

2.3.3. Объекты, управляемые сценариями

Мы рассмотрели, где располагаются сценарии и каким образом они могут быть привязаны к событиям. Если событие происходит, то выполняется соответствующий ему сценарий-обработчик. Кроме того, сценарий можно запустить и вне всякой связи с каким бы то ни было событием. В любом случае сценарий должен что- то с чем-то делать. Предметом деятельности сценария являются объекты окна браузера иЕ [TML-доку мента, загруженного в него. Параметры элементов документа, заданные с помощью атрибутов соответствующих тегов, можно изменить. Более топ>, можно заменить одни теги другими и даже заменить весь загруженный HTML-документ на другой. Делается это сценариями, но не напрямую с тегами и знамен!иями атрибутов (то есть с HTML-кодами), а с представляющими их объектами. HTML-документ отображается в окне браузера. Окну браузера соответствует объект window, a HTML-документу, загруженному в окно, соответствует объект document. Эти объекты содержат в своем составе другие объекты. В частности, объект document входит в состав объекта window. Элементам HTML-документа соответствуют объекты, которые входят в состав объекта document. Все множество объектов имеет иерархическую структуру, называемую объектной моделью. Более подробно мы рассмотрим ее в следующей главе, а сейчас остановимся на общих вопросах, связанных с объектами.

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

объект.свойство

объект.метод()

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

объект! .объект2. . . . объектМ

Если объект входит в состав другого объекта (является подобъектом другого), то для доступа к его свойствам и методам используют следующий синтаксис:

объект!.объект2 oбъeктN. свойство

объект!.объект2. . .. объектМ.методО

Нередко ni)до бъект некоторого объекта называют его свойством (так сказать, сложным свойством). В этом случае можно говорить, что свойства объектов бывают трех типов:

просто свойства (простые свойства);

методы (свойства-функции);

• объекты (сложные свойства, имеющие свои свойства).

</HTML></HTML>

</HTML>

</HTML>

Поскольку объект document является подобъектом объекта window, ссылка на HTML-документ, загруженный в текущее (активное) окно браузера, будет выглядеть следующим образом: window. document. Объектdocumentимеетметодwrite(crpoKa), позволяющий записать в текущий HTML-документ строку, содержащую просто текст или теги HTML. Чтобы применить этот метод, следует записать: window, document.write(cipoKa).

<HTML>

<Н1>Моя ЫеЬ-страница</Н1>

</HTML>

<НТМ1_>

<Н1>Моя 1л1еЬ-страница</Н1> SRC = "pict.jpg">

</HTML>

<HTML>

<Н1>Моя ИеЬ-страница</Н1>

<IMG SRC = "pic

<FORM>

</FORM>

</HTML>

<HTML>

<Н1>Моя ЫеЬ-страница</Н1>

<IMG SRC = "pic

<FORM>

<INPUT TYPE = "text"VALUE =

<BUTTON> Нажми здесь <BUTTON>

</FORM>

Рис. 2.З. Структуры множеств объектов для различных HTML-документов

Итак, как уже отмечалось выше, при загрузке HTML-документа в браузер создается объектная модель этого документа. Рассмотрим в общих чертах, на простых примерах, что именно происходит. Прежде всего, создается объект окна window. Это корневой объект, имеющий свои подобъекты, такие как location для хранения информации об URL-адресезагруженного документа и screen для хранения данных о возможностях экрана монитора пользователя. Затем создается объект document, являющийся подобъектом window. Далее создаются объекты, представляющие некоторые отдельные элементы HTML-документа, такие как объекты изображений, форм и их элементов (поля ввода, переключатели, кнопки) и др. На рис. 2.3 показано, как усложняется структура объектного представления документа с добавлением новых тегов. Это, конечно, упрощенные схемы, дающие лишь самые общие представления об объектной модели. Сведения об объектной модели играют роль своего рода путеводителя в обширном множестве объектов документа и окна браузера. Разработчики приложений на основе сценариев и HTML всегда имеют под рукой такой путеводитель.

В объектной модели документа объекты сгруппированы в так называемые коллекции. Коллекцию можно рассматривать как промежуточный объект, который содержит объекты собственно документа. С другой точки зрения, коллекция является массивом объектов, отсортированных в порядке упоминания соответствующих им элементов в HTML-документе. Индексация объектов в коллекции начинается с нуля. Синтаксис обращения к элементам коллекции такой же, как к элементам массива. Коллекция даже имеет свойство length — количество всех ее элементов. Так, например, коллекция всех объектов графических изображений вдокументеназываетсяimages,коллекциявсехформ — forms, коллекция всех ссылок — links. Это примеры так называемых частных или тематических коллекций. Кроме них имеется коллекция всех объектов документа, которая называется all. Один и тот же объект может входить в частную коллекцию (например, images), но обязательно входит в коллекцию all. При этом индексы этого объекта в частной коллекции и коллекции all могут быть различными.

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

с1оситеп^коллекциял'с1_объекта;

сЬситеп1.коллекция["1с1_объекта"];

с!оситеп1.коллекция[индекс_объекта].

Здесь id_0 бъекта — значение атрибута ID в теге, который определяет соответствующий элемент в HTML-д окументе. Величинаиндекс_объекта — целое число, указывающее порядковый номер объекта в коллекции. Первый объект в коллекции имеет индекс 0. Если при создании HTML- документа вы не использовали атрибут ID для некоторых элементов, то для обращения к их объектам остается только взять индексы. Заметим, что некоторые старые теги (например, <FORM>, <IN PUT>) имеют атрибут NAME. Значение этого атрибута можно использовать при обращении к объекту наравне со значением атрибута ID. К объекту формы, кроме описанных выше способов, можно обращаться по значению атрибута NAME (имя формы), если он указан в теге <FORM>, но не по значению атрибута ID:

document.имя_формы

Как известно, тег формы <FORM> является контейнерным и может содержать в себе теги других элементов, такие как<INPUT>, <BUTTON>И др. Обращение к элементам формы возможно через коллекцию all. Однако имеется и специфический для них способ:

document.имя_формы.elements[индекс_элемента]

document.имя_формы.elements[id_3neM6HTa] document.имя_формы. тй_элемента

Здесь индекс_элемента — порядковый номер элемента формы, а не порядковый номер в коллекции всех элементов; первый элемент имеет индекс 0. Заметим, что для Internet Explorer вместо квадратных скобок допустимо использование и круглых скобок.

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

<HTML>

<Н1>Моя веб-страница</Н1 >

<IMG SRC = "pict.]pg">

<А HREF = "www.admiral.ru/~dunaev">CaUT автора</а>

<FORM>

«INPUT TYPE = "text" VALUE = "">

<p>

<BUTTON onclick = "ту()">Нажми здесь</ВиТТОМ>

</FORM>

</HTML>

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

document.Images(6)// первый элемент коллекции images

Кнопка является вторым элементом формы. Чтобы обратиться к ней как к объекту, необходимо указать сначала форму (единственная форма в документе есть объект forms(O)), а затем объект этой формы (е1етепЛ5(индекс_элемента)). Другими словами, достаточно записать выражение:

document.forms(0).elements(1)// второй элемент формы

Теперь обратимся к объекту ссылки в нашем документе. Все ссылки хранятся в коллекции links. В нашем случае коллекция links содержит лишь одну ссылку. Следовательно, наша ссылка —элемент links( O) массива links. В итоге для обращения к ссылке в HTML-документе достаточно написать следующее выражение:

document.links(0)

Обобщая вышеизложенное, отметим, что универсальный способ обращения к объектам документа — обращение посредством коллекции all. Лично я предпочитаю именно этот способ обращения к объектам. Однако если вы не позаботились об атрибуте ID в тегах элементов HTML-документа, которые должны стать жертвой ваших сценариев, то обращение к объектам через all посредством индексов, особенно в случае объемистого документа, становится проблематичным. Чтобы убедиться в этом, внимательно отнеситесь к следующей задаче.

Допустим, у нас есть некоторый HTML-документ. Пусть для определенности это будет документ, рассмотренный в предыдущем примере. Интересно, какие имен-

Моя Web-страницаМоя Web-страницаСайтавтораСайтавтораHTML>yH1>Mоя веб-страница</Н1>IMG SRC='pictjpg'>A HREF = 'www.admiral.ru/~dunaev'>CaiiTавтора</А><FORM><INPUT1YPE = 'text1 VALUE = ">P<BUTTOТОМ>Нажмиздесь<ЛЗиТТ01 М>v/FORM></HTML>HTML>yH1>Mоя веб-страница</Н1>IMG SRC='pictjpg'>A HREF = 'www.admiral.ru/~dunaev'>CaiiTавтора</А><FORM><INPUT1YPE = 'text1 VALUE = ">P<BUTTOТОМ>Нажмиздесь<ЛЗиТТ01 М>v/FORM></HTML><й£ту htm liti Блокнот<й£ту htm liti Блокнот

Моя Web-страница

Моя Web-страница

Сайтавтора

Сайтавтора

HTML>

yH1>Mоя веб-страница</Н1>

IMG SRC='pictjpg'>

A HREF = 'www.admiral.ru/~dunaev'>CaiiTавтора</А>

<FORM>

<INPUT1YPE = 'text1 VALUE = ">

P

<BUTTOТОМ>Нажмиздесь<ЛЗиТТ01 М>

v/FORM>

</HTML>

HTML>

yH1>Mоя веб-страница</Н1>

IMG SRC='pictjpg'>

A HREF = 'www.admiral.ru/~dunaev'>CaiiTавтора</А>

<FORM>

<INPUT1YPE = 'text1 VALUE = ">

P

<BUTTOТОМ>Нажмиздесь<ЛЗиТТ01 М>

v/FORM>

</HTML>

<й£ту htm liti Блокнот

<й£ту htm liti Блокнот

document

images(O) —> link』。)

elements(O)elements(O)w I elements(1)w I elements(1)

elements(O)

elements(O)

w I elements(1)

w I elements(1)

Рис. 2.4. Соответствие тегов элементам веб-страницы и объектам

но теги этого документа соответствуют элементам коллекции I объекта document? Чтобы ответить на этот вопрос, я написал простой сценарий и вставил его в конце тестируемого HTML-документа. Этот сценарий основан на использовании свойства tagName, которое возвращает название тега, с помощью которого был создан соответствующий объект. Код сценария приведен в листинге 2.1.

Листинг 2.1. Тестируемый HTML-код вместестестирующим сценарием

<HTML>

<Н1>Моя веб-страница</Н1>

<р>

<IMG SRC = "pict.jpg">

<р>

<А HREF = "www. admi ral . ru/~dunaev">CauT автора</а>

<p>

<FORM>

<INPUT TYPE = "text" VALUE = "">

<p>

<BUTTON onclick = "ту()">Нажми здесь</ВиТТОМ>

</FORM>

<SCRIPT>

msg = ""

for(i = 0; i < doc—:. all . length; i++){

msg += i + " " + doc urnument . all [i] . tagName + "\n"

alert (msg)

</SCRIPT>

</HTML>

В результате выполнения этого HTML-кода окно браузера будет выглядеть, как показано на рис. 2.5. В диалоговом окне, выведенном с помощью alertQ, перечислены теги HTML-документа. Их порядковые номера соответствуют индексам в коллекции all. Например, объекту document.all(5) соответствует элемент HTML-документа, созданный тегом <IMG>. Обратите внимание, что хотя теги <HEAD>, <TITLE> и <BODY> в нашем документе явно не упоминаются, соответствующие им объекты присутствуют в объектной модели этого документа и, следовательно, в коллекции all

XX|，С \Мом，<Ж9ментьЛяф2 Ыд> - Micio*，，hthC £ ■$♦■'

X

X

ШШШ : Щ Ш1Щ Ш Щ ШШЩЩШШ二

Моя Web-страница

Нажми здесьНажми здесьMiciosoll Inleinel E«ploterMiciosoll Inleinel E«ploter' С";ЙТ Ж i' С";ЙТ Ж i0HTML1HEADг TITLE3B00YHIIMGБАFORMINPUT9PBUTTONSCRIPT0HTML1HEADг TITLE3B00YHIIMGБАFORMINPUT9PBUTTONSCRIPTw \ Мой компьютерw \ Мой компьютер

Нажми здесь

Нажми здесь

Miciosoll Inleinel E«ploter

Miciosoll Inleinel E«ploter

' С";ЙТ Ж i

' С";ЙТ Ж i

0HTML

1HEAD

г TITLE

3B00Y

HI

IMG

БА

FORM

INPUT

9P

BUTTON

SCRIPT

0HTML

1HEAD

г TITLE

3B00Y

HI

IMG

БА

FORM

INPUT

9P

BUTTON

SCRIPT

w \ Мой компьютер

w \ Мой компьютер

Рис. 2.5. В диалоговом окне перечислены теги HTML-документа и их индексы в коллекции all

Теперь рассмотрим тот же пример, но добавим к основным тегам атрибуты ID, с помощью которых можно персонифицировать соответствующие объекты. Как и раньше, мы добавим к HTML-документу сценарий, выводящий окно с информацией о тегах. При этом, кроме порядкового номера и названия тега, мы будем выводить и значение атрибута ID (рис. 2.6). Чтобы получить значение атрибута ID, необходимо воспользоваться свойством id соответствующего объекта. HTML- код приведен в листинге 2.2.

Листинг 2.2. Тестируемый код с добавлением атрибутов ID

<HTML>

<Н1>Моя веб-страница</Н1>

<IMG ID = "myimage" SRC = "pict.jpg">

<A ID = "myref" HREF = "www.admiral.ru/~dunaev">CaUT автора</а>

<FORM ID = "myform">

<INPUT ID = "myinput" TYPE = "text" VALUE ="qewe">

<p>

<BUTTON ID = "mybutton" onclick = "ту () ">Нажми здесь</В1ЯТСШ>

</FORM>продолжение &

Листинг 2.2 (продолжение)

<SCRIPT>

msg =

for(i =0 ; i<document.all.length; i +-t

msg+= i + " " + document.all[i].tagName + id = "+ document .all [1 ] . id + "\n"

}

alert(msg)

</SCRIPT>

</HTML>

% СЛМам ашчмвнгьЛвмй him - ЫЙ:№Е<,!1 Ыдае! Existt :'•&，"Щ

二•二 7 $ G ◎ q ® 0 -〉J 画•」j Ссылки ”

Microsoft Internet Explore!Microsoft Internet Explore!" HTML id-" HTML id-Моя Web-страница

Microsoft Internet Explore!

Microsoft Internet Explore!

" HTML id-

" HTML id-

THLE В ・

BODY id-

4H1tdi

fMS id * tnjniwtge % SAcNn^td

i id« Mam

SIN PUT i,j

Рис. 2.6. Теги HTML-документа, их индексы в коллекции all, а также значения атрибутов IDРис. 2.6. Теги HTML-документа, их индексы в коллекции all, а также значения атрибутов ID9P В •

Рис. 2.6. Теги HTML-документа, их индексы в коллекции all, а также значения атрибутов ID

Рис. 2.6. Теги HTML-документа, их индексы в коллекции all, а также значения атрибутов ID

10BUTTON d■的button

script a・

Итак, универсальный способ обращения к объекту документа базируется на использовании коллекции all. Однако кроме него в IE5+ и NN6 существует еще один способ, основанный на методе getElementByldQ:

document.getElementBy Id(значение_Ю)

Обратите внимание, в каком регистре пишутся отдельные буквы этого метода. Метод getEl ние_Ю) позволяет обратиться к любому элементу по значению его идентификатора — значению атрибута ID. Если несколько элементов документа имеют одинаковый ID, метод возвращает первый элемент с указанным значением ID. Отсюда видно, насколько важно присваивать различным элементам уникальные значения ID.

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

В приведенном выше примере элемент изображения, созданный с помощью тега <IMG ID = "myimage" SRC = "pict.jpg">, имеет атрибуты ID и SRC. Этим атрибутам соответствуют свойства id и src объекта этого изображения. Ниже приведены примеры различных вариантов обращения к данным свойствам:

document.Images(Э).id// "myimage"

document. images ("myimage") .id

document.all("myimage").id

document.all.myimage.id

var x = document.all.myimage// объект

x. id// "myimage"

document.images(Q).src/* строка URL, например,

f П е:///С:/Мои%20документы/pict.jpg */ document.images("my image").src document.al l("myimage").src document.all.myimage.src

var x = document.all.myimage // объект

x. src/* строка URL, например,

file: ///С: /Мои%20документы/р1ct. jpg */

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

Понятие события

Каждое действие пользователя (нажатие на клавишу, щелчок кнопкой мыши и т. п.) формирует некоторое событие, то есть сообщение о произошедшем. Операционная система (например, Windows) анализирует это сообщение, чтобы узнать, откуда оно взялось и что с ним делать дальше. Если, например, пользователь нажал на кнопку мыши в момент, когда ее указатель находился над окном браузера, то Windows пошлет браузеру сообщение о том, какая кнопка мыши была нажата, какие при этом клавиши клавиатуры удерживаются, а также координаты указателя мыши. Если пользователь щелкнул где-то на панели инструментов, браузер отработает это сообщение сам. Если же в момент щелчка указатель находился на «территории» HTML-документа, то браузер пропустит сообщение о событии через свою объектную модель. В HTML-коде документа может находиться сценарий для обработки этого события. Инструкции этого сценария направляются к браузеру опять же через объектную модель.

Свойства события

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

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

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

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

В качестве примера ниже приводится HTML-документ, не содержащий видимых элементов. Щелчок мышью или нажатие клавиши на клавиатуре выводит диалоговое окно со значениями некоторых свойств объекта event (рис. 2.7). Так, свойства х и у содержат значения координат указателя мыши в момент щелчка, от- сч итанные в данном случае относительно окна браузера. Свойство keyCode возвращает код нажатой клавиши с символам в системе Unicode. Для латинских и цифровых символов кодировки Unicode и ASCII совпадают. При нажатии навигационных клавиш и клавиш дополнительной цифровой клавиатуры keyCode возвращает null. По существу, keyCode — это код соответствующего символа, а не код клавиши. Для фиксации самой клавиши используются события onkeydown и onkeyup, а не on keypress.

Рис. 2.7. Щелчок в окне браузера выводит сообщение о координатах указателя мыши и нажатой клавише

<HTML>

<BODY ID = "test">

</BODY>

<SCRIPT>

function test . onclickC) { var st

str += "x = " + window.event.x + "\n

str += "у = " + window.event.у + "\n" str += "Вы нажали клавишу:

if (window.event.shiftKey){str += "Shift"}

if (window.event.ctrlKey){str *= "Ctrl"}

if (window.event.altKey){str += "Alt"} alert(str)

)

function test .onkeypressO{

I' + window.event.keyCode)

</SCRIPT>

</HTML>

В IE версии 4.0 и старше среди прочих часто оказываются полезными свойства button и srcElement.

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

Таблица 2.1. Значения свойства button

ЗначениеОписание

Кнопки не нажаты

jНажата левая

?Нажата правая

Одновременно нажаты левая и правая

Нажата средняя

Нажаты левая и средняя

Нажаты правая и средняя

Все три кнопки нажаты

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

Приведенный ниже HTML-код формирует документ, содержащий две кнопки (рис. 2.8). Сценарий обрабатывает событие onclick — щелчок мышью. Он привязан к элементу, заданному тегом <BODY>. Щелкнуть можно на любой кнопке, а также на незанятом месте окна браузера (рис. 2.9). В любом случае событие onclick будет обработано сценарием (функцией changetextQ), поскольку кнопки заданы внутри тега <BODY>. Сценарий заменит текст, который находится внутри тега элемента, инициировавшего событие. Какой именно элемент инициировал событие, определяется с помощью свойства srcElement, а замена текста осуществляется посредством свойства innerText. Об этом свойстве мы еще поговорим отдельно. Обратите внимание, что результат зависит от того, где находился указатель мыши в момент щелчка.

<HTML>

<BODY onclick = "changetext()">

<button>nepsa« KHonKa</button>

<Ьи11оп>Вторая KHonKa</button>

</BODY>

<SCRIPT>

// ссылка на объект// замена текста// ссылка на объект// замена текстаfunction changetextO{

// ссылка на объект

// замена текста

// ссылка на объект

// замена текста

х = window.event.srcElement x.innerText = "Уже щелкнули }

</SCRIPT>

</HTML >

Рис. 2.8. Результат щелчка на второй кнопкеРис. 2.8. Результат щелчка на второй кнопкеРис. 2.9. Результат щелчка на свободном местеРис. 2.9. Результат щелчка на свободном местеШС:\Моидокаменгы\81се1ешеп{.Ыт - Micio... |.1回:ШС:\Моидокаменгы\81се1ешеп{.Ыт - Micio... |.1回:

Рис. 2.8. Результат щелчка на второй кнопке

Рис. 2.8. Результат щелчка на второй кнопке

Рис. 2.9. Результат щелчка на свободном месте

Рис. 2.9. Результат щелчка на свободном месте

ШС:\Моидокаменгы\81се1ешеп{.Ыт - Micio... |.1回:

ШС:\Моидокаменгы\81се1ешеп{.Ыт - Micio... |.1回:

Чтобы на щелчок реагировали только кнопки, приведенный выше код необходимо несколько модифицировать:

<HTML>

<BODY>

<button onclick = "chaiigetext()">Первая кнопка"button〉

<button onclick = "changetext() ">Вторая KHonKa</button>

</BODY>

<SCRIPT>

function changetextO{

x = window.event.srcElement// ссылка на объект

x.innerText = "Уже щелкнули"// замена текста

}

</SCRIPT>

</HTML>

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

screenX, screenY — координаты указателя мыши относительно левого верхнего угла экрана. Например, если экран монитора находится в режиме 800x600, то координаты правого нижнего угла экрана будут равны 800 и 600 пикселов соответственно.

clientX, clientY — координаты указателя мыши относительно области клиента (рабочей области браузера), в которой находится HTML-документ, без учета рамок, полос прокрутки, меню и т. п.

offsetX, offsetY — координаты указателя мыши относительно верхнего левого 1 угла элемента, инициировавшего событие.

х, у — координаты указателя мыши относительно верхнего левого угла первого абсолютно или относительно позиционированного контейнера, в котором находится элемент, инициировавший событие. Позиционированный контейнер — этоэлемент, заданныйкаким-нибудьконтейнернымтегом (например, <BODY>, <DIV>, <H1>) с атрибутом STYLE, для которого указано свойство position. Если такого контейнера нет, то свойства х и у возвращают координаты относительно главного документа, такие же, как и clientX, clientY.

Чтобы лучше разобраться в этих свойствах, создайте тестовый HTML-документ, как показано ниже, и поэкспериментируйте с ним, щелкая мышью в различных точках (рис. 2.10). Этот документ содержит два контейнера, созданных с помощью позиционированных различным образом тегов <DIV>. Первый контейнер позиционирован абсолютно, а второй, вложенный в него, — относительно. Сценарий определяет значения координат различных типов и отображает их в диалоговом окне.

САМом аши<хсн，ь|'，1，ЫХ.Ы，・ ■♦■■t |

」“ Ссьм"冷

Microsoft Intcinet Емркме!Microsoft Intcinet Емркме!PHIPHI國h水心34, ^^3Q 中茄6尸132國h水心34, ^^3Q 中茄6尸132Рис. 2.10. При щелчке выводится окно с различными типами координат указателя мышиРис. 2.10. При щелчке выводится окно с различными типами координат указателя мыши

Microsoft Intcinet Емркме!

Microsoft Intcinet Емркме!

PHI

PHI

國h水心34, ^^3Q 中茄6尸132

國h水心34, ^^3Q 中茄6尸132

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

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

<НТМ1_>

top:50; width:3010:top:25 25; width:200;top:50; width:3010:top:25 25; width:200;<BODY ID = "Mybody "

top:50; width:3010:

top:25 25; width:200;

top:50; width:3010:

top:25 25; width:200;

<DIV ID = "DIV1" STYLE = "position:absolute;left:50n : absolute: left:50; height:100; background-color:blue">

<DIV ID = "DIV1" STYLE = "posit ion :relative; left:50; height:50; background-color:yellow">

</DIV>

</DIV>

<BODY>

<SCRIPT>

IIссылка на объект event+ e. screenYe.clientY ++ e. offsetY i+e. offsetY +IIссылка на объект event+ e. screenYe.clientY ++ e. offsetY i+e. offsetY +function document.onclick() {

IIссылка на объект event

+ e. screenY

e.clientY +

+ e. offsetY i

+e. offsetY +

IIссылка на объект event

+ e. screenY

e.clientY +

+ e. offsetY i

+e. offsetY +

var e = window. event

varstr= "ID = " + e. srcElement.ient. 1 d +

"\n screenX= " + e. sczreenX + screenY=

"\n clientX=" + e.clientX +. clientY=" +

"\n offsetX=" + e. offsetX + " . offsetY= ' "\n offsetX=" + e. offsetX + " , offsetY=" 1 +e. x +" ,y="+e • У

alert(str)

}

</SCRIPT>

</HTML>

Нам требовалось, чтобы на щелчок реагировал любой объект документа, поэтому мы не стали привязывать обработчик события индивидуально ко всем элементам, а вместо этого назвали функцию-обработчик составным именем document. onclick().

Обратите внимание на использование свойства srcElement для получения значения id элемента, инициировавшего (или, как еще говорят, получившего) событие. У объекта event имеется изменяемое свойство returnValue (возвращаемое значение). С его помощью можно отменять действия, принятые по умолчанию. Для этого достаточно присвоить ему значение false. Например, щелчок на ссылке по умолчанию означает переход по указанному адресу. Однако вы можете отменить это действие или запросить у пользователя подтверждение перехода.

Пример

<НТМ1>

<А ID = "myre f" HREF = "www.chat. ги">Переход на chat.ru</A> <SCRIPT>

function myref.onclickO{

ret = сonf1 rm("Вы действительно хотите перейти?")

if (Iret)

window. event . returnValue = false }

</SCRIPT>

</HTML>

Здесь метод confirm() выводит диалоговое окно. Если пользователь не подтвердил переход, то confirm() возвращает false, а свойству returnValue тоже присваивается false. В результате переход по ссылке не произойдет.

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

<HTML>

<А ID = "myref" HREF = "">Щелкни здесь</А>

<SCRIPT>

function myref.onclick(){

alert("5bm щелчок на ссылке") window.event.returnValue = false

}

</SCRIPT>

</HTML>

Если бы мы не использовали оператор window.event.returnValue = false, то из-за неуказанного в HREF адреса перехода по ссылке после выполнения обработчика события открылось бы новое окно браузера с содержимым текущей папки.

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

<А ID = "myref" HREF = "#** oncl i ck=Mmycl ick () ">Щелкни здесь</А>

Прохождение событий

Как уже отмечалось выше, для элементов документа можно указать события, на которые они должны реагировать, и обработчики этих событий. Например, если требуется, чтобы элемент реагировал на щелчок кнопкой мыши выполнением некоторой функции myfunc(),то в тег этого элемента следует вставить запись: onclick = "myfuncO". Однако нам известно, что большинство тегов в HTML являются контейнерными и, следовательно, могут содержать в себе другие теги. При этом может оказаться так, что одно и то же событие будет обозначено в различных, но вложенных друг в друга тегах. Что произойдет при наступлении этого события? Как оно распространяется по объектам и как оно перехватывается элементами документа?

Рассмотрим в качестве примера следующий HTML-документ, содержащий единственную кнопку:

<НТМ1_>

<BODY onclick = "alert('Щелчок на body')">

<BUTTON onclick = "alert('Щелчок на button') ">Нажми здесь</ВиТТОМ>

</BODY>

</HTML>

Особенность этого документа в том, что одно и то же событие (с различными обработчиками) привязано к различным тегам, один из которых содержит в себе другой (<BUTTON> содержится в <BODY>). Щелчок на кнопке приведет к выполнению сначала обработчика щелчка для кнопки, а затем обработчика для <BODY>. Если щелкнуть где-нибудь в рабочей области окна браузера вне кнопки, то сработает только обработчик для <BODY>. Ниже мы рассмотрим, как можно избавиться от этого нежелательного эффекта.

Модели прохождения событий в Internet Explorer и Netscape Navigator отличаются друг от друга. Более того, имеются различия между этими моделями для различных версий одного и того же браузера даже начиная с IE4 и NN4.

Модель прохождения событий в IE4 называется «всплыванием событий». События, подобно воздушным пузырькам в воде, как бы всплывают от целевого объек-

та самого нижнего уровня вверх по иерархии объектов. В рассмотренном выше примере событие onclick «всплывает» от объекта кнопки к объекту тела документа. В NN4 модель прохождения событий называют захватом событий. Согласно этой модели событие распространяется, наоборот, от самого верхнего в иерархии объекта window к целевому объекту. Чтобы события обрабатывались на уровне текущих объектов, требуется включить для них режим захвата. Это делается с помощью специального метода captureEven I tQ. В IE4 для управления всплыванием событий используют свойство прерывания вс I плыванияcancelBubble.

В современных браузерах IE5.5+ и NN6 реализована модель, объединяющая в себе ивсп Плывание, и захват событий. Всплывание организовано как в IE4+, а захват — как в NN4. По умолчанию событие всплывает, однако вы можете включить его захват. Тогда событие сначала достигает целевого объекта, а затем начинает всплывать в обратном направлении.

ВIE4+ управлять прохождением событий можно с помощью свойства cancelBubble объекта события event. Когда в документе (на веб-странице) происходит какое- либо событие, объект event первым получает информацию о нем и решает, какому элементу его передать. Например, когда объект event получает событие onclick (щелчок кнопкой мыши), он выясняет, какой элемент находился в тот момент под указателем мыши. Если там было два элемента (один над другим), то выбирается элемент с наименьшим z-индексом, то есть нижний. Напомню, что z-index является одним из параметров позиционирования элементов с помощью таблиц стилей. Установив элемент, связанный с событием, объект event ищет обработчик этого события и выполняет его. Например, если элемент имеет уникальное имя (ID) Myelement, то ищется функция Myelement.onclickQ. Далее объект event выясняет, какой объект является контейнером для данного элемента. Если таковой имеется, то событие переходит внутрь этого контейнера. Если, например, контейнером является объект, созданный тегом <DIV> с именем Mydiv, то будет предпринята попытка выполнить функцию Mydiv.ondickQ. Этот процесс продолжается, пока имеются доступные контейнеры. Например, последним доступным контейнером может оказаться документ (объект document), и тогда объект event ищет функцию document.onclickQ.

Чтобы определить главного виновника события (объект, инициировавший событие), используется свойство srcElement. Мы уже говорили о нем выше. Например, может потребоваться одинаковая реакция на одно и то же событие всех элементов, за исключением некоторых. В таких случаях для элементов, на которых процесс всплывания события должен закончиться, создаются специальные функции-обработчики. В этих функциях помимо прочего должно быть выражение присвоения свойству cancelBubble значения true, чтобы прервать дальнейшее прохождение события. Например, если мы хотим разорвать цепную передачу события на элементе с именем Myelement, необходимо создать для него функцию-обработчик события следующего вида:

function Myelement. onclickQ{

// код обработки события onclick window.event. cancelBubble = true }

Делать такое в функции-обработчике для объекта document бессмысленно, поскольку выше событие все равно всплыть не может, а отменить реакцию на это событие элемента-инициатора (первого звена цепочки) невозможно.

В начале этого подраздела мы уже рассматривали пример HTML-документа с кнопкой, вложенной в контейнер <BODY>:

<HTML>

<BODY onclick = "alert('Щелчок на body')">

<BUTTON onclick = "alert ('Щел чок на button)"'>Нажмиздесь<В/ )м>Нажми здесь</ВиТТ0И>

</BODY>

</HTML>

Особенность этого примера в том, что если пользователь щелкнет на кнопке, сработает обработчик не только кнопки, но и тела документа (элемента, заданного тегом <BODY>. Если мы хотим это предотвратить, то можно переписать код следующим образом:

<HTML>

<BODY onclick = "alert('Щелчок на body')">

<BUTTON onclick = "alert('Щелчок на button');

window.event .cancelBubble = true ">Нажми здесь</В11ТТОМ>

</BODY>

</HTML>

Возможен также и такой вариант кода:

<HTML>

<BODY onclick = "alert('Щелчок на body')">

<BUTTON ID = "МуЬиГ>Нажми здесь</В1ЛТОМ>

</BODY>

<SCRIPT>

function Mybut.onclick() {

alert('Щелчок на button1)

window.event.cancelBubble = true// прекратить всплывание события

I

</SCRIPT>

</HTML>

Указание обработчика события в сценарии

Об обработчиках событий достаточно подробно рассказывалось в предыдущем разделе. Там так или иначе обработчики событий привязывались к специальным атрибутам HTML-тегов — ID или атрибутам-событиям — FOR и EVENT. Сценарий-обработчик выполнялся, если возникало событие, связанное с элементом, для которого был указан этот обработчик. Вместе с тем имеется возможность вызывать обработчик & сценарии просто как метод объекта. Он будет выполняться так же, как и при возникновении соответствующего события.

Пример

<HTML>

<BUTTON ID="Mybutton" onclick="butclick() ">Нажми здесь</ВиТТОМ>

<SCRIPT>

document .all .Mybutton.onclick()// вызов обработчика

function butclick() {

alert('Щелчок на кнопке Mybutton')

I

</SCRIPT>

</HTML>

В данном случае сразу же после загрузки документа в браузер вызывается обработчик события onclick, связанного с кнопкой. Этот обработчик — функция butclick(). Обратите внимание, что обработчик выполнится несмотря на то, что

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

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

document.имя_формы.имя_поля.onfocusO

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

<HTML>

<BODY onload = "onloadQ"

</BODY>

<SCRIPT>

function onload() {

</SCRIPT>

</HTML>

Работа с окнами и фреймами

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

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

window.свойство

wi ndow.методе[параметры])

У объекта window имеется синоним self, используемый при обращении к окну, содержащему текущий документ. Иначе говоря, идентификатор self применяется в многооконных или многофреймовых системах, когда требуется указать окно с документом, в котором находится данный сценарий. Его рекомендуется вставлять, чтобы не запутаться. При запуске сценария в ссылках на объекты только текущего документа (типичная ситуация) идентификаторы window и self можно опускать.

У объекта window есть ряд подо бъектов. Мы уже рассматривали некоторые свойства объекта события event, который является подобъектом объекта window. Другой объект, location, содержит информацию, полезную для работы в сети и для создания ссылок в документах с многофреймовой структурой. Кроме этого, свойство href объекта location используется для загрузки документа в текущее окно:

window, location . href = "иК1_-адрес_документа"

Данный способ загрузки документов в текущее окно браузера доступен во всех версиях IE и NN. В IE можно использовать также и метод navigateQ:

window.navi gate("URL-aflpec_flOKyMeHTa")

Создание новых окон

Главное окно браузера создается не с помощью сценариев, а автоматически, когда пользователь запускает браузер, а также при открытии документа с определенным URL-адресом или другого файла. В HTML открыть документ в новом окне можно с помощью атрибута TARGET тега ссылки <А HREF =...>. Например, <А HREF = "http://www.rambler.ru" TARGET = "newWindow"> Rumbler</A>.

С помощью сценария можно создать любое количество окон. Для этого применяется метод ореп():

wi ndow.open([параметры])

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

адрес документа, который нужно загрузить в создаваемое окно;

имя окна (как имя переменной);

строка описания свойств окна (features).

В строке свойств записываются пары свойство=значение, которые отделяются друг от друга запятыми. В табл. 2.2 приведен список свойств окна, передаваемых в строке features. Значения yes и по можно заменить числовыми эквивалентами 1 и 0 соответственно.

Таблица 2.2. Свойства окна, передаваемые в строке features

Свойство

Значения

Описание

channel mode

yes, no, l, 0

Показывает элементы управления Channel

directories

yes, no, 1, 0

Включает кнопки каталога

fullscreen

yes, no, 1, 0

Полностью разворачивает окно

height

Число

Высота окна в пикселах

left

Число

Положение по горизонтали относительно левого края экрана

в пикселах

location

yes, no, 1, 0

Текстовое поле Address

menubar

yes, no, 1, 0

Стандартные меню браузера

resizeable

yes, no, 1, 0

Может ли пользователь изменять размер окна

scrollbars

yes, no, 1, 0

Горизонтальная и вертикальная полосы прокрутки

status

yes, no, 1, 0

Стандартная строка состояния ^продолжение &

Таблица 2.2 (продолжение)

СвойствоЗначения Описание

toolbaryes, no, \, 0Включает панели инструментов браузера

topЧислоПоложение повертикали относительноверхнегокрая экрана

в пикселах

widthЧислоШирина окнав пикселах

Примеры

window.open("mypage.htm","NewWin", "height=150, width=300") wi ndow.open("mypage.htm")

strfeatures = "top=100,left=15,width=400, height=200, location=no, menubar=no"

window.open ("www.admiral.ru/~dunaev", "Сам себе веб-дизайнерм,

strfeatures)

Вместо третьего параметра (строки features) можно использовать значение true. В этом случае указанный документ загружается в уже существующее окно, вытесняя предыдущий. Например, window.open("mypage.htm","NewWin", true).

Метод window.open () возвращает ссылку на объект окна. Эту ссылку можно сохранить в переменной, чтобы потом использовать, например при закрытии окна.

Для закрытия окна служит метод dose(). Однако выражения window.closeQ или self.close () закрывают главное окно, а не дополнительное, которое вы создали методом ореп(). В этом случае как раз и необходима ссылка на созданное окно. Эту ссылку следует сохранить в глобальной переменной, чтобы иметь доступ к ней до тех пор, пока главный документ загружен в браузер. Вот пример:

var objwin = wi ndow. open ("mypage. htm", "Моя страница") objwin.close()

Метод Wndow.open [) открывает новое независимое окно как экземпляр браузера. В этом случае при закрытии главного окна браузера новое окно остается открытым. Независимые окна называют еще немодальными (modalless). Однако можно создать и так называемое модальное окно. Пока открыто модальное окно, пользователь не может обратиться к другим окнам, в том числе и к главному. Так обычно работают стандартные диалоговые окна. Например, окна, создаваемые методами а 〔 :(), prompt() и conf irmQ, являются модальными. В модальное окно можно загрузить любой документ.

Для создания модального окна используется метод showModalDialogQ. Так же, как и метод openi(Q, он принимает в качестве параметров адрес документа (файла), имя окна и строку свойств. Однако формат этой строки другой. В частности, параметры в строке разделяются точкой с запятой, размеры окна и координаты его верхнего левого угла требуют указания единиц измерения (например, рх — пикселы). Кроме того, этот метод не возвращает ссылку на объект окна, поскольку она не нужна для модального окна.

В табл. 2.3 приведен список свойств окна, созданного методом showModalDialogQ, передаваемых в строке features.

Таблица 2.3. Свойства окна, созданного методом showModalDialogQ

Свойство

ЗначенияОписание

order

thick, thinРазмер рамки вокруг окна

(толстая/тонкая)

center

yes, no (1, 0)Выравнивание окна по центру главного

dialogHeight dilalogLeft dialogTop dialogWidth font

Число + единицы измеренияВысота окна

Число + единицы измеренияГоризонтальная координата

Число + единицы измеренияВертикальная координата

Число + единицы измеренияШирина окна

Строка таблицы стилейСтиль, определенный по умолчанию

для окна

font-family

Строка таблицы стилейВид шрифта, определенный по умолчанию

для окна

font-size

Строка таблицы стилейРазмер шрифта, определенный

по умолчанию для окна

font-style

Строка таблицы стилейТип шрифта, определенный по умолчанию

для окна

font-variant

Строка таблицы стилейВариант шрифта (обычный/курсив),

определенный по умолчанию для окна

font-weight

Строка таблицы стилейТолщина шрифта, определенная

по умолчанию для окна

help maximize

yes, no, 1, ОВключение кнопки Help в верхнюю панель

yes, no, 1, 0Включение кнопки Maximize в верхнюю

панель

minimize

yes, no, 1 ,0Включение кнопки Minimize в верхнюю

панель

<HTML><BUTTON onclick =<BUTTON onclick =<SCRIPT>var newWindow<HTML><BUTTON onclick =<BUTTON onclick =<SCRIPT>var newWindowПример

<HTML>

<BUTTON onclick =

<BUTTON onclick =

<SCRIPT>

var newWindow

<HTML>

<BUTTON onclick =

<BUTTON onclick =

<SCRIPT>

var newWindow

return OpenWinlO ">0ткрыть окно 1 </BUTTON>

return OpenWin2 О" ()">0ткрыть окно 2 </BUTTON>

// глобальная переменная для ссылки на окно

function OpenWinl(){// открытие 1-го окна

window. status = "Первое окно"// статусная строка главного окна

strfeatures="top=100, lett=50,width=300,height=270,toolbar=no"

window.open ("1. htm","winl",strfeatures)

I

function OpenWin2(){window. status = "Второе окноfunction OpenWin2(){window. status = "Второе окно// открытие 2-го модального окна

function OpenWin2(){

window. status = "Второе окно

function OpenWin2(){

window. status = "Второе окно

// статусная строка главного окна

strfeatures = "dialogWidth=500px;dialogHeight=320px , border=thin ; help=no"

w}indow.showModalDialog("2.htm","win2",strfeatures)

function CloseWinl() { if (newWindow){ newWindow .close()function CloseWinl() { if (newWindow){ newWindow .close()// закрытие 1-го окна

function CloseWinl() { if (newWindow){ newWindow .close()

function CloseWinl() { if (newWindow){ newWindow .close()

// если 1-е окно открыто

// закрыть 1-е окно

newWindow = null// очистить ссылку на 1-е окно

window.status =

</SCRIPT>

</HTML >

Фреймы

Фрейм представляет собой прямоугольную область окна браузера, в которую можно загрузить HTML-документ. Разбиение окна на фреймы происходитс помощью HTML-кода, содержащегося в отдельном HTML-файле, который называется установочным. Установочный файл содержит только теги разметки фреймов, то есть их относительное расположение, размеры, ссылки на загружаемые в них документы и другие параметры фреймов. В нем не должны присутствовать теги других элементов и текстовая информация, за исключением разве что тегов <МЕТА>. В установочном файле можно написать сценарий, создающий фреймовую структуру документа.

Напомним, что разбиение окна браузера на несколько фреймов обычно производится с помощью тега <FRAMESET>. Внутрь этого тега вставляются теги <FRAME> с атрибутами, указывающими имя фрейма и адрес HTML-документа, который будет отображаться в этом фрейме. В следующем примере создается два фрейма, расположенные друг над другом:

<HTML>

<FRAMESET ROWS="30%,70%"

<FRAME 5ИС="документ1.Шт" NAME="framel">

<FRAME 5КС="документ2.Шт " NAME="framel">

</FRAMESET>

</HTML>

Это так называемое вертикальное расположение фреймов. Если вместо атрибута ROWS в теге <FRAMESET>использовать атрибут COLS, то фреймы будут расположены горизонтально: второй фрейм находится справа от первого. Используя вложение тега <FRAMESET>, можно разбить уже имеющийся фрейм на другие два фрейма и т. д.

Отношения между фреймами и главным окном

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

При запуске браузера объект главного окна window формируется автоматически. Если в это окно загружается документ с фреймовой структурой, то главное окно получает статус родительского фрейма по отношению ко всем остальным. С другой стороны, каждый тег<FRAME> внутри контейнера <FRAMESET> создает свой собственный объектwindow,вкоторый загружается соответствующийдокумент. Каждому из фреймов соответствует свой объект document. С точки зрения объекта

document ему соответствует единственный контейнер — фрейм. Хотя родительский объект и не виден пользователю, он все равно присутствует в объектной модели.

Рис. 2.11. Родительское окно и два фрейма

Итак, в вершине иерархии находится окно браузера window. Оно поделено на два фрейма с именами, например framel и frame2. Объект window является родительским по отношению к дочерним framel и frame2 (рис. 2.1 1). Для ссылки на родительское окно используется ключевое слово parent.

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

• главное окно получает доступ к фрейму-потомку;

фрейм-потомок получает доступ к родительскому (главному) окну; фрейм-потомок получает доступ к другому фрейму-потомку.

Между объектом window и объектами framel и frame2 существует прямая связь родитель-потомок. Поэтому если вы пишете сценарий в установочном файле, создающем эти фреймы, то к фреймам можно обращаться по имени, как это показано на рис. 2.12.

Рис. 2.12. Обращение к фреймам по имени

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

мы. Удаление фреймов означает лишь загрузку нового документа вместо содержащего фреймы — в рассматриваемом случае загрузку документа в родительское окно. Это можно сделать с помощью доступа к родительскому окну на основе свойства parent (рис. 2.13). Чтобы загрузить новый документ, следует использовать объект location из родительского окна (заметим, что каждый фрейм имеет собственный объект location): требуется внести в location.href родительского окна новый URL-адрес. Таким образом, чтобы загрузить новый документ в родительское окно, требуется записать в сценарии следующее:

parent.location.href="иг1-адрес_документа"

Рис. 2.13. Доступ к родительскому окну на основе свойства parent

Наконец, довольно часто необходимо решать задачу обеспечения доступа из одного фрейма-потомка кдругому (рис. 2.1 4 ). Например, находясь в одном фрейме- потомке, можно записать что-нибудь в другой фрейм-потомок. Однако между фреймами-потомками не существует прямой связи. Поэтому мы не можем просто вызвать фрейм frarne2 по имени, находясь во фрейме framel. Фрейм framel ничего не знает о frarneZ, но frame2 существует с точки зрения родительского окна. По этойпричинемыдолжнысначалаобратитьсякродительскомуокну, затем — кframe2, и лишь потом к объекту document, который разместился во втором фрейме:

parent. frame2 .document. wri 1е("Привет от первого фрейма! «)

Рис. 2.14. Обеспечение доступа из одного фрейма-потомка к другому

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

Ниже показаны HTML-коды соответственно для левого и правого фреймов, а также порождаемый ими внешний вид страницы (рис. 2.15).

Документ в левом фрейме с именем LEFT:

<HTML>

Один<В1?>

Два

<Н1 ID = "ХХХ">Три</Н1>

</HTML>

Документ в правом фрейме:

<HTML>

<5CRIPT>

function changeQ {

parent.LEFT.document.all.XXX.innerText = "Ура!"

I

</SCRIPT>

<H1 onclick = "changeOо ">Щелкни здесь</Н1>

</HTML>

Щелкни здесь

Три

ЛГ^ 46Х .«t~-- 7. 4 ■ ■— «М» • « ■ •• * с BVV еими— • —• “С・，—«，V^.・* 7 ……4 .5，,' “― —《Л"5итм*・М・—■*>? ~—・，К『•• •' ••••^―

Рис. 2.15. Изменение элемента в одном фрейме из другого

В теле функции c hangeQ, которая делает нужные изменения, происходит обращение к левому фрейму с именем LEFT (задается в установочном HTML-файле) через parent. Далее doc ument.all.XXX обеспечивает доступ к элементу с идентификатором "XXX" (в примере это заголовок 1-го уровня). Здесь all— коллекция всех элементов документа. Собственно изменение элемента происходит за счет присвоения значения свойству innerText (в примере это слово "Ура!").

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

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

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

Пример

Навигационная панель. Окно браузера разделено на два фрейма: первый выполняет роль навигационной панели, а второй — окна для отображения документов. frames. htm - установочный файл.

<HTML>

<FRAMESET COLS = "25%,75%">

<FRAME SRC = "menu.htm" NAME = "menu">

<FRAME SRC = "start.htm" NAME = "main">

</FRAMESET>

</HTML>

Здесь start.htm —документ, который будет первоначально показан во фрейме main. menu. htn1 - навигационная панель.

<ВТМЕ>

<SCRIPT >

function load(url) {

parent .maiIn. location . href = url;

I

</SCRIPT>

<BODY>

<A HREF = "j avascript: load( ' первый . htm') ">Первый</</А>

<A HREF = "второй. htm" TARGET = "maiп">Второй </А>

<A HREF = "третий.htm" TARGET = 'Чор">Третий </А>

</BODY>

</HTML>

Здесь показано несколько способов загрузки новой страницы во фрейм main. В первой ссылке используется функция load(). Вместо атрибута TARGET указания на фрейм выполняет функция. Функции loadQ в качестве параметра передается стро- ка'первый.htm', указывающая, какой файл следует загрузить. При этом место, куда он будет загружен, определяется самой функцией load(). Во второй ссылке используется атрибут TARGET. Третья ссылка показывает, как можно избавиться от фреймов. Чтобы удалить фреймы с помощью функции loadQ, достаточно написать в ней следующую строку:

parent.location.href = url

Атрибут TARGET в теге ссылки <А HREF> обычно применяется в тех случаях, когда требуется загрузить одну страницу в один фрейм. Язык сценариев используют, если необходимо при активизации ссылки выполнить несколько действий, например загрузить несколько страниц в разные фреймы.

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

window.frames[индекс]

wi ndow.имя_фрейма

Заметим, что индекс 0 соответствует первому дочернему фрейму в порядке, определенном следованием тегов <FRAME> в контейнере <FRAMESET>.

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

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

window.frames(0).document.all.My input.value

window.LEFT.document.all.My input.value

Ссылка из дочернего фрейма непосредственно на родительский производится с помощью ключевого слова parent. Если имеется еще один фрейм более высокого уровня, то ссылка на него выглядит так: parent.parent. Аналогичным образом можно построить ссылку из дочернего фрейма до прапрадедушки. Чтобы сразу обратиться к родительскому окну, находящемуся на вершине иерархии, можно использовать ключевое слово top.

СОВЕТ

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

Предотвращение использования фреймов

Ссылки top и self можно использовать для предотвращения отображения вашего сайта внутри фреймов другого сайта. Для этого необходимо, чтобы документ верхнего уровня проверял, в какое окно он загружен. Это должно быть самое верхнее (top) или родительское (parent) окно. Если это действительно так, ссылка на свойство top совпадает со ссылкой selfна текущее окно. При несовпадении этих значений документ следует перезагрузить заново, но уже в окно верхнего уровня. Сценарий, выполняющий эту работу, необходимо разместить в начале документа. Вот его код:

<SCRIPT>

if (top != self) top.location = location

</SCRIPT>

Проверка загрузки фреймов

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

Следующий простой сценарий проверяет, загружается ли веб-страница в своем наборе фреймов, сравнивая URL-адреса окна top и текущего окна. Если они совпадают, то необходимо загрузить набор фреймов, определяемый в файле frameset.htm.

<SCRIPT>

if (top.location.href == window.location.href) top.location.href = "frameset.htm"

</SCRIPT>

Плавающие фреймы

Для вставки одного HTML-документа в тело другого средствами браузера пользователя, а не сервера, служит контейнерный тег<IFRAME>:

<IFRAME SRC = "адрес_документа"></1РНАМЕ>

Элемент, задаваемый этим тегом, можно позиционировать с помощью параметров таблицы стилей (те:e г <5Тт!Е> или атрибут STYLE). Если его положение не указано явно, то он позиционируется в соответствии с положением <IFRAME>В HTML- коде. Внешне этот элемент выглядит как прямоугольная область (с полосами прокрутки или без них), в которой отображается документ из некоторого HTML- файла. Такие окна иногда называют плавающими фреймами.

HTML-документы, загружаемые в плавающие фреймы, могут иметь сценарии и прочие средства, присущие любому HTML-документу. Ниже приведен пример загрузки трех различных HTML-файлов в плавающие фреймы (рис. 2.16). Это HTML-документы из сайта автора (www.admiral.ru/-dunaev).

<НТМ1 >

<НЗ>Включение HTML-документов на стороне клиента</НЗ>

<Н4>Использование тега < ifraime></H4>

Здесь в трех окнах показаны страницы моего сайта<Ьг>

<IFRAME SRC = "examples.htm" ></IFRAME>

<IFRAME SRC = "flashx.htm" ></ IFRAME >

<p>

<IFRAME SRC = "i_is.htm" STYLE = "posi tio n: absolute; t op: 310; width:50ю： eight:250" SCROLLING = no" ></IFRAME >

</HTML >

Другой пример использования плавающих фреймов рассмотрен в подразделе 4.2.2 (глава 4).

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

absbottom — выравниваетнижнюю границу фреймапоподстрочнойлинии символов окружающего текста;

absmiddle — выравнивает середину фрейма по центральной линии между top и absbottomокружающеготекста;

baseline — выравнивает нижнюю границу фрейма по базовой линии окружающего текста;

bottom — совпадает с baseline (только в IE);

left — выравнивает фрейм по левому краю элемента-контейнера;

middle — выравнивает воображаемую центральную линию окружающего текста по воображаемой центральной линии фрейма;

right — выравнивает фрейм по правому краю элемента-контейнера;

texttop — выравнивает верхнюю границу фрейма по надстрочной линии символов окружающего текста;

top — выравнивает верхнюю границу фрейма по верхней границе окружающе-

го текста.

-3 Включение HTML-документов - Microsoft Internet Explo 」■ 一，・ИЕ1Е1.

二丿，。豆@.!01На d

Включение HTML-документов на стороне клиента

Использование тэга < iframe>

Здесь в трех окнах показаны страницы моего сайтаЗдесь в трех окнах показаны страницы моего сайта—匕-/1.КШ彳 н—匕-/1.КШ彳 нUUВставка Flash-ролика в Web- страницуВставка Flash-ролика в Web- страницу

Здесь в трех окнах показаны страницы моего сайта

Здесь в трех окнах показаны страницы моего сайта

—匕-/1.КШ彳 н

—匕-/1.КШ彳 н

U

U

Вставка Flash-ролика в Web- страницу

Вставка Flash-ролика в Web- страницу

Здесь приведены элсмен1ариые тшмеры HTML ■ JScripl.3w азы ■■ичес—。■■■ Вм ― «осяетрмк, шх еда вьагоедяг я окне > .—'■.w^，，. •■fi£u— muu „кппшлгЗдесь приведены элсмен1ариые тшмеры HTML ■ JScripl.3w азы ■■ичес—。■■■ Вм ― «осяетрмк, шх еда вьагоедяг я окне > .—'■.w^，，. •■fi£u— muu „кппшлгТак называемый Flash-ролик содержится в ЗБ'ЭД'-файле (т.е. в файле с расширением swf, которыйТак называемый Flash-ролик содержится в ЗБ'ЭД'-файле (т.е. в файле с расширением swf, который2J2J

Здесь приведены элсмен1ариые тшмеры HTML ■ JScripl.3w азы ■■ичес—。■■■ Вм ― «осяетрмк, шх еда вьагоедяг я окне > .—'■.w^，，. •■fi£u— muu „кппшлг

Здесь приведены элсмен1ариые тшмеры HTML ■ JScripl.3w азы ■■ичес—。■■■ Вм ― «осяетрмк, шх еда вьагоедяг я окне > .—'■.w^，，. •■fi£u— muu „кппшлг

Так называемый Flash-ролик содержится в ЗБ'ЭД'-файле (т.е. в файле с расширением swf, который

Так называемый Flash-ролик содержится в ЗБ'ЭД'-файле (т.е. в файле с расширением swf, который

2J

2J

■l.

■ rи те\л/для поддержи! начинв»шиж\й?еЬ-дизайнеров.

ЗдеймШйиайд^ещтиеры исшшьаойанин дишшичесюно HTML. Многие из ♦■■ а* itj«nu]«тшнж'СаяеввеМеЬ-йя&кхр" filled» 'Ъам

■•—лпешщю.

3W1 саЙ<едмп» себе janrmei» примером. Кенечно, не а смыепе э|аяоиа .1 д«я нодражадда. Oi tедопли вручну»<1.е. »»с помощь» FrontPage ил» ЙГЙДО:-:■I |I. ■ F9i! ; ■одвыик небольшим, легко просматривапся и ... «$S№fmaSians4Sbtsan«»ewisi.И1*)гйеиаприи5дв!иьина сайте примеров «еш?: , i шмеег»саЙ18, Твкчю, это все paeoiaeiJ

Лэшж по ca&nt?i:Лэшж по ca&nt?i:,Ешраре 2Q03& должна выйти моя кнV оса&тушисанная в соавторстве с сьPhQШт 0Щ1 Flash, сканированию, осоС. VVet> й другим вопросам. Если вам по*

Лэшж по ca&nt?i:

Лэшж по ca&nt?i:

1 Мой“Fe

Рис. 2.16. Документ с тремя документами из внешних файлов, загруженнымив плавающие фреймы

Всплывающие окна

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

Всплывающим окнам соответствует объект popup. Он создается только в сценарии для браузера IE5.5+ с помощью метода window.createPopup().

Ниже приводится пример типичной последовательности выражений сценария, создающего всплывающее окно, задающего его параметры и показывающего его на экране (рис. 2.17):

var mypopup = window. createPopupO//

var popupBody = mypopup.document.body

/* Параметры окна */

popupBody . style . border = "solid Ipx green1 popupBody.style.padding = "5px" popupBody.style.color = "green" popupBody.style.background = "ffffdO"

создание всплывающего окнасоздание всплывающего окна// граница окна// отступ текста// цвет текста в окне// цвет фона окнанекоторый// вывод всплывающего окна// граница окна// отступ текста// цвет текста в окне// цвет фона окнанекоторый// вывод всплывающего окнаРис. 2.17. Всплывающее окно на фоне браузераРис. 2.17. Всплывающее окно на фоне браузера/* Заполнение содержимым: */ popupBody.innerHTML = "<НЗ>Здесь расположен mypopup. show(200 ,100 4,007,0d.ocumenb.tody)

создание всплывающего окна

создание всплывающего окна

// граница окна

// отступ текста

// цвет текста в окне

// цвет фона окна

некоторый

// вывод всплывающего окна

// граница окна

// отступ текста

// цвет текста в окне

// цвет фона окна

некоторый

// вывод всплывающего окна

Рис. 2.17. Всплывающее окно на фоне браузера

Рис. 2.17. Всплывающее окно на фоне браузера

Свойства объекта popup:

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

mypopup. document .body. style . border = "solid 4px black" // границы окна mypopup.document. body. style . background = "yellow"// цвет фона окна

mypopup.document.body.style.color = "blue"// цвет текста в окне

isOpen — пока всплывающее окно отображается на экране, это свойство имеет значение true, в противном случае — false; применяется в выражениях сценария, которые выполняются при уже открытом окне.

Методы объекта popup:

show(left, top, width, height [, позиционирование]) — отображает всплывающее окно после создания объекта popup с помощью метода window.createPopupQ

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

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

Заполнение всплывающего окна содержимым производится с помощью свойства innerHTML, принимающего в качестве значения строку, содержащую теги HTML. Более подробно это свойство будет рассмотрено в подразделе 2.6.3. Таким образом, в окно можно вставлять не только тексты, но и изображения и другие элементы.

Пример

mypopup.document.body.innerHTML = "<IMG SRC = 'picture.jpg'>"

Более подробно об этом свойстве будет рассказано в следующем разделе.

Ниже приводится пример HTML-документа (рис. 2. 18) с двумя кнопками, щелчок на которых вызывает одну и ту же функцию pop(xcontent), открывающую всплывающее окно и заполняющую его содержимым, которое задано параметром xcontent:

<HTML>

<НЗ>Всплывающие окна</НЗ>

<BUTTON 01 onclick = "pop('Bo первых строках своего письма я рад вам сообщить ')">Просто текст</В11ТТОМ>

<BR><BR>

<BUTTON onclick = "pop('<IMG SRC = кружка.gif>

Это кружка с квасом. ') ">Картинка с текстом</В1)ТТОМ>

<SCRIPT>

function pop(xcontent){

var mypopup = window.createPopup();

var popupBody = mypopup.document.body

popupBody.style.borde r = "solid 2px green "

popupBody.style.padding = "5px"

popupBody.style.color = "blue"

popupBody.style.background = "ffffdO"

popupBody.innerHTML = "<p>" + xcontent + "</p>"

mypopup.show(130,90,400,200,document.body)

]

</SCRIPT>

</HTML>

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

<HTML>

<НЗ>Всплывающие окна</НЗ>

<BUTTON onclick = "pop('Bo первых строках своего письма я рад вам

сообщить •) °>Просто tckct</BUTTON>

<BR><BR>

<BUTTON onclick = "po'p('"<IMG SRC = кружка.ggif>

Это кружка с квасом. ') ">Картинка с текстом</ВиТТОМ> <SCRIPT>

var mypopup = wi ndow. createPopupO

var popupBody = mypopup.document.body

popupBody.style.beorder = "solid 2px green"

popupBody.style.padding = "5px"

popupBody.style.color = "blue"

popupBody.style.background = "ffffdO"

function pop(xcontent) {

popupBody.1nnerHTML 二 *<p>M + xcontent + "</p>

mypopup.show(130,90,400,200,document.body)

I

</SCRIPT>

</HTML>

仆色喻л Правка ВИД —нно® CujpSiic ^лрви

Влшываюиющие окна

Прос I гвкст

кружка с квасом.

■ j .Гиви■ j .Гиви;.Lj МОЙ кщ етьюгер;.Lj МОЙ кщ етьюгершш

■ j .Гиви

■ j .Гиви

;.Lj МОЙ кщ етьюгер

;.Lj МОЙ кщ етьюгер

ш

ш

Рис. 2.18. Пример всплывающего окна с изображением и текстом

Динамическое изменение элементов документа

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

с помощью метода write Q;

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

путем изменения значений свойств innerText, outerText, innerHTML,outerHTML, которые имеют почти все объекты, заданные с помощью тегов.

Использование метода writeQ

Метод writeQ объекта document уже неоднократно упоминался в этой книге. Он принимает в качестве параметра строку, содержащую HTML-код и/или просто текст. Выполнение в сценарии выражения document.write(cTpoKa) приводит к дописыванию в текущий HTML-документ содержимого параметра строка и немедленной его интерпретации браузером. В результате документ и его объектная модель обновляются. При этом файл с исходным HTML-кодом остается без изменений. Если требуется полностью заменить текущий документ, то сначала применяют метод очистки документа document.dearQ, а затем document.write(cTpoKa). Однако при такой кардинальной трансформации текущего документа следует быть осторожным. Наиболее безопасный прием — сначала сгенерировать содержимое нового HTML-документа с помощью сценария в текущем документе, а затем отправить HTML-код в новое окно или в другой фрейм многофреймового документа.

Если быть более точным, то следует отметить, что метод writeQ может принимать произвольное количество строковых параметров:

document. wri te CcrpOKal, [, строка2 . . .[, строкам]])

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

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

Методы writeQ и writelnQ работают в браузерах IE3+ и NN2+.

Изменениезначений атрибутов элементов

Элементы HTML-документа, как известно, задаются тегами, большинство из которых имеют атрибуты (параметры). В объектной модели документа тегам элементов соответствуют объекты, а атрибутам — свойства этих объектов. В большинстве случаев названия свойств объектов совпадают с названиями атрибутов, но в отличие от последних записываются в нижнем регистре. Это же относится и к параметрам таблиц стилей. Однако это общее правило может иметь исключения. Поэтому им нужно пользоваться так: ищите в справочнике свойство, похожее на атрибут, и обращайте внимание на его написание. Например, тегу графического изображения <IMG ID = "myimg" SRC = "picture.jpg"> соответствует объект document.all.myimg, а атрибуту SRC — свойство document.allmyimg.src, значением которого является имя (URL-адрес) файла с изображением. С помощью сценария можно присвоить этому свойству новое значение, и в HTML-документе произойдет замена графического элемента.

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

<IMG ID = "myimg" SRC = "picture.jpg"

STYLE = "position:absolute; top:20; left:50: z-index:3">

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

document.all.myimg.style.top = 30

document. all. myimg. style . top = 100

document.all.myimg.style.zlndex = -2

Параметр z-index в таблице стилей, указывающий слой (относительное положение выше-ниже) для элемента, в объектной модели представляется свойством zlndex.

ВНИМАНИЕ -

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

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

Изменение элементов

Наиболее удобный способ динамического изменения элементов HTML-документа в IE4+ основан на использовании свойств innerText, outerText, innerHTML и outerHTML В NN6+ можно использовать только свойство innerHTML Множество примеров вы найдете в главе 4, а здесь мы ограничимся разъяснением общих вопросов.

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

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

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

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

<DIV ID = "my">

<А HREF = ' raznoe.htm'>

IMG SRC = ' picture. jpg1>Ссылка на раздел <В>Разное</В>

</A>

</DIV>•

В этом случае свойства innerText и outerText для элемента, заданного контейнерным тегом <DIV>, совпадают:

document.all. my. innerText// значение равно: "Ссылка на раздел

Разное"

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

document. all. my . innerText = "<ЕШТТОМ>Щелкни здесь</В11ТТОМ>"

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

Рассмотренные выше свойства innerText и outerText не столь эффективны, как замечательные свойства innerHTML и outerHTML. Без них мне было бы просто скучно заниматься программированием на HTML и JavaScript.

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

Свойство outerHTML аналогично свойству innerHTML, но отличается тем, что содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента.

Для приведенного выше фрагмента HTML-кода имеет место следующее: nnerHTML /* значение равно:

"<A HREF = 'raznoe.htm'>

<IMG SRC = 'picture.jpg'>

Ссылка на раздел <В>Разное</В></А>" */

/* значение равно: "<DIV ID = 'my' > <A HREF = 'raznoe.htm 1 > <IMG SRC = 'picture.jpg'> Ссылка на раздел <В>Разное</В> </A></DIV>" */

Если в сценарии выполнить, например, выражение:

document.all.my.innerHTML = "<ВиТТОМ>Щелкни здесь</В1ЯТОМ>",

то ссылка, изображение и текст будут заменены кнопкой с надписью Щелкни здесь. При этом контейнерный тег <DIV ID = "my"> сохранится. Если же вместо свойства innerHTML использовать свойство outerHTML, то кнопка также появится, но уже без контейнера <DIV ID = "my">.

Заметим, что свойства innerHTML и outerHTML могут применяться и к элементам, которые задаются неконтейнерными тегами, например тегом <IMG>. В этом случае значения innerHTML и outerHTML всегда совпадают.

Ниже приводится код функции getproperties (xid), которая может использоваться в сценарии для получения значений свойств innerHTML, outerHTML, innerText и outerText элементов HTML-документа. Эта функция принимает в качестве параметра значение идентификатора ID элемента (или значение его атрибута NAME) и выводит диалоговое окно со значениями перечисленных выше свойств. Вы можете применять ее на этапе изучения.

function getproperties(xid) {

var x = eval ( "doc "document.all." + xid)

alert(" innerHTML: " + x. innerHTML + "\n outerHTML: " + x.ou TERHTML + "\n innerText: " + x.iiim:rText + "\n outerText:+ x.outerText)

}

Вот пример использования функции getproperties(xid):

<HTML>

DIV ID = "my">

A HREF = ' raznoe.htm'>

IMG SRC = ' picture . jpg ' >Ссылка на раздел <В>Разное</В></А>

</DIV>

<Н2 ID = "pri vet">ripHBeT <1>читателям</1></НЗ»

<SCRIPT>

getpropert1es(omyM)//отображениесвойствэлементаmy

getproperties ("privet")//отображениесвойствэлемента

privet

function getproperties("xid"){ // код функции

}

</SCRIPT>

</HTML>

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

Большинство веб-страниц содержат графические элементы, которые используются не только для украшения страниц, но и в качестве информационного наполнения: иллюстрированные каталоги товаров, схемы, чертежи, географические карты, фотогалереи и т. п. Если файлы с графикой велики и/или их много, то загрузка такой страницы в браузер может потребовать слишком много времени. Для ускорения загрузки используют специальные приемы. Так, нередко сначала загружают изображения с низким разрешением из небольших по объему файлов. На их основе создаются ссылки на файлы с графикой полноценного разрешения, которые загружаются только при щелчке на ссылке. Можно также использовать в теге <IMG> кроме атрибута SRC атрибут LOWSRC, позволяющий загрузить сначала изображение с низким разрешением, а затем, по мере приема, заменить ее рисунком с большим разрешением. Здесь мы рассмотрим способ ускорения загрузки графики, предоставляемый JavaScript.

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

Для предварительной загрузки изображения следует создать его объект в памяти браузера. Такой объект несколько отличается от объекта изображения, создаваемого с помощью тега <IMG>. Как и все объекты, создаваемые сценариями, объект изображения не отображается в окне браузера. Однако его наличие в коде документа уже обеспечивает загрузку самого изображения при загрузке документа. Чтобы создать в памяти объект изображения, необходимо в сценарии выполнить следующее выражение:

myimg = new 1та§е(ширина, высота)

Параметры функции-конструктора объекта определяют размеры изображения и должны соответствовать значениям атрибутов WIDTH и HEIGHT тега <IMG>, который используется для отображения предварительно загруженного изображения. Для созданного в памяти объекта изображения myimg можно задать имя или, в общем случае, URL-адрес графического файла. Это делается с помощью свойства src: myimg. src = "11К1_-адрес_изображения"

Данное выражение предписывает браузеру загрузить в кэш-память указанное изображение, но не отображать его. После загрузки в кэш-память всех изображений и загрузки всего документа можно сделать их видимыми. Для этого нужно свойству src элемента <IMG> присвоить значение этого же свойства объекта изображения в кэш-памяти. Например:

document.images[0].src = myimg.src

Здесь слева от оператора присвоения указано свойство src первого в документе элемента, соответствующего тегу <IMG>, а справа — свойство src объекта изображения в кэш-памяти.

Теперь рассмотрим в качестве примера HTML-документ, в котором отображается список названий графических элементов и одно исходное изображение (рис. 2.19). Щелчок на элементе списка приводит к отображению соответствующего изображения. Все графические элементы из этого списка предварительно загружаются в кэш-память и поэтому быстро отображаются при выборе из списка. Список, как известно, создается с помощью контейнерного тега <SELECT>, содержащего теги <OPTION>. Соответствующий фрагмент HTML-кода мы сгенерируем с помощью сценария и запишем в текущий документ. В листинге 2.3 приведен соответствующий код.

Листинг 2.3. Код HTML-документа, в котором отображается список названий графических элементов и одно исходное изображение

<HTML>

<HEAD>

<SCRIPT>

// массив имен графических // файлов// массив имен графических // файловvar imgFile = new ArrayO

// массив имен графических // файлов

// массив имен графических // файлов

imgFile[0] = "pictl.jpg"

imgFiletl] = "pict2.jpg"

imgFile[2] = "pict3.jpg" imgFile[3] = "pict4.jpg"

var imgName = new ArrayO imgName[0] = "Картинка!" imgName[l] = "Картинка2" imgName[2] = "КартинкаЗ"var imgName = new ArrayO imgName[0] = "Картинка!" imgName[l] = "Картинка2" imgName[2] = "КартинкаЗ"// массив названий картинок// массив названий картинок

var imgName = new ArrayO imgName[0] = "Картинка!" imgName[l] = "Картинка2" imgName[2] = "КартинкаЗ"

var imgName = new ArrayO imgName[0] = "Картинка!" imgName[l] = "Картинка2" imgName[2] = "КартинкаЗ"

// массив названий картинок

// массив названий картинок

imgName[3] = "Картинка4"

/* Создание объектов изображений и var imgObj = new ArrayOfor(i = 0; i < imgFile."length; i- imgObj[i] = new Image(150, 100)imgObj [i] .src = imgFile [i]/* Создание объектов изображений и var imgObj = new ArrayOfor(i = 0; i < imgFile."length; i- imgObj[i] = new Image(150, 100)imgObj [i] .src = imgFile [i]загрузка изображений в кэш */// массив объектов изображений// создаем объект изображения/* загрузка рисунка в память без отображения */загрузка изображений в кэш */// массив объектов изображений// создаем объект изображения/* загрузка рисунка в память без отображения */

/* Создание объектов изображений и var imgObj = new ArrayO

for(i = 0; i < imgFile."length; i- imgObj[i] = new Image(150, 100)

imgObj [i] .src = imgFile [i]

/* Создание объектов изображений и var imgObj = new ArrayO

for(i = 0; i < imgFile."length; i- imgObj[i] = new Image(150, 100)

imgObj [i] .src = imgFile [i]

загрузка изображений в кэш */

// массив объектов изображений

// создаем объект изображения

/* загрузка рисунка в память без отображения */

загрузка изображений в кэш */

// массив объектов изображений

// создаем объект изображения

/* загрузка рисунка в память без отображения */

function imgshowClist) {/* отображение изображения

при выборе из списка

var х = list.options[list. selectedlndex].value /* выбранный номер

изображения */

document.all.imgO.src = eval("imgObj [ "+ x + "].src" )

/* Создание списка изображений */

var clist = "<SELECTonchange= ' imgshow(this) ' >"

for(i = 0; i<imgFile. length; i++){

clist+= "<OPTION VALUE="+ i + ""imgName[i]

}

clist + = "</5ELECT>"

document.write(clist)/* запись списка изображений

в документ */

</SCRIPT>

</HEAD>

<! Исходная картинка>

<IMG ID = "img0" SRC = "pict0.jpg" WIDTH=150 HEIGHT=100>

</HTML>

% 10AKHMra JavaSCrip.\pmba\imgtoad.hto晔-•.■X回

КэртиикаЗ Картинка^КэртиикаЗ Картинка^с|Гстоеос|Гстоео^-, Ни.. .ч-п...:-: •:(•宓"e^-, Ни.. .ч-п...:-: •:(•宓"eфайл Правка Rm Избранное Сервис мфайл Правка Rm Избранное Сервис мj Картинка! *j Кэртинка1j Картинка! *j Кэртинка1Рис. 2.19. При выборе названия изображения из списка соответствующее отображается из предварительно загруженного файлаРис. 2.19. При выборе названия изображения из списка соответствующее отображается из предварительно загруженного файла

КэртиикаЗ Картинка^

КэртиикаЗ Картинка^

с|Гстоео

с|Гстоео

^-, Ни.. .ч-п...:-: •:(•宓"e

^-, Ни.. .ч-п...:-: •:(•宓"e

файл Правка Rm Избранное Сервис м

файл Правка Rm Избранное Сервис м

j Картинка! *j Кэртинка1

j Картинка! *j Кэртинка1

Рис. 2.19. При выборе названия изображения из списка соответствующее отображается из предварительно загруженного файла

Рис. 2.19. При выборе названия изображения из списка соответствующее отображается из предварительно загруженного файла

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

<SELECT onchange = .' imgshow(this) ' >

«DPTION VALUE = бЖартинка!

OPTION VALUE = 1>Картинка2

<OPTION VALUE = 2>КартинкаЗ

<OPTION VALUE = 3>Картинка4

</ 5ELECT>

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

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

Для организации постоянного периодического (через заданный интервал времени) выполнения некоторого выражения или функции служит метод setlntervalQ объекта window. Этот метод имеет следующий синтаксис:

setlnterval (выражение, период [, язык])

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

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

setlnterval("myfunc()", 500)

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

van xstr = "myfunc(" + paraml +,+ param2 + 11)"

setlnterval(xstr, 500)

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

Для остановки запущенного временного процесса служит метод clear!nterval(MfleH- тификатор), который принимает в качестве параметра целочисленный идентификатор, возвращаемый соответствующим методом setlntervalQ, например:

var myproc = setlnterval ("myf unc () , 100") if (confirm("Прервать процесс ?")) clearInterval (myproc)

Другие, содержательные примеры использования методов setlntervalQ и cleaг- IntervalQ приведены в разделах 4.1 и 4.2.

Чтобы выполнить выражение с некоторой временной задержкой, используется метод setTimeoutQ. Этот метод объекта window имеет следующий синтаксис:

setTimeout(выражение, задержка [, язык])

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

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

setTimeout("myfunc()", 1000)

ВНИМАНИЕ -

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

Для отмены задержки процесса, запущенного с помощью метода setTimeout(), используется метод с1еагТ1теои1(идентификатор), который принимает в качестве параметра целочисленный идентификатор, возвращаемый соответствующим методом setTimeout.

В следующем HTML-документе имеются две кнопки. Щелчок на кнопке Пуск открывает через 5 с новое окно и загружает в него документ mypage.htm. Однако это действие можно отменить с помощью кнопки Отмена, если щелкнуть на ней, пока окно еще не открыто:

<HTML>

«BUTTON ID="start">Пуск</ВиТТОМ>

«BUTTON ID="stop">OTMeHa</BUTTON>

<5CRIPT> var myproc function start.onclickO{ myproc = setTimeout)ut ("wi ndow. opemn'(ypageh.mt")'(•mypage.htm')" , 5000) }

function stop. onclickO { clearTimeout(myproc) } </SCRIPT> </HTML>

Более содержательный пример использования метода setTimeoutQ можно найти в подразделе4.8.10.

ВНИМАНИЕ

При использовании методов setlntervalQ и setTimeout() следует иметь в виду, что их вторые параметры задают лишь приблизительные значения временных задержек.

Работа с Cookie

Для хранения небольших объемов информации на диске компьютера пользователя в браузере предусмотрен так называемый механизм cookie. Обычно он используется для хранения имени пользователя и пароля, который вводится в поле формы защищенного веб-сайта, атакже информации о предыдущем посещении сайта. Например, можно сохранить на диске дату последнего посещения сайта данным пользователем. При загрузке сайта эта дата сравнивается с некоторой датой, установленной автором сайта в качестве даты обновления. Если вторая (авторская) дата более поздняя, чем первая, то на веб-странице появляется соответствующая отметка, например текст или изображение с надписью «New» или «Обновлено!». Разумеется, сравнение дат и вывод на страницу отметки производится с помощью сценария. А вот еще один пример: сценарий проверяет, а посетил ли сайт, скажем, Вася Пупкин; если это произошло, то на страницу выводится персональное сообщение.

По существу, cookie — это единственный способ сохранения данных на диске пользователя, безопасный для него. Как известно, веб-браузеры препятствуют свободному обращению к папкам и файлам на компьютере пользователя (см. главу 5). Однако следует помнить, что многие пользователи не любят cookie-записи и всячески их истребляют.

Записи cookie браузер Internet Explorer сохраняет в отдельных текстовых файлах, расположенныхв папке Windows\Cookies. Имя такого файла образуется на основе имени пользователя и домена того сервера, на котором создавался cookie- файл. Netscape Navigator 4 для Windows создает просто один файл cookie.txt. Вообще говоря, структура данных в cookie-файлах для различных браузеров не столь существенна, поскольку, во-первых, не рекомендуется открывать и изменять эти файлы в текстовых редакторах, а во-вторых, браузеры IE ИNN используют одинаковый синтаксис чтения и записи cookie-данных, основанный на использовании свойстваdocument. cookie.

Итак, данные в cookie-файлах организованы в виде записей. Каждую такую запись можно представить себе в виде строки, содержащей следующие элементы:

имя записи;

содержание записи;

срок хранения (годности) записи;

домен сервера, который создал запись;

сведения о необходимости установки безопасного http-соединения для доступа к записям;

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

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

Срок хранения используется браузером для автоматического удаления просроченных записей, чтобы предотвратить чрезмерное разрастание объема cookie-файлов. Впрочем, IE4+ и NN4+ ограничили объем cookie-файлов 20 записями на каждый домен.

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

document.cookie = "соо!<1еМате=данные

[; expires=CTpoKa_BpeMeHK_GMT] '

[; path=nyTb]

(;с!ота1п=домен]

[; secure]"

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

Рассмотрим элементы cookie-строки.

Им я-данные. Каждая cookie-запись должна иметь имя и строковое значение, которое может быть и пустой строкой. Например, если требуется сохранить слово «Вася» в cookie-записи с именем User_Name, то соответствующее выражение JavaScript будет иметь вид:

document.cookie = "User_Name=Bacfl"

При выполнении этого выражения браузер пытается найти cookie-запись с таким именем. Если он не находит ее в текущем домене, то создает ее автоматически. Еслin запись с таким именем уже существует, то браузер заменяет ее данные новыми. Данные в этом элементе cookie-записи не должны содержать точек с запятыми, запятых и пробелов. Чтобы заменить пробелы соответствующими символами (%20),), строка с данными предварительно обрабатывается функцией escapeQ.

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

var expdate = new Date()// создаем объект даты

var mont hFromNow = expdate . getT ime() + (30*24*60*60*1000)

expdate.setTime(monthFromNow)// устанавливаем значение даты

После этого полученную дату следует привести к строковому формату GMT: document.cookie = "User_Name=BacH; expires=" + expdate. toGMTString()

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

expdate=Thu. 01-Jan-70 00:00:01 СИТ

Отсутствие срока хранения означает для браузера, что данная cookie-запись является временной и не записывается в файл.

Об использовании методов объекта даты см. подраздел 1.7.5.

path — cookie-записи, производимые компьютером пользователя, имеют путь, принятый по умолчанию (в текущей папке). Однако можно создать копию cookie в другой папке, указав путь к ней в качестве значения этого параметра.

domain — для синхронизации cookie-данных с определенным документом или и группой документов браузер выясняет домен текущего документа и помещает в cookie-файл записи, соответствующие этому домену. Если пользователю требуется просмотреть список всех cookie-записей, содержащихся в свойстве document.cookie, то он должен просмотреть все пары имя-значение, находящиеся в cookie-файле с именем домена текущего документа. Формат представления домена должен охватывать по крайней мере два уровня, например rambler.ru.

secure — принимает логические значения (true или false). При создании cookie- записей на стороне клиента (компьютера пользователя) этот параметр опускается.

Теперь займемся чтением и записью данных cookie. Данные cookie, которые можно получить с помощью сценария на JavaScript, представляют собой единственную строку — значение свойства document. c o okie. Выбор значений отдельных элементов (параметров) cookie производится на основе анализа содержимого этой строки методами объекта String (см. подраздел 1.7.1). Кроме того, если две и более cookie-записи (до 20) соответствуют одному и тому же домену, то в JavaScript они все равно представляются одной строкой и разграничиваются точкой с запятой и пробелом.

Рассмотрим функцию readCookie(name), читающую cookie-данные, соответствующие имени записи name, которое передается этой функции в качестве параметра:

function readCookie(name) {// чтение cookie-данных записи

var xname = name + "

var xlen = xname.length

var den = document.cookie.length

var i = О

while(i < clen) {

var j = i + xlen

if (document.cookie.substri ng(i , j) == xname) return getCookieVal(j)

i = document .cookie. indexOf(" ",!) +1

if (i == 0) break

I return null

I

Функция readCookie(name) возвращает значение cookie-записи с именем name или null, если такая запись не найдена. В теле этой функции использована еще одна, вспомогательная функция getCookieVal(j), возвращающая декодированное значение cookie-данных. Декодирование производится с помощью встроенной функции unescapeQ. Дело в том, что cookie-запись должна представлять собой кодированную строку, полученную путем обработки встроенной функцией escapeQ,

чтобы, в частности, заменить пробелы специальными символами (%20). Код этой функции приведен ниже:

function getCookieVal (n){ ){/* вспомогательная функция,

вызываемая из readCookieQ */

var endstr = document. cookie. indexOf (";",n)

if (endstr == -1)

endstr = document .cookie .length

return unescape(document.cookie.substring(n, endstr))

}

Теперь рассмотрим функцию writeCookieQ, позволяющую создать или обновить cookie-запись:

function wri teCookie(name, value, expires, path, domain, secure) {

/* запись cookie */

document.cookie =

name + "=" + escape(value) +

((expires) ? "; expires=" + expires.toGHTSt ring[): " ) +

((path) ? "; path=" + path : "") +

(domain) ? ";domain " + domain : " ) + ((secure) ? "; secure" : "")

}

Эта функция принимает следующие параметры:

name — строка, содержащая имя cookie-записи (обязательный параметр);

value — строка, содержащая значение cookie (обязательный параметр);

expires — объект даты (Date), содержащий срок хранения cookie-записи; если отсутствует, то после завершения работы браузера cookie-запись удаляется;

path — строка, содержащая путь cookie-записи; если не указан, то используется путь вызванного документа;

domain — строка, содержащая домен нужной cookie-записи; если не указан, то используется домен вызванного документа;

secure — логическое значение (true или false), определяющее необходимость использования безопасного HTTP-соединения.

Обратите внимание, что в теле функции writeCookieQ происходит кодирование значения параметра value с помощью встроенной функции escapeQ.

Для удаления cookie-записи можно использовать следующую функцию:

function deleteCookie(name, path, domain) {

/* удаление cookie-записи */

if (readCookie(name)) {

document .cooki e =

name + "=" +

((path) ? "; path=" + path : "") +

((domain) ? "; domain="+domain : "") + ; expires=Thu, 01-Jan-70 00:00:01 GMT" }

Эта функция устанавливает дату срока хранения cookie-записи так, что запись будет удалена. Параметр path должен иметь такое же значение, которое использовалось при создании cookie-записи, или иметь пустое значение (null), если при

создании записи он не был определен. Таким же образом задается значение параметра domain.

Советую вам поэкспериментировать с чтением, созданием и удалением cookie- записей (листинг 2.4). При этом следует иметь в виду, что созданные или измененные cookie-записи будут записаны на диск только после закрытия браузера. До этого записи существуют лишь в кэше (оперативной памяти). С другой стороны, cookie-записи загружаются в оперативную память и становятся доступны как значение свойства document.cookie только при запуске браузера.

Листинг 2.4. HTML-код для эксперимента со сценарием, записывающим и читающим cookie-запись

<НТМ1_>

<SCRIPT>

function readCookie(name)

{

// чтение cookie-данных записи / / код

function getCookieVal(n){ ...

:i

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

// код

function writeCookie(name. запись cookie */ ...

value,

expires, path, domain, secure) { /* // код

}

/ * Срок хранения - 1 год от текущей даты: */

var dl = new Date ()

var d2 = d.getTimeO + (365*24*60*60*1000)

dl.setTime(d2)

/* Запись и чтение cookie: */

writeCookie( "myrecord"," Привет ",dl)

alert (readCookie("myrecord") )

</SCRIPT>

</HTML>

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

ВНИМАНИЕ -

Значение пароля не должно фигурировать в сценарии в явном виде, а записывать пароль в cookie-файл желательно в зашифрованном виде.

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

Для закрепления полученных навыков рекомендую вам написать сценарий, использующий cookie-запись для проверки, была ли обновлена веб-страница с момента последнего ее посещения пользователем. Если вы решитесь на это, то советую еще раз обратиться к свойствам объекта Date (см. подраздел 1.7.5).

Глава 3. Объектная модель браузера и документа

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

Объект window

Объект window содержит коллекцию frames всех фреймов, заданных в HTML-документе с помощью контейнерного тега <FRAMESET>. Объект window имеет свойства, методы, события, а также дочерние объекты. Приведем их полные перечни и рассмотрим, с разной степенью подробности, только наиболее важные с практической точки зрения.

Свойства window

parent — возвращает родительское для текущего окно;

self— возвращает ссылку на текущее окно;

top — возвращает ссылку на главное окно;

name — название окна;

opener — окно, создаваемое текущим;

closed — сообщает, если окно закрыто;

status — текст, показываемый в строке состояния браузера;

defaultStatus — текст по умолчанию строки состояния браузера;

returnValue — позволяет определить возвращенное значение для события или диалогового окна;

client — ссылка, которая возвращает объект навигатора браузеру;

document — ссылка только для чтения на объект окнаdocu ment;

event — ссылка только для чтения на глобальный объект event;

history — ссылка только для чтения на объект окна history;

-pocalionj-pocalionjdocument；document；anchorsanchorsappletsappletsembedsembedsfittersfittersimagesimagesplugins)plugins)scriptsscripts“№aion“№aionleSheetsleSheets—^screen J—^screen J-^ event J-^ event JGhecXbojtj— - [ reseJ)GhecXbojtj— - [ reseJ)J ^submitjJ ^submitj^textareaj- -^hidden j^textareaj- -^hidden j[window[windowКаждый фрейм в коллекции framesКаждый фрейм в коллекции framesявляется окном(window)является окном(window)element jelement jbuttonbuttonradiojradiojРис. 3.1. Объектная модельРис. 3.1. Объектная модель

-pocalionj

-pocalionj

document；

document；

anchors

anchors

applets

applets

embeds

embeds

fitters

fitters

images

images

plugins)

plugins)

scripts

scripts

“№aion

“№aion

leSheets

leSheets

—^screen J

—^screen J

-^ event J

-^ event J

GhecXbojtj— - [ reseJ)

GhecXbojtj— - [ reseJ)

J ^submitj

J ^submitj

^textareaj- -^hidden j

^textareaj- -^hidden j

[window

[window

Каждый фрейм в коллекции frames

Каждый фрейм в коллекции frames

является окном

(window)

является окном

(window)

element j

element j

button

button

radioj

radioj

Рис. 3.1. Объектная модель

Рис. 3.1. Объектная модель

location — ссылка только для чтения на объект окна Location;

navigator — ссылка только для чтения на объект окна navigator;

screen — ссылка только для чтения на глобальный объект screen.

Свойство parent позволяет обратиться к объекту, находящемуся в иерархии на одну ступень выше — например, к окну, содержащему коллекцию фреймов, в которой находится наш фрейм. Для перемещения на две ступени вверх мы должны использоватьparent.parentит.д.:

parent,window.frames(0)

pa rent.parent.window.frames(0)

Чтобы обратиться к самому главному окну, то есть к окну браузера, следует использовать свойство top. Однако top не может обращаться к главному фрейму вашей системы разбиения на фреймы.

Свойство name соответствует имени фрейма, которое мы задаем в теге <FRAMESET>.

Свойство status полезно использовать для вывода сообщений во время работы сценария, например при отладке:

window.51а1из="Сейчас работает сценарий"

Методы window

openQ — открывает новое окно браузера;

close() — закрывает текущее окно браузера;

showHelpQ — показывает окно подсказки как диалоговое;

showModalDialog() — показывает новое окно как диалоговое (модальное);

alertQ — показывает окно предупреждения с сообщением и кнопкойОК;

promptQ — показывает окно приглашения с сообщением, текстовым полем и кнопками ОК и Cancel (Отмена);

confirmQ— показывает окно подтверждения с сообщением и кнопками ОК и Cancel (Отмена);

navigateQ — загружает другую страницу с указанным адресом;

blurQ — убирает фокус с текущей страницы; соответствующее событие — onblur;

focus () — устанавливает страницу в фокус; соответствующее событие — onfocus;

scrollQ — разворачивает окно на заданные ширину и высоту;

setlntervalQ — указывает процедуре выполняться периодически через заданное количество миллисекунд;

setTimeoutQ — запускает программу через заданное количество миллисекунд после загрузки страницы;

clearlntervalQ — обнуляет таймер, заданный методомsetlntervalQ;

clearTimeoutQ — обнуляет таймер, заданный методомsetTimeout();

execScriptQ — выполняет код сценария; по умолчаниюJScript.

События window

onblur — выход окна из фокуса;

onfocus — окно становится активным;

onhelp — нажатие пользователем клавиши F1;

onresize — изменение пользователем размеров окна;

onscroll — прокрутка окна пользователем;

onerror — ошибка при передаче;

onbeforeunload — передвыгрузкой страницы, чтопозволяетсохранитьданные;

onload — страница полностью загружена;

onunload — непосредственно перед выгрузкой страницы.

Три из перечисленных выше событий происходят в результате действий пользователя. Если открыто несколько окон браузера, пользователь может переключаться между ними, переводя фокус с одного окна на другое. Эти действия инициируют события onblurи onfocus. Заметим, что эти же события можно вызвать программным способом, используя методы blur и focus. Если происходит ошибка при загрузке страницы или ее элемента, то инициируется событие onerror. Мы можем использовать это событие в программе, чтобы, например, попытаться еще раз загрузить страницу или как-то изменить дальнейшие действия.

Пример

<SCRIPT>

function window.onerrэг(){

alert("Произошла ошибка! Попробуйте еще раз")

</SCRIPT>

Событие onload происходит, когда страница полностью загружена в окно; событие onbeforunload—nepeflTeMKaKCTpaHHnanoKHHeTOKHo;co6brraeonunload—когда страница выгружена, перед загрузкой новой страницы или перед закрытием браузера.

Пример

<SCRIPT>

function window.onunload() {

alert("Страница выгружается!")

}

</SCRIPT>

Объект window имеет несколько дочерних объектов, которые доступны с его помощью: document, history, navigator, location, event и screen.

Объект document

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

Свойства document

СвойствоАтрибутНазначение

activeElement

Идентифицирует активный элемент

alinkColor

ALINК

Цвет активных ссылок на странице

bgColor

BGCOLOR

Определяет цвет фона элемента

body

Ссылка только для чтения на неявный основной объект документа, определенный втеге<BODY>

Свойство

Атрибут

Назначение

cookie

Строка cookie-записи. Присвоение нового значения этому свойству приводит к записи cookie на диск после закрытия браузера

domain

Устанавливает или возвращает домен документа для его защиты или идентификации

fgColor

TEXT

Устанавливает цвет текста переднего плана

lastModified

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

linkColor

LINK

Цвет еще не посещенных гиперссылок на странице

location

Полный URL документа

parentWindow

Возвращает родительское окно для документа

readyState

Определяет текущее состояние загружаемого объекта

referer

URL страницы, которая вызвала текущую

selection

Ссылка только для чтения на дочерний для document объект selection

title

TITLE

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

url

URL

URL-адрес документа клиента или в теге <МЕТА>

vlinkColor

VLINK

Цвет посещенных ссылок на странице

Коллекции document

all — коллекция всех тегов и элементов в основной части документа;

anchors — коллекция всех «якорей» (закладок) в документе;

applets — коллекция всех объектов в документе, включая встроенные элементы управления, графические элементы, апплеты, внедренные и другие объекты;

embeds — коллекция всех внедренных объектов в документе;

forms —коллейция всех форм на странице;

frames — коллекция всех фреймов, определенных в теге<FRAMESET>;

images — коллекция всех графических элементов (изображений) на странице;

links — коллекция всех ссылок и блоков <AREA> на странице;

plugins — еще одно название для коллекции внедренных объектов документа;

1 • scripts — коллекция всех разделов <SCRIPT> на странице;

stylesheets — коллекция всех конкретных свойств стиля, определенных в документе.

Методы document

clear — очищает выделенный участок;

close — закрывает текущее окно браузера;

createElement — создает экземпляр элемента для выделенного тега;

elementFromPoint — возвращает элемент с заданными координатами;

execCornmand — выполняет команду (операцию) над выделением или областью; open — открывает документ как поток для обработки результатов применения методов write и writein;

que У ryCommandEnabled — сообщает, доступна ли данная команда;

queryCommandlndeterm — сообщает, если данная команда имеет неопределенный статус;

queryCommandState — возвращает текущее состояние команды;

queryCommandSupported — сообщает, поддерживается ли данная команда;

queryCommandText — возвращает строку, с которой работает команда;

query CommandValue — возвращает значение команды, определенное для документа или объекта TextRange;

write — записывает текст и код HTML в документ, находящийся в указанном окне;

writein — записывает текст и код HTML, заканчивающийся возвратом каретки.

События document

onafterupdate — возникает при окончании передачи данных;

onbeforeupdate — возникает перед выгрузкой страницы;

onclick — происходит при щелчке левой кнопкой мыши;

сidblclick — происходит при двойном щелчке левой кнопкой мыши;

ondragstart — происходит, когда пользователь начинает перетаскивание;

onerror — ошибка при передаче;

onhelp — нажатие пользователем клавиши F1;

onkeydown — возникает при нажатии клавиши;

onkeypress — возникает при нажатии клавиши и продолжается при удержании клавиши в нажатом состоянии;

onkeyup — возникает, когда пользователь отпускает клавишу; onload — возникает при полной загрузке документа;

onmousedown — происходит при нажатии кнопки мыши;

omousemove — происходит при перемещении указателя мыши; ,

<imouseout — происходит, когда указатель мыши выходит за границы элемента;

оптouseover — происходит, когда указатель мыши входит на элемент; onmouseup — происходит, когда пользователь отпускает кнопку мыши;

onreadystatechange — возникает при изменении свойства readystate;

onselectstart — происходит, когда пользователь в первый раз запускает выделенную часть документа.

Объект location

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

Свойства location

href— полный URL-адрес в виде строки;

hash — строка, следующая в URL за символом#, с помощью которого указывается, к какому анкеру следует переместиться при загрузке документа.;

host — часть URL«хосг.порт»; значение порта содержится лишь тогда, когда оно явно было указано в URL-адресе;

hostname — часть URL «хост»;

pathname — путь к объекту или файлу, находящийся после третьего«/»;

port — номер порта URL;

protocol — начальная часть, определяющая протокол, за которой следует двоеточие, например «http:»;

search — строка запроса или данные URL после знака«?».

Например, если вы загрузили страницу с адресом http://www.piter.com, то значением location.href будет эта строка.

Присваивая свойству href новое значение, мы можем изменять показываемую в браузере страницу, например:

window.location.href = "http://www.rambler.ru"

Методы location

assign() — загружает другую страницу; этот метод эквивалентен изменению свойства window.location.href;

reloadQ — обновляет текущую страницу;

replaceQ — загружает страницу с указанным в параметре URL-адресом и заменяет URL-адрес текущей страницы (location.href).

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

Объект history

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

мощью сценария и загружать соответствующие страницы. Объект history имеет только одно свойство и три метода.

Свойство history

length — количество элементов в списке посещенных страниц.

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

Методы history

back() — загружает предыдущую страницу из списка;

forwardQ — загружает следующую страницу из списка;

до() — загружает страницу с относительным номером п из списка (от 0 до history.length-1) или с указанным URL-адресом.

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

window.hi story.go(l)

if (window.history.1ength>4)

window.hi story.go(5)

Очевидно, метод history.go(-l) эквивалентен history.backQ, а метод window.history. go(l) эквивалентен методу history.forwardQ.

Объект navigator

Объект navigator содержит информацию о производителе браузера, его версии и возможностях.

Свойства navigator

appCodeName — название кода браузера; например"Mozilla";

appName — название браузера; например "Microsoft Internet Explorer";

appVersion — версия браузера; например "4.0 (compatible;MSIE 6.0; Windows 98; Win 9x4.90)";

cookieEnabled — определяет возможность использования в браузере cookies со стороны клиента; логическое значение;

U!serAgent — название браузера, посылаемое с помощьюhttp-протокола; например "Mozilla/4.0 (compatible; MSIE 6.0; Windows 98; Win 9x 4.90)".

Коллекции navigator

mimeTypes — коллекция всех типов документов и файлов, поддерживаемых браузером;

plugins — коллекция всех внедряемых объектов на странице.

Методы navigator

taintEnabled — возвращает значение false, включен для совместимости с Netscape Navigator;

javaEnabled — сообщает, возможен ли в данном браузере запуск кода сценария на языке JavaScript; логическое значение.

Объект event

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

altKey — возвращает состояние клавиши Alt, когда происходит событие;

button — кнопка мыши, вызывающая событие;

cancelBubble — устанавливается для запрета прохождения заданного события вверх по объектной иерархии;

clientX — возвращает координату х элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;

clientY — возвращает координату у элемента, исключая обрамление, отступы, полосы прокрутки и т. д.;

CtrlKey — состояние клавиши Ctrl при появлении события;

from Element — возвращает элемент, с которого ушел курсор мыши, для событий onmouseover и onmouseout;

' • keyCode — код ASCII нажатой клавиши; есть возможность изменять значение, передаваемое объекту;

offsetX — возвращает координату х указателя мыши в пикселах относительно содержащего его элемента при возникновении события;

offsetY — возвращает координату у указателя мыши в пикселах относительно содержащего его элемента при возникновении события;

reason — указывает, что перемещение данных прошло успешно или из-за чего онопрекратилось;

returnValue — определяет возвращаемое значение для события;

screenX — возвращает горизонтальную координату указателя мыши относительно экрана, когда происходит событие;

screenY — возвращает вертикальную координату указателя мыши относительно экрана, когда происходит событие;

shiftKey — определяет состояние клавиши Shift при возникновении события;

srcElement — возвращает элемент, с которого началось прохождение события;

srcFilter — возвращает фильтр, создавший событиеonfilterchange;

toElement — возвращает элемент, на который наезжает курсор мыши, при появлении события onmouseover или onmouseout;

type — возвращает название события как строку, без приставки on;

х — возвращает координату х указателя мыши соответственно либо к позиционированному родительскому элементу, либо к окну;

у — возвращает координату у указателя мыши соответственно либо к позиционированному родительскому элементу, либо к окну.

Свойства объекта event устанавливаются в момент прохождения события и большинство из них доступны только для чтения (их нельзя изменить). Однако есть два изменяемых свойства: keyCode и return Value. Мы уже рассматривали применение объекта event.

Объект screen

Объект screen содержит информацию о возможностях экрана пользователя и может применяться, например, для определения размеров создаваемых окон и выбора разрешения передаваемой графики (нет смысла загружать 32-битное изображение, если монитор и видеокарта пользователя поддерживают только 256 цветов). Объект screen имеет следующие свойства:

width — возвращает ширину экрана пользователя (в пикселах);

height — возвращает высоту экрана пользователя (в пикселах);

bufferDepth — определяет, используется ли буфер для хранения «второго экрана»;

colorDepth — возвращает информацию, позволяющую решить, как использовать цвета на экране; количество бит на пиксел устройства или видеобуфера пользователя;

updatelnterval — возвращает или задает интервал времени между обновлениями экрана пользователя.

Объект TextRange

Объект TextRange (текстовая область) отображает разделы потока текста, формирующего HTML-документ. Может использоваться для управления текстом внутри страницы.

Свойства TextRange

htmlText — возвращает содержимое TextRange как текст и код HTML;

text — простой текст, находящийся внутри элемента TextRange илитега<ОРПОМ>.

Методы TextRange

collapse —стягивает текстовую область в точку в начале или конце текущей области;

compareEndPoints — сравнивает две текстовые области и возвращает значение, показывающее результат;

duplicate — возвращает копию области TextRange;

execCommand — выполняет команду (операцию) над выделением или областью;

expand — расширяет текстовую область, добавляя туда новый знак, слово, предложение, или указывает, какие неполные блоки полностью в ней содержатся;

findText — определяет текстовую область, содержащую только искомый текст;

getBookmark — возвращает значение, позволяющее в дальнейшем идентифицировать данную позицию в документе;

inRange — определяет, находится ли заданная текстовая область внутри текущей;

isEqual — определяет, равны ли заданная и текущая текстовые области;

move — изменяет начальную и конечную точки текстовой области для включения в нее различного текста;

moveEnd — заставляет текстовую область сжаться или расшириться до заданной конечной точки;

moveStart — заставляет текстовую область сжаться или расшириться до заданной начальной точки;

moveToBookmark — передвигает границы текстовой области для включения другой, определенной ранее с помощью getBookmark;

moveToElementText — передвигает границы текстовой области для включения текста в заданном элементе;

moveToPoint — передвигает границы текстовой области и сжимает ее вокруг выбранной точки;

parentElement — возвращает элемент, родительский по отношению ко всему, что входит в текстовую область;

pasteHTML —вставляет текст и/или HTML-код в текущую текстовую область;

queryCommandEnabled — сообщает, доступна ли данная команда;

queryCommandlndeterm — сообщает, если данная команда имеет неопределенный статус;

queryCommandState — возвращает текущее состояние команды;

queryCommandSupported — сообщает, поддерживается ли данная команда;

queryCommandText — возвращаетстроку, с которой работает команда;

queryCommandValue — возвращает значение команды, определенное для документа или объектаText Range;

scrollIntoView — переносит текущую текстовую область в видимую часть окна браузера;

select — делает активный подсвеченный участок выделения на странице равным текущей текстовой области;

setEndPoint— переносит начальную или конечную точку текущей текстовой области в начало или конец заданной области.

Глава 4. Примеры сценариев

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

Простые визуальные эффекты

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

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

Суть смены изображений заключается в том, чтобы с помощью сценария изменить значение атрибута SRC тега <IMG>. Напомним, что атрибут SRC имеет в качестве значения строку, указвающую месторасположение графического файла. Если элемент<IMG>, задающий изображение, содержится в HTML-документе, тов объектной модели имеется объект этого элемента со свойством src. Значение этого свойства можно изменить в сценарии. При этом в окно браузера загружается соответствующий графический файл, если, разумеется, он будет найден. В следующем примере щелчок на изображении из файла pictl.gif заменяет его изображением из файла pict2.gif. Поскольку сценарий очень небольшой, он записан в строке, которая присваивается атрибуту onclick тега <IMG>.

<HTML>

<IMG ID = "myimg" SRC = 'pictl.gif

onclick = "document.all.myimg.src = 'pict2.gif'">

</HTML>

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

<HTML>

<IHG ID = "myimg" SRC = 'pictl.gif onclick = "imgchangeQ ">

<SCRIPT>

var flag=false// флаг (триггер)

function imgchange() {// обработчик щелчка на изображении

if (flag)document.all.myimg.src = "pictl.gif"

else document.all.myimg.src = "pict2.gif"

flag=!flag// изменяем значение флага на противоположное

}

</5CRIPT>

</HTML>

Думаю, с изменением одного изображения все ясно. А как быть в случае нескольких изображений? Например, на веб-странице расположена галерея миниатюр (thumbnails — уменьшенных копий крупномасштабных изображений). Мы хотим, чтобы при щелчке кнопкой мыши на миниатюре она увеличивалась, а затем при щелчке на увеличенном изображении оно уменьшалось. Для решения этой задачи потребуется столько флагов, сколько имеется изображений. Флаги определим как массив, каждый элемент которого будет соответствовать отдельному изображению. Далее мы не будем создавать отдельную функцию-обработчик события onclick для каждого графического объекта. Вместо этого создадим одну функцию- обработчик, которая кроме всего прочего будет сама определять, на каком именно изображении произошел щелчок. Идентификаторы ID тегов <IMG> зададим некоторым регулярным образом (например "10", "il", "i2", ...). Так часто поступают при использовании массивов. Создадим еще два массива, содержащих имена графических файлов: один для исходных изображений, а другой — для замещающих. Наконец, HTML-документ с изображениями сгенерируем с помощью сценария. Для этого сначала сформируем строку, содержащую теги <IMG ...>, а затем запишем ее в документ. В листинге 4.1 приводится код, реализующий эту программу.

Листинг 4.1. Код программы для увеличения миниатюр при щелчке мыши<HTML><SCRIPT> varЛистинг 4.1. Код программы для увеличения миниатюр при щелчке мыши<HTML><SCRIPT> varvarvarapictl = new Array("pictl.gif",...),...)/* массив имен исходных/*файлов */массивимензамещающих файлов */apict2= new Array("pict2.gif"aflag = new Array(apictl.length)Формирование строки тегов, описывающих// массив флагов изображения */apictl = new Array("pictl.gif",...),...)/* массив имен исходных/*файлов */массивимензамещающих файлов */apict2= new Array("pict2.gif"aflag = new Array(apictl.length)Формирование строки тегов, описывающих// массив флагов изображения */""var /* var xstr =var /* var xstr =for(ixstr+for(ixstr+0; i < apictl.length;0; i < apictl.length;'<IMG ID = "i1 + i'<IMG ID = "i1 + i++"imgchangeO">'}document.write(xstr)function imgchangeO {"imgchangeO">'}document.write(xstr)function imgchangeO {i++){SRC = " ' + apictl[i] + '" onclicki++){SRC = " ' + apictl[i] + '" onclick////запись в документзапись в документvar varvar varxid = event.srcElement.idn = parselnt(xid.substr(1))xid = event.srcElement.idn = parselnt(xid.substr(1))// обработчик щелчка на изображении// id изображения, на котором был щелчок // выделяем номер элемента// обработчик щелчка на изображении// id изображения, на котором был щелчок // выделяем номер элемента

Листинг 4.1. Код программы для увеличения миниатюр при щелчке мыши

<HTML>

<SCRIPT> var

Листинг 4.1. Код программы для увеличения миниатюр при щелчке мыши

<HTML>

<SCRIPT> var

var

var

apictl = new Array("pictl.gif"

,...)

,...)

/* массив имен исходных

/*

файлов */

массивимензамещающих файлов */

apict2

= new Array("pict2.gif"

aflag = new Array(apictl.length)

Формирование строки тегов, описывающих

// массив флагов изображения */

apictl = new Array("pictl.gif"

,...)

,...)

/* массив имен исходных

/*

файлов */

массивимензамещающих файлов */

apict2

= new Array("pict2.gif"

aflag = new Array(apictl.length)

Формирование строки тегов, описывающих

// массив флагов изображения */

"

"

var /* var xstr =

var /* var xstr =

for(i

xstr+

for(i

xstr+

0; i < apictl.length;

0; i < apictl.length;

'<IMG ID = "i1 + i

'<IMG ID = "i1 + i

+

+

"imgchangeO">'

}

document.write(xstr)

function imgchangeO {

"imgchangeO">'

}

document.write(xstr)

function imgchangeO {

i++){

SRC = " ' + apictl[i] + '" onclick

i++){

SRC = " ' + apictl[i] + '" onclick

//

//

запись в документ

запись в документ

var var

var var

xid = event.srcElement.id

n = parselnt(xid.substr(1))

xid = event.srcElement.id

n = parselnt(xid.substr(1))

// обработчик щелчка на изображении

// id изображения, на котором был щелчок // выделяем номер элемента

// обработчик щелчка на изображении

// id изображения, на котором был щелчок // выделяем номер элемента

if (aflagtn])

document.all[xid].src = apictl[n]

Листинг 4.1 (продолжение)

else

document.all[xid].src = apict2[n]

aflag[n] = !aflag[n]/* изменяем значение фла

на противоположное */

I

</SCRIPT>

</HTML>

Обратите внимание, как мы обращаемся к свойству src: document.allfxid].src, а не nt.all.xid.src и тем более не document.all["xid"].src. Это объясняется тем, что xid является строковой переменной, содержащей значение идентификатора ID, а не собственно значением идентификатора.

Подсветка кнопок и текста

Рассмотрим задачу изменения цвета кнопки при наведении на нее указателя мыши. При удалении указателя с кнопки должен вернуться ее первоначальный цвет. Это так называемая подсветка кнопок. Сразу займемся общим случаем нескольких кнопок. В нашем примере три элемента, задающие кнопки, находятся в контейнере формы <FORM>. К этому контейнеру привязываются обработчики событий onmouseover (наведение указателя мыши) и onmouseout (удаление указателя мыши). Таким образом, инициатором (получателем) этих событий может быть любой элемент формы (в нашем примере — любая из трех кнопок). В обычном состоянии кнопки имеют серый цвет, заданный 16-м кодом аОаОаО. При наведении указателя мыши цвет кнопки становится желтым (yellow) (рис. 4.1).

<HTML>

<STYLE>

mystyle {font-weight: bold ; background-color : aOaOaQ}

</STYLE>

#

<FORM onmouseover = "" onmouseout

="colorchange('aOaOaO')">

I TYPE = "BUTTON " VALUE ="nepBaa" CLASS = "mystyle" onclick = "alert('Bbi нажали кнопку')">

NPUT TYPE = "BUTTON" VALUE = "Вторая" CLASS = "mystyle" onclick = "alert('Вы нажали кнопку 2')">

<INPUT TYPE = "BUTTON" VALUE = "Третья" CLASS = "mystyle" onclick = "alert('Bbi нажали кнопку 3

</FORM>

<SCRIPT>

function colorchange(color){// изменение цвета кнопок

if (event.srcElement.type == "button")

event. srcElement.style.backgroundColor = color;

I

</SCRIPT>

</HTML>

Здесь в функции colorchangeQ проверяется, является ли инициатор события объектом типа button (кнопка). Если это так, то цвет кнопки изменяется, в противном случае — нет. Без этой проверки изменялся бы цвет не только кнопок, но и фона. Аналогичным образом можно изменять цвет и других элементов, например фрагментов текста. Если требуется подсвечивать текст, то он должен быть заключен в какой-нибудь контейнер, например в теги <Р>, <В>,<1> или <DIV>. В следующем

Рис. 4.1. Подсветка кнопки при наведении на нее указателя мыши

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

<HTML>

Этот <В onmouseove r= "colorch('red ')" onmouseout = "colorch('blue ')

r: Ыие">Жирный текст</В> при наведении на него указателя мыши изменяет цвет <SCRIPT>

function colorch(color){

event.srcElement.style.color = color

</SCRIPT>

</HTML>

Мигающая рамка

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

В приведенном ниже примере рамка изменяет цвет с желтого на красный с периодом 0,5 с (рис. 4.2):

<HTML>

<TABLE ID="mytab BORDER=1 WIDTH=150 style="border : 10 solid:yellow">

paMKa</TD></TR>

</TABLE>

<SCRIPT>

function flash() /изменение цвета рамки,

if ((document.all)если в документе ничего нет

return null;

if (mytab. style.borderColor == 'yellow')

raytab. style. borderColor= 'red' else

mytab. style. borderColor = 'yellow';

} •„“

setlnterval("flash() " , 500);// мигание рамки с интервалом 500 мс

</SCRIPT>

</HTML>

Рис. 4.2. Мигающая рамкаРис. 4.2. Мигающая рамка

Рис. 4.2. Мигающая рамка

Рис. 4.2. Мигающая рамка

Переливающиеся цветами ссылки

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

Листинг 4.2. Код для динамического изменения цвета ссылок

<HTML>

<А HREF="http://www. admi ral. ru/~dunaev/i_is . Шт">Начало</А>

<A HREF=" http://www. admi ral. ru/~dunaev/examples . 1пт_т">Примеры HTML и JavaScript</A>

<A HREF=" http://www.admiral.ru/~dunaev/mybook.htm">MoH книги</А>

aclrlink=new ArrayOaclrlink=new ArrayO// массив цветов неиспользованных // ссылок// массив цветов неиспользованных // ссылок// массив цветов использованных ссылок// массив цветов использованных ссылок<SCRIPT>

aclrlink=new ArrayO

aclrlink=new ArrayO

// массив цветов неиспользованных // ссылок

// массив цветов неиспользованных // ссылок

// массив цветов использованных ссылок

// массив цветов использованных ссылок

aclrlink [0] = 'yellow' aclrlink [1] = '#80FF80' aclrlink [2]= #FFFF80 ' aclrlink [3]='#408000' aclrvlink k=new ArrayO aclrvlink [0]='blue' aclrvlink [1) = 'purple aclrvlink [2] = ' black' aclrvlink[3]='red'

function colorchangeO {// изменение цвета

link=Math.round((aclrlink.length+0.l)*Math.randomO)) vlink= Math, round ((aclrvlink. length+0. l)*Math.randomO)

document.linkColor= aclrlink [link] document. vli nkColor= aclrvlink [vlink] } setlnterval ("colorchange() ", 500) // изменение цвета через 500 мс </SCRIPT>

</HTML>

Заметим, что в результате вставки этого сценария в HTML-документ все ссылки документа начинают переливаться разными цветами, поскольку мы изменяем свойства HnkColor и vlinkColor объекта document.

Объемныезаголовки

Объемные (выпуклые) заголовки довольно эффектны на веб-страницах. Зачастую они создаются как графические файлы, которые вставляются в HTML-документ с помощью тега <IMG>. Однако во многих случаях более экономичным является решение, основанное на использовании таблиц стилей.

Идея создания объемного заголовка довольно проста: достаточно несколько надписей с одинаковыми содержанием наложить друг на друга с некоторым сдвигом по координатам. Потребуются как минимум две такие надписи. Одна из них предназначена для создания эффекта тени (задний план), а вторая располагается над первой. Можно использовать еще одну такую надпись для создания эффекта под- - светки. С эстетической точки зрения наилучший эффект достигается путем подбора цветов надписей (игрой света и тени) с учетом цвета фона. С технической точки зрения нужный эффект получается применением таблиц стилей. В листинге 4.3 приведен пример HTML-документа, в котором объемный заголовок создается с помощью трех наложенных друг на друга надписей (рис. 4.3). Таблица стилей определяется для тега абзаца <Р>. В данной таблице задаются цвет и параметры шрифта надписей. Позиционирование надписей производится параметрами атрибута STYLE контейнерных тегов <DIV>, в которые заключены теги абзаца.

Листинг 4.3. Код для создания объемного заголовка

<HTML>

<HEAD><TITLE>3d эффект</TITLE><HEAD>

! Каскадная таблица стилей для абзаца> <STYLE>

Р {font-family:sans-serif; font-size: 72 ; font-weight:800; color:00aaaa}

P.highlight {color:siIver}

P.shadow {coloridarkred}

</STYLE>

<BODY BGCOLOR = aeb98c>

! Тень >

<DIV STYLE = "posi tion : absolute ; top:5; left:5">

P CLASS = shadow>0бъeмный заголовок</Р>

</OIV>

Листинг 4.3 (продолжение]<\ Подсветка ><DIV STYLE = "position:absolute; top:0; left:0"><P CLASS = highlight>06beMHbiu загоповок</Р></DIV><! Передний план><DIV STYLE = "position:absolute; top:2; left:2"><Р>Объемный заголовок</Р></DIV></BODY></HTML>Листинг 4.3 (продолжение]<\ Подсветка ><DIV STYLE = "position:absolute; top:0; left:0"><P CLASS = highlight>06beMHbiu загоповок</Р></DIV><! Передний план><DIV STYLE = "position:absolute; top:2; left:2"><Р>Объемный заголовок</Р></DIV></BODY></HTML>| <£| 3d эффект - Microsoft Internet Explomr| <£| 3d эффект - Microsoft Internet Explomr;айл ;;айл ;ввi 2 ・ у ▼ j g н @ 0峪・j回*』只口」 i^^p^pexciAi 2 ・ у ▼ j g н @ 0峪・j回*』只口」 i^^p^pexciA_i_i:/*\•j • :it J -г>~:/*\•j • :it J -г>~ttJ Ji r»J Ji r»1111

Листинг 4.3 (продолжение]

<\ Подсветка >

<DIV STYLE = "position:absolute; top:0; left:0">

<P CLASS = highlight>06beMHbiu загоповок</Р>

</DIV>

<! Передний план>

<DIV STYLE = "position:absolute; top:2; left:2">

<Р>Объемный заголовок</Р>

</DIV>

</BODY>

</HTML>

Листинг 4.3 (продолжение]

<\ Подсветка >

<DIV STYLE = "position:absolute; top:0; left:0">

<P CLASS = highlight>06beMHbiu загоповок</Р>

</DIV>

<! Передний план>

<DIV STYLE = "position:absolute; top:2; left:2">

<Р>Объемный заголовок</Р>

</DIV>

</BODY>

</HTML>

| <£| 3d эффект - Microsoft Internet Explomr

| <£| 3d эффект - Microsoft Internet Explomr

;айл ;

;айл ;

в

в

i 2 ・ у ▼ j g н @ 0峪・j回*』只口」 i^^p^pexciA

i 2 ・ у ▼ j g н @ 0峪・j回*』只口」 i^^p^pexciA

_i

_i

:/*\•j • :

it J -г>~

:/*\•j • :

it J -г>~

t

t

J Ji r»

J Ji r»

11

11

• -r i Гс• -r i ГсЭ Ной 1.о

• -r i Гс

• -r i Гс

Рис. 4.3. Объемный заголовок, созданный с помощью каскадной таблицы стилей

Теперь рассмотрим функцию, которая создает заголовок с заданными параметрами (листинг 4.4).

Листинг4.4. Пример функции, которая создаетзаголовоксзаданными параметрами function d3(text, > у, tcolor, fsize , fweight, ff ami ly , zi nd) { /* Объемный заголовок

Параметры:

text - текст заголовка

х - горизонтальная координата (left)

у - вертикальная координата (top)

tcolor - цвет переднего плана е - размер шрифта (пт) fweight - весшрифта)

family - название семейства шрифтов

zind - z-Index*/

if(I text) return null/*еслинеуказантекст,тоничегонеделаем*/

/* Значения параметров по умолчанию:*/

if (Iffamily) f f ami ly='arial'

if (Ifweight) fweight=800

if (Ifsize) fsize=36

if (Itcolor) tcolor='00aaff'

if (!y) У=0

if (!x) х=0

/* Внутренние настройки */

var sd=5 , hd=2// сдвиг тени и подсветки

var xzind=""

if (zind) xzind=" ;z-Index: "+zind

var xstyle=' font-family: ' + family + ';font-size: ' + fsize +

1 ;font-weight: ' + fweight+';'

var xstr = '<DIVSTYLE = "position: absolute; top:' + (y + sd) + ' ; 1ef t: ' + (x + sd) + xzind + '">'

xstr+= '<P styl e = " ' + xstyle + ' color:darkred">' + text + '</P></DIV>' xstr+= '<DIV STYLE = "position: absolute; top:' + у + ';left:' + x + xzind + ' ">'

xstr + = '< P style =' ” 1r+ xstyle + 'color:silver">' + text + '</P></DIV>'

xstr + = ' < DIV STYLE = "position : absolute; top:' + (y + hd) +; left:' +

(x + hd) + xzind + ' ">'

xstr+= '<P style = "' + xstyle + 'color:' + tcolor +> + text + '

</P></DIV>*

document .write(xstr)// запись в документ

>

В этой функции создается строка, содержащая необходимые теги, которая затем записывается в HTML-документ. Среди параметров функции последний представляет z-Index, с помощью которого можно установить слой, в котором находится заголовок, и тем самым указать, будет ли заголовок располагаться над или под каким-либо другим видимым элементом документа. Элементы с более высоким значением z-Index находятся над элементами, у которых z-Index меньше. Перекрытие элементов с одинаковыми значениями z-Index определяется порядком следования их тегов в HTML-документе. Значения параметров по умолчанию (то есть когда они не указаны) вы можете задать самостоятельно. Можете также поэкспериментировать со значениями внутренних параметров sd и hd, которые определяют размеры тени и ореола подсветки.

Ниже приведен пример HTML-документа со сценарием, создающим три заголовка с различными параметрами (рис. 4.4):

<HTML>

<HEAD><TITLE>3d эффект</TITLE><HEAD>

<SCRIPT>

function d3 (text, x, y, tcolor, f size, fweight, ff ami ly, zind) { // код

}

d3("Привет!", 50,15,'red' ,40,800,'sans-serif')

d3("3To не графика",50,50, 'blue' ,72,800, ' times ') просто стиль текста " , 10, 80, ' 00ff00 '

</SCRIPT>

</HTML>

Применение фильтров

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

Рис. 4.4. Заголовки, созданные с помощью функции d3()

ствами графических редакторов, таких как Adobe Photoshop, Macromedia Flash и др. При этом графика для Веб обычно сохраняется в файлах формата gif, png, jpeg и swf.

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

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

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

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

СОВЕТ

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

Фильтр следует понимать как некий инструмент преобразования изображения, взятого из графического файла и вставленного в HTML-документ с помощью тега <IMG>. Однако следует иметь в виду, что фильтры работают только в IE4+. В этом подразделе мы рассмотрим несколько наиболее интересных фильтров. Наша задача заключается в том, чтобы научиться правильно применять фильтры.

Прозрачность

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

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

<IMG ID = "myimg" SRC = "pict.gif"

STYLE = "position:absolute ; top : 1 0 ; left:50 ; filter:alpha(opacity = 70. style = 3)">

Здесь параметр opacity определяет степень прозрачности (точнее, непрозрачности) как целое число в диапазоне от 0 до 100. Параметр style задает градиентную форму распределения прозрачности по изображению как целое число от 0 до 3. Если параметр style не указан или имеет значение 0, то градиент не применяется. Фильтр alpha имеет и другие параметры, определяющие прямоугольную область изображения, к которой применяется фильтр. По умолчанию он применяется ко всему изображению. На рис. 4.5 представлено исходное изображение и это же изображение, обработанное фильтром alpha с параметрами opacity = 70 и style = О, 1, 2, 3 (слева направо и сверху вниз).

Фильтр можно определить в каскадной таблице стилей внутри контейнерного тега <STYLE> с помощью ссылки, имеющей следующую структуру:

#1с)_изображения {f i Iter: имя_фильтpa (параметры)}

Заметим, что если не использовать символ #, фильтр не будет работать. В этом случае рассмотренный выше пример можно оформить следующим образом:

<HTML>

<STYLE>

#myimg { position:absolute; top: 10; left: 50; filter: alpna(opacity = 70, style = 3)}

</STYLE>

<IMG ID = "myimg" SRC = "pict.gif"

</HTML>

Рис. 4.5. Результаты использования фильтра alpha с различными параметрами

Доступ к свойствам фильтра в сценарии определяется следующим образом: documeit.all. 1с1_изображения. f i lters["имя_фильтра"] .параметр = значение

Для рассматриваемого случая это выражение может иметь, например, такой вид:

document.all.myimg.fiIters["alpha"].opacity = 30

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

Выше мырассмотрелисинтаксисвыражений, воспринимаемый браузерами IE4+. Для IE5.5+ можно использовать другой синтаксис, рекомендованный Microsoft. Его особенность в том, что в каскадной таблице стилей задается ссылка на специальный компонент и имя фильтра:

1с1_изображения {filter: progid : DXImageTransform. Microsoft. имя_фильтра(параметры)}

Пример

myimg {filter: progid:DXImageTransform.Microsoft.alpha (opacity = 70, style = 3)}

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

document.all.1й_изображения.filters["DXImageTransform.Microsoft. имя_фильтра"].параметр = значение

Пример

document.all.myimg.filters["DXImageTransform.Microsoft.alpha"].opacity = 30

СОВЕТ

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

Трансформация

Фильтры преобразования изображений позволяют организовать постепенное появление (исчезновение) изображения, а также трансформацию одного графического объекта в другой. Это так называемые динамические фильтры. В отличие от статических фильтров (например, alpha), их применение обязательно связано со сценариями. Суть преобразования графического объекта заключается в том, что сначала необходимо зафиксировать первое изображение, затем выполнить замену этого изображения другим и/или изменить параметры того же самого изображения, а после этого выполнить собственно трансформацию. Все эти действия выполняются в сценарии. Фиксация и трансформация изображения производятся с помощью специальных методов фильтра — соответственно applyQ и play(). При желании остановить процесс преобразования можно с помощью метода stopQ.

Для преобразования изображений используется фильтр revealtrans. Он имеет следующие параметры:

duration — длительность преобразования в секундах (число с плавающей точкой);

transition — тип преобразования (целое число от 0 до 23); типу 23 соответствует один из типов от 0 до 22, выбранный случайным образом.

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

<HTML>

<BODY onload = "transform()">

<IMG ID = "myimg"SRC = "pict.gif" STYLE = "position:absolute; top:10;

left:50; visibility = "hidden" filter:revealtrans(duration= 3 , transition = 12)">

</BODY>

// появление изображения hidden"/* делаем изображение// появление изображения hidden"/* делаем изображение<SCRIPT>

// появление изображения hidden"/* делаем изображение

// появление изображения hidden"/* делаем изображение

function transforraO{

невидимым *//* фиксируем исходное состояние изображения */// делаем изображение видимым// выполняем преобразованиеневидимым *//* фиксируем исходное состояние изображения */// делаем изображение видимым// выполняем преобразованиеdocument.all.myimg.style.visibility

невидимым */

/* фиксируем исходное состояние изображения */

// делаем изображение видимым// выполняем преобразование

невидимым */

/* фиксируем исходное состояние изображения */

// делаем изображение видимым// выполняем преобразование

myimg. filters C 'revealtrans") . applyO

myimg.style.visibility = "visible"

myimg. f iltersC ' revealtrans") .play()

}

</SCRIPT>

</HTML>

В этом примере, в функции transform(), мыделаем изображение, заданное в HTML- документе тегом <IMG>, сначала невидимым, поскольку хотим, чтобы оно возникало из небытия, а не исчезало. Затем с помощью метода apply() мы фиксируем

его как исходный кадр в цепочке кадров преобразования. Далее готовим конечный кадр — просто делаем изображение видимым. Наконец, применяем фильтр с помощью метода play(). Мы использовали тип преобразования (transition = 12), соответствующий эффекту плавной трансформации.

ВНИМАНИЕ —

Тип преобразования и его длительность можно задать не только в определении стиля изображения, но и в сценарии.

<НТМ1_>

<BODY onload = "transformO ">

<IMG ID = "myimg" SRC = "pict.gif" STYLE = "position: absolute ; top:10: leftrSO; filter:revealtrans">

</BODY>

<SCRIPT>

function transformO {// появление изображения

document . all .myimg.style.visibility = "hidden" /* делаем изображениеневидимым */

/* фиксируем исходноесостояние изображения*myimg. style. visibility = "visible"// депаем изображение

видимым

myimg. filtersC'revealtrans") .Transi tion = 12 /* указываем тип преобразования */ myimg. f iltersC'revealtrans") . play(3)/* выполняем

преобразование длительностью Зс */

</SCRIPT>

</HTML>

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

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

<HTML>

<BODY onload = "transform2() ">

<IMG ID = "myimg" SRC = "pictl.gif" STYLE = "position:absolute; top:10

transition = 12)// появление изображения/* фиксируем исходноесостояние изображения */// заменяем изображение/* выпопняемпреобразование */transition = 12)// появление изображения/* фиксируем исходноесостояние изображения */// заменяем изображение/* выпопняемпреобразование */left:50; fiIter: revealtrans(duration = 3,

transition = 12)

// появление изображения

/* фиксируем исходное

состояние изображения */

// заменяем изображение

/* выпопняем

преобразование */

transition = 12)

// появление изображения

/* фиксируем исходное

состояние изображения */

// заменяем изображение

/* выпопняем

преобразование */

</BODY>

<SCRIPT>

function transform2(){

myimg. filters ("revealtrans"). apply ()

=

myimg. fiIters ("revealtrans") . play ()

}

</SCRIPT>

</HTML>

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

<HTML>

<IMG ID = "myimg"onclick = " transformsО" SRC = "pictl.gif" STYLE =

"position:absolute; top:10; left:50; fiIter:revealtrans(duration = 3,

transi tion = 12)">

<SCRIPT>

function transoformB(){// преобразование изображения

myimg.filters(*'revealtrans**) • apply()// фиксируем исходное

изображение

if (document.all.myimg.src.indexOf("pictl")!= -1)/* определяем

конечное изображение */ document.all.myimg.src = "pict2.gif" else

document.all.myimg.src = "pictl.gif"

myimg.fiIters("revealtrans").play()// выполняем преобразование

}

</SCRIPT>

</HTML>

СВОЙСТВО src содержит полный URL-адрес графического объекта, даже если мы присваиваем ему только имя файла. Поэтому в теле функции transform3() приходится выяснять, входит ли строка с именем файла в URL-адрес, а не проверять, равен ли URL-адрес имени файла.

Рассмотренный выше синтаксис выражений воспринимается браузерами IE4+. Для IE5.5+ можно использовать другой синтаксис, рекомендованный Microsoft. Его особенность состоит в том, что в каскадной таблице стилей задается ссылка на специальный компонент и имя фильтра. Последний пример в этом синтаксисе имеет следующий вид:

<HTML>

<STYLE>

#myimg {position:absolute; top:10; left:50;

filter:progid:DXImageTransform.Microsoft.revealtrans(duration = 3, transition = 12)}

</STYLE>

<IMG ID ="myimg" onclick = "transforms() " SRC = "earth.gif">

<SCRIPT>

function transforms(){// преобразование изображения

my img.fiIters("DXImageTransform.Microsoft.revealtrans ").apply()

/* фиксируем исходное изображение*/

if (document.all.myimg.src.indexOf("earth")!= -1)/* определяем

конечное изображение*/ document.all.myimg.src = "sun.gif" else

document.all.myimg.src = "earth.gif" myimg.filters("DXImageTransform.Microsoft.revealtrans").play О /'выполняем преобразование */

</SCRIPT>

</HTML>

Повороты

В браузерах IE5.5+ возможно применение фильтра basicimage, имеющего множество параметров, с помощью которых изображение можно повернуть на угол, кратный 90°, задать прозрачность, зеркально отразить, определить маску и др. В IE4+ все эти эффекты, за исключением поворотов, создаются отдельными фильтрами. Порядок их применения такой же, как и фильтра alpha, задающего прозрачность. Здесь мы рассмотрим создание эффекта поворота.

Параметр rotation фильтра basic image принимает целочисленные значения: 0 (нет поворота), 1 (90°), 2 (180°), 3 (270°). В примере, приведенном ниже, в результате щелчка на изображении оно поворачивается на угол 90°.

< HTML >

<STYLE>

#myimg {filter: progid:DXImageTransform. Mi crosoft. basicimage}

</STYLE>

<IMG ID = "myimg" src = "pict.gif " onclick = "rotor()">

<SCRIPT>

function rotor(){// повороты

var r =

document. all. myimg.fiIters [ "DXImageTransf orm.Microsoft. basicimage"] . rotation

if (r == 3) r = 0 else r++

document.all.myimg.fiIters ["DXImageTransform.Microsoft. basicimage"] . rotation = r

}

</SCRIPT>

</HTML>

Применение нескольких фильтров одновременно

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

<HTML>

<IMG ID = "myimg" onclick = "transforms i:) " SRC = "earth.gif"

STYLE = "position.-absolute; top:10; left:50;

filter : revealtrans(duration = 3, transition = 12), alpha(opaci ty = 50)"> <SCRIPT>

function transform3() {// преобразование изображения

myimg. f i I ters(n reveal trans'1) . apply ()// фиксируем исходное

// изображение

if (document. all .myimg.src . indexOf ( "pictl") !=-1) /* определяем

конечное изображение */

document.all.myimg.src = "pict2. gif" else

document. all.myimg. src = "pictl.gif" myimg.fliters("revealtrans").play()/* выполняем

преобразование */

}

</SCRIPT>

</HTML>

Эффект печати на пишущей машинке

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

Ниже приводится HTML-документ с заголовком и текстовой областью, задаваемой тегом <TEXTAREA>. Сценарий в этом документе выводит в текстовую область символы некоторой строки с задержкой 0, 1 с. После завершения вывода всей строки этот процесс останавливается. Функция wrtextQ просто формирует строку, которую требуется вывести в текстовой области в данный момент. Собственно вывод производится путем присвоения значения свойству value текстовой области. Функция wrtextQ передается в виде строкового параметра методу setlntervalQ, который и вызывает ее периодически с интервалом, указанным в миллисекундах, в качестве второго параметра. В примере этот интервал равен 100. Метод setlntervalQ возвращает целочисленный идентификатор запущенного процесса, который мы сохраняем в переменной xinterval. Это значение передается методу clearlntervalQ как параметр, чтобы завершить процесс периодического вызова функции wrtextQ, когда «напечатается» вся строка.

<HTML>

<Н1>Моя веб-страница</Н1>

<TEXTAREA ID = "mytext" ROWS = 8 COLS = 25></TEXTAREA> <SCRIPT> var mystr = "Привет, мои друзья! Рад вам сообщить приятное известие" var astr = mystr.split("")// разбиваем строку на массив

// СИМБОЛОБ var typestr = "" var i = 0

var xinterval = setlnterval ("wrtext ()", 100) /* периодический вызов функции wrtext() */

function wrtext() {// вызывается с помощью метода setlnterval()

if (i < astr .length){ typestr+= astr[i]// выводимая строка

document.all.mytext.value = typestr// вывод строки

i++

}else clearlnterval(xinterval)// прекращаем вывод текста

}

</SCRIPT>

</HTML>

Другие примеры использования метода setlntervalQ вы найдете в следующем разделе.

4.2. Движение элементов

Перемещение видимых элементов HTML-документа в окне браузера основано на изменении значений параметров позиционирования top и left таблицы стилей. Вы можете указать эти параметры в атрибуте STYLE или в теге <STYLE> для тех тегов, которые задают видимые элементы (изображения, тексты, ссылки, кнопки и т. п.). Затем остается только определить в сценарии способ изменения параметров координат top и left для того или иного элемента. Можно заставить элемент перемещаться постоянно, в течение заданного времени или в ответ на события (например, по щелчку кнопкой мыши, при наведении указателя мыши на элемент и т. п.).

ВНИМАНИЕ -

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

Чтобы распараллелить вычислительные процессы, используют методы setlntervalQ и setTimerQ, описанные в разделе 2.8.

Движение по заданной траектории

Схема сценария, осуществляющего непрерывное перемещение видимого элемента документа, имеет следующий вид:

function ini t_move() {// инициализация движения

.. .// подготовка к запуску функции move()

setlnterval("move()", задержка) }

function move(){

.../* изменение координат top и left

стиля перемещаемого элемента */

}

inlt_move()// вызов функции для перемещения элемента

Таким образом, мы создаем две функции, имена которых могут быть произвольными. Первая функция, init_move(), осуществляет подготовку исходных данных и вызывает метод setlntervalQ с указанием в качестве первого параметра имени второй функции move() в кавычках. Вообще говоря, первый параметр метода setlnterva() является строкой, содержащей выражение, которое должно выполняться периодически во времени. Вторая функция, move(), изменяет координаты элемента. Поскольку метод setlntervalQ вызывает функцию move() периодически через заданное количество миллисекунд, то координаты элемента изменяются постоянно. При этом создается эффект движения. Скорость и плавность движения зависят от величин приращения координат (в функции moveQ) и временной задержки (второго параметра метода setlntervalQ). Чтобы начать перемещение элемента, необходимо просто вызвать первую функцию, init_move().

Линейное движение

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

<HTML>

<IMG ID="myimg" SRC="pict.gif " STYLE="posit ion: absolute; top:10;left:20" >

<SCRIPT> function init_move(){

dx = 8// приращение по у

dy = 3// приращение по х

setinterval (*'тоуе() ** . 209)

move ()

}

// периодический вызов функции

function move() {// изменение координат изображения

/* Текущие координаты: */

var у = parselnt (document.all.myimg.style.top)

var x = parselnt (document.all.myimg. style. left)

/* Новые координаты: */

document . all.myimg.style . top = у + dy

document.all. myimg.style.left = x + dx

}

init_move()// начинаем движение

</SCRIPT>

</HTML>

Обратите внимание, что переменные dx и dy являются глобальными и поэтому видны в функции move(). Если бы мы определили их в init_move() с помощью ключевого слова var, то они стали бы локальными и недоступными в moveQ. Заметьте также, что значения параметров позиционирования в таблице стилей имеют строковый тип. Поэтому нам потребовалось применение функции parselntQ для приведения их к числовому типу.

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

function init_move(xid, dx, dy){

var prmstr =" + xid + " ' ," +dx + ' ' + dy /* строка параметров

для move() */

prmstr = "move(" + prmstr + ")"

setlnterval(prmstr,200)/* периодический вызов

функции move() */

}

function move(xid, dx , dy) {

у = parselnt(document. all[xid].style.top)

x = parselnt(document. all[xid] . style. left) document.all.myimg.style.top = у + dy document.all.myimg.style. left = x + dx

)

ini t_move(MmyimgM , 10, 5)// пример вызова функции

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

Остановка движения

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

Чтобы иметь возможность прекратить движение элемента, следует сохранить значение, возвращаемое методом setlntervalQ, в глобальной переменной, а затем использовать его в качестве параметра метода clearlntervalQ в теле функции moveQ. Напомню, что moveQ — функция, имя которой передается в качестве первого параметра методу setlntervalQ. Сценарий с запуском и остановкой движения может выглядеть, например, следующим образом:

function init_move(xid, dx, dy) {

строка параметров для move() *//* сохраняем идентификатор движения */строка параметров для move() *//* сохраняем идентификатор движения */var prmstr = "' " + xid + "'," +dx + " ," + dy

строка параметров для move() */

/* сохраняем идентификатор движения */

строка параметров для move() */

/* сохраняем идентификатор движения */

prmstr = "move(" + prmstr + " " idjnove = setlnterval (prmstr , 200)

}

function move(xid, dx , dy) {

350) /* остановка по условию */350) /* остановка по условию */// начинаем движение// начинаем движениеу = parselnt(document.all[xid].style.top) x = parselnt(document .all[xid] . style. left) documefnt.all.myimg.style.top = у + dy document.all.myimg.style.left = x + dx if (parsel nt(document. all[xid] .style.left) >

350) /* остановка по условию */

350) /* остановка по условию */

// начинаем движение

// начинаем движение

clearlnterval(id move)

}

init_move(,*myimgM, 10 , 5)

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

Движение по эллипсу

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

В листинге 4.5 представлены определения двух функций, задающих движение по эллипсу. Функция ellipseQ является функцией инициализации движения, a moveQ — функция, передаваемая методу setlntervalQ.

Листинг 4.5. Определения двух функций, задающих движение по эллипсу

function ellipse(xid, alpha, a, b, omega, x0, y0, ztime.dt){

/* Движение по эллипсу

Параметры:

xid - id движущегося объекта, строка alpha - угол поворота эллипса, град.

х0 - х-координата центра эллипса, пикселы

у0 - у-координата центра эллипса, пикселы

а - большая полуось эллипса, пикселы

b - малая полуось эллипса, пикселы

omega - угловая скорость, град/с; знак задает направление вращения ztime - начальная фаза, град.

dt - временная задержка, с

*/

// if тf if if if it if if// if тf if if if it if ifпроверка наличия параметров:

// if тf if if if it if if

// if тf if if if it if if

(lalpha)alpha = 0

(!al)a = 0

b = 0

(Iomega)omega = 0

; !x0)x0 = 0

; !y0)y0 = 0

(!ztime)ztime = 0

(!dt)dt = 0

var t = -ztime/*setlnterval("move('" + xid + "' omega +"," + x0 + "," + y0ztime*1000)/'многократныйvar t = -ztime/*setlnterval("move('" + xid + "' omega +"," + x0 + "," + y0ztime*1000)/'многократныйчтобы начальное значение было 0, поскольку в move() уже есть приращение */

var t = -ztime/*

setlnterval("move('" + xid + "' omega +"," + x0 + "," + y0

ztime*1000)/'многократный

var t = -ztime/*

setlnterval("move('" + xid + "' omega +"," + x0 + "," + y0

ztime*1000)/'многократный

," + alpha + " , " + а +"," + b + "," + +","+ ztime + " , " + dt + ")",

вызов moveO с интервалом ztime, мс */

продолжениепродолжениеfunction move(xid, alpha, a, b, omega, x0, y0, ztime, dt) пересчет координат, вызывается из ellipseO

продолжение

продолжение

Листинг 4.5 (продолжение) t+= ztime /* х,у - координаты в собственной системе координат */ var x = a*Math.cos((omega*t + dt)*Math.PI/180) var у = b*Math.sin((omega*t + dt)*Math.PI/180) var as = Math.sin(alpha*Math.PI/180) var ac = Math.cos(alpha*Math.PI/180) documient.all[xid].style.top = -x*as + y*ac т y0 document.all[xid] . style. left = x*ac + y*as + x0 }

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

<НТМ1_>

<SCRIPT> function ellipse(xid, alpha, a. b, omega, x0, y0, ztime,dt) { . . .// код определения функции

} function move(xid, alpha, a, b, omega, x0, y0, ztime, dt) {

, . .// код определения функции

var xstr = '<IMG ID = "myl" SRC"pictl.gif"><IMG ID = "my2"'SRC =

"pict2 .gif">'

document.wri te(xstr)

ellipse("myl",.60,100, 30, 10, 170,300,0.2,0)

ellipse("my2",.80,100, 130, 30,140,300,0.2,0)

</SCRIPT>

</HTML>

Если сохранить код с определением функций ellipseQ и moveQ в файле, например ellipse.js, то рассмотренный выше HTML-код можно переписать в следующем виде:

<НТМ1_>

<SCRIPT SRC = "ellipse. js"></SCRIPT>

<SCRIPT>

var xstr = '<IMGID = "myl" SRC = "pictl. gi f 'xIMG ID = "myl" SRC = "pictl.gif">'

document.write(xstr)

ellipseC'myl", 60, 100, 30. 10, 170, 300, 0.2, 0) ellipse("my2", 80, 100, 130, 30,140, 300, 0.2, 0) </SCRIPT>

</HTML>

Движение по произвольной кривой

Рассмотрим задачу организации движения видимого элемента по произвольной кривой, заданной выражением с одной переменной. Точнее, мы хотим указать функции движения в качестве параметров не одно, а два выражения, которые описывают изменения вертикальной и горизонтальной координат элемента. Эти выражения будут содержать одну переменную, которую мы обозначим через х — строчной латинской буквой. Переменную х можно интерпретировать как независимый параметр движения (например, время). С помощью встроенной функции evalQ можно вычислить значения этих выражений при конкретном значении переменной х и присвоить их параметрам left и top таблицы стилей перемещаемого элемента. Функция (пусть это будет moveQ), которая все это выполняет, переда-

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

Итак, функция инициализации движения curvemoveQ будет принимать три строковых и один числовой параметр. Строковые параметры содержат соответственно значение идентификатора ID перемещаемого элемента, выражение для вертикальной координаты и выражение для горизонтальной координаты. Числовой параметр определяет период времени, через который координаты элемента пересчитываются. Ниже приводятся определения функций curvemoveQ и move():

function curvemove(xid, уехрг, xexpr, ztime) {

/* Движение по произвольной кривой. Версия 0.

Параметры:

хid - id движущегося объекта, строка

уехрг - выражение для вертикальной координаты

хехрг - выражение для горизонтальной координаты

ztime - интервал времени между вызовами функции move(), мс

*/

if ( !xid) return null

if (lyexpr) yexpr = "x"

if (Ixexpr) xexpr = "x"

// интервал времени, мс/* глобальная переменная, входящая в выражения уехрг и хехрг + ",'+ уехрг + ",'+ xexpr + "''•)'•.// интервал времени, мс/* глобальная переменная, входящая в выражения уехрг и хехрг + ",'+ уехрг + ",'+ xexpr + "''•)'•.*/*/if (Iztime) ztime = 100

// интервал времени, мс

/* глобальная переменная, входящая в выражения уехрг и хехрг + ",'+ уехрг + ",'+ xexpr + "''•)'•.

// интервал времени, мс

/* глобальная переменная, входящая в выражения уехрг и хехрг + ",'+ уехрг + ",'+ xexpr + "''•)'•.

*/

*/

x=6

setlnterval("move('" + xid ztime)

function move(xid, yexpr, xexpr) { x+ +

document.all[xid].style .top = eval(yexpr)

document.all[xid].style.left = eval(xexpr) }

Обратите внимание, что переменная х в функции curvemove() является глобальной и поэтому доступна в функции move(). Чтобы сделать переменную х глобальной, мы просто не использовали ключевое слово var перед первым ее появлением в коде.

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

<HTML>

<IMG ID = "myimg" SRC = "pictl.gif" STYLE = "position:absolute">

<SCRIPT>

function curvemove(xid, yexpr, xexpr, ztime) {

// код определения функции }

function move(xid, yexpr, xexpr) {// код определения функции

curvemoveC'myimg" , "100 + 50*Math . sin(0. 03*x)" , "50+х", 100)

</SCRIPT>

</HTML>

В этом примере изображение будет перемещаться по синусоиде с амплитудой 50 пикселов и горизонтальной скоростью 10 пикселов в секунду. Начальные координаты графического объекта равны 100 и 50 пикселов по вертикали и горизонтали соответственно.

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

function curvemove(xid, yexpr, xexpr, ztime, namevar) {

/* Движение по произвольной кривой. Версия 1.

Параметры:

xid - id движущегося объекта, строка

уехрг - выражение для вертикальной координаты хехрг - выражение для горизонтальной координаты ztime - интервал времени между вызовами функции move(), мс namevar - имя аргумента в выражениях уехрг и хехрг

*/

if (!xid) return null '

if (lyexpr) yexpr = "x"

if (Ixexpr) xexpr = "x"

if (Izti me) ztime = 100интервал времени, мс

if (Inamevar) namevar = "x"

eval (namevar + " " = 0")/* глобальная переменная, входящая

в выражения уехрг и хехрг */ setinterval("move(' и + xid +' + уехрг + '" + хехрг + ", ‘”+

namevar + " * ) 11 , ztime)

function move(xid, yexpr, xexpr, namevar) {

eval(namevar + "++")

document . all[xid] . style.top = eval(yexpr)

document. all [xid]. style.left = eval(xexpr) \

Суть модификации кода заключается в том, что имя аргумента теперь передается функциям в качестве строкового параметра namevar. Чтобы создать переменную с именем, указанным в значении переменной namevar, и присвоить ей некоторое значение, необходимо создать строку с оператором присвоения и передать ее функции eval(). Теперь можно использовать, например, такие вызовы функции:

curvemoveC'myimgl" , "100 + 100*Math. si n(0.05*w)/(0. 05*w)""50+w", 50, "w")

curvemove("myimg2","100+ 2*time)", "570 - time",100,"w")

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

Перемещение мышью

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

Перемещение графических объектов

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

х

Листинг 4.6. Код перемещения изображения мышью

<НТМ1_>

<НЕАО><Т1Т1_Е>Перемещаемое изображение</Т1Т|_Е></НЕАО>

<BODY id = "mybody">

<IMG ID="myimg" SRC = 'pict.gif ondragstart = "dragO " style = "position:absolute; top:10; left:10">

</BODY>

<SCRIPT>

flag = false// нельзя перемещать

var id_img = "

function drag() { flag = mag

id_img = event.srcElement.id }

function mybody.onmousemove(){

if (flag){// если можно перемещать

document.all [id_img] .style.top = event.clientY

document.all [id_img].style.left = event.clientX

function mybody .onmouseupO{ flag = false// нельзя перемещать

}

</SCRIPT>

</HTML>

Здесь функция dragQ, обрабатывающая событие ondragstart (попытка перетаскивания), устанавливает переменную-триггер flag и выясняет, кто инициатор события. Значение переменной flag позволяет определить, можно или нельзя перемещать элемент. В данном примере инициатором события может быть только один элемент, но мы готовимся к более общему случаю нескольких перемещаемых элементов. Этот случай будет рассмотрен позже. Обратите внимание, что события onmousemove (перемещениеуказателя мыши) иonmouseup (кнопка мыши отпущена) получает не изображение, а объект тела документа mybody. Мы не исполь-

3овали событие onclick для изображения, зарезервировав его для других целей, например для перехода по ссылке. Заметьте также, что в функции mybody. onmousemove() при обращении к объекту изображения его идентификатор передается через переменную id_img. Поэтому мы используем запись document.all[id_img], а не document.all.idjmg.

Теперь рассмотрим более сложную задачу, используя для ее решения приемы, применявшиеся ранее. Пусть документ содержит несколько графических объектов, которые можно перемещать мышью. В нашем случае это изображения парусников. Все множество кораблей разбито на две эскадры: ту (моя) и other (чужая). Визуально они отличаются лишь ориентацией кораблей и флагом. Размер корабля зависит от значения его вертикальной координаты top: чем ее значение больше, тем больше размеры рисунка. Таким способом мы создаем эффект перспективы (ближе-дальше). Чем ниже расположено изображение, тем больше его размеры. Далее, если к какому-нибудь кораблю приблизились на достаточное расстояние чужие корабли в достаточном количестве, то какой-то из них погибает (становится невидимым). Для решения, какой из сблизившихся кораблей должен погибнуть, используется жребий (датчик случайных чисел Math.random()). Это — прототип алгоритма некоторой игры типа «Морской бой» (рис. 4.7). Впрочем, нам важен не сюжет игры, а приемы программирования.

ШСЛМоид<жчменгыи5\перемещеннеНТМ - Micio .. ЙКяЮ

史зйд;. .Правда" Ёвд... Избранное;, ,Cs>e*8s рфаека ;« н

Рис. 4.7. Игра «Морской бой»Рис. 4.7. Игра «Морской бой»

Рис. 4.7. Игра «Морской бой»

Рис. 4.7. Игра «Морской бой»

В рассматриваемом примере используются два графических файла с изображением кораблей: один для своих (shipl.gif), а другой — для чужих (ship2.gif). В HTML-документе можно расположить необходимое количество графических элементов с помощью тегов, написав их вручную:

<IMG ID = "myl" SRC = "shipl.gif" ondragstart = "dblclO" STYLE = "position:absolute; top:10;left:10; visibility:visible">

<IMG ID = "my2" SRC = "shipl.gif" ondragstart = "dblcl () "STYLE = "position: absolute; top:10; left:10; vi si bi li ty : vi si ble">

<IMG ID = "otherl" SRC = "ship2.gif" ondragstart = "dblclO" STYLE = "posi tion : absolute ; top:10; left:10; vi si bi li ty : vi sible">

<IMG ID = "other2" SRC="ship2.gif" ondragstart="dblcl()" STYLE = "posi tion: absolute; top:10; left:10; vi sibi li ty : vi sible">

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

Листинг 4.7. Код сценария для игры «Морской бой»

<HTML>

<HEAD><TITLEПеремещаемые изображения</Т1Т1Е></НЕА0>

<BODY id="mybody" background="blue.gif"></BODY>

<SCRIPT>

var imgstr=""var Nmy=3var Nother=3/* Формирование изображений */ for (i= 1; i<= Nmy; i++) { imgstr+= '<IMGID="my' + i + style="position:absolute ; top:var imgstr=""var Nmy=3var Nother=3/* Формирование изображений */ for (i= 1; i<= Nmy; i++) { imgstr+= '<IMGID="my' + i + style="position:absolute ; top:// строка тегов, формирующих рисунки // количество своих

var imgstr=""

var Nmy=3

var Nother=3

/* Формирование изображений */ for (i= 1; i<= Nmy; i++) { imgstr+= '<IMGID="my' + i + style="position:absolute ; top:

var imgstr=""

var Nmy=3

var Nother=3

/* Формирование изображений */ for (i= 1; i<= Nmy; i++) { imgstr+= '<IMGID="my' + i + style="position:absolute ; top:

// количество чужих

” src="5hipl.gif” ondragstart**drag()"

200*Math.randomC) + ' ;visibility:visible">200*Math.randomC) + ' ;visibility:visible">+ 200*Math . random() + ';left:' +

200*Math.randomC) + ' ;visibility:visible">

200*Math.randomC) + ' ;visibility:visible">

}

for (i = 1; i <= Mother; i++){

imgstr+= ' <IMG ID="other' + i +'" src="ship2.gif" ondragstart="drag()

style="position:absolute;top:' + 200*Math.random() + ';left:' +

200*Math . randomO + ' ; vi sibi li ty : vi si ble"> '

}ocument.wri te(imgstr>}ocument.wri te(imgstr>// запись в документ// запись в документ

}ocument.wri te(imgstr>

}ocument.wri te(imgstr>

// запись в документ

// запись в документ

resizeOvar flag = false var id_img = "resizeOvar flag = false var id_img = "// установка размеров изображений

resizeO

var flag = false var id_img = "

resizeO

var flag = false var id_img = "

function drag()

{ •

flag = Iflag

id_img =// id элемента, который надо перемещать

}

function mybody.onmousemoveO{

if (flag){

document.all[id_img}.style.top = event.clientY

document.all[id_img].style.left = event.clientX

resizeO// установка размеров изображений

function mybody . onmouseupO {

flag = false

action()// действия в создавшемся положении

продолжение身продолжение身function action() {// действия

продолжение身

продолжение身

var s, xO, ув. xl, yl, vl, v2, v3. xid, yid. d, z

Листинг 4.7 (продолжение)

var dmin = 20, smin =2/* минимальное расстояние и

копичество чужих */

for (i = 0; i < document. images. length; i++){ s = 0

x0 = parselnt (document. images[i].style. left)

y0 = parselnt(document. images[i].style. top)

for ( j=0; ] < document.images.length; ]++){

vl = document. images [i].style.visibility == "visible"

v2 = document . images!j] . style.visibility == "visible"

xid = document. images [i].id.substrCO,2)

yid = document . images []] .id. substr (0,2)

v3 = xid. localeCompare(yid)!= 0// чужой

if (( i != j)&&vl&&v2&&v3){

xl = parselnt(document. images [j].style. left)

yl = parselnt(document. images[j].style. top)

d = Math.sqrt((x0 - xl)*(x0 - xl) + (y0 - yl)*(y0 - yl))

if (d <= dmin) s++// очень близко

if (s >= smax) {

if(Math.random()<0. 5) z = i// кто погибнет

else z = j

document. images [z] . style.visibility = "hidden"

break

)

function resize(){// установка размеров изображений

var у, size

for (i = 0; i < document . images . length; i++){ у = parselnt(document. images [i].style.top) size = Math. min(x, 180) size = Math.max(size, 15)

document . images[i] .style.width = size document. images [i]. style. height = 0.8*size

} } </SCRIPT> </HTML>

Как нетрудно заметить, главная часть семантики игры обслуживается функцией 日ctionQ Вы можете пофантазировать и изменить ее по своему усмотрению. Я же обратил внимание на пространственные свойства театра военных действий. В нашем случае не исключены ситуации, когда кораблик, расположенный выше (значит, дальше), накрывает кораблик, расположенный ниже (значит, находится на переднем плане). Иначе говоря, наш способ создания эффекта перспективы плохо работает в случае перекрытия изображений. Поправить это можно путем изменения параметра z-Index стилей элементов в функции resize(), поставив это свойство в прямую зависимость от значения вертикальной координаты top. Элемент с большим индексом будет находиться над элементом с меньшим индексом. Модифицированный код функции resizeQ выглядит следующим образом:

function resize () {

var У， size

for (i =0; i < document. images . length ; i++){

у = parselnt(document.images[i].style.top)

size = Math.min(y, 180)

size = Math.max(size, 15)

document. images [i ]. style.width = size

document . images [1 ]. style . height = 0.8*size document.i mages[i].style.zlndex = x

Обратите внимание, как в JavaScript происходит обращение к свойству z-index таблицы стилей.

Перемещение текстовых областей

В листинге 4.8 приводится пример HTML-документа, в котором можно перемещать текстовые области, созданные с помощью тегов <TEXTAREA>. При этом размеры области и шрифта текста определяются в ней в зависимости от значения вертикальной координаты. Так создается эффект перспективы (ближе-дальше). Чем выше, тем дальше, и наоборот (рис. 4.8). Чтобы приблизить к себе текстовую область, необходимо просто переместить ее вниз. Вы можете «сложить в стопку» текстовые области, удалить их от себя или, наоборот, приблизить так, чтобы текст стал разборчивым. В отличие от примера с изображениями, здесь разрешение на перемещение происходит по двойному щелчку на текстовой области. Обратите внимание на то, как в функции resizetextQ определяется элемент, размеры которого следует изменить.

Рис. 4.8. Перемещаемые текстовые областиРис. 4.8. Перемещаемые текстовые областитСЛМои noKSMeHiMUS\leiitaiea.HTM - Microsoft Internet ExploierтСЛМои noKSMeHiMUS\leiitaiea.HTM - Microsoft Internet Exploier七］「608七］「608

Рис. 4.8. Перемещаемые текстовые области

Рис. 4.8. Перемещаемые текстовые области

тСЛМои noKSMeHiMUS\leiitaiea.HTM - Microsoft Internet Exploier

тСЛМои noKSMeHiMUS\leiitaiea.HTM - Microsoft Internet Exploier

七］「608

七］「608

Листинг 4.8. Перемещение текстовых областей, созданных с помощью тегов <TEXTAREA>

<HTML>

<НЕАО><Т1Т1Е>Перемещаемые текстовые области</Т1Т1Е></НЕАО>

<BODY id="mybody" background="blue.gif">

продолжение

Листинг 4.8 (продолжение)<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute; top:10; left:10;fon-size:large">3To - первый rекст</ТЕХТАКЕА><TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute; top:100; left:150M>Это - второйтексорой текст</ТЕХТАEXTAREA><TEXTAREAi ID="t3" ondblclick=""drag() " STYLE = "position:absolute;Листинг 4.8 (продолжение)<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute; top:10; left:10;fon-size:large">3To - первый rекст</ТЕХТАКЕА><TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute; top:100; left:150M>Это - второйтексорой текст</ТЕХТАEXTAREA><TEXTAREAi ID="t3" ondblclick=""drag() " STYLE = "position:absolute;top:150;: left:250">3io)">Это - третий ;</BODY><SCRIPT>resizetext()var flag = falsevar id_img = "function drag()flag = 1'flagid_img = event.srcElement.id1top:150;: left:250">3io)">Это - третий ;</BODY><SCRIPT>resizetext()var flag = falsevar id_img = "function drag()flag = 1'flagid_img = event.srcElement.id1TeKCT</ТЕ)XTAREA>// ус тановка размеров текстовых// областейTeKCT</ТЕ)XTAREA>// ус тановка размеров текстовых// областей// id элемента, который надо 〃 перемещать// id элемента, который надо 〃 перемещать

Листинг 4.8 (продолжение)

<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute; top:10; left:10;fon-size:large">3To - первый rекст</ТЕХТАКЕА>

<TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute; top:100; left:150M>Это - второйтексорой текст</ТЕХТАEXTAREA>

<TEXTAREAi ID="t3" ondblclick=""drag() " STYLE = "position:absolute;

Листинг 4.8 (продолжение)

<TEXTAREA ID="tl" ondblclick=""drag()" STYLE = "position:absolute; top:10; left:10;fon-size:large">3To - первый rекст</ТЕХТАКЕА>

<TEXTAREA ID="t2" ondblclick=""drag()" STYLE = "position:absolute; top:100; left:150M>Это - второйтексорой текст</ТЕХТАEXTAREA>

<TEXTAREAi ID="t3" ondblclick=""drag() " STYLE = "position:absolute;

top:150;: left:250">3io)">Это - третий ;

</BODY>

<SCRIPT>

resizetext()

var flag = false

var id_img = "

function drag()

flag = 1'flag

id_img = event.srcElement.id

1

top:150;: left:250">3io)">Это - третий ;

</BODY>

<SCRIPT>

resizetext()

var flag = false

var id_img = "

function drag()

flag = 1'flag

id_img = event.srcElement.id

1

TeKCT</ТЕ)XTAREA>

// ус тановка размеров текстовых

// областей

TeKCT</ТЕ)XTAREA>

// ус тановка размеров текстовых

// областей

// id элемента, который надо 〃 перемещать

// id элемента, который надо 〃 перемещать

function mybody . onmousemove () {

if (flag){

текстовых областейтекстовых областейdocument . all [id_img] .style, top = event . clientY document. all [id_img].style.left = event. clientX resizetextO// установка размеров

текстовых областей

текстовых областей

function mybody . onmouseupO { flag = false

function resizetext () {// установка размеров текстовых

// областей

varу, size, idimg, idtext

for (i =0; i < document . all . length; i++) {

if (document.all [i ] .tagName== 'TEXTAREA') {

idtext = document . all[i].id

у = parselnt(document.all [idtext].style. top)

size = Math.min(y, 800)

size = Math.max (size, 60)

document . all [idtext] . style.width = size

document.all [idtext] . style.height = 0.8* size

document.all[idtext].style.zlndex = у

document.all [idtext].style.fontSize = Math.max(2, y/10)

</SCRIPT>

</HTML>

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

Перемещение плавающих фреймов

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

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

::ActiveXActiveX--SSI и ASPSSI и ASP--D \DUNAEV\rtrame_move.HTD \DUNAEV\rtrame_move.HTтехнологии использования серверных ресурсов втехнологии использования серверных ресурсов вэлементы управления Например, поддержка базы дщ:элементы управления Например, поддержка базы дщ:Цэбр«Нй«А Сервис £.gK3Цэбр«Нй«А Сервис £.gK32. Cam себе Web мастер. 2001г., 211с.Динамический HTML, скрипты Примеры2. Cam себе Web мастер. 2001г., 211с.Динамический HTML, скрипты Примеры]. Сам срКс Web-дюшшр. 2Шт,г Н2с.Эта книга- популярное наложение основ создания Web-сайтов. приемами Web-дкзайка, разработать и опубликовать свой сайт.]. Сам срКс Web-дюшшр. 2Шт,г Н2с.Эта книга- популярное наложение основ создания Web-сайтов. приемами Web-дкзайка, разработать и опубликовать свой сайт.Flash- векторный графический редактор, позволяющий создав;страницы. Во Flash также МОЖНО делать интерактивные дхтюп IFlash- векторный графический редактор, позволяющий создав;страницы. Во Flash также МОЖНО делать интерактивные дхтюп IFlash В приложении - справочники I по JScnpt и VBScript. Прнв модификациями) опубликованы m этом сайте.Flash В приложении - справочники I по JScnpt и VBScript. Прнв модификациями) опубликованы m этом сайте.D:\DUNAEVVifiame_mdveНТМ-M -Miciotofl Internet Емр1о(с(D:\DUNAEVVifiame_mdveНТМ-M -Miciotofl Internet Емр1о(с(Здесь rqnttoaocA про 酒 骂ixpH нсаильзовати НЕХото(«а юзможяостгА евзорваго графического редакпр! MicTOtnecfaa Ffadi, coMcenipciKuiRcro на с(п^1иЗдесь rqnttoaocA про 酒 骂ixpH нсаильзовати НЕХото(«а юзможяостгА евзорваго графического редакпр! MicTOtnecfaa Ffadi, coMcenipciKuiRcro на с(п^1иРис. 4.9. В перемещаемые фреймы загружены страницы сайтаРис. 4.9. В перемещаемые фреймы загружены страницы сайта

:

:

ActiveX

ActiveX

-

-

SSI и ASP

SSI и ASP

-

-

D \DUNAEV\rtrame_move.HT

D \DUNAEV\rtrame_move.HT

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

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

элементы управления Например, поддержка базы дщ:

элементы управления Например, поддержка базы дщ:

Цэбр«Нй«А Сервис £.gK3

Цэбр«Нй«А Сервис £.gK3

2. Cam себе Web мастер. 2001г., 211с.

Динамический HTML, скрипты Примеры

2. Cam себе Web мастер. 2001г., 211с.

Динамический HTML, скрипты Примеры

]. Сам срКс Web-дюшшр. 2Шт,г Н2с.

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

]. Сам срКс Web-дюшшр. 2Шт,г Н2с.

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

Flash- векторный графический редактор, позволяющий создав;

страницы. Во Flash также МОЖНО делать интерактивные дхтюп I

Flash- векторный графический редактор, позволяющий создав;

страницы. Во Flash также МОЖНО делать интерактивные дхтюп I

Flash В приложении - справочники I по JScnpt и VBScript. Прнв модификациями) опубликованы m этом сайте.

Flash В приложении - справочники I по JScnpt и VBScript. Прнв модификациями) опубликованы m этом сайте.

D:\DUNAEVVifiame_mdveНТМ-M -Miciotofl Internet Емр1о(с(

D:\DUNAEVVifiame_mdveНТМ-M -Miciotofl Internet Емр1о(с(

Здесь rqnttoaocA про 酒 骂ixpH нсаильзовати НЕХото(«а юзможяостгА евзорваго графического редакпр! MicTOtnecfaa Ffadi, coMcenipciKuiRcro на с(п^1и

Здесь rqnttoaocA про 酒 骂ixpH нсаильзовати НЕХото(«а юзможяостгА евзорваго графического редакпр! MicTOtnecfaa Ffadi, coMcenipciKuiRcro на с(п^1и

Рис. 4.9. В перемещаемые фреймы загружены страницы сайта

Рис. 4.9. В перемещаемые фреймы загружены страницы сайта

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

Напомним, что плавающие фреймы создаются с помощью контейнерного тега <IFRAME>. В сценарии (листинг 4.9) мы сначала сформируем массив с адресами документов (файлов), загружаемых во фреймы. Затем сформируем строку тегов, описывающих фреймы и графические изображения, и запишем ее в HTML-документ. Функция, производящая вычисление положения и размеров фреймов и изображений, в этом примере называется resizeframeQ.

Листинг 4.9. Код для перемещения плавающих фреймов

< HTML >

<HEAD><TITLE>Перемещаемые фреймьк/TITLE><

/HEAD>

<BODY ID = "mybody" background = "blue.gi

f">

</BODY>

<SCRIPT>

/* Массив адресов документов */

var ahref=new ArrayO

ahref[0] = "graphic . htm" ahref[l] = "examples.htm" ahref[2] = "mybook.htm"

/* Формирование строки с описанием фреймо var xstr =

for (i=0; i<ahref.length; i++) {

/* Фреймы */

xstr+= '<IFRAME width=200 ID="fr' + i + '

STYLE = "position: absolute; top:' + (5 + [ "></iframe>'

/* Изображения */

xstr+= '<IMG ondblclick="drag() " width=16 id="im' + i + '" STYLE = "position: absolu

в и изображений */

" SRC = "' +ahref [i ] + ' 25*i) + ' ; left:' + (10 + 30*i)

height=14 SRC = "pyKa.gif"

te"> '

}

document.write(xstr)

// запись в документ

.flag = false var id_img =

resizef rameO

// установка размеров фреймов

functiondrag(){

flag=!flag

id_img = event.srcElement. id

id_img = "fr" + id_img. substr(2) } "

function mybody.onmousemoveO{

if (flag){

document. all [id_img].style.top= event document.all[id_img].style.left = eve

. clientY t. clientX

resizeframeO

function mybody . onmouseupO {

flag = false

function resizeframe(){

// установка размеров фреймов

var y. size, idimg, idfr

for (i =0; i < ahref. length; i++){

/* Фреймы */ idfr = "fr" + i

//id фрейма

у = parselnt(document.all[idfr].style.top) size = Math.min(y,800)

size = Math .max(60,size)

size = size*3

document.all[idfr].style.width = size document .all [idfr] . style .height = 0.8

*size

document.all[idfr].style.zlndex = у

/* Изображения */

idimg = "1m" + i//id изображения

document.all[idimg].style.top = y-5 document.all[idimg].style.left = parselnt(document.all[idfr].style.left)-12

document.all[idimg].style.zlndex=document.all[idfr].style.zlndex

} | </SCRIPT> </HTML>

Обратите внимание, что перемещение фрейма приостанавливается, когда указатель мыши находится над фреймом. Поэтому для перемещения фрейма указатель мыши должен двигаться над участками окна, не занятыми фреймами. Это небольшое неудобство вызвано тем, что фрейм маскирует тело (элемент <BODY>) документа исходного окна и обработчик rnybody.onmousemove() не срабатывает. Маскирующий эффект появляется из-за того, что фрейм является разновидностью окна. В случае с текстовыми областями этот эффект не наблюдается, поскольку текстовая область — просто элемент документа текущего окна, а не отдельное окно.

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

4.3. Рисование линий

В JavaScript нет специальных встроенных средств для рисования произвольных линий. Если вам потребуется отобразить в окне браузера прямоугольник или горизонтальную линию, то для этого можно воспользоваться HTML-тегами <TABLE> и <HR> соответственно. А как быть, если нужны наклонная прямая, круг или кривая, заданная уравнением? Например, как изобразить график некоторой зависимости в виде кривой, а не последовательности столбиков?

Идея решения этой задачи довольно проста. Нужно вывести на экран изображение размером 1x1 пиксел, залитое цветом, отличающимся от цвета фона. Это изображение следует разместить несколько раз в соответствии с координатами, которые задаются параметрами позиционирования top и left атрибута STYLE тега <IMG>. С помощью сценария можно сформировать строку, содержащую теги <IMG> с необходимыми атрибутами, а затем записать ее в документ методом write().

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

Прямая линия

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

<IMG SRC = "point.bmp" STYLE = "position:absolute;top:y;left:x">

Здесь point.bmp — имя графического файла, содержащего один пиксел; у, х — числа, указывающие положение графического файла в пикселах. Изображение точки размером 1 x 1 пиксел можно создать в любом графическом редакторе. Из соображений экономии его лучше всего сохранить в файле формата BMP, а не JPEG или GIF (при малых размерах изображения алгоритмы сжатия неэффективны).

Чтобы задать размеры отображения точки на экране, следует использовать атрибуты WIDTH и HEIGHT (ширинарнна и высота):

<IMG SRC = "point.bmp" STYLE = "posi tion : absolute; top:y ;left :x" WIDTH = n HEIGHT = n>

Одинаковые значения атрибутов WIDTH и HEIGHT задают представление точки в виде квадрата размером пх п пикселов. При этом точка с исходными размерами 1x1 пиксел просто растягивается. Таким образом, мы можем задать отображаемые размеры (масштаб) одной точки, а следовательно, и определить толщину линии. Теперь рассмотрим начальную версию функции, которая рисует прямую линию с заданными координатамиxl, yl, х2, у2 ее начала и конца. Кроме координат функция будет принимать числовой параметр п, указывающий толщину линии. Вот вариант определения функции:

function line(xl, yl, х2, у2 , п){

/* Версия 0 */

/* xl, yl - начало линии х2 , у2 - конец линии п - толщина линии */

var clinewidth =" WIDTH=" + n + "HEIGHT=" + n /* строка для учета

толщины */

var xstr = ""// строка тегов для записи в HTML-документ

var xstrO = ' <IMG SRC="point.bmp"' + clinewidth + ' STYLE="positlon:absolute; '

var k = (y2 - yl)/(x2 - xl)// коэффициент наклона линии

var x = xl// начальное значение координаты х

/* Формирование строки, содержащей теги <IMG. ..>:*/

while (x <= х2) {

xstr += xstr9 + 'top:' + (yl + k* (x - xl)) + ': left:1 + x + x+ +

aocument.w「i te(xstr)// запись в документ

}

Функция lineQ формирует строку, содержащую теги вывода экземпляров одного и того же графического изображения точки. При этом в цикле изменяются значения параметров top и left атрибута STYLE. Параметром цикла является горизонтальная координата, текущее значение которой присваивается параметру left. Таким образом, мы используем горизонтальную развертку линии. Вертикальная координата (top) вычисляется с учетом ее наклона — коэффициента, равного тангенсу угла наклона. Сформированная строка записывается в документ и отображается в окне браузера.

Функция дает неплохие результаты, когда линия проходит слева направо под углом к горизонтали, меньшим 45° (рис. 4.10). При больших углах становится заметной дискретность линии, что показано на рисунке. Это связано с тем, что количество отображаемых точек определяется величиной х2 - xl. Если мы хотим нарисовать вертикальную линию, то х2 = xl и, следовательно, количество отображаемых точек равно 0. Иначе говоря, для создания вертикальных линий рассматриваемая версия функции line() не приспособлена. Кроме того, эта функция рисует только линии, у которых начало находится левее и выше конца.

Рис. 4.10. Линии, нарисованные с помощью функции line() версии ОРис. 4.10. Линии, нарисованные с помощью функции line() версии О

Рис. 4.10. Линии, нарисованные с помощью функции line() версии О

Рис. 4.10. Линии, нарисованные с помощью функции line() версии О

В следующей версии функции line() реализована простая идея, заключающаяся в том, чтобы выбирать подходящую развертку. Если линия ближе к горизонтали, чем к вертикали, то используется горизонтальная развертка, в противном случае выбирается вертикальная развертка (рис. 4.11). Кроме того, мы определяем направление развертки так, чтобы рисовать линии, у которых начало может быть как левее, так и правее конца (листинг 4.10).

Листинг 4.10. Код функции lineQ версии 1 function line(xl, yl, х2 ,у2, п){ /* Версия 1 */ /* xl, yl - начало линии х2, у2 - конец линии п - толщина линии

*/

var clinewidth = " if (!n)clinewidth = ' WIDTH=" var xstr=nvar clinewidth = " if (!n)clinewidth = ' WIDTH=" var xstr=n// строка, определяющая толщину линии

var clinewidth = " if (!n)

clinewidth = ' WIDTH=" var xstr=n

var clinewidth = " if (!n)

clinewidth = ' WIDTH=" var xstr=n

+ n + " HEIGHT=" + n

// строка тегов для записи в HTML-документ продолжение &

Листинг 4.10 (продолжение)

var xstrO = '<IMG SRC="point.bmp"' + clinewidtn + ' STYLE="position:absolute;'

var x, k, direct

var vertical = Math.abs(y2>

if (vertical) !

direct =

(y2>

yl)

//

направление

прямой

x = yl

к =(x2

- xl)/(y2 -

yl)

//

коэффициент

наклона

прямой

}else{

direct =

(x2 >

xl)

//

направление

прямой

if (direct) x =

xl

else x =

x2

k =(y2

- yl) /

(x2

- xl)

//

коэффициент

наклона

прямой

while (true) {

if (!vertical){

+ ' ; left: ' + х + '+ ' ; left: ' + х + 'top:1 + x +'" >top:1 + x +'" >xstr += O + 'top: ' + (yl + k*(x - xl)) if (x == x2) break if (direct) x*+

+ ' ; left: ' + х + '

+ ' ; left: ' + х + '

top:1 + x +'" >

top:1 + x +'" >

else x--

}else{

x s t r + = x s t r O + 'left:+ (xl + k * ( x - y l ) ) +

if (x == y2) break if (direct) x++

else x--

document.write(xstr)document.write(xstr)// запись в документ// запись в документ

document.write(xstr)

document.write(xstr)

// запись в документ

// запись в документ

Теперь не мешало бы получить возможность рисовать, например, штриховые линии, а также задавать их цвет. Чтобы задать цвет линии, необходимо выбрать под-

Рис. 4.11 . Линии, нарисованные с помощью функции lineQ версии 1Рис. 4.11 . Линии, нарисованные с помощью функции lineQ версии 1

Рис. 4.11 . Линии, нарисованные с помощью функции lineQ версии 1

Рис. 4.11 . Линии, нарисованные с помощью функции lineQ версии 1

ходящий графический файл с изображением точки. Можно заранее заготовить файлы точек с различными цветами. Впрочем, можно заготовить файлы не только с изображениями точек, но и с произвольными изображениями. В конце концов, мы можем рисовать «линии», используя любые изображения в качестве точек. Для рисования штриховых линий необходимо просто периодически не отображать заданное количество точек. В следующей версии функции line() добавлены два параметра: имя графического файла и длина штриха линии (листинг 4.11). Предполагается, что длины штриха и паузы между соседними штрихами одинаковы. Если длина штриха не указана или равна 0, то линия сплошная.

Листинг 4.11. Код функции line() версии 2 (штриховые линии)

function l i ne(pi ct_file, xl, yl, x2, y2, n, s){function l i ne(pi ct_file, xl, yl, x2, y2, n, s){/* Версия 2 *//* pict_file - имя графического xl, yl - начало линииx2, y2 - конец линиип - толщина линииs - длина штриха и паузы* //if (!pict_file) pict_file = "point.bmp"if (!s)s = 0/* Версия 2 *//* pict_file - имя графического xl, yl - начало линииx2, y2 - конец линиип - толщина линииs - длина штриха и паузы* //if (!pict_file) pict_file = "point.bmp"if (!s)s = 0файлафайлаvar c li newi dth =var c li newi dth =""""if (!n)clinewidth = " WIDTH=" + n +if (!n)clinewidth = " WIDTH=" + n +// файл с изображением точки// длина штриха и паузы// строка, определяющая толщину// линии// толщина" HEIGHT=" + n// файл с изображением точки// длина штриха и паузы// строка, определяющая толщину// линии// толщина" HEIGHT=" + nvar xstr = '// строка тегов для записи в HTML-документvar xstrO = '<IMG SRC= + pict_file + '"' + clinewidth + 'var xstr = '// строка тегов для записи в HTML-документvar xstrO = '<IMG SRC= + pict_file + '"' + clinewidth + 'STYLE = "position:absolute; "var x, k, directvar vertical = Math.abs(y2 - yl)if (vertical){direct = (y2 > yl)x = ylk = (x2-xl) / (y2-yl)}else{direct = (x2 > xl) if (direct) x = xlelse x = x2k = (y2 - yl)/(x2 - xl)ISTYLE = "position:absolute; "var x, k, directvar vertical = Math.abs(y2 - yl)if (vertical){direct = (y2 > yl)x = ylk = (x2-xl) / (y2-yl)}else{direct = (x2 > xl) if (direct) x = xlelse x = x2k = (y2 - yl)/(x2 - xl)I> Math.abs(x2 - xl)// направление прямой// коэффициент наклона прямой// направление прямой// коэффициент наклона прямой> Math.abs(x2 - xl)// направление прямой// коэффициент наклона прямой// направление прямой// коэффициент наклона прямой

function l i ne(pi ct_file, xl, yl, x2, y2, n, s){

function l i ne(pi ct_file, xl, yl, x2, y2, n, s){

/* Версия 2 */

/* pict_file - имя графического xl, yl - начало линии

x2, y2 - конец линии

п - толщина линии

s - длина штриха и паузы

* //

if (!pict_file) pict_file = "point.bmp"

if (!s)

s = 0

/* Версия 2 */

/* pict_file - имя графического xl, yl - начало линии

x2, y2 - конец линии

п - толщина линии

s - длина штриха и паузы

* //

if (!pict_file) pict_file = "point.bmp"

if (!s)

s = 0

файла

файла

var c li newi dth =

var c li newi dth =

""

""

if (!n)

clinewidth = " WIDTH=" + n +

if (!n)

clinewidth = " WIDTH=" + n +

// файл с изображением точки

// длина штриха и паузы

// строка, определяющая толщину

// линии

// толщина

" HEIGHT=" + n

// файл с изображением точки

// длина штриха и паузы

// строка, определяющая толщину

// линии

// толщина

" HEIGHT=" + n

var xstr = '// строка тегов для записи в HTML-документ

var xstrO = '<IMG SRC= + pict_file + '"' + clinewidth + '

var xstr = '// строка тегов для записи в HTML-документ

var xstrO = '<IMG SRC= + pict_file + '"' + clinewidth + '

STYLE = "position:absolute; "

var x, k, direct

var vertical = Math.abs(y2 - yl)

if (vertical){

direct = (y2 > yl)

x = yl

k = (x2-xl) / (y2-yl)

}else{

direct = (x2 > xl) if (direct) x = xl

else x = x2

k = (y2 - yl)/(x2 - xl)

I

STYLE = "position:absolute; "

var x, k, direct

var vertical = Math.abs(y2 - yl)

if (vertical){

direct = (y2 > yl)

x = yl

k = (x2-xl) / (y2-yl)

}else{

direct = (x2 > xl) if (direct) x = xl

else x = x2

k = (y2 - yl)/(x2 - xl)

I

> Math.abs(x2 - xl)

// направление прямой

// коэффициент наклона прямой

// направление прямой

// коэффициент наклона прямой

> Math.abs(x2 - xl)

// направление прямой

// коэффициент наклона прямой

// направление прямой

// коэффициент наклона прямой

var i = 0var draw = truewhile (true){if (!vertical){if (draw)xstr += xstrO + 'top: ' + if (x == x2) break if (direct)x++else x--var i = 0var draw = truewhile (true){if (!vertical){if (draw)xstr += xstrO + 'top: ' + if (x == x2) break if (direct)x++else x--// счетчик точек штриха и паузы// счетчик точек штриха и паузы// рисовать или пропускать// рисовать или пропускать(yl + k*(x - xl)) +(yl + k*(x - xl)) +left:' + x +left:' + x +

var i = 0

var draw = true

while (true){

if (!vertical){

if (draw)

xstr += xstrO + 'top: ' + if (x == x2) break if (direct)x++

else x--

var i = 0

var draw = true

while (true){

if (!vertical){

if (draw)

xstr += xstrO + 'top: ' + if (x == x2) break if (direct)x++

else x--

// счетчик точек штриха и паузы

// счетчик точек штриха и паузы

// рисовать или пропускать

// рисовать или пропускать

(yl + k*(x - xl)) +

(yl + k*(x - xl)) +

left:' + x +

left:' + x +

продолжение •&продолжение •&

продолжение •&

продолжение •&

}else{

if (draw)

Листинг 4.11 (продолжение)

xstr += хstr0 + 'left: ,+ (xl + k*(x - yl)) + '; top:' + x + '">' if (x == y2) break if (direct) x++ else x-

}

if (s>0&&i>s){ draw = Idraw i =О

document.write(xstr)// запись в документ

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

Рис. 4.12. Расположение изображений вдоль прямых штриховых линий

Произвольная кривая

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

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

Листинг 4.12. Код функции curve()для рисования кривых

function curve(pict_f i le,yexpr, x0, y0, t, n. s){

/* Версия 0 */

/* pict_file - имя графического файла уехрг - выражение с переменной х х0, у0 - координаты начала кривой t - количество точек кривой (значений переменной х) п - толщина линии

s - длина штриха и паузы

*//

if (lyexpr) return null

if ( !pict_file) pict_file = "point.bmp"

if (!s) s = 0

if (It) t = 0

var clinewidth = '

if (!n)

clinewidth = 'WIDTH=' + n + 'HEIGHT=' + n

var x

xstrG = '<IMGSRO"'+ pict_file +'"''+ clinewidth +

STYLE = "position:absolute;top: '

xstr = ""

var i = 0, draw = true for(x = 0; x < t; x++) { if (draw)

xstr+= xstrO+(y0+ eval(yexpr)) +';left:' +(x0+x)♦，**>'

if (i > s&&s > 0) {

draw = Idraw

i = 0

}

i ++

}

document.write(xstr)// запись в документ

-1 СЛМон докаментыиБМте НТМ - Microsoft Inle., “WE-1 СЛМон докаментыиБМте НТМ - Microsoft Inle., “WEРис. 4.13. Линии, нарисованные с помощью функции curveQ версии ОРис. 4.13. Линии, нарисованные с помощью функции curveQ версии О

-1 СЛМон докаментыиБМте НТМ - Microsoft Inle., “WE

-1 СЛМон докаментыиБМте НТМ - Microsoft Inle., “WE

Рис. 4.13. Линии, нарисованные с помощью функции curveQ версии О

Рис. 4.13. Линии, нарисованные с помощью функции curveQ версии О

Ниже приведено несколько примеров:

// ветвь параболы curve("","100.0*Math.sin(6/250*(х))",30,120,300,12,0)// синусоида

curve ("" , "0.001*х*х*(х-75)", "х" ,100,80,200,6,0)

Теперь модифицируем функцию curve() так, чтобы можно было рисовать замкнутые линии (например, окружность или эллипс). Для этого необходимо иметь возможность задавать выражение не только для вертикальной, но и горизонтальной координаты. Такой способ задания линии в математике называют параметрическим. В простейшем случае в качестве выражения для горизонтальной координаты можно задать как "х" (листинг 4.13). Тогда функция должна давать такой же результат, что и ее версия 0. Напомним, что в выражениях для координат точек линии переменная должна быть обозначена строчной латинской буквой х.

Листинг 4.13. Модифицированный код функции curveQ

y0, t, n, s){вертикальной координаты горизонтальной координатыпеременнойy0, t, n, s){вертикальной координаты горизонтальной координатыпеременнойfunction curve(pict_file, yexpr, xexpr, /* Версия 1 */

y0, t, n, s){

вертикальной координаты горизонтальной координаты

переменной

y0, t, n, s){

вертикальной координаты горизонтальной координаты

переменной

- имя графического файла yexpr- выражениеспеременнойхдля

- выражениеспеременнойхдля

у0 - координаты начала кривой

t - количество точек кривой (значений п - толщина линии

s - длина штриха и паузы

i Г /yexpr) return null

if i xexpr; xexpr = "x"

if (! pict_f i le) pict_file = "point.bmp

if (!s) s = 0

if (! t) t = 0

var clinewidth = "

if(!n)

clinewidth ='WIDTH=' + n + 'HEIGHT=' + n

var x

xstrO = *<IMG SRC=*' 1 + pict_file ++ clinewidth +

' STYLE="positionrabsolute; top:1

xstr = ""

var i = 0, draw = true

for(x = 0; x < t; x++) {

if (draw)

xstr += xstr0 + (y0 + eval(yexpr)) + left:' + (x0 eval(xexpr)) + ' ">'

if (i > s&&s > 0) { draw = Idraw i =0

}

document.wrlte(xstr)// запись в документ

}

Ниже приводятся несколько примеров так называемых фигур Лиссажу (рис. 4.14):

curve ("", "80*Math.sin(6/25*x)", "60*Math. cos(6/25*x+l)" ,250, 100,300,2 ,0) curve ("" , "60*Math.sin(6/25*x)" , "60*Math . cos(6/25*x)" , 100 , 70 , 300,2 ,0) curve("" , "80*Math.sin(6/25*x)" , "80* Math .cos (6/50*x)" , 100,200,600,6,0) curve("", "80*Math.sin(6/250*x)", "80*Math. cos(6/75*x)",310,250 ,400,2 ,0)

Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции curveQ версии 1Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции curveQ версии 1

Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции curveQ версии 1

Рис. 4.14. Фигуры Лиссажу, нарисованные с помощью функции curveQ версии 1

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

Рис. 4.15. Расположение рисунков вдоль фигур Лиссажу

Графики зависимостей, заданных выражениями

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

Казалось бы, достаточно просто нарисовать две перпендикулярные прямые (оси координат), а затем кривую. Однако здесь возникают дополнительные задачи.

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

Графики зависимостей, заданных массивами

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

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

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

Прежде чем рассмотреть пример построения графика, немного модифицируем функцию Ипе(). Эта функция в том виде, как она была определена в подразделе «Прямая линия», не совсем подходит для наших целей. Сделаем так, чтобы она просто возвращала строку тегов, описывающую линию, а не записывала ее в документ. Для этого необходимо в определении функции line() заменить строку document.write(xstr) на return xstr.

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

|§C:\MoHAOK<{Me>fTbiUSUine2.HTM - Hiciosolt Internel Ехркие*|§C:\MoHAOK<{Me>fTbiUSUine2.HTM - Hiciosolt Internel Ехркие*Рис. 4.16. График зависимости, заданной с помощью двух массивовРис. 4.16. График зависимости, заданной с помощью двух массивов

|§C:\MoHAOK<{Me>fTbiUSUine2.HTM - Hiciosolt Internel Ехркие*

|§C:\MoHAOK<{Me>fTbiUSUine2.HTM - Hiciosolt Internel Ехркие*

Рис. 4.16. График зависимости, заданной с помощью двух массивов

Рис. 4.16. График зависимости, заданной с помощью двух массивов

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

<SCRIPT>

/* График зависимости, заданной массивами */

/* Массив элементов горизонтальной оси */

varaX=newArray("Один","Два","Три","Четыре","Пять","Шесть")

/' Массив элементов вертикальной оси */

var aY = newArrayd, 15, 13, 4, 8, 6)

var ky = 10, kx = 60var x0 = 100, yO = 20010 var xstr = 'var ky = 10, kx = 60var x0 = 100, yO = 20010 var xstr = 'for(i = 0; i < aX. length -1; 1++){xl = х0 + kx*iyl = у0 - ky»aY[i]x2 = x0 + kx*(i + 1)y2 = y0 - ky*aY[i + 1]xstr+= line("p_b.jpg", xl, yl, x2,for(i = 0; i < aX. length -1; 1++){xl = х0 + kx*iyl = у0 - ky»aY[i]x2 = x0 + kx*(i + 1)y2 = y0 - ky*aY[i + 1]xstr+= line("p_b.jpg", xl, yl, x2,// коэффициенты масштабирования// отступы// строка тегов, описывающая линию// линия графика// коэффициенты масштабирования// отступы// строка тегов, описывающая линию// линия графикаy2, 4)y2, 4)

var ky = 10, kx = 60

var x0 = 100, yO = 20010 var xstr = '

var ky = 10, kx = 60

var x0 = 100, yO = 20010 var xstr = '

for(i = 0; i < aX. length -1; 1++){

xl = х0 + kx*i

yl = у0 - ky»aY[i]

x2 = x0 + kx*(i + 1)

y2 = y0 - ky*aY[i + 1]

xstr+= line("p_b.jpg", xl, yl, x2,

for(i = 0; i < aX. length -1; 1++){

xl = х0 + kx*i

yl = у0 - ky»aY[i]

x2 = x0 + kx*(i + 1)

y2 = y0 - ky*aY[i + 1]

xstr+= line("p_b.jpg", xl, yl, x2,

// коэффициенты масштабирования

// отступы

// строка тегов, описывающая линию

// линия графика

// коэффициенты масштабирования

// отступы

// строка тегов, описывающая линию

// линия графика

y2, 4)

y2, 4)

for (i=0 ; i <

/* Метки на вертикальной оси */

xstr+二 "<b style='position：absolute;top:"+(y0-i*30-

10)+";left:75'>"+i*3+"</b>"

if (i>0){

// горизонтальные линии:

xstr+= line("point.bmp", x0, y0 - i*30, x0 + 5*kx, y0 - i*30, 1, 2)

// вертикальные *линии:

xstr+= line("point.bmp ", x0 + kx*i , y0, x0 + kx*i, 50, I, 2)

/* Метки на горизонтальной оси */

xstr+= "<b style='position:absolute;top: " + (y0 + 5) + ";left:"+ (x0 + kx*i) +'">" +

aX[i]+ "</b>"

}

xstr + = line("point.bmp " ,x0,y0 ,x0 , 50, 2)// вертикальная ось

xstr+= line("point.bmp ",x0,y0,x0 + 5*kx,y0,2)// горизонтальная ось

document.write(xstr)// запись в документ

</SCRIPT>

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

Динамические линии

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

Рассмотренные выше коды функций lineQ и curve() не вполне приспособлены к решению этой задачи из-за того, что они выполняют запись в документ сгенерированной строки HTML-тегов. Вообще говоря, это делать совсем не обязательно. Вполне достаточно, чтобы функции line() и curveQ просто возвращали строку тегов, а записать ее в HTML-документ можно и во внешней программе. В той же программе мы можем удалить и всю совокупность тегов, формирующих линию (когда это понадобится).

Итак, прежде всего изменим определения функций lineQ и curve() следующим образом: заменим в них выражение document.write(xstr) на return xstr. В результате функции не будут ничего рисовать, а будут лишь создавать и возвращать данные для последующего рисования. Теперь, чтобы нарисовать произвольную линию, следует в сценарии написать такую строку кода:

document.write(curve(параметры))

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

var xstr = сигуе(параметры) document.write(xstr)

Поскольку мы должны быть готовы удалить линию из документа, строку тегов, возвращаемую функциями curveQ и line(), сначала заключим в какой-нибудь контейнер, например <DIV ID = . . .> с атрибутом ID, а затем запишем в документ:

var сcmycurve="<DIV ID = 'mycurve' > " i- сигуе(параметры) + "</DIV>" document.write(cmycurve)// запись в документ

Чтобы удалить линию из документа, достаточно заменить содержимое контейнерного тега <DIV> на пустую строку:

document.all.mycurve.innerHTML = ""

Здесь мы воспользовались свойством innerHTML, которое содержит весь HTML- код, заключенный в указанный контейнер. Присвоение этому свойству нового значения сразу же изменяет соответствующий элемент в документе. В данном случае вся последовательность тегов <IMG .. .>, формирующая линию, заменяется пустой строкой, в результате чего изображение линии исчезает. При этом сам контейнер <DIV> с пустым содержимым остается. В случае необходимости его можно наполнить новыми данными. Это типичный прием динамического изменения элементов HTML-документов.

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

document.all.mycurve.innerHTML = сигуе(другие_параметры)

В результате контейнер <DIV> заполнится последовательностью тегов <IMG. . .>, формирующих новую линию, а браузер ее отображает.

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

Листинг 4.15. Код динамических линий

<HTML>

<BUTTON onclick = " redrawn ">Перерисовать</В11ТТОМ>

<SCRIPT>

/* Строка, возвращаемая сurve() заключается в контейнер с заданным идентификатором ID */

var cmycurve="<DIV ID = 'mycurve'>> " + curve("",,,80*Math.sin(6/25ex)". "80*Math.cos(6/50*x)",100,200,600,6,0) + "</DIV>"

document.wri te(cmycurve)// запись в документ и отображение линии

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

function redrawO{/* обработчик щелчка на кнопке

(перерисовка линии) */

document.all.mycurve.innerHTML = curve("", "60*Math.sin(6/25*x)", "60*Math.cos(6/25*x)" ,100,150,300,2,0)

}

function i:urve(pict_file, yexpr, xexpr, x0, y0, t, n, s){ // линия if (lyexpr) return null if (Ixexpr) xexpr = "x"

if (!pict_file) pict_file = "point.bmp"

if (!s) s = 0

if (!t) t = 0

var clinewidth = "

if (!n)

clinewidth = 'WIDTH=' + n + 'HEIGHT=' + n

var x

"' + pict_fHe + '" ' + clinewidth +' STYLE =

"position:absolute;top: '

xstr = ""

var i = 0, draw = true

for(x =0; x < t; x++) {

if (draw)

xstr += xstrO + (y0 + eval(yexpr)) + '; left:1 + (x0 + eval (xexpr)) + ' " > '

if ( i >s && s > 0) { draw = Idraw i = Э

i ++

} return xstr// строка тегов, формирующих линию

}

</SCRIPT>

</HTML>

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

Напишем число словами

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

31 — тридцать один

31000 - тридцать одна тысяча

31000000 - тридцать один миллион

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

Функция Nsay(N), решающая рассматриваемую задачу, принимает в качестве параметра N целое число и возвращает строку, которая представляет это число в виде последовательности слов. Эта функция использует ряд вспомогательных функций: speakQ, LeftQ и Right(). Если speakQ является специфической функцией, предназначенной для решения поставленной задачи, то функции LeftQ и RightQ довольно универсальны и могут быть использованы в других приложениях. Так, функция LeftQ возвращает левую часть указанной строки, a RightQ — правую ее часть. В принципе, можно обойтись и без этих функций, но с ними как-то удобнее. В представленном ниже варианте функция NsayQ позволяет представить прописью любое целое число, не превышающее 999 999 999 999 (один триллион минус единица).

Листинг 4.16. Код для представления числа словами

ion Nsay(N) {// Перевод чисел в имена числительные

/* Параметр: целое число Возвращает строку символов

• 7

if (N == null) return "

if (!N)

return "ноль"

if (Math.abs(N) > 999999999999)

return "****"// превышение допустимого предела

var NN1 = "", NN2 = "". NN3 = "", NN4 = "", nNNl, nNN2, nNN3, nNN4, znak. xyz

/* Единицы */

ed = new Array(" один", " два", " три", " четыре", " пять", " шесть",

" семь",восемь", " девять")

/* Десятки */

de = new Array(" десять",двадцать",тридцать",сорок",

пятьдесят", " шестьдесят", " семьдесят", " восемьдесят", " девяносто") /* Второй десяток */

dd = new Array(" одиннадцать", " двенадцать", " тринадцать",

" пятнадцать", " шестнадцать", " семнадцать",

" восемнадцать", "девятнадцать")

/* Сотни 7

so = new Array(" сто", " двести", " триста",четыреста", " пятьсот",

семьсот",восемьсот", " девятьсот")

znak = "// знак числа

if (N < 0)гпак="минус "

/* преобразуем число N в строку

с ведущими нулями: */

NN = Right("000000000000" + Itrim(N. toStringO).12)

/* Выделяем группы разрядов, преобразуя их в числа.

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

nNNl = parse!nt(Left(NN,3) , 10)

nNN2 = parse!nt(NN.substr(3,3) , 10)

nNN3 = parse!nt(NN.substr(6,3) , 10)

nNN4 = parse!nt(NN.substr(9,3) , 10)

if (nNNl >0 丿{

NN1 =speak(nNNl)

xyz = Right(NNl , 1)

NN1 = NN1 + " миллиард"

if (xyz == "a" || xyz == "и" || xyz == "e") NN1 = NN1 + "a"

else <

if (xyz != "Н")

NN1 = NN1 + "OB"

)

if (nNN2 > 0){

NN2 = speak(nNN2)

xyz = Right(NN2,l)

NN2 = NN2 + " миллион"

if (xyz == "a" | | xyz == "и" | | xyz == "e") NN2 = NN2 + "a"

else {

if (xyz != "Н")

NN2 = NN2 + "OB"

if (nNN3 > 0){

ed[0] = " одна"

ed[l] = "две"

NN3 = speak(nNN3)

xyz = Right(NN3,l)

NN3 = NN3 + " тысяч"

if (xyz == "и" || xyz == "e")

NN3 = NN3 + "и"

else {

if (xyz =="a") NN3 = NN3 + "a"

I

ed[G] = " один"

ed[l] = " два"

}

if (nNN4 > 0)

NN4 = speak(nNN4)

NN4 = znak + NN1 + NN2 + NN3 + NN4 return !NN4 ? "ноль" : NN4

/* Вспомогательные функции: */ function speak (k) { var yNl, yN2 if (k==0) return " if (k==10) return " десять" if (k=1&&k< 10) return ed(k-l]

продолжениепродолжениеif (k >= 11&&k< 20) return dd[k -11]

продолжение

продолжение

Листинг 4.16 (продолжение)

if (k >= 20 && k <= 99) { ск = ltrim(k. toStringO) yNl = parselnt(l_eft(ck, 1)) yN2 = parselnt(ck.substr(l, returnyN2==0 ? de[yNl-l]}if (k >= 100 && k <= 999) { к = ltrim(k. toStringO) return so[parseInt(Left(k,l))if (k >= 20 && k <= 99) { ск = ltrim(k. toStringO) yNl = parselnt(l_eft(ck, 1)) yN2 = parselnt(ck.substr(l, returnyN2==0 ? de[yNl-l]}if (k >= 100 && k <= 999) { к = ltrim(k. toStringO) return so[parseInt(Left(k,l))1))de[yNl - 1] + ed[yN2-l]1))de[yNl - 1] + ed[yN2-l]function Itrim(xstr){if (") == 0))return xstrvar astr = xstr.spli t("function Itrim(xstr){if (") == 0))return xstrvar astr = xstr.spli t("-1] + speak(parselnt(k. substr (1, 2)))// удаляет передние пробелы// создаем массив из слов строки-1] + speak(parselnt(k. substr (1, 2)))// удаляет передние пробелы// создаем массив из слов строкиvari =0while (i<astr.length){if (astr[i] != ("")) breaki +♦astr = astr . slice(i)return astr.join(vari =0while (i<astr.length){if (astr[i] != ("")) breaki +♦astr = astr . slice(i)return astr.join(выходим из цикла, если элемент не пуствыходим из цикла, если элемент не пуст// создаем массив// создаем массив// склеиваем элементы массива в строку// склеиваем элементы массива в строку

if (k >= 20 && k <= 99) { ск = ltrim(k. toStringO) yNl = parselnt(l_eft(ck, 1)) yN2 = parselnt(ck.substr(l, returnyN2==0 ? de[yNl-l]

}

if (k >= 100 && k <= 999) { к = ltrim(k. toStringO) return so[parseInt(Left(k,l))

if (k >= 20 && k <= 99) { ск = ltrim(k. toStringO) yNl = parselnt(l_eft(ck, 1)) yN2 = parselnt(ck.substr(l, returnyN2==0 ? de[yNl-l]

}

if (k >= 100 && k <= 999) { к = ltrim(k. toStringO) return so[parseInt(Left(k,l))

1))

de[yNl - 1] + ed[yN2-l]

1))

de[yNl - 1] + ed[yN2-l]

function Itrim(xstr){

if (") == 0))

return xstr

var astr = xstr.spli t("

function Itrim(xstr){

if (") == 0))

return xstr

var astr = xstr.spli t("

-1] + speak(parselnt(k. substr (1, 2)))

// удаляет передние пробелы

// создаем массив из слов строки

-1] + speak(parselnt(k. substr (1, 2)))

// удаляет передние пробелы

// создаем массив из слов строки

vari =0

while (i<astr.length){

if (astr[i] != ("")) break

i +♦

astr = astr . slice(i)

return astr.join(

vari =0

while (i<astr.length){

if (astr[i] != ("")) break

i +♦

astr = astr . slice(i)

return astr.join(

выходим из цикла, если элемент не пуст

выходим из цикла, если элемент не пуст

// создаем массив

// создаем массив

// склеиваем элементы массива в строку

// склеиваем элементы массива в строку

function Left(xstr, n){return xstr.substr(0 , n)function Right(xstr, n) { return xstr.substr(xstr.lengthfunction Left(xstr, n){return xstr.substr(0 , n)function Right(xstr, n) { return xstr.substr(xstr.length// выделяет левую часть строки// выделяет левую часть строки// выделяет правую часть строки n)// выделяет правую часть строки n)

function Left(xstr, n){

return xstr.substr(0 , n)

function Right(xstr, n) { return xstr.substr(xstr.length

function Left(xstr, n){

return xstr.substr(0 , n)

function Right(xstr, n) { return xstr.substr(xstr.length

// выделяет левую часть строки

// выделяет левую часть строки

// выделяет правую часть строки n)

// выделяет правую часть строки n)

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

ЦОЛКнига JavaSciipt4probaWSAY_Mm , Mi

Щавка. '.'§?&

III -- J

Введите число:

|723456789012

прописью:

сто двадцать три миллиарда четырестапятьдесят шесть

миллионов семьсот восемьдесят девять тысяч двенадцать

i Готе*

Рис. 4.17. Представление введенного числа прописью

<HTML>

<BODY bgcolo = "е0еОе0">

Введите число:<BR>

<INPUT NAME = "myinput" TYPE = "number" VALUE = " "numberchangeO">

<BR> Число прописью:<BR>

В ID = "Ntext"></B>

/BODY>

<SCRIPT>

function numberchangeO{

document.all.Ntext.innerText=Nsay(document.all.my input.value) }

</SCRIPT>

</HTML>

Обработка данных форм

Такие элементы HTML-документа, как поля ввода данных, текстовые области, переключатели и флажки, раскрывающиеся списки и кнопки, можно объединить в так называемую форму (рис. 4.18). В HTML форма создается с помощью контейнерного тега <FORM>, внутри которого располагаются теги элементов этой формы. В объектной модели документа каждой форме соответствует свой объект, входящий в коллекцию forms. Заметим, что любой из перечисленных выше элементов можно использовать вне всякой формы. Однако форма — не просто контейнер, а контейнер и объект, предназначенные главным образом для организации отправки на сервер всех данных, имеющихся в элементах этой формы (например, введенных пользователем). Давным-давно, когда браузеры воспринимали только простой HTML и не работали со сценариями, форма была единственным средством поддержки интерактивности.

Рис. 4.18. Внешний вид формы в окне браузера

Как раньше, так и теперь для отправки данных на сервер сценарий не обязателен. Чтобы отправить данные, достаточно в теге <FORM> указать атрибут ACTION, а в самой форме установить кнопку типа Submit. Щелчок на этой кнопке инициализирует отправку данных. Если атрибут ACTION не указан или его значение пусто, данные формы не будут отправлены, даже если вы щелкнете на кнопке типа Submit.

Итак, для отправки данных формы атрибут ACTION должен иметь некоторое значение. В общем случае это URL-адрес файла или сCGI-программы, которая получает и обрабатывает отправленные данные. Например, ACTIO N =" http://www. myserver/ cgi/myprogram.pl".

Если вы хотите отправлять данные формы по электронной почте, то значением ACTION является строка вида:

maiI to:адрес_е-тат1

Можно также указать тему (subject) сообщения:

mailto:aflpec_e-mail.?subject=TeMa_coo6i«eHHfl

Кроме атрибута ACTION в теге <FORM> следует указать еще два атрибута: METHOD и ENCTYPE. Атрибут METHOD имеет значение POST или GET. Выбор значения отражается лишь на форме, в которой передаются данные. Если у вас нет особых причин задуматься об этом, выбирайте значение POST. Атрибуту ENCTYPE присвойте значение "text/plain". В этом случае отправляемое сообщение будет представлять собой последовательность пар вида имя_элемента=значение. Здесь имя_элемента — значение атрибута NAME в теге элемента, содержащегося в форме, а значение — значение атрибута VALUE в этом же теге. Если не указать атрибут ENCTYPE, то сообщение будет представлено в неудобочитаемом (закодированном) виде.

Вот пример HTML-документа с формой, содержащей поле ввода данных и кнопку типа Submit:

<HTML>

<FORM METHOD = POST ACTION = "mailto:mufliu@geras1in.ru" ENCTYPE="text/plain">

<INPUT NAME = "Сообщение" TYPE = "text" VALUE = "">

<INPUT NAME = "Отправить" TYPE="submit" VALUE = "Отправить">

</FORM>

</HTML>

Отправка данных рассмотренной выше формы произойдет при щелчке на кнопке типа Submit, на которой в нашем примере выводится надпись «Отправить». Адрес получателя указан как значение атрибута ACTION в теге <FORM>.

Если перед отправкой данных формы требуется предварительно их проверить или еще что-нибудь сделать, то для этого необходим сценарий. В следующем примере проверяется, имеется ли символ « @ » в поле ввода адреса электронной почты получателя и не пусто ли поле ввода собственно сообщения. Если символа «@» в адресе нет или поле сообщения пусто, то отправка не производится. Сценарий обрабатывает событие onsubmit, возникающее при щелчке на кнопке типа Submit.

<HTML>

<FORM ID = "myform" METHOD=POST ACTI.ON="" ENCTYPE="text/plain" styIe="background:'еЭеОеО1">

Кому:

<INPUT NAME = "email_to" TYPE = "text" VALUE = "">

<P>

От кого:

<INPUT NAME="email_from" TYPE = "text" VALUE = "">

<P>

Сообщение:<BR>

<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = " ”></TEXTAREA> <P>

<! Кнопка типа Submit >

<INPUT NAME = "Отправить " TYPE = "submit" VALUE = "Отправить">

</FORM>

<SCRIPT>

function myform.onsubmit (){

var noemail = myform.email_to.value.indexOf('@') == - 1

/* присваиваем значение равенства */

var notext = Imyform.Сообщение.value

var xtext = "ХпПисьмо не отправлено" if (noemail | | notext){

event.returnValue = false// отменить

отправку if(noemail)

alert("Неправильный адрес получателя" + xtext) else alert("HeT текста сообщения" + xtext) } else

my form.action =" + myform.email_to.value // значение ACTION

)

</SCRIPT>

</HTML>

^| D AKHMraJavaSciipIKpioba^opMa Mm ... ДИЕЗ

Избранное亡

'—「 「 一3

Кому: oc@yyyy.ru

От кого. jqqq@wwww.ru

Сообщение:

Привет !〃7

; Отправить' :4|

J

QJ Мой компьютер

Рис. 4.19. Форма отправки сообщения по электронной почте

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

email_to=xxx@yyyy.ru

email_from=qqq@wwww.ru

Сообщение=Привет

Отправить=0тправить

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

значения false (как в нашем примере). Тогда отменяется стандартная реакция на событие, в данном случае — реакция на событие onsubmit (отправка сообщения). Второй способ заключается в присвоении свойству action пустого значения. В нашем примере значение action пусто по умолчанию, поэтому выражение event.returnValue = false является излишним, но зато делает код сценария более понятным. В контексте нашего HTML-кода сценарий мог бы выглядеть и следующим образом:

<SCRIPT>

function myform.onsubmit() {

var noemail = myform.email_to.value.indexOf(')== -

var notext = Imyform .Сообщение .value var xtext = "ХпПисьмо не отправлено" if (noemai1 | | notext) { if (noemail)

alert("Неправильный адрес получателя" + xtext) else

alertC'HeT текста сообщения" + xtext)

} else

myform. action = "mailto:" + myf orm. emai l_to. value // значение ACTION

} /SCRIPT>

На веб-страницах нередко размещают ссылку или кнопку, открывающую форму отправки сообщения по электронной почте автору страницы (рис. 4.20). В этом случае не нужно вводить почтовый адрес получателя. Очевидно, что этот адрес уже присвоен в качестве значения атрибуту ACTION в теге <FORM>. Если вы хотите затруднить его выявление отправителем сообщения или, что важнее, различными программами-роботами, сканирующими веб-страницы с целью выявления адресов электронной почты, то следует предпринять некоторые меры. Самый простой рецепт — хранить отдельные компоненты адреса в различных переменных и собирать их с помощью выражения конкатенации (склейки), которое присваивается свойству action. В результате программа-робот не найдет в HTML-доку-

Рис. 4.20. Форма отправки сообщения по электронной почте автору веб-страницы

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

<HTML>

<FORM ID = "myform" METHOD=POST ACTION=" " ENCTYPE="text/plain" style="background:'e0e0eO'">

<Н2>Отправка почты автору</Н2>

От кого:

<INPUT NAME="email from" TYPE = "text" VALUE = "">

<P>

Сообщение:<BR>

<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = "• M></TEXTAREA>

<P>

! Кнопка типа Submit >

<INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить">

</FORM>

<SCRIPT>

var first = "mumu" , second = "gerasim"

function myform.onsubmit(){

if (Imyform.Сообщение.value){ event.returnValue = false// отменить отправку

alert("HeT текста сообщения ХпПисьмо не отправлено")

) else

myform.action = "mailto:" + first + '速" + second + ".ru"

// значение ACTION

I

</SCRIPT>

</HTML>

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

<HTML>

<FORM ID = "myform" METHOD = POST ACTION=" “ ENCTYPE«-text/plainH

onsubmit = "return validatorO" style ="background:'eOeOeO'">

<Н2>Отправка почты автору</Н2>

От кого:

<INPUT NAME="email_from" TYPE = "text " VALUE = "">.

<P>

Сообщение:<BR>

<TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = " "></TEXTAREA>

<P>

! Кнопка типа Submit >

<INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить">

</FORM>

<SCRIPT>

var first = "mumu", second = "gerasim"

function validatort(){

if (Imyform.Сообщение.value){

alert("HeT текста сообщения ЛпПисыио не отправлено") return false// отменить отправку

} else myform.action ="+first+"@"+ second + ".ru"

// значение ACTION

return = true// разрешить отправку

}

</SCRIPT>

</HTML>

В этом примерефунцияvalidatorQ является обработчиком события onsubmit и возвращает либо true, либо false в зависимости от того, можно отправлять данные или нет. В теге <FORM> к событию onsubmit привязывается выражение return validator(), что эквивалентно присвоению значения свойству event.returnValue в теле функции-обработчика события.

Меню

Раскрывающийся список

Простейшее меню можно создать с помощью тегов <SELECT> и <OPTION>. Обычно такие конструкции называют раскрывающимися списками. Ниже приводится простейший пример использования раскрывающегося списка (рис. 4.21). В этом примере раскрывающийся список задается HTML-кодом, а обработка выбора из этого списка — сценарием. Задача сценария заключается просто в обработке номера выбранного элемента из списка. В примере это вывод окна с соответствующим сообщением. Выбор пользователя из раскрывающегося списка производится щелчком левой кнопкой мыши на элементе списка. При этом свойство selectedlndex объекта элемента документа, соответствующего тегу <SELECT>, приобретает в качестве своего значения номер выбранного элемента списка (нумерация начинается с 0). Для инициации обработки выбора пользователя здесь служит событие onchange (произошло изменение в выделении элемента списка). Обработка этого события осуществляется функцией myselectionQ. Начальное выделение и отображение элемента в раскрывающемся списке задается атрибутом SELECTED тега <OPTION>. В рассматриваемом примере в списке виден элемент «Физика».

Рис. 4.21. Раскрывающийся списокРис. 4.21. Раскрывающийся список%ОЛКнига JavaSciipt\prоЬа\раскр_ список.Ыт - Microsoft Internet Exploiei

Рис. 4.21. Раскрывающийся список

Рис. 4.21. Раскрывающийся список

<HTML>

Выберите экзамен, который хотите сдать:

<5ELECT NAME="TEST" onchange ='•myselection (〉“>

<ОРТЮМ>Математика

<OPTION SELECTED>4>M3MKa

<ОРТЮМ>Биология

<ОРТЮМ>Химия

</SELECT>

<SCRIPT>

function myselection() {

var testname, testnumber;

testnumber = document.all .TEST.selectedlndex

if (testnumber == 0)

testname="MaT . анализ"

else{

if (testnumber == 1)

testname="KBaHTOBaa физика^

else{

if (testnumber == 2) testname="Биология"

else

testname = "Органическая химия"

}

alertC'Bbi будете сдавать: "testname)

:»

</SCRIPT>

</HTML>

По умолчанию в раскрывающемся списке виден только один элемент. Чтобы раскрывающийся список сразу был приоткрытым (показывал несколько элементов), следует в теге <SELECT> указать атрибут SIZE = количество_видимых_элементов (рис. 4.22).

XiXi•• З ОЛКнигаJavaSciipt\proba\pacKp_cnMCOK.htm - Microsoft Internet Exploi :I

Xi

Xi

(файл Правка Вид Избранное Сервис Справка

Рис. 4.22. Раскрывающийся список, в котором видны сразу три элементаРис. 4.22. Раскрывающийся список, в котором видны сразу три элементаQ，◎ JI G 0 虫 @0 E;'Q，◎ JI G 0 虫 @0 E;'Пользуясь регулярностью HTML-кода, задающего раскрывающийся список, нетрудно сгенерировать его с помощью сценария (листинг 4.17).Пользуясь регулярностью HTML-кода, задающего раскрывающийся список, нетрудно сгенерировать его с помощью сценария (листинг 4.17).Листинг 4.17. Код сценария раскрывающегося спискаЛистинг 4.17. Код сценария раскрывающегося списка<HTML>Выберите экзамен, который хотите<SCRIPT><HTML>Выберите экзамен, который хотите<SCRIPT>сдать:сдать:var N_sel =11var aoptions= new ArrayO aoptions[0] = "Математика" aoptions[l] = "Физика"var N_sel =11var aoptions= new ArrayO aoptions[0] = "Математика" aoptions[l] = "Физика"////////номер элемента, выбранного по умолчанию массив элементов списканомер элемента, выбранного по умолчанию массив элементов спискапродолжение •&продолжение •&

Рис. 4.22. Раскрывающийся список, в котором видны сразу три элемента

Рис. 4.22. Раскрывающийся список, в котором видны сразу три элемента

Q，◎ JI G 0 虫 @0 E;'

Q，◎ JI G 0 虫 @0 E;'

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

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

Листинг 4.17. Код сценария раскрывающегося списка

Листинг 4.17. Код сценария раскрывающегося списка

<HTML>

Выберите экзамен, который хотите

<SCRIPT>

<HTML>

Выберите экзамен, который хотите

<SCRIPT>

сдать:

сдать:

var N_sel =11

var aoptions= new ArrayO aoptions[0] = "Математика" aoptions[l] = "Физика"

var N_sel =11

var aoptions= new ArrayO aoptions[0] = "Математика" aoptions[l] = "Физика"

////

////

номер элемента, выбранного по умолчанию массив элементов списка

номер элемента, выбранного по умолчанию массив элементов списка

продолжение •&

продолжение •&

Листинг 4.17 (продолжение)

aoptions[2] = "Биология"

aoptions[3] = "Химия"

/* Строка, содержащая теги, формирующие раскрывающийся список

xstr=' <SELECT ID ="TEST" onchange = "myselection() "> '

for (i = 0; i <aoptions . length; i++){

xprefix =(i == N_sel)? 'SELECTED=' +N_sel:"

xstr+='<OPTION '+ xprefix +'>' + aoptions[i]

}

xstr+= '</SELECT>'

запись в документ

function myselectionQ { var testname, testnumber;

testnumber = document . all.TEST.selectedlndex

if (testnumber == 0)

testname="MaT. анализ"

else{

if (testnumber == 1)

testname = "Квантовая физика" else{

i f (testnumber == 2)

testname = "Биология"

else

testname = "Органическая химия"

}•

}

alert("Bbi будете сдавать:testname)

</SCRIPT>

</HTML>

Настоящее меню

Меню, создание которого мы сейчас рассмотрим, состоит из главного горизонтального меню и нескольких вертикальных подменю (рис. 4.23). Мне ли вам объяснять, что такое меню? Подменю раскрываются при наведении указателя мыши на опции главного мелю. Не обязательно, чтобы каждой опции главного меню соот-

Шг- ЧМои flon4MeHTbi\JS\menu.hhn - Miciosnlt Internet Exploiei囂叵1 密

EMC Qpexa Hm H*p&we Cjp»k Справка

>.-»• ~?'」0-[13 3 !;<£| Ш Ф -Й • • J "一 ШЛ14;::::I>вШй1|

1(Меню 2

«да.

ЦЙСШО 1.2

•;•

Рис. 4.23. Внешний вид менюРис. 4.23. Внешний вид меню

Рис. 4.23. Внешний вид меню

Рис. 4.23. Внешний вид меню

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

Код сценария, реализующего такое меню, мы сделаем возможно более универсальным и оформим в виде двух файлов с расширением js. Первый файл, menu_prm.js, будет содержать параметры меню (листинг 4.18). При создании приложений его содержимое можно изменять в зависимости от конкретных задач. Например, в этом файле определяются конкретные названия опций и действия для них, цвет и другие параметры. Таким образом, это — переменная (настраиваемая) часть описания меню. Второй файл, menu_bld.js, будет содержать описание механизма построения и функционирования меню (листинг 4.19). В нем используются параметры, определенные в первом файле. Это постоянная часть описания меню. Разумеется, вы можете скорректировать содержимое этого файла по своему усмотрению.

Чтобы создать меню, в HTML-документе следует просто записать следующие строки:

<SCRIPT SRC = "menu_prm.js"x/SCRIPT>

<SCRIPT SRC = "menu_bld.js"x/SCRIPT >

<SCRIPT >buildMenu()</SCRIPT >

Здесь buildMenu() — функция, определение которой дано в файле menu_bld.js. Она выводит на экран меню в соответствии с параметрами, заданными в файле menu_prm.js.

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

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

Во втором файле определен ряд функций, с помощью которых меню развертывается и функционирует. Отображение меню происходит на основе использования HTML-тегов, определяющих таблицы. Фрагменты HTML-кода, из которых складываются генерируемые строки HTML-документа, определены в виде элементов массива. Позиционирование меню производится с помощью параметров top и left таблицы стилей, которая также генерируется сценарием. Среди множества функций, определенных в этом файле, имеется главная — buildMenu(). Вызов ее в сценарии, расположенном в HTML-документе, выводит меню в окно браузера вместе с другими элементами этого документа.

Листинг 4.18. Код файла menu_prm.js

/* Параметры меню */

// Цвета:

var clBorder = 'blue'// цвет рамкил.

продолжение &

var

clBglnact

= "#83d6f5"

//

цвет

фона

var

clBgAct =

'#d6f4fe'

//

цвет

подсветки фона опции

va r

i-lCn lnact

= 'blue'

//

цвет

надписи обычной

var

clFnAct =

'black'

//

цвет

надписи при подсветке опции

Листинг 4.18 (продолжение)

// Шрифт (параметры стиля) var cFontSize = •18*

var cFontFamily = 'times'

// размер шрифта

/* семейство шрифтов ('arial', 'courire', 'times' и т. п.)*/

// Другие параметры:

var closeTimeout = 500 var selfPos = false

// время задержки свертывания подменю, мс

/* автоматическое позиционирование опций меню и подменю (если true, то задаются координаты только первого меню) */

// Собственно меню:

var menu = new ArrayO menu[0]= new ArrayO

/* Параметры главного меню:

название опции;

URL-адрес ' или строка с кодом JavaScript, начинающаяся с j avascript: '

статусная строка;

left (х-координата главного мен1Ю): top (у-координата главного меню) ; width (ширина главного меню left(х-координата подменю)

top (у-координата подменю) width (ширина подменю).

menu[0][0] = new АггауС'Меню 1","", Выберите что-нибудь из подменю",50,

10, 80, 50,1 20, 120)

menu[0][l] = new Array("Подменю 1.1 , "javascript:history.go(-1)",

"Назад")

meinu[0] [2] = new Аггау (**Подме1ю 1.2 , "http://www.yandex.ru", "Яндекс")

menu[0] [3 | = new Array("Подменю 1.3 , "javascript:

alert('Привет!')","Окно с приветствием")

menu[l]= new ArrayO

menu[l][0] = new АггауС'Меню 2130,

menu[l][l] = new Array ("Подменю 2.1

menu[l][2] = new Array("Подменю 2.2X II li 3 ") menu[2]= new ArrayO

10, 80, 130, 120, 0)

menu[2][0]= new АггауС'Меню 3" http://www.chat.ru", "CHAT.RU", 210,

10, 80, 0, 0, 0)

Листинг 4.19. Код файла menu_bld.js

var ie = document. all ? true : falseесть ли что-нибудь в документе?

var overBox =

var timerlD

// Заготовки элементов HTML-кода

var barHtml = new ArrayO

barHtml[0] = ' <DIV ID="divbarpos '

barHtml[1] = ' " STYLE="position:absolute;left:

barHtml[2] = 'px; top: '

barHtml[3] = 'px; " onmouseover="openbox('

barHtml[4] = ') " onmouseout="closebox ('

barHtml[5] = ') "onclick="clickbox('

barHtml[6] = ' )"><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR="'

barHtml[7] = '"><TABLE CELLPADDING="0" CELLSPACING="1" BORDER = "0">

<TR><TD CLASS = "mnubarpos" ID = "mnubarpos'

barHtml[8] = "' WIDTH="'

barHtml[9] = '" BGCOLOR="'

barHtml[10] = "' STYLE="color:'

barHtml[11] = ' ;font-size:'+cFontSize+';font-family:'+cFontFamily+';"〉

barHtml[12] = '</TD></TR></TABLE></TD></TR></TABLE></DIV>'

van boxHtml = new ArrayO

boxHtml[0]= '<DIV ID="divbox'

boxHtml[l] = '" STYLE="position:absolute;visibility:hidden;left: '

boxHtml[2] = 'px;top:'

boxHtml[3] = 'px; font-family:'+cFontFami ly+'" onmouseout="closebox (' boxHtml[4] = ') "><TABLE CELLPADDING=0 CELLSPACING=0><TR><TD BGCOLOR = boxHtml[5] = '"xTABLECLASS="mnubox" ID="mnubox'

boxHtml[6] = ' " CELLPADDING="0" CELLSPACING="1" BORDER="0" >'

boxHtml[7] = '<SPAN ID="divboxpos'

boxHtml[8] = '" onmouseover="openboxpos('

boxHtml[9] = ') "onmouseout="closeboxpos('

boxHtml[10] = ') " onclick="clickboxpos('

boxHtml[ll] = ') "><TR><TD CLASS = "mnuboxpos" ID="mnuboxpos'

boxHtml[12] = '" WIDTH="'

boxHtml[13] = ' " BGCOLOR="'

boxHtml[14] = '" STYLE="color:'

boxHtml[15] = ';font-size:'+cFontSize+'">'

boxHtml[16] = 1</TD></TRx/SPAN>1

boxHtml[17] = '</TABLE></TD></TR></TABLE></DIV>'

function buildMenuO {// построение меню (главная функция)

if (ie) {

buildMenuBarO;

buildSubMenuO ;

if (selfPos) PosMenuO;

ResizeSubMenuO ;

function buildMenuBarO {// построение горизонтального меню

for (i =0; i < menu. length; i++){

var s = barHtml[0] + i + barHtml[l] + menu[i][0][3] + barHtml[2] + menu[i] [0] [4] +• bar Html [3] + i + bar Html [4] + i + barHtml [5] + i + barHtml[6] + clBorder +barHtml[7] + i + barHtml[8] + menu[i] [0][5] + barHtml[9] + clBglnact + barHtml[10] + clFnlnact + barHtml[ll] + menufi][0] [0] + barHtml[12];

function buildSubMenuO {function buildSubMenuO {// построение подменю// построение подменюdocument.writeln(s);

function buildSubMenuO {

function buildSubMenuO {

// построение подменю

// построение подменю

for (i =0; i < menu.length; i++){ if (menu[1].length > 1) { var s = boxHtml[0] + i + boxHtmltl] + menu[i][0][6] + boxHtml[2] + menu[i][0][7] + boxHtml[3] + i + boxHtml[4] + clBorder + boxHtml[5] + i + boxHtml[6]

for (j =1; ]< menu [i]. length; j++) { var si = i + • • + i

var s2 = i + ' j + J

Листинг 4.19 (продолжение)

s += boxHtml[7] + s2 + boxHtml[8] + si + boxHtml[9] + si +

boxHtml [10] + si + boxHtml [ll] + s2 + boxHtml [12] ••menu[i] [Э] [8]

boxHtml[13] + clBglnact + boxHtml[14] + clFnlnact • boxHtml [15] +

menu[i][j][0] + boxHtml[16]

s += boxHtml[17]

document.wri teln(s)

function PosMenuO {

for (1=0; i < menu.length; i++) {

barCurr = document.all['divbarpos' + 1]

if (i > 0) {

barPrev = document.all['divbarpos' + (i - 1)]

barCurr.style.left = barPrev .offsetLeft +

barPrev.offsetWidth - 1

\

if (menu [i] . length > 1) {

boxCurr = document.all['divbox' + i]

boxCurr. style.pl xelTop = bariCurr.offsetTop +

barCurr.offsetHeight - 1

boxCurr. style.pixelLeft = barCurr .offsetLeft

function ResizeSubMenu() {

for (i =0; i < menu.length; i++) {

if (menu[i] .length > 1 && menu [i ] [0] [8] <= 0) {

el = document.all['mnubox' + i]

w = document.all['divbarpos' + i].offsetWidth if (el.offsetWidth < w) el.style.width = w

}

\

function openbox(x) {

paintLayer('mnubarpos' + x, active = true)

showLayer(*divbox' + x)

for(i=0; i < menu.length;i++)if(i!=x)closebox(i,0)

overBox = 'divbox' + x

window.status = menu[x][0][2]

)

function closebox(x, timeout) {

paintLayer ('mnubarpos ' + x, active = false)

clearTimeout (timerID)

if (timeout == 0) hideLayer( ( 'divbox' + x)

else timerlD = setTimeout ('hideLayer ("divbox' + x + '") ' , closeTimeout)

overBox = ' '

window. status = defaultStatus

function clickbox(x)

clickMenu(menu[x] [©][!])

function openboxpos(x , у) {

paintLayer ('mnuboxpos' + x + '_' + у, active = true) overBox = 'divbox' + x

window.status = menu[x][y][2]

}

function closeboxpos(x, y) {

window.status = defaultStatus

paintLayer( 'mnuboxpos' + x + '_' + y, active = false) )

function clickboxpos(x, y) {

clickMenu(menu[x][y][1])

}

function clickMenu(s) {

if(s.indexOf('javascript: ') ==0) eval(s); else if (s != '') window.location.href = s;

>

function paintLayer(layerID , active) {

if (layer = document.all[layerlD]) {

if (active) { clBg = clBgAct; clFn = clFnAct }

else { clBg = clBglnact; clFn = clFnlnact }

layer.style.backgroundColor = clBg

layer. style.color = clFn

function showLayer (layerlD) {

if (layer = document.all[layerlD]) layer.style.visibility = 'visible }

function hideLayer(layerlD) {

if (layer = document. all [layerlD] && (overBox != layerlD)) document.all[layerlD].style.visibility = 'hidden'

}

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

Поиск в текстовой области

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

Рис. 4.24. Меню можно представить в виде пространственно разнесенных частей

Для решения задачи поиска в тексте используется объект TextRange. Этот объект просто обеспечивает доступ к текстовой информации, находящейся в объектах, которые соответствуют тегам <BODY>, <TEXTAREA>, <BUTTON> и <INPUTTYPE = "text">.

В рассматриваемом ниже примере организуется поиск в тексте, находящемся в теле HTML-документа, то есть в контейнерном теге <BODY>. В этот же контейнер мы помещаем поле ввода поискового образа и кнопку для инициации поиска. Сценарий содержит описание функции myfindQ, вызываемой при щелчке на кнопке. Функция myfind() с помощью метода createTextRangeQ создает текстовую область. Это не копия текста, содержащегося в теле документа, а просто ссылка на него. Далее с помощью метода findTextQ производится поиск в текстовой области строки символов, которую ввел пользователь в поле с именем WORD. Наконец, с помощью метода scrollIntoViewQ содержимое окна прокручивается так, чтобы найденная строка символов оказалась видимой. С помощью метода selectQ найденная строка в тексте выделяется цветом (подсвечивается).

<HTML>

<BODY>

<INPUT TYPE = "text" NAME = "WORD" VALUE = "" SIZE = 20 >

<BUTTON onclick = "myfind()">noncK</'BUTTON>

<p>

<! Здесь расположен текст, в котором производится поиск >

</BODY>

<SCRIPT>

function myfind() {

ob] = document.body.createTextRange()// создаем текстовую область

obj.findText(WORD.value)II производим поиск

obj.scrollIntoViewO/* прокручиваем текстовую

область в окне */.

obj. select()выделяем найденное

</SCRIPT>

</HTML>

Если поиск неудачен (поисковый образ, введенный в поле ввода, не найден), то ничего не произойдет. А что будет, если пользователь нажал кнопку Поиск, когда ничего не было введено? Появится сообщение об ошибке. Чтобы исключить подобную неприятность, потребуется несколько изменить код программы. А именно следует проверить, не является ли введенный поисковый образ пустым. Ниже приведен вариант кода функции:

function myfind(){

if (IWORD.value) return// если поисковый образ пуст, выходим

obj = document. body .createTextRangeO

obj .findText (WORD. value)

obj.scroll I ntoViewO obj .select()

}

Теперь рассмотрим вариант, при котором на странице помимо текста присутствует только кнопка Поиск. Щелчок на этой кнопке должен привести к появлению формы, в которую пользователь должен ввести поисковый образ. Если этот поисковый образ окажется непустым, то запускается процедура поиска, в противном случае ничего не произойдет. В теле функции поиска использован стандартный метод promptQ, который принимает в качестве параметров пояснительный текст и начальное значение поискового образа (в данном случае — пустую строку) и предоставляет поле для ввода значения. В окне есть две кнопки — ОК и Отмена. Метод promptQ возвращает введенное пользователем значение либо false, если пользователь щелкнул на кнопке Отмена. Ниже приводится описание функции: function myfind(){

WORD = prompt("Введите, что найти: ","") if (IWORD) return// если поисковый образ пуст, выходим

obj =document. body. с • eateTextRangeO obj .findText(WORD) obj .scrollIntoViewO obj .select ()

1

В качестве упражнения измените рассмотренные выше функции поиска таким образом, чтобы в случае неудачного поиска в тексте на экране появилось сообщение «Не удалось найти». Для вывода сообщения воспользуйтесь стандартным методом alert().

Ниже приводится пример организации поиска не в теле документа, а в текстовой области, заданной тегом <TEXTAREA>. Напомним, что внешне элемент <TEXTAREA> выглядит как прокручиваемое поле ввода. Если информация о теле документа (о содержимом контейнерного тега <BODY>) хранится в объекте body, то в случае элементов <TEXTAREA>, <BUTTON> и <INNPUT> необходимо обращаться к ним по значению атрибута ID или NAME.

<HTML>

<INPUT TYPE = "text" NAME = "WORD" VALUE = "" SIZE = 20 >

<BUTTON onclick = "myfind()">Поиск</ВиТТОМ> <P>

<TEXTAREA ID = "mytext">

<! Здесь расположен текст, в котором производится поиск >

</TEXTAREA>

<SCRIPT>

function myfi nd() {

if (IWORD.value) return/* если поисковый образ

пуст, выходим */

obj = document. all .mytext.createTextRangeO /* создаем текстовую область */

// производим поиск

obj . scrollIntoViewO/* прокручиваем текстовую

область в окне */

// выделяем найденное i

1

</SCRIPT>

</HTML>

Таблицы и простые базы данных

Таблицы являются, пожалуй, наиболее часто используемыми элементами в вебдизайне. Это обусловлено простотой и удобством компоновки документа с помощью тегов таблицы, таких как <TABLE>, <TR>, <TD> и др. Вы разбиваете все пространство окна на прямоугольные ячейки с видимыми или невидимыми границами и размещаете в них элементы документа (изображения, тексты, ссылки, кнопки, другие таблицы и т. п.). Таким образом, таблицы выполняют роль каркаса документа. До появления CSS они оставались единственным средством точного позиционирования элементов, но и сейчас широко используются как мощный инструмент для понятной организации и эффектного представления информации.

Доступ к элементам таблицы

Таблица как объект документа имеет две коллекции, посредством которых осуществляется доступ к ее содержимому. Первая из них — коллекция строк rows, а вторая — коллекция ячеек cells. Коллекция rows содержит все строки таблицы, включая разделы, соответствующие тегам <THEAD> и <TFOOT>. Коллекция cells содержит все элементы таблицы, созданные с помощью тегов < Т Н> и <TD>. Доступ к элементам коллекций осуществляется либо по индексу, либо по значению атрибута ID в соответствующем теге. Так, для доступа к строке таблицы можно использовать значение ID в теге <TR>, а для доступа к ячейке — значение ID в теге -ТН> или <TD>. При использовании индекса (номера) следует иметь в виду, что нумерация начинается с 0. При этом ячейки таблицы нумеруются слева направо и сверху вниз.

Рассмотрим пример простой таблицы, содержащей три столбца и четыре строки (рис. 4.25):

<HTML>

<TABLE ID = "mytab">

<ТНЕАО>Моя таблица</ТНЕАО>

<ТН>Фамилия</ТН><ТН>Имя</ТН><ТН>Должность</ТН>

<TR ID="rl">

<TD>HBaHOB</TD><TD>MBaH</TD><TD>£HpeKTop</TD>

</TR>

<TR ID="r2">

<ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</TD></TR><TR ID="r3"><TD>CMflopoBa</TD><TD>3nno4Ka</TD><TD>CeKpeTapma</TD></TR><TR ID="r4"><ТО>Федоров</ТО><ТО>Федор</ТО><ТО>Водитель</ТО></TR></TABLE></HTML><ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</TD></TR><TR ID="r3"><TD>CMflopoBa</TD><TD>3nno4Ka</TD><TD>CeKpeTapma</TD></TR><TR ID="r4"><ТО>Федоров</ТО><ТО>Федор</ТО><ТО>Водитель</ТО></TR></TABLE></HTML>а СЛМои noK4MenTb.VJS\TABLE HTM Microsoft jntemet, HIа СЛМои noK4MenTb.VJS\TABLE HTM Microsoft jntemet, HIКЗ Еид Избранное Сорайе £лрзвк*КЗ Еид Избранное Сорайе £лрзвк*而п而пМоя таблицаМоя таблица国 d aqjo »;Сс国 d aqjo »;СсДолжностьДолжностьРис. 4.25. Пример таблицыРис. 4.25. Пример таблицыФамилияИвановПетровФамилияИвановПетровИмяИван ПетрИмяИван ПетрСидорова Эллочка СекретаршаФедоров Федор ВодительСидорова Эллочка СекретаршаФедоров Федор ВодительДиректорЗаместитель директораДиректорЗаместитель директораНиже приведено несколько примеров ссылок на элементы таблицы из сценария:Ниже приведено несколько примеров ссылок на элементы таблицы из сценария:document.all.mytab.rows[0]document.all.mytab.rows[1] document.all.mytab.rows["rl" ]document.all.mytab.rows[0]document.all.mytab.rows[1] document.all.mytab.rows["rl" ]// ссылка на строку заголовков столбцов// ссылка на первую строку данных/* другой способ ссылки на первую строку данных */// ссылка на строку заголовков столбцов// ссылка на первую строку данных/* другой способ ссылки на первую строку данных */document.all.mytab.cells[0]document.all.mytab.cells[3] document.all.mytab.cells[4] document.all.mytab.cells[б]document.all.mytab.cells[0]document.all.mytab.cells[3] document.all.mytab.cells[4] document.all.mytab.cells[б]/* ссылка на "Фамилия"// ссылка на // ссылка на // ссылка на/* ссылка на "Фамилия"// ссылка на // ссылка на // ссылка наячейку, содержащую*/ячейку, содержащую "Иванов" ячейку, содержащую "Иван" ячейку, содержащую "Петров"ячейку, содержащую*/ячейку, содержащую "Иванов" ячейку, содержащую "Иван" ячейку, содержащую "Петров"

<ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</TD>

</TR>

<TR ID="r3">

<TD>CMflopoBa</TD><TD>3nno4Ka</TD><TD>CeKpeTapma</TD>

</TR>

<TR ID="r4">

<ТО>Федоров</ТО><ТО>Федор</ТО><ТО>Водитель</ТО>

</TR>

</TABLE>

</HTML>

<ТО>Петров</ТО><ТО>Петр</ТО><ТО>Заместитель директора</TD>

</TR>

<TR ID="r3">

<TD>CMflopoBa</TD><TD>3nno4Ka</TD><TD>CeKpeTapma</TD>

</TR>

<TR ID="r4">

<ТО>Федоров</ТО><ТО>Федор</ТО><ТО>Водитель</ТО>

</TR>

</TABLE>

</HTML>

а СЛМои noK4MenTb.VJS\TABLE HTM Microsoft jntemet, HI

а СЛМои noK4MenTb.VJS\TABLE HTM Microsoft jntemet, HI

КЗ Еид Избранное Сорайе £лрзвк*

КЗ Еид Избранное Сорайе £лрзвк*

而п

而п

Моя таблица

Моя таблица

国 d aqjo »;Сс

国 d aqjo »;Сс

Должность

Должность

Рис. 4.25. Пример таблицы

Рис. 4.25. Пример таблицы

Фамилия

Иванов

Петров

Фамилия

Иванов

Петров

Имя

Иван Петр

Имя

Иван Петр

Сидорова Эллочка Секретарша

Федоров Федор Водитель

Сидорова Эллочка Секретарша

Федоров Федор Водитель

Директор

Заместитель директора

Директор

Заместитель директора

Ниже приведено несколько примеров ссылок на элементы таблицы из сценария:

Ниже приведено несколько примеров ссылок на элементы таблицы из сценария:

document.all.mytab.rows[0]

document.all.mytab.rows[1] document.all.mytab.rows["rl" ]

document.all.mytab.rows[0]

document.all.mytab.rows[1] document.all.mytab.rows["rl" ]

// ссылка на строку заголовков столбцов

// ссылка на первую строку данных

/* другой способ ссылки на первую строку данных */

// ссылка на строку заголовков столбцов

// ссылка на первую строку данных

/* другой способ ссылки на первую строку данных */

document.all.mytab.cells[0]

document.all.mytab.cells[3] document.all.mytab.cells[4] document.all.mytab.cells[б]

document.all.mytab.cells[0]

document.all.mytab.cells[3] document.all.mytab.cells[4] document.all.mytab.cells[б]

/* ссылка на "Фамилия"

// ссылка на // ссылка на // ссылка на

/* ссылка на "Фамилия"

// ссылка на // ссылка на // ссылка на

ячейку, содержащую

*/

ячейку, содержащую "Иванов" ячейку, содержащую "Иван" ячейку, содержащую "Петров"

ячейку, содержащую

*/

ячейку, содержащую "Иванов" ячейку, содержащую "Иван" ячейку, содержащую "Петров"

Чтобы обратиться к строке или ячейке таблицз, следует учесть иерархию объектов: сначала мы обращаемся к коллекции all всех элементов документа, затем к таблице и только после этого — к элементу таблицы. Обратите внимание, что эти ссылочные выражения возвращают не содержимое элементов таблицы (строк или ячеек), а лишь ссылки на элементы как на объекты.

Каждая строка таблицы (элемент коллекции rows), являясь объектом, имеет свою собственную коллекцию ячеек, которая называется cells, так же как и коллекция всех ячеек таблицы. Однако нумерация ячеек в этой коллекции происходит в пределах одной строки начиная с 0. Например, в случае трехстолбцовой таблицы ячейки из коллекции cells для одной строки имеют индексы 0,1и 2.

Примеры

/* ссылка на ячейку, содержащую "Фамилия" */ /* ссылка на ячейку, содержащую "Иванов" */ ссылка на ячейку, содержащую "Иван"*/ /* ссылка на ячейку, содержащую "Петров" */ /* ссылка на ямейку.содержащую "Петр" *//* ссылка на ячейку, содержащую "Фамилия" */ /* ссылка на ячейку, содержащую "Иванов" */ ссылка на ячейку, содержащую "Иван"*/ /* ссылка на ячейку, содержащую "Петров" */ /* ссылка на ямейку.содержащую "Петр" */document. all .mytab. rows[0].cells[0]

/* ссылка на ячейку, содержащую "Фамилия" */ /* ссылка на ячейку, содержащую "Иванов" */ ссылка на ячейку, содержащую "Иван"*/ /* ссылка на ячейку, содержащую "Петров" */ /* ссылка на ямейку.

содержащую "Петр" */

/* ссылка на ячейку, содержащую "Фамилия" */ /* ссылка на ячейку, содержащую "Иванов" */ ссылка на ячейку, содержащую "Иван"*/ /* ссылка на ячейку, содержащую "Петров" */ /* ссылка на ямейку.

содержащую "Петр" */

document. all .mytab. rows [1] . cells[0]

document . all .mytab rows[1]. cells [l]./*

documeint. all .mytab . rows [2] . cells[0]

document. all ,mytabrows["r rows 【"「 2"] .cells fl]

Выше мы рассмотрели создание ссылок на элементы таблицы. Эти ссылки применяются для чтения и изменения содержимого таблицы. В IE4+ для этой цели можно использовать свойства innerText и innerHTML С помощью свойства innerText читается и изменяется обычное текстовое содержимое ячеек. В случае когда в ячейке находится HTML-код, для его изменения необходимо аналогичным образом воспользоваться свойством innerHTML. Впрочем, если содержимое ячейки является обычным текстом, то вполне можно использовать и innerHTML. Таким образом, свойство innerHTML универсальнее, чем innerText. Если таблица выводится в окно браузера (то есть видима), изменение содержимого ее ячеек отобразится автоматически.

documeint. all .mytab. rows[1] . innerText// ИвановИванДиректор

document.all.mytab.cells(3].innerText// Иванов

document.all.mytab.rows[1].cells(2].innerText// Директор

/* Изменяем текстовое содержимое ячейки: */

document.all.mytab.rows[I].cells[2].innerText = "Сторож"

/* Заменяем текстовое содержимое ячейки на изображение: */

document.all.mytab.rows[1].cells[2].innerHTML = "<IMG SRC='pict.jpg'>"

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

document.all.mytab.rows[индекс].1nn<erText = новое_значение

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

Коллекции строк и ячеек, как и любой массив, обладает свойством length, значением которого является количество элементов в коллекции.

Примеры

document.all.mytab.rows.length// количество всех строк

document.all.mytab.cells.length// количество всех ячеек

documeint.all.mytab.rows[2].cells.length /* количество ячеек в

строке с индексом 2 */

Добавление и удаление строк таблицы

Добавление новой строки в таблицу производится с помощью метода insertRowQ. Этот метод возвращает ссылку на вновь созданную строку, которая затем используется для вставки ячеек. Ячейки вставляются в строку с помощью метода insertCe 11(индекс_ячейки). Данный метод возвращает ссылку на созданную ячейку, которая затем используется для задания содержимого ячейки. Ячейки вставляются в строку по порядку без пропусков начиная с нулевой. Так, нельзя создать ячейку

с индексом 3, если ячейки с индексами 0, 1 и 2 еще не созданы. С другой стороны, вы можете последовательно создать любое количество ячеек в строке.

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

newrow = document. all .mytab. insertRowO // добавляем новую строку newcell=newrow.1nsertCelKO)// вставляем ячейку с индексом 0

newcell. 1nnerText=" Привет1'// заполняем ячейку значением

newceU=newrow. insertCeH (1)

newcell.innerHTML="<IMG SRC='pict.jpg'>"

newcell=newrow.insertCell(2)

newcell. 1ппег НТМ1="<в>Охранник</В>' >"

Для удаления строки таблицы служит метод deleteRow(MHfleKC_CTpoKM). Параметр указывает номер удаляемой строки. Например:

document.all.mytab.deleteRow(2)

Генерация таблиц с помощью сценария

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

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

<HTML>

<SCRIPT>

/* Массив заголовков столбцов */

ah = new Array ("Фамилия","Имя"ДДолжность")

/* Массив данных */

ad = new ArrayO

ad[0] = newArray( "Иванов", Иван"Иван", "Директор")

ad[l] = new Array( "Петров", Петр", "Заместитель директора")

ad[2] = new Array ("Сидорова"Эллочка" , "Эллочка", "Секретарша")

ad[3] = new Array ( "Федоров"Федор", "Федор", "Водитель")

strtab = "<TABLE>"

/* Формируем заголовки столбцов аблицы*/

for(i=0; i<ah.length; i++){

strtab+= "<TH>" + ahti] + </TH>

}

/* Формируем строки таблицы */

for(i=0; i<ad. length; i++) {

// содержимое ячеек строки// содержимое ячеек строкизапись в документзапись в документstrtab+= "<TR>"

// содержимое ячеек строки

// содержимое ячеек строки

запись в документ

запись в документ

for(sjt=rt0a;b+]'=<ad[i ].■ length i; j++){ + у TD>°

strtab+="</TR>"

I

strtab+= "</TABLE>"

document.write(strtab)

</SCRIPT>

</HTML>

Простые базы данных

Достаточно эффективный способ формирования таблиц — использование специального элемента управления ActiveX, называемого Simple Tabular Data (STD — простые табличные данные). Этот элемент вставляется в HTML-документ с помощью тега <OBJ ECT> и позволяет легко управлять данными, хранящимися в обычном текстовом файле. Вы можете изменять, добавлять, удалять, сортировать, искать и фильтровать (выбирать) данные. Но главное достоинство применения STD заключается в простоте создания больших таблиц, например каталога ссылок.

Собственно данные хранятся на диске в текстовом файле. При этом их табличная структура поддерживается с помощью символов-разделителей. В качестве разделителя строк обычно используется невидимый символ перевода строки (клавиша Enter). Однако можно задать любой символ в качестве разделителя строк. Данные различных ячеек отделяются друг от друга произвольным символом, не используемым в каких-нибудь других служебных целях (например, запятая или вертикальная черта). Если запятая встречается в значениях данных, то ее не следует выбирать в качестве разделителя. Создавать такие файлы можно вручную с помощью текстового редактора (например, Блокнота Windows). Кроме кэго, в большинстве систем работы с базами данных возможно преобразование специфических файлов в текстовые.

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

ЖтуribЫ - Блокнот№ЕЗ

史 айл 口口аека ftowiis. Справка ■

Фамилия|Имя|Должность

Иванов|Иван|Директор

Петров|Петр|Заместительдиректора

Сидорова|Эллочка|Секретарша

Федоров | Федор | [Водитель

т

Рис. 4.26. Пример текстового файла с табличными данными

Элемент ActiveX STD, управляющий данными, встроен в браузер IE4+, а чтобы вставить его в HTML-документ, необходимо использовать следующие теги:

<OBJECT ID = "mydbcontrol"

CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

<PARAM NAME = "FieldDelim" VALUE="I">

<PARAH NAME = "DataURL" VALUE = "mydb.txt">

<PARAM NAME = "UseHeader" VALUE = true>

</OBJECT>

Контейнерный тег <ОВЗЕСТ> содержит множество тегов <PARAM>, с помощью которых задаются параметры. В примере мы указали лишь некоторые из них:

FieldDelim — разделитель полей (ячеек); в примере значением этого параметра является вертикальная черта "|";

DataURL— место расположения (URL-адрес) текстового файла сданными; в примере мы указали просто имя файла mydb.txt;

UseHeader — определяет, содержит ли первая строка в текстовом файле имена полей.

Значение атрибута ID тега <OBJECT> выбирается произвольно, но оно обязательно должно быть указано. Если требуется установить символ, являющийся разделителем строк данных в текстовом файле, то следует добавить еще один параметр:

<PARAM NAME = "RowDelim" VALUE="&# ASCII-код;">

По умолчанию значением атрибута VALUE является "&#10;",то есть ASCII-код символа перевода строки.

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

Рис. 4.27. Диалоговое окно, в котором показаны параметры элемента управления STD, установленные по умолчанию

<HTML>

<OBJECT ID = "mydbcontrol"

CLASSIC ="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

</OBJECT>

<SCRIPT>

alert(mydbcontrol.tnnerHTML)

</SCRIPT>

</HTML>

Чтобы отобразить в окне браузера таблицу с данными из текстового файла mydb.txt, достаточно в том же документе записать следующий HTML-код (рис. 4.28):

<TABLE DATASRC = «mydbcon t rol BORDER = 5>

<THEAD>

<ТН>Фамилия сотрудника</ТН><ТН>Имя</ТН><ТН>Должность</ТН>

</THEAD>

<TR>

<TD><SPANDATAFLD"Фамилия"></SPAN></TD>

<TD><SPANDATAFLD"HMfl"></SPAN></TD>

<TD><SPANDATAFLD"Должность"></SPAN></TD>

</TR>

</TABLE>

• аОЛКнига JavaScript\probctVroydb.h(nt - Microsoft Inteinel Eaplmer

史 айл Правка 艮做 избранное Сервис Справка

J 4j3 ;il_jtj cf J => Jt И ' _JS "J 4j3 ;il_jtj cf J => Jt И ' _JS "Рис. 4.28. Пример таблицы, созданной с помощью элемента управления STDРис. 4.28. Пример таблицы, созданной с помощью элемента управления STD

J 4j3 ;il_jtj cf J => Jt И ' _JS "

J 4j3 ;il_jtj cf J => Jt И ' _JS "

Рис. 4.28. Пример таблицы, созданной с помощью элемента управления STD

Рис. 4.28. Пример таблицы, созданной с помощью элемента управления STD

Здесь в теге <ТАВ1Е> атрибут DATASRC в качестве значения имеет ссылку на элемент STD (значение ID в теге <OBJECT>). Внутри тегов данных <TD>, в контейнерах <SPAN>, значениями атрибутов DATAFLD являются имена полей. Написание этих имен должно в точности соответствовать указанным в первой строке текстового файла данных. Однако порядок следования и количество выводимых на экран полей может быть произвольным. Например, можно вывести не все поля или, наоборот, продублировать некоторые из них. Кроме того, можно изменить порядок отображения полей. Этот порядок, а также состав отображаемых полей (столбцов) определяется в теге <TABLE>.

ВНИМАНИЕ

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

Таким образом, при использовании STD мы организуем взаимодействие трех компонентов: элемент управления STD устанавливает связь с источником данных (текстовым файлом), элемент <TABLE> связывается с STD и источником данных, текстовый файл содержит собственно данные.

В текстовом файле с данными может содержаться не только текстовая информация, но и HTML-коды. Чтобы эти коды отображались в таблице не просто как текст, а интерпретировались, необходимо в теги <TD> добавить атрибут DATAFORMATAS - "html".

*1 САМои документbi\JS\mydb.htm - Microsoft Internet Explorer*1 САМои документbi\JS\mydb.htm - Microsoft Internet ExplorerВий ИВий ИI ' ?^ Мой компьютерI ' ?^ Мой компьютер

*1 САМои документbi\JS\mydb.htm - Microsoft Internet Explorer

*1 САМои документbi\JS\mydb.htm - Microsoft Internet Explorer

Вий И

Вий И

I ' ?^ Мой компьютер

I ' ?^ Мой компьютер

Рис. 4.29. Пример таблицы, источник данных которой содержит теги изображения <IMG>

При этом если ячейка таблицы не содержит тегов, то будет отображаться простой текст, а в противном случае — результат выполнения HTML-кода. Это позволяет, например, вставлятьвячейкитаблицыизображения, гиперссылки, кнопкиидру- гие элементы (рис. 4.29). Ниже приведен пример:

<HTML>

<OBJECT ID = "mydbcontrol"

CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

<PARAM NAME = "FieldDelim" VALUE="|">

<PARAM NAME = "DataURL" VALUE = "mydb.txt">

<PARAM NAME = "UseHeader" VALUE = true>

</OBJECT>

<TABLE DATASRC = tfmydbcontrol BORDER = 5>

<THEAD>

<ТН>Фамилия сотрудника</ТН><ТН>Имя</ТН><ТН>Фото</ТН>

</THEAD>

<TR>

<TD><SPAN DATAFLD = "Фамилия"></5РАМ>< /ТО>

<TD><SPAN DATAFLD = " Имя " >< / S PAN></TD>

<TD><SPAN DATAFLD = "Портрет" DATAFORMATAS = " t html" > </ SPAN></TD>

</TR>

</TABLE>

</HTML>

Файл с данными mydb.txt:

Фамилия|Имя|Портрет

Иванов|Иванj<IMG SRC='pictl.jpg'>

Петров | Петр | <IMG SRC=' pi c t2 .jpg'>

Сидорова|Эллочка|<IMG SRC='pict3.jpg'>

Федоров|Федор|<IMG SRC='pict4.jpg'>

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

Для установки фильтра предусмотрены следующие три параметра:

<PARAM NAME = "FiUerColumn" VALUE = "имя_поля"

<PARAM NAME = "Fi1terCriterion" VALUE = "оператор_сравнения"

<PARAM NAME = "Fi lterValue" VALUE = образец

С помощью этих параметров задается логическое условие (критерий) фильтра следующего вида:

имя_поля оператор_сравнения образец

Например, если требуется отфильтровать из таблицы все строки, в которых поле Фамилия имеет значение "Иванов", то необходимо использовать следующие теги параметров:

<PARAM NAME = "Filter-Column" VALUE = "Фамилия"

<PARAM NAME = "FiIterCriterion" VALUE = "=="

<PARAM NAME = "FilterValue" VALUE = "Иванов"

В качестве оператора сравнения можно использовать = (неточное равенство), == (точное равенство), != (неравенство), > (больше), < (меньше), >= (не больше), <= (не меньше).

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

<PARAM NAME = "FiIterCriterion" VALUE = "="

<PARAM NAME = "FilterValue" VALUE = '

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

<PARAM NAME = "CaseSensi tive" VALUE = значение>

Атрибут VALUE может принимать значения О/fatse (не зависит) или I/true (зависит).

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

<PARAM NAME = "SortColumn" VALUE = "HMfl_nona">

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

<PARAM NAME = "SortColumn" VALUE = "Фамилия">

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

<PARAM NAME="SortAscending" VALUE=0>

Атрибут VALUE=1 устанавливает режим сортировки, принятый по умолчанию.

Элемент управления STD предоставляет объект recordset, который поддерживает методы перемещения по строкам таблицы (по записям базы данных). Синтаксис следующий:

1с1_объекта. recordset ,метод

Например, mydb.recordset.moveNextQ перемещает указатель текущей записи на следующую запись.

Методы перемещения по записям базы данных:

movePreviosQ — к предыдущей записи;

moveNextQ — к следующей записи;

moveFirstQ— к первой записи;

moveLastQ — к последней записи.

Перед использованием методов moveNextQ и movePreviosQ следует проверять значения свойств eof (конец файла данных) и bof (начало файла данных). Так, если текущей является последняя строка таблицы, то нельзя использовать метод moveNextQ. Аналогично, если текущей является первая строка, то нельзя использовать movePreviosQ. Разумеется, методы перемещения используются в сценариях обработки событий, таких как, например, щелчок на кнопке. Это необходимо, если на экран выводятся не все записи (строки) таблицы, а только одна запись

ФамилияФамилияИмяИмяФотоФото司q»画司q»画ииЦ Пример Формы STO - MicrosoftInternetExplorerЦ Пример Формы STO - MicrosoftInternetExplorerРис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками для перемещения по записямРис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками для перемещения по записям[Иванов[Иванов

Фамилия

Фамилия

Имя

Имя

Фото

Фото

司q»画

司q»画

и

и

Ц Пример Формы STO - MicrosoftInternetExplorer

Ц Пример Формы STO - MicrosoftInternetExplorer

Рис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками для перемещения по записям

Рис. 4.30. Пример формы с полями ввода и просмотра данных и кнопками для перемещения по записям

[Иванов

[Иванов

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

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

<TR><TD>

<INPUT TYPE = "text" DATASRC = #mydbcontrol DATAFLD = "Фамилия">

</TD></TR>

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

Листинг 4.20. Код, выводящий одну запись базы данных с кнопками навигации

<HTML>

<HEADER><TITLE>npHMep формы STD</TITLE></HEADER>

<OBJECT ID = "mydbcontrol"

CLASSID = "CISID:333C7BC4-460F-11D0-BC04-0080C7055A83">

<PARAM NAME = "FieldDelim" VALUE = "|">

<PARAM NAME = "DataURL" VALUE = "mydb.txt">

<PARAM NAME = "UseHeader" VALUE = true>

</OBJECT>

<! Поля с данными>

<TABLE WIDTH = 75%>

<TR><TH><t>aMHnHfl</TH>

<TD>

<INPUT TYPE = "text" DATASRC = #mydbcontrol DATAFLD = "Фамилия" >

</TD></TR>

<ТИ><ТН>Имя</ТН>

<TD><INPUT TYPE = "text" DATASRC = #mydbcontrol DATAFLD="HMfl">

</TD></TR>

<ТК><ТН>Фото</ТН>

<TD><SPAN DATASRC = #mydbcontrol DATAFLD = "Портрет" DATAFORMATAS = "html"></SPAN>

</TD></TR>

</TABLE>

<P>

<! Кнопки перемещения по записям

<INPUT NAME = "cmdFirst" TYPE = "BUTTON" VALUE = "«" onclick = "FirstO">

<INPUT NAME = "cmdPrevious" TYPE="BUTTON" VALUE="<"

onclick = "PreviousO">

<INPUT NAME="cmdNext" TYPE="BUTTON" VALUE=">"

onclick = "Next()">

<INPUT NAME="cmdLast" TYPE="BUTTON" VALUE=">>" onclick = "LastO">

<SCRIPT>

// к первой записи// к первой записиfunction FirstO {

// к первой записи

// к первой записи

mydbcontrol.recordset .moveFirst()

function PreviousO {

if (! mydbcontrol.recordset.bof) mydbcontrol.recordset.movePreviousO }

// к предыдущей записи

function Next() {

if (! mydbcontrol.recordset.eof) mydbcontrol. recordset. moveNextO }

// к следующей записи

function Last() {

mydbcontrol.recordset.moveLast()

// к последней записи

}

</SCRIPT>

</HTML>

Обратите внимание, что третье поле с именем Портрет содержит изображения, и поэтому мы показываем его не с помощью элемента <INPUT>, а с помощью контейнера <SPAN> с атрибутом DATAFORMATAS = "html".

ВНИМАНИЕ -

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

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

Сортировка данных таблицы

Рассмотрим сортировку строк таблицы по значениям того или иного столбца. В нашем примере для сортировки необходимо просто щелкнуть на заголовке нужного столбца таблицы. Для этого кроме элемента управления STD и таблицы нам понадобится сценарий, содержащий функцию, обрабатывающую щелчок путем модификации тега <OBJECT> (листинг 4.21). Здесь использован следующий хитрый прием. Сначала база данных показывается без всякой сортировки. Мы сохраняем блок тегов от <OBJECT> до </ОВЗЕСТ>, за исключением последнего, в переменной obj. При щелчке на заголовке таблицы вызывается функция сортировки sort(field), которой передается имя поля. Эта функция дописывает к значению переменной obj строку, содержащую теги параметров, отвечающие за сортировку. Далее функция sort() заменяет в HTML-коде теги <ОВЖТ> на те, которые содержатся в переменной obj. Это делается с помощью свойства outerHTML При этом элемент управления STD заново инициализируется с новыми параметрами. В результате таблица перерисовывается в соответствии с новым порядком следования строк.

Листинг 4.21. Код сценария сортировки данных таблицы

<HTML>

<OBJECT ID = "mydbcontrol"

CLASSID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">

<PARAM NAME '

<PARAM NAME '

<PARAM NAME

<PARAM NAME

FieldDelim" VALUE="|">

DataURL" VALUE = "mydb.txt">

'UseHeader" VALUE = true>

"SortColumn" VALUE"Фамилия">

<PARAM NAME - 'SortAscending" VALUE = 1>

</OBJECT>

<TABLE DATASRC = tfmydbcontrol BORDER = 5>

<THEAD>

<TH onclick = "sort('Фамилия')">Фамилия сотрудника</ТН>

<TH onclick = "sort('Имя1) ">Имж/ТН>

<ТН>Фото</ТН>

</THEAD>

<TR>

<TD><SPAN DATAFLD

<TD><SPAN DATAFLD =

<TD><SPAN DATAFLD

</TR>

</TABLE>

"Фамил ия " ></ SPAN></TD>

" Имя " >< / SPAN></TD>

"Портрет" DATAFORMATAS = "html" > </SPAN></TD>

<SCRIPT>

// Сохраняем теги объекта STD в переменной

var x = document.all.mydbcontrol.innerHTML // теги, вложенные в <object>

var obj = '<OBJECT ID = "mydbcontrol" CLASSID =

"CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' + x

function sort (field) {//сортировка по значениям столбца field

var у = document.all.mydbcontrol

y.outerHTML = obj + '<PARAMNAME = "SortColumn" VALUE="' + field + "'></OBJECT>'

}

</SCRIPT>

</HTML>

В этом примере сортировать данные можно только по первым двум текстовым полям. Вы можете в качестве упражнения усовершенствовать этот код. Например, сделайте так, чтобы при двойном щелчке на заголовке столбца таблицы сортировка происходила в противоположном порядке. Для этого необходимо не устанавливать параметр <PARAM NAME="SortAscending" VALUE=0>.

Фильтрация данных таблицы

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

Имя поля выбирается из раскрывающегося списка, а значение вводится с клавиатуры. Для установки фильтра следует щелкнуть на кнопке Применить (рис. 4.31).

1 Файл1 ФайлФильтр:Фильтр:^4СЛМоияо».чмем1ыи5ЛтУ(1Ы11| htm Miciosofl Internet Exp... P^4СЛМоияо».чмем1ыи5ЛтУ(1Ы11| htm Miciosofl Internet Exp... P

1 Файл

1 Файл

Фильтр:

Фильтр:

^4СЛМоияо».чмем1ыи5ЛтУ(1Ы11| htm Miciosofl Internet Exp... P

^4СЛМоияо».чмем1ыи5ЛтУ(1Ы11| htm Miciosofl Internet Exp... P

Поле |Ф

Значение |петРов

匸旗4丽好帀

Рис. 4.31 . Пример таблицы с элементами для установки фильтраРис. 4.31 . Пример таблицы с элементами для установки фильтра

Рис. 4.31 . Пример таблицы с элементами для установки фильтра

Рис. 4.31 . Пример таблицы с элементами для установки фильтра

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

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

Листинг 4.22. Код для фильтрации данных таблицы

<HTML>

<НЗ>Фильтр:</НЗ>

Поле

<! Раскрывающийся список имен полей >

<SELECT NAME = "FL

<OPTION value = "Фамилия">Фамилия

<OPTION value = "Имя">Имя

</SELECT>

<BR>

Значение

<! Поле ввода значения для фильтра и кнопка>

<INPUT NAME = "IMP" VALUE = " TYPE = "text">

<P>

<BUTTON onclick = "fi ПегО ">Применить</В1ЛТ0М>

<HR>

продолжениепродолжение<! Элемент управления STD>

продолжение

продолжение

Листинг 4.22 (продолжение)

<0 BJECT ID = "mydbcontrol"

CLASSID = "CLSID:333C7BC4-460F- 11D0-BC04-0080C7Q55A83">

<PARAM NAME ="FieldDelim" VALUE="|">

<PARAM NAME = "DataURL" VALUE = "mydb.txt">

<PARAM NAME = "UseHeader" VALUE = true>

</OBJECT>

<! Таблица для вывода данных>

<ТаЫе e DATASRC = tfmydbcontrol border = 5>

<THEAD>

<ТН>Фамилия</ТН>

<ТН>Имж/ТН>

<ТН>Портрет</ТН>

</THEAD>

<TR>

<TD><SPAN DATAFLD = "Фамилия"></5РАМ></ТО>

<TD><SPAN DATAFLD = "Имя" ></5PAN></TD>

<TD><SPAN DATAFLD = "Портрет" DATAFORMATAS="html '•></SPAN></TD>

</TR>

</TABLE>

<SCRIPT>

/* сохраняем основные параметры элемента STD в переменной obj */

var obj = "<OBJECT ID = 'mydbcontrol'

obj+= "CLASS ID='CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>"

obj+="<PARAM NAME='FieldDelim' Value = ')'>"

obj+= "<PARAM NAME='DataURL' Value = 'mydb.txt'>"

obj+= "<PARAM NAME=' UseHeader' value = true>"

function filter(){// установка фильтра

фильтраif (INP.value){фильтраif (INP.value){////если введено значениеесли введено значениеvar cpar = '// переменная для хранения параметров

фильтра

if (INP.value){

фильтра

if (INP.value){

//

//

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

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

срэг="<рагэш пэп!в = *Fi11erColurnn 1 value = '"+FLD.value-"'>" cpar+ = "<paramname='FiIterValue'=* FilterValue' value = '"+INP.value +" ' > cpar+= "<param namname='FiIterCriterion'value = '='

cpar+="<PARAM NAME='CaseSensitive' VALUE = false>"

document.all.mydbcontrol.outerHTML = obj + cpar + "</OBJECT>"

}

</SCRIPT>

</HTML>

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

4.8.7. Поиск по сайту

Если ваш сайт содержит много страниц, то имеет смысл организовать поисковую систему. Здесь мы рассмотрим один простой вариант такой системы, использованный на моем сайте.

В основе поисковой системы положена база данных, содержащая соответствие между поисковыми образами (ключевыми словами) и ссылками на веб-страницы. Эта поисковая база данных создана в обычном текстовом файле, который в нашем примере называется search.txt. В ней всего два поля (столбца) с именами р!

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

Р1|р2

ключевые_слова|ссылки

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

Р1|р2

БД текстовая база данных 5TD Simple Tabular Data|<a href='db0.htm'>База данных (5TD)</a> Динамическая загрузка элементов|<а href 'change.htm'>Динамическая загрузка элементов</а> E-mail Email Электронная почта|<а href='mail .htm' >Электронная почта</а>

Эллиптичекая траектория орбита движение эллипс |<а href='el t ipse.htm'>Движение по эллипсу</а> Звездные войны Космос|<а href='ellipse.htm' >3вездные войны</а>

Подсветка мигание бордюр|<а href='bordur.htm'>Подсветка и мигание</а>

Поиск по сайту карта сайта map search|<a href='search. htm1>Поиск по сайту</а>

Поиск в тексте= поиск в текстовой области|<а href='findtext.htm'>Поиск в текстовой обпасит</5ласти</а> АФП AFP|«a href='afp.htm'>АФП</а> выполнение выражения eval()|<a href='eval .htm'выполнение выражения в текстовой строке</а> книги книга Сам себе web-дизайнер web-мастер|<а href='mybook.htm'>Книги</а>

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

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

В рассматриваемом примере поиск не зависит от регистра введенного поискового образа. Система просматривает значения первого поля базы данных строка за строкой, проверяя каждый раз, содержится ли введенный пользователем поисковый образ в значении первого поля. Если да, то поиск завершается; в противном случае он продолжается. Результат поиска выводится в виде ссылки на документ. Щелчок на данной ссылке выводит этот документ в окно браузера. Если поиск неудачен, то появляется соответствующее сообщение.

Интерфейс поисковой системы прост: поле ввода поискового образа и кнопка для запуска процедуры поиска. Результаты поиска отображаются ниже, под полем ввода (рис. 4.32).

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

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

B南-R\—EB南-R\—EПОИСК ПО C&UtnyПОИСК ПО C&Utnyпосевеяв|1яе!ся —шзмчнио.посевеяв|1яе!ся —шзмчнио.В я伸р. 2003г. .отмена выйти моя книга “ Web*', написанная в соавторстве с сыном Rhotoshdpl Bmh, с канированию,: офобе ннс W^j i ■—1 И(Шфм^ Если вамтонравВ я伸р. 2003г. .отмена выйти моя книга “ Web*', написанная в соавторстве с сыном Rhotoshdpl Bmh, с канированию,: офобе ннс W^j i ■—1 И(Шфм^ Если вамтонрав■•■н в основном дня поддержки млчишмощихад*е1мИШЙиеров.Здвс»ret.■■■еры исполь: <1!ШнашквгшгпМ!М1~.*йшг№.чхмт.мю." Р8... Я планирую пололияш . wmihcc■•■н в основном дня поддержки млчишмощихад*е1мИШЙиеров.Здвс»ret.■■■еры исполь: <1!ШнашквгшгпМ!М1~.*йшг№.чхмт.мю." Р8... Я планирую пололияш . wmihccрш ♦.■ Конечно, ■. .сыспе э< а лона для ■■ помощью ■■ол№аае или DrearWWoatfer) так,и содержал типичны** саШ шярероа вдпальаовано в конетрзрадаирш ♦.■ Конечно, ■. .сыспе э< а лона для ■■ помощью ■■ол№аае или DrearWWoatfer) так,и содержал типичны** саШ шярероа вдпальаовано в конетрзрадаи"Я Дунаев Вадим. Сам себе Web-дизайнер - Microsoft Internet Explorer"Я Дунаев Вадим. Сам себе Web-дизайнер - Microsoft Internet ExplorervlvlНИНИ,база данных,база данныхМ ойКОЫЫОГГврМ ойКОЫЫОГГврГчцц ИзбраниеГчцц Избрание„сьцжв " Адрес,„сьцжв " Адрес,Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автораРис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора

B南-R\—E

B南-R\—E

ПОИСК ПО C&Utny

ПОИСК ПО C&Utny

посевеяв|1яе!ся —шзмчнио.

посевеяв|1яе!ся —шзмчнио.

В я伸р. 2003г. .отмена выйти моя книга “ Web*', написанная в соавторстве с сыном Rhotoshdpl Bmh, с канированию,: офобе ннс W^j i ■—1 И(Шфм^ Если вамтонрав

В я伸р. 2003г. .отмена выйти моя книга “ Web*', написанная в соавторстве с сыном Rhotoshdpl Bmh, с канированию,: офобе ннс W^j i ■—1 И(Шфм^ Если вамтонрав

■•■н в основном дня поддержки млчишмощихад*е1мИШЙиеров.

Здвс»ret.■■■еры исполь: <1!ШнашквгшгпМ!М1~.*йшг№.чхмт.

мю." Р8... Я планирую пололияш . wmihcc

■•■н в основном дня поддержки млчишмощихад*е1мИШЙиеров.

Здвс»ret.■■■еры исполь: <1!ШнашквгшгпМ!М1~.*йшг№.чхмт.

мю." Р8... Я планирую пололияш . wmihcc

рш ♦.■ Конечно, ■. .сыспе э< а лона для ■■ помощью ■■ол№аае или DrearWWoatfer) так,

и содержал типичны*

* саШ шярероа вдпальаовано в конетрзрадаи

рш ♦.■ Конечно, ■. .сыспе э< а лона для ■■ помощью ■■ол№аае или DrearWWoatfer) так,

и содержал типичны*

* саШ шярероа вдпальаовано в конетрзрадаи

"Я Дунаев Вадим. Сам себе Web-дизайнер - Microsoft Internet Explorer

"Я Дунаев Вадим. Сам себе Web-дизайнер - Microsoft Internet Explorer

vl

vl

НИ

НИ

,база данных

,база данных

М ойКОЫЫОГГвр

М ойКОЫЫОГГвр

Гчцц Избрание

Гчцц Избрание

„сьцжв " Адрес,

„сьцжв " Адрес,

Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора

Рис. 4.32. Так выглядит интерфейс поисковой системы на главной странице сайта автора

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

Листинг 4.23. Пример кода поисковой системы

<HTML>

<! Элемент управления для таблицы ссылок >

<OBJECT ID = 'fndl1

CLASSID = 'CL5ID:333C7BC4-460F-11D0-BCG4-0080C7055A83'>

<PARAM NAME = 'FieldDelim ' VALUE= ' r ' >

<PARAM NAME = 'DataURL' VALUE='search.txt '>

<PARAM NAME = 'UseHeader' VALUE=true>

<PARAM NAME = 'CaseSensitive' VALUE=false>

</OBJECT>

<! Элемент управления для таблицы ключевых слов > <OBJECT ID = 'fnd2'

CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>

<PARAM NAME ='FieldDelim1 VALUE='|'>

<PARAM NAME ='DataURL1 VALUE='search. txt'>

<PARAM NAME = 'UseHeader1 VALUE=true>

<PARAM NAME = 'CaseSensitive' VALUE=false>

<PARAM NAME = 'CharSet' VALUE='windows-1251'>

</OBJECT>

! Интерфейс поисковой системы >

! Поле ввода поискового образа >

<INPUTTYPE= ''text"NAME= "WORD"VALUE= ""SIZE=20>

! Кнопка запуска процедуры поиска >

<BUTTON onclick = "f indkeyword() ">noHCK</BUTTON><BR>

! Здесь будет выводиться результат поиска>

В ID = 'rezult'></B>

! Таблица ключевых слов >

<TABLE STYLE = 'visibility:hidden'>

<TR>

<TD><INPUT NAME = 'fl' DATASRC = #fnd2 DATAFLD = 'pl'x/TD>

</TR>

</TABLE>

<! Таблица ссылок >

<TABLE ID = 'mytab' DATASRC = #fndl WIDTH = 350 ALIGN = LEFT

STYLE = ' vi sibili ty:hidden ' >

<TR>

<TD><SPAN DATAFLD = ' p2 ' DATAFORMATAS = ' html ' ></SPAN></TD>

</TR>

</TABLE>

<SCRIPT>

var obj = "<OBJECT ID = fndl "

obj+="CLASSID='CLSID:333C7BC4-460F-llD0-BC04-0080C7055A83'>"

obj+="<PARAM NAME='FieldDelim' VALUE='r>"

obj+="<PARAM NAME='DataURL' VALUE='search.txt'>"

obj+="<PARAM NAME='UseHeader' VALUE=true>" obj+="<PARAM NAME='CaseSensitive' VALUE=false>"

function findkeywordO { if (IWORD.value) return var xfIt r = "", у, cpar fnd2.recordset.moveFi rst()function findkeywordO { if (IWORD.value) return var xfIt r = "", у, cpar fnd2.recordset.moveFi rst()while i!fnd2.recordset.eof){у = fl. value.toLowerCaseOwhile i!fnd2.recordset.eof){у = fl. value.toLowerCaseO// поиск по введенному образцу// если поисковый образ не введен/* переход к 1-й записи таблицыс ключевыми словами */// пока не достигли конца таблицы// поиск по введенному образцу// если поисковый образ не введен/* переход к 1-й записи таблицыс ключевыми словами */// пока не достигли конца таблицыif (у.indexOf(WORD.value.toLowerCase())>=0) xfltr = fl.valueif (у.indexOf(WORD.value.toLowerCase())>=0) xfltr = fl.value{ // проверка на вхождение /* значение дляформирования условия фильтра */{ // проверка на вхождение /* значение дляформирования условия фильтра */breakbreak

function findkeywordO { if (IWORD.value) return var xfIt r = "", у, cpar fnd2.recordset.moveFi rst()

function findkeywordO { if (IWORD.value) return var xfIt r = "", у, cpar fnd2.recordset.moveFi rst()

while i!fnd2.recordset.eof){

у = fl. value.toLowerCaseO

while i!fnd2.recordset.eof){

у = fl. value.toLowerCaseO

// поиск по введенному образцу

// если поисковый образ не введен

/* переход к 1-й записи таблицы

с ключевыми словами */

// пока не достигли конца таблицы

// поиск по введенному образцу

// если поисковый образ не введен

/* переход к 1-й записи таблицы

с ключевыми словами */

// пока не достигли конца таблицы

if (у.indexOf(WORD.value.toLowerCase())>=0) xfltr = fl.value

if (у.indexOf(WORD.value.toLowerCase())>=0) xfltr = fl.value

{ // проверка на вхождение /* значение для

формирования условия фильтра */

{ // проверка на вхождение /* значение для

формирования условия фильтра */

break

break

I

fnd2.recordset.moveNext()/* переход к следующей записи

таблицы с ключевыми словами */ }

if (Ixfltr)

document.all.rezult.inn(erText = "Ничего не найдено"

else

document.all.rezult.innerText =

/* Формируем условие фильтра:*/

cpar = obj + "<param name = 'FiIterColumn' value = 'pl'>

cpar+= "<paramname = ' FiIterCriterion' value = '= '>"

cpar+= "<param name = 'FiIterValue' value = '" + xfltr + M,x/0BJECT>H

Листинг 4.23 (продолжение)

HTML = cpar/* устанавливаем фильтр

в таблице ссылок */ ity = "visible"// делаем таблицу ссылок видимой

</SCRIPT>

</HTML>

Функция поиска findkeywordQсканирует записи базыданных, проверяя для каждой из них, содержит ли поле ключевых слов р! введенный пользователем поисковый образ. Если результат проверки положителен, то переменной xfl.tr присваивается значение поля ссылок р2. Это значение затем используется для формирования условия фильтра, а сканирование базы данных прекращается. Установка фильтра производится с помощью присвоения нового значения свойству outerHTML элемента управления STD для таблицы ссылок. После установки фильтра мы делаем таблицу ссылок видимой. Эта таблица будет содержать лишь одну ссылку.

Итак, мы рассмотрели простой вариант поисковой системы. Его можно усовершенствовать по нескольким направлениям. Мы рассмотрим далее лишь одно из них. А именно, давайте сделаем так, чтобы система поиска сканировала все записи базы данных и выводила в качестве результата все ссылки, соответствующие поисковому образу, а не только одну первую найденную. Для осуществления этого замысла нам потребуется один элемент управления STD и одна невидимая таблица с двумя полями, и р2. Фильтрация данных нам не понадобится. Вместо нее мы просто будем формировать строку, содержащую найденные ссылки, которую затем присвоим свойству ir :rHTML объекта result. При этом код даже упрощается по сравнению с исходным (листинг 4.24).

Листинг 4.24. Код усовершенствованной поисковой системы

<HTML>

! Элемент управления >

<OBJECT ID = 'fndl1

CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>

<PARAM МАЙЕ = 'FieldDelim1 VALUE='|'>

<PARAM NAME = 'DataURL1 VALUE='search.txt'>

<PARAM NAME = 'UseHeader' VALUE=t

<PARAM NAME = 'CaseSensitive' VALUE=false>

</OBJECT>

! Интерфейс поисковой системы >

! Поле ввода поискового образа >

TYPE= "text"NAME="WORD"VALUE=SIZE=20>

! Кнопка запуска процедуры поиска >

<BUTTON onclick = "findkeyword()'

! Здесь будет выводиться результат поиска>

<В ID = 'rezult'></B>

! Таблица поисковой базы данных >

<TABLE STYLE = 'visibi 1ity:hidden'>

<TR>

5Am泞*T NAME = '' DATASRC = #fndl DATAFLD = 'pi' ></TD>

<TD><INPUT NAME =DATASRC = #fndl DATAFLD ='p2 '

DATAFORMATAS = "html"></TD>

</TR>

</TABLE>

<SCRIPT><SCRIPT>function findkeyword() { if (IWORD.value") " return var xrezult = "", уfndl.recordset.moveFt rst()while (!fndl .recordset.eof“у = fl .value.toLowerCaseO iffunction findkeyword() { if (IWORD.value") " return var xrezult = "", уfndl.recordset.moveFt rst()while (!fndl .recordset.eof“у = fl .value.toLowerCaseO if(у.indexOf(WORD.value.toLowerCase ( xrezult+= f2.value +"<BR>"(у.indexOf(WORD.value.toLowerCase ( xrezult+= f2.value +"<BR>"// поиск по введенному образцу,// если поисковый образ не введен// переход1-й записи таблицы// пока не достигли конца таблицы)>=0){ // проверка на вхождение // формируем строку ссылок// поиск по введенному образцу,// если поисковый образ не введен// переход1-й записи таблицы// пока не достигли конца таблицы)>=0){ // проверка на вхождение // формируем строку ссылокx1x1fndl.recordset.moveNext()fndl.recordset.moveNext()}if}ifII переходII переходк следующей записи таблицык следующей записи таблицы(IxrezulterHTML(IxrezulterHTML"Ничего"Ничегоelsedocument.all. rezult. innerHTML = xrezultelsedocument.all. rezult. innerHTML = xrezultне найдено"не найдено"

<SCRIPT>

<SCRIPT>

function findkeyword() { if (IWORD.value") " return var xrezult = "", у

fndl.recordset.moveFt rst()

while (!fndl .recordset.eof“

у = fl .value.toLowerCaseO if

function findkeyword() { if (IWORD.value") " return var xrezult = "", у

fndl.recordset.moveFt rst()

while (!fndl .recordset.eof“

у = fl .value.toLowerCaseO if

(у.indexOf(WORD.value.toLowerCase ( xrezult+= f2.value +"<BR>"

(у.indexOf(WORD.value.toLowerCase ( xrezult+= f2.value +"<BR>"

// поиск по введенному образцу,

// если поисковый образ не введен

// переход1-й записи таблицы

// пока не достигли конца таблицы

)>=0){ // проверка на вхождение // формируем строку ссылок

// поиск по введенному образцу,

// если поисковый образ не введен

// переход1-й записи таблицы

// пока не достигли конца таблицы

)>=0){ // проверка на вхождение // формируем строку ссылок

x

1

x

1

fndl.recordset.moveNext()

fndl.recordset.moveNext()

}if

}if

II переход

II переход

к следующей записи таблицы

к следующей записи таблицы

(IxrezulterHTML

(IxrezulterHTML

"Ничего

"Ничего

else

document.all. rezult. innerHTML = xrezult

else

document.all. rezult. innerHTML = xrezult

не найдено"

не найдено"

</SCRIPT>

</HTML>

Вставка HTML-документа в таблицу

Документ из внешнего HTML-файла можно вставить в таблицу, находящуюся в текущем документе и управляемую элементом STD. Эта возможность основана на том, что HTML-файл является обычным текстовым файлом. Поскольку в первой строке этого файла указывается тег<НТМ1_>, мы можем использовать его в качестве имени поля базы данных. Признаюсь, эта простая мысль не сразу пришла мне в голову. Видимо, сказался стереотип образования имен переменных.

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

Рассмотрим сначала пример вставки в таблицу одного HTML-документа:

< HTML ">

<! Элемент управления >

<OBJECT ID = 'mydbcontrol'

CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83I>

<PARAM NAME = 'FieldDelim' VALUE='|'>

<PARAM NAME = 'DataURL' VALUE='mydocum.htm'>

<PARAM NAME = 'UseHeader' VALUE=true>

</OBJECT>

<TABLE DATASRC = #mydbcontrol WIDTH = 350>

<TR>

<TD><SPAN DATAFLD = '<HTML>' DATAFORMATAS = ' html ' ></ SPAN></TD>

</TR>

</TABLE>

</HTML>

Здесь предполагается, что в документе тег <HTML> записан прописными буквами. Если же он записан строчными буквами, то это должно быть отражено и в значении атрибута DATAFLD = "<html>". Очевидно, вы можете задать атрибуты оформления таблицы (рамок, выравнивания, цвета и т. п.), а также стилевые параметры позиционирования.

Теперь рассмотрим случай вставки нескольких HTML-документов. В листинге 4.25 приведен сценарий, который это выполняет.

Листинг4.25. Код сценария вставки нескольких HTML-документов

•<SCRIPT>

/* Вставка HTML-документов */

/* Массив имен (URL) вставляемых HTML-файлов */

var aurl = new ArrayO

aurl[0] = "htmll.htm"

aurl[l] = "html2.htm"

var tabwidth=800;/* ширина таблицы, в которой будут показаны

HTML-документы */

/* Массив частей строки, определяющей элемент управления STD */

var xobject = new ArrayO

xobject[0] = <O'BEJC'TDIdojb=i"BJECT ID="idobj'//id

xobject[l] = '" CLASSID="CLSID:33 3C7BC4-460F-11D0-BC04-0080C705 5A83,,>,

xob]'ect[l]+= '<PARAMNAME = "FieldDelim" VALUE = "|">r

xobjectfl] += '<PARAMNAME = "UseHeader" VALUE = tme>'

xobject[l]+='<PARAMNAME= "CharSet" VALUE="windows-1251">'

xobject [1]+='<PARAMNAME= "DataURL" VALUE="'

xobject[2] = "'></OBJECT>'

/* Строка тегов таблицы */

var xtab = new ArrayO

xtab[0] = '<TABLE WIDTH=' + tabwidth + ' DATASRC = #'

xtab[l] = 'XTRXTDXSPANDATAFLD="<ritml>" DATAFORMATAS= " html" > '

xtab[l] += '</SPAN></TD></TRx/TABLE>'

var sobj = "";

for (i =0; i < aurl.length; i++) {

sobj += xobject[0] + i + xobjectll] + aurl[i] + xobject[2] + xtab[0] + 1idobj ' + i + xtabfl]

}

document.write(sobj)

</SCRIPT>

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

Файлhtmll.htm:

<HTML>

<НЗ>Документ 1</НЗ>

<image src="folder.gif">3To - просто картинка

<a hn?f=Mdb0.htmHОписание баз данных в текстовых файлах</а>

<button onclick="alert('Привет!!I *) м>Щелкни</Ьи1Юп>нЭ'о - кнопка

</HTML>

Файл html2.htm:

<HTML>

<НЗ>Документ 2</НЗ>

<1>Это - содержание документа из второго файла.<1>

В нем только этот текст

</HTML>

Тогда HTML-документ, содержащий лишь приведенный выше сценарий, будет выглядеть в окне браузера, как показано на рис. 4.33. Диалоговое окно с приветствием появляется при щелчке на кнопке Щелкни.

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

Рис. 4.33. Результат вставки HTML-документов втаблицы

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

Рассмотренный выше способ является еще одним средством (помимо плавающих фреймов <IFRAME>) вставки HTML-документов, осуществляемой на стороне клиента, то есть браузером пользователя, а не сервером.

ВНИМАНИЕ

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

Обработка табличных данных

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

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

Рассмотрим задачу считывания значений столбца таблицы в массив. Если таблица с данными полностью создана с помощью тегов HTML (без использования элемента управления STD), то задача считывания проста. В этом случае требуется с помощью оператора цикла присвоить элементам массива значения ячеек таблицы из заданного столбца. Пусть, например, элемент <ТАВ1Е> имеет ID = "mytab", и требуется считать в массив все значения столбца с индексом п. Далее предположим, что содержимым ячеек этого столбца являются числа, и мы собираемся производить числовые операции над элементами массива. Поскольку содержимое ячеек таблицы имеет строковый тип, постольку при считывании сразу же воспользуемся функцией parseFloatQ или parselntQ. Ниже приведен сценарий, решающий поставленную задачу:

myarray = newArrayO

for(i = 0; i< document. all .mytab . rows . length; i++){ myarray[i] = parseFloat(document.all.mytab.rows[i].cells[n]) }

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

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

Листинг4.26. Пример HTML-документа с элементом управления STD

<HTML>

! Элемент управления >

<OBJECT ID = 'mydatacontrol'

CLASSID = 'CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83'>

<PARAM NAME = ' FieldDelim' VALUE='|'>

<PARAM NAME = 'DataURL' VALUE='mydata.txt'>

<PARAM NAME = 'UseHeader' VALUE=true>

</OBJECT>

! Таблица >

<TABLE ID="mytab">

<TR>

<TD <INPUT NAME = 'zp' DATASRC = #mydatacontrol DATAFLD = 'Зарплата' onchange = "zpchangeO">

</TD>

! Здесь может быть определение других столбцов таблицы>

</TR>

</TABLE>

<Р>

Сумма выплат <В ID = "sum"></B>

<SCRIPT>

var azp = new Array()

zpchangeO// вызов функции

function zpchange Q {

v a r 5 = 0, 1 =:0

mydatacontrol.recordset.moveFi rst()// переход к 1-й записи

while(!mydatacontrol.recordset.eof){

azp [i]= parseFloat(document.all.mytab.zp.value)

S+= azp[i]

mydatacontrol.recordset.moveNext(>// переход к следующей записи

i++

}

docuument. all. sum. i nnerText = S// вывод значения S

}

</SCRIPT>

</HTML>

Здесь предполагается, что источник данных находится в файле mydata.txt. В этом файле указано поле Зарплата, а поля разделены вертикальной чертой. Чтение данных поля Зарплата и вычисление суммы всех его значений происходит при загрузке документа в браузер, а также при каждом изменении в этом поле. Результат вычисления суммы S вставляется как текст в заранее подготовленный для этой цели элемент <В ID = "sum">.

Защита веб-страницс помощью пароля

Если мы хотим защитить сайт или его отдельную страницу с помощью пароля, то главное — обеспечить сохранность пароля, а также адреса защищаемой страницы. Очевидно, они не должны фигурировать в HTML-документе и сценарии в явном виде. Достаточно простой и надежный способ решения этой задачи — совпадение пароля с именем (без расширения) какого-нибудь файла, расположенного на сервере. В этом случае к слову, введенному пользователем, следует добавить расширение имени файла и проверить, существует ли он на сервере. Если файл существует, то введенный пользователем пароль верен, и можно открыть доступ к документу. В противном случае будет отказано в доступе. Обратите внимание, что имя файла в явном виде не упоминается. Проверку существования файла можно выполнить с помощью метода FileExistsQ объекта файловой системы (File SystemObject), который рассмотрен в главе 5. Однако использование этого объекта в сценарии для браузера сопряжено с появлением неприятного сообщения о том, что страница содержит элемент ActiveX, который может представлять опасность. При этом пользователю предлагается принять решение о выполнении программы. Если он откажется от ее выполнения, то не получит доступа к защищаемой странице.

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

без расширения и имя HTML-файла или URL-адрес страницы перехода. Пусть поля базы данных имеют идентификаторы password и myspecurl Тогда содержимое текстового файла с именем, например, myspecfile.txt должно иметь следующий вид:

password]myspecurl

myspecfile|http://www.myweb.ru/mypage.htm

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

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

Листинг 4.27. Сценарий защиты HTML-документа с помощью пароля

<HTML>

<НЗ>Только для членов клуба</НЗ>

Введите пароль:

<INPUT ID = "pwl" TYPE="text" VALUE="">

<BUTTON ID = "pwenter">BBOfl</BUTTON>

<B ID = "dbelem"></B>

<SCRIPT>

function pwenter.onclick() {

if ({document.all.pwl.value)// если поле ввода пароля пусто

return

dbstr = '<OBJECT ID = "mydbcontrol " ' +

'CLASSID= "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' + '<PARAMNAME= "DataURL" VALUE = '" + document. all.pwl .value+ '.txt"> ' + '<PARAMNAME="FieldDelim" VALUE="|">' +

'<PARAMNAME = "UseHeader" VALUE = true></OBJECT>' +

'<TABLE STYLE = "visibility: hidden"><TR><TD>' +

1<INPUT ID = "pw2" TYPE = "text" DATASRC = "#mydbcontrol"' +

'DATAFLD= "password"></TD><TD>' +

'<INPUT ID = ' XIjrl" TYPE = "text" DATASRC = "tfmydbcontrol" ' +

'DATAFLD = "myspecurl"x/TD></TRx/TABLE>'

document.all.dbelem.innerHTML=dbstr/* вставляем элементы БД

в документ */

setTimeout ("validationO", 1000)// задержка

}

function validationO {// проверка правильности и переход,

if (document.all.pwl.value == document.all.pw2.value){/* если пароль

верен */

document.all.pwl.value = ""

window.location.href =// переход,

}else// если пароль не верен

alert("Пароль не верен!")

</SCRIPT>

</HTML>

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

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

В листинге 4.28 приведен пример HTML-документа со сценарием, который пытается взять пароль из cookie-записи с именем myspecrecord.

Листинг 4.28. Пример HTML-документа со сценарием, который пытается взять пароль из cookie-записи

<НТМ1_>

<НЗ>Только для членов клуба</НЗ>

<а href="#" ID ="myref"onclick="pwvalid() ">Щелкни</а>

<B ID = "dbelem"></B>

<SCRIPT>

var pw/* глобальная переменная для полученного

из cookie или введенного пользователем пароля*/

function pwvalid(){

//

проверка пароля

pw = readCookie("myspecrecord")record'*)

//

читаем cookie-запись

if(!pw)

/*

нет нужной записи в cookie-файле */

pw = pwinputO else

/*

делаем поле ввода и кнопку, вызывающую pwenterQ */

pwenterO

}

/*

загружаем БД, сравниваем и что-то делаем */

function pwinput(){

//

поле ввода и кнопка

var inpstr = 'Введите пароль: <INPUT ID

= "

pwl" TYPE = "text" VALUE = '

'<BUTTON onclick = "pw = d兀ument.all.pwl.value; pwenter() ">Ввод

</BUTTON>'

document.all.myref.out erHTHL = inpstr // вставляем поле ввода и кнопку }

function pwenter(){

продолжение &

Листинг 4.28 (продолжение)

if(!pw)// если нет пароля

return

dbstr = '<OBJECT ID = "mydbcontrol" CLAS5ID = "CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">' + ,

<PARAMNAME = "DataURL" VALUE = " '<PARAMNAME="FieldOelim" VALUE="|

<PARAM м NAME = "UseHeader" VALUE

"visibility:hidden"><TR><TD>'+ '<INPUT ID = "pw2" TYPE = "text"

"password"></TD><TD>' +

•<INPUT ID = "xu rl" TYPE = "text"

"myspecurl"></TD></TR></TABLE>' document.all.dbelem.1nnerHTML=dbstr 5егТ1теоиКиуа11йаг1оп()м. 1©©0) }

' + pw + '.txt"> ' +

">' +

= true></OBJECT><TABLE STYLE =

DATASRC = "tfmydbcontrol" DATAFLD =

DATASRC = "tfmydbcontrol" DATAFLD =

// вставляем элементы в документ // задержка

function validationO {

if (pw == document.all.pw2.value){

// проверка правильности

// и переход

// если пароль верен,

window.location.href =// переход

var d= new Date()

var d2=d.getTime()+(365*24*60*60*1000)

d.setT1me(d2)

wr1teCookie(Mmyspecrecord }else

pw,

// срок хранения d)// запись пароля

// если пароль не

cookie-записи в cookie-файл, верен

alert("Пароль не верен!")

!!

// чтение cookie-данных записи// чтение cookie-данных записиfunction гeadCookie(name) {

// чтение cookie-данных записи

// чтение cookie-данных записи

var xname = name +

var xlen = xname.length

var clen = document.cookie.length

var i=0

while(i < clen){

xname)xname)var= i xlen

xname)

xname)

if (document. cookie. substring(i , j) == return getCookieVal(j)

i = document.cookie.indexOf(" ",!) + 1

if (i == 0) break

return null

)

function getCookieVal(n){/* вспомогательная функция,

вызываемая из readCookieO') */

var endstr = document. cookie. iгidexOf C*^', n) if (endstr == -1)

endstr = document. cookie. length

return unescape(document.cookie.substring(n, endstr)) }

{{

{

{

function writeCookie(name*Cookie(name , value,

document.cookie =

name + "=" +escape(value) +

((expl res) = " ;expi res=" +

((path) ? "; path=" + path :

expires, path, domain, secure) /* запись cookie */

expi res.toGMTStri nginig)( : '+

"") +

((domain ) ? ";domain=" + domain : "") + ((secure) ? "; secure" : " и)

</SCRIPT>

</HTML>

Функция validation() в этом примере по сравнению с предыдущим несколько модифицирована: помимо проверки правильности пароля и перехода по заданному адресу она производит запись (перезапись) cookie. Срок хранения здесь устанавливается равным 1 году с момента текущей системной даты. Функции чтения r( readCookieQ и записи writeC Cookie() данных в cookie-файл рассматривались в разделе 2.9. Далее в сценарии используется глобальная переменная pw для хранения пароля, либо полученного из cookie-записи, либо введенного пользователем. Эта переменная используется в функциях pwinputQ, () pwenter() и validationQ.n() Я допускаю, что приведенный выше код не очень изящный (многовато функций), но он работает, поэтому я и решил не заниматься дальнейшими усовершенствованиями. Однако я рекомендую вам попытаться улучшить сценарий.

Тот факт, что имя файла (без расширения) базы данных и значение ее поля password совпадают со значением пароля, существенно усиливает защиту. Действительно, для доступа к защищенному документу необходимо не только существование на сервере файла с именем, совпадающим с паролем, но и чтобы этот файл со держал-данные в определенной структуре. А именно он должен содержать свое имя-пароль. Очевидно, далеко не всякий текстовый файл обладает таким свойством.

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

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

4.9. Взаимодействие с Flash-мультфильмами

Приложения, созданные в системе Macromedia Flash версий 5.0 и 6.0 (MX), могут взаимодействовать со сценариями на JavaScript. А именно они могут получать данные из сценария, написанного на языке JavaScript, и использовать их некоторым образом с помощью своего сценария, написанного на языке ActionScript. С другой стороны, сценарии на ActionScript могут использовать сценарии (функции) на JavaScript. Чтобы организовать такое взаимодействие, необходимо преж-

де всего вставить приложение Flash (мультфильм, ролик, клип) в HTML-документ. Это делается с помощью контейнерного тега <OBJECT>, инициирующего Flash-проигрыватель и загружающего в него мультфильм. В IE5+ этот проигрыватель уже встроен.