Д.В. Николенко

ПРАКТИЧЕСКИЕ ЗАНЯТИЯ

Николенко Д. В.

Практические занятия по

JavaScript

для начинающих

scanned & converted to PDFby BoJloc

Haj'Ka и техника

2000

Издательство «НАУКА И ТЕХНИКА»

Н/коленюД. В.

Практические занятия по JavaScript

Под р^дакц СПрякина-Черняв члена Me♦данародной эндемии

информационных процессов и тегиопогий

Серия -Конспект про「рамммста»

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

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

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

Приложениеэтойкнигипредставляетсобойнебольшойпаконичныйспраеочникпо объектам, свойствам и методам JavaScipt Он ни в коей степени не создавайся полнымилиисчерпывающим,даваяправонасуществованиеобъемнь}мтомампоэто- муязыкудляопытныхпользователей.Всправочномприложенииприведенысведонияо нaибoлeeвaжныxoбъeктaxJavaScпptcyкaзaниeмиxocнoвныxcвoйcтвимeтoдoв.

© Наука и техника (оригинал-макет,, 2000■о КОРОНА ПРИНТ (производство), 2000© Наука и техника (оригинал-макет,, 2000■о КОРОНА ПРИНТ (производство), 2000К книге прилагается дискета, содержащая файлы со скриптами примеров, благодаря которым Вам будетгораздолегче изучить язык JavaScript и работать.

© Наука и техника (оригинал-макет,, 2000

■о КОРОНА ПРИНТ (производство), 2000

© Наука и техника (оригинал-макет,, 2000

■о КОРОНА ПРИНТ (производство), 2000

ISBN 5-79310126-8

СО? «ЮК'Н* принт», лицензия № 065007 >:>т 18《吧вр〉％ 1997 г

"^"05, Санкт-ПетерГ эг, к ~ 彳 пр । /у

По в Н<1>

Б'л-iara гаг пая Г ъ о<; я О ^м 8 г ч л

Тира ♦ 5 000 зкз Заказ № 1046

ютано с гсто>в в : ?наТр・ ого но「о、 аг лени ГП -Т ничес^я щ- i»

■ • • •I I F ■ ： ПО ..• • 1Т| I) * -，」♦ ♦"」♦♦• ИС]-_ ТВ tv - —wK '''' Д| |Cl

19^^^Ь( Сан.т-ПЕте^^.гг, Мзма ./овп.и宓 пр ,

Содержание

1.

ПЕРВЫЕ ШАГИ.5

• Что такое JavaScript?

・ Jwt 纟Sct妙—это не в же 厶纟卩工。что Javm

Как запустить скрнгпг, написанный на JavaScript?

Включение *.рг屮兀в JavaS 4?t в HT^iL-ct^hhuv

Брейеры, не подцедtiBafOLUtte JavaSoft

События

，仑PHU班

2

HTML ДОКУМЕНТЫ13

・/ fep纟PV出上 JavaSoft

・<?6ье灯 aecTiXhj/bA ения — L^atio^-ob, • ：t

а

ФРЕЙМЫf8

Понятие фреймов

foopHse 剝 itcn&nbpceatiite 如曰打^日

jj； • шы и Javier ft

%ki ни - г

4

OKHA 口 ДОКУМЕНТЫ, СОЗДАВАЕМЫЕ В ПРОЦЕССЕ РАБОТЫ JavaSatpt28

匚i?*W— новых ou^

" 夕з .wa

、■ 7W ол э

С _г」ме 耳叭汴昆 тов、с，一 〜л^^ся по хс^у р_ чг-ты

Сседэй^е \ 7?Л Л^л ^ iewree в лрсцессе рабст

5.

6.

СТРОКА СОСТОЯНИЯ И УПРАВЛЕНИЕ ВРЕМЕНЕМ38

・ Строка состояния

правление временем Сседэ^^е в^е^нны\ 出曰户丹.

Двя'^дщ^ся текст

СТАНДАРТНЫЕ ОБЪЕКТЫ JavaScript45

Объект Date

<?6ьа.т лйсс^вэ а『『зу

Массивы и JavaScript 7 0

- Математический ооъекг Math

7

工 •股.

■依阳己匹纟上卓办耳》*班比飢 ввс^^сй пос^^едством 办п?m

。庄今¥人纟 Н2砒同蛇 в вве^^кй стала опргшенн-’ см*旧юе

Дс>стэвкэ tДотации, вве^^кй посредству 如？рм

Как оорагить внимание пользователя на тот или иной элемент формы

РИСУНКИ НА ВЕБ-САЙТЕ..62

， первые навьет а？？39印翻 目p田红:回 •Зс 又欢"♦ ~ ?必 нз су

「• . * ^тельная загрыз 入夕рп/ок испс*пь^емь{х н纟 стр . • э

/ 1“ен用se картинок е ответ на действия пользователя ・ Скрипт без недостатков

СЛОИ71

Что такое слои ・ Е. создать с псп Спси и JavaScript ・ 庇・“е с твое

JQ И ВНОВЬ О СЛОЯХ81

^ыдепение вядиг^ы\ ^част?.с«в

Sofi ~нные спси

j」е спои и ты с н帆*

”.СОБЫТИЯ е JavaScript 7.Z96

-Новые события

Объект Event (событие)

Перехват событий

12. ПЕРЕТАСКИВАНИЕ ОБЪЕКТОВ.107

-Что такое перетаскивание ? •>3с<!ып»7 Mouse и JavaScr^t 7 2

]qе и Me '

〃• ;е ле・х а тс© н纟 з/а че

小毕н"е объе^лов

НЕКОТОРЫЕ ОБЪЕКТЫ, МЕТОДЫ, СВОЙСТВА в JavaScript"8

・ Объект Ссылка • Ооъекг Applet ・<?6ьт.т Дггэу — Массив

・ ёбьт.т documert • Объект Form • Объект Frame • Объект window -Объект Layer

128128ЗАКЛЮЧЕНИЕ

128

128

ПЕРВЫЕ ШАГИ

Что такое JavaScript?

JavaScript — это не тоже самое, что Java?

Как запустить скрипт, написанный на JavaScript?

Включение скриптов JavaScript s HTML -страницу

Броузеры, не поддерживающие JavaScript

События

функции

Что такое JavaScript?

JavaScript — это сравнительно новый яжкдля написания сценариев, разработанный кампанией Netscape. При помощи языка JavaSo^pt мы мажем создавать ПЕперакпшные web-страищы наиболее удобным и зф- фекшвным способом. В настоянии пракпгческш! посо&ш пртведены щмгмеры, которые, по мжюпо автора, являются наибоже важнышг. Они смогут прсдемоолртцровать возможности JavaSrqpt и щмшщшы органи- заицп! языка. В этом посо&ш приводятся щмгмеры того, что можно сделать, используя JavaScrqpt, а такж, что не менее важно, рассказывается, как это сделать-

JavaScript — это не то же самое, что Java!

Многие лкда считают, что язык JavaScript — это то я® самое, что язык Java, ввдаром сни носят рщгнаковж имена. Однако это жверно. Не будем разбираться в суц^ствующнх различиях, важно лишь помнить, что JavaScript и Java — это разные яжки, хотя в них имеется много облиго.

Какзапустить скрипт, написанный на JavaScript?

Что требуется для того, чтобы запусппъ протрамму-сщмшг, написанный на JavaScEqpt? Все что для этого требуется — это обьгчный интержт- броузер, с акпЕвпрованной способностаю распознавать JavaScript. Таким броузером, напртсмер, может быть Netscape Navigator версии 2.0 и бьшю или Micrascft Internet ЕхрАояег версии 3.0 и выше. Поскольку1 болышш- ство пользоватежй сети Интернет исполь^тот пасенно эти два броузера, то становптся понятным, тючтд именно язык JavaScEpt является наиболее nJ磔почдшелыным 5гзыкойм при решении задан улучшения кажспва wd>-странниц Заъктам также, что для понимания излаженного здесь матертала требуется знание основ HTML — языка ра弘сетки, при помощи которсго сседаются хуеЬчлракпщы.

Включение скриптов JavaScript в HTML-страницу

Текст щхлраммы на языте JavaScript вставляется непосредственно в файл НТМЕ^страшщьг ЧтоСйы посмопреть, как это выгладит, приведем щмгмер простешжй НТМЕ^сфающы.

• html>

、-body〉

、Ъг>

Это осьгчный HTML дакл'меит

-Ъг _-

< s cript language ="J avaS cript"-^

document, write ("Это и естт> JavaScript!")

</script--

-Ъг^-

ВЬгадщм обратно в HTML

--/body - 、/html>

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

■'script language=иJavaScript ” "

do cument. write ( и Это и есть JavaSctipt!")

</script>

Этот фрагмент предстэБляет собой сщмшт, напнсэнныи на языке JavaScript ЧгоСвы посмотреть, как такой скрптг будет работать, набертте текст НГМЬсфаищы, пртведекный выше. Затем сохраните его, кэк обычную НТМЕчирающу1 и запрудите в броузер с акшвпрованным JavaScript На экраж своего монитора в окне броузера Вы уыцрпе три строчки, которые будут выглядеть щжпмерно так:

〔了口 匸心ыуны门 HTHL - д匸正二тяенн .

Мт口 и есть JavaScript!

Выг?:дтш 口братн口 в HTLIL.

Конечно, этот скртпт вряд ли мсй«т оказаться скпцько-ЕЭ1буд ь полезным, ведь подобную пнформацшо можно записать при псмощи обычного HTML горазда более простым способом. Целыо этого примера было паказатъ, кэк всгавлжтся JavaScript в файл НГМЬдокумента и прсдемонвртровать назначение новых ярлыков <saipt> и ；/script>.

Вся информация, которая распспэгается жяда этими ярлыками, вос- щжшпшэется как программа на языж JavaSo^pL В тексте программы встречается врочка documentwrite() — сдаа из нэнбатее важных кпмавд в прогрэмкпцхжанш! на Ja¥aScrj)t Оброчка documenLwriteO иаюль^^гся тог да, ыхда щжно записать что-либо в документ в данном случае, в HTML *жуменг. Так, наша мшкнысш прскршма на JavaScr巾t записывает текст

Это " есть JavaScript!

в наш НГМЬдокужнг

броузерн. не поддерживающие JavaScript

Как бузет выгладеть наша страничка, если просматривающим ее броузер не поддерживает JavaScript? Броузер, который не понимает JavaScript, также не поймет и ярлык <script> Такой броузер проигнорирует этот ярлык и воспримет все, что за ним следует, как обычный текст. А это значит, что пользователь увцщгг на своем Э1фане весть теюст программы на JavaScript, вставленный в HTML-страничку.

Конечно, нам бы этого не хотелось. Существует возможность скрыть текст JavaScript от пользователя который просматривает страничку с помощью старых версий броузера. Для этого используется ярлык комментария <!>. С использованием обозначения комментария наша

страничка примет такой ввд:

<html>

<body>

<Ъг>

Это обычный НТМЬ^цскз^юнт.

<Ьг>

< s crip t language ="J avaS cript" >

9— спрячемся от старых версий брокеров document.writef"Это и есть JavaScript"^ / /

< 'script >

Возвращаемся назад в HTML

</body ' < litml>

Если ⑪оузер не понимает JavaScript, то на экране мы увщщм:

Это обычный НТИЬ-доЕуиент < ^сзвращаепся назад в HTHL.

Если же мы не обнесем текст программы JavaScript скобками ярлыка комментария, то в окне броузера, не понимающего JavaScript, будет следующий теюст:

Это обычный НТНЬ-доЕупент«

_4oci_unent write (•"Это и есть JavaScript! “) 一 ■' ся с", атнс в HT'Tj.

Конечно, не существует способа С1фыть от пользователя те к:工 JavaScript программы полностью, раз и навсеща. Здесь мы лишь можем С1фыть теист программы-скрипта от возможности его просмотра в окне старых версий броузеров в теисте основного НТМЬ^документа. Пользователь все же имеет возможность просмотреть текст программы-срипта, если воспользуется опцией присмотра источника HTML加кумента, имеющейся в меню "вид". Не существует способа «фыть от глаз пользователя внутреннее устройство того или иного эффекта, созданного при помощи JavaScript.

События

Событие — это очень важное в программировании на JavaScript понятие. События главным образом порождаются пользователем, являются следствиями его действий. Если пользователь нажимает кнопку мыши, то происходит событие, которое называется Click. Если э(фанный указатель мыши дыгжется по ссылке HTML-документа, происходит событие MouseOver.

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

Event-handler, иначе говоря обработчик событий или средство управления событиями, который *1ребуется для организации такого действия, называется опСПск. Это срежтво управления событиями сообщает компьютеру, какое действия необхошшо совершить 1фи нас!уплении данного события. Ниже приведена простая программа, иллюстрирующая то, как может быть использовано средство onClick.

<Гопп>

<input type="buttorT узЬю^^шелкни меня" onClick=',alert(,Oii-oft')，，> </fbrm>

В приведенном выше примере есть несколько новых моментов. Рас- смслрим все подробно, шаг за шагом. В этом примере мы описали форму или 万切/«с, в котором имеется кнопка. Это осуществляется при помощи инпрукютй HTML, и поэтому мы не будем на этом останавливаться. Для нас важной частью является инструкция onC lick=,,alert(,Oft-oft,)i，, которая размещена внутри ярлыка <input>.

Как уж было замечено ранее, она определяет то действие, которое будет выполнено цри на本агшп кнопки. Если грожхощгг собыпж Click, то компь- юэф выполнит инструющпо alerti 'Ой-ой^. Эта инструкция — фрагмент .JavaScript. Заметьте, что в этом случае мы не использовали ярлык <script>.

Инструкция 〃亜”"позволяет создавать всплывающие окна. В скобках следует записать строку, в нашем случае это 'Ой-ой1. Текст строки будет ввден во всплывшем окне. Наш С1фипт заставляет появиться на 31фане новое окно с теветом 'Ой-ой1, коща пользователь нажимает на кнопку.

Отметам маленькую деталь, которая, однако, может создать некоторые недоразумения. В команде document .write() мы писали двойные кавычки ”，а в комбинации инструкций, содержащей alert(), мы используем одиночные кавычки ‘ — почему? Вообше говоря, можно пользоваться как теми, так и другими кавычками.

В нашем последнем гцшмере мы используем две 呷ы кавычек и пишем onClick=,,alert(,Ofi-ofl,y，- Но если мы напишем onClick=,,alerti 'Ой-ойЭ", то компьютер не поймет, какая часть относится к onClick, а какая — не工

Для того, чтобы не возникали недоразумения такого рода, необходимо использовать разные тапы кавычек, при этом нет никакой разницы, в каком порадке они б^дут применяться. Ту же формуну можно переписать в другом вцце, поменяв кавычки местами: onClick=^aleIt(^Oй-oй^)^.

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

Если Вы используете Netscape Navigator, то во всплывающем окне буз^т содержаться надпись JavaScript alert, что означает предупреждение JinoStripL Смысл этой надписи соображения безопасности. Можно создать подобное всплывающее окно с помощью метода prompt(). В окне, созданном при помощи этого метода, предусмотрена возможность осуществления ввода информации.

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

Функции

В большинстве программ на JavaScript мы будем пользоваться функциями .Рассмотрим пример и напишем сщшпт, который б)дет вывощпъ текст, причем одаон и тот же текст 伽日 выводаппься три раза. Вот возможный вариант программы:

html〉

<scnpt lz=*'Javat ^ript'^

<1 - hide dc<?un(ent .«irte (*'Дооропожаловать!<юг>“ )

dccui ent .^n_rte ('' 3?。J avaScrrpt 1 <br>'')；

dccunjent лл-rte (мДобропожаловать! <br>“ )

< >nt .in_rte ( ''•jto JavaScript l<br>11)； dc<?un(ent .in. rte (** Добропожаловать! <br>“ )

厂 <?ui *nt .i/irte ('' Зт。JavaSc r rpt 1 <br> “ )；

// -> </scnpt> </hti _>

*?ГСТ СЕрГЯТТ ВЕЛВеДЕТ тагхй т^ют ,.■ П( . 1ловать!

-)JзЗспр匸！

%от текст бузет выведан три раза. Насколько это эффективно? Можно решить эту задачу более удобным способом. Ниже привощпся другой вариант решения задачи.

-html>

< ?npt lan_ 一e二“Ja >criptM>

<!- hide

function myFunction() {

“ocument jn. rte (“ Добропожаловать! <br> “ )

document. urite ('''Это JavaScript i - br>'')；

}•

myFunc t LOn ()，

m;Fu. ?ti □.()；

my Function ()

->

</script>

</html>

Таквыглядит окно броузера после загрузки скрипта, содержащего описанную вышефункцию

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

function myFunction() {

document.write (''Добро по^каловатьКЪг •”)； document.write(''^TO JavaScriptKbr^'');

}

Слова, помещенные ыезщу скобок 也 составляют команды, образующие функцию myFunetionf)^ Это значит, что две используемых нами функции document.write() объединяются в одно целое, и они могут быть

выполнены совместно щ)и помощи обращения к функции. В нашей программе мы обращаемся к функции три раза, мы три pm написали myFuncti&M) после того, как определили эту функцию. Мы три pm вызвали функцию, т.е. содержание функции 6уд?ет исполнено три pm.

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

Функции также можно использовать в сочетании со средствами управления событиями. Рассмотрим гример：

<html>

-head〉

* script language=''JavaScriptм>

“ ！ hide

function calculation^ {

var x=丄2;

var 尸 5;

var result- x + y;

alert (result);

}

// ->

-/script}

、/headL>

*body>

〈form：

-input type=',button'' value- "Будем считать" onClick=''calculationo'' >

■ /fomV-

-7Ъофг~

~ /html>

Окно броузера и всплывающее окно, содержащее результат функции, описанной ввышеприведенномскрипте, посленажатиякнопки "Будемсчитать ”

Нажатая кнопка заставляет компьютф выполнить функцию calculation^, Эта функция производит определенные вычисления с переменными х, у и insult. Мы можем определить переменные с помощью специального слова ]仃匸 Переменные могут использоваться для хранения р^личных величин, например для хранения чисел, текстовых строк и тд.

Строка [фогряммы var result= х 斗 у; сообщает фоузеру, что необходимо создать переменную result и в этой переменной сохранять значение, равное сумме значений переменных 九 + у (т.е. 5 十 12). После выполнения этой функции переменная result будет содержать число 17. Команда alert(result) в этом случае эквивалентна команда alert{17). Мы Б1щнм всплывающее окно, в котором записано число 17.

2

HTML ДОКУМЕНТЫ

• Иерархии JavaScript

・ Объект местоположения — /ocaf/on-ob/ecf

Иерархии JavaScnpi

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

《html >

<head>

< title >Му homepage < 'title >

</head -

<lxx^ bgcolor=#ffffff >

< center >

iipg src=“hQme .gif' name ="pic Iм width=200 he^ght= 100 >

center ^

<p>

<form name=Yny^Fbnri'>

№rre:

<input type=“ text “ n m【e=“ n an(e “ valL = “ “ > 二 br>

e-Ma.il:

<inpute=“ text “ n an(e 二 “ emai 1 “ value=“ “ > 二 brxbr>

<input ti^pe=“button“ value = “Push, me *' nm【e=“m;PutLton“ nClick=''alert (' To' ) '' >

</foj о

<center>

<ung src= “ ruler. gi f'' n m【e = “p ic4 “ width=300 height=15 >

vw href=“htLt ■>：//&- = .c±-t_.ru/~odJ_1]-=-rd">."=>5i стр~-mnci</~>

</c ater>

/bc・<V>

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

確•贝—.二二:二—七 一 £fe Edit у(л» 鱼..绰Mow Hei?確•贝—.二二:二—七 一 £fe Edit у(л» 鱼..绰Mow Hei?HeMu.iTs me ■HeMu.iTs me ■elements。elements。Имя:email:Имя:email:.^elements[l]賜山晔蜂T^c何.^elements[l]賜山晔蜂T^c何> JbrmsfO]> JbrmsfO]images[l]images[l]

確•贝—.二二:二—七 一 £fe Edit у(л» 鱼..绰Mow Hei?

確•贝—.二二:二—七 一 £fe Edit у(л» 鱼..绰Mow Hei?

HeMu.

iTs me ■

HeMu.

iTs me ■

elements。

elements。

Имя:

email:

Имя:

email:

.^elements[l]

賜山晔蜂T^c何

.^elements[l]

賜山晔蜂T^c何

> JbrmsfO]

> JbrmsfO]

images[l]

images[l]

j41nhs[О]

變丁 " jbocuneritDQM

Здесь мы имеем две кфтмнки, одну ссыл封 и одну форму, содержащую Два поля для ввода текстовой информации. С точки зрения языка JavaScript окно фоузера представчяет собой объект, называемый 皿 1/Аж. Этот объект содержит в себе несколько элементов, например, панель состояния. В объект— окно windo^r мажет быть загружен HTML-документ (или файл другого типа, здесь же мы ограничимся HTML-документами).

HTML-страница представляет собой новый объект — docimient. Объект document предотавчяет собой НТМЬ^цокумент, который загружен в фоузер в данное время. Этот объект очень важен в языке JavaScript, и мы 可庶м пользоваться им очень часто, Этот объект имеет свои свойства, например, одним из свойств объекта docimient является цвет фона документа.

Существенным моментом является тот факт, что все объекты, опи санные в HTML, являются свойствами объекта document. Например, HTML-объект, представляющий собой ссыл^, содержащуюся в дожмемте, или объект, который представляет собой форму — все это свойства объекта docimient. Следующий рисунок шнкхлрирует структуру иерархии, образующейся в нашей HTML-cГранине.

images [О] первая картинкаimages [О] первая картинкаelements [0]первый текстовыйэлементFHwmiifciwM—м—.elements [0]первый текстовыйэлементFHwmiifciwM—м—.elements [1]второй текстовыйэлементelements [1]второй текстовыйэлементelements [2]кнопкаStrwgagmftKHMUHiuijmmiiicielements [2]кнопкаStrwgagmftKHMUHiuijmmiiici

images [О] первая картинка

images [О] первая картинка

elements [0]первый текстовыйэлемент

FHwmiifciwM—м—.

elements [0]первый текстовыйэлемент

FHwmiifciwM—м—.

elements [1]второй текстовыйэлемент

elements [1]второй текстовыйэлемент

elements [2]кнопка

StrwgagmftKHMUHiuijmmiiici

elements [2]кнопка

StrwgagmftKHMUHiuijmmiiici

Мы хотам научиться получать информацию о разных объектах и управлять объектами. Для этого мы должны знать, как можно управлять объектами. Ккждый объект в иерархии имеет свое имя в bi陳 своебраз- ного адреса. Чтобы назвать, например, первую катанку на HTML- стрлмице, нужно посмотреть,呼 в иерархии находится эта страница. Начинать нужно с самого начала, с основания.

Первый, и основной, здесь объект, — это документ, его имя docimient. Первая картинка на странице имеет имя ima^s[0]. Все это значит то, что мы можем обраппъся к этой картинке посредством языка JavaScript, назвав ее dociffnefitJma^sfO]^ Если же, например, у нас появиться необходимость посмотреть, какую информацию пользователь ввел в элемент первой формы, то вначале нам необходимо позаботиться о том, как мы сможем офаипъся к самому объекту, представленному данной формой.

И опять начинаем с самого основания иерархии, с его главного объекта. Далее офащаемся к формам и затем переходим к элементам форм, таким офазом, первый элемент нашей формы будет иметь имя dociffnentformsfOJ^lemetitfOJ, И все же, как мы сможем узнать, какой в этом элементе введен темп? Для того, чтобы узнать, какими свойствами и методами может обладать тот или иной объект, удобнее всего обра- татъся к справочному пособию по JavaScript.

Из справочника легко можно узнать, что текстовый элемент имеет свойство, носящее имя n〃&吃 т.е значение. То, чему равняется value, и представляет собой текст, введенный пользователем. Вот как мы можем проч1пэть то, что ввел пользователь：

naiue= document.forms [0 ] ,elements[ 0] - value；

Текстовая строка, введенная пользователем, сейчас со^анена в переменной name. Далее мы можем пользоваться этой переменной. Например, мы можем создать всплывающее окно, используя эту переменную： а1ег1("Привет, ” + name). Еста в данный элемент формы введена строка 'Яков', то в отмывшемся окне будет написано * Примет, Яков9,

Но если наша страничка велика, и в ней много различных объектов, то может оказаться 3alpуципельным указывать имена объектов 叩“ помощи чисел При этом могут появляться довольно громоздкие конструкции, например, document.fofins[3]. elements[l 7] и doeument.fi>nns[2]. elements[18]. Эту трудность можно обойш, если присвоить объектам уникальные, неповторяющиеся имена.

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

<fonn па1ле=“щ/Еопп“>

Nan(e：

<inpij.t 七二2£=“七石二七“ па е^^пашем ”"з1ие=““>< г>

В этом примере первая форма .尤切蟬0 имеет собственное уникальное имя myFonn. Вьксго elements[O] мь!Ь1ожеь1 хк^ользоватьуоиимя, которое задано этому эжмешу 1фи помощи свойства имени пате, которое может бьпъ указано для задания собственного уникэлнисго имени в ярлыке <input>, гри псмощи которого аписывается данный зотелсенг. Тс#да Ehcecro строчки

пяте=d о cument. forms [ 0 ]. elements! О ]. value;

мы мажем нэписатъ:

1шше= document. myF orm.nanie .value;

Используя такие теша мы обжгчэем себе процесс написания программы, особенно в том случае, если создаваема父 сграыща доеолено велика. Здесь жмаловажно помнить, что имена чувствшелЕны к регаст- ру, и имя myForm — это вовсе не то же самое, что ш^)гт. Свойсгва объекгоБ JavaScript не сграыгчлгвакхгся оперзшиап! прочтения значений пожй, заполжнных информапжй, которая вводится пальзователем.

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

<fbrm name="myForm">

< in put type = " text" name= "input" value=“** ** "*"〉

■'input type="button" value="Write"

on Click= "document .myForm. input. value= ' Ой' ;

Ишере(乎кицая нас часть нэхрщпся справа от caiClick во бт/юм яртыке tinput>.

Объект местоположения — location-object

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

Например, если Вы загрузите сфаницу hnpy/wwwsonjehost.ru/page.htrfil, то location.href будет иметь значение, равное именно указанной строчке адреса страницы. Интересно то, что мы можем присвоить location.href новые значения. Например, нажимая кнопку, описанную в следующем примере, мы загружаем новую страницу в существующее окно броузера.

VfbmT

<input ti'pe=button value 二"工 ahoo ”

onCl工с：- = “location.href = http ： / /_ -kh ./疝。。.com'〕 "> у form>

3

ФРЕЙМЫ

• Понятие фреймов • Создание и испопьзование фреймов ♦ Фреймы и JavaScipt • Меню навигации

Понятиефреймов

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

Все это оправдывается тем фактом, что все-таки фреймы — это не совсем то, что обозначает русское слово рамки. К тому же в программировании фреймов мы ^цем вынужжны пользоваться английскими словами, а в "родном" написании слово фреймы выглядит как frames.

Созданиеииспользованиефреймов

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

Окно броузера может быть разделено на несколько фреймов. Фрейм представляет собой прямоугольную область экрана, расположенную в окне броузера. Каждый фрейм показывает свой документ, как правило, это обычный НТМГ^цокумент Например, можно создать два окна и в одно из них загрузить домашнюю страничку компании Netscape, а в другое — домашнюю страничку компании Microsoft.

Несмотря на то, что создание фреймов осуществляется в рамках языка HTML, напомним основные принципы и способы создания фреймов. Для того, чтобы создать фреймы, мы пользуемся двумя ярлыками, а именно ярлыком <fiameset> и ярлыком <frame>. Страница, р^битая на

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

<html>

< frameset jtows="50% , 50У " >

<frame stc="page l.Etm “ name="firame Г'>

< frame src="p age2.htm" name=,'frame2,' >

</frameset >

</html>

*Эгот код порождает два фрейма. В ярлыке <frameset> указано свойство 『tws, a mws — это в ряды. Это свойство указывает на то, что два фрейма расположены радами, друг над другом. Верхний фрейм 3alpухается страыщей pagel.htm, а нижний фрейм загр叉яжтся страышей pageJ-htm.

Такие окна фреймов образуются в результате исполнения приведенноговышеНП1Ь-кода

Если Вы захотите расположить фреймы столбцами, то вместо свойства rows в ярлыке -Cfcimeset：〉укажите cols. Процентные величины ‘5俨2 50\" указываю工 относительные размеры окон фреймов. Если Вы ж хобж уфуадаь себя вычислениями того, каким должен бьпъ размер второго окна, чтобы шютом получилось 100% го можно указать размер окна в пикселях цри эгсм знак ■ опускается.

Кодай фрейм имеет свое уникальное пмя, которое зяцается цри помощи свойства name в ярлыге <fiame>. Цри помощи этого пжни фрейм жгко доступен цри. описаниях на Ja^Script.

Можно использовать несколько последовательных описаний фреймов при помощи ярлыков <ficameset>, при этом фреймы могут быть расположены друг в друге. Вот пример такого расположения фреймов: < frameset cols="50fb>50” '

frameset rows="50 他 50” '

〈йгапю sr с="cell. htmc< '

frame src="celLhtm"、

/frameset'

frameset rows="33%>33%,33%“ *

<frame src="cell.htm" '

<fraiiK src="cell.htmc< '

<frame src="cell. htm"、

/frameset'

</frameset'

Посмотрите, как выгладят такие фреймы:

Сложная структура фреймов

Существует возможность установить толщину рамки фрейма при помощи свойств border в ярлыке .<ficameset> Если border = 0, то это обозначает; что Вы не хотите, чтобы фреймы имели видимых рамок.

Фреймы 肘 JavaScript

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

browser window вbrowser window вparentparentПже мы воделп, что все элементы web-стрэшшы жрархпжскп организованы. Фреймы не пскшоченж. Иерархия страницы первого щимера выпщщтг таким образам:

browser window в

browser window в

parent

parent

childrenchildren

children

children

frame 1page1.htm

Основным эокменгам жрархпп явлжтся окно броузера. Это окно разбивается на два фрейма. Окно броузера является родите^тъским элементам по отношению к двум фретаж, которые являются дочернпмп по отнопюншо к окну броузерх Мы далп этим двум фреймам уъщкалшые имена /а嶼g] и frame!. Иоюль^я эш имена, мы можем передавать информацию из одного фрейма друтому.

Цри помощи скриптов мы мажем решить следуквщую задачу Нужно создать такую С1ранпц}т, в которой 1фи вяжатпп ссюткп, расположенной в джумеше жрвсго фрейма, гропсходпт 3alpужа зацрахцпваемого доку- менха во второй фрейм, а не в герБып. Это задача моя史т быть агауаль- ней в случаях, кщда пспапоьзуются различные меню. Фрапм, в котором содержится меню шп ссдержанпе, остается неподкожны^! и неизменным, и в кагорам имеется m6qp ссылок надрутж страницы.

PtteEompuM 吵"сле&^юитх варианта:

родительское окно пип фрейм обращаются к дочернему ©реому; дочерний фрейм о^)эщэегся к родшельскому окну пгш 小рейму; дочерний фрейм офащэется к /фугаму дочернему фрейму^

С точки прения окна броузера (проептве за жаргон) до^рнж фреймы имеют имена fiumel mAfirame2. Ввшк на 四суш无 показано, что окно (^сузера имеет прямые (родшельекж) сетзи с этими фрепмамп.

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

ним, то у вас есть простой метод — укзжнте имя дочернего фрейма, к которому необходимо обратшъся. К примеру, можно написать так:

frame2.document.write ("Обращение из родительского окна.");

browserwindow

frame 1 page1.htmlframe 1 page1.htmlframe 2page2.htmframe 2page2.htm

frame 1 page1.html

frame 1 page1.html

frame 2page2.htm

frame 2page2.htm

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

Мы можем обраппъся к родительскому окну плп рощггельскому фрейму 1фи помощи parent (рощпеть) . Для того, чтобы затрузшъ в окно броузера новый документ, необходимо задать новеш адрес URL, прпсво ив его объекту местапслаженпя location .href. Посколжу мы хотим удалить фреймы, то нам необхоцпмо обратиться к объекту месгаположенп® которвш расположен в родительском окне.

Поскольку каздап фрейм может быть загружен свсим собственным □зкуменгам, то у кязкдого фрейма есть своп собственшш объект место- полаженпя. Мы можем загрузить новую страницу в родотельское окно 1фи помощи стщяукщ由 команда, раслслаженнсй в док^аденте дочернего фрейма:

parent Jocation.href= “ht t р二〃..."；

frame 1pageLhtmframe 1pageLhtmframe 2gage2 hfm jframe 2gage2 hfm j

frame 1pageLhtm

frame 1pageLhtm

frame 2gage2 hfm j

frame 2gage2 hfm j

Довольно часто Ертходлтся стэлкпваться с 刊項чтц ккяда из одного дочержго документа жобщцгв1О обратиться к 冲утсму дочержм>т доку- мешу. Как записать чего-либо во вторсй фрейм, находясь в гервом фрейме? Иными словами, такая комавда должна быть зэлнсэна в документе pagel.hmi, 3alpуженном в первый фрейм, которая пртоводпла бы появлению во втором фрейме веобходпмых записей.

На налюп картшке нет црямых связей между гервым и кюрым дочерними фреймами. Это означает, что мы не имеем возможносш обратиться из гервого фрейма framel ко кгорому, указав имя второго фрейма AwwJ в дакумеше paggJLhtm, поскольку гервып фрейм нпгаего ，*не знает" о существорэнпи кгорого фрепмх

С точки зрения родлтельскаго окна Brqpoh фрейм носит ммя/н/№ а с точкп зрения гервсго фрейма к родительскому окну обращаются гдри псмсщи parent. Поэтому, объединяя все имеете, для того, чтоСы обратиться ко второму ©рейму из гервого, мы гтттшем:

раге nt. frame 2. document, write (мЭто обращение из framel/');

Меню навигации

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

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

Д&кyмelunfrшnesЗ,htm:

-html〉

<frarnebet 上（:0后="80名，20名">

<fr ， src= •' s t .htm1' nc e=,'main,,>

& fr am e src= “menu. htm “ naiiie=''menu “ >

< / f Гс.A

< /html>

Документ start.htm — это стартовая страница, которая будет вначале загружена во фрейм, носящий имя MAIN. К этой странице нет никаких особых требований.

Во фрейм, который назван MENU, буа^етзагружена страница meiiii.htm.

•If елмы

•■•■ ЮТ »nu./lt/n： html> h >

< script 1 angij.age= *' Ja^'a.Scr ipt11 >

<!- hide function load(url) {

pare nt. main. loc ation. tire f^ url;

// -、 j /script ~

Y/head>

<bodK^-

-、atire f= €<j avasc ript: load.( cfirst. litmc) w ^ firsts /a，

-_ a hre f= "se cond. htm " tai&et= "maini" >se cond-_ /a ~

-_ a. tire f = "third. htm " target = <c_top " ~ third-- /a，

-：/bod^、 /html

ЗД)есь мы вдцим иной способ загружу новой страшщы во фрейм, носящий имя MAIN В перБСй ссылке нспалЕзована функция load(). По- смотртм, как происщпдт обра!阵нпе К ЭТОЙ фуНКЦШ!?

<а htef=”javasctipt 二load('fitst.htm') ">fitst・；/a>

Эта строчка засгавлжт ^юузер выполнять протрамму-фштт, написанную на JavaScript、вместо того, что&д обратиться к обычной загруз欣 страницы. Имя документа 'fi^thntf записано в скобках. *Это имя передается в виде аргумента функции load(). Футащня loud() определена сждут- ющим образам:

function load(url) {

раге nt. main До cat ion. hre f= url;

Окно броузера после перехода по ссылке "вторая ссылкаОкно броузера после перехода по ссылке "вторая ссылка

Окно броузера после перехода по ссылке "вторая ссылка

Окно броузера после перехода по ссылке "вторая ссылка

Здесь в скобках используется иг|, Подразумевается, что строка "firstl.htm" ^ранится в переменной иг|. В функции load() мы можем использовать эту переменную.

Во второй ссылке использовано свойство target Вообще говоря, оно не является специфическим для JavaScript, оно скорее принадлежит языку HTML. Здесь мы лишь указали имя фрейма. Заметьте, что нам не понадобилось писать слово parent перед именем фрейма. Быть может это и выглядит немного странным, но этому есть простое объяснение — это свойство не является свойством JavaScript, оно является свойством HTML.

Третья ссылка показывает, как можно избавиться от фреймов, пользуясь свойством 依糕£ Если возникает необходимость избавиться от фреймов и при эггом использовать функцию bad(), то все что нужно сделать — это написать строчку parent.location.fuvfi= url в скобках у этой функции.

. Q ш J Й (3

“К -二尸 Weued、 Hem* Mcerch ₽*■ м H，2c^ Cbtr^^*

Это страк utis thirdhtm

尊G， ь ^МуСл puier —

Окиоброузерапоспепереходапо ссылке ^третьяссылка "

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

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

Предположим, что мы имеем три фрейма, которые носят имена frame 1} frame 2 и frame}. Пользователь щелкает ссыл!^, расположенную во фрейме framel. При этом необходимо осуществить нагрузку двух разных

сфании во фреймы 加唳2 и 加喚3. Вот как эта задача может быть решена средствами JavaScript.

function loadtwo () {

parent.framel.location.href^ ''first.htm'';

pare nt. frame 2 Jo cation. hre 4 ''second, htm'';

Ot но броузера not ne перелидэ по ссылке "первая ссылка'

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

function loadtwo(urll, иг12)；

р are nt. frame 1. location, hre f^ url 1;

pare nt. frame 2. location, hre f^ url2;

J i

Далее к этой функции следует обратиться, указав конкретные имена — адреса загружаемых страниц: loadtwufTirst.htm", “second, htm”丿 или Ioadtwo{,,third.htmM, "foith.htm"). Использование переменных делает функцию более гибкой, ее можно использовать снова и снова, меняя лишь значения переменных.

4

ОКНА И ДОКУМЕНТЫ, СОЗДАВАЕМЫЕ В ПРОЦЕССЕ РАБОТЫ JavaScript

Создание новых окон

Имя окна

Закрытие окна

Создание документов, образующихся по ходу работы

Создание VFlML-документов в процессе работы

Создание новых окон

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

Следующий офштг опфывает новое окно Сроузера и зацужзет в наго НТМЬчзтранпчку.

<html>

<head>

<script language=,'Jav aS crip t">

J - hide

function openW5n(){

n^Wn^ op en (''p age. htm'');

、/script>

« /head *

body~

foim •

<input typ e = "button" value=''Открываем новое окно'' onClick=,,openWin()''> /form •

•"/body-

/html>

Страничка pa^e.htm загружается в созданное окно при помощи метода ореп()

Новое окно броузера, открь旧山ееся после нажатия кнопки "ОткрьЕайи новое окно"

При открытзп! нового окна супюсг^ет всгаложность выбора параметров внешжго вцца создаваемого окна. Например, можно выбрать, б^даг или 1ют новое окно иметь пажль пнсгрумешов, шинель меню или панель строки состояния.

Также возможно задание ра^ьера опфываемого окна. Следующая программа опфывает окно, разлд> которого усганэвшсвается 400x300. Окно не ^gner иметь строки состояния, меню и панели инструментов- ° btml 亠 <head-

-script language=''JavaScript'' -

! — hide

function openWm2() {

rr^Wn^ op en (''p age. titm*\ "nuwAVindow：

'' wi dth= 400, tieigjtit= 300, status =no, toolb ar=no ,meniibar=no'');

}

//

-/script>

Vbead-

•-body.

-form-

-input type=''button1' \:а111е="Огкрываем новое окно 400x300" onCnck=MopeiiXVm2()"-

/form -

/ /body-

J/html.

О eq от? 口 mb 田二削弟封 при нз:^тии，^с^и '□卄 pwB^efr? новое 讨 ^ 40小 300 ”

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

'Width =400, hei^it=300, stanis=no, toolbar=fio, menubar=no 二

Заметьте, что bhjtjm (щмжи не сл^ует псгюльз<№а1ь пробелы.

Данная таблица содержит свойства объекта window (левый столбец; и значения, которые могут принимать эти свойства (правый столбец).

directories

yes'^io

height

ко шчесшео шоссе i 或

location

yes \лю

menubar

yes Vю

resizable.

yes у io

scrollbars

yes у io

status

yes у io

toolbar

yesyio

width ….

..количество никелей

Список свойств в вышеприведенной таблние не является исчерпывав ющнм Так новая версия языка JavaScript 1 2 предусматриваез возмохе ност!> здания других свойств. Этот кармант JavasScript понятен для броузеров Netscape Navigator версии 4 о 用 выше.

Более раннме броузеры ле поймут такие инструкции, и если драничка предполсп^г использование броузеров Netscape Navigator 2.x, Netscape Navigator 3 х или Microsoft Internet Explorer 3 x. то в ней следует избегать MHcipyKUifh, содержащихся исключительно в языке JavaScript 1.2.

Свойства объекта windcw по версии JavaScript L2 щмгведены в ст^ду- юии^й таблице.

atwaysLawered.

УвУ\ЛО

alwaysRaised

yes\/io

dependent.

yesyio

hotkeys

yes^io

innermd^i

入twnwtweo никселеп

imerHei^}it.

hOAunecfiieo пиксели

outer Width

MAmecniGO пиксели

outerHei^it

KOAiniecfiiGO пикселей

screeiiX

распо^южете 6 пикселях

screen Y

раепомженпе 6 пикселях

titlebar

yes\fio

Z-lock

yes^io

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

Имя окна

При сгпфьгпп! нового окна футащия open содержала три аргумента: n^Wn= openCpage-htm", "newWindcM, "width400,height= 300,status=no. toolbar=no,IneIlubar=no,,);

Ответые на вопрос: “Что означает второй аргумент функции и зачем он нспоть豆ercflf?" Вкрсй аргутчент функции open — эго имя окна. Ранее мы уж И1деш1, как испочь^^гся свойство target. Если мы -знаем имя cyiiFcgy- юшрго окна, то 3alpу^пъ в это окно Б№ый Документ мсжно с мспальз<ж1- ннем свойства target. Это можно осуц耳сшпъ ст^дутощш образом.

-a href="page.ht ml" t arge t="newWindow" >

Здесь мы указали имя окна. Если окна с таким имежм не суп^ству- ет, то указанная выше ссылка приведет к сседаншо нового окна.. Также отмепш, что myWin ж является имегем этого окна. Цри помощи переменной myWin мы можем лишь обратиться к этсму окну.

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

Закрытие окна

Ja\raScrqpi так遊 позвапжт закрывать окна. Для зэпфышя окон кс- гютьзуется метод close(). Откроем окно, как это было оппсано выше, и 3alpузпм в него следующую страницу:

-dhtml'/

<scnpt lc -= “ Java! :npt “ a

<!- hide

function closelt() { close ()；

}

// -)

-"/script>

■ center -

-fomi -

-input t\rpe=button value—Закроем окно'' onClick=''close lt()'' - Vfomi^

-/center -

-/html

Если иажпъ кнопку в этом окне, то окно закроется.

Окно, появляющееся принажатиикнопки "откроем и закроем окно'1

Метод ореп() и метод clo^； — это методы, свойственные объекту window Если быть последовательным, то необходимо помнить, что полный вид записей инструкций открытия и закрытия окон должен быть wimkfw理енО 以 ^indow.closeO, ewcnio opeiU) и close().

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

Создание документов, образующихся по ходу работы

Сейчас мы подоили к одному из замечательных свойств JavaScript — создаюпо документов, фсрмир戸шх в процессе работа, В английском языке для таких джулеенгав используется термин cn-the-fly документ Это означает, что что мы имеем во孙кжносхъ при помощи JayaSc4rt создавать новые НТМЬ-сфаыщы.

Более того, существует возможность со叫аватъ и другие документ, напртмер, УИМЛ-сцеварии и прочее. Новые только что со军項ееож документы мотуг быть быв^юны в отдельном окне или в том, или инсм заданном фрейме.

Сначала мы со^ицпем тфосгсй НГМГ^оркумент и покажем его в новом окне. Ню® приведен скртпт, решающий эту задачу.

html>

<1. d>

<script langij.a.ge=11 Ja**aScript11 >

<!- hia ?

fijnction openWin3 () /

nVWin= open ( “ “， “he .vnindow*',

^width^bC ,height=400 x status=y- 5 x to< Jbmr二* s г~es M ) *

/ / открываем дощчхент m ：n. <：： snt ・。工 n();

/ / создаеп доклеит

in ~~ n. docu it. • rite ( M htnil^ ■ < xtitl- )n-tl -fly11);

m；TWin. document .write ( “ </七工七lex/headz：｝〉。比•>“ );

ini^Win.docur jut.、zrite (“<center><font size=+3>,');

爪 n. ^cijun it .write ( ,,(?tot HI JL-до к二f вит создан “)・

m；TWin. dc'cijunent. write ( ^при поис-щи Ja*waScript! “ )，

m n. ^cum it. rite (''c/font： /center〉")；

ini^Win. document ・ uzuite ('' </Ъс>&/ >< /htm 1 >'');

/ / зак,. jt (нс・ не окно!)

mi^in. dC'CiJiiient. close ();

</script>

</head>

<body>

<£orm>

<input type=bDtton value=r/On-the-fly*z cnClick^^openWinB ()">

</form>

</body>

</html>

2 З&кЛМб

U .「О»-—一——■ . —_E

'E* Г-.- 电В H中一

.G 0 ш

Stop 奥/师 Home >g“ 「xcmec He2i/ 二戋

Этот HTML-документ былсоздан при помощи JavaScript!

Этоокнопоявляетсяпринажатикнопки "On-the-fly"

Рассмотрим функцию winOpen3(). Сначала мы отбываем новое окно броузера. Первый аргументфункции — пустая строка " . *9то означает, что мы не указываем никакой URL. Ероузер не долен тагружатъ суще- ствующий документ, JavaScript создаст новый документ.

Мы определяем переменную ад Л ш. При помощи этой переменной мы будем обращаться к новому окну. Здесь мы не можем использовать имя нового окна /иги^И диЪм/ После того, как окно отбыто, мы от!фы- вэем документ при помощи

my Win.document.open ();

Мы вызываем метод ореп(), относящийся к объекту document, ©то иной метод, отличающийся от метода ореп() для ооьекта window! ^та команда не отбывает нового окна, она подготавливает док^члентдля его последчощего вывода. Перед documeMopenQ след^тт указать my^ln для того, чтобы образтпъся к новому окну.

Далее следующие команды создают содержание нового документа.

/ создаем дсжумент

ге^ДМц ・ document.write( — btml>- head〉- title>On-ttie-f ly" j ;

myWiii. document .write ("- /title 一 /head - body •“ );

my Win. document, write (— center - font size=+3 尸);

my Win.document.write ("Этот НТМЬт^жзмжг создан ");

myWin.document.write(**ирп гкькщп JavaScript* у； myWIn.document. write ("・ /font -• /center ■);

myWin.document.write ("- /body -・ /html 尸)；

Мы вцщш, что 軍©ъ записаны о&гтнж флажки, используемые в HTML-докужшах. Таким образом мы сседэем НТМЬ-страшгчку. 5десь можно использовать любие флажки, допустимж в HTML. После окон- 14alшя шведа жобходгмо закрыть дакумеш. Это делается при помощи следующей: шктруиппь

// закрываем документ (но не окно!)

myWin.document.close();

Раньше мы упоминали, что создаваемые в ттроцесое работы документы можно выводить и во фреймы. Если, нащишер, у нас существует два фрейма с пмешми^/ие/ nframeZ и мы кошм создать нжый документ, который ^дет размешен во фрейме jrame2, то во фрейме framelcj^js^eT написать слспующее.

parent.frame2.document, open();

parent.frame?, document.write (и3десь мы тппжм наш HTML код'*);

parent.frame2. document.close();

2*

Создание VRML-документов впроцессеработы

Для демонстрации удивительной гибкости языка JavaScript приведем пример создания документа VRML, формируемого в процессе работы. Аббревиатура VRML обозначает язык моделирования виртуальной реальности I Virtual Reality Modelling Language). При помощи этого языка создаются грехмерные образы. Для проверки работы данного примера необходимо иметь у?тановленный VRML phig-in. Сам скрипт не осуществляет проверку того, установлены или нет необходимые пл аг-ины.

Вот текст программы.

<html

head

< script language=^J avaS criptrF>

<!- hide

functi on vrmlS cene( J {

vrnil= о p e n ( , "nuwX^ndoW,

''widtJh.=500,lieiglit=400,status=yes,toolbar=yes,meiiubar=yes,')；

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

vrml. do cumen t. о pe n{ "x-world/ x - vrml");

vr= vrml. document;

/ / создаем VRML-сцену

vr. write In ( ^# VRML V1.0 ascii");

/ / свет

vr. writef^Separator { DirectionalLiglit { ”)；

vr.write(,Fdi recti on 3 -1 -2.5 } ”)；

/ / камера

vr. write (^Perspective Camera { position -8.6 2.1 5.6 ”);

vi .write (''orientation -0.1352 -0.98 31 -0.1233 1.1417 '');

vr.write(^focalDistance 10.84} ”);

// КТО

vr. write (^Separator { Material { diffuse Color 0 0 1}");

vr. write CTiansform { translation -2.4 .2 1 rotation 0 0.5 1 .9 }");

vr.writeC^Cube { } } }”)；

// закрываем документ (но не окно!)

vrml. document.close ();

</ scripts

</head>

body>

<fbim>

< input type=button \-alue=^TRJMOL on-the-fly" onClick=,FvrmlScene ()">

</fbrm>

</body>

</html>

Эта программа во многом подобна предыдущему примеру Сначала мы опфывэем окно. Затем мы открываем документ, подготавливая его вывод. В^лявипе на щмпжр: // открываем документ vrml. do cument. open (”х- worl d/x-vrml”);

В цредцдушем ттрнжре мы ничего не писали в скобках. Что значат эти 'x-woHd/x-ATrnr ? Эго MIME-тип создаваемого файла. При помощи этой записи мы сообгпаем броузеру о там, какой тип данных ^дет ему предпсй^ндаже. Если мы не укэжм в скобках ничего, то по умолчанию предполагается тип "text/htmT, этот MIME-тип соответствует обычным HTML-файлам.

Для содтамы 3D щены мы тпшюм Arml documentAmteO^o сравнн- телБНО длинная запись, позгому уию&ю опредетпггь vr= лтт1. document Сейчас можно записать та*滋叮 вместо xrmLdoaiment.WireO. Далее мы вводим VRML-код 存VRML VI.О ascii Separator {

Dire ctionalLight { direction 31 -2.5 }

Perspective Camera { position -8.6 2 Л 5.6 orientation -0.13 52 -0.98 31 -0.1233 1.1417 focalDistance 10.84 } Separator { Material { diffuse Color 0 0 1 } Transform { translation -2.4.21

rotation 0 0.5 1.9

} Cube { } } }

Мы вводим этот код при помощи кимавд documenL\mre(j.

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

55

5

5

СТРОКА СОСТОЯНИЯ

И УПРАВЛЕНИЕ ВРЕМЕНЕМ

Строка С^Х^ЧНИП

Управление временем. Создание временных задержек

Движущийся текст

Строка состояния

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

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

<html>-head •-script language="JavaScript” •• !- hidefunction statb ar (txt){window.status = txt:<html>-head •-script language="JavaScript” •• !- hidefunction statb ar (txt){window.status = txt:Программа выгладит следующим образом:

<html>

-head •

-script language="JavaScript” •

• !- hide

function statb ar (txt){

window.status = txt:

<html>

-head •

-script language="JavaScript” •

• !- hide

function statb ar (txt){

window.status = txt:

-/script"

-/head -

-body •

一foam .

-input type="button" name=,,lookM \-а1ие=Пишем на панель состояния]м

onClick= "statbar(' Вот она, панель состояния]1)；" 一

-input type="button” name=M erase" \з1ие=С*п1раем текст с панелп состоянияГ1

onCiick=M statbar ('1 );"、

-/form,

/ /body

-yhtml -

Фэил JJp話卜口 Бш Переход ЦНрэпюе gФэил JJp話卜口 Бш Переход ЦНрэпюе gГКйиЕм но 门豆货力匕 сдсгоянмя1 ] Стм*зем текст с панели состоанхк!]

Фэил JJp話卜口 Бш Переход ЦНрэпюе g

Фэил JJp話卜口 Бш Переход ЦНрэпюе g

、Цротуамма выглдцит следу^эщим образом:

<html>

I ВОТ DH%ri5g,0 СО'УГОЯНкш…[.

Z1Z1Цри нажата кнопки "Пишем на панель состояния" в нажин состояния, распотажжнсй! в шгжжИ части окна, появляется текст 'ТВот она, панель состояния?1*

Z1

Z1

аЕ^сь мы создаем форму с двумя кнопками. Обе кнопки пряводягг к обращеншо к функшп! statbar(). Кнопка ТПпшем на пйеель состояния]1* приводит к исполжеппо слвдюшей функцши

statbar (Ъот она, панель состоянияГ)；

В скобках мы глисали выражшю "Эго и ecn> пажль состояния*. Эта строка передается для обработки функции в виде параметра. Сама функция statbaro была отфедежна нами елкпукшим образом:

function statbar(txt) { window .status = txt；

登虹ь мы помеспип! в скобки ВЕдражию txt, параметр функции. Это значит, что строчное выраз磴шее, которое будет передано для обработки функции, будет ^рашггься в пережнжй с имежм m Передача значений функции с пемещыо переменных позволяет использовать функшп! нап- боже гибким способсм.

Функции можбю перадвать ешкотеко пфемевных. для этого в списке переменные должны быть отделены друг от дата цри помощи запятой. Значение переменней txt, т.е. строчное выражние, присвоенное этой переменжП, можно вывесш на пажль состояния цри помощи комэвды windowjstatus = txt Стирание текста с пажли состояния осуществлжтс；! цуга* присвоения windowLStatus пустой строю]

Истюльзавяошю возмижнкта вывода isKCZBCrfi информашт на пажль состояния пожжо использовать в сочетании с гшюргексгавыми ссылками. Вместо 1ЛИЬ-яцреса на панель состояния можно вывеепг 1фаткую информацию о содержании странтшы, на котсрую имеется ссылка.

Есин псдвеста указатель мышки на такую ссыл!^, то информация о странице ^жт выведена на панель состояния.

Эта ссылка счузпгг примером, пншосфирующим вышесказанное. Соответствующая программа приведена ниизе.

<a href=Mdontclck.htm,, onMouseOver—,window.status=,He иэжнмэй меня?'; return true;" onMouseOut=Mwmdow.status=M;11 >ссылка- a >

На п^ьепь состояния вывела текст "Не н齐；м日向 м己田"

Для того, чтобы огфеделмть, ще находится указатель мыши, мы использовали onMouseOx^r и ofiMouseOut. Сообщение "Не нажимай меня!” появляется, тоща, коща указатель мыши находится на ссылке. Возможно Вас удивило, что внутри скобок в выражении, присваиваемом свойству onMouse, указано return true. Эта инструкция заставляет броузер отка- зя1ъся от выполнения собственных, свойственных фоузеру действий в момент наступления данного события.

Обычно, ковда указатель мыши находится на той или иной ссылке, броузер выводит на панель состояния эдрес ссылки, ее URL. Если мы не напишем return true, то немедленно после того, как ^дет выполнена наша команда, т.е. на панель состояния ^дет выведен заданный нами текст "Не нажимай меня!", броузер вернется в свое стандартное состоя ние и запишет на панель состояния URL данной ссылки. Наша строка ①дет "затерта", и мы не сможем ее прочитать. Во избежание этого в средстве обработки событий мы пишем инструкцию return true.

Событие onMouseOut не существует в языке JavaScript 1.0. При использовании броузера Netscape Navigator 2、результат действия, связанного с перемещением указателя мыши и его удалением со ссылки, ^дет зависеть от типа кампькл^иой платформы. Так, если Вы пользуетесь операционной системой Unix, выведенный на панель состояния, текст

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

В системе Wndows текст не исчезнет посж перемещения указателя со ссылкзе Однако суижтвует возможность создать пртемжмый скрипт, который будет паняпен дли Netscape Navigator 2х в qp^ Widows. Для того можно, нэпртмер, описать функцию, которая 切酔 записывать текст на пзеель состояния и стирать его по проткстшп некоторого времеюь

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

Управлениевременем. Созданиевременныхзадержек

Создав временную задержу, мы можем заставить компьютер вьшол- нить те или иные дадсштя лишь по истечоеип! заданного промежутка времеиь Ниж прив^н щигмер. Если нажать на кжпку "Временная зятержка", то спустя 4 секувды на экране всплывет новое окно.

Файл Правка Вид Птэз Избранное ?Файл Правка Вид Птэз Избранное ?кнопку иВременная задержка", то спустя 4 секунды не экране всплывет новое окнокнопку иВременная задержка", то спустя 4 секунды не экране всплывет новое окноВременная эвдержк* IВременная эвдержк* I.1(©!-.1(©!-Так в ыглядит программа для этой кнотгкргТак в ыглядит программа для этой кнотгкрг£ Времй вышло! Всгиъм»л£ Времй вышло! Всгиъм»л《script language-^JavaScKipf^<!——hide《script language-^JavaScKipf^<!——hideОКОК江 тгтт江 тгтт{Не Нз*м«а1 ме 欣{Не Нз*м«а1 ме 欣I—ЯШЛГПТЕТТПГТПГТКЛГТI—ЯШЛГПТЕТТПГТПГТКЛГТ2rФ ":2rФ ":1底冲94Кбдйт |1底冲94Кбдйт |

Файл Правка Вид Птэз Избранное ?

Файл Правка Вид Птэз Избранное ?

кнопку иВременная задержка", то спустя 4 секунды не экране всплывет новое окно

кнопку иВременная задержка", то спустя 4 секунды не экране всплывет новое окно

Временная эвдержк* I

Временная эвдержк* I

.1(©!-

.1(©!-

Так в ыглядит программа для этой кнотгкрг

Так в ыглядит программа для этой кнотгкрг

£ Времй вышло! Всгиъм»л

£ Времй вышло! Всгиъм»л

《script language-^JavaScKipf^

<!——hide

《script language-^JavaScKipf^

<!——hide

ОК

ОК

江 т

г

т

т

江 т

г

т

т

{Не Нз*м«а1 ме 欣

{Не Нз*м«а1 ме 欣

I—ЯШЛГПТЕТТПГТПГТКЛГТ

I—ЯШЛГПТЕТТПГТПГТКЛГТ

2r

Ф ":

2r

Ф ":

1底冲

94Кбдйт |

1底冲

94Кбдйт |

Спустя четыре секунды после нажатия кнопки "Временная задержка ” на экране появляется окно с текстом предупреждения; "Время вышло! Всплываю!"

Так вншщцгг грогрэмма для этой кнопки:

<scrip〔 language=M Java Script" >

<!- hide

function timer() {

setTimeoutC'alertC1 Время вышло! Всплываю!')” 4 000);

}

// ->

、/script -

<fonn、

<input type="button" ¥а1ие=,,Временная задержка” onClick=,,timer ()” '

' /form ”

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

В данном случае будет исполнена команда "〃勤％'加《я вышз!Вспш- ваюГ). Заметьте, что команды JavaScript должны быть записаны в кавычках Второй аргумент сообщает компьютеру продолжите л ьность задержки —время, через которое необходимо выполнить указанные команды. Время указывается в мпчписекувдях 6W00 миллисекунд = 4 секунды).

Движущийсятекст

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

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

Затем, по истечении небольшого громежутка времени, нам необхсднмо записать этоттекзт; но слегка смещенный влево. Есии мы будем повторять эзу последовательность снова и снова, то создастся впечзпение, что перед нами движущийся справа налево текст. Кроме того, нам необходимо позаботиться о том, чтобы В1ЩИМЯЯ часть текла вышвдела наиболее выгодно.

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

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

史竺п щ^сгд а喫 ?дрех?а Мзбамнов% 二.二 二二’

псзаБститъск。тех чтобы видимая часть текста выгладеле наиболее выгодно Это ■ важно иметь в виду, поскольку как правило весь текст целиком бывает гораздо длинне. и^иавег。”。，^^-二二二■яет^жжгзй^..期 нике приеелен 4 登」口g"支М，卜9 处30PM^ "_「_ —_一一一 一 一 一 содержащей ва n, "~"_，_.一一'

Эю пример двихущегмся muerd. созцанвсго при помощи ДядущнАрч Трксг|JftViScnpt

Тегст программы

<htmi>

<head>_ _？

■cscrlpc 丄anquaq ±aKitiiipisgMuiHJ5«s^qa3Torg«<aLiuflcfneKCT8：MUR3 ,赤必

<■— hxde

// Залаем вывоаимми текст

var вигсхе R «Этот текст выводится цр« поноши Jerze^ctripe1 "Stop текст выводится б” помощи JavaScript1 ” 4- "Этот текст еыводктся. при ikxmohjx JauaSctipt1 **;

Поспе нажатия кнопки "Движущийся текст"в новом окне в панели состояния появляется движущаяся строка "^тотдвижущийся текстсоздан при помощи JavaScript!"

Текст программы выглядит следующим образом: ■ biml-

-head-

- script language =,1 JavaS cripi,p ->

!- hide

// Задаем выбодомый текст

var sertxt = "^тот текст вывошггся при гк^гаип JavaScript! ” +

"Этот текст вывощгют 1фи ххлюши JavaScript! ” +

"Этот текст вывошггся 1фи гтачгаиц JavaScript!";

var length = sertxt.length;

var width = 100;

var pos = -(width + 2);

function scroll() {

// вывощим: текст с хфавой гю玄пдш и устанавливаем временную задержку

// сдвигаем позицию на един шаг pos++；

/ / вычисляем, какая часть текста 6二”ден видгща. vai: есдгоИек ="”； if (pom == length) {

--m = — (т -二 口th 十 2 )；

// если текст не достиг пока, левого 1^>м,

// то не "*。工 з дс" ‘ ггв не *к пвк。 щ 「нов — иь че придется

//отсекать г. редаи-к- часть текста

if (口二m < 0)(

for (”r l = 1, l <= Math.abs (pos) , l++){

scroller = scroller + “ ",}

scroller = scroller + scrtxt. sijJDstring (0, width 一 工 + 1),

}

else {

scroller = scroller + scrtxt. siAstnng (pos, width. + pos)

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

window.status = scroller:

вновь обращаемся к функщш спустя 100 ьшллпсек^тнд setTimeout r”scroll()", 100);

}

// ->

v script >

head >

vlxxiy onLoad=ffscroll () ff^

Здесь располагается текст НТМЬ-сфанпчкп.

</bodxr ■ 弋 html >

Основная часть функции scroll() осуществляет вычисления того, какая часть текзста ⑨贝ет В1щима на панели состояния. Мы не ⑨西м детально задерживаться на объяснении того, как устроена данная часть программы. Для того, чтобы запустить движущийся текст, мы использовапи средство управления событиями onLoad, указав его в ярлыке <body>. Следовательно. функция scrollO будет выполнена сразу же после загрузки страницы.

Мы обращаемся к функции scroll () посредством свойства on Load. Производится первая часть расчетов строки текста и ее вывод на панель состояния. В конце описания функции scroll() мы определяем временную задержку- В результате задержки повторное обращение к функции scroll() произойдет лишь после указанного промежутка времени (100 миччисекувд). На очередном шаге текст смещается на один шаг влево, затем снова временная задержка. Это повторяется неограниченно долго.

Постоянно дв11^ущ1шся теюст на панели состояния — это не лучшее решение. Такой текст скоро становится надоедливым. К тому же он мешает читать информацию о ссылках. Быть можетлучшим было бы решение, коцщ одна часть текста движтся справа налево, а другая часть - слева направо.

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

6

СТАНДАРТНЫЕ ОБЪЕКТЫ JavaScript

Объект Date

Объект массива Array

Массивы и JavaScript 工。

Математический объект Math

Объект Date

В языке существуют такие иоьекты, тип которых предусмотрен стандартом языка JavaScript. Под термином стандартные объекпты мы понимаем тэкзю объекты, которые в английском языке (языке оригинала, описывающего JavaScript) определяются словом predefined, т.е. объекты, которые были определены 利囲нее.

Это специального типа объекты, существование которых обогащает язык JavaScript, придает ему новые свойства. Примером стандартных объектов может служить объект Data или Data-odject. Существуют и другие ставдартаые объекты, например, Array-object, Math-object

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

Рассмотрим подробнее объект Date. Как подсказывает само название объекта (в переводе слово Data обозначает дата или чисю ^сяца), этот ооьект позволяет работать со временем и числами месяца. Можно, например, подсчитать, сколько дней осталось до дня рождения Вашего друга. Можно вставить в Ваш HTML-документ информацию о текущем времени.

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

today= new Date()

При помощи этап комавды мы создаем новый объект Date, который напвается today. Если мы не укажем соредежнных зна^ний времени и чиста, то по умалчанию будет использовано текущее время. Т.е. во время выполжння комавды today= new Date() новый объект Date с шчежм today 伪毋工 иметь значение, равное Teqiu科g времени, соответствую晔- му текущему времени на кшшиютере.

Объект Date мояжт быть испсмьзовэн в сочетании с неюторымл методами. Ннжперечлсленные RferqnR (это ж полный список методов, с конными может работать объект Date) позволят использовать наш объект тоЛ^боже hiCkd: getHouis(), setHouis(), ^tMimites(), setMinutesO, getMonthO, setMonth(). При псмощи этих методов можно получать информацию о такушрм значении часов, минут, месяцев, а такж усгэнэв- ливать новые значения этих параметров.

Полный перечень всех методов, присущих объекту Date, можно найти в справочниках Црн использованш! объекта Date помнзпе, что это все же ж чаек, которые меняют своп показания ка拜&ю ое寸印и и миллпсекувду, и эти пленения происходят автамзгшчески. Объект Date позволяет получать значения времени и устанавливать новые значения времени лишь в момент выполжння комавды.

Чго^ы задать значения Бремени, мы можем нспопьзовать еждуюшую камацлу (здесь метод Date" вдевается посредством оператора new): today= new Date(2000, 3, 17, 15, 35, 23)

С помещью такой ciporai мы создаем объект Date, который соот- веилв职т 15 часам 3 5 копытам 2 3 секувдам 17 апреле 2000 годх Время в скобках заш!сывзется в сж^тацеп послоедавательносп!：

Date (год, месяц, день, часы, минуты, секувда).

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

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

■'script language = и JavaScrip tM >

<J- hide

novv= new Date();

document.write(,,Tiine: ” + now.getHours() + ”】"+

now.getMinutes() + " ：bt> ");

document.write(MDate: ” + (now. get Mon th () + 1) + ”/” + now.getDate() + "/" +

(1900 十 now.getYear()));

// _;>

•；/sctipt>

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

Скрипт выводит на экран текущее время(но не идущие часы)

Здесь мы использовали getHours(), с помощью getHours() мы получи ли значение часов нашего нового объекта Date с именем new. Вы наверное заметили, что мы прибавляем 1900 к значению года, получае мого при помощи getYearf). Метод getYearf), возвращает значения года, начиная с 1900. Есии это 19 97 год, то getYearf) возвратит величину 9 7. для 2005 года getlfearf) возвратит число 105.

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

Рассмотрим программу, которая выводит на 31фан в окне фоузера изображение работающих 1щущих часов.

Это текст программы:

-html>

-head>

<scnpt L angijage 二 “ JavaScript “ >

< 1 - hiUj

var timestrx &MteStr "inction clock (){

nc 二 ne« Date ()； // Epein hours= now. getHours()； minutes = now.getMinutes ()； s€ ••冃 now .gw二onds ()；

timeStr= "“ + hours ； 匕工m，Str+=( (ininut- 5 < 10)? * ： 0 “："： “)十 minutes ；

time Str+=( (seconds < 10)? 11 ： 0 11•"：“)+ seconds ；

? t .cl< T . tim* % r 二 tu * 飞工；

/ / д< *a

da.te= now. ge tDate ();

month= now. g« : nth 0 + 1;

二ear二 1900 -•- now. getTear ();

c t< 3tr= "” + month;

da.teStr+= ( (date < 10) ? "/0" ， ”/") + date;

date Str+= ”/“ + year;

doci - nt.clock.d. ._e.value = c t r;

Timer= setTimeout ("ukck () ", 1000);

}

〃->

</script>

</Jiead--

b ^ ^ onLioad=11 clock () и >

< form n зп(е= ” clock ” >

Ереххя:

<i jut 七二工 二"text ” nm【e二"time" size=,,8 и valx >=” ”> br> Дата:

<i 3ut 七二工 =,,text" nm【e二"dmte ” size=,,8 и valx 匸""> "form〉

</html>

Fie Ed， Vfew Go KVmdow Help

■c- ** .-'-亠

«Document Done

N?S a I . эГ и 二 к

Для того, чтобы получать значение текущего времени и даты кя專цую секувду, мы используем метод sefTiineaiit(). Таким образом, каждую оекувду мы создаем новый объект Data, в котором усгановтюно текути^е время.

Вы вцщпе, что функция clock()вызываегся при помощи средства управления событиями oonLoai которое использовавип внучрн ярлыка <body；. В теле вашей HTML^cipainriKii ссдержпся два зотеменга для Евсда текста. При помощи функции dock() в эти элемента пржзвощтя запись времжи и даты, протаем учитываете貝 особенность предотавжнпя времени, кскда укажсвается незначащий нуль на старпет позиции.

Мы использовали строчнжперелкннж nmeSn-n dateSny при помощи этих переменных мы сформатировалн вывод времени б соответапвпп с требованиями. Для этого мы использовали ствдующую камавду:

timeStr~r= ( (minutes < 10) ? ”二 0” : ”二”)+ minutes;

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

if (minutes < 10) timeStr+="二0” 亠 minutes else timeStr+="二"+ minutes;

ОбъекгмассиваАггау

Массивы все1да бывают полезны. Представим пример, когда Вам нужно хранить список, состоящий из ЗиО различных имен. Как осуществить это при помощи JavaScript? Можно, конечно, определить 1W различных переменных и присвоить кязвдой переменной свое имя. Но не слишком ли это сложно?..

Массивы позволяют объединить множество переменных, связав m вместе друг с другом. Доступ к таким переменным осуществляется по- средстовм одного единственного имени и числа (или чисел). Пусть наш массив носит имя names. То1да первое имя, храняшееся в этом массиве, можно получить грн помощи обращения names[O].

Доступ ко кгорому имени может быть осуществлен посредством nafiiesfl] и тд Объект Array можно использовать в версиях языка, начиная с JavaScript 1.1 (Netscape Navigator 3.0). Новый объект массива можно создать цри помощи строчки п^Аггау= new Anayf). После этого массиву можно присваивать конкретные величины:

my Array [0]= 17;

ту Array [1]= "Dima”；

ту Array [ 2] =” Petya” ；

Массивы в языж JavaScript являются весьма гибкими. Вам даже не продегся забоппъся о размере массива, так как размер массива усгэнэв- лиБэется динамически. Так если мы тишюм myAiray[99]= "xyzT, то величина масапва автамяпгески устанавливается б размере 100 элементов. Массивы в JavaScript могут лишь увеличиваться в размерах, но не мсяут умвныияться.

Поэтому жоСксдамо сждить за тем, что размерь: массивов были по Б<ил1ожносп1 минимальными. В массивах можно храипъ данные различных типов, напртмер, числа、проки или др^тае объект. Многое rqpa-здо няхлядже ввдно на щткрэх.

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

first element second element third element

W. ь сама программа :

< script 1 angiJ.age= и JavaScriptм >

<!- hi's

пс^ггау= 口一内 Array ();

—I'Array [0] = “ f irst el ел nt ” ；

yArray [ 1 ] = ”sec< ： L e .nt";

HL^Arrav [2] = ” third element ” ； for (v c i= 0; к 3; i+.+ ) { docun(ent. wite(myArray [x]+ " vbr ,・ •

} // ->

</script >

Прив^ценный вьзе скрнгтг выводит 8 окне ироузера три строки

Скачала мы сседэем новый массив с именем гпуАгтоу. Затем мы прпсБапвэем элементам массива различные значения. После присваивания мы /танп^уем цпкл. В этсм цпкж прсжходцт псполжнве ксман- ды: document write(inyAiray[i] + ”<Ы);

2ro комавда исполняется три раза. Переменная i цробегает значения от 0 до 2. Внутрп цикла мы обращаемся к элементам массива цри псмсйщп myArrayfi]. Поскольку значенж шменжтся в драпах от 0 до 2, то мы три раза обращаемся к docuinentwrite():

十・Ybt>“j; 十 “<br;“)； 十У);十・Ybt>“j; 十 “<br;“)； 十У);document, write (myArray [ 0 ] document.write{myArray[l ] document, write (myArray [2 ]

十・Ybt>“j; 十 “<br;“)； 十У);

十・Ybt>“j; 十 “<br;“)； 十У);

Массивы и JavaScript 1.0

Массивы не суц^сщшг в языге JavaScript 1.0 (Netscape Navigator 2、 и Nliouscft Internet Ефкмег lx), поэтсйму необходимо позаботпться об алыерштпэшх релюнпях для устаревшпх фс^зерсав. В джумешацпп комланпп Netscape имеется следующий фрагъеш программы, пдаволяку и^й создавать массивы:

function initArray() {

this.le ngth = initArray. argume nts .1 e ngth

for (var i = 0; i、this.length; i++)

this[i-*-1] = initArray.arguments [i]

Дат欣 можно создавать масспны цри помощи таких ннс!рукцпп: myArray= new initArray (17, 3, 5);

Чпсла в скобках — началкные пяраъетры масспва. Их такж можно пспользсвать и в JavaSoft 1.1. Ошюанный подо&шм образом массив JavaScript L0 жкот^рЕамп удобными методамп, пспольадванге которых в JavaScript 1.1 цредмавлжг дополшпелквож вшможноспе Так нащп- мер, здесь жво^можно потолъзоаванж метода sort(), который пометает си^шрсгвшь сорщрсавку эткменгав массива заданным способом.

Математический объект Math

Если появляется жобходимостъ приквоцить математические вычисления, то математическзй! объект Mafli предоставляет целый набор методов, пожляющих осупкствпть мнажЕС1во математических onqpainin. Полный список катодов объекта Math пртоводится в еправочникэх.

Напртмер, у объекта Math супесщет метод sin(), псввотяюпшй вычислять значения синусов— Т1ро^юз^^^ на пртсмере, как работает метод iandcm().

Если вызвавь МаОигашЗотО, то мы гкщучим случайное число в промежутке от 0 до 1. Вот результат выполнения команды docurQenLwrite(MathLraiidoni()). Всякий раз при перезагрузке сфаюпш получаемое число будет иным, оипгшым от цредыдушего-

список негодов обьекга Malh приводится в справочниках. Например, у 仪 объекта 射Cath существует метод sin。，позволяющий вычислять значения синусов. Продемонстрируем в качестве примера как работает метод random

,Если вызвать Math. random(). то мы псх^чш疝 случайное число в промежутке у О R。1 Вок результат выполнения команды docuraenc. write (Hath, random (】](всякий раз при перезагрузке страницы получаемое число будет иным, отличным от предцдтщего):

OQ2 62n2 3 985s01752 7у

V ]]■} f :

裝М?П；画 №?j^.ur

В / с-вде H7A7L«onwT3 口。呪亚刃〃乃 юм^нда fi「％w снтайного у“匸〃а, / второе З^П '^ CCF,声 fi О,彩 ULC.CC 口三

7

ФОРМЫ

Проверка информации, вводимой посредством форм

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

Доставка информации, вводимой посредством форм

Как обратить внимание пользователя на тотили иной элементформы

Проверкаинформации, вводимойпосредствомформ

Формы — это бланки, в которых 侬奥усмотрена свободные места, в которые пользсюатель вводи ж^одгмую информацию, это документы-бланки, предшзш<кнныедля заполнения. Формы в большем количестве мсполь^кжя в Интернете.

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

Как убедиться в том, что пользователь ввел в форму ггсдаодяшую [Енформашпо? При помещи яжка JavaScript мы можм провернть пра- ышьность вводгмЕсй информации до того, как она будет передана по сеш Интернет

Рассмотрим первый щишер простого афппта на JavaScript. Наша HTML-cipaHii4Ka б^дет содержать два окна для ввода текста. Предполагается, что пользователь долзжн ввести в первый текстовый элемент информашпо о своем имени и фамшпш, а во второй элемент — свой e-mail адрес.

В действшельнослг ж пользователь имеет возможность ввести любую информацию в эш окна. Попроб^м испытать нашу программу в работе. Пожспе^ишенпфуем с раздпгчными варнашамн вводимой информации, в том числе 1raпробам осгашть текстовж элементы неза- nCHEKHEDMMIL

徐:徐:El £dl Vw Go Window HelpEl £dl Vw Go Window HelpDoornerit DeneDoornerit Dene

徐:

徐:

El £dl Vw Go Window Help

El £dl Vw Go Window Help

Doornerit Dene

Doornerit Dene

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

Помимо буквенной информации можно вводить и цифры, и значки. Есии пользователь введет число, скажем, ”777”，то в ответ после нажатия кнопки в данном гримере он получит ответ “Привет; 777!”. Поэтому цредчоженная в этой грограмж гровфка можт оказаться не слишком эффективной.

^ ?™ВУУ—严 WF^fT^r ::-走冈

H. 3 Go v^irid- •■ Jfelp

Введите ваше имя н фамилию।

Ц>.й6ный ввод J

Введите ваш е-ma!献ре с1ТЪ<>л^«г«.т&Введите ваш е-ma!献ре с1ТЪ<>л^«г«.т&■FA函融"暗心...「•■FA函融"暗心...「•вводввод

Введите ваш е-ma!献ре с

1ТЪ<>л^«г«.т&

Введите ваш е-ma!献ре с

1ТЪ<>л^«г«.т&

■FA函融"暗心...「•

■FA函融"暗心...「•

ввод

ввод

Если в г А информ - нажагл!. ПАЩГЧК»Если в г А информ - нажагл!. ПАЩГЧК»Всадите notaryйстэ текст!Всадите notaryйстэ текст!,Docm»eF Dure,Docm»eF Dure

Если в г А информ - нажагл!. ПАЩГЧК»

Если в г А информ - нажагл!. ПАЩГЧК»

Всадите notaryйстэ текст!

Всадите notaryйстэ текст!

,Docm»eF Dure

,Docm»eF Dure

ходить никакой

ньи% то при

бки* ввод* мы

пглтге 沂 Fa*TT二I

.-用

Ирг晔р со вторж текста&от форлкш несколько более слоя^н и пшересен. Попробуем ввеспг какукнлиб。npociyto строчку, напрчгмер, имя, в кагорам не ссдержзггся жэчок 理 Такой ввод будрт воспринят как ошибочный. Кртпоерюм отбора является нялппне в вводимой строчке жачка @. Поскольку кзэдай шжрЕет>здрес эжкзронной почты седер житв себе значок @, то проверка наличия в данной посждователшости СПМБОТОБ предстаЕЛЖГСЯ ОПрЗЩГЗННОТ.

mmВведите вашВведите вашококJJродрод亠 ，\ Нс введен e-fn-ail aoped

m

m

Введите ваш

Введите ваш

ок

ок

J

J

род

род

Введите ваш e-mail адрес.

Пробны 说 Е£С>Д

Если в первый текстовый элемент не вводить никакой

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

[1ТН7УИТнГ「сс&т仟口и：八К che6v~g八哲 ггуотччф 卄V*L

Gocw^fii Done

Программа данных эжегавых элементов, в которой имеются жкото- рые элемжш проверки, пр□□呢я戸is ниже:

<Ыт1л

<head-^

弋 script language^ "JavaS cript^ >

v >

< Eorm n am e= “ f irst “ >

В те I e in и <‘ лшп：' ： - br> < input ti'pe=,,textи n aiiie=11 text 1 *' > < input t^-pe=" but ton " n ал - = " but tonl" value = ” Про|5ный в вод ” onClick= f,t stl (this . form) f,> <P

В . те I шт e-mail w _ ec ： <• r>

<input ti'pe 二"text" n^iiie二"text2 " >

<n >ut t'pe=и but ton11 n<，二"bu七七。口2 " value=,,rt> эный ееод”

onClick= *'test2 (this . form)"、 v/bG±> </ht >

Рассмотрим сначала ту часть программы, кот^ая гредставиена в виде HTML-кода и размешена в теле HTML-страницы. Мы здесь создали два текстовых элемента и две кнопки. Кнопки обращаются к функци ям testl(...) и test2(...).

Функция testl(fbrm) осуществляет проверку того, является ли вводщ- мая строчка пустой. Проверка осуществляется при помощи оператора if (form.iexilvalue ==叫 Переменной ^rirf (в функции testl(fbrm)) передается значение this.form. Значение (строка) текстового ввода может быть получено гри использовании 'value' в сочетании с fiyrm.textL Чтобы проверить, является ли ввод пустым, мы сравниваем это значение с пустой строчкой "". Если вводимая строка равна "", то ввод не был осуществлен. Программа генертдруетсообщение об ошибке. Есин какая либо информация введена (ввощплая строчка не пуста), то программа воспринимает ее кж допустимую для ввода.

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

Рассмоэртм функцию 盘t2制田. Эта функция, как и в предыдущем случае, осуществляет проверку того, осуществчен ли ввод какой-либо информации в текстовый элемент; сравнивая его с пустой строкой "". Но далее мы добавили новые ннструкшш в комавду if Двойная вертикальная черта || - это оператор OR. Мы его уже 1кпользовали ранее (в предыдущей гтаве).

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

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

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

Иноцга же жобходгмо, чтобы вводимая информация содержала лишь ограничжный опр^жнный набор символов. В щигмере с номером телефона мы бдам проверять, являются ли ввсднмж спмбфш цифрами. Ощико жкоторж лкди при ввсде номерав телефонов используют и друтзсе спмвата, помимо цифр, и номер телефона мажет выелщкть. например, так： 012-345-6789, шш (012)345-6789, шш 012/345-67-89, шш 012 3456789 (в середиж есть пробел).

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

-html ■

〜head ~

-'script Language=''JavaScript'' •

、” ！ - hide

function check (inputj f var ok = true;

for (var i = 0； i、" input .length； i++){

var chr = input. chaiAt (i> ;

var found = false;

for (var j = 1; j -^ check.leu名th; j + +) f if (cbr == check[j ]) found = true;

}

if (!fmjnd) ok false;

}

return ok，

)

Eunct ion t st (inpijt) {

if (! check (input, ”T“， “2“'' 3 , “4",

“5““б", "2", "E", C, “0““/““ —”, ” ”)) {

alert ('*B вводгпгз'й инфор'^адгш соде'^'ка.тся ошибки11 ); } else {

alert("В I пр ・・)/

}

// ->

</scrip t>

</h~adr

、body -

'Jbmi •

Телефон:

'-input type=''text'' пэт^'^гелефон'' value='''' ■

'-input type=''button'' value=''Check''

о nClie k=''test {this. form, telephone, value)'' -

、/form -

' /body -

、./htnil/

File £函"沿用д0 Ffivortesh班)，■ • ‘ 一 • •-*^" *^• . . 一- ♦ • • С . ♦— U''吋―w“ File £函"沿用д0 Ffivortesh班)，■ • ‘ 一 • •-*^" *^• . . 一- ♦ • • С . ♦— U''吋―w“ T1>仁T1>仁символы^ помимо цифр, и номер телефона может выгляцеть, например, тжсимволы^ помимо цифр, и номер телефона может выгляцеть, например, тж且且012-345-6789. или (012)345-6789, i 近，匸工^曹变二 HIсередине есть пробел) Чтобы не за口窮我宮必勺玄配 для него запись телефс金InpulncA 孫том, чтобы помимо цифр Б номер 1 '012-345-6789. или (012)345-6789, i 近，匸工^曹变二 HIсередине есть пробел) Чтобы не за口窮我宮必勺玄配 для него запись телефс金InpulncA 孫том, чтобы помимо цифр Б номер 1 'некоторые дополнительные смыва осуществлена, например, при пом<некоторые дополнительные смыва осуществлена, например, при пом<OKOK4567g9 (в<ятьозаботиться qЭТЪИ」|ITb4567g9 (в<ятьозаботиться qЭТЪИ」|ITb

File £函"沿用д0 Ffivortesh班)

，■ • ‘ 一 • •-*^" *^• . . 一- ♦ • • С . ♦—

U''吋―w“

File £函"沿用д0 Ffivortesh班)

，■ • ‘ 一 • •-*^" *^• . . 一- ♦ • • С . ♦—

U''吋―w“

T1>仁

T1>仁

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

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

且

且

012-345-6789. или (012)345-6789, i 近，匸工^曹变二 HI

середине есть пробел) Чтобы не за

口窮我宮必勺玄配 для него запись телефс金InpulncA 孫

том, чтобы помимо цифр Б номер 1 '

012-345-6789. или (012)345-6789, i 近，匸工^曹变二 HI

середине есть пробел) Чтобы не за

口窮我宮必勺玄配 для него запись телефс金InpulncA 孫

том, чтобы помимо цифр Б номер 1 '

некоторые дополнительные смыва осуществлена, например, при пом<

некоторые дополнительные смыва осуществлена, например, при пом<

OK

OK

4567g9 (в

<ять

озаботиться q

ЭТЪИ」|

ITb

4567g9 (в

<ять

озаботиться q

ЭТЪИ」|

ITb

ПроверкаПроверка黑 MvComputw黑 MvComputwТелефон ]Z3k

Проверка

Проверка

黑 MvComputw

黑 MvComputw

當而六一

При помощи функции testu мы проверяем, являются ли вводимые символы допустимыми ( т.е. содержатся чи они в списке допустимых символов).

Доставкаинформации,вводимойпосредствомформ

Кжпе существуют методы доставки вводдмой пользователем посредством форма информации? Самый простой способ доставки информации пз форм — электронная почта (e-mail). Этот метод далее мы рассмотрим немного более подробно.

Есин же Вы захотите, чтобы введенная пользователем информация была обработана на сервере, то Вам npwms использовать возможности CGI (common Gateway Interface). Пользуясь возможностями серверной обработки форм, мы имеем возможность обрабатывать поступающую информацию автоматически.

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

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

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

Мы также не сможет записать отзывы впзптеров в гостевую книгу, расположенную на сервере 1фи помощи JavaScript, поскольку JavaScript не способен осуществлять записи в файлы, расположенные на сервере. Это возможно осуществить лишь средствами CGI.

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

Посылка формы посредством e-mail ос^тцествляется при помощи программы-с!фипта, написанного в рамках языка HTML. Нам не понадобится даже JavaScript. Конечно, JavaScript может оказать помощь в случае, если перед тем как ^дет послана заполненная форма, требуется проверка введенной информации. Еще необходимо отмеппъ, что команда mailto работает не везде. Тж Microsoft Internet Explorer версии 3.0 не обрабатывает такую команду.

<tbrm method=p 0 st action=''mailto:your.address<S>runs.tiere'' enctype=''text/plain "、

Вам поирэБппась эта страничка?

value—'1'' 'Ни капелькп.< br、 value=''2'' CHECKED^value='3'' 4?3mm плохаяvalue=''Send'' *value—'1'' 'Ни капелькп.< br、 value=''2'' CHECKED^value='3'' 4?3mm плохаяvalue=''Send'' *<input name—'choice'" type=''radio''

value—'1'' 'Ни капелькп.< br、 value=''2'' CHECKED^

value='3'' 4?3mm плохая

value=''Send'' *

value—'1'' 'Ни капелькп.< br、 value=''2'' CHECKED^

value='3'' 4?3mm плохая

value=''Send'' *

<input name—'choice'' type=''radio'' потратил времяХЪг、

< input name=''clioice'' type=''radio''

страничка в сетиХЪг'

< input name—'submit'' type="submit‘

</fomi'

Свойство enetype^- "^xt/plain "использовано для того, чтобы ввощхмый текст посылался в "чистом" виде, т.е. как простой текст, без вспомогательной информации (программы, описывающей саму страничку). Тощэ ответы становится читать намного удобнее.

Если до того, как форма ^жт послана по сети, тре^ется проверка того, правильно ли осуществнен ввод информации в 小\му, то необходимо использовать средство обработки событий onSubmit. В теле формы (после ярлыка <fbrmx необхощхмо обраттпъся к функции, осуществляющей про-

вер守 ввод1м<Л1 гшформащш, зга функции "лжна выпотнятъся щи ешкэ- тии кнопки Submit] Црофамма можт выпявдегь следакшщм образам:

function validate (){

// check if input ok // - •

if (irputOK)if (irputOK)elseelsereturnreturnreturn true false;return true false;

if (irputOK)

if (irputOK)

else

else

return

return

return true false;

return true false;

/fcmi/fcmionSubmit=''return validate(丿">

/fcmi

/fcmi

Какобратитьвниманиепользователянатотилиинойэлемент формыКакобратитьвниманиепользователянатотилиинойэлемент формыЕсли использовать эту цротрамму, то форма не б^дет послана через Интернет, если вводимая информация не соответствует установленным требаванняьс

Какобратитьвниманиепользователянатотилиинойэлемент формы

Какобратитьвниманиепользователянатотилиинойэлемент формы

При псмсщи метода focusf) мы имеем вшмажвкхль ^пршь нашу форму более удобнойЕДЩя пользоевателя. Мы сма^м годжазать пользователю, на кадую ферму следует обратзпь внимание гервнм делом. Или же мы смоошл подсказать иатазжпелю и обратшь его внимание на тог элемент, в котором был ввдан неправпльншг текст пли децущаш ошибка.

女о осуществляется цри помощи того, что фоузер устанавливает курсор в тот элемент, на который мы указываем посредством гфограм- мы, использующей метод focus(h Метод focus() как бы фокуецрует внимание пользователя на оцределжном элементе формы, на котором устанавливается курсор. Это осутгрствляется цри помощи следующего фрагмента программы на JavaScript:

function setfocus() {

document.first.textLfocus();

Цри гюмощц сладюодго фрагмжга программы мы устанавливаем курсор в гервсм зпемжте вышенаписанного афиша на JavaScript Нам необкещимо указать имя всей формы, которое в валкм случае 侬晔гавляет собой first, а затем указать имя текстоваго элшкша данной формы — textL

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

<body onLoad=''setfbcus()

篆二丁—ивиитяиия. т ■ ：^жа

File Edit *■. Go 达jpqw Help

Попробуйте данную программу в работе

|один пять десятьI或ВТ 竺 Н Rlu4 Н self Ct]

Вы з-ъидите, нто курсор устанавлиБаетея в текстовом элементе @ормы и осуществляется выделение содержащейся е текстовом элементе информации

11f21d

Мы мс€»®м слегка успажншъ ее. апрежлнв фу'нкппю setfocusu <жду- кшпм образом:

function setfbcus(; {

document, first. text Lfbcus();

document.first.textl.select();

Попробуйте данную программу в работе.

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

РИСУНКИ НА ВЕБ-САЙТЕ

Первые навыки создания рисунков

Загрузка изображений на страничку

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

Изменение картинок в ответна лействия пользователя

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

Первыенавыки создания рисунков

В этой главе мы рассмотрим объект Image, рисунок. 9тот объект понятен для фоузеров, начиная с версий Netscape Navigator 3.0 и Microsofi Internet Explorer 3.0 Еста Вы пользуетесь броузером более ранней вер сии, то приведенные в настоящей главе скрипты не будут работать в том объеме, в котором они изначально задуманы. Объект Image, появивший ся в версии языка JavaScrip! 1.1, позволяет осуществлять эффективную обработку изображений, например, создавать эффекты анимаиии

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

Массив изофяженнй носит имя images Изображения images — это свойства объекта document. Каждый документ на веб-странице имеет свой номер. Первое изображение имеет номер 0, второе изображение — номер один, и так далее. Таким образом, мы можем обратиться к рисунку посредством document.images[0].

Кажгюе изофяжение (кфтинка), содержащееся в НТМЬ^окументе, цре стэвчяет собой самостоятельный объект Image. Шьекг Im継 обидцает набором своих свойств, к капрш можно оёраппъся при помощи Ja\aScqpt Например, можно ужать размер изофэжния, исполь^я свойства width и hei飢

Так document.images[0].width содержшг информацию о ширине первой картинки на саранииж в пикселях, соответственно documet.images[0].height содержит высоту картинки. Иновда использование порядковых номеров KsqpniHOK на странице оказывается неприемлемым. Вто особенно сильно ощущается, если страница содержит большое количество изображений Ооряппъся к изображению в таком случае помогают имена, данные конкретным изофяжениям. Имена пзофяжений можно записать, напри мер, используя следующий ярлык:

<img src=,,img.gifi, name=,,ImageName,,width=100 height = 100>

Зятем к этому изображению можно обращаться при помощи document.myName или document .imagesI'ImageName"]. 球сь ImageName — это собственное имя данного рисунка

Загрузка изображений на страничку

Мы познакомились с тем, как можно узнать размер изображения, используя свойства объекта Image. Однако это не есть самое интересное из того, чем располагает объект Image. Познакомимся с тем, как можно изменить уж загруженное изображение на новое при помощи свойства src.

В ярлыке <inigx свойство src гредстэвпяет uopet (URL) изображения, размещенного на страничке. При помощи JavaScript 1.1 мы имеем возможность присвоить свойству src новое значение адреса для уже существующего развернутого на пранице изображения.

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

<inig src^imgl.gif name=^^IInageName^^ width=100 hei£ht=100>

Здесь картинка inigl.gif захружэется на страничку, и имеет имя IniageName. Следующая строчка программы заменяет картинку in^gl.xif на новую картинку image2.gi£

document .ImageName.src= ^^inlg2.sгc^^;

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

门]。口「псе叮 or э 为Q ’ccq 幺。нажатия ].只酬2“ 'Afe^r 飞f картинку на нов\т>:"

После того, как кнопка нажата, картинка меняется на новую

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

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

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

Можно заранее загрузить рисунок, который потребуется при дальнейшей работе со праницей. Для этой цели мы создадим новый объект Image. Посмотрите на фрагмент программы, приведенный ниже:

lnigNew= new Image О ;

Im£New.src= "img3.gif0 ;

При помощи первой строчки мы создали новый объект Image и назвали его InigNew. Вторая строчка задает адрес этого нового объекта. Как мы уже видели ранее, присваивание эдреса свойству src приводит к тому, что указанный рисунок загружается из сети. При выполнении второй строчки броузер прис!упит к загрузке картинки inig2Tgi£

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

того, чтобы показать этот рисунок на страничке, мы можм шпользовать такую строчку：

document .my Image. src= hidden Img. sic ；

После псполненпя этой комавды пзображнж будет извлечено из памягш и тотчас показано на страничке. Таким образом мы момжм пшолъзоБатькаршнкщ балл заранее 3alpужны на компьютер.

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

Поэтому, если картинка велша по размеру плп на страы晔 ссда^ «шея большое число зараже заоджземых картинок, мои砌г все же возникнуть жж^гателызая задержка вщцу того, что броузер ^дет занят работой по 3alpу引衣 пзображнггй из cent Поэтому цри работе с пзобра- яжниямп воецш сждает иметь вщцу ограничения скорост загрузки ин- формацпп из сети Интернет:

Иотользуемый метод заблаговремеинай 3alpузки пзображний ускоряет цроцесс развертывания пзображнпя на экране компьютера, но он ни в коей мере не ускоряет цроцесс загрузки пзоброжнпя из сетп. При заблэгсщремеинсй! загрузке мы лишь ускоряем начало затружя пзображ- нпй, мы застэБлжм броузер 磔псгушггь к загрузи нужных в далЕжйшем пзоброжнпй как можно скорее, не дожцгаясь нтэсредствеиного обра- гденпя к этим пзображшкм.

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

Коеечбю, если Вы тюль^етесь быстрым соединевжм с сетью Интернет, то все зга рассуждения могут показаться неубедцтельннмЕЕ “И о кэкпх таких зцжржкэх Вы туг рассуждаете?"- воскликнут они. Но еслп учесть качество многпх росспйлак телефсяшык станций и линий свягап, то даж цри наличпп хороших мсдемов со скоростыо 56 килобит, цро- бпема оптимизации затружд пзоброжний мо瞬т оказаться ащ^льнойг

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

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

Если же Вы пользуетесь старым броузером (JavaScript 1.0), то на экран будет Ецдано сообщение об ошибке. Этого, однако, можно избе- жатьт далее мы на этом остановимся немного подробнее.

Картинка 1

т* выгп^ша t^THH^r если %/三三为“七笹山肘 円^lwow за предэп^ми mа _d外■必力

Кар и 2

Так выг .仃 к тин} / •_ Патель мыши■ нечьо на

с D3>e 班《4

Вот соответствующая программа:

<а href=“#“

onMouse Over= Mdocument.mylmage2 ,src='iing2.gif °

onMouseOut=''document.myImage2.src='img 1 ,gif'>

-"img src=°irQg l.gif' nanie—YnylmageZ' width=160 height=50 border=0—' /a-

^та гфограмма не лишена некоторых недостатков:

пользователь может пользоваться старой версией броузера, программа в этом случае бупрт работать неверно;

вторая кщтшнка не будет заранее загружена на компьютер;

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

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

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

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

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

Количество исполь^'емых на странниц рисунков ж должно быть раз и нэвоецк! фиксированным, безразлично,伪坤г ли на страничке всего 20 рисунков, или ж на страничку вмещается сотня изображений.

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

Пргв^м пример того, как испраБленная программа работает:

駐 二?三"：：_. . =HSZrr 可二二二 . •回田

且

пер естан 06KH рисунков .на стр ан ичк? без шмен енйя. текстаТ

программы

Приведем пример тогог как такая программа работает1

Ссылка 1 Ссылка 2 Ссылка 3」

А ест и метод!駐ы贊 TI3XT программы了

При помещении указателя мынл^ на любую ссылку (представленную картинкой). соответствующая ссылке картинка меняется

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

А вот и исходный текст программы:

-html>

-h >

<scnpt 1 angij.age= “ JavaScript "广

< 1 - hide

// nepei-i^HHM для проверки ноиера Bepcini оро^'зера/языка. JavaScript

var brc-i .зегиК11 二 false -

vxl pics ； // ->

</script>

<scnpt lai= “ JavaScnptl. 1''>

< 1 - hide

// п( uhm щ >ni be ini принт г ист! doe 三начев

// если бро^-зер поддержпвает JavaScript 1.1

1 r< .. erC'F = tn ；

亠 ics = ns r Arra^'()；

/7 г

<?Г1 二>

<scnpt 1 angij.a.ge= “ JavaScript “ >

<1- hide

v^ objCoxmt = 0；// количество изоораженпй на. странгще

fxmction preload (пап(е, first, second) {

// предварительно загр!-? .ем все рпс二нтис：： >льз^-еиые на.

страничке, со7^>жяя их в виде иа.сспЕа

if За С) {

pics [objCount] = 口白“ Arra^- (3 )；

pics [objCount] [0] = nw 孑 Im< re ()；

pics [objCoxmt] [0] . src = first；

pics [obj Count] [1] = net г Image ()；

_ics[obj Count] [1] .src = secor ；

pics [objCoxmt] [2] = nan(e；

• xmt++； }

}

fxmction on (nan(e) {

if (Ьгс-ж rC'F) {

for (1=0； i < obj Count ； i++){

if (docijn(eiit. images [pics [i] [2] ]!= null)

if (na 3 1= pics[i] [2] ){

// все прочие картинт не показываеи

'ось ent. и - >ics [i] [2] ] . src 二 pics[i] [0] .src；

} else {

// втор^-ю картинку- показывaeu, когда, по ней neg二一一一 一 -тел ку poop

d^ TU'r^'it. ir^^^s [yi ^r [i] [2] ] .^rc 二 pics[i] [1] .src； }

} }

function off () {

if (Ъго^-serOK) {

for (i = О; i < obj Count; i++) f

// все прочие картинки скрываем

if (document.images[pics[i][2]]!= null)

document.images[pics[i] [2]] .src = pics[i] [0] .src;

// предварительная загрузка картинок, необходимо указать, какие картинки должны быть загружены, // а гакже также какому объекту Ima^e на страничке они со отае тствуют

// (перЕЕШ аргумент функции).

preload(''linkl'\ ''imgl f.giF', ''imgl t.giF')；

preload(''link2'\ ''img2f.gir\ ''img2t.gif');

preload(''link3'\ ''img3f.gir\ ''img3t.gir')；

//

"/script、

Thead>

->body--

"a href =''link 1 -htmM onMouseOver=''on ( 'linkl') ” onMouseOut=''off ()">

‘iiqg name=''link 1'' src=''link If .giF'

width=''14O'' lleigllt=,'50'^ border=''0''x/a>

"a href =''link2.titm'' onMouseOver ''on('link2' ) '' onMouseOut=''off()">

Ging name=''link2 ” src=''link2f.gir' width=''140M height-''SO'' border=''0''> /a>

「a href= Mlink3 .titm'' onMouseOver=''on('link3' ) '' onMouseOut=,'off()">

"img name=''link3 *' src='' link3 f. gif'*

width=M 140'' height=''50,' border=,'0M> -/a>

a/body；

^/html

Этот скршт располагает все картинки в массиве pics. Этот массив создается щже помощи обрапкюш к функции preloado (см. начало программы)- Мы впдапц что обращение к функции preloadO можно осшесгвпть таким образом:

preloadC-iinkr', "img lf.gif', ''imglt.gif');

Смысле данной строчки состоит в том, что протсходгг загрузка двух изображений uiiglflgifii 加g〃g必 Первая картинка ®дет демонс!риро- ваться на страничке тогда, к国取 указатель мыши не будет располагаться

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

Первый аргумент функции '，叫？" 1фи обращении к функции preload()— это имя объекта Image изданной странич 糕，к которому относятся эти два загружаемые изображния. В теле странники, за ярлыком • body> мы встретим рисунок с именем inigl. Мы используем имя мзофяжения, а не его порядковый номер. Это делается для того, чтобы оставалась возможность изменить порядок следования кфишок на страничке и цри этом не менять текст про1раммы.

Функщ1и оп() и offi) вызываются путем обращения к ним внутри средотв обработки событий onMouseOver и onMouseOut. Поскольку изображения сами по себе не могут реапфовать на события MouseOver и MouseOut. го мы использовали ссылки, поместив изображения внутри ссылок.

Из приведенной профаммы мы В1щнмэ что функция оп() “убираеТ' все картинки, за исключением одной. Это делать необходимо, потому что можт создаться такая ситуация, коща выделенными (как если бы на них находился указатель мыши) окажутся несколько картинок, так как требуемое для снятия выделения событие MouseOut может не насупить. Например, такая си!уация возможна, если курсор был передвинут с изображения сразу за пределы окна броузера.

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

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

9

слои

Что такое слои

Как создать слои

Слои “ JavaScript

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

Чтотакоеслои

Слои обозначаются английским словом layers. Слои появились с возникновением версии 4.0 броузера Netscape Navigator. При помощи слоев стало возможным позиционирование элементов веб-страницы щ)и помощи задания абсолютных координат слоя или координат относительных, задающих положение слоев друг относительно друга.

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

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

Расположим наши листы бумаги на столе. Каждый лист оумап! — это слой. Это своеобразный носитель той информации, которую мы в этот слой влсжипи — налжтахмы написали теюзт; нарисовали рисунок, эта информация содержится на наших листах, на слоях. Слои содержат объекты.

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

Слой — это носитель этих объектов. Если слой передвинуть, то все объекты данного слоя переместятся вместе со слоем. Слои могут накладываться друг на друга точно так же, как можно наложить друг на друга листы бумап! на столе. Каждый слой может иметь прозрачные части.

Если вырезать на листе 5yMаш круг, то через получившееся отвер- сию можно видеть часть другого листа, расположенного под тем, на котором вырезан круг Круглая дырка — это прозрачная часть нашего слоя. Через прозрачные части слоя видно содержание того слоя, который расположен непосредственно за данным слоем.

Как создать слои

Для того, чтобы создать слой, используется ярлык <1ауег> или ярлык

<ilayer>. Слои могут обладать следующими свойствами:

nsao^'layerName “

IdtrJbsiti侬

.Название слоя

,Горизонтальная (х) координата верхнего левого уша слоя

{ор=^йиййи?

Верипсальная (仍 координата верхнего левого угла слоя

z-ini^=!ayerlndex.

мМ1Ь=й^1П/й&

C师='也此工2,/2"

.Номер слоят его "индекс глубины"

Ширина слоя в пикселях

Данные координаты определяют расположение

Е1ЩНМОЙ областа слоя

^we^layerName "

Зто свойство определяет имя слоя» над которым будет расположен данный слой

Ij^fWF^layerName “

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

队疝丽尸bo砸ide|iiiberit

I)ga4M='浓Z<bfor"

Свойство задает параметр видимости слоя Свойство задает цвет фона слоя, это либо название ставдяртаого цвета, либо значение igb цвета

hackgroimd=iw 整 KRZ"

Свойство задает рисунок фона слоя

Ярлык \1ауег> используется для создания слоев, положение которых задается в явном bi陳 посредством свойств 始 и top. Если положение слоя на страничке не указано, то слой буд^т расположен в левом верхнем углу окна странички.

Ярлык <ilayer> используется при создании слоя, который располагается в соответствии с условиями формирования HTML-документа по ходу его создания.

Начнем наше знакомство со слоями с простого примера. Создадим два слоя, на первом слое поместим рисунок, а на втором слое текст. Мы хотим показать текст поверх рисунка.

Приме!Приме!мими

Приме!

Приме!

ми

ми

Нт этом wciw.己 мы виднее, что текст располагается 卩口尸^以、“ciw頃

Исходнъш текст щхярэммы таков:

'-htmV -

'-layer name=pic z-index=O left=200 top=100 ^ '-itqg src=''img.giF' ^ldth=160 h.eight=120 ^

u/layer >

'-layer name=txr z-index=l left=200 top=100>

'-font size=+4> 直 i > Пример co слоями ■- /i * '- /foul 、二/layer、

V/htmT-

С помощью щшыков <1яуег> мы определили два слоя. Оба эти слоя расположены в точж 200/100 (кюордпняш в пикселях соответствуют положению верхнего правого утла слоя). Коордпнаш слоя мы зздалп с помощью сбойсте feft и top. Все, что располагается мезвдт ярлыками <1яуег' и </1яуег> (пли межпу ярлыками <Йауег> и 二仙界工>).тцишадле- жит этому слою.

Мы такж псполъзовалп свойство z-index. При помощи этого свап- сгва мы устаноыпп порярюк следования слоев плп порвдок их налоазе- ния друг на друтэ. Слой с самым болыштм значением z-indeMa %дег находиться на самом верху. Для зна^шш z-faidex'a не обязательно ис- поиъзоейпъ последовательные числа.

Достаточно того, что&л зап числа были целыкш. порярток налпжшгя слоев друг на друга сир^оелжгся этпкш чпсламп. чем 6олеи« значенж z- 如des, тем '"выше” распотжен слайь Если, нащигмер, мы написали бы в ярлыка <1яуег> б первом слое выра衣：нж z-hid^=30, то этот елей был бы ггакязан поверх друтого, т.е. текст был бы распсложен за ртсуташм, лоскогаку слеп, ссжржагшш текст, имел бы тогда меньшее жаченж z- indeMa.

Приме

На этом 戸 <е текст рНа этом 戸 <е текст р〃 картинки.〃 картинки.

На этом 戸 <е текст р

На этом 戸 <е текст р

〃 картинки.

〃 картинки.

Слои и JavaScript

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

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

<1ауег …пame=myLayeг^^

■'/layer >,

то мы сможем в дальжйикм обряппъся к слою 118fqпдсгвом выражения document. layeTs[,rnyLayer,,J или выражения document, ту Layer. Конечно остается возможнослъ обращения к слоям посредствен числоылх иврюксов, самый нижний слей щ)и этом моя史т бьпъ описан при пемощи выражения doeumait.lay€fs[0]. Не сл^ет путать числовой индекс слоя в выражениях только что привранного выше типа с z-iade^oM слоя. Это две разные, в^зэшгагмые друг от друга веши.

Так. например, у нас есть два слоя, наганные, скажем, layerl и 闻ег2, причем layerl имеет z-hidex, равный 11, а 1^ег2 имеет z-hide* равный 20. Обращаться к этим слоям надо 1фи пемощи выражений docuniait.laya'slO] и document, layers[1], но никак не при помощи documentJayersflljTidocument.layers[20].

Объект layei обладает мнопм! свойсгваът, которые мсгуг бьпъ пженены средстЕэмп языка JavaScript. Как мы и собирались нанять наше знакомство с ngpimepa, расшоприм вариант, кс硒а при помощи нажатия кнопки мы имеем во孙южнонъ скрыть или пакязагь един единственный слюй.

При ?э; гэ HTML-документа строка "Этот текст рэ *ен внутри с. -я' • /дна

瞬客3-」口｝

玖 £& Yw jjo 型团dw Help

Объект layer обладает многими свойствами, ксернс могут быть нзмснены О>едствамя ягыка lavaSojpL Ках мн й собирались начать наше знакоистге с примера^ рассмотрим пример, кегдалрп помощи начатия кнопки мы имеем возможность сирытъ млн показать «дне едитньЕенкн/ слой

Скрыть,п，и^ать 工师I

Ис^дный текст прстрамым таков

<kcml>

<Uead>

“一 二

'才"、Doctweril'booc "

После нажатия кнопок "Скрыть доказать слой" строка исчезает. Повторное нажатие 片 册“ заставляет 匸"С贬 вновь стать б 二 енм

Исходный текст программы таков:

-html>

-he id>

<scnpt 1 angij.age= “ JavaScript “ >

<1- hi'e

function shoiiHide (){

if ( ' >cijn(« it. la^'^rs [^т^-Ьа^-ег1'] .visibility- == “wf w“)

0cl ent. lasers [“ m二・L①・er “] . vi sibi li 七二二 “ hide “

-Ise docijn(Eiit. layers [*'叱-Layer “ ] . vis 1±>工 1工七二= “ show1' ；

// ->

</script>

</head_- < ><fc->

<ilai'er n an(e=in^'La^-er visHbzLlzLtL.f

<font size=+l color=“#0000ff “><□_> 3rгот текст расположен

УТРИ СЛО51< /1>< / fon t >

</ilayer>

<form>

<input t'pe= ''button1' value=11 Скрыть /поn^ать слой11

nCl ick=11 s?. rHM a () “ >

</form> v/bc・dy> </html>

Нажатие кнопки приводит к офащению к функции sfwnrHide(). При помощи этой функции мы обращаемся к свойству visibility объекта layer с именем myLayer. Путем присваивания значений Stow'br '力/&»”выра- женмю document, ktycrs^inyLayer"], visibility мы имеем возмсжносгь прятать или показывать этот слой.

Выражения 奪Лои「и hide"— это строки, они не являются зарезервированными в JavaScript словами, а это значит, что мы не можем написать выражение document. Iayers[力皿研т ?>玄血侯r= s加w.

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

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

Как мы уже знаем, цри помощи свойств 1ф a top можно задать гюложние слоев. Если изменить значение этих свойств, то располож- ние слоя изменится Следтсшая строчка задает горазонгалыю располо- жнне слоя, равное 200 пикселям:

document, layers [ ° my Lay er2 ° ] Jeft = 200;

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

Км £^ У»« Ь» Угнх» Ь^»

SpO4k；>*M：4 FCjHWON ПОХЬМ |лМХХЛОааи*<11(*4； [«4RtK& 2傷 1Жж£«ха

илехасг jiwx»C，yUyeC『 .Mit- AWi

Gnux zu а&пнз，“11р<тршм7，м n^£v^，vt4v№fit・n5*0aMER*uou 察屈〃!6£昧»十宀> ЗЕ^ЕШЕггГУЛЛ1Ы1*йсадЕ«тГ<Г<

》《£伐《5f X *•0>w 女二 У f 史-6,

Kc г м。小 "&"4

акв М1>ГЛ_"Т2,?В，ГЕ111И〉rux СВСНЕ. Тс「、С1；«>；:»3》еЮК SQn lTM2fr“Xt停'；A!U1>V7U；*3 с*/и^маб”2Аиа|и》сцс・(дсво*е1Гпитт&Еа1(。* 2 抬 пнкешмакв М1>ГЛ_"Т2,?В，ГЕ111И〉rux СВСНЕ. Тс「、С1；«>；:»3》еЮК SQn lTM2fr“Xt停'；A!U1>V7U；*3 с*/и^маб”2Аиа|и》сцс・(дсво*е1Гпитт&Еа1(。* 2 抬 пнкешм* »«< l«ytr5[*t»Xbey*r3•i CefR・・ 400?* »«< l«ytr5[*t»Xbey*r3•i CefR・・ 400?W* 丛Е«^Г<»*П£И»\7 - "R^e HQNW* 丛Е«^Г<»*П£И»\7 - "R^e HQNg| 34 呼 иуьшшg| 34 呼 иуьшш<wr-♦f>*wv<wr-♦f>*wv

акв М1>ГЛ_"Т2,?В，ГЕ111И〉rux СВСНЕ. Тс「、С1；«>；:»3》еЮК SQn lTM2fr“Xt停'；A!U1>V7U；*3 с*/и^маб”2Аиа|и》сцс・(дсво*е1Гпитт&Еа1(。* 2 抬 пнкешм

акв М1>ГЛ_"Т2,?В，ГЕ111И〉rux СВСНЕ. Тс「、С1；«>；:»3》еЮК SQn lTM2fr“Xt停'；A!U1>V7U；*3 с*/и^маб”2Аиа|и》сцс・(дсво*е1Гпитт&Еа1(。* 2 抬 пнкешм

* »«< l«ytr5[*t»Xbey*r3•i CefR・・ 400?

* »«< l«ytr5[*t»Xbey*r3•i CefR・・ 400?

W* 丛Е«^Г<»*П£И»\7 - "R^e HQN

W* 丛Е«^Г<»*П£И»\7 - "R^e HQN

g| 34 呼 иуьшш

g| 34 呼 иуьшш

<wr-

♦f>*wv

<wr-

♦f>*wv

б/ j ^ картинки "г "?，ль^ые но， • •兩 текста "Этот текст

-巾寺 BKiyp" Г' в к ! ■ игл а Тб т . • 2m夕 вместе со cnoe^i, гное, ль, е пог — .始 ь?п? в 1.не opov; оз Messrs со 血糸甘■，тз\

斗.это огчктно в н皿•_» ск^.ште

F t р np( :勺： 二 html> <•• >

<script langij.a.ge= *'JavaScript “ >

<'-hide

fianction move () {

if {i s v cdi rec tion=true；

if (pc-s >) direc cn= fal )

if (direction) pos++ el se pos—；

document.layers [,'myLayer2,,].left= pos;

}

// ->

/script >

head〉

«body onLoad=,'setinterval ('move () ' , 20) "、丁

ilayer name^myLayer2 left=O>

«font size = +l со1ог=''#000(МГ'^^i>Этот текст расположеи внутри слоя- /i>< /fbnt>

</ilayer '

〈/body、 < html>

Здесь мы создали слой с именем myLayer2. Внутри ярлыка、-body> мы описали свойство o/iLoad, потому что мы хоспем, чтобы движение этого слоя началось сразу же после загрузки странички. При описании средства обработки событий onLoad мы использовали функцию setlntcrvali). Этот метод позволяет обращаться к функции множество раз через заданный промежуток времени. Этот метод появился в JavaScript версии 12

В цредвдущей главе мы пользовались методом setTmieouUh Метод sethUervaU) работает аналогичным образом, требуется лишь единственное обращение к этому методу. С помощью метода setAUerval^) происходит обращение к функции тш^〃 через кяжоый 20 миллисекунд. Каждый раз функция /псп牡(J устанавливает новое положение слоя.

Регулярное обращение к этой функции приводит к появлению эффекта равномерного передвижения слоя по 31фану внутри окна броузера. Все что требуется от функции move() — это сосчитать очередное значение координаты положение слоя и присвоить его посредством document. 1ауег8[УтЬауег2"].1ф=ро5.

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

ошибке. Этого можно избежать. Для этого в ярлыке <script> жобходсио указать версию языка, т_е. попросту написать так:

< script1 anguage=и J ava S crip 11.2 и >

<!- hide

... (здесь расположен текст программы на JavaScript 1.2)

// ->

</scrip t>

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

Спо^, содержащий текст, является про^)аччым и передвигается поверх неподвижного слоя с картинкой

-zhti((l>

<^ ad>

vsurip t 1 angii：age二 ” JavaScoript ” > < ! — tlld€?

function move2 ( ){

j_t (pz-s2 < 0) direct ion= tome ；

if (p« з2 > 200) d.ii?€?ction= false, if (d.u • sc loel) pc 2++ else pos2—,

docume nt.lavers [''myLaye r3''] _left= pos2;

// -

、/script--

' /head-

' "body о nLoad=''setInterval( 'move2 () ' , 20)" -

、ilayer name = YnyL^rei3'' left=O z-mdex=21"

' font size =+lcolor=''#0000fT'' -' 1' ОТ ОТ текст расположен внутри слоя- /i -、/font >

'-/ilayer^

、ilayer name = YnyLayei/T' z-index=''19'''-

-img src= 'img.gif* widtii='160'* height=" 120"

'-/ilayer*^

'/body-

、/html>

10

и вновь о слоях

Вьщеление видимых участков

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

Прозрачные слои и эффекты с ними

В предыдущей главе мы рассмотрели основные свойства слоев и методы обращения с ними. Б этой главе мы рассмотрим следующие вопросы:

выделение видимых участков;

вложенные слои;

прозрачные слои и эффекты с ними.

Выделениевидимыхучастков

При работе со слоями мы имеем возможность задать прямоугольную область внутри слоя, которая будет ввдима. Вся остальная часть слоя будет неввдима. Для этого можно воспользоваться свойством, используемом в HTML, свойством clip. Пример задания видимой областа приведен ШЕ^е:

ilayer left=O top=0 clip=,,20,50,110,120м -

img sr с=*' davin ci J pgM width=209 height=264 -

/ilayer ■

Здесь мы установили нулевые значения положения слоя【они также устанавливакися по умолчанию» и задачи координаты углов В1щимой части слоя

Несмотря на то, что полный размер изображения составляет 3)9x264 пикселей, мы будем В1№ть лишь малую иасть от всего изображения

Размер Е1ЩИМОЙ части — 90x70 пикселей. Первые два числа в значении clip в ярлыке <ilayer> указывают координаты левого верхнего угла Е1ЩИМОЙ области, следающие два значения соответствуют координатам нижнего правого угла этой области. На следующем рисунке В1щимая область выделена четырехугольником и заштрихована.

Наиболее интересным представляется использование возможностей задания видимых областей изображений при помощи JavaScript. При помощи JavaScript мы можем изменить значения таких свойств объекта layer, кз^к clip.left, clip, top, clip.light и clip.bouom.

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

U BНОbe 0匚如牙工

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

-html>

-h_ad>

<scnpt 1 angijage 二二''JavaScript “ >

<1- hide

var middle；!, middle 7, pos, fxmction st^t (){

// пощ-чаеи размер pnu二he二a. var widths

c CLunent. la^-» i [M imgLa^-erM ] . doojiii nt .davinci л dth； vrt height ==

c cijiiient. layers [“ imgL< ，er “ ] . docv ent. davinci. heic at ； // вычпстаеи координаты центра рис^-нпа.

middle；!- Ma.tli. rc-und (width/2 )；

middle T~ Math. rc-und (height/2 )；

// зад三 м начальное положение pos~ 0；

// ззп1-спаем партинп;- show ()；

}

fxmction who】：){

// 1'веШ1Ч11Ваем распер еидгдюй odпасти os+二 2；// величина, и j.ra

docLiinent. la^-ers [ ,^lIngLa^■er,^ ] clip lef t== middle；!- pos ； docijiiient. layers [“imgLa^'er''] . clip . top- middle7- pos ；

Loci nt. lasers [*'lIngLa^•er,^ ] .clip .right = midd 吟二十 pos ； docLiinent. lasers [“imgLa^-er“] .clip Лзс-ttom二 middled + pos ； // цроЕ 」,二я ли ] тиъ ал

if ( 1 ^ ipc-s > middle；!) && (pc-s > middled))) setTimeout (“she • () '' x 20 )；

// ->

</script>

</head_-

-b、>

<ilai°er naiiie-''imgLa^-er'' clip-"'0 x0,0 x0 M>

<n j naiiie"davinci src~ *'davinci. jpgM width-209 he ■ t二〕"4> v/工工①--

<form>

<input 七二I>L V .' -^П^-ск'' оck~11 s 】「t () ''>

</form> v/bc・dy> </html>

Кнопка, расположенная в теле странички за ярлыком <body>, приводит к обращению к функции start(). Первое, что необходимо вычислить —это координаты точки, расположенной в самом центре картинки. 3ni координаты сохраняются в переменных mddkX и "血d距工 Затем проис- хошгг обращение к функции $Лои". Эта функция устанавливает размер Е1ЩИМОЙ области рисунка, который определяется значениями переменных middled middleYnpos.

Переменная pos увеличивается всякий раз, ксяда происходит обращение к функции $Лб” С кэхдым новым обращением к этой функции в1Щ11мая часть рисунка становится все больше и больше В конце тела функции $『юи，〃 мы используем setTimeouU).

Процесс увеличения Е1щимой области, т.е. обращения к функции show(), повторяется снова и снова до тех пор, пока вся картинка не станет Е1ЩИМОЙ. После этого работа программы заканчивается. Окатите внимание на тот каким образом мы получили информацию о размере картинки: 、:ar width=

document.! ayers [''imgLayei'']. document, davinci. wi dth.;

var b.eigh.t=

document.layers[''imgLayer'' ] .document.davinci. heigh, t;

При помощи выражения docufnent.Iaye^[,lmgLayгr,,] мы можем обратиться непосредственно к слою с именем imgLawr Зачем мы используем дополнительно слово document и располагаем его после document. kiyers「imgLayer”7 ?

Дело в том, что >^хдый слой содержит в себе свою собственную HTML-страницу, иными словами, каждый слой имеет свой собственный объект document. Для того, чтобы о^рататься кон!фетно к рисунку, расположенному в слое, а значит, на пряничке этого слоя, нам необходимо вначале обралпъся к объекту document этого слоя. Картинка в этом документе ноинт имя б&п喩iri, поэтому за словом document мы пишем davinci — имя картинки, к которой обращаемся.

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

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

Здесь мы определили первый (родительский) слой и дали ему имя parentLayer. Этот слой содерж11тдвадруп1х слоя, названных lay&rl и 1ауег2.

На НТМЬ-сфаничке мы ыцрт три кнопки, при помощи этих кнопок мсжно заставить слои двигаться по страничке и друг отноапельно друта или останоЕить их. Мы шццем, что движение ращгкльского слоя paientLayer влияет на распожхжешк дочерних слоев l^erl и 1^ег2. Однако движение дочернего слоя 出目1 (или 1^ег2) приводит к изменению располюжения текста, ссдержашегося лишь в этом слое.

Рассмотрим гротрэмму, создэкхш^то эти слои:

<htn(l> head>

< script 1 зпди土 ： m= “ JavaScript “ >

< [-hide

/ / нэта.пьное положение

v^ р< = 0;

v^ posl= -10;

v^ ;2= -10;

/ / параиетры| зад^щпе состо5тнпе движения ипи покоя слоев

' ir 〉ve0 = trije;

' от :>\ 1= fal.三； var move2 = false;

/ / up。工ка нм ； пения двг > • ешя

v^dir0= false;

vardirl= false;

vardir2= true;

fxmction startstop (wnich) {

if( nk±l == 0)iriov* □=!m。您口

if(^iiic±L == 1)movel=Iinovel;

if (^iiich == 2) r 二！i ;

}

function move(){

if (moved) {

/ / ДЕиженпе спс-я p ^entL^er if (dix。)pc 0- else pos0++;

if (pc 0 < -100) dir0= fal >吟；

if (pc 0 > IC ) dir0= trije;

document ♦ l^ers [ ”parentLa^^er^^] .left= 100 + posO ; } if (irofT) { / / дв]： - 1ние слоя la^^erl if (dirl) posl else posl++;

if (peel < -20) dirl= false;

if (『二「T > 20) dirl= true;

docui ant. lay rs [ "p arentLa^^er^^ ] . l^ers [" 1&一 erl" ] . top= 10 + posl;

} if (ihof2) { / / дв -3 слоя l^er2

if (dir2) pos2- else pos2++;

if (_< -2 ) dir2= ilse;

if {pC's2 > 20) dir2= trije;

C cum ent. layers [ ^p^entL^er11 ] ♦工①”ei [11 la^*er211 ] . tc =10 +

pos2

}

}

/ ->

</script>

</head=

< .3; onLoad= " set Interval ( * m。中 > ()，，20)" >

<il^er nan(e =parentLa^*er left =100 top=0>

<l^er nan(e=l ./erl z-ind^ .=10 left=0 toj =-10>

F?。слс 工毛 rl

</lai^er>

<l^er na. - 2=1 匚 er2 z-in .) left 0 top=- )>

Fro слой la;er2

</1 • ar> br： br>

2?。родит ельскпй слст!

</ilayer>

<fonn>

< input type 二"butt on” value =и Денг ат ь / стан вить род： сле к 1 слой м опС 1 ick=и s t ^t Stop (0 ) ; и >

< input type = ” but ton ” value = " Двигать / Сстано] : тть слои 1 . /erl ” опС 1 ick= и starts top (1);">

< input tvp e 二"but ton ” val ”Д]гак ь1 /е 2 й

onClick=wstartStop (2) •"> </form> </i L> </html>

Из примера мы Е1щнм, что внутри родительского слоя мы задали дез самостоятельных слоя. Эта слои являются вложенными слоями по отношению к роднтеньскому слою. Каким способом мы можем обрашться к этим слоям на языке JavaScipt? Вот как это сделано в примере в функции move():

document.layers[''parent Layer''] .left= 100 + posO;

documentdayers [''pare nt Layer''] .laye rs [''layer 1''] .top= 10 + posl:

document .layers [''pare nt Laye r''].laye rs[''layer2''].top= 10 + pos2;

При обращении ко вложенным слоям мы не имеем возможности писать коротко document, layersl'layerl 7 пли docianentlayersllayerZ], Это объясняется тем, что вложенные слои layerl и 1ауег2 расположены внутри самостоятельного объекта paientLayer, и доступ к ним возможен только через объект paientLayen

Мы научились задавать параметры Е1щнмой областа рисунка. На следующем примере мы посмотрим, как можно совместить возможность задания Е1ЩНМОЙ областа слоя и движение рисунка по HTML-странице. Здесь мы ставим перед собой задачу создания неподвижной В1щимой области на экране, и написание программы, движущейся по экрану картинки. В1Щ11мая область не будет передвигаться по экрану вместе с картинкой, она будет оставаться неподвижной.

^хзддаш ~^Ш^^>^^^^ШЯВЯЁШЯ^^^№^^

:翼 ZJt 丑 £0里p-LMp

Г N ♦'Г N ♦'JDocMmert.Dwej；JDocMmert.Dwej；

Г N ♦'

Г N ♦'

JDocMmert.Dwej；

JDocMmert.Dwej；

Рисунок "прокручивается" в неподвижной фиксированной видимой области экрана броузера

Программа выглади сл^дуюпдш образом:

litml>

<script 1 angij.a.ge = " JavaScr ipt ” > < ! - hide

v^ pos= 0 ；/ / нэта.пьное положение

v^ direct ion = fal э;

function move] i ?lip (){

if (pos<-180) direct ion= true；

if (_i，3) direction^ fa ‘ ;

if (direction) pos-*-= 2

else pos-= 2;

docijmjent. layers [ "clkRp ingLai^er " ] . layers [ ” in <Lwer " ] . top= 100 + pos •

// ->

</script>

</ht ■ >

}x•比，onLoad二” setInterval ( * moveNclip () ，20) ； n>

<ilai*er nan(e =11 cl ipp ingLai^er11 z-index=0 с11р = и20,100,200,160й

to =0 left=0>

<ila^*er nan(e=и imgLa^^er11 top=0 left=0>

<i 孑 пзп(е=da.vinci src=f,divinei. jpg** width=209 height =2 64>

</ilayer>

</ilayer>

</}DC'^>

</html>

Ел早 раз обратим внзгманне на то. каким образом мы обращаемся ко вложенным слоям:

do cument .layers「’clippingLayer”] .la yers「'img Layer”] .top= 100 + pos;

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

Прозрачные слои и эффекты с ними

При помощи прозрачных слоев (или частично прозрачных слоев) можно создавал, довольно тппереснж эффекты. Особенно [штересны эффекты с мсполъзованием прозрачных изофажний. Если используются графические файлы, изображние которых не затеняет располая^н- 1510 слоем но© графическую информацию, то мы ижем счасипщ^о всвможность создания кажсгвенных анимационных эффектов.

В кажсгве примера рассмотрим программа, создающий) несложный •эффект "вползания*' одной чэсвг изображния в дату310 его часть.

о6mе 飞”

「z “ww

Рисунок постепенно складывается и образует одно целое из двух частей. На картинкахпоказанэтотпроцеосвегоразличныхфазах

Для создания этого эффекта использованы две клиники. Эта картинки движутся друг другу навстречу, одна — снизу вверх, другая — сверху вниз. Вот эти картинки:

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

Вот программа этого примера:

-html> -head> script langi_ 3=“J - iScnpt'^ < 1 - hide v^ pos= 0；// начальное положение

v^ mi-Tim er = null ； fxmction move () { pos+= 3；// эчпчпна. одного шага,

doojnient. la^-ers [ ''clippingLa^-er u ] . layers [ *' imgLa^-erl *' ] . top=

34 + pos ；

doojnient. layers [ ^clippingLa^-er *' ] . lasers [“ imgLai'er2 “] top= 264 -pos；

if {p 夂 2 1) in^-TiR • r= s tTime At (' mov ()・,1 else mi-Timer= null，

}

function st^t ( ){

if (mi-Tim *^== null) { pos= 0 ； move ()；

} } ‘->

</script> zhe L

二 body onLoad= “move () “〉 <form>

<input t^-pe =13ij.tton value= ''St^f' onClick= “st^t ()； “>

f ： i>

<ilayei naroe='cljqppiiigLayer'' z-inde的=0 clip=''209,264'' top=0 left=0'

<layer name='tmgLayer 1'' top=-2c>4 left=0 '

7iqg name^davincil src=''davinciLgif' width =209 height=2^4'

</layer

<layer name='imgLayer2'' top=2&4 left=l '

<img name=davinci2 src=''davinci2 .gif' width=209 height=2o4>

</layer、

</flayer '

、/body -

</htiril »

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

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

11

СОБЫТИЯ В JavaScript 1.2

Новые события

Объект Event (событие)

Перехват событий

Новые события

Ранее мы уж упоминали о том, что JavaScript 12 имеет возможность обрабатывает новые события, которые не описаны в более ранних версиях языка. В таблице, расположенной ниже, перечислены события JavaScript 12

Abort 丽 Click Change DblClick DragDrop Error

FocusMouseOutSubmit

KeyDownMouseOx'erUnload

&yP^ssMouse Up

KeyUp龙济《

Au」B^set

Mouse DomiRest尊

MouseMoveSelect

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

-html>

-head>

< script 1 juaj s= *' JavaScrip t'' > window. onres ize = me ssage,

~xnction me*> () {

alert (''Размер ciths. был изменен 111);

</script>

< /head.-

・d^->

ИЕиените 〜「一p окна.

</html>

Fifer E& %w. iffl it#x»w 口咖

Please resize tiie window

滴，一 [Dortlmert: 0^

Размер окна был изменен и JavaScript позволил отследить факт изменения размера окна

При помощи строчки window .onresize = message;

мы задаем действие, которое 纷毋т осуществлено при наступжюп! события Resize. Мы определили средство управления соитием onResize. Функция /?кщ^О 5дет выпапш^на при пзмежнш! размеров окна. 5врсь мы сщедешип! средство обработки соСКшя новым для нас способом, однако этот способ не является новым для JavaScript 12 Вержмся к ранее рассъкиренным примерам Если мы жгпгм определить средство обработки события, связанного с нажатием кнопки, то мы можем написать щххрэмму привынным способам, как мы это делали ранее:

'form name—,myForm,,>

< input type= м but ton M n ame= *' щ;тВи t ton11 onCllck=,^ alert ( 'Click event осолгг? U ')">

</form>

Тот же смысл несет в себе ст^дующий текст программы:

•tfbrm name—,myForm,,>

<input type=11 but ton и name= ^^щ;^Button,^ >

</form>

^.script language —'J avaS cript >

document.myForm.myButtoii.oiiclick= message;

function messaged {

alertC'Click event occurred!')；

^./script >

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

Однако суц^сгвуют сш^цип, ютда наиболее предгютппельным жа- адовается второй способ. Более того, такой объект, как объект window, нельзя описать при псмощи о&ганых ярлыков, подобно тому, как описываются при помощи ярлыков формы и кнопки. И ^дрсь мы вынуаде- ны пользоваться кгорым способом задания средств обработки событий.

лврсь ЕеоСкрщгмо сделать два замечашис Первое, не сд^дует писать windovvicmltesia^ можно потьзжпься только прописшлъп! буквами, т.е. писать xvindovvioniesize. Brqpoe, после слова message мы не должны писать скобки, т.е. мы не можем написать wind0vv.aniesize=message(L Если мы нашшюм такую схрочку 5。纷жг ошибкой в нашем случае), то броузер воспримет mess^aeO как обращение к футощнн, чего не должно быть в наш^м случае, так мы не требуем обрахи^ния к ©ункщш, но лишь хппш определить средство обработки события.

Объект Event (событие)

В языке JavaScript 32 определен новый объект, это объект Event. Объект Event обладает свойствами, которые определяют свойства события. Рассмотрим пример, если на приведенной ниже картинке Вы щелкните мышкой, то появится новое окно, в котором будут написаны координаты точки, на которой расположена мышка.

В я?ыке JaraScnpt 1 2 определен новый объект» зто объект Event Объект Event обладает се皿стеами» которые огфеделяют свойтсва события. Раммострнм пример, если ва приведенной ниже картинке вы щелкните мышкой» то появится новое окне, в котором ^удут нависаяы координаты точки., вакоторой расположена miiujx^l

Скриггг позволяет узнать координаты курсооа (указателя мыши)

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

<1ауег>

<а href =*'# *' onCl ick=и alert ( 1 х ； * 卜 event x 十' =•・+

event.i') ； retiJLLii false,">

<img src=иd lci . jpg11 t thz 9 1 atit= 64 上 「=0>v， > </lc yer>

Здесь мы используем средотво офаботки событий onClick, расположенное внутри ярлыка 汇&/, что мы бы могли писать и в старых версиях JavaScript

Новым здесь является то, что далее мы используем событие event и посредством event.x и event .у обращаемся к его свойствам (в данном случае это координаты точки щелчка) для того, чтобы вывести координаты положения точки щелчка во всплывающем окне. Здесь мы использовали объект Event для того, чтобы определить координаты события.

Мы поместили весь пример внутри слоя (текст программы размещен после ярлыка <1ауег>), поэтому мы получим координаты относительно этого слоя, в нашем случае весь слой состоит из рисунка, и координаты будут выдаваться относительно этого рисунка.

Если бы мы не размещали наш пример в слое, то координаты были бы определены относительно окна броузера. Инструкция return йЪе здесь используется для того, чтобы броузер не перехедш по указанной ссылке, а игнорирОБЭЛ ее

Объект Event обладает сждукшшмп свойствэкп! (некоторые из них мы рассмотрим даже в примерах):

data

Массив яцщресов URL тех объектов, которые были перетащены, со- 6bnneDn?gZV 陛(перетаскивание)

layeiX

Горизонтальное положеюю курсора относительно слоя в пикселях. Б сочетании с событием Resize это свойство определяет ширину окна броузера

layerY

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

modifiers

Строчка, определяющая признаки: ALT MASK CONTROL MASK ME1A_MASK, SHIFT_MASK

радеХ

Горизонтальное положензк курсора относительно окна броузера в пикселях

pageY

.Вертикальное положение курсора относительно окна броузера в пикселях

screenX

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

screenY

.Вертикальное положеюк курсора относительно экрана в пикселях

target

Ш>е which

X

У

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

ASCII значение нажатой клавиши или номер кнопки мыши .Эквивалентно l^eiX .Эквивалентно l^eff

Перехват событий

Еще одно важное свойство — это вожожность перехвата событий. Если Вы, например, щельжте кнош^ мыши, то про1юходит событие Click, и выполняется инструкция, указанная в средстве обработки события onClick. При помощи перехвата событий можно сделать так, что окно, документ или слой "перехватат" данное собыию до того, как оно будет обработано. Ржхмафим пример, ито^л понять, что в этом свойстве есть полезного.

jitml>

-head>

<script langi_ ge=,'Ja « 'cript f,>

window. captureEvent s (Event . CLICK), wir ow.onclick= handle； function handle (e){

"* rt (иОбъект 。ndc-w не • -атил ссоытне Click 1м)； retijm trije ；/ / выполняем инстр^-ццгп! далее, т .е переходгш

по ссычие

}

</script>

ad_-

：x・d=>

a href 二"t> 51.htmи >На.я ите эт^- ссылтг /а>

</bod^'>

</html>

%-、•，.♦т л L

Как только перехват был обработан произошел переход по указанной ссыпке

В этом пргмере (пример загружается в отдельное окно) после того, как мы нэжглем указанную ссылку, появляется новое окно с предупреждением “Объект window перехватил событие dick В окж иПредупреж- дениеи сопрржшся кнопка “ОК”. После того, кэк мы шелкжм згу кнопку, прагсщщгг герекод по указанной ссылке.気襲сь мы не описывали средство офаботки события внуфа ярлыка <а>, вместо этого мы написали строчку:

window, capture Events (Event. CLICK);

Это позволило нам перехватить собйтие Click при помощи объекта window При обычных обстояпельствах объект wind5V "не жаком** с собЕСПБем Gich но при помощи свойства перехвата мы имеем возможность перенапраЕпть эго собыпю и сгазать его с объектом window.

Замежге, что мы тппши EwntCUCK w^b CLICK должно быть написано заглавными буквамзь Если существует необ^ощшость осупю- стштъ захват нескшьких событий, то зти собшия должны быть перечислены и оздежны друг от дата вертикальной чертой ”「. Вог пример: window, cap tureEvents (Event CLICK | Event. MOVE);

気赶ь мы записали инструкцию remm mie; внутри функции hundleO, кощрую мы указали кэк функцию, слуяощую аедством офабогки со- быгияопСН* *Эго означает, что броуз^ перейдет по указанной ссылък сра写 по<ж выполнения функции handlefb Если же мы напишем вжсто

return true строчку return filse, то все действия, которые должны были произойти при насхупжюп! события Click не будут выполнены.

Если мы определим средство обработки событий onClick внутри щвшка ・"з〉，то мы уъщцш, что в этом случае наше средство обрабагки события не будет работать. Это очевидно, поскольку объект window перехватывает событие перед тем, как он обращается к объекту ссшокл (link)

Если мы огасшем функцию handle) таким образом:

function handle (е){

alert (''The window object captured this eventj'');

window .r outeEvent(e); re turn true;

}

то комшлэтер буп^т проверять, существуют ли для данного события е晔 иные средства обработки. Переменная е — это наш объект Event, который передается посредством нашей функции handle(e).

Мы такж in垢ем во孙кжность осуществлять пересылку событий прямо какому-либо конкреотюму объекту: Для этого мы можем мспсиьзобять метод handleEvent(). Пример быелвдиг так:

<html>

<script Ian e=,,Ja**ar ript ,f>

nrindow. captureEvent s (Event. CLICK);

indc «onclick= handle;

f xmct ion han< ：. e (e) {

dC'Cijment. linJis [1] . handle Event (e);

}

</scnpc>

'-a href^=''test.him'' -Щелкмие эту ссыпку^/а -'-Ъг -

'-a tLref=''test.titm''

onClick= *'alert (。；тво - ~oti i bt< й ссы г ：i > ' ) ； 11 > ：；，：

ссытц1а.</а>

</T.,inl>

Ш^пьдите 乜/5、|唾.пскедя с -/

Rr ， .w •▼ ■

DocuT>eri Done'

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

工依 £dl Ven? 3 亚《tov* %》

匸扌 FI.., TH；，K7—JV ! Sf

—(Ж^& —

Осуществлен перехват сооьггия Click

Произведен переход 6 соответствин с HHcrpyf^qMS JavaScript

Все события Click ⑨；дуг направлены на вторую ссылку, даже б том случае, если Вы не нажимаею эту ссылку непосредственно!

Спедукщий пример наказывает, что програкгма можт реэшровать на события, связанные с нэжэтиякп! клэвпиь Загапшие эсту программу (или нэжкппе кнопку для 3alpузки примера) и загрузите в броузер. Для проверки ее работы нажмите какую-либо клавишу на клавиатуре

или на мышке.

Принажз^иклавишинаэкранвыводитсяокно, содержащее значение этой клавиши.

-htn(l>

<script 1 angumge二 “ Jav<_ Script “〉

^ 'indow. cap tureEvent s (Event. ITETPRES S)；

i]. onk /pre 5= pr« d；

fxmction pressed(e){

lert (“Hi* та пчм ла.х ее Еначеь е 厶 £ 'II ： “ + е. • aich)； }

</. н丄二，

</html>

При налагай клавиши на экране будет всплывль окно-предупреждение, содержащее строчку "Нажата клавиша, ее ASCII значение: вместо точек будет указано ASCII значение нажатой клавиши.

12

ПЕРЕТАСКИВАНИЕОБЪЕКТОВ

Что такое перетаскивание?

События Mouse и JavaScript 1.2

События MouseDown, MouseMove s MouseUp

Изображение перетаскиваемых объектов на экране

Кидание объектов

Чтотакоеперетаскивание?

Перетаскивание — перевод английского термина drag 田 drop. Перетаскивание —это выбор элемента при помощи нажатия кнопки маши и перемещение этого элемента в новое место, при этом кнопка мыши удерживается в нажатом положении и отпускается лишь тоща, коща перетаскиваемый элемент (курсор) находится там, куда предполагается перетащить выбранный элемент. Поскольку JavaScript имеет возможность работы со слоями, и офаботка событий здесь организована оолее гибким образом, то при помощи этой версии языка появляется возможность организовать перетаскивания.

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

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

Object 1Object 1в 〃7 二в 〃7 二(OocUnenfc Dei*(OocUnenfc Dei*Eis £9 二■輔 go wniduw астрEis £9 二■輔 go wniduw астрObject 1Object 1Object 2Object 2喲&t©喲&t©

Object 1

Object 1

в 〃7 二

в 〃7 二

(OocUnenfc Dei*

(OocUnenfc Dei*

Eis £9 二■輔 go wniduw астр

Eis £9 二■輔 go wniduw астр

Object 1

Object 1

Object 2

Object 2

喲&t©

喲&t©

'Doarieril: Dene

Уат^новив > ь мыши I ifo6o^ 〃二 объемов н уцер'^и oni i мыши e начатом попе • 么 мы мо* 曰ч переместить этот объект е л/ в место е «.не 6注? 口中纟

JavaScript не поддерживает перетаскивания в явном виде, т.е. в языке нет такого свойства, котором бы описывалось перетаскивание. У объекта [mage нет свойства, назовем его например, drying, зццавая которое можно было бы легко и просто осуществлять перетаскивания. Для того, чтобы организовать перетаскивание, необходимо написать программу. Радует то, что программа эта не будет сложной.

Итак, что псиребу^тся сделать?

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

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

События Mouse и JavaScript 1.2

Итак, какие события мы будем использовать? В нашем распоряжении нет события, которое в явном виде задавало бы перетаскивание, однако мы можем достичь своей цели, используя события MoiseDown, MouseMse и Mouse Up. Есин пользователь нажмет 1де-нн6удь в окне броузера кнопку мыши, то наша программа должна будет прореагировать на это событие и определить, на каком объекте (на каком слое) находи。 ся указатель мыши в момент нажатия кнопки. Нам нужны координаты данного события. Для этого мы имеем объект Event, с помощью его свойств мы легко можем получить координаты события.

Второй важный момент — это то, что мы имеем возможность организовать захват события. Если мы, скажем, нажимаем кнопку, то событие нажатия кнопки посылается сразу непосредственно объекту button. Но в нашем случае нам необходимо сделать так, чтобы объект window смог обработать наступившее событие {нажяпк кнопки мыши). Мы создаем ситуацию, когда объект window получает захваченное событие и реапфует на него. Следующий пример показывает, как это происходит в случае с событием Click. Вы мажете щелкнуть мышью в любом месте в пределах окна броузера, в ответ появится новое окно с предупреждением, в котором будут указаны координаты мыши, т.е. координаты места щелчка мышью,

Щелкнув мышью в окне броузера, мы получим координаты попожения указателя мыши во время щелчка

Так выищцпт текст щхнрзммы:

<html：'

〈script . ，: • . » ； • =11 Java _ -：■ ipt">

win : ，u.c -3tur，: rents (Event. CLICK);

window»oncl i ck= di splayCoords;

function display?co: " (e) {

alert ( "x: " + e.pnge 二■+ “ 二丁 ：“ + e.page二)，

}

// ->

</script：'

Щелкните где-нибуль в окне броузера.

</html：'

Первое, что мы пэтребовалп от объекта wbidcw, — это осуществись герехват соСнтпя Click Для этого мы пспользжалп метод capmreEvent().

Смотка

window. onclick= displayC о ords;

задает то, что 每дет цропзходшь в случае наступления события Click. *5ra пнслрукцпя сообщает брсузеру, что в случае наступжнпя события Click екоСксдпмо вызвать футащпю displayCoordsO, 5в^сь 1фи описанпш средства обработкп соСнтпя не следует иотользовять скобки после выраже-

ния di^playCoords、поскольку ^сь мы описываем средство обработки события, передавая ему лишь имя функции, но не саму функцию. Функция display Coordsf) вышядат ст^дующпм образом:

function display С о ords (е){

alert (мх: ” + e.pageX + ” у: ” 十 e.pageY);

}

Мы ивдим, что функция имеет един аргумент е. Это объект Event котсрып гередаегся этей функции для обработки. У этого объекта есть свойства ра^Х и ра^Х которые ссдержат значения кемзрдднат данного события. Окно твддупрездешы ваводог на』фан именно эти значения.

События MouseDown, MouseMove и MouseUp

Rrept дрсдемонстрцркм, как работают другж события, цри помощи которых мы со&орэемся организовать перетаскивания. Свдующпй дрпмер показывает, как мсжно ткпользовать событж MouseMove, При перемтрнпп мыши по окну брсузера мы мсижм ыдрть координаты курсора в строя® состояния.

Впанели состояния показаны координаты мыши

Текзст программы очень сильно похож на текст предыдущего примера:

<himl〉

<script 1 angij.a.ge=*' JavaScript “ >

<1 -

\ni 1лг. capture ents (Event. '- JSE E)；

window. onmousеп(оve 二 di sp lai'Coords， function du, pl port ;(e){

status= "X：+ e .pageZ + “ 厂： “ $ e. pa.ge7 ；

}

〈/script、

Координаты ьыин показаны в cipoKe состояния. < html

Здесь необходимо писать выражение Event MOUSEMOS^E, причем MOUSEMOS^Eдолжно быть написано заглавными буквами. Однако при определении средства обработки события мы должны использовать строчные букв!丈 ^indow.ofimousemove— displayCoords.

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

file' Edit Me”.. Бр Wrti»#* 旦М> ：

Нажмите кнопку мешад л передвигайте мшке? Координаты мыши Будут вйдимы в панелн сзгояния лоиэ яажата кнопка иызн

.[i；Z ①工 15 "

Koor~ 「- — ••♦ e £-■ — ”「二 т - т —2, ^ —.i- - -F -'J

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

•；html>

<script lmgij.a.ge= MJavaScript11 >

<!—

wnidow.captureEvents(Event.MOUSEDOWN | EventMOUSEUP);

window.onmoiisedown= startDrag;

window. onmouseup= endDrag;

window. onmousemove= movelt;

function startDrag(e) {

window.capture Events(Event. MOU S EM OVE);

}

function movelt(e) ；

// показываем косдрдпнала

status= "x: ” + e.pageX + ” у: ” + e.pageY;

}

function endE)rag(e) (

^Indow.rele ase Events (Event. MOU SEMOVE);

< / script>

Нажмите кнопку и перемещайiе мышь по экрану.

КофдпнэиЕЫ мыши показаны в строке состояния.

” /html>

浓сь мы, кэк это &>шо н б ттредвдущих примерах, первым делом заставляем объект window перехватить события. Сейчас перехватываемы- ми собышями являются соития MouseDoim и MouseUp:

window.captureEvents(Event. MOUSEDOWN | Event. MOUSEUP);

В скобках мы использовали значок | для paw^Hiin событий, его значение — лапгтеское иплпм, ®П£Г происхсдать захват любого из этих двух событий. Следующие две строчки определяют средства обработки ЭТИХ СО€#ЯГП1П：

wiiidow.onnioiisedown= startDrag;

window. onmouseup= endDrag;

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

window.onmousemove = move It;

Однако мы не сятредедпип! Event.MOUSEMOVE, а значит это событие не бдет захвачено объектам window: И кажется, что мы 耍匠 обращаемся к функции movelt при помощи той строчки, что нэлисэна выше, поскольку событие MouseMove не досппжт объекта window: Не спешите.

посмотрите на функцию stariDra^), обращение к ней происходит сразу же после того, как наступит собьт氏 MonseDown.

function startDrag(e) {

window.capture Events/Event. MO US EM OVE): }

Сейчас мы видим, что объект window наделяется возможностью осуществлять перехват событий MouseMove сразу после того, как нажимается кнопка мыши. Мы должны позабоппъся и о том, чтобы объект window не смог захватывать событие MouseMove после того, как кнопка мыши была оглушена. 'Это делает функция 2ndDr鱷([ в которой использован метод releaseEventsf):

function endDrag(e) {

window, re lease Events (Eve nt. МО US ЕМ OVE);

卜

Функция щотН() также показывает координаты мыши в строке состояния.

Тепер> мы имеем все необжтмое для финьятш пфетаскнваемого ооьеки и огфедеиения его нового местоположения. Вернемся назад ко второй части задачи и подумаем о том. как буо^г изображаться перетаскиваемый объект

Изображениеперетаскиваемыхобъектовнаэкране

В предвдуших частях мы уже познакомились с тем, как можно создавать движущиеся объекты при помощи слоев. Сейчас нам необходимо лишь написать программу, которая буогт определять, над каким слоем произошло нажяпю кнопки мыши, затем нужно лишь заставить этот слой двигаться вместе с мышью, ©то можно сделать следующим образом: ■litml， -：liead>

-script language=MJavaScript"，

var dragObj = new ArrayO;

var dx, dy;

wiiidow.captureEvents( Event-MOVSEDOWN | EventMOVSEUP);

\vmdow.comiousedown= startDrag;

window ,onmouseup= endDrag;

window.aninousemc>ve= movelt;

function startDrag(e) {

currentObj= v^iiich。切 (e);

^Tiidow.captureEwntsc Ewnt.MOLJS EMOVE);

function movelt(e) {

if (currentObj != null) {

dragObj [currentObj] Jeft= e.pageX - dx:

dragObj [currentObj ] Лор= e.pageY - dy;

function enc：: г ^g ){

олггentC^j 二 null ；

indow.reL aseEvents (Event .MOUSE' uVE)；

}

function init ( ){

'tag _bj [0] = docijm(ent. l^ers [ ” layer0 H]； drag^Z'bj [1] = doexunent. layers [ ” 工①、erl"]；

][2] = docijn(ent. layej ;[”1之 er2и ]；

}

function wnichC'bj •) {

// определяет!, капой объект "щелпну?" пышкой var hit= null ；

эг (^^^ i= 0； 1 < dragc ?>j .length； i++){

if ( (dragCbj [:l] .left < e.pageE) &&

(dr ._• . j [i] .left + d： ._- qj [i] .clip. Ldth > e.} (dragCbj [i] .teg < e.page二) &&

(dra「：刀[i] . top + drag "I j [i] .clip.heigtit > e.pageT)) {

hit= i,

< 工二 e.pag，〈一 drac j [i] .1^ 't ； 比”二 e.pageT- dragC'bj [i] .top； bi ak,

}

re um t t -

</scrip t>

< J ad>

vbc•比、onLoad^11 init ()">

< l^er n an(e= ” 工①”er0 ” bgcolor=и#C JOOff”> <font size=+l -<'bj ect</l^er>' layer name=,,layerlM bgcolor^ и#001ТО0н>' font size=+l>Object</layer><layer n an(e = ” 1 ①”er2 ”< l^er n an(e= ” 工①”er0 ” bgcolor=и#C JOOff”> <font size=+l -<'bj ect</l^er>' layer name=,,layerlM bgcolor^ и#001ТО0н>' font size=+l>Object</layer><layer n an(e = ” 1 ①”er2 ”lefc=100 cop=200 仁1工卩二”工00，100”

< l^er n an(e= ” 工①”er0 ” bgcolor=и#C JOOff”> <font size=+l -<'bj ect

</l^er>

' layer name=,,layerlM bgcolor^ и#001ТО0н>

' font size=+l>Object

</layer>

<layer n an(e = ” 1 ①”er2 ”

< l^er n an(e= ” 工①”er0 ” bgcolor=и#C JOOff”> <font size=+l -<'bj ect

</l^er>

' layer name=,,layerlM bgcolor^ и#001ТО0н>

' font size=+l>Object

</layer>

<layer n an(e = ” 1 ①”er2 ”

0</font>

left=300 top=2 00 clip=H 100,100й

1' /fbnt>

left=500 tor 200 仁工爪=” 100，100 ”

} ：color=”#ff0000”>

< »nt size «-!> oject , font>

</laL^er> v/bc・，*> </html>

Мы задали три слоя, которые описаны в теле страницы после ярлыка <body>. После того, как вся спраница будет загружена, происходит обращение к функции init(», которая вызывается средством управления событием onLoad. которое мы расположили в ярлыке <body>: function init() {

dragObj [0]= document.layers[''layerO''];

dragObj[l]= document Jayers ["'layer 1''];

dragObj [2]= document.layers[''layer2''];

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

^iiid0W.captureEvents(EvenLMO USEDOWN | Event.MOUSELJP);

window. onmoiised0wn= startDrag;

window. ornnouseup= endDrag;

window ,orimoiiseinove= movelt:

В функции stariDmgO добавлены строчка: currentObj= whichObj(e);

Функция whidiObjO определяет тот объект, который был выбран пользователем, те. тот объект, на котором щелкнула мышка. Функция возвращает число — номер слоя. Если не выбран ни един слой, то функция возвращает значение null. Возвращаемое значение хранится в переменной curreniObj.

В функции whicMbjO осуществляется проверка значений свойств left, top, width и height каждого слоя. С помощью такой проверки происходит определение того, какой слой был вмГан щелчком мыши.

Кидание объектов

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

корздове. Мы должны жать, что пользователь кинул эш цредметы в свою кортпцу, не. имеет намерен® оплатить их.

Как ояродлшь, кпцул покупатель тфедметы в корзину плп нет? Для этого нам нужно знать коойдпняты объекта непосредственно после события MouseUp. Для этого нам необходимо добавил» несколько инструкций в функцию endDrag(). Мы, нацрпмер, можм установигь цроверку того, подгадают ли коордпнаш мыши в пределы установжннай црямоу- гатанай области (соответствукш^й кореше), если коордпнаты попадают в эту область, то можно, нэцрпмер, осуш^ствпть обрат軍нж к функции, которая репютротет факт пжупкп путал, скажм, размещения покупаемых объектов в массиве.麻монстрщзуя элементы этого масспва, мы пска^ываем: гредметы, распотожннж в корзиж.

Ковечно, наша црограмма не лишена недостатков. Мои史т показаться странным, что перетаскпваемый объект вдруг оказывается поэадп гюко- ящаося объекта. Эту задачу можно реипггь, если тменпть порядок следования объектов, задав новый порядок внугуп функции staitDrop(). Конечно, объект в ввде красиюй, спнйй и зетаной фигур это не лучший грпмер. Вы мшвле использовать боже изящные картинки, опжав пх цри помсщи ярлыка <img>. Более того, в грилях каждого слоя мсжно попользовать и лю&ле друпю oi 4ЖШ1

НЕКОТОРЫЕ ОБЪЕКТЫ, МЕТОДЫ, СВОЙСТВА В JAVASCRIPT

Объект Ссылка

ОбъектАрр1е1

Объект Array — Массив

Объект document

Объект Form

Объект Frame

Объект window

Объект Layer

Заключение

ОбъектСсылка

Способ создания

Может быть создана с использованием ярлыка «&：• или путем вызова метода StTinganchoi. При создании ссылки по второму методу используется строка theStrinB^nchor( па me Attribute). Здесь:

theSrringсп^оковый объект

nunieAnribureсп^ока

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

Описание

Объект Ссылка Anchor является также объектом Link. Он учитывает^ ся в массиве объектов Anchor и в массиве ооьектов Link.

Свойства

nameСтрока, тфедставляющая собой имя Ссылки

testТекст, по которому предоставляется возможность Ссылки

хГоризонтальное положение Ссылки в пикселях по отношению к

левому краю документа

уВертикальное положение Ссылки в пикселях по отношению к верх

нему краю документа

Методы

С этим объектам могут использоваться методы watch и unwatch.

Объект Applet

Используется для включения Java-апплета в веб-страницу.

Создается цри помощи ярлыка <APPLET>. Для каждого включенного в веб-страницу апплета создается свой собственный объект, объекты образуют массив document.叩plets. Доступ к аппчету мажет быть осуществлен с помощью индексации этого массива.

Объект Array— Массив

Объект создается при помощи таких строчек

new Array《arrayLen皿〉

new ArravfeleifientO, dementi, 一，eleffientN)

Параметры

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

demant/VСписок значений элементов массива. Когда используется такой спи

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

Свойства

cmstructor ...Описывает функцию, которая создает грототип объекта

length.Соответствует количеству элементов массива

jrototjpe.Позволяет вводить дополнительные свойства объекта

Методы

concal Объединяет два массива и возвращает новый массив

jdnОбъединяет все элементы массива в строку

popУдаляет последний элемент из массива и возвращает этот элемент в

качестве значения

pushДобавляет один или несколько элементов к концу массива и возвра

щает длину нового массива

reverse .Переставляет элементы массива, меняя направление, первый элемент массива становится последним, а последний — первым

shiftУдаляет первый элемент массива и возвращает этот элемент в каче

стве значения

dice.Вцдепяет фрагмент массива и возвращает новый массив

spficeДобавляет ц/или удаляет элементы массива

swtОсуществляет сортировку элементов массива

toSource .Возвращает литерал того или иного массива, мажет быть использован для создания нового массива

bString .Возвращает строку, соответствующую массиву и его элементам unsWt Добавляет един или несколько элементов, тфисоединяя их к началу массива, и возвращает длину нового массива

vaiueOf Возвращает значение массива

Объект document

В этом объекте содержится информация о текущем документе и используются методы, позволяющие установить вид документа на основе кода HTML. Объект мажет быть создан цри помощи ярлыка <body>. Для каждой HTML-страницы создается свой объект document. Каждый объект window обладает свойством object, значением которого является загруженный в окно объект document. При создании объекта document в ярлыке <body> могут быть ^дданы те или иные средства обработки событий.

Средства обработки событий

onCJick

onDblClick

onKeyDown

onKeyPress

onKeyUp

odougeDoyvn

onMouseUjp

Эта средства обработки событий указываются в ярлыке <body>, однако они относятся к объекту window Новый документ может быть загружн путем обращения к свойству window.location. Закрыть панель с документом и удалить весь теюст. формы и тл можно цри помощи следующих инструкций:

document.close();

document.open():

document. write();

Свойства 疝nkColot anchors applets bgColor classes

Строка, задающая параметр для ALINK

Массив, содержащий все Ссылки документа

Массив, содержащий все апплеты документа

Строка, задающая параметр BGCOLOR

Создает объект стилей Stjrte, который может задавать стили для HTML

cookie

domain

Задает cookie

Издает имя сервера, соответствующего документ

embeds 羅Color fonnName fams height ids images

Массив всех плагинов в документе

Строка, задающая параметр 傘Coloi для текста

Свойство для каждой именованной формы в документе

Массив всех форм, содержащихся в документе

.Высота документа в пикселях

Создает объект Style

Массив всех изображений, содержащихся в документе

la^Modified... Строка, указывающая дату посжднего изменения документа

layers linkColor links plains reSrnr t酔 title URL ilinkColor width

Массив всех слоев, содержащихся в документе

Строка, задающая цвет текста Ссылки

Массив всех ссылок, содержащихся в документе

Массив всех плагинов, соде-ржащнхся в документе

Строка, содержащая URL вызывакяи^го документа Создает объект Style

Строка, которая задает заголовок в ярлыке ТГШЕ

Строка, которая содержит полный URL документа Строка, которая зццает параметр VLINK

Ширина документа в пикселях

Методы

oqptuFeEvuils Устанавливает возможность захвата всех событий указанного типа close. Закрывает поток вывода и показывает данные

contextual .Истользует возможность контекстного отбора

gelSdection ... Возвращает строку, содержащую текст текущего выбора

handeEwii ..Активизирует средство обработки того или иного события

open Открывает поток вывода для методов write и writein

releaseEvcns. Устанавшгвает состояние документа или окна осуществлять захваченные события заданного вщта

routeEwnt Передает захваченные события в соответствии с обычной иерармкй write Записывает одно или несколько HTML вьфаженнй в документ, расположенный в заданном окне

writdn Записывает одно или несколько HTML вьц)ажений в документ, расположенный в заданном акне и добавляет символ перевода строки

Объект Form

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

Создается при помощи ярлыка <FORM>. Для каждой формы в документе создается свой собственный объект FORM.

Средства офаботко со^тпш

onReset

onSubmit

Описание

Каждая форма в документе — это отельный объект. К этому объеклу можно окатиться либо цри помощи имени, задав его с использованием свойства NAME, или с использованием массива объектов форм Form.elements. Массив элементов включает в себя все элементы, такие как checkbox, radio, text.

Свойства

adkHiЗадает свойство ACTION

由0电<§Массив всех элементов формы

enco^j鸣Задает свойство ENCTYPE

length.Задаетколичество элементов в форме

mdhodЗадает свойство METHOD

nameЗадает свойстбо NAME

taiy吐Задает свойство TARGET

Методы

handleEv^i ...Активизирует средство обработки события resd .Ишгшрует нажатие кнопки reset в форме ^ibmit .Посылает форму

ОбъектРгате

В окне браузера может быть пжазано нескапыго незаЕпвшых фреймов, б кяждом из которых может быть представлен документ со своим собственным незавпвспмым URL. Фреймы ссодаются 1фи помощи ярлыка <fianieA, который пспомь^тся вщчрп фрагмеита, открытого с помощью дц^тсго ярлыка — ярлыка <fiameset\ Набор всех фреймов образует законченную страничку Каздаш фрейм может быть направлен для заг- ружд своего собственного URL, а также в него можно 3alpузшъ URL по утазанпю из другого фрейма, расположенного на топ же страничке (в тем же основном окне броузера).

В JavaScript к фреймам происходит обращение, как к объектам window Каидай фрейм — это объект window:

Об ъект window

Объект window описывает окно броузера пли фрейм. Этот объект является объектом top-level для всех о&ьекгов docunientlocation и history.

Есш появляется 理втык ••ЛхРу.' плп <fianieset^, то для каждого такого яршка сойдет сбой собственный (плп несколько) объект window: Для каждого ярлыка <йател создается объект window: Объект window также можно создать, вызвав метод whidowicpeiL

Средства обработки ообышп

onBlur

oji^agDxpp

onError

cn Focus

otiLoad

опМоуе

cnUnlcad

В перархпп объекгав Ja^BScript объект window является самим стушим объектам.

К объекту окна свспства parent и top могут быть грпменены, сдаако они указывают на само это окно. Для фреймов свойство top указывает на самое главное (основное) окно броузера、a parent указывает на родительское окно вщтрп шавного окна броузера.

Для окна верхнего уровня свойства defisiiiltStatus и status задают текст, который появптся в cipoKe состояния. Для фреймов эти СБопства задают стазус фрейма, который бутет показан только в том случае, если утазатель мыши находится надданным окном фрейма.

Метод close не псполь^гся для окон фреймов.

Для того, чтобы пстюльзовать средства обработки событий onBlur и onFocus, следует задать их (строчные буквы), например, в коде html.

Для всех окно свойства self и window являются синонимами. Например, для за!фытия окна можно использовать метод close по отношению либо к свойству window, либо к свойству self

Свойства

closedОпределяет, было ли окно забыто

cryptoОбъект, который позволяет осуществлять доступ к закодированным

данным

defauttStatus.. Содержит статус, гфисваиваемый пи умолчанию, который ^д₽т показан в панели состояния

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

frames .Массив фреймов в окне

bistay Содержит информацию об адресах посещенных пользователем страниц inner Height. ...Указывает вертикальный размер в пикселях ima^ilfl)Указывает горизонтальный размер в пикселях

length.Количество фреймов в данном окне

locationСодержит адрес URL

ЬсайюЬаг .Представляет панель местоположения для данного окна

DEnihar.Предотэвляет панель меню окна броузера

палю.Уникальное имя, присвоенное данному окну, по которому к нему

можно обращаться

ореою* Содержит имя окна, из которого тфонзотло открытие данного окна 1ф“ помощи метода open

outaHejght ...Содержит вертикальный размер окна в пикселях по внешней границе окна

outeiWttii Содзертагг горизонтальный размер окна в пикселях по внешней границе p^eXOfifcd…Содержит текшее полажние по гсризонтали демонстрад^емой страыщы pageYDfifeet... Содержит текущее положение по вертикали для демонстрируемой страницы

paraat Синоним для окна или для фрейма, в котором содержится описание <frameset> для данного фрейма

регмиЫЬаг .... Содержит персональную пользовательскую панель фоузера ьсгееяХСодержит горизонтальную координату левого края окна

screaaYСодержит вертикальную координату верхнего края окна

scnAhars.Представляет панель прокрутки броузера

selfСиноним для window в текущем окне

status. Устанавливает приоритет сообщения в панели состояния statusbar.Предотавчяет панель состояния окна

todhar.Предртавчяет панели инструментов окна

topСиноним самого старшего окна броузера

^ЫотуСиноним текущего окна

Методы alat

.Выводит диалоговое окно предупреждения, содержащее текст предупреждения и кнопку ОК

afc»b

.Производит декодирование строки данных, закодированных на основе hase-64

back

Ыиг btoa captureEv^ots

Производит возвращение на один шаг вперед в history

Удаляет фокус с указанного объекта

Создает закодированную в base-64 строку

Устанавливает захват всех событий определенного типа

ckarlnten^ .. Отменяет задержку, установленную с помощью setinterval

cleaiTimeouL.

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

close

confirm

Закрывает определенное окно

Выводит диалоговое окно подтверждения, содержащее некоторое сообщение, а также кнопки ОК и Cancel

a^t&KantaiL.

Во叫ращает гсевдослучайную сфоку символов с указанной длиной в баЕэх

find__IIo зволяет находить указанную текстовую строку в содержимом ука-

focus.

занного окна

Устанавливает фокус на указанном объекте

forward. Загружает документ, соответствующий последующему адресу URL в

home

списке history

Направляет фоузер к тому URL, который записан в качестве до

шотеВу imrelb

open ixint

(ЖШф1

resizeBy

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

.Передвигает верхний левый угон окна к указанным координатам экрана

Отбывает новое окно ороузера

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

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

resiz^Ib

правого угла окна на заданную величину

.Производит изменение размера окна в соответствии с указанными

ъспШ.

scrdlBy scrolllb

размерами внешних границ окна по высоте и ширине Перекручивает окно к указанным координатам

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

setHoffieys .... Включает или выключает специальные комбинации кнопок

setloteal

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

sdPesizaMe seCBoKout

Разрешает пользователю гфоизводить изменение размеров окна Осушествпяетю inni иное действие (выполняет ©ужцию, осуществляет щювф- ку» единояда по истечении указанного громелугка ч)емени в мишпюе^вдэх

stop

Останавливает тфоиесс загрузки

Объект Layer

СоответстЕует слоям, расположенным в НТМЬдакументе, позволяет осуществлять манипуляции со слоями.

Слой сожмется црн помощи ярлыков HTML '1ауег> ц/nmi чйауегл или грн истюльзовэнш! каскадных сшжй спнтэкспса. Для каждого слоя в документе создается сбой собственный объект Layer Все слои в дост- ьенте образуют маеслв document.layeis. Обращение к слою можно осу^ щестыггь поем обращения к этому шсспву с помощью ивдексов.

Средства обработки со&лтий

onMonseOygi

* oitMonseOut

onload

onFocus

* onBlur

Свойства above

Объект Layer; расположенный над данным объектом или объемлющее окно, если данный слей является самым высшпм

background .... Картинка, используемая в качестве фона

bgCokr below

.Цвет фона слоя

Объект Layer; расположенный ниже данного слоя, или null, если данный стой является самым нижним

clip.bottom clip, he 做 clipJeft clip.il坦it cliplop clip.wMth document kft

Нижний 1фай црямоуголыпЕка зоны видимости слоя .Верхшй! край прямоугольника зоны видимости слоя Левый 1фай прямоуголыпЕка зоны видимости слоя Правый 1фаП прямоугольника зоны вшшмости слоя Высота зоны видимости

Ширина зоны вщгпмости

Документ, связанньй! со слоем

ГороЕзонтэльное положение левого края слоя в пикселях по отношению к родительскому слою

name

pageX

.Имя слоя, указанное с помощью свойства ID в ярлыке \layei〉 Горизонтальная координата слоя в пикселях по отношению к стра

нице

pageY

Вервгкальная координата стоя в тппжелях по отношению к странице

panatUyEr …Родапельск!由 слой, который содержит даннь山 слой, или окно, если нет роцппельского слоя

dJftgAbow? ...Слой, расположенный выше данного слоя в пределах одного родительского слоя, или null, если данный стой является самым высоким

sMngBelow…Слой, раотолаженныП ниже данного слоя в пределах одного родительского ело% или null, если данный слей является самым нижнпм

ягс.

Строка, указывающая на адрес URL содержимого, расположенного в данном слое

top.

Вертикальное расположение верхнего >фая слоя в пикселях по отно шению к родительскому слою

visiMfty uindow

Является inni нетданньШ слой видимым

Объект window iddi объект frame, в котором содержится данный слой, вне зависимости оттого, содержатся ли в данном слое вложенные слои

X

Синоним для layerJeft

У zJbd^.

Синоним для 1ауег.юр

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

Методы

captureEv^itg Устанавливает здават всех элементов заданного типа handkEvoit .. .Активизирует средство обработки события

had.

пмгеАЬоте

Изменяет содержимое слоя на содержимое указанного файла

①нкслтуетданнм。слой поверх указанного слоя без изменения вертикального и горизонтального положения

moreBdow

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

шотеВу

Изменяет положение слоя на указанные величины смещений в пикселях

Ш№йЛЪ

.Перемещает верхний левый угол окна к указанным координатам на экране

wf^oi^^ Изменяет положение слоя и перемешает его к указанным координа-

там на странице (но не по отношению к родительскому слою)

rekaseErents . Освобождает захваченные события указанного типа и осуществляет

гежеЕу

обработку событий согласно нормальной иерархии

.Изменяет размер слоя в соответствии с указанными величинами, Рна

resizelb

которые происходит изменение высоты и ширины в пикселях Изменяет размер слоя так, чтобы его высота и ширина равнялись

nxiteEreH

указанным величинам в пикселях

.Передает захваченные события в соответствии с нормальной мерар-

Х1ЮЙ

Заключение

Вы прочли пособие по языку JavaScript, познакомились с примерами, почувствовали возможности этого языка. Вы приобрели некоторый опыт создания сценариев и, наверное, ощутапи потребность дальнейшего овладения возможностями этого языка. Мы рекомендуем Вам продолжать изучение языка JavaScript, углублять полученные знания. Полезными окажутся в этом случае существующие немногочисленные справочные пособия, которые были использованы при создании данной книги и которые могут пригодиться в Вашей дальнейшей работе, например, книга Р. Дар1елла JavaScript, Справочник выпущенная в нздательстае "Питер" в 2000 году.

Всеща самую свеа^ю информацию и нужные сведения, полезность которых невозможно переоценить, Вы найдете в Интернете на сайте разработчика JavaScript по адресу: http://developer.netscdpe.coni/library/ documentation/.

scanned & converted to PDFby BoJloc