WWW.DISSERS.RU

БЕСПЛАТНАЯ ЭЛЕКТРОННАЯ БИБЛИОТЕКА

   Добро пожаловать!

Pages:     || 2 |
-- [ Страница 1 ] --

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

Практические занятия по для начинающих scanned & converted to PDF by BoJloc Наука и техника 2000 Издательство «НАУКА И ТЕХНИКА» Николенко Д. В.

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

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

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

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

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

(812) 567-70-25, (044) 559-27-40 WWW.NIT.ALFACOM.NET Иллюстрации: Д.В. Николенко Компьютерная верстка: К.В. Болдырев Компьютерный дизайн обложки: К.В. Болдырев 9795793 © Николенко Д.В.

© Наука и техника (оригинал-макет), © КОРОНА ПРИНТ (производство), ISBN 5-7931-0126- ООО «КОРОНА принт», лицензия № 065007 от 18 февраля 1997 г.

198005, Санкт-Петербург, Измайловский пр., Подписано в печать 11.08.2000. Формат 70x Бумага газетная. Печать офсетная. Объем 8 печ. л.

Тираж 5 000 экз. Заказ № 1046.

Отпечатано с готовых диапозитивов в ордена Трудового Красного Знамени ГП -Техническая книга» Министерства РФ по делам печати, телерадиовещания и средств массовых коммуникаций.

198005, Санкт-Петербург, Измайловский пр., 29.

Содержание 1. ПЕРВЫЕ ШАГИ • Что такое JavaScript?

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

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

• Включение скриптов JavaScript в HTML-страницу • Броузеры, не поддерживающие JavaScript • События • Функции 2. HTML ДОКУМЕНТЫ • Иерархии JavaScript • Объект местоположения — location-object 3. ФРЕЙМЫ • Понятие фреймов • Создание и использование фреймов • Фреймы и JavaScript • Меню навигации 4. ОКНА И ДОКУМЕНТЫ, СОЗДАВАЕМЫЕ В ПРОЦЕССЕ РАБОТЫ JavaScript • Создание новых окон • Имя окна • Закрытие окна • Создание документов, образующихся по ходу работы • Создание VRML-документов в процессе работы 5. СТРОКА СОСТОЯНИЯ И УПРАВЛЕНИЕ ВРЕМЕНЕМ • Строка состояния • Управление временем. Создание временных задержек • Движущийся текст 6. СТАНДАРТНЫЕ ОБЪЕКТЫ JavaScript • Объект Date • Объект массива Array • Массивы и JavaScript 1. • Математический объект Math 7. ФОРМЫ • Проверка информации, вводимой посредством форм • Проверка наличия в вводимой строке определенных символов • Доставка информации, вводимой посредством форм • Как обратить внимание пользователя на тот или иной элемент формы 8. РИСУНКИ НА ВЕБ-САЙТЕ • Первые навыки создания рисунков • Загрузка изображений на страничку • Предварительная загрузка картинок, используемых на страничке • Изменение картинок в ответ на действия пользователя • Скрипт без недостатков 9. СЛОИ • Что такое слои • Как создать слои • Слои и JavaScript • Перемещение слоев в окне 10. И ВНОВЬ О СЛОЯХ • Выделение видимых участков • Вложенные слои • Прозрачные слои и эффекты с ними 11. СОБЫТИЯ в JavaScript 1.2 • Новые события • Объект Event (событие) • Перехват событий 12. ПЕРЕТАСКИВАНИЕ ОБЪЕКТОВ • Что такое перетаскивание?

• События Mouse и JavaScript 1. • События MouseDown, MouseMove и MouseUp • Изображение перетаскиваемых объектов на экране • Кидание объектов НЕКОТОРЫЕ ОБЪЕКТЫ, МЕТОДЫ, СВОЙСТВА в JavaScript • Объект Ссылка • Объект Applet • Объект Array — Массив • Объект document • Объект Form • Объект Frame • Объект window • Объект Layer ЗАКЛЮЧЕНИЕ ПЕРВЫЕ ШАГИ • Что такое JavaScript?

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

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

• Включение скриптов JavaScript в HTML-страницу • Броузеры, не поддерживающие JavaScript • События • функции Что такое JavaScript?

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

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

Многие люди считают, что язык JavaScript — это то же самое, что язык Java, недаром они носят одинаковые имена. Однако это неверно.

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

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

Что требуется для того, чтобы запустить программу-скрипт, написан ный на JavaScript? Все что для этого требуется — это обычный интернет броузер, с активированной способностью распознавать JavaScript. Таким броузером, например, может быть Netscape Navigator версии 2.0 и выше или Microsoft Internet Explorer версии 3.0 и выше. Поскольку большин ство пользователей сети Интернет используют именно эти два броузера, то становится понятным, почему именно язык JavaScript является наибо лее предпочтительным языком при решении задач улучшения качества web-страниц. Заметим также, что для понимания изложенного здесь материала требуется знание основ HTML — языка разметки, при помо щи которого создаются web-страницы.

6 Java Script Включение скриптов JavaScript в HTML-страницу Текст программы на языке JavaScript вставляется непосредственно в файл HTML-страницы. Чтобы посмотреть, как это выглядит, приведем пример простейшей HTML-страницы.


Это обычный HTML документ

Выходим обратно в HTML.

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

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

Это обычный HTML-документ.

Это и есть JavaScript!

Выходим обратно в HTML.

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

Вся информация, которая располагается между этими ярлыками, вос принимается как программа на языке JavaScript. В тексте программы встре чается строчка document.write() — одна из наиболее важных команд в программировании на JavaScript. Строчка document.write() используется тог да, когда нужно записать что-либо в документ, в данном случае, в HTML документ. Так, наша маленькая программа на JavaScript записывает текст Это и есть JavaScript!

в наш HTML-документ.

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

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

Это обычный HTML-документ.

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

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

Это обычный HTML-документ.

document.write("Это и есть JavaScript!") Возвращаемся обратно в HTML.

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

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

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

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

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

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

Для нас важной частью является инструкция onClick="alert('Ой-ой')", которая размещена внутри ярлыка .

Как уже было замечено ранее, она определяет то действие, которое будет выполнено при нажатии кнопки. Если происходит событие Click, то компь ютер выполнит инструкцию аlert('Ой-ой'). Эта инструкция — фрагмент. JavaScript. Заметьте, что в этом случае мы не использовали ярлык Этот скрипт выведет такой текст:

Добро пожаловать!

Это JavaScript!

Этот текст будет выведен три раза. Насколько это эффективно?

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

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

function myFunction() { document.write("Добро пожаловать!
") ;

document.write("Это JavaScript!
");

} Слова, помещенные между скобок {}, составляют команды, образую щие функцию myFunction(). Это значит, что две используемых нами функции document.write() объединяются в одно целое, и они могут быть Первые шаги выполнены совместно при помощи обращения к функции. В нашей программе мы обращаемся к функции три раза, мы три раза написали myFunction() после того, как определили эту функцию. Мы три раза вызвали функцию, т.е. содержание функции будет исполнено три раза.

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

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

Окно броузера и всплывающее окно, содержащее результат функции, описанной в вышеприведенном скрипте, после нажатия кнопки "Будем считать" 12 Java Script Нажатая кнопка заставляет компьютер выполнить функцию calculation().

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

Строка программы var resul t= x + у;

сообщает броузеру, что необходимо создать переменную result и в этой переменной сохранять значение, равное сумме значений переменных х + у ( т. е. 5 + 12).

После выполнения этой функции переменная result будет содержать число 17. Команда alert (result) в этом случае эквивалентна команде alert{17). Мы видим всплывающее окно, в котором записано число 17.

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

1 Николенко Д. В. Практические занятия по для начинающих scanned & converted to PDF by BoJloc Наука и техника 2000 Издательство «НАУКА И ТЕХНИКА» Николенко Д. В. Практические занятия по JavaScript Под

Моя страничка

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

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

Этот объект содержит в себе несколько элементов, например, панель состояния. В объект — окно window может быть загружен HTML-документ (или файл другого типа, здесь же мы ограничимся HTML-документами).

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

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

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

Начинать нужно с самого начала, с основания.

Первый, и основной, здесь объект, — это документ, его имя document.

Первая картинка на странице имеет имя images[0]. Все это значит то, что мы можем обратиться к этой картинке посредством языка JavaScript, назвав ее document.images[0]. Если же, например, у нас появиться необхо димость посмотреть, какую информацию пользователь ввел в элемент первой формы, то вначале нам необходимо позаботиться о том, как мы сможем обратиться к самому объекту, представленному данной формой.

И опять начинаем с самого основания иерархии, с его главного объекта. Далее обращаемся к формам и затем переходим к элементам форм, таким образом, первый элемент нашей формы будет иметь имя document.forms[0].element[0]. И все же, как мы сможем узнать, какой в этом элементе введен текст? Для того, чтобы узнать, какими свойствами и методами может обладать тот или иной объект, удобнее всего обра титься к справочному пособию по JavaScript.

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

name= document. f orms[0]. el ement s[0]. val ue;

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

alert("Привет, " + name). Если в данный элемент формы введена строка 'Яков', то в открывшемся окне будет написано ' Привет, Яков'.

Java Script Но если наша страничка велика, и в ней много различных объектов, то может оказаться затруднительным указывать имена объектов при помо щи чисел. При этом могут появляться довольно громоздкие конструкции, например, document.forms[3].elements[17] и document.forms[2].elements[18].

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

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

ФРЕЙМЫ • Понятие фреймов • Создание и использование фреймов • Фреймы и JavaScript • Меню навигации Понятие фреймов Фреймы — это английское слово, в переводе означающее рамки.

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

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

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

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

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

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

< frame src="page2.htm" name="frame2"> Этот код порождает два фрейма. В ярлыке указано свой ство rows, a rows — это в ряды. Это свойство указывает на то, что два фрейма расположены рядами, друг над другом. Верхний фрейм загружается страницей page1.htm, а нижний фрейм загружается страницей page2.htm.

Такие окна фреймов образуются в результате исполнения приведенного выше HTML-кода Если Вы захотите расположить фреймы столбцами, то вместо свой ства rows в ярлыке укажите соls. Процентные величины "50%,50%" указывают относительные размеры окон фреймов. Если Вы не хотите утруждать себя вычислениями того, каким должен быть размер второго окна, чтобы вцелом получилось 100%, то можно указать размер окна в пикселях, при этом знак % опускается.

Каждый фрейм имеет свое уникальное имя, которое задается при помощи свойства name в ярлыке . При помощи этого имени фрейм легко доступен при. описаниях на JavaScript.

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

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

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

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

Ранее мы видели, что все элементы web-страницы иерархически организованы. Фреймы — не исключение. Иерархия страницы первого примера выглядит таким образом:

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

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

Рассмотрим три следующих варианта:

родительское окно или фрейм обращаются к дочернему фрейму;

дочерний фрейм обращается к родительскому окну или фрейму;

дочерний фрейм обращается к другому дочернему фрейму.

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

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

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

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

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

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

parent. l ocati on. href= " ht t p: / /... " ;

Фреймы Довольно часто приходится сталкиваться с задачей, когда из одного дочернего документа необходимо обратиться к другому дочернему доку менту. Как записать чего-либо во второй фрейм, находясь в первом фрейме? Иными словами, такая команда должна быть записана в доку менте page1.htm, загруженном в первый фрейм, которая приводила бы появлению во втором фрейме необходимых записей.

На нашей картинке нет прямых связей между первым и вторым дочерними фреймами. Это означает, что мы не имеем возможности обратиться из первого фрейма frame1 ко второму, указав имя второго фрейма frame2 в документе page1.htm, поскольку первый фрейм ничего "не знает" о существовании второго фрейма.

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

parent.frame2.document.write("Это обращение из frame1.");

Java Script Меню навигации Рассмотрим пример того, как можно создавать меню навигации.

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

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

Документ frames3.htm:

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

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

Фреймы Документ menu.htm:

first second third Здесь мы видим иной способ загрузки новой страницы во фрейм, носящий имя MAIN. В первой ссылке использована функция load(). По смотрим, как происходит обращение к этой функции?

<а href ="j avascri pt : l oad(' f i rst. ht m' )">f i rst Эта строчка заставляет броузер выполнять программу-срипт, напи санную на JavaScript, вместо того, чтобы обратиться к обычной загрузке страницы. Имя документа 'first.htm' записано в скобках. Это имя переда ется в виде аргумента функции load(). Функция load() определена следу ющим образом:

function load(url) { parent.main.location.href= url ;

} Окно броузера после перехода по ссылке "вторая ссылка" Java Script Здесь в скобках используется url, Подразумевается, что строка "first1.htm" хранится в переменной url. В функции load() мы можем использовать эту переменную.

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

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

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

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

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

function loadtwo () { parent.framel.location.href= "first.htm";

parent.frame2.location.href= "second.htm";

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

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

function loadtwo(urll, url2) { parent.framel.location.href= url1;

parent.frame2.location.href= url2;

} Далее к этой функции следует обратиться, указав конкретные имена — адреса загружаемых страниц: loadtwo("first.htm", "second.htm") или Ioadtwo{"third.htm", "forth.htm"). Использование переменных делает функ цию более гибкой, ее можно использовать снова и снова, меняя лишь значения переменных.

ОКНА И ДОКУМЕНТЫ, СОЗДАВАЕМЫЕ В ПРОЦЕССЕ РАБОТЫ JavaScript • Создание новых окон • Имя окна • Закрытие окна • Создание документов, образующихся по ходу работы • Создание VRML-документов в процессе работы Создание новых окон JavaScript обладает одним замечательным свойством. С помощью JavaScript можно создать новое окно броузера. В новое открывшееся окно можно загрузить уже существующий HTML-документ, но в нем также можно разместить абсолютно новый, создаваемый по ходу работы, документ. Сначала мы рассмотрим пример того, как можно создать новое окно броузера и загрузить в него существующий документ.

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

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

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

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

Окно не будет иметь строки состояния, меню и панели инструментов.

Java Script Окно, открывающееся при нажатии кнопки "Открываем новое окно 400x300" В приведенной выше программе мы использовали следующие свой ства объекта window, записанные в строке "width=400,height=300,status=no,toolbar=no, menubar=no".

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

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

directories yes\no height количество пикселей location yes\no menubar yes\no resizable yes\no scrollbars yes\no status yes\no toolbar yes\no Окна и документы, создаваемые в процессе работы Свойства объекта window по версии JavaScript 1.2 приведены в следу ющей таблице.

alwaysLowered yes\no alwaysRaised yes\no dependent yes\no hotkeys yes\no innerWidth количество пикселей innerHeight количество пикселей outer Width количество пикселей outerHeight количество пикселей screenX расположение в пикселях screenY расположение в пикселях titlebar yes\no z-lock yes\no При помощи новых свойств можно установить параметры месторас положения открываемого окна. Подробное описание новых свойств можно найти в справочнике по JavaScript. Примеры будут рассмотрены нами ниже.

Имя окна При открытии нового окна функция open содержала три аргумента:

myWin= open("page.htm", "newWindow", "width400,height=300,status=no, toolbar=no,menubar=no");

Ответьте на вопрос: "Что означает второй аргумент функции и зачем он используется?" Второй аргумент функции open — это имя окна. Ранее мы уже видели, как используется свойство target. Если мы знаем имя существу ющего окна, то загрузить в это окно новый документ можно с использова нием свойства target. Это можно осуществить следующим образом.

<а href="page.html" target="newWindow"> Здесь мы указали имя окна. Если окна с таким именем не существу ет, то указанная выше ссылка приведет к созданию нового окна.. Также отметим, что туWin не является именем этого окна. При помощи пере менной myWin мы можем лишь обратиться к этому окну.

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

32 Java Script Закрытие окна JavaScript также позволяет закрывать окна. Для закрытия окон ис пользуется метод close(). Откроем окно, как это было описано выше, и загрузим в него следующую страницу:

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

Окно, появляющееся при нажатии кнопки "откроем и закроем окно" Метод open() и метод close() — это методы, свойственные объекту window. Если быть последовательным, то необходимо помнить, что пол ный вид записей инструкций открытия и закрытия окон должен быть window.open() и window.close(), вместо open() и close().

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

писать слово window) при обращении к тому или иному методу объекта window. Это справедливо лишь для данного конкретного объекта (объек та window).

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

Это означает, что что мы имеем возможность при помощи JavaScript создавать новые HTML-страницы.

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

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

Окна и документы, создаваемые в процессе работы Эта программа во многом подобна предыдущему примеру. Сначала мы открываем окно. Затем мы открываем документ, подготавливая его вывод. Взгляните на пример:

// открываем документ vrml.document.open("x-world/x-vrml");

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

Для создания 3D сцены мы пишем vrml.document.write().Это сравни тельно длинная запись, поэтому удобно определить vr= vrml.document.

Сейчас можно записать vr.write() вместо vrml.document.write(). Далее мы вводим VRML-код:

#VRML V1.0 as ci i Separator { Di rect i onal Li ght { di r ect i on 3 -1 -2. 5 } PerspectiveCamera { posi t i on -8.6 2.1 5. or i ent at i on -0.1352 -0.9831 -0.1233 1. f ocal Di st ance 10. } Separator { Material { diffuseColor 0 0 } Transform { t ransl at i on - 2. 4. 2 rot at i on 0 0.5 1. } Cube { } } } Мы вводим этот код при помощи команд document.write().

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

СТРОКА СОСТОЯНИЯ И УПРАВЛЕНИЕ ВРЕМЕНЕМ • Строка СОСТОЯНИЙ • Управление временем. Создание временных задержек • Движущийся текст Строка состояния JavaScript имеет возможности, которые позволяют осуществлять вы вод информации на панель состояния (мы будем пользоваться термина ми "строка состояния" и "панель состояния" как синонимами, не делая между ними различия).

Панель состояния находится на нижней части рамки окна броузера.

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

Программа выглядит следующим образом:

Строка состояния и управление временем При нажата кнопки "Пишем на панель состояния" в панели состо яния, расположенной в нижней части окна, появляется текст: "Вот она, панель состояния!" Здесь мы создаем форму с двумя кнопками. Обе кнопки приводят к обращению к функции statbar(). Кнопка "Пишем на панель состояния!" приводит к исполнению следующей функции:

statbar ('Вот она, панель состояния! ' );

В скобках мы записали выражение 'Это и есть панель состояния'.

Эта строка передается для обработки функции в виде параметра. Сама функция statbar() была определена нами следующим образом:

function st at bar(t xt ) { window.status = t xt ;

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

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

Значение переменной txt, т.е. строчное выражение, присвоенное этой переменной, можно вывести на панель состояния при помощи команды window.status = txt. Стирание текста с панели состояния осуществляется путем присвоения window.status пустой строки.

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

40 Java Script Если подвести указатель мышки на такую ссылку, то информация о странице будет выведена на панель состояния.

Эта ссылка служит примером, иллюстрирующим вышесказанное.

Соответствующая программа приведена ниже.

<а href="dontclck.htm" onMouseOver="window.status='He нажимай меня!';

return true;

" onMouseOut="window.status=";

">ссылка На панель состояния выведен текст "Не нажимай меня!" Для того, чтобы определить, где находится указатель мыши, мы использовали onMouseOver и onMouseOut. Сообщение "Не нажимай меня!" появляется, тогда, когда указатель мыши находится на ссылке. Возможно Вас удивило, что внутри скобок в выражении, присваиваемом свойству onMouse, указано return true. Эта инструкция заставляет броузер отка заться от выполнения собственных, свойственных броузеру действий в момент наступления данного события.

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

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

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

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

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

Спустя четыре секунды после нажатия кнопки "Временная задержка" на экране появляется окно с текстом предупреждения : "Время вышло! Всплываю!" 42 Java Script Так выглядит программа для этой кнопки:

Команда setTimeout() — это метод, относящийся к объекту window.

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

В данном случае будет исполнена команда "alert('Время вышло! Всплы ваю!'). Заметьте, что команды JavaScript должны быть записаны в кавыч ках. Второй аргумент сообщает компьютеру продолжительность задержки — время, через которое необходимо выполнить указанные команды. Вре мя указывается в миллисекундах (4000 миллисекунд = 4 секунды).

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

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

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

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

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

После нажатия кнопки "Движущийся текст" в новом окне в панели состояния появляется движущаяся строка "Этот движущийся текст создан при помощи JavaScript!" Текст программы выглядит следующим образом:

Здесь располагается текст HTML-странички.

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

Мы обращаемся к функции scroll () посредством свойства on Load.

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

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

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

СТАНДАРТНЫЕ ОБЪЕКТЫ JavaScript • Объект Date • Объект массива Array • Массивы и JavaScript 1. • Математический объект Math Объект Date В языке существуют такие объекты, тип которых предусмотрен стан дартом языка JavaScript. Под термином стандартные объекты мы пони маем такие объекты, которые в английском языке (языке оригинала, описывающего JavaScript) определяются словом predefined, т.е. объекты, которые были определены заранее.

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

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

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

Можно вставить в Ваш HTML-документ информацию о текущем времени.

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

today= new Date() 46. Java Script При помощи этой команды мы создаем новый объект Date, который называется today. Если мы не укажем определенных значений времени и числа, то по умолчанию будет использовано текущее время. Т.е. во время выполнения команды today= new Date() новый объект Date с именем today будет иметь значение, равное текущему времени, соответствующе му текущему времени на компьютере.

Объект Date может быть использован в сочетании с некоторыми методами. Нижеперечисленные методы (это не полный список методов, с которыми может работать объект Date) позволят использовать наш объект today более гибко: getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth(). При помощи этих методов можно получать ин формацию о текущем значении часов, минут, месяцев, а также устанав ливать новые значения этих параметров.

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

Чтобы задать значения времени, мы можем использовать следующую команду (здесь метод Date() вызывается посредством оператора new):

today= new Date(2000, 3, 17, 15, 35, 23) С помощью такой строчки мы создаем объект Date, который соот ветствует 15 часам 35 минутам 23 секундам 17 апреля 2000 года. Время в скобках записывается в следующей последовательности:

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

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

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

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

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

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

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

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

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

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

Мы использовали строчные переменные timeStr и dateStr, при помощи этих переменных мы сформатировали вывод времени в соответствии с требованиями. Для этого мы использовали следующую команду:

timeStr+= ( (minutes < 10) ? ": 0" : ": ") + minutes;

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

if (minutes < 10) timeStr+= ": 0" + minutes else timeStr+= " : " + minutes;

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

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

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

myArray[0]= 17;

myArray[1]= "Dima";

myArray[2]= "Pet ya";

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

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

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

f i rst element second element t hi rd element Здесь сама программа:

Приведенный выше скрипт выводит в окне броузера три строки Стандартные объекты Сначала мы создаем новый массив с именем myArray. Затем мы присваиваем элементам массива различные значения. После присваива ния мы организуем цикл. В этом цикле происходит исполнение коман ды: document. write(myArray[i] + "
");

Это команда исполняется три раза. Переменная i пробегает значения от 0 до 2. Внутри цикла мы обращаемся к элементам массива при помощи myArray[i]. Поскольку значение изменяется в пределах от 0 до 2, то мы три раза обращаемся к document.write():

document.write(myArray[0] + "
");

document.write{myArray[1 ] + "
");

document.write(myArray[2] + "
");

Массивы и JavaScript 1. Массивы не существуют в языке JavaScript 1.0 (Netscape Navigator 2.x и Microsoft Internet Explorer 3.x), поэтому необходимо позаботиться об альтернативных решениях для устаревших броузеров. В документации компании Netscape имеется следующий фрагмент программы, позволяю щей создавать массивы:

function initArray() { this.length = initArray.arguments.length for (var i = 0;

i < this.length;

i++) this[i+1] = initArray.arguments [i] } Далее можно создавать массивы при помощи таких инструкций:

myArray= new initArray (17, 3, 5) ;

Числа в скобках — начальные параметры массива. Их также можно использовать и в JavaScript 1.1. Описанный подобным образом массив JavaScript 1.0 некоторыми удобными методами, использование которых в JavaScript 1.1 предоставляет дополнительные возможности. Так, напри мер, здесь невозможно использование метода sort(), который помогает осуществить сортировку элементов массива заданным способом.

52 Java Script Математический объект Math Если появляется необходимость производить математические вычис ления, то математический объект Math предоставляет целый набор мето дов, позволяющих осуществить множество математических операций.

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

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

Если вызвать Math.random(), то мы получим случайное число в промежутке от 0 до 1. Вот результат выполнения команды document.write(Math.random()). Всякий раз при перезагрузке страницы получаемое число будет иным, отличным от предыдущего.

В конце HTML-документа помещена команда вывода случайного числа, которое записывается в окне броузера ФОРМЫ • Проверка информации, вводимой посредством форм • Проверка наличия в вводимой строке определенных символов • Доставка информации, вводимой посредством форм • Как обратить внимание пользователя на тот или иной элемент формы Проверка информации, вводимой посредством форм Формы — это бланки, в которых предусмотрены свободные места, в которые пользователь вводит необходимую информацию, это докумен ты-бланки, предназначенные для заполнения. Формы в большом количе стве используются в Интернете.

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

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

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

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

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

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

Формы Пример со второй текстовой формой несколько более сложен и интересен. Попробуем ввести какую-либо простую строчку, например, имя, в котором не содержится значок @. Такой ввод будет воспринят как ошибочный. Критерием отбора является наличие в вводимой строчке значка @. Поскольку каждый интернет-адрес электронной почты содер жит в себе значок @, то проверка наличия в данной последовательности символов представляется оправданной.

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

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

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

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

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

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

Однако отметим, что такие задачи не по силам JavaScript.

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

Это возможно осуществить лишь средствами CGI.

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

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

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

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

Если до того, как форма будет послана по сети, требуется проверка того, правильно ли осуществлен ввод информации в форму, то необходимо использовать средство обработки событий onSubmit. В теле формы (после ярлыка Нажатие кнопки приводит к обращению к функции showHide(). При помощи этой функции мы обращаемся к свойству visibility объекта layer с именем myLayer. Путем присваивания значений "show"or "hide"выра жению document.layers["myLayer"].visibility мы имеем возможность прятать или показывать этот слой.

Выражения "show" и "hide"— это строки, они не являются зарезер вированными в JavaScript словами, а это значит, что мы не можем написать выражение document.layers["myLayer"].visibility= show.

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

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

document.layers ["myLayer2"].left= 200;

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

Эти три картинки показывают последовательные положения текста "Этот текст расположен внутри слоя" в окне броузера. Текст движется вместе со слоем, относительное положение которого в окне броузера меняется со временем так, как это описано в нашем скрипте 78 Java Script Вот эта программа:

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

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

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

Все что требуется от функции move() — это сосчитать очередное значе ние координаты положение слоя и присвоить его посредством document.layers["myLayer2"].left=pos.

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

Java Script Слой, содержащий текст, является прозрачным и передвигается поверх неподвижного слоя с картинкой <1>ЭТОТ текст расположен внутри слоя и вновь о слоях • Выделение видимых участков • Вложенные слои • Прозрачные слои и эффекты с ними В предыдущей главе мы рассмотрели основные свойства слоев и методы обращения с ними. Б этой главе мы рассмотрим следующие вопросы:

• выделение видимых участков;

• вложенные слои;

• прозрачные слои и эффекты с ними.

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

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

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

82 Java Script Размер видимой части — 90x70 пикселей. Первые два числа в значе нии clip в ярлыке указывают координаты левого верхнего угла видимой области, следующие два значения соответствуют координатам нижнего правого угла этой области. На следующем рисунке видимая область выделена четырехугольником и заштрихована.

Наиболее интересным представляется использование возможностей задания видимых областей изображений при помощи JavaScript. При помощи JavaScript мы можем изменить значения таких свойств объекта layer, как clip.left, clip.top, clip.right и clip.bottom.

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

И вновь о слоях 84 Java Script Текст программы выглядит следующим образом:

И вновь о слоях Кнопка, расположенная в теле странички за ярлыком , приво дит к обращению к функции start(). Первое, что необходимо вычислить — это координаты точки, расположенной в самом центре картинки. Эти координаты сохраняются в переменных middleX и middleY. Затем проис ходит обращение к функции show(). Эта функция устанавливает размер видимой области рисунка, который определяется значениями перемен ных middleX, middleY и pos.

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

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

var width= document.layers["imgLayer"].document.davinci.width;

var height= document.layers["imgLayer"].document.davinci.height;

При помощи выражения document.layers["imgLayer"] мы можем обра титься непосредственно к слою с именем imgLayer. Зачем мы используем дополнительно слово document и располагаем его после document.layers["imgLayer"]?

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

86 Java Script Вложенные слои Ранее мы уже видели, что слои могут содержать в себе несколько различных объектов. Слои также могут содержать в себе другие слои.

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

Здесь мы определили первый (родительский) слой и дали ему имя parentLayer. Этот слой содержит два других слоя, названных layer1 и layer2.

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

Однако движение дочернего слоя layer1 (или layer2) приводит к измене нию расположения текста, содержащегося лишь в этом слое.

Рассмотрим программу, создающую эти слои:

Это слой layer Это слой lауеr

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

document.layers["parentLayer"].left= 100 + pos0;

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1 ;

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

При обращении ко вложенным слоям мы не имеем возможности писать коротко document.layers["layer1"] или document.layers["layer2"]. Это объясняется тем, что вложенные слои layer1 и lауеr2 расположены внутри самостоятельного объекта parentLayer, и доступ к ним возможен только через объект parentLayer.

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

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

Java Script Рисунок "прокручивается" в неподвижной фиксированной видимой области экрана броузера И вновь о слоях Программа выглядит следующим образом:

Еще раз обратим внимание на то, каким образом мы обращаемся ко вложенным слоям:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

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

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

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

И вновь о слоях Рисунок постепенно складывается и образует одно целое из двух частей. На картинках показан этот процесс в его различных фазах Java Script Для создания этого эффекта использованы две картинки. Эти кар тинки движутся друг другу навстречу, одна — снизу вверх, другая — сверху вниз. Вот эти картинки:

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

Вот программа этого примера:

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

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

СОБЫТИЯ В JavaScript 1. • Новые события • Объект Event (событие) • Перехват событий Новые события Ранее мы уже упоминали о том, что JavaScript 1.2 имеет возможность обрабатывает новые события, которые не описаны в более ранних версиях языка. В таблице, расположенной ниже, перечислены события JavaScript 1.2.

Abort Focus MouseOut Submit Blur KeyDown MouseOver Unload Click KeyPress Mouse Up Change KeyUp Move DblClick Load Reset DragDrop Mouse Down Resize Error Mouse Move Select В настоящей главе мы рассмотрим некоторые новые события более подробно. Сначала обратимся к событию Resize. При помощи этого события мы имеем возможность узнать о том, был ли изменен пользова телем размер окна броузера. Как работает это событие, показывает следующий пример:

Измените размер окна.

События в JavaScript 1. Первоначально окно выглядело так Размер окна был изменен и JavaScript позволил отследить факт изменения размера окна 98 Java Script При помощи строчки window.onresize= message;

мы задаем действие, которое будет осуществлено при наступлении собы тия Resize. Мы определили средство управления событием onResize.

Функция message() будет выполнена при изменении размеров окна. Здесь мы определили средство обработки события новым для нас способом, однако этот способ не является новым для JavaScript 1.2. Вернемся к ранее рассмотренным примерам. Если мы хотим определить средство обработки события, связанного с нажатием кнопки, то мы можем напи сать программу привычным способом, как мы это делали ранее:

Тот же смысл несет в себе следующий текст программы:

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

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

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

писать window.onresize. Второе, после слова message мы не должны писать скобки, т.е. мы не можем написать window.onresize=message().

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

События в JavaScript 1. Объект Event (событие) В языке JavaScript 3.2 определен новый объект, это объект Event.

Объект Event обладает свойствами, которые определяют свойства собы тия. Рассмотрим пример, если на приведенной ниже картинке Вы щел кните мышкой, то появится новое окно, в котором будут написаны координаты точки, на которой расположена мышка.

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

<а href="#" onClick="alert('x:' + event.х + ' у: ' + event.у) ;

return false;

"> Здесь мы используем средство обработки событий onClick, расположенное внутри ярлыка <а>, что мы бы могли писать и в старых версиях JavaScript.

Новым здесь является то, что далее мы используем событие event и посредством event.x и event.у обращаемся к его свойствам (в данном случае это координаты точки щелчка) для того, чтобы вывести коорди наты положения точки щелчка во всплывающем окне. Здесь мы исполь зовали объект Event для того, чтобы определить координаты события.

Мы поместили весь пример внутри слоя (текст программы размещен после ярлыка <1ауег>), поэтому мы получим координаты относительно этого слоя, в нашем случае весь слой состоит из рисунка, и координаты будут выдаваться относительно этого рисунка.

100 Java Script Если бы мы не размещали наш пример в слое, то координаты были бы определены относительно окна броузера. Инструкция return false здесь используется для того, чтобы броузер не переходил по указанной ссылке, а игнорировал ее.

Объект Event обладает следующими свойствами (некоторые из них мы рассмотрим далее в примерах):

Pages:     || 2 |



© 2011 www.dissers.ru - «Бесплатная электронная библиотека»

Материалы этого сайта размещены для ознакомления, все права принадлежат их авторам.
Если Вы не согласны с тем, что Ваш материал размещён на этом сайте, пожалуйста, напишите нам, мы в течении 1-2 рабочих дней удалим его.